diff --git a/definitions/behaviors/api.js b/definitions/behaviors/api.js index 126427e..775c689 100644 --- a/definitions/behaviors/api.js +++ b/definitions/behaviors/api.js @@ -577,7 +577,7 @@ $.api = $.fn.api = function(parameters) { if(xhr !== undefined) { module.debug('XHR produced a server error', status, httpMessage); // make sure we have an error to display to console - if( xhr.status != 200 && httpMessage !== undefined && httpMessage !== '') { + if( (xhr.status < 200 || xhr.status >= 300) && httpMessage !== undefined && httpMessage !== '') { module.error(error.statusMessage + httpMessage, ajaxSettings.url); } settings.onError.call(context, errorMessage, $module, xhr); diff --git a/definitions/behaviors/form.js b/definitions/behaviors/form.js index 0a28bf7..8b866dd 100644 --- a/definitions/behaviors/form.js +++ b/definitions/behaviors/form.js @@ -473,8 +473,7 @@ $.fn.form = function(parameters) { keys = Object.keys(parameters), isLegacySettings = (keys.length > 0) ? (parameters[keys[0]].identifier !== undefined && parameters[keys[0]].rules !== undefined) - : false, - ruleKeys + : false ; if(isLegacySettings) { // 1.x (ducktyped) @@ -581,7 +580,6 @@ $.fn.form = function(parameters) { $fields.each(function(index, field) { var $field = $(field), - type = $field.prop('type'), name = $field.prop('name'), value = $field.val(), isCheckbox = $field.is(selector.checkbox), @@ -764,12 +762,12 @@ $.fn.form = function(parameters) { ? rule : [rule] ; - if(rule == undefined) { - module.debug('Removed all rules'); - validation[field].rules = []; + if(validation[field] === undefined || !Array.isArray(validation[field].rules)) { return; } - if(validation[field] == undefined || !Array.isArray(validation[field].rules)) { + if(rule === undefined) { + module.debug('Removed all rules'); + validation[field].rules = []; return; } $.each(validation[field].rules, function(index, rule) { @@ -792,7 +790,7 @@ $.fn.form = function(parameters) { // alias rules: function(field, rules) { if(Array.isArray(field)) { - $.each(fields, function(index, field) { + $.each(field, function(index, field) { module.remove.rule(field, rules); }); } @@ -924,8 +922,7 @@ $.fn.form = function(parameters) { form: function(event, ignoreCallbacks) { var - values = module.get.values(), - apiRequest + values = module.get.values() ; // input keydown event will fire submit repeatedly by browser default @@ -1035,14 +1032,13 @@ $.fn.form = function(parameters) { rule: function(field, rule, internal) { var $field = module.get.field(field.identifier), - type = rule.type, ancillary = module.get.ancillaryValue(rule), ruleName = module.get.ruleName(rule), ruleFunction = settings.rules[ruleName], invalidFields = [], - isRadio = $field.is(selector.radio), + isCheckbox = $field.is(selector.checkbox), isValid = function(field){ - var value = (isRadio ? $(field).filter(':checked').val() : $(field).val()); + var value = (isCheckbox ? $(field).filter(':checked').val() : $(field).val()); // cast to string avoiding encoding special values value = (value === undefined || value === '' || value === null) ? '' @@ -1055,7 +1051,7 @@ $.fn.form = function(parameters) { module.error(error.noRule, ruleName); return; } - if(isRadio) { + if(isCheckbox) { if (!isValid($field)) { invalidFields = $field; } @@ -1554,7 +1550,6 @@ $.fn.form.settings = { // matches another field match: function(value, identifier) { var - $form = $(this), matchingValue ; if( $('[data-validate="'+ identifier +'"]').length > 0 ) { @@ -1579,7 +1574,6 @@ $.fn.form.settings = { different: function(value, identifier) { // use either id or name of field var - $form = $(this), matchingValue ; if( $('[data-validate="'+ identifier +'"]').length > 0 ) { diff --git a/definitions/behaviors/state.js b/definitions/behaviors/state.js index d67fa3b..a4122a0 100644 --- a/definitions/behaviors/state.js +++ b/definitions/behaviors/state.js @@ -29,7 +29,6 @@ $.fn.state = function(parameters) { moduleSelector = $allModules.selector || '', - hasTouch = ('ontouchstart' in document.documentElement), time = new Date().getTime(), performance = [], diff --git a/definitions/behaviors/visibility.js b/definitions/behaviors/visibility.js index 80872f9..0c45147 100644 --- a/definitions/behaviors/visibility.js +++ b/definitions/behaviors/visibility.js @@ -62,7 +62,6 @@ $.fn.visibility = function(parameters) { $placeholder, - selector = $module.selector || '', instance = $module.data(moduleNamespace), requestAnimationFrame = window.requestAnimationFrame @@ -510,8 +509,7 @@ $.fn.visibility = function(parameters) { passed: function(amount, newCallback) { var - calculations = module.get.elementCalculations(), - amountInPixels + calculations = module.get.elementCalculations() ; // assign callback if(amount && newCallback) { diff --git a/definitions/collections/form.less b/definitions/collections/form.less index adc4ca8..22bd3f2 100644 --- a/definitions/collections/form.less +++ b/definitions/collections/form.less @@ -277,7 +277,8 @@ .ui.form .success.message, .ui.form .warning.message, -.ui.form .error.message { +.ui.form .error.message, +.ui.form .error.message:empty { display: none; } diff --git a/definitions/collections/menu.less b/definitions/collections/menu.less index 56da7f9..dfc912f 100644 --- a/definitions/collections/menu.less +++ b/definitions/collections/menu.less @@ -392,6 +392,10 @@ .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .item:not(.right):not(.borderless):first-child { border-left: @dividerSize solid @dividerBackground; } + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.item:not(.borderless):last-child, + .ui.menu:not(.secondary):not(.text):not(.tabular):not(.borderless) > .container > .right.menu > .item:not(.borderless):last-child { + border-right: @dividerSize solid @dividerBackground; + } } @@ -455,7 +459,7 @@ Disabled ---------------*/ -.ui.menu .item.disabled { +.ui.ui.menu .item.disabled { cursor: default; background-color: transparent; color: @disabledTextColor; @@ -1344,7 +1348,7 @@ each(@colors, { } /* Disabled */ -.ui.inverted.menu .item.disabled { +.ui.ui.inverted.menu .item.disabled { color: @invertedDisabledTextColor; } diff --git a/definitions/collections/table.less b/definitions/collections/table.less index 00abd82..f62722e 100644 --- a/definitions/collections/table.less +++ b/definitions/collections/table.less @@ -875,7 +875,7 @@ each(@colors, { color: @invertedCellColor; border: @invertedBorder; } -.ui.inverted.table th { +.ui.ui.inverted.table th { background-color: @invertedHeaderBackground; border-color: @invertedHeaderBorderColor; color: @invertedHeaderColor; @@ -891,7 +891,12 @@ each(@colors, { pointer-events: none; color: @invertedDisabledTextColor; } - +.ui.inverted.table tr td.disabled:not([class="disabled"]), +.ui.inverted.table tr.disabled:not([class="disabled"]) td, +.ui.inverted.table tr.disabled td[class]:not(.disabled), +.ui.inverted.table tr:hover td.disabled:not([class="disabled"]) { + color: @disabledTextColor; +} /* Definition */ .ui.inverted.definition.table tfoot:not(.full-width) th:first-child, .ui.inverted.definition.table thead:not(.full-width) th:first-child { @@ -965,6 +970,9 @@ each(@colors, { .ui.celled.table tr td { border-left: @cellBorder; } +.ui.inverted.celled.table tr td { + border-left: @invertedCellBorder; +} .ui.celled.table tr th:first-child, .ui.celled.table tr td:first-child { border-left: none; diff --git a/definitions/elements/button.less b/definitions/elements/button.less index e29951d..6466415 100644 --- a/definitions/elements/button.less +++ b/definitions/elements/button.less @@ -1039,13 +1039,6 @@ border-bottom-left-radius: @borderRadius; } -/* Fluid Labeled */ -.ui.fluid[class*="left labeled"].icon.button, -.ui.fluid[class*="right labeled"].icon.button { - padding-left: @horizontalPadding !important; - padding-right: @horizontalPadding !important; -} - /* Loading Icon in Labeled Button */ .ui.labeled.icon.button > .loading.icon:before { animation: loader 2s linear infinite; @@ -1771,7 +1764,7 @@ each(@colors, { box-shadow: 0 0 0 @basicColoredBorderSize @@_backgroundColorDown inset; color: @@_backgroundColorDown; } - .ui.buttons:not(.vertical) > .basic.primary.button:not(:first-child) { + .ui.buttons:not(.vertical) > .basic.@{consequence}.button:not(:first-child) { margin-left: -@basicColoredBorderSize; } } @@ -1818,8 +1811,7 @@ each(@colors, { border-radius: 0; margin: @groupButtonOffset; } -.ui.buttons > .ui.button:not(.basic):not(.inverted), -.ui.buttons:not(.basic):not(.inverted) > .button { +.ui.buttons:not(.basic):not(.inverted) > .button:not(.basic):not(.inverted) { box-shadow: @groupButtonBoxShadow; } diff --git a/definitions/elements/input.less b/definitions/elements/input.less index ee2d81b..0fc84ef 100644 --- a/definitions/elements/input.less +++ b/definitions/elements/input.less @@ -512,6 +512,9 @@ .ui.mini.input { font-size: @relativeMini; } +.ui.tiny.input { + font-size: @relativeTiny; +} .ui.small.input { font-size: @relativeSmall; } diff --git a/definitions/elements/label.less b/definitions/elements/label.less index 99b51e3..24cbde3 100644 --- a/definitions/elements/label.less +++ b/definitions/elements/label.less @@ -308,9 +308,10 @@ a.ui.label { .ui.corner.label .icon { cursor: inherit; - position: relative; + position: absolute; top: @cornerIconTopOffset; - left: @cornerIconLeftOffset; + left: auto; + right: @cornerIconRightOffset; font-size: @cornerIconSize; margin: 0; } @@ -330,7 +331,8 @@ a.ui.label { border-top-color: inherit; } .ui.left.corner.label .icon { - left: -@cornerIconLeftOffset; + left: @cornerIconLeftOffset; + right: auto; } /* Segment */ diff --git a/definitions/elements/segment.less b/definitions/elements/segment.less index 2ffaa31..c1fbdf4 100644 --- a/definitions/elements/segment.less +++ b/definitions/elements/segment.less @@ -61,6 +61,7 @@ --------------------*/ /* Header */ +.ui.inverted.segment > .ui.header > .sub.header, .ui.inverted.segment > .ui.header { color: @white; } @@ -427,12 +428,13 @@ } /* Horizontal Segment */ -.ui.horizontal.segments > .segment { +.ui.horizontal.segments:not(.compact) > .segment:not(.compact) { flex: 1 1 auto; -ms-flex: 1 1 0; /* Solves #2550 MS Flex */ +} +.ui.horizontal.segments > .segment { margin: 0; min-width: 0; - background-color: transparent; border-radius: 0; border: none; box-shadow: none; @@ -527,11 +529,9 @@ --------------------*/ .ui.clearing.segment:after { - content: "."; + content: ""; display: block; - height: 0; clear: both; - visibility: hidden; } /*------------------- diff --git a/definitions/elements/step.less b/definitions/elements/step.less index bd6bfff..f5f6423 100644 --- a/definitions/elements/step.less +++ b/definitions/elements/step.less @@ -263,6 +263,8 @@ flex-direction: column; border-radius: @borderRadius; padding: @verticalPadding @horizontalPadding; + border-right: none; + border-bottom: @stepsBorder; } .ui.steps:not(.unstackable) .step:first-child { padding: @verticalPadding @horizontalPadding; @@ -270,13 +272,19 @@ } .ui.steps:not(.unstackable) .step:last-child { border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; + border-bottom: none; } /* Arrow */ .ui.steps:not(.unstackable) .step:after { - display: none !important; + top: unset; + bottom: -@arrowSize; + right: 50%; + transform: translateY(-50%) translateX(50%) rotate(45deg); + } + .ui.vertical.steps .active.step:last-child:after { + display: none; } - /* Content */ .ui.steps:not(.unstackable) .step .content { text-align: center; @@ -394,6 +402,8 @@ flex-direction: column; border-radius: @borderRadius; padding: @verticalPadding @horizontalPadding; + border-right: none; + border-bottom: @stepsBorder; } .ui[class*="tablet stackable"].steps .step:first-child { padding: @verticalPadding @horizontalPadding; @@ -401,11 +411,15 @@ } .ui[class*="tablet stackable"].steps .step:last-child { border-radius: 0 0 @stepsBorderRadius @stepsBorderRadius; + border-bottom: none; } /* Arrow */ .ui[class*="tablet stackable"].steps .step:after { - display: none !important; + top: unset; + bottom: -@arrowSize; + right: 50%; + transform: translateY(-50%) translateX(50%) rotate(45deg); } /* Content */ diff --git a/definitions/globals/site.js b/definitions/globals/site.js index dfe072e..2b89783 100644 --- a/definitions/globals/site.js +++ b/definitions/globals/site.js @@ -30,7 +30,6 @@ $.site = $.fn.site = function(parameters) { namespace = settings.namespace, error = settings.error, - eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, $document = $(document), diff --git a/definitions/globals/site.less b/definitions/globals/site.less index d78eadb..82203c7 100644 --- a/definitions/globals/site.less +++ b/definitions/globals/site.less @@ -43,7 +43,6 @@ body { font-size: @fontSize; line-height: @lineHeight; color: @textColor; - font-smoothing: @fontSmoothing; } /******************************* diff --git a/definitions/modules/accordion.js b/definitions/modules/accordion.js index b32ce69..62538d4 100644 --- a/definitions/modules/accordion.js +++ b/definitions/modules/accordion.js @@ -34,12 +34,6 @@ $.fn.accordion = function(parameters) { methodInvoked = (typeof query == 'string'), queryArguments = [].slice.call(arguments, 1), - requestAnimationFrame = window.requestAnimationFrame - || window.mozRequestAnimationFrame - || window.webkitRequestAnimationFrame - || window.msRequestAnimationFrame - || function(callback) { setTimeout(callback, 0); }, - returnedValue ; $allModules diff --git a/definitions/modules/calendar.js b/definitions/modules/calendar.js index a457672..a333c1d 100644 --- a/definitions/modules/calendar.js +++ b/definitions/modules/calendar.js @@ -183,7 +183,13 @@ $.fn.calendar = function(parameters) { } }, date: function () { - if ($input.length) { + if (settings.initialDate) { + var date = parser.date(settings.initialDate, settings); + module.set.date(date, settings.formatInput, false); + } else if ($module.data(metadata.date) !== undefined) { + var date = parser.date($module.data(metadata.date), settings); + module.set.date(date, settings.formatInput, false); + } else if ($input.length) { var val = $input.val(); var date = parser.date(val, settings); module.set.date(date, settings.formatInput, false); @@ -298,7 +304,7 @@ $.fn.calendar = function(parameters) { if(settings.showWeekNumbers) { cell = $('').appendTo(row); cell.text(settings.text.weekNo); - cell.addClass(className.disabledCell); + cell.addClass(className.weekCell); textColumns--; } for (i = 0; i < textColumns; i++) { @@ -315,7 +321,7 @@ $.fn.calendar = function(parameters) { if(isDay && settings.showWeekNumbers){ cell = $('').appendTo(row); cell.text(module.get.weekOfYear(year,month,i+1-settings.firstDayOfWeek)); - cell.addClass(className.disabledCell); + cell.addClass(className.weekCell); } for (c = 0; c < textColumns; c++, i++) { var cellDate = isYear ? new Date(i, month, 1, hour, minute) : @@ -328,7 +334,7 @@ $.fn.calendar = function(parameters) { cell.text(cellText); cell.data(metadata.date, cellDate); var adjacent = isDay && cellDate.getMonth() !== ((month + 12) % 12); - var disabled = adjacent || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode); + var disabled = (!settings.selectAdjacentDays && adjacent) || !module.helper.isDateInRange(cellDate, mode) || settings.isDisabled(cellDate, mode) || module.helper.isDisabled(cellDate, mode) || !module.helper.isEnabled(cellDate, mode); if (disabled) { var disabledReason = module.helper.disabledReason(cellDate, mode); if (disabledReason !== null) { @@ -398,7 +404,7 @@ $.fn.calendar = function(parameters) { var inRange = !rangeDate ? false : ((!!startDate && module.helper.isDateInRange(cellDate, mode, startDate, rangeDate)) || (!!endDate && module.helper.isDateInRange(cellDate, mode, rangeDate, endDate))); - cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && !adjacent && !disabled); + cell.toggleClass(className.focusCell, focused && (!isTouch || isTouchDown) && (!adjacent || (settings.selectAdjacentDays && adjacent)) && !disabled); cell.toggleClass(className.rangeCell, inRange && !active && !disabled); }); } @@ -518,7 +524,7 @@ $.fn.calendar = function(parameters) { //enter var mode = module.get.mode(); var date = module.get.focusDate(); - if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode)) { + if (date && !settings.isDisabled(date, mode) && !module.helper.isDisabled(date, mode) && module.helper.isEnabled(date, mode)) { module.selectDate(date); } //disable form submission: @@ -569,7 +575,7 @@ $.fn.calendar = function(parameters) { }(); }, date: function () { - return $module.data(metadata.date) || null; + return module.helper.sanitiseDate($module.data(metadata.date)) || null; }, focusDate: function () { return $module.data(metadata.focusDate) || null; @@ -822,6 +828,20 @@ $.fn.calendar = function(parameters) { } })); }, + isEnabled: function(date, mode) { + if (mode === 'day') { + return settings.enabledDates.length == 0 || settings.enabledDates.some(function(d){ + if (d instanceof Date) { + return module.helper.dateEqual(date, d, mode); + } + if (d !== null && typeof d === 'object') { + return module.helper.dateEqual(date, d[metadata.date], mode); + } + }); + } else { + return true; + } + }, disabledReason: function(date, mode) { if (mode === 'day') { for (var i = 0; i < settings.disabledDates.length; i++) { @@ -1122,6 +1142,10 @@ $.fn.calendar.settings = { showWeekNumbers : null, // show Number of Week at the very first column of a dayView disabledDates : [], // specific day(s) which won't be selectable and contain additional information. disabledDaysOfWeek : [], // day(s) which won't be selectable(s) (0 = Sunday) + enabledDates : [], // specific day(s) which will be selectable, all other days will be disabled + centuryBreak : 60, // starting short year until 99 where it will be assumed to belong to the last century + currentCentury : 2000, // century to be added to 2-digit years (00 to {centuryBreak}-1) + selectAdjacentDays : false, // The calendar can show dates from adjacent month. These adjacent month dates can also be made selectable. // popup options ('popup', 'on', 'hoverable', and show/hide callbacks are overridden) popupOptions: { position: 'bottom left', @@ -1279,13 +1303,16 @@ $.fn.calendar.settings = { } } - //year > 59 + //year > settings.centuryBreak for (i = 0; i < numbers.length; i++) { j = parseInt(numbers[i]); if (isNaN(j)) { continue; } - if (j > 59) { + if (j >= settings.centuryBreak && i === numbers.length-1) { + if (j <= 99) { + j += settings.currentCentury - 100; + } year = j; numbers.splice(i, 1); break; @@ -1321,15 +1348,15 @@ $.fn.calendar.settings = { } } - //year <= 59 + //year <= settings.centuryBreak if (year < 0) { for (i = numbers.length - 1; i >= 0; i--) { j = parseInt(numbers[i]); if (isNaN(j)) { continue; } - if (j < 99) { - j += 2000; + if (j <= 99) { + j += settings.currentCentury; } year = j; numbers.splice(i, 1); @@ -1465,6 +1492,7 @@ $.fn.calendar.settings = { link: 'link', cell: 'link', disabledCell: 'disabled', + weekCell: 'disabled', adjacentCell: 'adjacent', activeCell: 'active', rangeCell: 'range', diff --git a/definitions/modules/calendar.less b/definitions/modules/calendar.less index 91793c7..88033b8 100644 --- a/definitions/modules/calendar.less +++ b/definitions/modules/calendar.less @@ -127,6 +127,11 @@ color: @disabledTextColor; } +.ui.calendar .ui.table tr .adjacent:not(.disabled) { + color: @adjacentTextColor; + background: @adjacentBackground; +} + /*-------------- States ---------------*/ diff --git a/definitions/modules/checkbox.js b/definitions/modules/checkbox.js index bf987af..39ebd87 100644 --- a/definitions/modules/checkbox.js +++ b/definitions/modules/checkbox.js @@ -174,6 +174,13 @@ $.fn.checkbox = function(parameters) { } }, + preventDefaultOnInputTarget: function() { + if(typeof event !== 'undefined' && $(event.target).is(selector.input)) { + module.verbose('Preventing default check action after manual check action'); + event.preventDefault(); + } + }, + event: { change: function(event) { if( !module.should.ignoreCallbacks() ) { @@ -263,6 +270,7 @@ $.fn.checkbox = function(parameters) { settings.onChecked.call(input); module.trigger.change(); } + module.preventDefaultOnInputTarget(); }, uncheck: function() { @@ -275,6 +283,7 @@ $.fn.checkbox = function(parameters) { settings.onUnchecked.call(input); module.trigger.change(); } + module.preventDefaultOnInputTarget(); }, indeterminate: function() { diff --git a/definitions/modules/checkbox.less b/definitions/modules/checkbox.less index 4cc5eac..699ae70 100644 --- a/definitions/modules/checkbox.less +++ b/definitions/modules/checkbox.less @@ -205,6 +205,14 @@ opacity: @checkboxIndeterminateCheckOpacity; color: @checkboxIndeterminateCheckColor; } +.ui.indeterminate.toggle.checkbox { + & input:not([type=radio]):indeterminate ~ label:before { + background: @toggleCenterLaneBackground; + } + & input:not([type=radio]) ~ label:after { + left: @toggleCenterOffset; + } +} /*-------------- Active Focus diff --git a/definitions/modules/dimmer.js b/definitions/modules/dimmer.js index 6894d1e..7ae259f 100644 --- a/definitions/modules/dimmer.js +++ b/definitions/modules/dimmer.js @@ -306,10 +306,8 @@ $.fn.dimmer = function(parameters) { queue : false, duration : module.get.duration(), useFailSafe : true, - onStart : function() { - module.remove.dimmed(); - }, onComplete : function() { + module.remove.dimmed(); module.remove.variation(); module.remove.active(); callback(); @@ -319,10 +317,10 @@ $.fn.dimmer = function(parameters) { } else { module.verbose('Hiding dimmer with javascript'); - module.remove.dimmed(); $dimmer .stop() .fadeOut(module.get.duration(), function() { + module.remove.dimmed(); module.remove.active(); $dimmer.removeAttr('style'); callback(); diff --git a/definitions/modules/dimmer.less b/definitions/modules/dimmer.less index d0548e6..dff8710 100644 --- a/definitions/modules/dimmer.less +++ b/definitions/modules/dimmer.less @@ -235,7 +235,7 @@ body.dimmable > .dimmer { .ui.simple.dimmer { display: block; overflow: hidden; - opacity: 1; + opacity: 0; width: 0; height: 0; z-index: -100; diff --git a/definitions/modules/dropdown.js b/definitions/modules/dropdown.js index 02900a9..8529e69 100644 --- a/definitions/modules/dropdown.js +++ b/definitions/modules/dropdown.js @@ -81,6 +81,7 @@ $.fn.dropdown = function(parameters) { activated = false, itemActivated = false, internalChange = false, + iconClicked = false, element = this, instance = $module.data(moduleNamespace), @@ -751,7 +752,7 @@ $.fn.dropdown = function(parameters) { } var preSelected = $input.val(); if(!Array.isArray(preSelected)) { - preSelected = preSelected!=="" ? preSelected.split(settings.delimiter) : []; + preSelected = preSelected && preSelected!=="" ? preSelected.split(settings.delimiter) : []; } $.each(preSelected,function(index,value){ $item.filter('[data-value="'+value+'"]') @@ -1061,12 +1062,12 @@ $.fn.dropdown = function(parameters) { } }, search: { - focus: function() { + focus: function(event) { activated = true; if(module.is.multiple()) { module.remove.activeLabel(); } - if(settings.showOnFocus || event.type !== 'focus') { + if(settings.showOnFocus || (event.type !== 'focus' && event.type !== 'focusin')) { module.search(); } }, @@ -1095,6 +1096,7 @@ $.fn.dropdown = function(parameters) { }, icon: { click: function(event) { + iconClicked=true; if(module.has.search()) { if(!module.is.active()) { if(settings.showOnFocus){ @@ -1669,7 +1671,7 @@ $.fn.dropdown = function(parameters) { $target = $(event.target), $label = $target.closest(selector.siblingLabel), inVisibleDOM = document.body.contains(event.target), - notOnLabel = ($module.find($label).length === 0), + notOnLabel = ($module.find($label).length === 0 || !(module.is.multiple() && settings.useLabels)), notInMenu = ($target.closest($menu).length === 0) ; callback = $.isFunction(callback) @@ -2613,8 +2615,7 @@ $.fn.dropdown = function(parameters) { }, selected: function(value, $selectedItem) { var - isMultiple = module.is.multiple(), - $userSelectedItem + isMultiple = module.is.multiple() ; $selectedItem = (settings.allowAdditions) ? $selectedItem || module.get.itemWithAdditions(value) @@ -2821,7 +2822,6 @@ $.fn.dropdown = function(parameters) { hasCount = (message.search('{count}') !== -1), hasMaxCount = (message.search('{maxCount}') !== -1), hasTerm = (message.search('{term}') !== -1), - values, count, query ; @@ -3132,13 +3132,14 @@ $.fn.dropdown = function(parameters) { return ( $input.is('select') ); }, minCharacters: function(searchTerm) { - if(settings.minCharacters) { + if(settings.minCharacters && !iconClicked) { searchTerm = (searchTerm !== undefined) ? String(searchTerm) : String(module.get.query()) ; return (searchTerm.length >= settings.minCharacters); } + iconClicked=false; return true; }, firstLetter: function($item, letter) { @@ -3508,9 +3509,6 @@ $.fn.dropdown = function(parameters) { hide: function(callback, $subMenu) { var $currentMenu = $subMenu || $menu, - duration = ($subMenu) - ? (settings.duration * 0.9) - : settings.duration, start = ($subMenu) ? function() {} : function() { diff --git a/definitions/modules/dropdown.less b/definitions/modules/dropdown.less index d4bb78b..0a90f52 100644 --- a/definitions/modules/dropdown.less +++ b/definitions/modules/dropdown.less @@ -436,24 +436,72 @@ select.ui.dropdown { } @media only screen and (max-width : @largestMobileScreen) { + .ui.selection.dropdown[class*="very short"] .menu { + max-height: @selectionMobileMaxMenuHeight * 0.5; + } + .ui.selection.dropdown.short .menu { + max-height: @selectionMobileMaxMenuHeight * 0.75; + } .ui.selection.dropdown .menu { max-height: @selectionMobileMaxMenuHeight; } + .ui.selection.dropdown.long .menu { + max-height: @selectionMobileMaxMenuHeight * 2; + } + .ui.selection.dropdown[class*="very long"] .menu { + max-height: @selectionMobileMaxMenuHeight * 3; + } } @media only screen and (min-width: @tabletBreakpoint) { + .ui.selection.dropdown[class*="very short"] .menu { + max-height: @selectionTabletMaxMenuHeight * 0.5; + } + .ui.selection.dropdown.short .menu { + max-height: @selectionTabletMaxMenuHeight * 0.75; + } .ui.selection.dropdown .menu { max-height: @selectionTabletMaxMenuHeight; } + .ui.selection.dropdown.long .menu { + max-height: @selectionTabletMaxMenuHeight * 2; + } + .ui.selection.dropdown[class*="very long"] .menu { + max-height: @selectionTabletMaxMenuHeight * 3; + } } @media only screen and (min-width: @computerBreakpoint) { + .ui.selection.dropdown[class*="very short"] .menu { + max-height: @selectionComputerMaxMenuHeight * 0.5; + } + .ui.selection.dropdown.short .menu { + max-height: @selectionComputerMaxMenuHeight * 0.75; + } .ui.selection.dropdown .menu { max-height: @selectionComputerMaxMenuHeight; } + .ui.selection.dropdown.long .menu { + max-height: @selectionComputerMaxMenuHeight * 2; + } + .ui.selection.dropdown[class*="very long"] .menu { + max-height: @selectionComputerMaxMenuHeight * 3; + } } @media only screen and (min-width: @widescreenMonitorBreakpoint) { + .ui.selection.dropdown[class*="very short"] .menu { + max-height: @selectionWidescreenMaxMenuHeight * 0.5; + } + .ui.selection.dropdown.short .menu { + max-height: @selectionWidescreenMaxMenuHeight * 0.75; + } .ui.selection.dropdown .menu { max-height: @selectionWidescreenMaxMenuHeight; } + .ui.selection.dropdown.long .menu { + max-height: @selectionWidescreenMaxMenuHeight * 2; + } + .ui.selection.dropdown[class*="very long"] .menu { + max-height: @selectionWidescreenMaxMenuHeight * 3; + } } /* Menu Item */ @@ -1146,6 +1194,27 @@ select.ui.dropdown { } } +/*-------------- + Columnar +---------------*/ +.ui.dropdown[class*="two column"] > .menu > .item { + display: inline-block; + width: 50%; +} +.ui.dropdown[class*="three column"] > .menu > .item { + display: inline-block; + width: 33%; +} +.ui.dropdown[class*="four column"] > .menu > .item { + display: inline-block; + width: 25%; +} +.ui.dropdown[class*="five column"] > .menu > .item { + display: inline-block; + width: 20%; +} + + /*-------------- Simple ---------------*/ diff --git a/definitions/modules/embed.js b/definitions/modules/embed.js index e19689e..d301504 100644 --- a/definitions/modules/embed.js +++ b/definitions/modules/embed.js @@ -58,7 +58,6 @@ $.fn.embed = function(parameters) { eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, - $window = $(window), $module = $(this), $placeholder = $module.find(selector.placeholder), $icon = $module.find(selector.icon), diff --git a/definitions/modules/modal.js b/definitions/modules/modal.js index 134960b..fec18f7 100644 --- a/definitions/modules/modal.js +++ b/definitions/modules/modal.js @@ -80,6 +80,7 @@ $.fn.modal = function(parameters) { initialMouseDownInModal, initialMouseDownInScrollbar, + initialBodyMargin = '', elementEventNamespace, id, @@ -97,7 +98,9 @@ $.fn.modal = function(parameters) { if ( settings.allowMultiple ) { module.create.innerDimmer(); } - + if (!settings.centered){ + $module.addClass('top aligned'); + } module.refreshModals(); module.bind.events(); @@ -120,9 +123,6 @@ $.fn.modal = function(parameters) { var defaultSettings = { debug : settings.debug, - variation : settings.centered - ? false - : 'top aligned', dimmerName : 'modals' }, dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) @@ -305,7 +305,7 @@ $.fn.modal = function(parameters) { isInModal = ($target.closest(selector.modal).length > 0), isInDOM = $.contains(document.documentElement, event.target) ; - if(!isInModal && isInDOM && module.is.active() && $module.hasClass(className.top) ) { + if(!isInModal && isInDOM && module.is.active() && $module.hasClass(className.front) ) { module.debug('Dimmer clicked, hiding all modals'); if(settings.allowMultiple) { if(!module.hideAll()) { @@ -330,7 +330,7 @@ $.fn.modal = function(parameters) { if(keyCode == escapeKey) { if(settings.closable) { module.debug('Escape key pressed hiding modal'); - if ( $module.hasClass(className.top) ) { + if ( $module.hasClass(className.front) ) { module.hide(); } } @@ -401,6 +401,7 @@ $.fn.modal = function(parameters) { module.hideOthers(module.showModal); } else { + ignoreRepeatedEvents = false; if( settings.allowMultiple ) { if ( module.others.active() ) { $otherModals.filter('.' + className.active).find(selector.dimmer).addClass('active'); @@ -481,8 +482,8 @@ $.fn.modal = function(parameters) { onComplete : function() { module.unbind.scrollLock(); if ( settings.allowMultiple ) { - $previousModal.addClass(className.top); - $module.removeClass(className.top); + $previousModal.addClass(className.front); + $module.removeClass(className.front); if ( hideOthersToo ) { $allModals.find(selector.dimmer).removeClass('active'); @@ -507,6 +508,7 @@ $.fn.modal = function(parameters) { showDimmer: function() { if($dimmable.dimmer('is animating') || !$dimmable.dimmer('is active') ) { + module.save.bodyMargin(); module.debug('Showing dimmer'); $dimmable.dimmer('show'); } @@ -519,6 +521,7 @@ $.fn.modal = function(parameters) { if( $dimmable.dimmer('is animating') || ($dimmable.dimmer('is active')) ) { module.unbind.scrollLock(); $dimmable.dimmer('hide', function() { + module.restore.bodyMargin(); module.remove.clickaway(); module.remove.screenHeight(); }); @@ -597,6 +600,12 @@ $.fn.modal = function(parameters) { if(!inCurrentModal) { $focusedElement = $(document.activeElement).blur(); } + }, + bodyMargin: function() { + initialBodyMargin = $body.css('margin-right'); + var bodyMarginRightPixel = parseInt(initialBodyMargin.replace(/[^\d.]/g, '')), + bodyScrollbarWidth = window.innerWidth - document.documentElement.clientWidth; + $body.css('margin-right', (bodyMarginRightPixel + bodyScrollbarWidth) + 'px'); } }, @@ -605,6 +614,9 @@ $.fn.modal = function(parameters) { if($focusedElement && $focusedElement.length > 0 && settings.restoreFocus) { $focusedElement.focus(); } + }, + bodyMargin: function() { + $body.css('margin-right', initialBodyMargin); } }, @@ -756,9 +768,6 @@ $.fn.modal = function(parameters) { dimmerName : 'modals', closable : 'auto', useFlex : module.can.useFlex(), - variation : settings.centered - ? false - : 'top aligned', duration : { show : settings.duration, hide : settings.duration @@ -795,7 +804,7 @@ $.fn.modal = function(parameters) { ; $module .css({ - marginTop: (settings.centered && module.can.fit()) + marginTop: (!$module.hasClass('aligned') && module.can.fit()) ? -(height / 2) : 0, marginLeft: -(width / 2) @@ -807,7 +816,7 @@ $.fn.modal = function(parameters) { if( module.can.fit() ) { $body.css('height', ''); } - else { + else if(!$module.hasClass('bottom')) { module.debug('Modal is taller than page content, resizing page height'); $body .css('height', module.cache.height + (settings.padding * 2) ) @@ -815,8 +824,8 @@ $.fn.modal = function(parameters) { } }, active: function() { - $module.addClass(className.active + ' ' + className.top); - $otherModals.filter('.' + className.active).removeClass(className.top); + $module.addClass(className.active + ' ' + className.front); + $otherModals.filter('.' + className.active).removeClass(className.front); }, scrolling: function() { $dimmable.addClass(className.scrolling); @@ -834,9 +843,11 @@ $.fn.modal = function(parameters) { module.bind.scrollLock(); } } - else { + else if (!$module.hasClass('bottom')){ module.verbose('Modal cannot fit on screen setting to scrolling'); module.set.scrolling(); + } else { + module.verbose('Bottom aligned modal not fitting on screen is unsupported for scrolling'); } }, undetached: function() { @@ -1110,7 +1121,7 @@ $.fn.modal.settings = { loading : 'loading', scrolling : 'scrolling', undetached : 'undetached', - top : 'top' + front : 'front' } }; diff --git a/definitions/modules/modal.less b/definitions/modules/modal.less index 31b23cb..0a00abf 100644 --- a/definitions/modules/modal.less +++ b/definitions/modules/modal.less @@ -185,31 +185,31 @@ /* Modal Width */ @media only screen and (max-width : @largestMobileScreen) { - .ui.modal { + .ui.modal:not(.fullscreen) { width: @mobileWidth; margin: @mobileMargin; } } @media only screen and (min-width : @tabletBreakpoint) { - .ui.modal { + .ui.modal:not(.fullscreen) { width: @tabletWidth; margin: @tabletMargin; } } @media only screen and (min-width : @computerBreakpoint) { - .ui.modal { + .ui.modal:not(.fullscreen) { width: @computerWidth; margin: @computerMargin; } } @media only screen and (min-width : @largeMonitorBreakpoint) { - .ui.modal { + .ui.modal:not(.fullscreen) { width: @largeMonitorWidth; margin: @largeMonitorMargin; } } @media only screen and (min-width : @widescreenMonitorBreakpoint) { - .ui.modal { + .ui.modal:not(.fullscreen) { width: @widescreenMonitorWidth; margin: @widescreenMonitorMargin; } @@ -234,6 +234,12 @@ padding: @mobileHeaderPadding !important; padding-right: @closeHitbox !important; } + .ui.overlay.fullscreen.modal .content.content.content { + min-height: @overlayFullscreenScrollingContentMaxHeightMobile; + } + .ui.overlay.fullscreen.modal .scrolling.content.content.content { + max-height: @overlayFullscreenScrollingContentMaxHeightMobile; + } .ui.modal > .content { display: block; padding: @mobileContentPadding !important; @@ -317,22 +323,25 @@ .ui.inverted.dimmer > .ui.basic.modal > .header { color: @basicInvertedModalHeaderColor; } - /* Resort to margin positioning if legacy */ .ui.legacy.legacy.modal, .ui.legacy.legacy.page.dimmer > .ui.modal { - top: 50% !important; left: 50% !important; } - -.ui.legacy.legacy.page.dimmer > .ui.scrolling.modal, -.ui.page.dimmer > .ui.scrolling.legacy.legacy.modal, -.ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal, -.ui.top.aligned.dimmer > .ui.legacy.legacy.modal { - top: auto !important; +.ui.legacy.legacy.modal:not(.aligned), +.ui.legacy.legacy.page.dimmer > .ui.modal:not(.aligned) { + top: 50%; +} +.ui.legacy.legacy.page.dimmer > .ui.scrolling.modal:not(.aligned), +.ui.page.dimmer > .ui.scrolling.legacy.legacy.modal:not(.aligned), +.ui.top.aligned.legacy.legacy.page.dimmer > .ui.modal:not(.aligned), +.ui.top.aligned.dimmer > .ui.legacy.legacy.modal:not(.aligned) { + top: auto; } - +.ui.legacy.overlay.fullscreen.modal { + margin-top: -@scrollingMargin !important; +} /******************************* States @@ -353,28 +362,26 @@ *******************************/ /*-------------- - Top Aligned + Aligned ---------------*/ -/* Top Aligned Modal */ -.modals.dimmer[class*="top aligned"] .modal { - margin: @topAlignedMargin auto; +.ui.top.aligned.modal { + top: @topAlignedMargin; } -@media only screen and (max-width : @largestMobileScreen) { - .modals.dimmer[class*="top aligned"] .modal { - margin: @mobileTopAlignedMargin auto; - } -} -/* Legacy Top Aligned */ -.legacy.modals.dimmer[class*="top aligned"] { - padding-top: @topAlignedMargin; +.ui.bottom.aligned.modal { + bottom: @bottomAlignedMargin; } + @media only screen and (max-width : @largestMobileScreen) { - .legacy.modals.dimmer[class*="top aligned"] { - padding-top: @mobileTopAlignedMargin; + .ui.top.aligned.modal { + top: @mobileTopAlignedMargin; + } + .ui.bottom.aligned.modal { + bottom: @mobileBottomAlignedMargin; } } + /*-------------- Scrolling ---------------*/ @@ -391,7 +398,7 @@ overflow: auto; -webkit-overflow-scrolling: touch; } -.modals.dimmer .ui.scrolling.modal { +.modals.dimmer .ui.scrolling.modal:not(.fullscreen) { margin: @scrollingMargin auto; } @@ -403,7 +410,7 @@ .scrolling.undetached.dimmable.dimmed > .dimmer { overflow: hidden; } -.scrolling.undetached.dimmable .ui.scrolling.modal { +.scrolling.undetached.dimmable .ui.scrolling.modal:not(.fullscreen) { position: absolute; left: 50%; margin-top: @scrollingMargin !important; @@ -414,16 +421,29 @@ max-height: @scrollingContentMaxHeight; overflow: auto; } +.ui.overlay.fullscreen.modal .content { + min-height: @overlayFullscreenScrollingContentMaxHeight; +} +.ui.overlay.fullscreen.modal .scrolling.content { + max-height: @overlayFullscreenScrollingContentMaxHeight; +} /*-------------- Full Screen ---------------*/ .ui.fullscreen.modal { - width: @fullScreenWidth !important; - left: @fullScreenOffset !important; + width: @fullScreenWidth; + left: @fullScreenOffset; margin: @fullScreenMargin; } +.ui.overlay.fullscreen.modal { + width: 100%; + left: 0; + margin: 0 auto; + top: 0; + border-radius:0; +} .ui.fullscreen.modal > .header { padding-right: @closeHitbox; } diff --git a/definitions/modules/nag.js b/definitions/modules/nag.js index eccd200..17b1569 100644 --- a/definitions/modules/nag.js +++ b/definitions/modules/nag.js @@ -43,7 +43,6 @@ $.fn.nag = function(parameters) { ? $.extend(true, {}, $.fn.nag.settings, parameters) : $.extend({}, $.fn.nag.settings), - className = settings.className, selector = settings.selector, error = settings.error, namespace = settings.namespace, @@ -53,7 +52,6 @@ $.fn.nag = function(parameters) { $module = $(this), - $close = $module.find(selector.close), $context = (settings.context) ? $(settings.context) : $('body'), @@ -61,24 +59,7 @@ $.fn.nag = function(parameters) { element = this, instance = $module.data(moduleNamespace), - moduleOffset, - moduleHeight, - - contextWidth, - contextHeight, - contextOffset, - - yOffset, - yPosition, - - timer, - module, - - requestAnimationFrame = window.requestAnimationFrame - || window.mozRequestAnimationFrame - || window.webkitRequestAnimationFrame - || window.msRequestAnimationFrame - || function(callback) { setTimeout(callback, 0); } + module ; module = { diff --git a/definitions/modules/popup.js b/definitions/modules/popup.js index 06b6f7d..7e82441 100644 --- a/definitions/modules/popup.js +++ b/definitions/modules/popup.js @@ -450,10 +450,6 @@ $.fn.popup = function(parameters) { hide: function(callback) { callback = $.isFunction(callback) ? callback : function(){}; module.debug('Hiding pop-up'); - if(settings.onHide.call($popup, element) === false) { - module.debug('onHide callback returned false, cancelling popup animation'); - return; - } if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) { $popup .transition({ diff --git a/definitions/modules/progress.js b/definitions/modules/progress.js index 45cad51..158ebfa 100644 --- a/definitions/modules/progress.js +++ b/definitions/modules/progress.js @@ -56,8 +56,8 @@ $.fn.progress = function(parameters) { moduleNamespace = 'module-' + namespace, $module = $(this), - $bar = $(this).find(selector.bar), - $progress = $(this).find(selector.progress), + $bars = $(this).find(selector.bar), + $progresses = $(this).find(selector.progress), $label = $(this).find(selector.label), element = this, @@ -67,14 +67,29 @@ $.fn.progress = function(parameters) { transitionEnd, module ; - module = { + helper: { + sum: function (nums) { + return nums.reduce(function (left, right) { + return left + right; + }, 0); + }, + forceArray: function (element) { + return Array.isArray(element) + ? element + : !isNaN(element) + ? [element] + : typeof element == 'string' + ? element.split(',') + : [] + ; + } + }, initialize: function() { - module.debug('Initializing progress bar', settings); - module.set.duration(); module.set.transitionEvent(); + module.debug(element); module.read.metadata(); module.read.settings(); @@ -113,21 +128,21 @@ $.fn.progress = function(parameters) { metadata: function() { var data = { - percent : $module.data(metadata.percent), + percent : module.helper.forceArray($module.data(metadata.percent)), total : $module.data(metadata.total), - value : $module.data(metadata.value) + value : module.helper.forceArray($module.data(metadata.value)) } ; if(data.total) { module.debug('Total value set from metadata', data.total); module.set.total(data.total); } - if(!isNaN(data.value)) { + if(data.value.length > 0) { module.debug('Current value set from metadata', data.value); module.set.value(data.value); module.set.progress(data.value); } - if(!isNaN(data.percent)) { + if(data.percent.length > 0) { module.debug('Current percent value set from metadata', data.percent); module.set.percent(data.percent); } @@ -154,14 +169,14 @@ $.fn.progress = function(parameters) { var transitionEnd = module.get.transitionEnd() ; - $bar + $bars .one(transitionEnd + eventNamespace, function(event) { clearTimeout(module.failSafeTimer); callback.call(this, event); }) ; module.failSafeTimer = setTimeout(function() { - $bar.triggerHandler(transitionEnd); + $bars.triggerHandler(transitionEnd); }, settings.duration + settings.failSafeDelay); module.verbose('Adding fail safe timer', module.timer); } @@ -169,23 +184,19 @@ $.fn.progress = function(parameters) { increment: function(incrementValue) { var - maxValue, startValue, newValue ; if( module.has.total() ) { startValue = module.get.value(); incrementValue = incrementValue || 1; - newValue = startValue + incrementValue; } else { startValue = module.get.percent(); incrementValue = incrementValue || module.get.randomValue(); - - newValue = startValue + incrementValue; - maxValue = 100; - module.debug('Incrementing percentage by', startValue, newValue); } + newValue = startValue + incrementValue; + module.debug('Incrementing percentage by', startValue, newValue, incrementValue); newValue = module.get.normalizedValue(newValue); module.set.progress(newValue); }, @@ -221,13 +232,14 @@ $.fn.progress = function(parameters) { }, get: { - text: function(templateText) { + text: function(templateText, index) { var - value = module.value || 0, + index_ = index || 0, + value = module.value[index_] || 0, total = module.total || 0, percent = (animating) - ? module.get.displayPercent() - : module.percent || 0, + ? module.get.displayPercent(index_) + : module.percent[index_] || 0, left = (module.total > 0) ? (total - value) : (100 - percent) @@ -238,6 +250,7 @@ $.fn.progress = function(parameters) { .replace('{total}', total) .replace('{left}', left) .replace('{percent}', percent) + .replace('{bar}', settings.text.bars[index_] || '') ; module.verbose('Adding variables to progress bar text', templateText); return templateText; @@ -302,25 +315,28 @@ $.fn.progress = function(parameters) { // gets current displayed percentage (if animating values this is the intermediary value) displayPercent: function() { - var - barWidth = $bar.width(), - totalWidth = $module.width(), - minDisplay = parseInt($bar.css('min-width'), 10), - displayPercent = (barWidth > minDisplay) - ? (barWidth / totalWidth * 100) - : module.percent - ; - return (settings.precision > 0) - ? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision) - : Math.round(displayPercent) - ; + return $bars.map(function(index, element) { + var + $bar = $(element), + barWidth = $bar.width(), + totalWidth = $module.width(), + minDisplay = parseInt($bar.css('min-width'), 10), + displayPercent = (barWidth > minDisplay) + ? (barWidth / totalWidth * 100) + : module.percent + ; + return (settings.precision > 0) + ? Math.round(displayPercent * (10 * settings.precision)) / (10 * settings.precision) + : Math.round(displayPercent) + ; + }).toArray(); }, - percent: function() { - return module.percent || 0; + percent: function(index) { + return module.percent[index || 0] || 0; }, - value: function() { - return module.nextValue || module.value || 0; + value: function(index) { + return module.nextValue || module.value[index || 0] || 0; }, total: function() { return module.total || false; @@ -394,19 +410,46 @@ $.fn.progress = function(parameters) { }, set: { - barWidth: function(value) { - if(value > 100) { - module.error(error.tooHigh, value); + barWidth: function(values) { + module.debug("set bar width with ", values); + values = module.helper.forceArray(values); + var total = module.helper.sum(values); + if(total > 100) { + module.error(error.tooHigh, total); } - else if (value < 0) { - module.error(error.tooLow, value); + else if (total < 0) { + module.error(error.tooLow, total); } else { - $bar - .css('width', value + '%') - ; + var firstNonZeroIndex = -1; + var lastNonZeroIndex = -1; + var percents = values.map(function(value, index) { + var $bar = $($bars[index]); + if (value === 0) { + $bar.css('display', 'none'); + } else { + if (firstNonZeroIndex == -1) { + firstNonZeroIndex = index; + } + lastNonZeroIndex = index; + $bar.css({ + display: 'block', + width: value + '%' + }); + } + return parseInt(value, 10); + }); + values.forEach(function(_, index) { + var $bar = $($bars[index]); + $bar.css({ + borderTopLeftRadius: index == firstNonZeroIndex ? '' : 0, + borderBottomLeftRadius: index == firstNonZeroIndex ? '' : 0, + borderTopRightRadius: index == lastNonZeroIndex ? '' : 0, + borderBottomRightRadius: index == lastNonZeroIndex ? '' : 0 + }); + }); $module - .attr('data-percent', parseInt(value, 10)) + .attr('data-percent', percents) ; } }, @@ -417,41 +460,48 @@ $.fn.progress = function(parameters) { : duration ; module.verbose('Setting progress bar transition duration', duration); - $bar + $bars .css({ 'transition-duration': duration }) ; }, - percent: function(percent) { - percent = (typeof percent == 'string') - ? +(percent.replace('%', '')) - : percent - ; + percent: function(percents) { + percents = module.helper.forceArray(percents).map(function(percent) { + return (typeof percent == 'string') + ? +(percent.replace('%', '')) + : percent + ; + }); // round display percentage - percent = (settings.precision > 0) - ? Math.round(percent * (10 * settings.precision)) / (10 * settings.precision) - : Math.round(percent) - ; - module.percent = percent; - if( !module.has.total() ) { - module.value = (settings.precision > 0) - ? Math.round( (percent / 100) * module.total * (10 * settings.precision)) / (10 * settings.precision) - : Math.round( (percent / 100) * module.total * 10) / 10 + percents = percents.map(function(percent){ + return (settings.precision > 0) + ? Math.round(percent * (10 * settings.precision)) / (10 * settings.precision) + : Math.round(percent) ; - if(settings.limitValues) { - module.value = (module.value > 100) - ? 100 - : (module.value < 0) - ? 0 - : module.value + }); + module.percent = percents; + if( !module.has.total() ) { + module.value = percents.map(function(percent){ + return (settings.precision > 0) + ? Math.round( (percent / 100) * module.total * (10 * settings.precision)) / (10 * settings.precision) + : Math.round( (percent / 100) * module.total * 10) / 10 ; + }); + if(settings.limitValues) { + module.value = module.value.map(function(value) { + return (value > 100) + ? 100 + : (module.value < 0) + ? 0 + : module.value; + }); } } - module.set.barWidth(percent); + module.set.barWidth(percents); module.set.labelInterval(); module.set.labels(); - settings.onChange.call(element, percent, module.value, module.total); + settings.onChange.call(element, percents, module.value, module.total); }, labelInterval: function() { var @@ -492,7 +542,7 @@ $.fn.progress = function(parameters) { state: function(percent) { percent = (percent !== undefined) ? percent - : module.percent + : module.helper.sum(module.percent) ; if(percent === 100) { if(settings.autoSuccess && !(module.is.warning() || module.is.error() || module.is.success())) { @@ -515,17 +565,20 @@ $.fn.progress = function(parameters) { } }, barLabel: function(text) { - if(text !== undefined) { - $progress.text( module.get.text(text) ); - } - else if(settings.label == 'ratio' && module.total) { - module.verbose('Adding ratio to bar label'); - $progress.text( module.get.text(settings.text.ratio) ); - } - else if(settings.label == 'percent') { - module.verbose('Adding percentage to bar label'); - $progress.text( module.get.text(settings.text.percent) ); - } + $progresses.map(function(index, element){ + var $progress = $(element); + if (text !== undefined) { + $progress.text( module.get.text(text, index) ); + } + else if (settings.label == 'ratio' && module.total) { + module.verbose('Adding ratio to bar label'); + $progress.text( module.get.text(settings.text.ratio, index) ); + } + else if (settings.label == 'percent') { + module.verbose('Adding percentage to bar label'); + $progress.text( module.get.text(settings.text.percent, index) ); + } + }); }, active: function(text) { text = text || settings.text.active; @@ -603,7 +656,7 @@ $.fn.progress = function(parameters) { module.total = totalValue; }, value: function(value) { - module.value = value; + module.value = module.helper.forceArray(value); }, progress: function(value) { if(!module.has.progressPoll()) { @@ -632,26 +685,31 @@ $.fn.progress = function(parameters) { module.remove.nextValue(); } }, - progress: function(value) { - var - percentComplete - ; - value = module.get.numericValue(value); - if(value === false) { - module.error(error.nonNumeric, value); - } - value = module.get.normalizedValue(value); - if( module.has.total() ) { - module.set.value(value); - percentComplete = (value / module.total) * 100; - module.debug('Calculating percent complete from total', percentComplete); - module.set.percent( percentComplete ); - } - else { - percentComplete = value; - module.debug('Setting value to exact percentage value', percentComplete); - module.set.percent( percentComplete ); + progress: function(values) { + var hasTotal = module.has.total(); + if (hasTotal) { + module.set.value(values); } + var percentCompletes = module.helper.forceArray(values).map(function(value) { + var + percentComplete + ; + value = module.get.numericValue(value); + if (value === false) { + module.error(error.nonNumeric, value); + } + value = module.get.normalizedValue(value); + if (hasTotal) { + percentComplete = (value / module.total) * 100; + module.debug('Calculating percent complete from total', percentComplete); + } + else { + percentComplete = value; + module.debug('Setting value to exact percentage value', percentComplete); + } + return percentComplete; + }); + module.set.percent( percentCompletes ); } }, @@ -911,7 +969,8 @@ $.fn.progress.settings = { success : false, warning : false, percent : '{percent}%', - ratio : '{value} of {total}' + ratio : '{value} of {total}', + bars : [''] }, className : { diff --git a/definitions/modules/progress.less b/definitions/modules/progress.less index 2886455..e100489 100644 --- a/definitions/modules/progress.less +++ b/definitions/modules/progress.less @@ -55,9 +55,10 @@ background: @barBackground; border-radius: @barBorderRadius; transition: @barTransition; + overflow: hidden; } -.ui.progress:not([data-percent]) .bar, -.ui.progress[data-percent="0"] .bar { +.ui.ui.ui.progress:not([data-percent]) .bar, +.ui.ui.ui.progress[data-percent="0"] .bar { background:transparent; } .ui.progress[data-percent="0"] .bar .progress { @@ -221,6 +222,11 @@ color: @successHeaderColor; } +/* Multiple */ +.ui.multiple.progress { + display: flex; +} + /******************************* States *******************************/ @@ -230,7 +236,7 @@ Success ---------------*/ -.ui.progress.success .bar { +.ui.ui.progress.success .bar { background-color: @successColor; } .ui.ui.progress.success .bar, @@ -245,7 +251,7 @@ Warning ---------------*/ -.ui.progress.warning .bar { +.ui.ui.progress.warning .bar { background-color: @warningColor; } .ui.ui.progress.warning .bar, @@ -260,7 +266,7 @@ Error ---------------*/ -.ui.progress.error .bar { +.ui.ui.progress.error .bar { background-color: @errorColor; } .ui.ui.progress.error .bar, @@ -408,10 +414,12 @@ each(@colors, { @c: @colors[@@color][color]; @l: @colors[@@color][light]; - .ui.@{color}.progress .bar { + .ui.@{color}.progress .bar, + .ui.progress .@{color}.bar { background-color: @c; } - .ui.@{color}.inverted.progress .bar { + .ui.@{color}.inverted.progress .bar, + .ui.inverted.progress .@{color}.bar { background-color: @l; } }) diff --git a/definitions/modules/rating.js b/definitions/modules/rating.js index cc951ba..0aeab1f 100644 --- a/definitions/modules/rating.js +++ b/definitions/modules/rating.js @@ -47,7 +47,6 @@ $.fn.rating = function(parameters) { className = settings.className, metadata = settings.metadata, selector = settings.selector, - error = settings.error, eventNamespace = '.' + namespace, moduleNamespace = 'module-' + namespace, diff --git a/definitions/modules/search.js b/definitions/modules/search.js index d31bb62..0f1200c 100644 --- a/definitions/modules/search.js +++ b/definitions/modules/search.js @@ -220,14 +220,12 @@ $.fn.search = function(parameters) { : $result.find('a[href]').eq(0), href = $link.attr('href') || false, target = $link.attr('target') || false, - title = $title.html(), // title is used for result lookup value = ($title.length > 0) ? $title.text() : false, results = module.get.results(), - result = $result.data(metadata.result) || module.get.result(value, results), - returnedValue + result = $result.data(metadata.result) || module.get.result(value, results) ; if(value) { module.set.value(value); @@ -357,8 +355,7 @@ $.fn.search = function(parameters) { onAbort : function(response) { }, onError : module.error - }, - searchHTML + } ; $.extend(true, apiSettings, settings.apiSettings); module.verbose('Setting up API request', apiSettings); @@ -805,8 +802,6 @@ $.fn.search = function(parameters) { id: function(resultIndex, categoryIndex) { var resultID = (resultIndex + 1), // not zero indexed - categoryID = (categoryIndex + 1), - firstCharCode, letterID, id ; diff --git a/definitions/modules/shape.js b/definitions/modules/shape.js index c3b56e0..8093767 100644 --- a/definitions/modules/shape.js +++ b/definitions/modules/shape.js @@ -26,7 +26,6 @@ window = (typeof window != 'undefined' && window.Math == Math) $.fn.shape = function(parameters) { var $allModules = $(this), - $body = $('body'), time = new Date().getTime(), performance = [], @@ -64,8 +63,8 @@ $.fn.shape = function(parameters) { // selector cache $module = $(this), - $sides = $module.find(selector.sides), - $side = $module.find(selector.side), + $sides = $module.find('>' + selector.sides), + $side = $sides.find('>' + selector.side), // private variables nextIndex = false, @@ -105,7 +104,7 @@ $.fn.shape = function(parameters) { refresh: function() { module.verbose('Refreshing selector cache for', element); $module = $(element); - $sides = $(this).find(selector.shape); + $sides = $(this).find(selector.sides); $side = $(this).find(selector.side); }, @@ -194,16 +193,19 @@ $.fn.shape = function(parameters) { }, animating: function() { return $module.hasClass(className.animating); + }, + hidden: function() { + return $module.closest(':hidden').length > 0; } }, set: { defaultSide: function() { - $activeSide = $module.find('.' + settings.className.active); + $activeSide = $side.filter('.' + settings.className.active); $nextSide = ( $activeSide.next(selector.side).length > 0 ) ? $activeSide.next(selector.side) - : $module.find(selector.side).first() + : $side.first() ; nextIndex = false; module.verbose('Active side set to', $activeSide); @@ -232,7 +234,7 @@ $.fn.shape = function(parameters) { currentStageSize: function() { var - $activeSide = $module.find('.' + settings.className.active), + $activeSide = $side.filter('.' + settings.className.active), width = $activeSide.outerWidth(true), height = $activeSide.outerHeight(true) ; @@ -247,20 +249,21 @@ $.fn.shape = function(parameters) { stageSize: function() { var $clone = $module.clone().addClass(className.loading), - $activeSide = $clone.find('.' + settings.className.active), + $side = $clone.find('>' + selector.sides + '>' + selector.side), + $activeSide = $side.filter('.' + settings.className.active), $nextSide = (nextIndex) - ? $clone.find(selector.side).eq(nextIndex) + ? $side.eq(nextIndex) : ( $activeSide.next(selector.side).length > 0 ) ? $activeSide.next(selector.side) - : $clone.find(selector.side).first(), - newWidth = (settings.width == 'next') + : $side.first(), + newWidth = (settings.width === 'next') ? $nextSide.outerWidth(true) - : (settings.width == 'initial') + : (settings.width === 'initial') ? $module.width() : settings.width, - newHeight = (settings.height == 'next') + newHeight = (settings.height === 'next') ? $nextSide.outerHeight(true) - : (settings.height == 'initial') + : (settings.height === 'initial') ? $module.height() : settings.height ; @@ -268,11 +271,11 @@ $.fn.shape = function(parameters) { $nextSide.addClass(className.active); $clone.insertAfter($module); $clone.remove(); - if(settings.width != 'auto') { + if(settings.width !== 'auto') { $module.css('width', newWidth + settings.jitter); module.verbose('Specifying width during animation', newWidth); } - if(settings.height != 'auto') { + if(settings.height !== 'auto') { $module.css('height', newHeight + settings.jitter); module.verbose('Specifying height during animation', newHeight); } @@ -303,113 +306,51 @@ $.fn.shape = function(parameters) { }, flip: { - - up: function() { + to: function(type,stage){ + if(module.is.hidden()) { + module.debug('Module not visible', $nextSide); + return; + } if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { module.debug('Side already visible', $nextSide); return; } + var + transform = module.get.transform[type]() + ; if( !module.is.animating()) { - module.debug('Flipping up', $nextSide); - var - transform = module.get.transform.up() - ; + module.debug('Flipping '+type, $nextSide); module.set.stageSize(); - module.stage.above(); + module.stage[stage](); module.animate(transform); } else { - module.queue('flip up'); + module.queue('flip '+type); } }, + up: function() { + module.flip.to('up','above'); + }, + down: function() { - if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { - module.debug('Side already visible', $nextSide); - return; - } - if( !module.is.animating()) { - module.debug('Flipping down', $nextSide); - var - transform = module.get.transform.down() - ; - module.set.stageSize(); - module.stage.below(); - module.animate(transform); - } - else { - module.queue('flip down'); - } + module.flip.to('down','below'); }, left: function() { - if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { - module.debug('Side already visible', $nextSide); - return; - } - if( !module.is.animating()) { - module.debug('Flipping left', $nextSide); - var - transform = module.get.transform.left() - ; - module.set.stageSize(); - module.stage.left(); - module.animate(transform); - } - else { - module.queue('flip left'); - } + module.flip.to('left','left'); }, right: function() { - if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { - module.debug('Side already visible', $nextSide); - return; - } - if( !module.is.animating()) { - module.debug('Flipping right', $nextSide); - var - transform = module.get.transform.right() - ; - module.set.stageSize(); - module.stage.right(); - module.animate(transform); - } - else { - module.queue('flip right'); - } + module.flip.to('right','right'); }, over: function() { - if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { - module.debug('Side already visible', $nextSide); - return; - } - if( !module.is.animating()) { - module.debug('Flipping over', $nextSide); - module.set.stageSize(); - module.stage.behind(); - module.animate(module.get.transform.over() ); - } - else { - module.queue('flip over'); - } + module.flip.to('over','behind'); }, back: function() { - if(module.is.complete() && !module.is.animating() && !settings.allowRepeats) { - module.debug('Side already visible', $nextSide); - return; - } - if( !module.is.animating()) { - module.debug('Flipping back', $nextSide); - module.set.stageSize(); - module.stage.behind(); - module.animate(module.get.transform.back() ); - } - else { - module.queue('flip back'); - } + module.flip.to('back','behind'); } }, @@ -419,49 +360,43 @@ $.fn.shape = function(parameters) { transform: { up: function() { var - translate = { - y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), - z: -($activeSide.outerHeight(true) / 2) - } + translateZ = $activeSide.outerHeight(true) / 2, + translateY = $nextSide.outerHeight(true) - translateZ ; return { - transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(-90deg)' + transform: 'translateY(' + translateY + 'px) translateZ(-'+ translateZ + 'px) rotateX(-90deg)' }; }, down: function() { var translate = { - y: -(($activeSide.outerHeight(true) - $nextSide.outerHeight(true)) / 2), - z: -($activeSide.outerHeight(true) / 2) + z: $activeSide.outerHeight(true) / 2 } ; return { - transform: 'translateY(' + translate.y + 'px) translateZ('+ translate.z + 'px) rotateX(90deg)' + transform: 'translateY(-' + translate.z + 'px) translateZ(-'+ translate.z + 'px) rotateX(90deg)' }; }, left: function() { var - translate = { - x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2), - z : -($activeSide.outerWidth(true) / 2) - } + translateZ = $activeSide.outerWidth(true) / 2, + translateX = $nextSide.outerWidth(true) - translateZ ; return { - transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(90deg)' + transform: 'translateX(' + translateX + 'px) translateZ(-' + translateZ + 'px) rotateY(90deg)' }; }, right: function() { var translate = { - x : -(($activeSide.outerWidth(true) - $nextSide.outerWidth(true)) / 2), - z : -($activeSide.outerWidth(true) / 2) + z : $activeSide.outerWidth(true) / 2 } ; return { - transform: 'translateX(' + translate.x + 'px) translateZ(' + translate.z + 'px) rotateY(-90deg)' + transform: 'translateX(-' + translate.z + 'px) translateZ(-' + translate.z + 'px) rotateY(-90deg)' }; }, @@ -509,7 +444,7 @@ $.fn.shape = function(parameters) { nextSide: function() { return ( $activeSide.next(selector.side).length > 0 ) ? $activeSide.next(selector.side) - : $module.find(selector.side).first() + : $side.first() ; } @@ -528,21 +463,16 @@ $.fn.shape = function(parameters) { } ; module.verbose('Setting the initial animation position as above', $nextSide, box); - $sides - .css({ - 'transform' : 'translateZ(-' + box.depth.active + 'px)' - }) - ; $activeSide .css({ - 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + 'transform' : 'rotateX(0deg)' }) ; $nextSide .addClass(className.animating) .css({ 'top' : box.origin + 'px', - 'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px)' + 'transform' : 'rotateX(90deg) translateZ(' + box.depth.next + 'px) translateY(-' + box.depth.active + 'px)' }) ; }, @@ -558,21 +488,16 @@ $.fn.shape = function(parameters) { } ; module.verbose('Setting the initial animation position as below', $nextSide, box); - $sides - .css({ - 'transform' : 'translateZ(-' + box.depth.active + 'px)' - }) - ; $activeSide .css({ - 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + 'transform' : 'rotateX(0deg)' }) ; $nextSide .addClass(className.animating) .css({ 'top' : box.origin + 'px', - 'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px)' + 'transform' : 'rotateX(-90deg) translateZ(' + box.depth.next + 'px) translateY(' + box.depth.active + 'px)' }) ; }, @@ -592,21 +517,16 @@ $.fn.shape = function(parameters) { } ; module.verbose('Setting the initial animation position as left', $nextSide, box); - $sides - .css({ - 'transform' : 'translateZ(-' + box.depth.active + 'px)' - }) - ; $activeSide .css({ - 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + 'transform' : 'rotateY(0deg)' }) ; $nextSide .addClass(className.animating) .css({ 'left' : box.origin + 'px', - 'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px)' + 'transform' : 'rotateY(-90deg) translateZ(' + box.depth.next + 'px) translateX(-' + box.depth.active + 'px)' }) ; }, @@ -625,22 +545,17 @@ $.fn.shape = function(parameters) { } } ; - module.verbose('Setting the initial animation position as left', $nextSide, box); - $sides - .css({ - 'transform' : 'translateZ(-' + box.depth.active + 'px)' - }) - ; + module.verbose('Setting the initial animation position as right', $nextSide, box); $activeSide .css({ - 'transform' : 'rotateY(0deg) translateZ(' + box.depth.active + 'px)' + 'transform' : 'rotateY(0deg)' }) ; $nextSide .addClass(className.animating) .css({ 'left' : box.origin + 'px', - 'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px)' + 'transform' : 'rotateY(90deg) translateZ(' + box.depth.next + 'px) translateX(' + box.depth.active + 'px)' }) ; }, @@ -843,7 +758,15 @@ $.fn.shape = function(parameters) { if(instance === undefined) { module.initialize(); } - module.invoke(query); + var $inputs = $module.find('input'); + if( $inputs.length > 0) { + $inputs.blur(); + setTimeout(function(){ + module.invoke(query); + }, 150); + } else { + module.invoke(query); + } } else { if(instance !== undefined) { diff --git a/definitions/modules/shape.less b/definitions/modules/shape.less index f15483f..2d1b23b 100644 --- a/definitions/modules/shape.less +++ b/definitions/modules/shape.less @@ -133,6 +133,10 @@ .ui.shape.animating .side { transition: @sideTransition; } +.ui.shape .animating.side *, +.ui.shape.animating .side * { + transition: none; +} /*-------------- Active diff --git a/definitions/modules/sidebar.js b/definitions/modules/sidebar.js index bf69f1e..1d7e118 100644 --- a/definitions/modules/sidebar.js +++ b/definitions/modules/sidebar.js @@ -141,17 +141,19 @@ $.fn.sidebar = function(parameters) { event: { clickaway: function(event) { - var - clickedInPusher = ($pusher.find(event.target).length > 0 || $pusher.is(event.target)), - clickedContext = ($context.is(event.target)) - ; - if(clickedInPusher) { - module.verbose('User clicked on dimmed page'); - module.hide(); - } - if(clickedContext) { - module.verbose('User clicked on dimmable context (scaled out page)'); - module.hide(); + if(settings.closable){ + var + clickedInPusher = ($pusher.find(event.target).length > 0 || $pusher.is(event.target)), + clickedContext = ($context.is(event.target)) + ; + if(clickedInPusher) { + module.verbose('User clicked on dimmed page'); + module.hide(); + } + if(clickedContext) { + module.verbose('User clicked on dimmable context (scaled out page)'); + module.hide(); + } } }, touch: function(event) { @@ -409,7 +411,7 @@ $.fn.sidebar = function(parameters) { ? callback : function(){} ; - if(settings.closable && (module.is.visible() || module.is.animating())) { + if(module.is.visible() || module.is.animating()) { module.debug('Hiding sidebar', callback); module.refreshSidebars(); module.pullPage(function() { diff --git a/definitions/modules/sidebar.less b/definitions/modules/sidebar.less index 6a241aa..f238fc0 100644 --- a/definitions/modules/sidebar.less +++ b/definitions/modules/sidebar.less @@ -94,7 +94,10 @@ /* Whole Page */ body.pushable { - background: @canvasBackground !important; + background: @canvasBackground; + &.dimmed { + background: inherit; + } } /* Page Context */ diff --git a/definitions/modules/slider.less b/definitions/modules/slider.less index aaa34a0..a6ed9da 100644 --- a/definitions/modules/slider.less +++ b/definitions/modules/slider.less @@ -7,16 +7,16 @@ @import (multiple) '../../theme.config'; -.ui.slider:not(.vertical) { +.ui.slider:not(.vertical):not(.checkbox) { width: 100%; padding: @padding; } -.ui.slider { +.ui.slider:not(.checkbox) { position: relative; } -.ui.slider:focus { +.ui.slider:not(.checkbox):focus { outline: 0; } @@ -89,7 +89,7 @@ Disabled ---------------*/ -.ui.disabled.slider { +.ui.disabled.slider:not(.checkbox) { opacity: @disabledOpactiy; } diff --git a/definitions/modules/sticky.js b/definitions/modules/sticky.js index ce6ed0c..bac603f 100644 --- a/definitions/modules/sticky.js +++ b/definitions/modules/sticky.js @@ -57,7 +57,6 @@ $.fn.sticky = function(parameters) { $container, $context, - selector = $module.selector || '', instance = $module.data(moduleNamespace), requestAnimationFrame = window.requestAnimationFrame @@ -241,8 +240,7 @@ $.fn.sticky = function(parameters) { supports: { sticky: function() { var - $element = $('
'), - element = $element[0] + $element = $('
') ; $element.addClass(className.supported); return($element.css('position').match('sticky')); @@ -273,9 +271,6 @@ $.fn.sticky = function(parameters) { context = { offset : $context.offset(), height : $context.outerHeight() - }, - container = { - height: $container.outerHeight() } ; if( !module.is.standardScroll() ) { @@ -488,7 +483,6 @@ $.fn.sticky = function(parameters) { top : cachedPosition + offset, bottom : cachedPosition + offset + scrollContext.height }, - direction = module.get.direction(scroll.top), elementScroll = (fits) ? 0 : module.get.elementScroll(scroll.top), diff --git a/definitions/modules/tab.js b/definitions/modules/tab.js index ea5b1d1..987ab5c 100644 --- a/definitions/modules/tab.js +++ b/definitions/modules/tab.js @@ -58,6 +58,7 @@ $.fn.tab = function(parameters) { metadata = settings.metadata, selector = settings.selector, error = settings.error, + regExp = settings.regExp, eventNamespace = '.' + settings.namespace, moduleNamespace = 'module-' + settings.namespace, @@ -275,6 +276,13 @@ $.fn.tab = function(parameters) { } }, + escape: { + string: function(text) { + text = String(text); + return text.replace(regExp.escape, '\\$&'); + } + }, + set: { auto: function() { var @@ -386,6 +394,7 @@ $.fn.tab = function(parameters) { } else if(tabPath.search('/') == -1 && tabPath !== '') { // look for in page anchor + tabPath = module.escape.string(tabPath); $anchor = $('#' + tabPath + ', a[name="' + tabPath + '"]'); currentPath = $anchor.closest('[data-tab]').data(metadata.tab); $tab = module.get.tabElement(currentPath); @@ -627,7 +636,7 @@ $.fn.tab = function(parameters) { }, defaultPath: function(tabPath) { var - $defaultNav = $allModules.filter('[data-' + metadata.tab + '^="' + tabPath + '/"]').eq(0), + $defaultNav = $allModules.filter('[data-' + metadata.tab + '^="' + module.escape.string(tabPath) + '/"]').eq(0), defaultTab = $defaultNav.data(metadata.tab) || false ; if( defaultTab ) { @@ -646,7 +655,7 @@ $.fn.tab = function(parameters) { }, navElement: function(tabPath) { tabPath = tabPath || activeTabPath; - return $allModules.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); + return $allModules.filter('[data-' + metadata.tab + '="' + module.escape.string(tabPath) + '"]'); }, tabElement: function(tabPath) { var @@ -658,8 +667,8 @@ $.fn.tab = function(parameters) { tabPath = tabPath || activeTabPath; tabPathArray = module.utilities.pathToArray(tabPath); lastTab = module.utilities.last(tabPathArray); - $fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + tabPath + '"]'); - $simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + lastTab + '"]'); + $fullPathTab = $tabs.filter('[data-' + metadata.tab + '="' + module.escape.string(tabPath) + '"]'); + $simplePathTab = $tabs.filter('[data-' + metadata.tab + '="' + module.escape.string(lastTab) + '"]'); return ($fullPathTab.length > 0) ? $fullPathTab : $simplePathTab @@ -938,6 +947,10 @@ $.fn.tab.settings = { state : 'History requires Asual\'s Address library ' }, + regExp : { + escape : /[-[\]{}()*+?.,\\^$|#\s:=@]/g + }, + metadata : { tab : 'tab', loaded : 'loaded', diff --git a/definitions/modules/transition.js b/definitions/modules/transition.js index 2aae9a3..6ae7c91 100644 --- a/definitions/modules/transition.js +++ b/definitions/modules/transition.js @@ -36,12 +36,6 @@ $.fn.transition = function() { queryArguments = [].slice.call(arguments, 1), methodInvoked = (typeof query === 'string'), - requestAnimationFrame = window.requestAnimationFrame - || window.mozRequestAnimationFrame - || window.webkitRequestAnimationFrame - || window.msRequestAnimationFrame - || function(callback) { setTimeout(callback, 0); }, - returnedValue ; $allModules @@ -58,9 +52,7 @@ $.fn.transition = function() { className, metadata, animationEnd, - animationName, - namespace, moduleNamespace, eventNamespace, module @@ -263,9 +255,6 @@ $.fn.transition = function() { $module .attr('style', overrideStyle) ; - if(style === '') { - $module.removeAttr('style'); - } return true; }, hidden: function() { @@ -314,22 +303,17 @@ $.fn.transition = function() { set: { animating: function(animation) { - // override display if necessary so animation appears visibly - if(module.force.visible()) { - var - animationClass, - direction - ; - // remove previous callbacks - module.remove.completeCallback(); + // remove previous callbacks + module.remove.completeCallback(); - // determine exact animation - animation = animation || settings.animation; - animationClass = module.get.animationClass(animation); + // determine exact animation + animation = animation || settings.animation; + var animationClass = module.get.animationClass(animation); // save animation class in cache to restore class names - module.save.animation(animationClass); + module.save.animation(animationClass); + if(module.force.visible()) { module.remove.hidden(); module.remove.direction(); diff --git a/definitions/views/card.less b/definitions/views/card.less index 64477d1..c5d3f1e 100644 --- a/definitions/views/card.less +++ b/definitions/views/card.less @@ -331,6 +331,9 @@ .ui.card > .button { margin: @buttonMargin; width: @buttonWidth; + &:last-child { + margin-bottom: -@borderWidth; + } } /*-------------- @@ -523,6 +526,8 @@ each(@colors,{ @color: replace(@key,'@',''); @c: @colors[@@color][color]; @h: @colors[@@color][hover]; + @l: @colors[@@color][light]; + @lh: @colors[@@color][lightHover]; .ui.@{color}.cards > .card, .ui.cards > .@{color}.card, @@ -532,15 +537,29 @@ each(@colors,{ 0 @coloredShadowDistance 0 0 @c, @shadowBoxShadow ; - } - .ui.@{color}.cards > .card:hover, - .ui.cards > .@{color}.card:hover, - .ui.@{color}.card:hover { + &:hover { box-shadow: @borderShadow, 0 @coloredShadowDistance 0 0 @h, @shadowHoverBoxShadow + ; + } + } + .ui.inverted.@{color}.cards > .card, + .ui.inverted.cards > .@{color}.card, + .ui.inverted.@{color}.card { + box-shadow: + 0 @shadowDistance 3px 0 @solidWhiteBorderColor, + 0 @coloredShadowDistance 0 0 @l, + 0 0 0 @borderWidth @solidWhiteBorderColor ; + &:hover { + box-shadow: + 0 @shadowDistance 3px 0 @solidWhiteBorderColor, + 0 @coloredShadowDistance 0 0 @lh, + 0 0 0 @borderWidth @solidWhiteBorderColor + ; + } } }) diff --git a/package.json b/package.json index 30ffd88..3f044d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "fomantic-ui-less", - "version": "2.7.2", + "version": "2.7.3", "title": "Fomantic UI", "description": "LESS only distribution of Fomantic UI", "homepage": "https://fomantic-ui.com", diff --git a/themes/default/collections/table.variables b/themes/default/collections/table.variables index 3e38cd1..feda0a8 100644 --- a/themes/default/collections/table.variables +++ b/themes/default/collections/table.variables @@ -206,6 +206,7 @@ /* Inverted */ @invertedBackground: #333333; @invertedBorder: none; +@invertedCellBorder: 1px solid @whiteBorderColor; @invertedCellBorderColor: @whiteBorderColor; @invertedCellColor: @invertedTextColor; diff --git a/themes/default/elements/label.variables b/themes/default/elements/label.variables index ea17123..9778c6c 100644 --- a/themes/default/elements/label.variables +++ b/themes/default/elements/label.variables @@ -140,7 +140,7 @@ @ribbonImageOffset: e(%("calc(%d - %d)", -@ribbonImageMargin, @ribbonTriangleSize)); @rightRibbonImageOffset: e(%("calc(100%% + %d + %d)", @ribbonImageMargin, @ribbonTriangleSize)); -@ribbonTableMargin: @relativeMini; /* Rounding Offset on Triangle */ +@ribbonTableMargin: @relativeMedium; /* Rounding Offset on Triangle */ @ribbonTableOffset: e(%("calc(%d - %d)", -@ribbonTableMargin, @ribbonTriangleSize)); @rightRibbonTableOffset: e(%("calc(100%% + %d + %d)", @ribbonTableMargin, @ribbonTriangleSize)); @@ -204,7 +204,8 @@ @cornerIconSize: @relativeLarge; @cornerIconTopOffset: @relative9px; -@cornerIconLeftOffset: @relative11px; +@cornerIconLeftOffset: @relative8px; +@cornerIconRightOffset: @relative8px; /* Corner Text */ @cornerTextWidth: 3em; diff --git a/themes/default/globals/site.variables b/themes/default/globals/site.variables index 5bc8d94..43b6203 100644 --- a/themes/default/globals/site.variables +++ b/themes/default/globals/site.variables @@ -7,7 +7,6 @@ --------------------*/ @fontName : 'Lato'; -@fontSmoothing : antialiased; @headerFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif; @pageFont : @fontName, 'Helvetica Neue', Arial, Helvetica, sans-serif; @@ -781,10 +780,10 @@ /* Responsive */ -@largestMobileScreen : (@tabletBreakpoint - 1px); -@largestTabletScreen : (@computerBreakpoint - 1px); -@largestSmallMonitor : (@largeMonitorBreakpoint - 1px); -@largestLargeMonitor : (@widescreenMonitorBreakpoint - 1px); +@largestMobileScreen : (@tabletBreakpoint - 0.01px); +@largestTabletScreen : (@computerBreakpoint - 0.01px); +@largestSmallMonitor : (@largeMonitorBreakpoint - 0.01px); +@largestLargeMonitor : (@widescreenMonitorBreakpoint - 0.01px); /*------------------- diff --git a/themes/default/modules/calendar.variables b/themes/default/modules/calendar.variables index 7682832..e81e2fd 100644 --- a/themes/default/modules/calendar.variables +++ b/themes/default/modules/calendar.variables @@ -13,3 +13,6 @@ @rangeInvertedBackground: @transparentWhite; @rangeInvertedTextColor: @invertedSelectedTextColor; @rangeInvertedBoxShadow: none; + +@adjacentTextColor: @mutedTextColor; +@adjacentBackground: @subtleTransparentBlack; diff --git a/themes/default/modules/checkbox.variables b/themes/default/modules/checkbox.variables index 5d62ee0..dd59dd6 100644 --- a/themes/default/modules/checkbox.variables +++ b/themes/default/modules/checkbox.variables @@ -166,6 +166,8 @@ @toggleLaneVerticalOffset: 0; @toggleOffOffset: -0.05rem; @toggleOnOffset: (@toggleLaneWidth - @toggleHandleSize) + 0.15rem; +@toggleCenterOffset: @toggleOnOffset / 2; +@toggleCenterLaneBackground: @veryStrongTransparentBlack; @toggleLabelDistance: @toggleLaneWidth + 1rem; @toggleLabelLineHeight: 1.5rem; diff --git a/themes/default/modules/modal.variables b/themes/default/modules/modal.variables index bf17ad6..c92681d 100644 --- a/themes/default/modules/modal.variables +++ b/themes/default/modules/modal.variables @@ -117,16 +117,20 @@ @basicInvertedModalColor: @textColor; @basicInvertedModalHeaderColor: @darkTextColor; -/* Top Aligned */ +/* Aligned */ @topAlignedMargin: 5vh; @mobileTopAlignedMargin: 1rem; +@bottomAlignedMargin: @topAlignedMargin; +@mobileBottomAlignedMargin: @mobileTopAlignedMargin; /* Scrolling Margin */ @scrollingMargin: 1rem; @mobileScrollingMargin: @mobileTopAlignedMargin; /* Scrolling Content */ -@scrollingContentMaxHeight: calc(80vh - 10em); +@scrollingContentMaxHeight: calc(80vh - 10rem); +@overlayFullscreenScrollingContentMaxHeight: calc(100vh - 9.1rem); +@overlayFullscreenScrollingContentMaxHeightMobile: calc(100vh - 8.1rem); /*------------------- Variations diff --git a/themes/flat/globals/site.variables b/themes/flat/globals/site.variables index 90e7c87..e335b59 100644 --- a/themes/flat/globals/site.variables +++ b/themes/flat/globals/site.variables @@ -15,7 +15,6 @@ @headerFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; @pageFont : "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif; -@fontSmoothing : antialiased; /*------------------- Site Colors