';
+ 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 += '
';
} else if (itemType === 'header') {
var groupName = escape(option[fields.name] || '', preserveHTML),
diff --git a/semantic/src/definitions/modules/dropdown.less b/semantic/src/definitions/modules/dropdown.less
index 3953c20..00c1374 100644
--- a/semantic/src/definitions/modules/dropdown.less
+++ b/semantic/src/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/semantic/src/definitions/modules/modal.js b/semantic/src/definitions/modules/modal.js
index 420ecc2..3091c75 100644
--- a/semantic/src/definitions/modules/modal.js
+++ b/semantic/src/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($('', {
+ html: icon + text,
+ class: className.button + ' ' + cls,
+ click: function () {
+ if (click.call(element, $module) === false) {
+ return;
+ }
+ module.hide();
+ }
+ }));
+ });
+ }
module.cache = {};
module.verbose('Initializing dimmer', $context);
@@ -110,6 +151,9 @@ $.fn.modal = function(parameters) {
module.observeChanges();
}
module.instantiate();
+ if(settings.autoShow){
+ module.show();
+ }
},
instantiate: function() {
@@ -121,6 +165,23 @@ $.fn.modal = function(parameters) {
},
create: {
+ modal: function() {
+ $module = $('', {class: className.modal});
+ if (settings.closeIcon) {
+ $close = $('', {class: className.close})
+ $module.append($close);
+ }
+ if (settings.title !== '') {
+ $('', {class: className.title}).appendTo($module);
+ }
+ if (settings.content !== '') {
+ $('', {class: className.content}).appendTo($module);
+ }
+ if (module.has.configActions()) {
+ $('', {class: className.actions}).appendTo($module);
+ }
+ $context.append($module);
+ },
dimmer: function() {
var
defaultSettings = {
@@ -247,6 +308,12 @@ $.fn.modal = function(parameters) {
get: {
id: function() {
return (Math.random().toString(16) + '000000000').substr(2, 8);
+ },
+ element: function() {
+ return $module;
+ },
+ settings: function() {
+ return settings;
}
},
@@ -424,9 +491,9 @@ $.fn.modal = function(parameters) {
$module
.transition({
debug : settings.debug,
- animation : settings.transition + ' in',
+ animation : (settings.transition.showMethod || settings.transition) + ' in',
queue : settings.queue,
- duration : settings.duration,
+ duration : settings.transition.showDuration || settings.duration,
useFailSafe : true,
onComplete : function() {
settings.onVisible.apply(element);
@@ -474,9 +541,9 @@ $.fn.modal = function(parameters) {
$module
.transition({
debug : settings.debug,
- animation : settings.transition + ' out',
+ animation : (settings.transition.hideMethod || settings.transition) + ' out',
queue : settings.queue,
- duration : settings.duration,
+ duration : settings.transition.hideDuration || settings.duration,
useFailSafe : true,
onStart : function() {
if(!module.others.active() && !module.others.animating() && !keepDimmed) {
@@ -499,7 +566,9 @@ $.fn.modal = function(parameters) {
$previousModal.find(selector.dimmer).removeClass('active');
}
}
- settings.onHidden.call(element);
+ if($.isFunction(settings.onHidden)) {
+ settings.onHidden.call(element);
+ }
module.remove.dimmerStyles();
module.restore.focus();
callback();
@@ -625,7 +694,12 @@ $.fn.modal = function(parameters) {
bodyMargin: function() {
var position = module.can.leftBodyScrollbar() ? 'left':'right';
$body.css('margin-'+position, initialBodyMargin);
- $body.find(selector.bodyFixed.replace('right',position)).css('padding-'+position, initialBodyMargin);
+ $body.find(selector.bodyFixed.replace('right',position)).each(function(){
+ var el = $(this),
+ attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
+ ;
+ el.css(attribute, '');
+ });
}
},
@@ -699,7 +773,35 @@ $.fn.modal = function(parameters) {
$module.removeClass(className.loading);
module.debug('Caching modal and container sizes', module.cache);
},
-
+ helpers: {
+ deQuote: function(string) {
+ return String(string).replace(/"/g,"");
+ },
+ escape: function(string, preserveHTML) {
+ if (preserveHTML){
+ return string;
+ }
+ var
+ badChars = /[<>"'`]/g,
+ shouldEscape = /[&<>"'`]/,
+ escape = {
+ "<": "<",
+ ">": ">",
+ '"': """,
+ "'": "'",
+ "`": "`"
+ },
+ escapedChar = function(chr) {
+ return escape[chr];
+ }
+ ;
+ if(shouldEscape.test(string)) {
+ string = string.replace(/&(?![a-z0-9#]{1,6};)/, "&");
+ return string.replace(badChars, escapedChar);
+ }
+ return string;
+ }
+ },
can: {
leftBodyScrollbar: function(){
if(module.cache.leftBodyScrollbar === undefined) {
@@ -734,7 +836,11 @@ $.fn.modal = function(parameters) {
;
}
},
-
+ has: {
+ configActions: function () {
+ return Array.isArray(settings.actions) && settings.actions.length > 0;
+ }
+ },
is: {
active: function() {
return $module.hasClass(className.active);
@@ -811,7 +917,12 @@ $.fn.modal = function(parameters) {
if(settings.detachable || module.can.fit()) {
$body.css('margin-'+position, tempBodyMargin + 'px');
}
- $body.find(selector.bodyFixed.replace('right',position)).css('padding-'+position, tempBodyMargin + 'px');
+ $body.find(selector.bodyFixed.replace('right',position)).each(function(){
+ var el = $(this),
+ attribute = el.css('position') === 'fixed' ? 'padding-'+position : position
+ ;
+ el.css(attribute, 'calc(' + el.css(attribute) + ' + ' + tempBodyMargin + 'px)');
+ });
},
clickaway: function() {
if (!settings.detachable) {
@@ -838,8 +949,8 @@ $.fn.modal = function(parameters) {
closable : 'auto',
useFlex : module.can.useFlex(),
duration : {
- show : settings.duration,
- hide : settings.duration
+ show : settings.transition.showDuration || settings.duration,
+ hide : settings.transition.hideDuration || settings.duration
}
},
dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
@@ -1098,15 +1209,29 @@ $.fn.modal = function(parameters) {
if(methodInvoked) {
if(instance === undefined) {
+ if ($.isFunction(settings.templates[query])) {
+ settings.autoShow = true;
+ settings.className.modal = settings.className.template;
+ settings = $.extend(true, {}, settings, settings.templates[query].apply(module ,queryArguments));
+
+ // reassign shortcuts
+ className = settings.className;
+ namespace = settings.namespace;
+ fields = settings.fields;
+ error = settings.error;
+ }
module.initialize();
}
- module.invoke(query);
+ if (!$.isFunction(settings.templates[query])) {
+ module.invoke(query);
+ }
}
else {
if(instance !== undefined) {
instance.invoke('destroy');
}
module.initialize();
+ returnedValue = $module;
}
})
;
@@ -1137,6 +1262,7 @@ $.fn.modal.settings = {
closable : true,
autofocus : true,
restoreFocus : true,
+ autoShow : false,
inverted : false,
blurring : false,
@@ -1161,6 +1287,24 @@ $.fn.modal.settings = {
padding : 50,
scrollbarWidth: 10,
+ //dynamic content
+ title : '',
+ content : '',
+ class : '',
+ classTitle : '',
+ classContent : '',
+ classActions : '',
+ closeIcon : false,
+ actions : false,
+ preserveHTML : true,
+
+ fields : {
+ class : 'class',
+ text : 'text',
+ icon : 'icon',
+ click : 'click'
+ },
+
// called before show animation
onShow : function(){},
@@ -1171,7 +1315,7 @@ $.fn.modal.settings = {
onHide : function(){ return true; },
// called after hide animation
- onHidden : function(){},
+ onHidden : false,
// called after approve selector match
onApprove : function(){ return true; },
@@ -1180,12 +1324,16 @@ $.fn.modal.settings = {
onDeny : function(){ return true; },
selector : {
+ title : '> .header',
+ content : '> .content',
+ actions : '> .actions',
close : '> .close',
approve : '.actions .positive, .actions .approve, .actions .ok',
deny : '.actions .negative, .actions .deny, .actions .cancel',
modal : '.ui.modal',
dimmer : '> .ui.dimmer',
- bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar'
+ bodyFixed: '> .ui.fixed.menu, > .ui.right.toast-container, > .ui.right.sidebar, > .ui.fixed.nag, > .ui.fixed.nag > .close',
+ prompt : '.ui.input > input'
},
error : {
dimmer : 'UI Dimmer, a required component is not included in this page',
@@ -1201,9 +1349,104 @@ $.fn.modal.settings = {
loading : 'loading',
scrolling : 'scrolling',
undetached : 'undetached',
- front : 'front'
+ front : 'front',
+ close : 'close icon',
+ button : 'ui button',
+ modal : 'ui modal',
+ title : 'header',
+ content : 'content',
+ actions : 'actions',
+ template : 'ui tiny modal',
+ ok : 'positive',
+ cancel : 'negative',
+ prompt : 'ui fluid input'
+ },
+ text: {
+ ok : 'Ok',
+ cancel: 'Cancel'
}
};
+$.fn.modal.settings.templates = {
+ getArguments: function(args) {
+ var queryArguments = [].slice.call(args);
+ if($.isPlainObject(queryArguments[0])){
+ return $.extend({
+ handler:function(){},
+ content:'',
+ title: ''
+ }, queryArguments[0]);
+ } else {
+ if(!$.isFunction(queryArguments[queryArguments.length-1])) {
+ queryArguments.push(function() {});
+ }
+ return {
+ handler: queryArguments.pop(),
+ content: queryArguments.pop() || '',
+ title: queryArguments.pop() || ''
+ };
+ }
+ },
+ alert: function () {
+ var settings = this.get.settings(),
+ args = settings.templates.getArguments(arguments)
+ ;
+ return {
+ title : args.title,
+ content: args.content,
+ actions: [{
+ text : settings.text.ok,
+ class: settings.className.ok,
+ click: args.handler
+ }]
+ }
+ },
+ confirm: function () {
+ var settings = this.get.settings(),
+ args = settings.templates.getArguments(arguments)
+ ;
+ return {
+ title : args.title,
+ content: args.content,
+ actions: [{
+ text : settings.text.ok,
+ class: settings.className.ok,
+ click: function(){args.handler(true)}
+ },{
+ text: settings.text.cancel,
+ class: settings.className.cancel,
+ click: function(){args.handler(false)}
+ }]
+ }
+ },
+ prompt: function () {
+ var $this = this,
+ settings = this.get.settings(),
+ args = settings.templates.getArguments(arguments),
+ input = $($.parseHTML(args.content)).filter('.ui.input')
+ ;
+ if (input.length === 0) {
+ args.content += '';
+ }
+ return {
+ title : args.title,
+ content: args.content,
+ actions: [{
+ text: settings.text.ok,
+ class: settings.className.ok,
+ click: function(){
+ var settings = $this.get.settings(),
+ inputField = $this.get.element().find(settings.selector.prompt)[0]
+ ;
+ args.handler($(inputField).val());
+ }
+ },{
+ text: settings.text.cancel,
+ class: settings.className.cancel,
+ click: function(){args.handler(null)}
+ }]
+ }
+ }
+}
})( jQuery, window, document );
diff --git a/semantic/src/definitions/modules/modal.less b/semantic/src/definitions/modules/modal.less
index e171222..ef850c7 100644
--- a/semantic/src/definitions/modules/modal.less
+++ b/semantic/src/definitions/modules/modal.less
@@ -40,9 +40,9 @@
will-change: top, left, margin, transform, opacity;
}
-.ui.modal > :first-child:not(.icon):not(.dimmer),
+.ui.modal > :first-child:not(.close):not(.dimmer),
.ui.modal > i.icon:first-child + *,
-.ui.modal > .dimmer:first-child + *:not(.icon),
+.ui.modal > .dimmer:first-child + *:not(.close),
.ui.modal > .dimmer:first-child + i.icon + * {
border-top-left-radius: @borderRadius;
border-top-right-radius: @borderRadius;
@@ -182,6 +182,15 @@
border-top:none;
}
+.ui.modal > .centered,
+.ui.modal > .center.aligned {
+ text-align: center;
+ &.actions > .button:not(.fluid) {
+ margin-left: @buttonCenteredDistance;
+ margin-right: @buttonCenteredDistance;
+ }
+}
+
/*-------------------
Responsive
--------------------*/
@@ -220,7 +229,7 @@
/* Tablet and Mobile */
@media only screen and (max-width : @largestTabletScreen) {
- .ui.modal > .header {
+ .ui.modal > .close + .header {
padding-right: @closeHitbox;
}
.ui.modal > .close {
@@ -234,8 +243,10 @@
@media only screen and (max-width : @largestMobileScreen) {
.ui.modal > .header {
- padding: @mobileHeaderPadding !important;
- padding-right: @closeHitbox !important;
+ padding: @mobileHeaderPadding;
+ }
+ .ui.modal > .close + .header {
+ padding-right: @closeHitbox;
}
.ui.overlay.fullscreen.modal > .content.content.content {
min-height: @overlayFullscreenScrollingContentMaxHeightMobile;
@@ -466,8 +477,8 @@
border-radius:0;
}
}
- .ui.modal > .close.inside + .header,
- .ui.fullscreen.modal > .header {
+ .ui.modal > .close.inside + .header:not(.centered):not(.center):not(.icon),
+ .ui.fullscreen.modal > .close + .header:not(.centered):not(.center):not(.icon) {
padding-right: @closeHitbox;
}
.ui.modal > .close.inside,
diff --git a/semantic/src/definitions/modules/nag.js b/semantic/src/definitions/modules/nag.js
index db88b77..3325beb 100644
--- a/semantic/src/definitions/modules/nag.js
+++ b/semantic/src/definitions/modules/nag.js
@@ -58,14 +58,14 @@ $.fn.nag = function(parameters) {
element = this,
instance = $module.data(moduleNamespace),
-
+ storage,
module
;
module = {
initialize: function() {
module.verbose('Initializing element');
-
+ storage = module.get.storage();
$module
.on('click' + eventNamespace, selector.close, module.dismiss)
.data(moduleNamespace, module)
@@ -94,47 +94,47 @@ $.fn.nag = function(parameters) {
show: function() {
if( module.should.show() && !$module.is(':visible') ) {
+ if(settings.onShow.call(element) === false) {
+ module.debug('onShow callback returned false, cancelling nag animation');
+ return false;
+ }
module.debug('Showing nag', settings.animation.show);
- if(settings.animation.show == 'fade') {
+ if(settings.animation.show === 'fade') {
$module
- .fadeIn(settings.duration, settings.easing)
+ .fadeIn(settings.duration, settings.easing, settings.onVisible)
;
}
else {
$module
- .slideDown(settings.duration, settings.easing)
+ .slideDown(settings.duration, settings.easing, settings.onVisible)
;
}
}
},
hide: function() {
- module.debug('Showing nag', settings.animation.hide);
- if(settings.animation.show == 'fade') {
+ if(settings.onHide.call(element) === false) {
+ module.debug('onHide callback returned false, cancelling nag animation');
+ return false;
+ }
+ module.debug('Hiding nag', settings.animation.hide);
+ if(settings.animation.hide === 'fade') {
$module
- .fadeIn(settings.duration, settings.easing)
+ .fadeOut(settings.duration, settings.easing, settings.onHidden)
;
}
else {
$module
- .slideUp(settings.duration, settings.easing)
+ .slideUp(settings.duration, settings.easing, settings.onHidden)
;
}
},
- onHide: function() {
- module.debug('Removing nag', settings.animation.hide);
- $module.remove();
- if (settings.onHide) {
- settings.onHide();
- }
- },
-
dismiss: function(event) {
- if(settings.storageMethod) {
+ if(module.hide() !== false && settings.storageMethod) {
+ module.debug('Dismissing nag', settings.storageMethod, settings.key, settings.value, settings.expires);
module.storage.set(settings.key, settings.value);
}
- module.hide();
event.stopImmediatePropagation();
event.preventDefault();
},
@@ -155,12 +155,71 @@ $.fn.nag = function(parameters) {
},
get: {
+ expirationDate: function(expires) {
+ if (typeof expires === 'number') {
+ expires = new Date(Date.now() + expires * 864e5);
+ }
+ if(expires instanceof Date && expires.getTime() ){
+ return expires.toUTCString();
+ } else {
+ module.error(error.expiresFormat);
+ }
+ },
+ storage: function(){
+ if(settings.storageMethod === 'localstorage' && window.localStorage !== undefined) {
+ module.debug('Using local storage');
+ return window.localStorage;
+ }
+ else if(settings.storageMethod === 'sessionstorage' && window.sessionStorage !== undefined) {
+ module.debug('Using session storage');
+ return window.sessionStorage;
+ }
+ else if("cookie" in document) {
+ module.debug('Using cookie');
+ return {
+ setItem: function(key, value, options) {
+ // RFC6265 compliant encoding
+ key = encodeURIComponent(key)
+ .replace(/%(2[346B]|5E|60|7C)/g, decodeURIComponent)
+ .replace(/[()]/g, escape);
+ value = encodeURIComponent(value)
+ .replace(/%(2[346BF]|3[AC-F]|40|5[BDE]|60|7[BCD])/g, decodeURIComponent);
+
+ var cookieOptions = '';
+ for (var option in options) {
+ if (options.hasOwnProperty(option)) {
+ cookieOptions += '; ' + option;
+ if (typeof options[option] === 'string') {
+ cookieOptions += '=' + options[option].split(';')[0];
+ }
+ }
+ }
+ document.cookie = key + '=' + value + cookieOptions;
+ },
+ getItem: function(key) {
+ var cookies = document.cookie.split('; ');
+ for (var i = 0, il = cookies.length; i < il; i++) {
+ var parts = cookies[i].split('='),
+ foundKey = parts[0].replace(/(%[\dA-F]{2})+/gi, decodeURIComponent);
+ if (key === foundKey) {
+ return parts[1] || '';
+ }
+ }
+ },
+ removeItem: function(key, options) {
+ storage.setItem(key,'',options);
+ }
+ };
+ } else {
+ module.error(error.noStorage);
+ }
+ },
storageOptions: function() {
var
options = {}
;
if(settings.expires) {
- options.expires = settings.expires;
+ options.expires = module.get.expirationDate(settings.expires);
}
if(settings.domain) {
options.domain = settings.domain;
@@ -168,6 +227,12 @@ $.fn.nag = function(parameters) {
if(settings.path) {
options.path = settings.path;
}
+ if(settings.secure) {
+ options.secure = settings.secure;
+ }
+ if(settings.samesite) {
+ options.samesite = settings.samesite;
+ }
return options;
}
},
@@ -181,39 +246,30 @@ $.fn.nag = function(parameters) {
var
options = module.get.storageOptions()
;
- if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
- window.localStorage.setItem(key, value);
- module.debug('Value stored using local storage', key, value);
+ if(storage === window.localStorage && options.expires) {
+ module.debug('Storing expiration value in localStorage', key, options.expires);
+ storage.setItem(key + settings.expirationKey, options.expires );
}
- else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
- window.sessionStorage.setItem(key, value);
- module.debug('Value stored using session storage', key, value);
+ module.debug('Value stored', key, value);
+ try {
+ storage.setItem(key, value, options);
}
- else if($.cookie !== undefined) {
- $.cookie(key, value, options);
- module.debug('Value stored using cookie', key, value, options);
- }
- else {
- module.error(error.noCookieStorage);
- return;
+ catch(e) {
+ module.error(error.setItem, e);
}
},
- get: function(key, value) {
+ get: function(key) {
var
storedValue
;
- if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
- storedValue = window.localStorage.getItem(key);
- }
- else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
- storedValue = window.sessionStorage.getItem(key);
- }
- // get by cookie
- else if($.cookie !== undefined) {
- storedValue = $.cookie(key);
- }
- else {
- module.error(error.noCookieStorage);
+ storedValue = storage.getItem(key);
+ if(storage === window.localStorage) {
+ var expiration = storage.getItem(key + settings.expirationKey);
+ if(expiration !== null && expiration !== undefined && new Date(expiration) < new Date()) {
+ module.debug('Value in localStorage has expired. Deleting key', key);
+ module.storage.remove(key);
+ storedValue = null;
+ }
}
if(storedValue == 'undefined' || storedValue == 'null' || storedValue === undefined || storedValue === null) {
storedValue = undefined;
@@ -224,19 +280,11 @@ $.fn.nag = function(parameters) {
var
options = module.get.storageOptions()
;
- if(settings.storageMethod == 'localstorage' && window.localStorage !== undefined) {
- window.localStorage.removeItem(key);
- }
- else if(settings.storageMethod == 'sessionstorage' && window.sessionStorage !== undefined) {
- window.sessionStorage.removeItem(key);
- }
- // store by cookie
- else if($.cookie !== undefined) {
- $.removeCookie(key, options);
- }
- else {
- module.error(error.noStorage);
+ options.expires = module.get.expirationDate(-1);
+ if(storage === window.localStorage) {
+ storage.removeItem(key + settings.expirationKey);
}
+ storage.removeItem(key, options);
}
},
@@ -450,8 +498,12 @@ $.fn.nag.settings = {
detachable : false,
expires : 30,
+
+// cookie storage only options
domain : false,
path : '/',
+ secure : false,
+ samesite : false,
// type of storage to use
storageMethod : 'cookie',
@@ -460,10 +512,14 @@ $.fn.nag.settings = {
key : 'nag',
value : 'dismiss',
+// Key suffix to support expiration in localstorage
+ expirationKey : 'ExpirationDate',
+
error: {
- noCookieStorage : '$.cookie is not included. A storage solution is required.',
- noStorage : 'Neither $.cookie or store is defined. A storage solution is required for storing state',
- method : 'The method you called is not defined.'
+ noStorage : 'Unsupported storage method',
+ method : 'The method you called is not defined.',
+ setItem : 'Unexpected error while setting value',
+ expiresFormat : '"expires" must be a number of days or a Date Object'
},
className : {
@@ -472,13 +528,23 @@ $.fn.nag.settings = {
},
selector : {
- close : '.close.icon'
+ close : '> .close.icon'
},
- speed : 500,
+ duration : 500,
easing : 'easeOutQuad',
- onHide: function() {}
+ // callback before show animation, return false to prevent show
+ onShow : function() {},
+
+ // called after show animation
+ onVisible : function() {},
+
+ // callback before hide animation, return false to prevent hide
+ onHide : function() {},
+
+ // callback after hide animation
+ onHidden : function() {}
};
diff --git a/semantic/src/definitions/modules/nag.less b/semantic/src/definitions/modules/nag.less
index 386e7fe..dfbe8d3 100644
--- a/semantic/src/definitions/modules/nag.less
+++ b/semantic/src/definitions/modules/nag.less
@@ -74,7 +74,9 @@ a.ui.nag {
transition: @closeTransition;
}
-
+.ui.nag:not(.overlay):not(.fixed) {
+ border-radius: @borderRadius;
+}
/*******************************
States
@@ -86,7 +88,7 @@ a.ui.nag {
opacity: @nagHoverOpacity;
}
-.ui.nag .close:hover {
+.ui.nag > .close:hover {
opacity: @closeHoverOpacity;
}
@@ -95,64 +97,126 @@ a.ui.nag {
Variations
*******************************/
-
-/*--------------
- Static
----------------*/
-
-.ui.overlay.nag {
- position: absolute;
- display: block;
+& when(@variationNagOverlay) {
+ /*--------------
+ Static
+ ---------------*/
+ .ui.overlay.nags,
+ .ui.overlay.nag {
+ position: absolute;
+ display: block;
+ }
}
+& when(@variationNagFixed) {
/*--------------
Fixed
---------------*/
-
-.ui.fixed.nag {
- position: fixed;
+ .ui.fixed.nags,
+ .ui.fixed.nag {
+ position: fixed;
+ }
}
-
+& when(@variationNagBottom) {
/*--------------
Bottom
---------------*/
-
-.ui.bottom.nags,
-.ui.bottom.nag {
- border-radius: @bottomBorderRadius;
- top: auto;
- bottom: @bottom;
+ .ui.bottom.nags,
+ .ui.bottom.nag {
+ border-radius: @bottomBorderRadius;
+ top: auto;
+ bottom: @bottom;
+ }
}
+& when(@variationNagInverted) {
/*--------------
- White
+ Inverted
---------------*/
-.ui.inverted.nags .nag,
-.ui.inverted.nag {
- background-color: @invertedBackground;
- color: @darkTextColor;
-}
-.ui.inverted.nags .nag .close,
-.ui.inverted.nags .nag .title,
-.ui.inverted.nag .close,
-.ui.inverted.nag .title {
- color: @lightTextColor;
+ .ui.inverted.nags .nag,
+ .ui.inverted.nag {
+ background-color: @invertedBackground;
+ color: @darkTextColor;
+ }
+ .ui.inverted.nags .nag > .close,
+ .ui.inverted.nag > .close {
+ color: @invertedCloseColor;
+ }
+ .ui.inverted.nags .nag > .title,
+ .ui.inverted.nag > .title {
+ color: @invertedTitleColor;
+ }
}
+& when not (@variationNagSizes = false) {
+/*-------------------
+ Sizes
+--------------------*/
+ each(@variationNagSizes, {
+ @s: @@value;
+ @sr: "@{value}Raw";
+ .ui.@{value}.nag,
+ .ui.@{value}.nags .nag {
+ font-size: @s;
+ & when (@@sr > 1.4) {
+ line-height: 1;
+ }
+ }
+ })
+}
+/*--------------
+ Colors
+-------------- */
+
+each(@colors, {
+ @color: replace(@key, '@', '');
+ @c: @colors[@@color][color];
+ @l: @colors[@@color][light];
+ @isVeryDark: @colors[@@color][isVeryDark];
+
+ .ui.@{color}.nag {
+ background-color: @c;
+ & when (@isVeryDark) {
+ color: @invertedTextColor;
+ }
+ }
+ & when (@variationNagInverted) {
+ .ui.inverted.@{color}.nag {
+ background-color: @l;
+ & .title when (@isVeryDark) {
+ color: @titleColor;
+ }
+ }
+ }
+})
+
+& when (@variationNagGroups) {
/*******************************
Groups
*******************************/
-
-.ui.nags .nag {
- border-radius: @groupedBorderRadius !important;
+ .ui.nags {
+ top: @top;
+ left: 0;
+ width: @width;
+ }
+ .ui.ui.nags .nag {
+ border-radius: @groupedBorderRadius;
+ }
+ .ui.nags:not(.bottom) .nag:last-child {
+ border-radius: @topBorderRadius;
+ }
+ & when(@variationNagBottom) {
+ .ui.bottom.nags .nag:first-child {
+ border-radius: @bottomBorderRadius;
+ }
+ }
+ .ui.nags:not(.fixed):not(.overlay) .nag:first-child {
+ border-radius: @bottomBorderRadius;
+ }
+ .ui.nags:not(.fixed):not(.overlay) .nag:only-child {
+ border-radius: @borderRadius;
+ }
}
-.ui.nags .nag:last-child {
- border-radius: @topBorderRadius;
-}
-.ui.bottom.nags .nag:last-child {
- border-radius: @bottomBorderRadius;
-}
-
.loadUIOverrides();
diff --git a/semantic/src/definitions/modules/popup.js b/semantic/src/definitions/modules/popup.js
index d6b70e1..c54f9e9 100644
--- a/semantic/src/definitions/modules/popup.js
+++ b/semantic/src/definitions/modules/popup.js
@@ -434,11 +434,11 @@ $.fn.popup = function(parameters) {
module.set.visible();
$popup
.transition({
- animation : settings.transition + ' in',
+ animation : (settings.transition.showMethod || settings.transition) + ' in',
queue : false,
debug : settings.debug,
verbose : settings.verbose,
- duration : settings.duration,
+ duration : settings.transition.showDuration || settings.duration,
onComplete : function() {
module.bind.close();
callback.call($popup, element);
@@ -457,9 +457,9 @@ $.fn.popup = function(parameters) {
if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
$popup
.transition({
- animation : settings.transition + ' out',
+ animation : (settings.transition.hideMethod || settings.transition) + ' out',
queue : false,
- duration : settings.duration,
+ duration : settings.transition.hideDuration || settings.duration,
debug : settings.debug,
verbose : settings.verbose,
onComplete : function() {
diff --git a/semantic/src/definitions/modules/popup.less b/semantic/src/definitions/modules/popup.less
index 7d08569..e683e45 100644
--- a/semantic/src/definitions/modules/popup.less
+++ b/semantic/src/definitions/modules/popup.less
@@ -336,7 +336,8 @@
top: 100%;
left: 50%;
margin-left: @tooltipArrowHorizontalOffset;
- margin-top: -@tooltipArrowVerticalOffset;
+ margin-top: -@arrowOffset;
+ transform-origin: center top;
}
}
& when (@variationPopupLeft) {
diff --git a/semantic/src/definitions/modules/progress.js b/semantic/src/definitions/modules/progress.js
index 0d90a4d..77ef2d4 100644
--- a/semantic/src/definitions/modules/progress.js
+++ b/semantic/src/definitions/modules/progress.js
@@ -500,10 +500,14 @@ $.fn.progress = function(parameters) {
},
percent: function(percents) {
percents = module.helper.forceArray(percents).map(function(percent) {
- return (typeof percent == 'string')
+ percent = (typeof percent == 'string')
? +(percent.replace('%', ''))
: percent
;
+ return (settings.limitValues)
+ ? Math.max(0, Math.min(100, percent))
+ : percent
+ ;
});
var hasTotal = module.has.total();
var totalPercent = module.helper.sum(percents);
@@ -533,21 +537,15 @@ $.fn.progress = function(parameters) {
});
module.percent = roundedPercents;
if (hasTotal) {
- module.value = roundedPercents.map(function (percent) {
+ module.value = percents.map(function (percent) {
return (autoPrecision > 0)
? Math.round((percent / 100) * module.total * (10 * autoPrecision)) / (10 * autoPrecision)
: Math.round((percent / 100) * module.total * 10) / 10
;
});
- if (settings.limitValues) {
- module.value = module.value.map(function (value) {
- return Math.max(0, Math.min(100, value));
- });
- }
}
module.set.barWidth(percents);
module.set.labelInterval();
- module.set.labels();
}
settings.onChange.call(element, percents, module.value, module.total);
},
diff --git a/semantic/src/definitions/modules/progress.less b/semantic/src/definitions/modules/progress.less
index e5300d3..41db91d 100644
--- a/semantic/src/definitions/modules/progress.less
+++ b/semantic/src/definitions/modules/progress.less
@@ -24,7 +24,7 @@
.ui.progress {
position: relative;
- display: block;
+ display: flex;
max-width: 100%;
border: @border;
margin: @margin;
@@ -87,6 +87,16 @@
text-align: @progressTextAlign;
}
+& when (@variationProgressRightAligned) {
+ .ui.right.aligned.progress {
+ justify-content: flex-end;
+ & .bar > .progress {
+ left: @progressRightAlignedLeft;
+ right: @progressRightAlignedRight;
+ }
+ }
+}
+
/* Label */
.ui.progress > .label {
position: absolute;
@@ -229,12 +239,6 @@
}
}
-& when (@variationProgressMultiple) {
- /* Multiple */
- .ui.multiple.progress {
- display: flex;
- }
-}
/*******************************
States
@@ -316,6 +320,12 @@
animation: progress-active @activePulseDuration @defaultEasing infinite;
transform-origin: left;
}
+ & when (@variationProgressRightAligned) {
+ .ui.active.right.aligned.progress .bar::after {
+ transform-origin: right;
+ }
+ }
+
@keyframes progress-active {
0% {
opacity: @activePulseMaxOpacity;
@@ -396,7 +406,6 @@
}
.ui.progress.attached,
.ui.progress.attached .bar {
- display: block;
height: @attachedHeight;
padding: 0;
overflow: hidden;
@@ -492,6 +501,7 @@ each(@colors, {
.ui.progress .bar .centered.progress {
text-align: center;
position: relative;
+ right: 0;
}
.ui.indeterminate.progress .bar::before {
content: '';
diff --git a/semantic/src/definitions/modules/rating.less b/semantic/src/definitions/modules/rating.less
index de95043..0c6dd55 100644
--- a/semantic/src/definitions/modules/rating.less
+++ b/semantic/src/definitions/modules/rating.less
@@ -138,6 +138,7 @@ each(@colors, {
/* disabled rating */
.ui.disabled.rating .icon {
cursor: default;
+ pointer-events: none;
}
}
diff --git a/semantic/src/definitions/modules/search.js b/semantic/src/definitions/modules/search.js
index 6f2c7ee..20501ce 100644
--- a/semantic/src/definitions/modules/search.js
+++ b/semantic/src/definitions/modules/search.js
@@ -118,7 +118,7 @@ $.fn.search = function(parameters) {
.on(module.get.inputEvent() + eventNamespace, selector.prompt, module.event.input)
;
$prompt
- .attr('autocomplete', 'off')
+ .attr('autocomplete', module.is.chrome() ? 'fomantic-search' : 'off')
;
}
$module
@@ -227,9 +227,7 @@ $.fn.search = function(parameters) {
results = module.get.results(),
result = $result.data(metadata.result) || module.get.result(value, results)
;
- if(value) {
- module.set.value(value);
- }
+ var oldValue = module.get.value();
if( $.isFunction(settings.onSelect) ) {
if(settings.onSelect.call(element, result, results) === false) {
module.debug('Custom onSelect callback cancelled default select action');
@@ -238,6 +236,9 @@ $.fn.search = function(parameters) {
}
}
module.hideResults();
+ if(value && module.get.value() === oldValue) {
+ module.set.value(value);
+ }
if(href) {
event.preventDefault();
module.verbose('Opening search link found in result', $link);
@@ -251,16 +252,16 @@ $.fn.search = function(parameters) {
}
}
},
- ensureVisible: function ensureVisible($el) {
+ ensureVisible: function($el) {
var elTop, elBottom, resultsScrollTop, resultsHeight;
-
+ if($el.length === 0) {
+ return;
+ }
elTop = $el.position().top;
elBottom = elTop + $el.outerHeight(true);
resultsScrollTop = $results.scrollTop();
- resultsHeight = $results.height()
- parseInt($results.css('paddingTop'), 0) +
- parseInt($results.css('paddingBottom'), 0);
+ resultsHeight = $results.height();
if (elTop < 0) {
$results.scrollTop(resultsScrollTop + elTop);
@@ -401,6 +402,9 @@ $.fn.search = function(parameters) {
animating: function() {
return $results.hasClass(className.animating);
},
+ chrome: function() {
+ return !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
+ },
hidden: function() {
return $results.hasClass(className.hidden);
},
@@ -976,9 +980,7 @@ $.fn.search = function(parameters) {
duration : settings.duration,
onShow : function() {
var $firstResult = $module.find(selector.result).eq(0);
- if($firstResult.length > 0) {
- module.ensureVisible($firstResult);
- }
+ module.ensureVisible($firstResult);
},
onComplete : function() {
callback();
diff --git a/semantic/src/definitions/modules/slider.js b/semantic/src/definitions/modules/slider.js
index 11d8ca3..77c8cbe 100644
--- a/semantic/src/definitions/modules/slider.js
+++ b/semantic/src/definitions/modules/slider.js
@@ -88,6 +88,7 @@ $.fn.slider = function(parameters) {
precision,
isTouch,
gapRatio = 1,
+ previousValue,
initialPosition,
initialLoad,
@@ -205,28 +206,26 @@ $.fn.slider = function(parameters) {
});
},
autoLabel: function() {
- if(module.get.step() != 0) {
- $labels = $module.find('.labels');
- if($labels.length != 0) {
- $labels.empty();
- }
- else {
- $labels = $module.append('';
+ html += $.fn.dropdown.settings.templates.menu(option, fields, preserveHTML, className);
+ html += '
';
+ } else if(hasDescription){
+ html += '';
+ }
html += '