fomantic-ui 2.9.0-beta.26 → 2.9.0-beta.262

package/src/definitions/modules/search.less

@@ -437,16 +437,20 @@
     .ui.search.short > .results {
       max-height: @scrollingMobileMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingMobileMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingMobileMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingMobileMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingMobileMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingMobileMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -455,16 +459,20 @@
     .ui.search.short > .results {
       max-height: @scrollingTabletMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingTabletMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingTabletMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingTabletMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingTabletMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingTabletMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -473,16 +481,20 @@
     .ui.search.short > .results {
       max-height: @scrollingComputerMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingComputerMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingComputerMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingComputerMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingComputerMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingComputerMaxResultsHeight * 3;
+      }
     }
   }
 }
@@ -491,16 +503,20 @@
     .ui.search.short > .results {
       max-height: @scrollingWidescreenMaxResultsHeight;
     }
-    .ui.search[class*="very short"] > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+    & when (@variationSearchVeryShort) {
+      .ui.search[class*="very short"] > .results {
+        max-height: @scrollingWidescreenMaxResultsHeight * 0.75;
+      }
     }
   }
   & when (@variationSearchLong) {
     .ui.search.long > .results {
       max-height: @scrollingWidescreenMaxResultsHeight * 2;
     }
-    .ui.search[class*="very long"] > .results {
-      max-height: @scrollingWidescreenMaxResultsHeight * 3;
+    & when (@variationSearchVeryLong) {
+      .ui.search[class*="very long"] > .results {
+        max-height: @scrollingWidescreenMaxResultsHeight * 3;
+      }
     }
   }
 }

package/src/definitions/modules/shape.js

@@ -126,7 +126,7 @@ $.fn.shape = function(parameters) {
             module.reset();
             module.set.active();
           };
-          settings.beforeChange.call($nextSide[0]);
+          settings.onBeforeChange.call($nextSide[0]);
           if(module.get.transitionEvent()) {
             module.verbose('Starting CSS animation');
             $module
@@ -813,7 +813,7 @@ $.fn.shape.settings = {
   height: 'initial',
 
   // callback occurs on side change
-  beforeChange : function() {},
+  onBeforeChange : function() {},
   onChange     : function() {},
 
   // allow animation to same side

package/src/definitions/modules/sidebar.js

@@ -118,7 +118,7 @@ $.fn.sidebar = function(parameters) {
 
         create: {
           id: function() {
-            id = (Math.random().toString(16) + '000000000').substr(2,8);
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
             elementNamespace = '.' + id;
             module.verbose('Creating unique id for element', id);
           }
@@ -371,6 +371,10 @@ $.fn.sidebar = function(parameters) {
             : function(){}
           ;
           if(module.is.hidden()) {
+            if(settings.onShow.call(element) === false) {
+              module.verbose('Show callback returned false cancelling show');
+              return;
+            }
             module.refreshSidebars();
             if(settings.overlay)  {
               module.error(error.overlay);
@@ -395,10 +399,9 @@ $.fn.sidebar = function(parameters) {
             }
             module.pushPage(function() {
               callback.call(element);
-              settings.onShow.call(element);
+              settings.onVisible.call(element);
             });
             settings.onChange.call(element);
-            settings.onVisible.call(element);
           }
           else {
             module.debug('Sidebar is already visible');
@@ -410,7 +413,7 @@ $.fn.sidebar = function(parameters) {
             ? callback
             : function(){}
           ;
-          if(module.is.visible() || module.is.animating()) {
+          if((module.is.visible() || module.is.animating()) && settings.onHide.call(element) !== false) {
             module.debug('Hiding sidebar', callback);
             module.refreshSidebars();
             module.pullPage(function() {
@@ -418,7 +421,6 @@ $.fn.sidebar = function(parameters) {
               settings.onHidden.call(element);
             });
             settings.onChange.call(element);
-            settings.onHide.call(element);
           }
         },
 

package/src/definitions/modules/sidebar.less

@@ -141,13 +141,15 @@ body.pushable {
 .pushable > .pusher {
   position: relative;
   backface-visibility: hidden;
-  overflow: hidden;
   min-height: 100%;
   transition: transform @duration @easing;
   z-index: @middleLayer;
 
   /* Pusher should inherit background from context */
   background: inherit;
+  &:not(.overflowing) {
+    overflow: hidden;
+  }
 }
 
 body.pushable > .pusher {
@@ -281,9 +283,11 @@ body.pushable > .pusher {
       width: @thinWidth;
     }
 
-    .ui[class*="very thin"].left.sidebar,
-    .ui[class*="very thin"].right.sidebar {
-      width: @veryThinWidth;
+    & when (@variationSidebarVeryThin) {
+      .ui[class*="very thin"].left.sidebar,
+      .ui[class*="very thin"].right.sidebar {
+        width: @veryThinWidth;
+      }
     }
   }
 
@@ -298,9 +302,11 @@ body.pushable > .pusher {
       width: @wideWidth;
     }
 
-    .ui[class*="very wide"].left.sidebar,
-    .ui[class*="very wide"].right.sidebar {
-      width: @veryWideWidth;
+    & when (@variationSidebarVeryWide) {
+      .ui[class*="very wide"].left.sidebar,
+      .ui[class*="very wide"].right.sidebar {
+        width: @veryWideWidth;
+      }
     }
   }
 
@@ -312,9 +318,11 @@ body.pushable > .pusher {
         transform: translate3d(@thinWidth, 0, 0);
       }
 
-      .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
-      .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
-        transform: translate3d(@veryThinWidth, 0, 0);
+      & when (@variationSidebarVeryThin) {
+        .ui.visible[class*="very thin"].left.sidebar ~ .fixed,
+        .ui.visible[class*="very thin"].left.sidebar ~ .pusher {
+          transform: translate3d(@veryThinWidth, 0, 0);
+        }
       }
     }
 
@@ -324,9 +332,11 @@ body.pushable > .pusher {
         transform: translate3d(@wideWidth, 0, 0);
       }
 
-      .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
-      .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
-        transform: translate3d(@veryWideWidth, 0, 0);
+      & when (@variationSidebarVeryWide) {
+        .ui.visible[class*="very wide"].left.sidebar ~ .fixed,
+        .ui.visible[class*="very wide"].left.sidebar ~ .pusher {
+          transform: translate3d(@veryWideWidth, 0, 0);
+        }
       }
     }
   }
@@ -339,9 +349,11 @@ body.pushable > .pusher {
         transform: translate3d(-@thinWidth, 0, 0);
       }
 
-      .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
-      .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
-        transform: translate3d(-@veryThinWidth, 0, 0);
+      & when (@variationSidebarVeryThin) {
+        .ui.visible[class*="very thin"].right.sidebar ~ .fixed,
+        .ui.visible[class*="very thin"].right.sidebar ~ .pusher {
+          transform: translate3d(-@veryThinWidth, 0, 0);
+        }
       }
     }
 
@@ -351,9 +363,11 @@ body.pushable > .pusher {
         transform: translate3d(-@wideWidth, 0, 0);
       }
 
-      .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
-      .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
-        transform: translate3d(-@veryWideWidth, 0, 0);
+      & when (@variationSidebarVeryWide) {
+        .ui.visible[class*="very wide"].right.sidebar ~ .fixed,
+        .ui.visible[class*="very wide"].right.sidebar ~ .pusher {
+          transform: translate3d(-@veryWideWidth, 0, 0);
+        }
       }
     }
   }

package/src/definitions/modules/slider.less

@@ -291,46 +291,47 @@
 /*--------------
      Colors
 ---------------*/
+& when not (@variationSliderColors = false) {
+   each(@variationSliderColors, {
+     @color: @value;
+     @c: @colors[@@color][color];
+     @l: @colors[@@color][light];
+     @h: @colors[@@color][hover];
+     @lh: @colors[@@color][lightHover];
+
+     /* Standard */
+     .ui.@{color}.slider .inner .track-fill {
+       background-color: @c;
+     }
+     & when (@variationSliderInverted) {
+       .ui.@{color}.inverted.slider .inner .track-fill {
+         background-color: @l;
+       }
+     }
 
-each(@colors, {
-  @color: replace(@key, '@', '');
-  @c: @colors[@@color][color];
-  @l: @colors[@@color][light];
-  @h: @colors[@@color][hover];
-  @lh: @colors[@@color][lightHover];
-
-  /* Standard */
-  .ui.@{color}.slider .inner .track-fill {
-    background-color: @c;
-  }
-  & when (@variationSliderInverted) {
-    .ui.@{color}.inverted.slider .inner .track-fill {
-      background-color: @l;
-    }
-  }
-
-  & when (@variationSliderBasic) {
-    /* Basic */
-    .ui.@{color}.slider.basic .inner .thumb {
-      background-color: @c;
-    }
-    .ui.@{color}.slider.basic .inner .thumb:hover,
-    .ui.@{color}.slider.basic:focus .inner .thumb {
-      background-color: @h;
-    }
-    & when (@variationSliderInverted) {
-      /* Basic Inverted */
-      .ui.@{color}.inverted.slider.basic .inner .thumb {
-        background-color: @l;
-      }
-      .ui.@{color}.inverted.slider.basic .inner .thumb:hover,
-      .ui.@{color}.inverted.slider.basic:focus .inner .thumb {
-        background-color: @lh;
-      }
-    }
-  }
+     & when (@variationSliderBasic) {
+       /* Basic */
+       .ui.@{color}.slider.basic .inner .thumb {
+         background-color: @c;
+       }
+       .ui.@{color}.slider.basic .inner .thumb:hover,
+       .ui.@{color}.slider.basic:focus .inner .thumb {
+         background-color: @h;
+       }
+       & when (@variationSliderInverted) {
+         /* Basic Inverted */
+         .ui.@{color}.inverted.slider.basic .inner .thumb {
+           background-color: @l;
+         }
+         .ui.@{color}.inverted.slider.basic .inner .thumb:hover,
+         .ui.@{color}.inverted.slider.basic:focus .inner .thumb {
+           background-color: @lh;
+         }
+       }
+     }
 
-})
+   })
+}
 
 & when (@variationSliderBasic) {
   /*--------------

package/src/definitions/modules/tab.js

@@ -100,10 +100,18 @@ $.fn.tab = function(parameters) {
             initializedHistory = true;
           }
 
-          if(settings.autoTabActivation && instance === undefined && module.determine.activeTab() == null) {
-            module.debug('No active tab detected, setting first tab active', module.get.initialPath());
-            module.changeTab(settings.autoTabActivation === true ? module.get.initialPath() : settings.autoTabActivation);
-          };
+          var activeTab = module.determine.activeTab();
+          if(settings.autoTabActivation && instance === undefined && activeTab == null) {
+            activeTab = settings.autoTabActivation === true ? module.get.initialPath() : settings.autoTabActivation;
+            module.debug('No active tab detected, setting tab active', activeTab);
+            module.changeTab(activeTab);
+          }
+          if(activeTab != null && settings.history) {
+            var autoUpdate = $.address.autoUpdate();
+            $.address.autoUpdate(false);
+            $.address.value(activeTab);
+            $.address.autoUpdate(autoUpdate);
+          }
 
           module.instantiate();
         },
@@ -203,6 +211,7 @@ $.fn.tab = function(parameters) {
                   .history(true)
                   .state(settings.path)
                 ;
+                $(window).trigger('popstate');
               }
               else {
                 module.error(error.path);
@@ -370,6 +379,10 @@ $.fn.tab = function(parameters) {
                   module.verbose('Tab parameters found', nextPathArray);
                 }
               }
+              if (settings.onBeforeChange.call(element, currentPath) === false) {
+                module.debug('onBeforeChange returned false, cancelling tab change', $tab);
+                return false;
+              }
               if(isLastTab && remoteContent) {
                 if(!shouldIgnoreLoad) {
                   module.activate.navigation(currentPath);
@@ -406,6 +419,10 @@ $.fn.tab = function(parameters) {
               // if anchor exists use parent tab
               if($anchor && $anchor.length > 0 && currentPath) {
                 module.debug('Anchor link used, opening parent tab', $tab, $anchor);
+                if (settings.onBeforeChange.call(element, currentPath) === false) {
+                  module.debug('onBeforeChange returned false, cancelling tab change', $tab);
+                  return false;
+                }
                 if( !$tab.hasClass(className.active) ) {
                   setTimeout(function() {
                     module.scrollTo($anchor);
@@ -959,6 +976,7 @@ $.fn.tab.settings = {
   onLoad      : function(tabPath, parameterArray, historyEvent) {}, // called on every load
   onVisible   : function(tabPath, parameterArray, historyEvent) {}, // called every time tab visible
   onRequest   : function(tabPath, parameterArray, historyEvent) {}, // called ever time a tab beings loading remote content
+  onBeforeChange: function(tabPath) {}, // called before a tab is about to be changed. Returning false will cancel the tab change
 
   templates : {
     determineTitle: function(tabArray) {} // returns page title for path

package/src/definitions/modules/toast.js

@@ -69,12 +69,14 @@ $.fn.toast = function(parameters) {
         element          = this,
         instance         = isToastComponent ? $module.data(moduleNamespace) : undefined,
 
+        id,
         module
       ;
       module = {
 
         initialize: function() {
           module.verbose('Initializing element');
+          module.create.id();
           if (!module.has.container()) {
             module.create.container();
           }
@@ -124,17 +126,22 @@ $.fn.toast = function(parameters) {
         },
 
         show: function(callback) {
-          callback = callback || function(){};
-          module.debug('Showing toast');
           if(settings.onShow.call($toastBox, element) === false) {
             module.debug('onShow callback returned false, cancelling toast animation');
             return;
           }
+          callback = callback || function(){};
+          module.debug('Showing toast');
           module.animate.show(callback);
         },
 
         close: function(callback) {
+          if(settings.onHide.call($toastBox, element) === false) {
+            module.debug('onHide callback returned false, cancelling toast animation');
+            return;
+          }
           callback = callback || function(){};
+          module.debug('Closing toast');
           module.remove.visible();
           module.unbind.events();
           module.animate.close(callback);
@@ -146,12 +153,16 @@ $.fn.toast = function(parameters) {
             module.verbose('Creating container');
             $context.append($('<div/>',{class: settings.position + ' ' + className.container + ' ' +(settings.horizontal ? className.horizontal : '')}));
           },
+          id: function() {
+            id = (Math.random().toString(16) + '000000000').slice(2, 10);
+            module.verbose('Creating unique id for element', id);
+          },
           toast: function() {
             $toastBox = $('<div/>', {class: className.box});
             var iconClass = module.get.iconClass();
             if (!isToastComponent) {
               module.verbose('Creating toast');
-              $toast = $('<div/>');
+              $toast = $('<div/>', {role: 'alert'});
               var $content = $('<div/>', {class: className.content});
               if (iconClass !== '') {
                 $toast.append($('<i/>', {class: iconClass + ' ' + className.icon}));
@@ -164,13 +175,21 @@ $.fn.toast = function(parameters) {
                 }));
               }
               if (settings.title !== '') {
+                var titleId = '_' + module.get.id() + 'title';
+                $toast.attr('aria-labelledby', titleId);
                 $content.append($('<div/>', {
                   class: className.title,
-                  text: settings.title
+                  id: titleId,
+                  html: module.helpers.escape(settings.title, settings.preserveHTML)
                 }));
               }
-
-              $content.append($('<div/>', {class: className.message, html: module.helpers.escape(settings.message, settings.preserveHTML)}));
+              var descId = '_' + module.get.id() + 'desc';
+              $toast.attr('aria-describedby', descId);
+              $content.append($('<div/>', {
+                class: className.message,
+                id: descId,
+                html: module.helpers.escape(settings.message, settings.preserveHTML)
+              }));
 
               $toast
                 .addClass(settings.class + ' ' + className.toast)
@@ -178,7 +197,7 @@ $.fn.toast = function(parameters) {
               ;
               $toast.css('opacity', settings.opacity);
               if (settings.closeIcon) {
-                $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : '')});
+                $close = $('<i/>', {class: className.close + ' ' + (typeof settings.closeIcon === 'string' ? settings.closeIcon : ''), role: 'button', tabindex: 0, 'aria-label': settings.text.close});
                 if($close.hasClass(className.left)) {
                   $toast.prepend($close);
                 } else {
@@ -221,15 +240,17 @@ $.fn.toast = function(parameters) {
                 }
               }
               settings.actions.forEach(function (el) {
-                var icon = el[fields.icon] ? '<i class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
+                var icon = el[fields.icon] ? '<i '+(el[fields.text] ? 'aria-hidden="true"' : '')+' class="' + module.helpers.deQuote(el[fields.icon]) + ' icon"></i>' : '',
                   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($('<button/>', {
                   html: icon + text,
+                  'aria-label': $('<div>'+(el[fields.text] || el[fields.icon] || '')+'</div>').text(),
                   class: className.button + ' ' + cls,
                   click: function () {
-                    if (click.call(element, $module) === false) {
+                    var button = $(this);
+                    if (button.is(selector.approve) || button.is(selector.deny) || click.call(element, $module) === false) {
                       return;
                     }
                     module.close();
@@ -329,13 +350,12 @@ $.fn.toast = function(parameters) {
         bind: {
           events: function() {
             module.debug('Binding events to toast');
-            if(settings.closeOnClick || settings.closeIcon) {
-              (settings.closeIcon ? $close : $toast)
-                  .on('click' + eventNamespace, module.event.click)
-              ;
+            if(settings.closeIcon) {
+              $close.on('click' + eventNamespace, module.event.close);
             }
+            $toast.on('click' + eventNamespace, module.event.click);
             if($animationObject) {
-              $animationObject.on('animationend' + eventNamespace, module.close);
+              $animationObject.on('animationend' + eventNamespace, module.event.close);
             }
             $toastBox
               .on('click' + eventNamespace, selector.approve, module.event.approve)
@@ -347,11 +367,10 @@ $.fn.toast = function(parameters) {
         unbind: {
           events: function() {
             module.debug('Unbinding events to toast');
-            if(settings.closeOnClick || settings.closeIcon) {
-              (settings.closeIcon ? $close : $toast)
-                  .off('click' + eventNamespace)
-              ;
+            if(settings.closeIcon) {
+              $close.off('click' + eventNamespace);
             }
+            $toast.off('click' + eventNamespace);
             if($animationObject) {
               $animationObject.off('animationend' + eventNamespace);
             }
@@ -383,11 +402,6 @@ $.fn.toast = function(parameters) {
           },
           close: function(callback) {
             callback = $.isFunction(callback) ? callback : function(){};
-            module.debug('Closing toast');
-            if(settings.onHide.call($toastBox, element) === false) {
-              module.debug('onHide callback returned false, cancelling toast animation');
-              return;
-            }
             if(settings.transition && $.fn.transition !== undefined && $module.transition('is supported')) {
               $toastBox
                 .transition({
@@ -443,7 +457,7 @@ $.fn.toast = function(parameters) {
         has: {
           container: function() {
             module.verbose('Determining if there is already a container');
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : '')).length > 0);
+            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')')).length > 0);
           },
           toast: function(){
             return !!module.get.toast();
@@ -457,8 +471,11 @@ $.fn.toast = function(parameters) {
         },
 
         get: {
+          id: function() {
+            return id;
+          },
           container: function() {
-            return ($context.find(module.helpers.toClass(settings.position) + selector.container)[0]);
+            return ($context.find(module.helpers.toClass(settings.position) + selector.container + (settings.horizontal ? module.helpers.toClass(className.horizontal) : ':not('+module.helpers.toClass(className.horizontal)+')'))[0]);
           },
           toastBox: function() {
             return $toastBox || null;
@@ -490,9 +507,15 @@ $.fn.toast = function(parameters) {
         },
 
         event: {
+          close: function(){
+            module.close();
+          },
           click: function(event) {
-            if($(event.target).closest('a').length === 0) {
-              settings.onClick.call($toastBox, element);
+            if($(event.target).closest(selector.clickable).length === 0) {
+              if(settings.onClick.call($toastBox, element) === false || !settings.closeOnClick) {
+                module.verbose('Click callback returned false or close denied by setting cancelling close');
+                return;
+              }
               module.close();
             }
           },
@@ -833,6 +856,10 @@ $.fn.toast.settings = {
     unclickable  : 'unclickable'
   },
 
+  text: {
+    close : 'Close'
+  },
+
   icons          : {
     info         : 'info',
     success      : 'checkmark',
@@ -849,6 +876,7 @@ $.fn.toast.settings = {
     image        : '> img.image, > .image > img',
     icon         : '> i.icon',
     input        : 'input:not([type="hidden"]), textarea, select, button, .ui.button, ui.dropdown',
+    clickable    : 'a, details, .ui.accordion',
     approve      : '.actions .positive, .actions .approve, .actions .ok',
     deny         : '.actions .negative, .actions .deny, .actions .cancel'
   },