fomantic-ui 2.8.8-beta.99 → 2.9.0-beta.100

package/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() {}
 
 };
 

package/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,127 @@ 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,
+  .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;
+  }
 }
-.ui.inverted.nags .nag .close,
-.ui.inverted.nags .nag .title,
-.ui.inverted.nag .close,
-.ui.inverted.nag .title {
-  color: @lightTextColor;
+
+& 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
+-------------- */
+& when not (@variationNagColors = false) {
+  each(@variationNagColors, {
+    @color: @value;
+    @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();

package/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() {

package/src/definitions/modules/popup.less

@@ -337,7 +337,6 @@
           left: 50%;
           margin-left: @tooltipArrowHorizontalOffset;
           margin-top: -@arrowOffset;
-          transform-origin: center top;
         }
       }
       & when (@variationPopupLeft) {
@@ -448,6 +447,11 @@
       }
     }
     & when (@variationPopupCenter) {
+      & when (@variationPopupBottom) {
+        [data-position="bottom center"][data-tooltip]:before {
+          transform-origin: center top;
+        }
+      }
       & when (@variationPopupLeft) {
         [data-position="left center"][data-tooltip]:before {
           transform-origin: top center;

package/src/definitions/modules/progress.js

@@ -93,7 +93,7 @@ $.fn.progress = function(parameters) {
            *
            * @param min A minimum value within multiple values
            * @param total A total amount of multiple values
-           * @returns {number} A precison. Could be 1, 10, 100, ... 1e+10.
+           * @returns {number} A precision. Could be 1, 10, 100, ... 1e+10.
            */
           derivePrecision: function(min, total) {
             var precisionPower = 0
@@ -991,7 +991,7 @@ $.fn.progress.settings = {
     nonNumeric      : 'Progress value is non numeric',
     tooHigh         : 'Value specified is above 100%',
     tooLow          : 'Value specified is below 0%',
-    sumExceedsTotal : 'Sum of multple values exceed total',
+    sumExceedsTotal : 'Sum of multiple values exceed total',
   },
 
   regExp: {

package/src/definitions/modules/progress.less

@@ -446,25 +446,26 @@
 /*--------------
      Colors
 ---------------*/
-
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-
-  .ui.indeterminate.@{color}.progress .bar::before,
-  .ui.@{color}.progress .bar,
-  .ui.progress .@{color}.bar {
-    background-color: @c;
-  }
-  & when (@variationProgressInverted) {
-    .ui.inverted.indeterminate.@{color}.progress .bar::before,
-    .ui.@{color}.inverted.progress .bar,
-    .ui.inverted.progress .@{color}.bar {
-      background-color: @l;
+& when not (@variationProgressColors = false) {
+  each(@variationProgressColors, {
+    @color: @value;
+    @c: @colors[@@color][color];
+    @l: @colors[@@color][light];
+
+    .ui.indeterminate.@{color}.progress .bar::before,
+    .ui.@{color}.progress .bar,
+    .ui.progress .@{color}.bar {
+      background-color: @c;
     }
-  }
-})
+    & when (@variationProgressInverted) {
+      .ui.inverted.indeterminate.@{color}.progress .bar::before,
+      .ui.@{color}.inverted.progress .bar,
+      .ui.inverted.progress .@{color}.bar {
+        background-color: @l;
+      }
+    }
+  })
+}
 
 /*--------------
      Sizes
@@ -501,6 +502,7 @@ each(@colors, {
   .ui.progress .bar .centered.progress {
     text-align: center;
     position: relative;
+    right: 0;
   }
   .ui.indeterminate.progress .bar::before {
     content: '';