diff --git a/definitions/behaviors/form.js b/definitions/behaviors/form.js index 6fbb07e..747f095 100644 --- a/definitions/behaviors/form.js +++ b/definitions/behaviors/form.js @@ -91,6 +91,7 @@ $.fn.form = function(parameters) { else { if(instance !== undefined) { instance.invoke('destroy'); + module.refresh(); } module.verbose('Initializing form validation', $module, settings); module.bindEvents(); @@ -171,11 +172,9 @@ $.fn.form = function(parameters) { } $field.on('change click keyup keydown blur', function(e) { - $(this).triggerHandler(e.type + ".dirty"); + module.determine.isDirty(); }); - $field.on('change.dirty click.dirty keyup.dirty keydown.dirty blur.dirty', module.determine.isDirty); - $module.on('dirty' + eventNamespace, function(e) { settings.onDirty.call(); }); @@ -302,10 +301,6 @@ $.fn.form = function(parameters) { module.set.clean(); } - if (e && e.namespace === 'dirty') { - e.stopImmediatePropagation(); - e.preventDefault(); - } } }, @@ -313,13 +308,6 @@ $.fn.form = function(parameters) { bracketedRule: function(rule) { return (rule.type && rule.type.match(settings.regExp.bracket)); }, - shorthandFields: function(fields) { - var - fieldKeys = Object.keys(fields), - firstRule = fields[fieldKeys[0]] - ; - return module.is.shorthandRules(firstRule); - }, // duck type rule test shorthandRules: function(rules) { return (typeof rules == 'string' || Array.isArray(rules)); @@ -422,7 +410,7 @@ $.fn.form = function(parameters) { ; if( key == keyCode.escape) { module.verbose('Escape key pressed blurring field'); - $field + $field[0] .blur() ; } @@ -444,15 +432,11 @@ $.fn.form = function(parameters) { $fieldGroup = $field.closest($group), validationRules = module.get.validation($field) ; - if( $fieldGroup.hasClass(className.error) ) { + if(validationRules && (settings.on == 'blur' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) )) { module.debug('Revalidating field', $field, validationRules); - if(validationRules) { - module.validate.field( validationRules ); - } - } - else if(settings.on == 'blur') { - if(validationRules) { - module.validate.field( validationRules ); + module.validate.field( validationRules ); + if(!settings.inline) { + module.validate.form(false,true); } } }, @@ -465,7 +449,7 @@ $.fn.form = function(parameters) { if(validationRules && (settings.on == 'change' || ( $fieldGroup.hasClass(className.error) && settings.revalidate) )) { clearTimeout(module.timer); module.timer = setTimeout(function() { - module.debug('Revalidating field', $field, module.get.validation($field)); + module.debug('Revalidating field', $field, validationRules); module.validate.field( validationRules ); if(!settings.inline) { module.validate.form(false,true); @@ -527,15 +511,19 @@ $.fn.form = function(parameters) { fullFields = {} ; $.each(fields, function(name, rules) { - if(typeof rules == 'string') { - rules = [rules]; + if (!Array.isArray(rules) && typeof rules === 'object') { + fullFields[name] = rules; + } else { + if (typeof rules == 'string') { + rules = [rules]; + } + fullFields[name] = { + rules: [] + }; + $.each(rules, function (index, rule) { + fullFields[name].rules.push({type: rule}); + }); } - fullFields[name] = { - rules: [] - }; - $.each(rules, function(index, rule) { - fullFields[name].rules.push({ type: rule }); - }); }); return fullFields; }, @@ -551,8 +539,23 @@ $.fn.form = function(parameters) { requiresValue = (prompt.search('{value}') !== -1), requiresName = (prompt.search('{name}') !== -1), $label, - name + name, + parts, + suffixPrompt ; + if(ancillary && ancillary.indexOf('..') >= 0) { + parts = ancillary.split('..', 2); + if(!rule.prompt) { + suffixPrompt = ( + parts[0] === '' ? settings.prompt.maxValue.replace(/\{ruleValue\}/g,'{max}') : + parts[1] === '' ? settings.prompt.minValue.replace(/\{ruleValue\}/g,'{min}') : + settings.prompt.range + ); + prompt += suffixPrompt.replace(/\{name\}/g, ' ' + settings.text.and); + } + prompt = prompt.replace(/\{min\}/g, parts[0]); + prompt = prompt.replace(/\{max\}/g, parts[1]); + } if(requiresValue) { prompt = prompt.replace(/\{value\}/g, $field.val()); } @@ -588,7 +591,7 @@ $.fn.form = function(parameters) { } else { // 2.x - if(parameters.fields && module.is.shorthandFields(parameters.fields)) { + if(parameters.fields) { parameters.fields = module.get.fieldsFromShorthand(parameters.fields); } settings = $.extend(true, {}, $.fn.form.settings, parameters); @@ -616,7 +619,7 @@ $.fn.form = function(parameters) { instance = $module.data(moduleNamespace); // refresh selector cache - module.refresh(); + (instance || module).refresh(); }, field: function(identifier) { module.verbose('Finding field with identifier', identifier); @@ -862,16 +865,7 @@ $.fn.form = function(parameters) { module.debug('Adding rules', newValidation.rules, validation); }, fields: function(fields) { - var - newValidation - ; - if(fields && module.is.shorthandFields(fields)) { - newValidation = module.get.fieldsFromShorthand(fields); - } - else { - newValidation = fields; - } - validation = $.extend({}, validation, newValidation); + validation = $.extend({}, validation, module.get.fieldsFromShorthand(fields)); }, prompt: function(identifier, errors, internal) { var @@ -1165,6 +1159,14 @@ $.fn.form = function(parameters) { } } }); + }, + optional: function(identifier, bool) { + bool = (bool !== false); + $.each(validation, function(fieldName, field) { + if (identifier == fieldName || identifier == field.identifier) { + field.optional = bool; + } + }); } }, @@ -1201,6 +1203,24 @@ $.fn.form = function(parameters) { if(event && $module.data('moduleApi') !== undefined) { event.stopImmediatePropagation(); } + if(settings.errorFocus) { + var focusElement, hasTabIndex = true; + if (typeof settings.errorFocus === 'string') { + focusElement = $(settings.errorFocus); + hasTabIndex = focusElement.is('[tabindex]'); + // to be able to focus/scroll into non input elements we need a tabindex + if (!hasTabIndex) { + focusElement.attr('tabindex',-1); + } + } else { + focusElement = $group.filter('.' + className.error).first().find(selector.field); + } + focusElement.focus(); + // only remove tabindex if it was dynamically created above + if (!hasTabIndex){ + focusElement.removeAttr('tabindex'); + } + } if(ignoreCallbacks !== true) { return settings.onFailure.call(element, formErrors, values); } @@ -1290,7 +1310,7 @@ $.fn.form = function(parameters) { // cast to string avoiding encoding special values value = (value === undefined || value === '' || value === null) ? '' - : (settings.shouldTrim) ? String(value + '').trim() : String(value + '') + : (settings.shouldTrim && rule.shouldTrim !== false) || rule.shouldTrim ? String(value + '').trim() : String(value + '') ; return ruleFunction.call(field, value, ancillary, $module); } @@ -1506,6 +1526,7 @@ $.fn.form.settings = { autoCheckRequired : false, preventLeaving : false, + errorFocus : false, dateHandling : 'date', // 'date', 'input', 'formatter' onValid : function() {}, @@ -1534,12 +1555,16 @@ $.fn.form.settings = { }, text: { + and : 'and', unspecifiedRule : 'Please enter a valid value', unspecifiedField : 'This field', leavingMessage : 'There are unsaved changes on this page which will be discarded if you continue.' }, prompt: { + range : '{name} must be in a range from {min} to {max}', + maxValue : '{name} must have a maximum value of {ruleValue}', + minValue : '{name} must have a minimum value of {ruleValue}', empty : '{name} must have a value', checked : '{name} must be checked', email : '{name} must be a valid e-mail', @@ -1571,9 +1596,9 @@ $.fn.form.settings = { selector : { checkbox : 'input[type="checkbox"], input[type="radio"]', clear : '.clear', - field : 'input:not(.search), textarea, select', + field : 'input:not(.search):not([type="file"]), textarea, select', group : '.field', - input : 'input', + input : 'input:not([type="file"])', message : '.error.message', prompt : '.prompt.label', radio : 'input[type="radio"]', @@ -1702,11 +1727,24 @@ $.fn.form.settings = { } return value.match( new RegExp(regExp, flags) ); }, - + minValue: function(value, range) { + return $.fn.form.settings.rules.range(value, range+'..', 'number'); + }, + maxValue: function(value, range) { + return $.fn.form.settings.rules.range(value, '..'+range, 'number'); + }, // is valid integer or matches range integer: function(value, range) { + return $.fn.form.settings.rules.range(value, range, 'integer'); + }, + range: function(value, range, regExp) { + if(typeof regExp == "string") { + regExp = $.fn.form.settings.regExp[regExp]; + } + if(!(regExp instanceof RegExp)) { + regExp = $.fn.form.settings.regExp.integer; + } var - intRegExp = $.fn.form.settings.regExp.integer, min, max, parts @@ -1715,34 +1753,34 @@ $.fn.form.settings = { // do nothing } else if(range.indexOf('..') == -1) { - if(intRegExp.test(range)) { + if(regExp.test(range)) { min = max = range - 0; } } else { parts = range.split('..', 2); - if(intRegExp.test(parts[0])) { + if(regExp.test(parts[0])) { min = parts[0] - 0; } - if(intRegExp.test(parts[1])) { + if(regExp.test(parts[1])) { max = parts[1] - 0; } } return ( - intRegExp.test(value) && + regExp.test(value) && (min === undefined || value >= min) && (max === undefined || value <= max) ); }, // is valid number (with decimal) - decimal: function(value) { - return $.fn.form.settings.regExp.decimal.test(value); + decimal: function(value, range) { + return $.fn.form.settings.rules.range(value, range, 'decimal'); }, // is valid number - number: function(value) { - return $.fn.form.settings.regExp.number.test(value); + number: function(value, range) { + return $.fn.form.settings.rules.range(value, range, 'number'); }, // is value (case insensitive) @@ -1947,8 +1985,8 @@ $.fn.form.settings = { return; } - // allow dashes in card - cardNumber = cardNumber.replace(/[\-]/g, ''); + // allow dashes and spaces in card + cardNumber = cardNumber.replace(/[\s\-]/g, ''); // verify card types if(requiredTypes) { diff --git a/definitions/collections/form.less b/definitions/collections/form.less index 3cde7f1..813c715 100644 --- a/definitions/collections/form.less +++ b/definitions/collections/form.less @@ -178,13 +178,13 @@ margin-top: @inputLineHeight + @checkboxSliderFieldTopMargin; } .ui.ui.form .field .fields .field:not(:only-child) .ui.checkbox { - margin-top: @checkboxFieldTopMargin / 2; + margin-top: (@checkboxFieldTopMargin / 2); } .ui.ui.form .field .fields .field:not(:only-child) .ui.toggle.checkbox { - margin-top: @checkboxToggleFieldTopMargin / 2; + margin-top: (@checkboxToggleFieldTopMargin / 2); } .ui.ui.form .field .fields .field:not(:only-child) .ui.slider.checkbox { - margin-top: @checkboxSliderFieldTopMargin / 2; + margin-top: (@checkboxSliderFieldTopMargin / 2); } & when (@variationFormTransparent) { @@ -377,6 +377,7 @@ } .ui.form ::-moz-placeholder { color: @inputPlaceholderColor; + opacity: 1; } .ui.form :focus::-webkit-input-placeholder { @@ -468,6 +469,7 @@ @c: @formStates[@@state][color]; @bg: @formStates[@@state][background]; @bdc: @formStates[@@state][borderColor]; + @lbg: @formStates[@@state][labelBackground]; /* On Form */ .ui.form.@{state} .@{state}.message:not(:empty) { @@ -495,12 +497,19 @@ } .ui.ui.form .fields.@{state} .field label, + .ui.ui.form .fields.@{state} .field .ui.label:not(.corner), .ui.ui.form .field.@{state} label, + .ui.ui.form .field.@{state} .ui.label:not(.corner), .ui.ui.form .fields.@{state} .field .input, .ui.ui.form .field.@{state} .input { color: @c; } + .ui.form .fields.@{state} .field .ui.label, + .ui.form .field.@{state} .ui.label { + background-color: @lbg; + } + .ui.form .fields.@{state} .field .corner.label, .ui.form .field.@{state} .corner.label { border-color: @c; @@ -614,7 +623,7 @@ .ui.form .fields.@{state} .field .ui.dropdown, .ui.form .fields.@{state} .field .ui.dropdown .item, .ui.form .field.@{state} .ui.dropdown, - .ui.form .field.@{state} .ui.dropdown .text, + .ui.form .field.@{state} .ui.dropdown > .text, .ui.form .field.@{state} .ui.dropdown .item { background: @bg; color: @c; @@ -677,6 +686,13 @@ .ui.form .field.@{state} .checkbox .box:after { color: @c; } + + & when (@variationFormInverted) { + .ui.inverted.form .fields.@{state} .field label, + .ui.inverted.form .@{state}.field label { + color: @lbg; + } + } }) } diff --git a/definitions/collections/grid.less b/definitions/collections/grid.less index 1b5e252..70a6175 100644 --- a/definitions/collections/grid.less +++ b/definitions/collections/grid.less @@ -139,7 +139,7 @@ margin: (@rowSpacing / 2) (@gutterWidth / 2); } .ui.grid .column + .ui.vertical.divider { - height: e(%("calc(50%% - %d)", @rowSpacing / 2)); + height: e(%("calc(50%% - %d)", (@rowSpacing / 2))); } /* Remove Border on Last Horizontal Segment */ @@ -1659,7 +1659,7 @@ each(@colors, { --------------------*/ @media only screen and (max-width: @largestMobileScreen) { - .ui.stackable.grid { + .ui.ui.ui.ui.stackable.grid { width: auto; margin-left: 0 !important; margin-right: 0 !important; @@ -1868,6 +1868,10 @@ each(@colors, { Compact -----------------*/ + .ui.ui.ui.compact.grid { + margin: -(@compactGutterWidth / 2); + } + .ui.ui.ui.compact.grid > .column:not(.row), .ui.ui.ui.compact.grid > .row > .column { padding-left: (@compactGutterWidth / 2); @@ -1883,6 +1887,8 @@ each(@colors, { .ui.ui.ui.compact.grid > .row { padding-top: (@compactRowSpacing / 2); padding-bottom: (@compactRowSpacing / 2); + padding-left: 0; + padding-right: 0; } /* Columns */ @@ -1906,6 +1912,10 @@ each(@colors, { Very compact -----------------*/ + .ui.ui.ui[class*="very compact"].grid { + margin: -(@veryCompactGutterWidth / 2); + } + .ui.ui.ui[class*="very compact"].grid > .column:not(.row), .ui.ui.ui[class*="very compact"].grid > .row > .column { padding-left: (@veryCompactGutterWidth / 2); @@ -1921,8 +1931,8 @@ each(@colors, { .ui.ui.ui[class*="very compact"].grid > .row { padding-top: (@veryCompactRowSpacing / 2); padding-bottom: (@veryCompactRowSpacing / 2); - padding-left: (@veryCompactGutterWidth * 1.5); - padding-right: (@veryCompactGutterWidth * 1.5); + padding-left: 0; + padding-right: 0; } /* Columns */ diff --git a/definitions/collections/menu.less b/definitions/collections/menu.less index 3d712ed..a60e32c 100644 --- a/definitions/collections/menu.less +++ b/definitions/collections/menu.less @@ -218,7 +218,9 @@ background: @dropdownBackground; margin: @dropdownMenuDistance 0 0; box-shadow: @dropdownMenuBoxShadow; - flex-direction: column !important; +} +.ui.menu .dropdown.item:not(.column) .menu { + flex-direction: column; } diff --git a/definitions/collections/message.less b/definitions/collections/message.less index e237277..9d0e7b9 100644 --- a/definitions/collections/message.less +++ b/definitions/collections/message.less @@ -107,8 +107,12 @@ /* Icon */ -.ui.message > i.icon { +.ui.icon.message > .icons, +.ui.icon.message > i.icon { margin-right: @iconDistance; + &:last-child { + margin: 0 0 0 @iconDistance; + } } /* Close Icon */ @@ -169,6 +173,21 @@ /******************************* Variations *******************************/ +& when (@variationMessageCentered) { + .ui.centered.message, + .ui.center.aligned.message { + text-align: center; + justify-content: center; + & > .content { + flex: 0 0 auto; + } + } +} +& when (@variationMessageRightAligned) { + .ui.right.aligned.message { + text-align: right; + } +} & when (@variationMessageCompact) { /*-------------- @@ -225,6 +244,7 @@ width: 100%; align-items: center; } + .ui.icon.message > .icons, .ui.icon.message > i.icon:not(.close) { display: block; flex: 0 0 auto; @@ -240,11 +260,11 @@ vertical-align: @iconVerticalAlign; } - + .ui.icon.message > .icons + .content, .ui.icon.message > i.icon:not(.close) + .content { padding-left: @iconContentDistance; } - .ui.icon.message > i.circular.icon { + .ui.icon.message > i.circular { width: 1em; } } @@ -276,6 +296,7 @@ boxShadow : @positiveBoxShadow; boxFloatShadow : @positiveBoxFloatingShadow; text : @positiveTextColor; + invertedText : @positiveBorderColor; }; @negative: { background : @negativeBackgroundColor; @@ -283,6 +304,7 @@ boxShadow : @negativeBoxShadow; boxFloatShadow : @negativeBoxFloatingShadow; text : @negativeTextColor; + invertedText : @negativeBorderColor; }; @info: { background : @infoBackgroundColor; @@ -290,6 +312,7 @@ boxShadow : @infoBoxShadow; boxFloatShadow : @infoBoxFloatingShadow; text : @infoTextColor; + invertedText : @formInfoLabelBackground; }; @warning: { background : @warningBackgroundColor; @@ -297,6 +320,7 @@ boxShadow : @warningBoxShadow; boxFloatShadow : @warningBoxFloatingShadow; text : @warningTextColor; + invertedText : @formWarningLabelBackground; }; @error: { background : @errorBackgroundColor; @@ -304,6 +328,7 @@ boxShadow : @errorBoxShadow; boxFloatShadow : @errorBoxFloatingShadow; text : @errorTextColor; + invertedText : @formErrorLabelBackground; }; @success: { background : @successBackgroundColor; @@ -311,6 +336,7 @@ boxShadow : @successBoxShadow; boxFloatShadow : @successBoxFloatingShadow; text : @successTextColor; + invertedText : @formSuccessLabelBackground; }; } @@ -323,6 +349,7 @@ @bs: @consequences[@@color][boxShadow]; @bfs: @consequences[@@color][boxFloatShadow]; @t: @consequences[@@color][text]; + @it: @consequences[@@color][invertedText]; .ui.@{color}.message { background-color: @bg; @@ -341,6 +368,12 @@ .ui.@{color}.message .header { color: @hd; } + & when (@variationMessageInverted) { + .ui.inverted.@{color}.message, + .ui.inverted.@{color}.message .header { + color: @it; + } + } }) } diff --git a/definitions/collections/table.less b/definitions/collections/table.less index f185282..2eec75c 100644 --- a/definitions/collections/table.less +++ b/definitions/collections/table.less @@ -334,6 +334,10 @@ -moz-transform: scale(1); } + .ui.definition.table > thead:not(.full-width) > tr > th:first-child:not(:empty) { + pointer-events: auto; + } + .ui.definition.table > tfoot:not(.full-width) > tr > th:first-child { pointer-events: none; background: @definitionFooterBackground; @@ -1112,7 +1116,7 @@ each(@colors, { .ui.inverted.definition.table > thead:not(.full-width) > tr > th:first-child { background: @definitionPageBackground; } - .ui.inverted.definition.table > tbody > tr > td:first-child + .ui.inverted.definition.table > tbody > tr > td:first-child, .ui.inverted.definition.table > tfoot > tr > td:first-child, .ui.inverted.definition.table > tr > td:first-child { background: @invertedDefinitionColumnBackground; diff --git a/definitions/elements/button.less b/definitions/elements/button.less index 3e648a5..c05b51d 100644 --- a/definitions/elements/button.less +++ b/definitions/elements/button.less @@ -635,6 +635,33 @@ Variations *******************************/ +& when (@variationButtonStackable) { + /*-------------- + Stackable + ---------------*/ + + /* Tablet Or Below */ + @media only screen and (max-width: @largestMobileScreen) { + + .ui.stackable.buttons { + flex-direction: column; + width: 100%; + & .button:first-child { + border-bottom-left-radius: 0; + border-top-right-radius: @borderRadius; + } + & .button:last-child { + border-bottom-left-radius: @borderRadius; + border-top-right-radius: 0; + } + & .button:only-child { + border-radius: @borderRadius; + } + } + + } +} + & when (@variationButtonFloated) { /*------------------- Floated @@ -708,7 +735,7 @@ ---------------*/ .ui.icon.buttons .button, -.ui.icon.button:not(.animated):not(.compact) { +.ui.icon.button:not(.animated):not(.compact):not(.labeled) { padding: @verticalPadding @verticalPadding ( @verticalPadding + @shadowOffset ); } .ui.animated.icon.button > .content > .icon, diff --git a/definitions/elements/header.less b/definitions/elements/header.less index 669f316..2d7b676 100644 --- a/definitions/elements/header.less +++ b/definitions/elements/header.less @@ -62,6 +62,7 @@ Icon ---------------*/ +.ui.header > .icons, .ui.header > i.icon { display: table-cell; opacity: @iconOpacity; @@ -71,7 +72,8 @@ } /* With Text Node */ -.ui.header > i.icon:only-child { +.ui.header:not(.icon) > .icons:only-child, +.ui.header:not(.icon) > i.icon:only-child { display: inline-block; padding: 0; margin-right: @iconMargin; @@ -111,7 +113,8 @@ } /* After Icon */ -.ui.header > i.icon + .content { +.ui.header:not(.icon):not(.centered):not(.aligned) > .icons + .content, +.ui.header:not(.icon):not(.centered):not(.aligned) > i.icon + .content { padding-left: @iconMargin; display: table-cell; vertical-align: @contentIconAlignment; @@ -220,6 +223,7 @@ .ui.icon.header:first-child { margin-top: @iconHeaderFirstMargin; } + .ui.icon.header > .icons, .ui.icon.header > i.icon { float: none; display: block; @@ -238,13 +242,14 @@ display: block; padding: 0; } - .ui.icon.header > i.circular.icon { + .ui.icon.header > i.circular { font-size: @circularHeaderIconSize; } - .ui.icon.header > i.square.icon { + .ui.icon.header > i.square { font-size: @squareHeaderIconSize; } & when (@variationHeaderBlock) { + .ui.block.icon.header > .icons, .ui.block.icon.header > i.icon { margin-bottom: 0; } diff --git a/definitions/elements/icon.less b/definitions/elements/icon.less index e97ae46..c8fcfd8 100644 --- a/definitions/elements/icon.less +++ b/definitions/elements/icon.less @@ -68,9 +68,11 @@ i.icon:before { Loading ---------------*/ - i.icon.loading { + i.loading.icon { height: 1em; line-height: 1; + } + i.loading.icon, i.loading.icons { animation: loader @loadingDuration linear infinite; } } @@ -137,6 +139,9 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { width: @circularSize !important; height: @circularSize !important; + &.colored when (@variationIconColored){ + box-shadow: @coloredBoxShadow; + } } & when (@variationIconInverted) { i.circular.inverted.icon { @@ -158,6 +163,16 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { i.vertically.flipped.icon { transform: scale(1, -1); } + + & when(@variationIconGroups) { + .icons i.flipped.icon:not(.corner):not(:first-child), + .icons i.horizontally.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1); + } + .icons i.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(1, -1); + } + } } & when (@variationIconRotated) { @@ -179,6 +194,21 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { i.halfway.rotated.icon { transform: rotate(180deg); } + + & when(@variationIconGroups) { + .icons i.rotated.rotated.icon:not(.corner):not(:first-child), + .icons i.right.rotated.icon:not(.corner):not(:first-child), + .icons i.clockwise.rotated.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) rotate(90deg); + } + .icons i.left.rotated.icon:not(.corner):not(:first-child), + .icons i.counterclockwise.rotated.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) rotate(-90deg); + } + .icons i.halfway.rotated.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) rotate(180deg); + } + } } & when (@variationIconFlipped) and (@variationIconRotated) { @@ -215,6 +245,33 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { i.halfway.rotated.vertically.flipped.icon { transform: scale(1, -1) rotate(180deg); } + + & when(@variationIconGroups) { + .icons i.rotated.flipped.icon:not(.corner):not(:first-child), + .icons i.right.rotated.flipped.icon:not(.corner):not(:first-child), + .icons i.clockwise.rotated.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(90deg); + } + .icons i.left.rotated.flipped.icon:not(.corner):not(:first-child), + .icons i.counterclockwise.rotated.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(-90deg); + } + .icons i.halfway.rotated.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(-1, 1) rotate(180deg); + } + .icons i.rotated.vertically.flipped.icon:not(.corner):not(:first-child), + .icons i.right.rotated.vertically.flipped.icon:not(.corner):not(:first-child), + .icons i.clockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(90deg); + } + .icons i.left.rotated.vertically.flipped.icon:not(.corner):not(:first-child), + .icons i.counterclockwise.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(-90deg); + } + .icons i.halfway.rotated.vertically.flipped.icon:not(.corner):not(:first-child) { + transform: translateX(-50%) translateY(-50%) scale(1, -1) rotate(180deg); + } + } } & when (@variationIconBordered) { @@ -230,6 +287,9 @@ i.emphasized.icon:not(.disabled), i.emphasized.icons:not(.disabled) { height: @borderedSize; padding: @borderedVerticalPadding @borderedHorizontalPadding !important; box-shadow: @borderedShadow; + &.colored when (@variationIconColored){ + box-shadow: @coloredBoxShadow; + } } & when (@variationIconInverted) { i.bordered.inverted.icon { @@ -265,17 +325,21 @@ each(@colors, { @c: @colors[@@color][color]; @l: @colors[@@color][light]; - i.@{color}.icon.icon.icon.icon { + i.@{color}.icon.icon.icon.icon.icon { color: @c; } & when (@variationIconInverted) { - i.inverted.@{color}.icon.icon.icon.icon { + i.inverted.@{color}.icon.icon.icon.icon.icon { color: @l; } - i.inverted.bordered.@{color}.icon.icon.icon.icon, - i.inverted.circular.@{color}.icon.icon.icon.icon { - background-color: @c; - color: @white; + & when (@variationIconBordered) or (@variationIconCircular) { + i.inverted.bordered.@{color}.icon.icon.icon.icon.icon, + i.inverted.circular.@{color}.icon.icon.icon.icon.icon, + i.inverted.bordered.@{color}.icons, + i.inverted.circular.@{color}.icons { + background-color: @c; + color: @white; + } } } }) @@ -289,6 +353,7 @@ i.icon, i.icons { font-size: @medium; line-height: @lineHeight; + font-style: normal; } & when not (@variationIconSizes = false) { each(@variationIconSizes, { @@ -316,8 +381,10 @@ i.icons { position: absolute; top: 50%; left: 50%; - transform: translateX(-50%) translateY(-50%); margin: 0; + &:not(.corner):not(.rotated):not(.flipped) { + transform: translateX(-50%) translateY(-50%); + } } i.icons .icon:first-child { @@ -325,6 +392,8 @@ i.icons { width: auto; height: auto; vertical-align: top; + } + i.icons:not(.bordered):not(.circular) .icon:first-child:not(.rotated):not(.flipped) { transform: none; } @@ -333,35 +402,37 @@ i.icons { i.icons .corner.icon { top: auto; left: auto; - right: 0; - bottom: 0; - transform: none; + right: @cornerOffset; + bottom: @cornerOffset; font-size: @cornerIconSize; text-shadow: @cornerIconShadow; + &:not(.rotated):not(.flipped) { + transform: none; + } } i.icons .icon.corner[class*="top right"] { - top: 0; + top: @cornerOffset; left: auto; - right: 0; + right: @cornerOffset; bottom: auto; } i.icons .icon.corner[class*="top left"] { - top: 0; - left: 0; + top: @cornerOffset; + left: @cornerOffset; right: auto; bottom: auto; } i.icons .icon.corner[class*="bottom left"] { top: auto; - left: 0; + left: @cornerOffset; right: auto; - bottom: 0; + bottom: @cornerOffset; } i.icons .icon.corner[class*="bottom right"] { top: auto; left: auto; - right: 0; - bottom: 0; + right: @cornerOffset; + bottom: @cornerOffset; } & when (@variationIconInverted) { i.icons .inverted.corner.icon { @@ -371,4 +442,74 @@ i.icons { } } +& when ((@variationIconGroups) or (@variationIconCorner)) + and ((@variationIconBordered) or (@variationIconCircular)) { + /************************************************* + Bordered/circular with corner or group icons + *************************************************/ + i.bordered.icons, + i.circular.icons { + width: @borderedSize; + height: @borderedSize; + box-shadow: @borderedShadow; + vertical-align: middle; + &.colored when (@variationIconColored){ + box-shadow: @coloredBoxShadow; + } + } + i.circular.icons { + border-radius: 500em; + } + i.bordered.icons i.icon:first-child, + i.circular.icons i.icon:first-child { + position: absolute; + transform: translateX(-50%) translateY(-50%); + } + + & when (@variationIconInverted) { + /* Inverted Icon */ + i.bordered.inverted.icons, + i.circular.inverted.icons { + border: none; + box-shadow: none; + background-color: @black; + color: @white; + } + } + + & when (@variationIconCorner) { + /* Corner Icon */ + i.bordered.icons .icon.corner, + i.circular.icons .icon.corner, + i.bordered.icons .icon.corner[class*="bottom right"], + i.circular.icons .icon.corner[class*="bottom right"] { + top: auto; + left: auto; + right: @borderedGroupCornerOffset; + bottom: @borderedGroupCornerOffset; + } + i.bordered.icons .icon.corner[class*="top right"], + i.circular.icons .icon.corner[class*="top right"] { + top: @borderedGroupCornerOffset; + left: auto; + right: @borderedGroupCornerOffset; + bottom: auto; + } + i.bordered.icons .icon.corner[class*="top left"], + i.circular.icons .icon.corner[class*="top left"] { + top: @borderedGroupCornerOffset; + left: @borderedGroupCornerOffset; + right: auto; + bottom: auto; + } + i.bordered.icons .icon.corner[class*="bottom left"], + i.circular.icons .icon.corner[class*="bottom left"] { + top: auto; + left: @borderedGroupCornerOffset; + right: auto; + bottom: @borderedGroupCornerOffset; + } + } +} + .loadUIOverrides(); diff --git a/definitions/elements/input.less b/definitions/elements/input.less index 7782ede..338aa96 100644 --- a/definitions/elements/input.less +++ b/definitions/elements/input.less @@ -67,6 +67,7 @@ } .ui.input > input::-moz-placeholder { color: @placeholderColor; + opacity: 1; } .ui.input > input:-ms-input-placeholder { color: @placeholderColor; diff --git a/definitions/elements/loader.less b/definitions/elements/loader.less index 0b64a84..188bb1b 100644 --- a/definitions/elements/loader.less +++ b/definitions/elements/loader.less @@ -212,7 +212,7 @@ each(@colors, { .ui.@{color}.elastic.loader.loader:before, .ui.@{color}.basic.elastic.loading.button:before, .ui.@{color}.basic.elastic.loading.button:after, - .ui.@{color}.elastic.loading.loading.loading:not(.segment):before, + .ui.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before, .ui.@{color}.elastic.loading.loading.loading .input > i.icon:before, .ui.@{color}.elastic.loading.loading.loading.loading > i.icon:before, .ui.@{color}.loading.loading.loading.loading:not(.usual):not(.button):after, @@ -222,7 +222,7 @@ each(@colors, { color: @c; } .ui.inverted.@{color}.elastic.loader:before, - .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):before, + .ui.inverted.@{color}.elastic.loading.loading.loading:not(.segment):not(.segments):not(.card):before, .ui.inverted.@{color}.elastic.loading.loading.loading .input > i.icon:before, .ui.inverted.@{color}.elastic.loading.loading.loading > i.icon:before, .ui.inverted.@{color}.loading.loading.loading.loading:not(.usual):after, @@ -295,11 +295,15 @@ each(@colors, { .ui.loader.loader.loader.loader.loader.loader:not(.double):after { border-bottom-color: transparent; } +.ui.loading.loading.loading.loading.loading.loading.card:after, +.ui.loading.loading.loading.loading.loading.loading.segments:after, .ui.loading.loading.loading.loading.loading.loading.segment:after, .ui.loading.loading.loading.loading.loading.loading.form:after { border-left-color:@loaderFillColor; border-right-color:@loaderFillColor; } +.ui.loading.loading.loading.loading.loading.loading.card:not(.double):after, +.ui.loading.loading.loading.loading.loading.loading.segments:not(.double):after, .ui.loading.loading.loading.loading.loading.loading.segment:not(.double):after, .ui.loading.loading.loading.loading.loading.loading.form:not(.double):after { border-bottom-color: @loaderFillColor; @@ -316,14 +320,14 @@ each(@colors, { .ui.inverted.dimmer > .ui.elastic.loader { color: @loaderLineColor; } - .ui.elastic.loading.loading:not(.form):not(.segment):after, + .ui.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after, .ui.elastic.loading.loading .input > i.icon:after, .ui.elastic.loading.loading > i.icon:after, .ui.elastic.loader.loader:after { animation: loader 1s infinite cubic-bezier(.27, 1.05, .92, .61); animation-delay: 0.3s; } - .ui.elastic.loading.loading.loading:not(.form):not(.segment):before, + .ui.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before, .ui.elastic.loading.loading.loading .input > i.icon:before, .ui.elastic.loading.loading.loading > i.icon:before, .ui.elastic.loader.loader:before { @@ -337,27 +341,27 @@ each(@colors, { } } & when (@variationLoaderSpeeds) { - .ui.slow.elastic.loading.loading:not(.form):not(.segment):after, + .ui.slow.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after, .ui.slow.elastic.loading.loading .input > i.icon:after, .ui.slow.elastic.loading.loading > i.icon:after, .ui.slow.elastic.loader.loader:after { animation-duration: 1.5s; animation-delay: 0.45s; } - .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):before, + .ui.slow.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before, .ui.slow.elastic.loading.loading.loading .input > i.icon:before, .ui.slow.elastic.loading.loading.loading > i.icon:before, .ui.slow.elastic.loader.loader:before { animation-duration: 1.5s; } - .ui.fast.elastic.loading.loading:not(.form):not(.segment):after, + .ui.fast.elastic.loading.loading:not(.form):not(.segment):not(.segments):not(.card):after, .ui.fast.elastic.loading.loading .input > i.icon:after, .ui.fast.elastic.loading.loading > i.icon:after, .ui.fast.elastic.loader.loader:after { animation-duration: 0.66s; animation-delay: 0.20s; } - .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):before, + .ui.fast.elastic.loading.loading.loading:not(.form):not(.segment):not(.segments):not(.card):before, .ui.fast.elastic.loading.loading.loading .input > i.icon:before, .ui.fast.elastic.loading.loading.loading > i.icon:before, .ui.fast.elastic.loader.loader:before { diff --git a/definitions/elements/segment.less b/definitions/elements/segment.less index ec5e19b..cee5c73 100644 --- a/definitions/elements/segment.less +++ b/definitions/elements/segment.less @@ -62,6 +62,8 @@ --------------------*/ & when (@variationSegmentInverted) { /* Header */ + .ui.inverted.segments .segment > .ui.header .sub.header, + .ui.inverted.segments .segment > .ui.header, .ui.inverted.segment > .ui.header .sub.header, .ui.inverted.segment > .ui.header { color: @white; @@ -137,6 +139,12 @@ background: @placeholderBackground; border-color: @placeholderBorderColor; box-shadow: @placeholderBoxShadow; + &.tab { + display: none; + &.active { + display: flex; + } + } } .ui.placeholder.segment .button, @@ -475,6 +483,10 @@ .ui.horizontal.segments > .segment:last-child { border-radius: 0 @borderRadius @borderRadius 0; } + /* Equal Width */ + .ui[class*="equal width"].horizontal.segments > .segment { + width: 100%; + } } } @@ -488,9 +500,12 @@ Disabled ---------------*/ + .ui.disabled.segments, .ui.disabled.segment { opacity: @disabledOpacity; color: @disabledTextColor; + pointer-events: none; + user-select: none; } } @@ -499,13 +514,15 @@ Loading ---------------*/ + .ui.loading.segments, .ui.loading.segment { position: relative; cursor: default; pointer-events: none; - text-shadow: none !important; + user-select: none; transition: all 0s linear; } + .ui.loading.segments:before, .ui.loading.segment:before { position: absolute; content: ''; @@ -517,6 +534,7 @@ border-radius: @borderRadius; z-index: @loaderDimmerZIndex; } + .ui.loading.segments:after, .ui.loading.segment:after { position: absolute; content: ''; @@ -626,11 +644,13 @@ each(@colors,{ /*------------------- Inverted --------------------*/ - + .ui.inverted.segments, + .ui.inverted.segments .segment, .ui.inverted.segment { border: none; box-shadow: none; } + .ui.inverted.segments .segment, .ui.inverted.segment, .ui.primary.inverted.segment { background: @invertedBackground; @@ -652,9 +672,11 @@ each(@colors,{ } & when (@variationSegmentLoading) { /* Loading */ + .ui.inverted.loading.segments, .ui.inverted.loading.segment { color: @invertedLoaderLineColor; } + .ui.inverted.loading.segments:before, .ui.inverted.loading.segment:before { background: @loaderInvertedDimmerColor; } diff --git a/definitions/modules/calendar.js b/definitions/modules/calendar.js index 1757f32..7fe8aff 100644 --- a/definitions/modules/calendar.js +++ b/definitions/modules/calendar.js @@ -377,6 +377,7 @@ $.fn.calendar = function(parameters) { cell.data(metadata.date, cellDate); var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12); var disabled = (!settings.selectAdjacentDays && adjacent) || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode) || !module.helper.isEnabled(cellDate, mode); + var eventDate; if (disabled) { var disabledDate = module.helper.findDayAsObject(cellDate, mode, settings.disabledDates); if (disabledDate !== null && disabledDate[metadata.message]) { @@ -390,7 +391,7 @@ $.fn.calendar = function(parameters) { } } } else { - var eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates); + eventDate = module.helper.findDayAsObject(cellDate, mode, settings.eventDates); if (eventDate !== null) { cell.addClass(eventDate[metadata.class] || settings.eventClass); if (eventDate[metadata.message]) { @@ -407,9 +408,9 @@ $.fn.calendar = function(parameters) { } var active = module.helper.dateEqual(cellDate, date, mode); var isToday = module.helper.dateEqual(cellDate, today, mode); - cell.toggleClass(className.adjacentCell, adjacent); + cell.toggleClass(className.adjacentCell, adjacent && !eventDate); cell.toggleClass(className.disabledCell, disabled); - cell.toggleClass(className.activeCell, active && !adjacent); + cell.toggleClass(className.activeCell, active && !(adjacent && disabled)); if (!isHour && !isMinute) { cell.toggleClass(className.todayCell, !adjacent && isToday); } @@ -971,7 +972,7 @@ $.fn.calendar = function(parameters) { helper: { isDisabled: function(date, mode) { - return (mode === 'day' || mode === 'month' || mode === 'year') && ((settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){ + return (mode === 'day' || mode === 'month' || mode === 'year') && ((mode === 'day' && settings.disabledDaysOfWeek.indexOf(date.getDay()) !== -1) || settings.disabledDates.some(function(d){ if(typeof d === 'string') { d = module.helper.sanitiseDate(d); } @@ -1073,14 +1074,11 @@ $.fn.calendar = function(parameters) { return null; }, sanitiseDate: function (date) { - if (!date) { - return undefined; - } if (!(date instanceof Date)) { date = parser.date('' + date, settings); } - if (!date || date === null || isNaN(date.getTime())) { - return undefined; + if (!date || isNaN(date.getTime())) { + return null; } return date; }, @@ -1467,11 +1465,11 @@ $.fn.calendar.settings = { if (text.length === 0) { return null; } - if(text.match(/^[0-9]{4}[\/\-\.][0-9]{2}[\/\-\.][0-9]{2}$/)){ + if(text.match(/^[0-9]{4}[\/\-\.][0-9]{1,2}[\/\-\.][0-9]{1,2}$/)){ text = text.replace(/[\/\-\.]/g,'/') + ' 00:00:00'; } // Reverse date and month in some cases - text = settings.monthFirst || !text.match(/^[0-9]{2}[\/\-\.]/) ? text : text.replace(/[\/\-\.]/g,'/').replace(/([0-9]+)\/([0-9]+)/,'$2/$1'); + text = settings.monthFirst || !text.match(/^[0-9]{1,2}[\/\-\.]/) ? text : text.replace(/[\/\-\.]/g,'/').replace(/([0-9]+)\/([0-9]+)/,'$2/$1'); var textDate = new Date(text); var numberOnly = text.match(/^[0-9]+$/) !== null; if(!numberOnly && !isNaN(textDate.getDate())) { diff --git a/definitions/modules/calendar.less b/definitions/modules/calendar.less index aaa7f11..5866880 100644 --- a/definitions/modules/calendar.less +++ b/definitions/modules/calendar.less @@ -127,7 +127,7 @@ color: @disabledTextColor; } -.ui.calendar .ui.table tr .adjacent:not(.disabled) { +.ui.calendar .ui.table tr .adjacent:not(.disabled):not(.active) { color: @adjacentTextColor; background: @adjacentBackground; } @@ -166,7 +166,7 @@ color: @invertedDisabledTextColor; } - .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled) { + .ui.inverted.calendar .ui.inverted.table tr .adjacent:not(.disabled):not(.active) { color: @adjacentInvertedTextColor; background: @adjacentInvertedBackground; } diff --git a/definitions/modules/checkbox.less b/definitions/modules/checkbox.less index 32974de..43a5376 100644 --- a/definitions/modules/checkbox.less +++ b/definitions/modules/checkbox.less @@ -217,7 +217,17 @@ color: @checkboxColor; transition: @checkboxTransition; } - +& when (@variationCheckboxRightAligned) { + .ui.right.aligned.checkbox label { + padding-left: 0; + padding-right: @labelDistance; + &:after, + &:before { + right: 0; + left: auto; + } + } +} /*-------------- Label ---------------*/ @@ -317,6 +327,12 @@ left: @toggleCenterOffset; } } + & when (@variationCheckboxRightAligned) { + .ui.right.aligned.indeterminate.toggle.checkbox input:not([type=radio]) ~ label:after { + left: auto; + right: @toggleCenterOffset; + } + } } /*-------------- @@ -333,14 +349,16 @@ color: @checkboxActiveFocusCheckColor; } +& when (@variationCheckboxReadonly) { + /*-------------- + Read-Only + ---------------*/ -/*-------------- - Read-Only ----------------*/ - -.ui.read-only.checkbox, -.ui.read-only.checkbox label { - cursor: default; + .ui.read-only.checkbox, + .ui.read-only.checkbox label { + cursor: default; + pointer-events: none; + } } & when (@variationCheckboxDisabled) { @@ -350,7 +368,7 @@ .ui.disabled.checkbox label, .ui.checkbox input[disabled] ~ label { - cursor: default !important; + cursor: default; opacity: @disabledCheckboxOpacity; color: @disabledCheckboxLabelColor; pointer-events: none; @@ -542,6 +560,22 @@ .ui.slider.checkbox input:focus:checked ~ label:before { background-color: @sliderOnFocusLineColor !important; } + + & when (@variationCheckboxRightAligned) { + .ui.right.aligned.slider.checkbox label { + padding-left: 0; + padding-right: @sliderLabelDistance; + } + .ui.right.aligned.slider.checkbox label:after { + left: auto; + right: @sliderTravelDistance; + transition: @sliderHandleTransitionRightAligned; + } + .ui.right.aligned.slider.checkbox input:checked ~ label:after { + left: auto; + right: 0; + } + } } & when (@variationCheckboxToggle) { @@ -643,6 +677,22 @@ .ui.toggle.checkbox input:focus:checked ~ label:before { background-color: @toggleOnFocusLaneColor !important; } + + & when (@variationCheckboxRightAligned) { + .ui.right.aligned.toggle.checkbox label { + padding-left: 0; + padding-right: @toggleLabelDistance; + } + .ui.right.aligned.toggle.checkbox input ~ label:after { + left: auto; + right: @toggleOnOffset; + transition: @toggleHandleTransitionRightAligned; + } + .ui.right.aligned.toggle.checkbox input:checked ~ label:after { + left: auto; + right: @toggleOffOffset; + } + } } /******************************* diff --git a/definitions/modules/dimmer.js b/definitions/modules/dimmer.js index 9429a9e..f3678b5 100644 --- a/definitions/modules/dimmer.js +++ b/definitions/modules/dimmer.js @@ -155,7 +155,7 @@ $.fn.dimmer = function(parameters) { event: { click: function(event) { - module.verbose('Determining if event occured on dimmer', event); + module.verbose('Determining if event occurred on dimmer', event); if( $dimmer.find(event.target).length === 0 || $(event.target).is(selector.content) ) { module.hide(); event.stopImmediatePropagation(); @@ -255,7 +255,7 @@ $.fn.dimmer = function(parameters) { displayType : settings.useFlex ? 'flex' : 'block', - animation : settings.transition + ' in', + animation : (settings.transition.showMethod || settings.transition) + ' in', queue : false, duration : module.get.duration(), useFailSafe : true, @@ -302,7 +302,7 @@ $.fn.dimmer = function(parameters) { displayType : settings.useFlex ? 'flex' : 'block', - animation : settings.transition + ' out', + animation : (settings.transition.hideMethod || settings.transition) + ' out', queue : false, duration : module.get.duration(), useFailSafe : true, @@ -335,15 +335,12 @@ $.fn.dimmer = function(parameters) { return $dimmer; }, duration: function() { - if(typeof settings.duration == 'object') { - if( module.is.active() ) { - return settings.duration.hide; - } - else { - return settings.duration.show; - } + if( module.is.active() ) { + return settings.transition.hideDuration || settings.duration.hide || settings.duration; + } + else { + return settings.transition.showDuration || settings.duration.show || settings.duration; } - return settings.duration; } }, diff --git a/definitions/modules/dropdown.js b/definitions/modules/dropdown.js index 9edd33d..c307885 100644 --- a/definitions/modules/dropdown.js +++ b/definitions/modules/dropdown.js @@ -87,6 +87,7 @@ $.fn.dropdown = function(parameters) { internalChange = false, iconClicked = false, element = this, + focused = false, instance = $module.data(moduleNamespace), selectActionActive, @@ -296,7 +297,9 @@ $.fn.dropdown = function(parameters) { : module.get.query() ; module.verbose('Searching for query', query); - if(module.has.minCharacters(query)) { + if(settings.fireOnInit === false && module.is.initialLoad()) { + module.verbose('Skipping callback on initial load', settings.onSearch); + } else if(module.has.minCharacters(query) && settings.onSearch.call(element, query) !== false) { module.filter(query); } else { @@ -358,7 +361,7 @@ $.fn.dropdown = function(parameters) { if( !module.has.menu() ) { module.create.menu(); } - if ( module.is.selection() && module.is.clearable() && !module.has.clearItem() ) { + if ( module.is.clearable() && !module.has.clearItem() ) { module.verbose('Adding clear icon'); $clear = $('') .addClass('remove icon') @@ -369,7 +372,7 @@ $.fn.dropdown = function(parameters) { module.verbose('Adding search input'); $search = $('') .addClass(className.search) - .prop('autocomplete', 'off') + .prop('autocomplete', module.is.chrome() ? 'fomantic-search' : 'off') .insertBefore($text) ; } @@ -497,6 +500,11 @@ $.fn.dropdown = function(parameters) { ; }, + clearItems: function() { + $menu.empty(); + module.refreshItems(); + }, + toggle: function() { module.verbose('Toggling menu visibility'); if( !module.is.active() ) { @@ -512,9 +520,12 @@ $.fn.dropdown = function(parameters) { ? callback : function(){} ; + if ((focused || iconClicked) && module.is.remote() && module.is.noApiCache()) { + module.clearItems(); + } if(!module.can.show() && module.is.remote()) { module.debug('No API results retrieved, searching before show'); - module.queryRemote(module.get.query(), module.show); + module.queryRemote(module.get.query(), module.show, [callback, preventFocus]); } if( module.can.show() && !module.is.active() ) { module.debug('Showing dropdown'); @@ -560,6 +571,7 @@ $.fn.dropdown = function(parameters) { module.unbind.intent(); } iconClicked = false; + focused = false; }, hideOthers: function() { @@ -638,6 +650,7 @@ $.fn.dropdown = function(parameters) { if(module.is.multiple()) { $module .on(clickEvent + eventNamespace, module.event.click) + .on(clickEvent + eventNamespace, module.event.search.focus) ; } } @@ -767,11 +780,14 @@ $.fn.dropdown = function(parameters) { if(!Array.isArray(preSelected)) { preSelected = preSelected && preSelected!=="" ? preSelected.split(settings.delimiter) : []; } - $.each(preSelected,function(index,value){ - $item.filter('[data-value="'+value+'"]') - .addClass(className.filtered) - ; - }); + if (module.is.multiple()) { + $.each(preSelected,function(index,value){ + $item.filter('[data-value="'+value+'"]') + .addClass(className.filtered) + ; + }); + } + module.focusSearch(true); afterFiltered(); }); } @@ -785,7 +801,10 @@ $.fn.dropdown = function(parameters) { } }, - queryRemote: function(query, callback) { + queryRemote: function(query, callback, callbackParameters) { + if(!Array.isArray(callbackParameters)){ + callbackParameters = [callbackParameters]; + } var apiSettings = { errorDuration : false, @@ -796,11 +815,15 @@ $.fn.dropdown = function(parameters) { }, onError: function() { module.add.message(message.serverError); - callback(); + iconClicked = false; + focused = false; + callback.apply(null, callbackParameters); }, onFailure: function() { module.add.message(message.serverError); - callback(); + iconClicked = false; + focused = false; + callback.apply(null, callbackParameters); }, onSuccess : function(response) { var @@ -817,7 +840,16 @@ $.fn.dropdown = function(parameters) { if(values.length===0 && !settings.allowAdditions) { module.add.message(message.noResults); } - callback(); + else { + var value = module.is.multiple() ? module.get.values() : module.get.value(); + if (value !== '') { + module.verbose('Value(s) present after click icon, select value(s) in items'); + module.set.selected(value, null, null, true); + } + } + iconClicked = false; + focused = false; + callback.apply(null, callbackParameters); } } ; @@ -1049,6 +1081,7 @@ $.fn.dropdown = function(parameters) { }, focus: function() { if(settings.showOnFocus && !activated && module.is.hidden() && !pageLostFocus) { + focused = true; module.show(); } }, @@ -1098,7 +1131,8 @@ $.fn.dropdown = function(parameters) { if(module.is.multiple()) { module.remove.activeLabel(); } - if(settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin')) { + if(!focused && !module.is.active() && (settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin'))) { + focused = true; module.search(); } }, @@ -1143,6 +1177,7 @@ $.fn.dropdown = function(parameters) { } else { module.toggle(); } + event.stopPropagation(); } }, text: { @@ -1182,10 +1217,11 @@ $.fn.dropdown = function(parameters) { $label.addClass(className.active); } settings.onLabelSelect.apply(this, $labels.filter('.' + className.active)); + event.stopPropagation(); } }, remove: { - click: function() { + click: function(event) { var $label = $(this).parent() ; @@ -1197,6 +1233,7 @@ $.fn.dropdown = function(parameters) { // remove this label only module.remove.activeLabels( $label ); } + event.stopPropagation(); } }, test: { @@ -1209,6 +1246,9 @@ $.fn.dropdown = function(parameters) { if(module.is.bubbledLabelClick(event) || module.is.bubbledIconClick(event)) { return; } + if (!module.is.multiple() || (module.is.multiple() && !module.is.active())) { + focused = true; + } if( module.determine.eventOnElement(event, toggleBehavior) ) { event.preventDefault(); } @@ -1829,7 +1869,7 @@ $.fn.dropdown = function(parameters) { return count; }, transition: function($subMenu) { - return (settings.transition == 'auto') + return (settings.transition === 'auto') ? module.is.upward($subMenu) ? 'slide up' : 'slide down' @@ -1892,7 +1932,7 @@ $.fn.dropdown = function(parameters) { : value ; }, - values: function() { + values: function(raw) { var value = module.get.value() ; @@ -1901,7 +1941,7 @@ $.fn.dropdown = function(parameters) { } return ( !module.has.selectInput() && module.is.multiple() ) ? (typeof value == 'string') // delimited string - ? module.escape.htmlEntities(value).split(settings.delimiter) + ? (raw ? value : module.escape.htmlEntities(value)).split(settings.delimiter) : '' : value ; @@ -1945,8 +1985,8 @@ $.fn.dropdown = function(parameters) { return ($choice.data(metadata.text) !== undefined) ? $choice.data(metadata.text) : (preserveHTML) - ? $choice.html().trim() - : $choice.text().trim() + ? $choice.html() && $choice.html().trim() + : $choice.text() && $choice.text().trim() ; } }, @@ -2136,6 +2176,9 @@ $.fn.dropdown = function(parameters) { ; } return $selectedItem; + }, + displayType: function() { + return $module.hasClass('column') ? 'flex' : settings.displayType; } }, @@ -2327,7 +2370,7 @@ $.fn.dropdown = function(parameters) { clear: function(preventChangeTrigger) { if(module.is.multiple() && settings.useLabels) { - module.remove.labels(); + module.remove.labels($module.find(selector.label), preventChangeTrigger); } else { module.remove.activeItem(); @@ -2690,7 +2733,7 @@ $.fn.dropdown = function(parameters) { module.clear(); module.set.selected(value, $selectedItem); }, - selected: function(value, $selectedItem) { + selected: function(value, $selectedItem, preventChangeTrigger, keepSearchTerm) { var isMultiple = module.is.multiple() ; @@ -2752,8 +2795,10 @@ $.fn.dropdown = function(parameters) { if(settings.apiSettings && settings.saveRemoteData) { module.save.remoteData(selectedText, selectedValue); } - module.set.text(selectedText); - module.set.value(selectedValue, selectedText, $selected); + if (!keepSearchTerm) { + module.set.text(selectedText); + } + module.set.value(selectedValue, selectedText, $selected, preventChangeTrigger); $selected .addClass(className.active) .addClass(className.selected) @@ -2761,7 +2806,9 @@ $.fn.dropdown = function(parameters) { } }) ; - module.remove.searchTerm(); + if (!keepSearchTerm) { + module.remove.searchTerm(); + } } }, @@ -2925,7 +2972,7 @@ $.fn.dropdown = function(parameters) { }, value: function(addedValue, addedText, $selectedItem) { var - currentValue = module.get.values(), + currentValue = module.get.values(true), newValue ; if(module.has.value(addedValue)) { @@ -3049,7 +3096,7 @@ $.fn.dropdown = function(parameters) { userAddition: function() { $item.filter(selector.addition).remove(); }, - selected: function(value, $selectedItem) { + selected: function(value, $selectedItem, preventChangeTrigger) { $selectedItem = (settings.allowAdditions) ? $selectedItem || module.get.itemWithAdditions(value) : $selectedItem || module.get.item(value) @@ -3068,11 +3115,11 @@ $.fn.dropdown = function(parameters) { ; if(module.is.multiple()) { if(settings.useLabels) { - module.remove.value(selectedValue, selectedText, $selected); + module.remove.value(selectedValue, selectedText, $selected, preventChangeTrigger); module.remove.label(selectedValue); } else { - module.remove.value(selectedValue, selectedText, $selected); + module.remove.value(selectedValue, selectedText, $selected, preventChangeTrigger); if(module.get.selectionCount() === 0) { module.set.placeholderText(); } @@ -3082,7 +3129,7 @@ $.fn.dropdown = function(parameters) { } } else { - module.remove.value(selectedValue, selectedText, $selected); + module.remove.value(selectedValue, selectedText, $selected, preventChangeTrigger); } $selected .removeClass(className.filtered) @@ -3097,7 +3144,7 @@ $.fn.dropdown = function(parameters) { selectedItem: function() { $item.removeClass(className.selected); }, - value: function(removedValue, removedText, $removedItem) { + value: function(removedValue, removedText, $removedItem, preventChangeTrigger) { var values = module.get.values(), newValue @@ -3119,7 +3166,7 @@ $.fn.dropdown = function(parameters) { else { settings.onRemove.call(element, removedValue, removedText, $removedItem); } - module.set.value(newValue, removedText, $removedItem); + module.set.value(newValue, removedText, $removedItem, preventChangeTrigger); module.check.maxSelections(); }, arrayValue: function(removedValue, values) { @@ -3134,8 +3181,9 @@ $.fn.dropdown = function(parameters) { }, label: function(value, shouldAnimate) { var + escapedValue = module.escape.value(value), $labels = $module.find(selector.label), - $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(settings.ignoreCase ? value.toLowerCase() : value) +'"]') + $removedLabel = $labels.filter('[data-' + metadata.value + '="' + module.escape.string(settings.ignoreCase ? escapedValue.toLowerCase() : escapedValue) +'"]') ; module.verbose('Removing label', $removedLabel); $removedLabel.remove(); @@ -3145,7 +3193,7 @@ $.fn.dropdown = function(parameters) { module.verbose('Removing active label selections', $activeLabels); module.remove.labels($activeLabels); }, - labels: function($labels) { + labels: function($labels, preventChangeTrigger) { $labels = $labels || $module.find(selector.label); module.verbose('Removing labels', $labels); $labels @@ -3164,12 +3212,12 @@ $.fn.dropdown = function(parameters) { } module.remove.message(); if(isUserValue) { - module.remove.value(stringValue); + module.remove.value(stringValue, stringValue, module.get.item(stringValue), preventChangeTrigger); module.remove.label(stringValue); } else { // selected will also remove label - module.remove.selected(stringValue); + module.remove.selected(stringValue, false, preventChangeTrigger); } }) ; @@ -3248,6 +3296,9 @@ $.fn.dropdown = function(parameters) { menu: function() { return ($menu.length > 0); }, + subMenu: function($currentMenu) { + return ($currentMenu || $menu).find(selector.menu).length > 0; + }, message: function() { return ($menu.children(selector.message).length !== 0); }, @@ -3284,7 +3335,7 @@ $.fn.dropdown = function(parameters) { }, valueMatchingCase: function(value) { var - values = module.get.values(), + values = module.get.values(true), hasValue = Array.isArray(values) ? values && ($.inArray(value, values) !== -1) : (values == value) @@ -3296,7 +3347,7 @@ $.fn.dropdown = function(parameters) { }, valueIgnoringCase: function(value) { var - values = module.get.values(), + values = module.get.values(true), hasValue = false ; if(!Array.isArray(values)) { @@ -3328,6 +3379,9 @@ $.fn.dropdown = function(parameters) { bubbledIconClick: function(event) { return $(event.target).closest($icon).length > 0; }, + chrome: function() { + return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime); + }, alreadySetup: function() { return ($module.is('select') && $module.parent(selector.dropdown).data(moduleNamespace) !== undefined && $module.prev().length === 0); }, @@ -3380,6 +3434,9 @@ $.fn.dropdown = function(parameters) { remote: function() { return settings.apiSettings && module.can.useAPI(); }, + noApiCache: function() { + return settings.apiSettings && !settings.apiSettings.cache + }, single: function() { return !module.is.multiple(); }, @@ -3474,6 +3531,9 @@ $.fn.dropdown = function(parameters) { if(module.is.verticallyScrollableContext()) { calculations.menu.offset.top += calculations.context.scrollTop; } + if(module.has.subMenu($currentMenu)) { + calculations.menu.height += $currentMenu.find(selector.menu).first().outerHeight(); + } onScreen = { above : (calculations.context.scrollTop) <= calculations.menu.offset.top - calculations.context.offset.top - calculations.menu.height, below : (calculations.context.scrollTop + calculations.context.height) >= calculations.menu.offset.top - calculations.context.offset.top + calculations.menu.height @@ -3560,16 +3620,15 @@ $.fn.dropdown = function(parameters) { ; module.verbose('Doing menu show animation', $currentMenu); module.set.direction($subMenu); - transition = module.get.transition($subMenu); + transition = settings.transition.showMethod || module.get.transition($subMenu); if( module.is.selection() ) { module.set.scrollPosition(module.get.selectedItem(), true); } if( module.is.hidden($currentMenu) || module.is.animating($currentMenu) ) { - var displayType = $module.hasClass('column') ? 'flex' : false; - if(transition == 'none') { + if(transition === 'none') { start(); $currentMenu.transition({ - displayType: displayType + displayType: module.get.displayType() }).transition('show'); callback.call(element); } @@ -3579,10 +3638,10 @@ $.fn.dropdown = function(parameters) { animation : transition + ' in', debug : settings.debug, verbose : settings.verbose, - duration : settings.duration, + duration : settings.transition.showDuration || settings.duration, queue : true, onStart : start, - displayType: displayType, + displayType: module.get.displayType(), onComplete : function() { callback.call(element); } @@ -3605,7 +3664,7 @@ $.fn.dropdown = function(parameters) { } module.remove.active(); }, - transition = module.get.transition($subMenu) + transition = settings.transition.hideMethod || module.get.transition($subMenu) ; callback = $.isFunction(callback) ? callback @@ -3614,20 +3673,23 @@ $.fn.dropdown = function(parameters) { if( module.is.visible($currentMenu) || module.is.animating($currentMenu) ) { module.verbose('Doing menu hide animation', $currentMenu); - if(transition == 'none') { + if(transition === 'none') { start(); - $currentMenu.transition('hide'); + $currentMenu.transition({ + displayType: module.get.displayType() + }).transition('hide'); callback.call(element); } else if($.fn.transition !== undefined && $module.transition('is supported')) { $currentMenu .transition({ animation : transition + ' out', - duration : settings.duration, + duration : settings.transition.hideDuration || settings.duration, debug : settings.debug, verbose : settings.verbose, queue : false, onStart : start, + displayType: module.get.displayType(), onComplete : function() { callback.call(element); } @@ -3956,6 +4018,7 @@ $.fn.dropdown.settings = { transition : 'auto', // auto transition will slide down or up based on direction duration : 200, // duration of transition + displayType : false, // displayType of transition glyphWidth : 1.037, // widest glyph width in em (W is 1.037 em) used to calculate multiselect input width @@ -3980,6 +4043,7 @@ $.fn.dropdown.settings = { onChange : function(value, text, $selected){}, onAdd : function(value, text, $selected){}, onRemove : function(value, text, $selected){}, + onSearch : function(searchTerm){}, onLabelSelect : function($selectedLabels){}, onLabelCreate : function(value, text) { return $(this); }, @@ -4027,19 +4091,21 @@ $.fn.dropdown.settings = { // property names for remote query fields: { - remoteValues : 'results', // grouping for api results - values : 'values', // grouping for all dropdown values - disabled : 'disabled', // whether value should be disabled - name : 'name', // displayed dropdown text - value : 'value', // actual dropdown value - text : 'text', // displayed text when selected - type : 'type', // type of dropdown element - image : 'image', // optional image path - imageClass : 'imageClass', // optional individual class for image - icon : 'icon', // optional icon name - iconClass : 'iconClass', // optional individual class for icon (for example to use flag instead) - class : 'class', // optional individual class for item/header - divider : 'divider' // optional divider append for group headers + remoteValues : 'results', // grouping for api results + values : 'values', // grouping for all dropdown values + disabled : 'disabled', // whether value should be disabled + name : 'name', // displayed dropdown text + description : 'description', // displayed dropdown description + descriptionVertical : 'descriptionVertical', // whether description should be vertical + value : 'value', // actual dropdown value + text : 'text', // displayed text when selected + type : 'type', // type of dropdown element + image : 'image', // optional image path + imageClass : 'imageClass', // optional individual class for image + icon : 'icon', // optional icon name + iconClass : 'iconClass', // optional individual class for icon (for example to use flag instead) + class : 'class', // optional individual class for item/header + divider : 'divider' // optional divider append for group headers }, keys : { @@ -4078,45 +4144,48 @@ $.fn.dropdown.settings = { }, className : { - active : 'active', - addition : 'addition', - animating : 'animating', - disabled : 'disabled', - empty : 'empty', - dropdown : 'ui dropdown', - filtered : 'filtered', - hidden : 'hidden transition', - icon : 'icon', - image : 'image', - item : 'item', - label : 'ui label', - loading : 'loading', - menu : 'menu', - message : 'message', - multiple : 'multiple', - placeholder : 'default', - sizer : 'sizer', - search : 'search', - selected : 'selected', - selection : 'selection', - upward : 'upward', - leftward : 'left', - visible : 'visible', - clearable : 'clearable', - noselection : 'noselection', - delete : 'delete', - header : 'header', - divider : 'divider', - groupIcon : '', - unfilterable : 'unfilterable' + active : 'active', + addition : 'addition', + animating : 'animating', + description : 'description', + descriptionVertical : 'vertical', + disabled : 'disabled', + empty : 'empty', + dropdown : 'ui dropdown', + filtered : 'filtered', + hidden : 'hidden transition', + icon : 'icon', + image : 'image', + item : 'item', + label : 'ui label', + loading : 'loading', + menu : 'menu', + message : 'message', + multiple : 'multiple', + placeholder : 'default', + sizer : 'sizer', + search : 'search', + selected : 'selected', + selection : 'selection', + text : 'text', + upward : 'upward', + leftward : 'left', + visible : 'visible', + clearable : 'clearable', + noselection : 'noselection', + delete : 'delete', + header : 'header', + divider : 'divider', + groupIcon : '', + unfilterable : 'unfilterable' } }; /* Templates */ $.fn.dropdown.settings.templates = { - deQuote: function(string) { - return String(string).replace(/"/g,""); + deQuote: function(string, encode) { + return String(string).replace(/"/g,encode ? """ : ""); }, escape: function(string, preserveHTML) { if (preserveHTML){ @@ -4174,26 +4243,49 @@ $.fn.dropdown.settings.templates = { var itemType = (option[fields.type]) ? option[fields.type] - : 'item' + : 'item', + isMenu = itemType.indexOf('menu') !== -1 ; - if( itemType === 'item' ) { + if( itemType === 'item' || isMenu) { var maybeText = (option[fields.text]) - ? ' data-text="' + deQuote(option[fields.text]) + '"' + ? ' data-text="' + deQuote(option[fields.text],true) + '"' : '', maybeDisabled = (option[fields.disabled]) ? className.disabled+' ' - : '' + : '', + maybeDescriptionVertical = (option[fields.descriptionVertical]) + ? className.descriptionVertical+' ' + : '', + hasDescription = (escape(option[fields.description] || '', preserveHTML) != '') ; - html += '
'; + html += '
'; + if (isMenu) { + html += ''; + } if(option[fields.image]) { html += ''; } if(option[fields.icon]) { html += ''; } + if(hasDescription){ + html += ''+ escape(option[fields.description] || '', preserveHTML) + ''; + html += (!isMenu) ? '' : ''; + } + if (isMenu) { + html += ''; + } html += escape(option[fields.name] || '', preserveHTML); + if (isMenu) { + html += ''; + html += '
'; + html += $.fn.dropdown.settings.templates.menu(option, fields, preserveHTML, className); + html += '
'; + } else if(hasDescription){ + html += ''; + } html += '
'; } else if (itemType === 'header') { var groupName = escape(option[fields.name] || '', preserveHTML), diff --git a/definitions/modules/dropdown.less b/definitions/modules/dropdown.less index 3953c20..00c1374 100644 --- a/definitions/modules/dropdown.less +++ b/definitions/modules/dropdown.less @@ -87,6 +87,7 @@ .ui.dropdown:not(.labeled) > .dropdown.icon { position: relative; width: auto; + min-width: @dropdownIconMinWidth; font-size: @dropdownIconSize; margin: @dropdownIconMargin; } @@ -267,6 +268,7 @@ ---------------*/ /* Icons / Flags / Labels / Image */ +.ui.dropdown > .text > i.icons, .ui.dropdown > .text > i.icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, @@ -274,6 +276,7 @@ .ui.dropdown > .text > .image { margin-top: @textLineHeightOffset; } +.ui.dropdown .menu > .item > i.icons, .ui.dropdown .menu > .item > i.icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, @@ -282,11 +285,13 @@ margin-top: @itemLineHeightOffset; } +.ui.dropdown > .text > i.icons, .ui.dropdown > .text > i.icon, .ui.dropdown > .text > .label, .ui.dropdown > .text > .flag, .ui.dropdown > .text > img, .ui.dropdown > .text > .image, +.ui.dropdown .menu > .item > i.icons, .ui.dropdown .menu > .item > i.icon, .ui.dropdown .menu > .item > .label, .ui.dropdown .menu > .item > .flag, @@ -767,29 +772,44 @@ select.ui.dropdown { } } -/* Clearable Selection */ -.ui.dropdown > .remove.icon { - cursor: pointer; - font-size: @dropdownIconSize; - margin: @selectionIconMargin; - padding: @selectionIconPadding; - right: 3em; - top: @selectionVerticalPadding; - position: absolute; - opacity: 0.6; - z-index: @selectionIconZIndex; -} +& when (@variationDropdownClear) { + /* Clearable Selection */ + .ui.dropdown > .remove.icon { + cursor: pointer; + font-size: @dropdownIconSize; + margin: @selectionIconMargin; + padding: @selectionIconPadding; + right: @clearableIconPosition; + top: @selectionVerticalPadding; + position: absolute; + opacity: @clearableIconOpacity; + z-index: @selectionIconZIndex; + } + .ui.selection.dropdown > .remove.icon { + right: @clearableIconSelectionPosition; + } + .ui.inline.dropdown > .remove.icon { + right: @clearableIconInlinePosition; + } -.ui.clearable.dropdown .text, -.ui.clearable.dropdown a:last-of-type { - margin-right: 1.5em; -} + .ui.clearable.dropdown .text, + .ui.clearable.dropdown a:last-of-type { + margin-right: @clearableTextMargin; + } -.ui.dropdown select.noselection ~ .remove.icon, -.ui.dropdown input[value=''] ~ .remove.icon, -.ui.dropdown input:not([value]) ~ .remove.icon, -.ui.dropdown.loading > .remove.icon { - display: none; + .ui.dropdown select.noselection ~ .remove.icon, + .ui.dropdown input[value=''] ~ .remove.icon, + .ui.dropdown input:not([value]) ~ .remove.icon, + .ui.dropdown.loading > .remove.icon { + display: none; + } + + .ui.dropdown:not(.selection) > .remove.icon ~ .dropdown.icon { + margin-left: @clearableIconMargin; + } + .ui.dropdown:not(.selection) > .remove.icon { + margin-top: -@clearableIconMarginTop; + } } & when (@variationDropdownMultiple) { @@ -1107,11 +1127,12 @@ select.ui.dropdown { /*-------------------- Clear ----------------------*/ - + .ui.dropdown > .remove.icon, .ui.dropdown > .clear.dropdown.icon { opacity: @clearableIconOpacity; transition: opacity @defaultDuration @defaultEasing; } + .ui.dropdown > .remove.icon:hover, .ui.dropdown > .clear.dropdown.icon:hover { opacity: @clearableIconActiveOpacity; } @@ -1131,6 +1152,16 @@ select.ui.dropdown { } } +& when (@variationDropdownReadonly) { + /*-------------------- + Read-Only + ----------------------*/ + + .ui.read-only.dropdown { + cursor: default; + pointer-events: none; + } +} /******************************* Variations @@ -1323,6 +1354,30 @@ select.ui.dropdown { } } +& when (@variationInputLabeled) { + /*-------------------- + Labeled + ---------------------*/ + + /* Regular Label on Left */ + .ui.labeled.input:not([class*="corner labeled"]) .label:first-child + .dropdown { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + border-left-color: transparent; + } + + /* Regular Label on Right */ + .ui[class*="right labeled"].input > .dropdown:not(:last-child) { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + border-right-color: transparent !important; + } + .ui[class*="right labeled"].input > .dropdown + .label { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } +} + /*-------------- Columnar ---------------*/ @@ -1679,46 +1734,55 @@ select.ui.dropdown { ---------------*/ /* General rules and basic dropdowns */ + .ui.dropdown .inverted.menu, .ui.inverted.dropdown .menu { background: @invertedMenuBackground; box-shadow: @invertedMenuBoxShadow; border: @invertedMenuBorder; } + .ui.dropdown .inverted.menu > .item, .ui.inverted.dropdown .menu > .item { color: @invertedMenuColor; } + .ui.dropdown .inverted.menu .active.item, .ui.inverted.dropdown .menu .active.item { background: @invertedActiveItemBackground; color: @invertedActiveItemColor; box-shadow: @invertedActiveItemBoxShadow; } + .ui.dropdown .inverted.menu > .item:hover, .ui.inverted.dropdown .menu > .item:hover { background: @invertedHoveredItemBackground; color: @invertedHoveredItemColor; } .ui.inverted.dropdown.selected, + .ui.dropdown .inverted.menu .selected.item, .ui.inverted.dropdown .menu .selected.item { background: @invertedSelectedBackground; color: @invertedSelectedColor; } + .ui.dropdown .inverted.menu > .header, .ui.inverted.dropdown .menu > .header { color: @invertedMenuHeaderColor; } .ui.inverted.dropdown > .text > .description, + .ui.dropdown .inverted.menu > .item > .description, .ui.inverted.dropdown .menu > .item > .description { color: @invertedItemDescriptionColor; } + .ui.dropdown .inverted.menu > .divider, .ui.inverted.dropdown .menu > .divider { border-top: @invertedMenuDividerBorder; } + .ui.dropdown .inverted.scrolling.menu, .ui.inverted.dropdown .scrolling.menu { border: none; border-top: @invertedMenuBorder; @@ -1745,11 +1809,13 @@ select.ui.dropdown { color: @invertedSelectionVisibleTextColor; } + .ui.selection.active.dropdown .inverted.menu, .ui.inverted.selection.active.dropdown .menu, .ui.inverted.selection.active.dropdown:hover { border-color: @invertedSelectionVisibleBorderColor; } + .ui.selection.dropdown .inverted.menu > .item, .ui.inverted.selection.dropdown .menu > .item { border-top: @invertedSelectionItemDivider; } @@ -1772,11 +1838,13 @@ select.ui.dropdown { color: @invertedSelectionTextUnderlayColor !important; } + .ui.dropdown .inverted.menu > .message:not(.ui), .ui.inverted.dropdown .menu > .message:not(.ui) { color: @invertedMessageColor; } /* Fixing the border */ + .ui.dropdown .inverted.menu > .item:first-child, .ui.inverted.dropdown .menu > .item:first-child { border-top-width: 0; } @@ -1827,19 +1895,24 @@ select.ui.dropdown { } /* Scrollbars */ + .ui.dropdown .inverted.menu::-webkit-scrollbar-track, .ui.inverted.dropdown .menu::-webkit-scrollbar-track { background: @trackInvertedBackground; } + .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb, .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb { background: @thumbInvertedBackground; } + .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:window-inactive, .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:window-inactive { background: @thumbInvertedInactiveBackground; } + .ui.dropdown .inverted.menu::-webkit-scrollbar-thumb:hover, .ui.inverted.dropdown .menu::-webkit-scrollbar-thumb:hover { background: @thumbInvertedHoverBackground; } & when (@variationDropdownPointing) { + .ui.pointing.dropdown > .inverted.menu:after, .ui.inverted.pointing.dropdown > .menu:after { background: @invertedPointingArrowBackground; box-shadow: @invertedPointingArrowBoxShadow; diff --git a/definitions/modules/modal.js b/definitions/modules/modal.js index 420ecc2..3091c75 100644 --- a/definitions/modules/modal.js +++ b/definitions/modules/modal.js @@ -58,6 +58,7 @@ $.fn.modal = function(parameters) { selector = settings.selector, className = settings.className, namespace = settings.namespace, + fields = settings.fields, error = settings.error, eventNamespace = '.' + namespace, @@ -74,7 +75,7 @@ $.fn.modal = function(parameters) { $dimmer, element = this, - instance = $module.data(moduleNamespace), + instance = $module.hasClass('modal') ? $module.data(moduleNamespace) : undefined, ignoreRepeatedEvents = false, @@ -91,6 +92,46 @@ $.fn.modal = function(parameters) { module = { initialize: function() { + if(!$module.hasClass('modal')) { + module.create.modal(); + if(!$.isFunction(settings.onHidden)) { + settings.onHidden = function () { + module.destroy(); + $module.remove(); + }; + } + } + $module.addClass(settings.class); + if (settings.title !== '') { + $module.find(selector.title).html(module.helpers.escape(settings.title, settings.preserveHTML)).addClass(settings.classTitle); + } + if (settings.content !== '') { + $module.find(selector.content).html(module.helpers.escape(settings.content, settings.preserveHTML)).addClass(settings.classContent); + } + if(module.has.configActions()){ + var $actions = $module.find(selector.actions).addClass(settings.classActions); + if ($actions.length === 0) { + $actions = $('
', {class: className.actions + ' ' + (settings.classActions || '')}).appendTo($module); + } else { + $actions.empty(); + } + settings.actions.forEach(function (el) { + var icon = el[fields.icon] ? '' : '', + text = module.helpers.escape(el[fields.text] || '', settings.preserveHTML), + cls = module.helpers.deQuote(el[fields.class] || ''), + click = el[fields.click] && $.isFunction(el[fields.click]) ? el[fields.click] : function () {}; + $actions.append($('