fomantic-ui 2.9.0-beta.98 → 2.9.0

package/src/definitions/modules/slider.js

@@ -70,6 +70,7 @@ $.fn.slider = function(parameters) {
 
         $module         = $(this),
         $currThumb,
+        touchIdentifier,
         $thumb,
         $secondThumb,
         $track,
@@ -86,7 +87,6 @@ $.fn.slider = function(parameters) {
         secondPos,
         offset,
         precision,
-        isTouch,
         gapRatio = 1,
         previousValue,
 
@@ -104,7 +104,6 @@ $.fn.slider = function(parameters) {
           currentRange += 1;
           documentEventID = currentRange;
 
-          isTouch = module.setup.testOutTouch();
           module.setup.layout();
           module.setup.labels();
 
@@ -175,14 +174,6 @@ $.fn.slider = function(parameters) {
               }
             }
           },
-          testOutTouch: function() {
-            try {
-             document.createEvent('TouchEvent');
-             return true;
-            } catch (e) {
-             return false;
-            }
-          },
           customLabel: function() {
             var
               $children   = $labels.find('.label'),
@@ -236,9 +227,6 @@ $.fn.slider = function(parameters) {
             module.bind.globalKeyboardEvents();
             module.bind.keyboardEvents();
             module.bind.mouseEvents();
-            if(module.is.touch()) {
-              module.bind.touchEvents();
-            }
             if (settings.autoAdjustLabels) {
               module.bind.windowEvents();
             }
@@ -251,7 +239,7 @@ $.fn.slider = function(parameters) {
             $(document).on('keydown' + eventNamespace + documentEventID, module.event.activateFocus);
           },
           mouseEvents: function() {
-            module.verbose('Binding mouse events');
+            module.verbose('Binding mouse and touch events');
             $module.find('.track, .thumb, .inner').on('mousedown' + eventNamespace, function(event) {
               event.stopImmediatePropagation();
               event.preventDefault();
@@ -264,27 +252,20 @@ $.fn.slider = function(parameters) {
             $module.on('mouseleave' + eventNamespace, function(event) {
               isHover = false;
             });
-          },
-          touchEvents: function() {
-            module.verbose('Binding touch events');
-            $module.find('.track, .thumb, .inner').on('touchstart' + eventNamespace, function(event) {
-              event.stopImmediatePropagation();
-              event.preventDefault();
-              module.event.down(event);
-            });
-            $module.on('touchstart' + eventNamespace, module.event.down);
+            // All touch events are invoked on the element where the touch *started*. Thus, we can bind them all
+            // on the thumb(s) and don't need to worry about interference with other components, i.e. no dynamic binding
+            // and unbinding required.
+            $module.find('.thumb')
+              .on('touchstart' + eventNamespace,  module.event.touchDown)
+              .on('touchmove' + eventNamespace, module.event.move)
+              .on('touchend' + eventNamespace, module.event.up)
+              .on('touchcancel' + eventNamespace, module.event.touchCancel);
           },
           slidingEvents: function() {
             // these don't need the identifier because we only ever want one of them to be registered with document
             module.verbose('Binding page wide events while handle is being draged');
-            if(module.is.touch()) {
-              $(document).on('touchmove' + eventNamespace, module.event.move);
-              $(document).on('touchend' + eventNamespace, module.event.up);
-            }
-            else {
-              $(document).on('mousemove' + eventNamespace, module.event.move);
-              $(document).on('mouseup' + eventNamespace, module.event.up);
-            }
+            $(document).on('mousemove' + eventNamespace, module.event.move);
+            $(document).on('mouseup' + eventNamespace, module.event.up);
           },
           windowEvents: function() {
             $window.on('resize' + eventNamespace, module.event.resize);
@@ -294,24 +275,22 @@ $.fn.slider = function(parameters) {
         unbind: {
           events: function() {
             $module.find('.track, .thumb, .inner').off('mousedown' + eventNamespace);
-            $module.find('.track, .thumb, .inner').off('touchstart' + eventNamespace);
             $module.off('mousedown' + eventNamespace);
             $module.off('mouseenter' + eventNamespace);
             $module.off('mouseleave' + eventNamespace);
-            $module.off('touchstart' + eventNamespace);
+            $module.find('.thumb')
+              .off('touchstart' + eventNamespace)
+              .off('touchmove' + eventNamespace)
+              .off('touchend' + eventNamespace)
+              .off('touchcancel' + eventNamespace);
             $module.off('keydown' + eventNamespace);
             $module.off('focusout' + eventNamespace);
             $(document).off('keydown' + eventNamespace + documentEventID, module.event.activateFocus);
             $window.off('resize' + eventNamespace);
           },
           slidingEvents: function() {
-            if(module.is.touch()) {
-              $(document).off('touchmove' + eventNamespace);
-              $(document).off('touchend' + eventNamespace);
-            } else {
-              $(document).off('mousemove' + eventNamespace);
-              $(document).off('mouseup' + eventNamespace);
-            }
+            $(document).off('mousemove' + eventNamespace);
+            $(document).off('mouseup' + eventNamespace);
           },
         },
 
@@ -341,10 +320,31 @@ $.fn.slider = function(parameters) {
               module.bind.slidingEvents();
             }
           },
+          touchDown: function(event) {
+            event.preventDefault();  // disable mouse emulation and touch-scrolling
+            event.stopImmediatePropagation();
+            if(touchIdentifier !== undefined) {
+              // ignore multiple touches on the same slider --
+              // we cannot handle changing both thumbs at once due to shared state
+              return;
+            }
+            $currThumb = $(event.target);
+            var touchEvent = event.touches ? event : event.originalEvent;
+            touchIdentifier = touchEvent.targetTouches[0].identifier;
+            if(previousValue === undefined) {
+              previousValue = module.get.currentThumbValue();
+            }
+          },
           move: function(event) {
-            event.preventDefault();
+            if(event.type == 'mousemove') {
+              event.preventDefault();  // prevent text selection etc.
+            }
+            if(module.is.disabled()) {
+              // touch events are always bound, so we need to prevent touch-sliding on disabled sliders here
+              return;
+            }
             var value = module.determine.valueFromEvent(event);
-            if($currThumb === undefined) {
+            if(event.type == 'mousemove' && $currThumb === undefined) {
               var
                 eventPos = module.determine.eventPos(event),
                 newPos = module.determine.pos(eventPos)
@@ -381,10 +381,23 @@ $.fn.slider = function(parameters) {
           },
           up: function(event) {
             event.preventDefault();
+            if(module.is.disabled()) {
+              // touch events are always bound, so we need to prevent touch-sliding on disabled sliders here
+              return;
+            }
             var value = module.determine.valueFromEvent(event);
             module.set.value(value);
             module.unbind.slidingEvents();
+            touchIdentifier = undefined;
+            if (previousValue !== undefined) {
+              previousValue = undefined;
+            }
+          },
+          touchCancel: function(event) {
+            event.preventDefault();
+            touchIdentifier = undefined;
             if (previousValue !== undefined) {
+              module.update.value(previousValue);
               previousValue = undefined;
             }
           },
@@ -441,8 +454,8 @@ $.fn.slider = function(parameters) {
           module.setup.labels();
         },
         takeStep: function(multiplier) {
+          multiplier = multiplier != undefined ? multiplier : 1;
           var
-            multiplier = multiplier != undefined ? multiplier : 1,
             step = module.get.step(),
             currValue = module.get.currentThumbValue()
           ;
@@ -459,8 +472,8 @@ $.fn.slider = function(parameters) {
         },
 
         backStep: function(multiplier) {
+          multiplier = multiplier != undefined ? multiplier : 1;
           var
-            multiplier = multiplier != undefined ? multiplier : 1,
             step = module.get.step(),
             currValue = module.get.currentThumbValue()
           ;
@@ -500,9 +513,6 @@ $.fn.slider = function(parameters) {
           },
           smooth: function() {
             return settings.smooth || $module.hasClass(settings.className.smooth);
-          },
-          touch: function() {
-            return isTouch;
           }
         },
 
@@ -711,11 +721,11 @@ $.fn.slider = function(parameters) {
             ;
             return pos;
           },
-          positionFromValue: function(value) {
+          positionFromValue: function(val) {
             var
               min = module.get.min(),
               max = module.get.max(),
-              value = value > max ? max : value < min ? min : value,
+              value = val > max ? max : val < min ? min : val,
               trackLength = module.get.trackLength(),
               ratio = (value - min) / (max - min),
               position = Math.round(ratio * trackLength)
@@ -766,12 +776,19 @@ $.fn.slider = function(parameters) {
             return value;
           },
           eventPos: function(event) {
-            if(module.is.touch()) {
+            if(event.type === "touchmove" || event.type === "touchend") {
+              var
+                touchEvent = event.touches ? event : event.originalEvent,
+                touch = touchEvent.changedTouches[0];  // fall back to first touch if correct touch not found
+              for(var i=0; i < touchEvent.touches.length; i++) {
+                if(touchEvent.touches[i].identifier === touchIdentifier) {
+                  touch = touchEvent.touches[i];
+                  break;
+                }
+              }
               var
-                touchEvent = event.changedTouches ? event : event.originalEvent,
-                touches = touchEvent.changedTouches[0] ? touchEvent.changedTouches : touchEvent.touches,
-                touchY = touches[0].pageY,
-                touchX = touches[0].pageX
+                touchY = touch.pageY,
+                touchX = touch.pageX
               ;
               return module.is.vertical() ? touchY : touchX;
             }
@@ -916,14 +933,12 @@ $.fn.slider = function(parameters) {
           },
           position: function(position, which) {
             var thumbVal = module.determine.value(position);
-            switch (which) {
-              case 'second':
-                module.secondThumbVal = thumbVal;
-                module.update.position(thumbVal, $secondThumb);
-                break;
-              default:
-                module.thumbVal = thumbVal;
-                module.update.position(thumbVal, $thumb);
+            if (which === 'second') {
+              module.secondThumbVal = thumbVal;
+              module.update.position(thumbVal, $secondThumb);
+            } else {
+              module.thumbVal = thumbVal;
+              module.update.position(thumbVal, $thumb);
             }
             value = Math.abs(module.thumbVal - (module.secondThumbVal || 0));
             module.set.value(value);
@@ -1192,7 +1207,7 @@ $.fn.slider = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;

package/src/definitions/modules/slider.less

@@ -206,7 +206,7 @@
     transform: translate(-50%, 100%);
   }
   & when (@variationSliderTicked) {
-    .ui.labeled.ticked.slider > .labels .label:after {
+    .ui.labeled.ticked.slider > .labels .label::after {
       content: ' ';
       height: @labelHeight;
       width: @labelWidth;
@@ -215,11 +215,11 @@
       top: 100%;
       left: 50%;
     }
-    .ui.bottom.aligned.labeled.ticked.slider > .labels .label:after {
+    .ui.bottom.aligned.labeled.ticked.slider > .labels .label::after {
       top: auto;
       bottom: 100%;
     }
-    .ui.labeled.ticked.slider > .labels .halftick.label:after {
+    .ui.labeled.ticked.slider > .labels .halftick.label::after {
       height: (@labelHeight / 2);
     }
   }
@@ -240,13 +240,13 @@
       transform: translate(-100%, -50%);
     }
 
-    .ui.labeled.vertical.slider > .labels .label:after {
+    .ui.labeled.vertical.slider > .labels .label::after {
       width: @labelHeight;
       height: @labelWidth;
       left: 100%;
       top: 50%;
     }
-    .ui.labeled.vertical.slider > .labels .halftick.label:after {
+    .ui.labeled.vertical.slider > .labels .halftick.label::after {
       width: (@labelHeight / 2);
       height: @labelWidth;
     }
@@ -386,10 +386,10 @@
      }
      & when (@variationSliderLabeled) {
        .ui.@{value}.labeled.slider:not(.vertical) > .labels,
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .label:after {
+       .ui.@{value}.labeled.slider:not(.vertical) > .labels .label::after {
          height: @@lh;
        }
-       .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label:after {
+       .ui.@{value}.labeled.slider:not(.vertical) > .labels .halftick.label::after {
          height: (@@lh / 2);
        }
      }
@@ -405,10 +405,10 @@
        }
        & when (@variationSliderLabeled) {
          .ui.@{value}.labeled.vertical.slider> .labels,
-         .ui.@{value}.labeled.vertical.slider> .labels .label:after {
+         .ui.@{value}.labeled.vertical.slider> .labels .label::after {
            width: @@lh;
          }
-         .ui.@{value}.labeled.vertical.slider> .labels .halftick.label:after {
+         .ui.@{value}.labeled.vertical.slider> .labels .halftick.label::after {
            width: (@@lh / 2);
          }
        }

package/src/definitions/modules/sticky.js

@@ -53,7 +53,7 @@ $.fn.sticky = function(parameters) {
 
         $module               = $(this),
         $window               = $(window),
-        $scroll               = $(settings.scrollContext),
+        $scroll               = [window,document].indexOf(settings.scrollContext) < 0 ? $(document).find(settings.scrollContext) : $(settings.scrollContext),
         $container,
         $context,
 
@@ -139,7 +139,7 @@ $.fn.sticky = function(parameters) {
 
         determineContainer: function() {
           if(settings.container) {
-            $container = $(settings.container);
+            $container = [window,document].indexOf(settings.container) < 0 ? $(document).find(settings.container) : $(settings.container);
           }
           else {
             $container = $module.offsetParent();
@@ -148,14 +148,13 @@ $.fn.sticky = function(parameters) {
 
         determineContext: function() {
           if(settings.context) {
-            $context = $(settings.context);
+            $context = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
           }
           else {
             $context = $container;
           }
           if($context.length === 0) {
             module.error(error.invalidContext, settings.context, $module);
-            return;
           }
         },
 
@@ -166,7 +165,6 @@ $.fn.sticky = function(parameters) {
           if(module.cache.element.height > module.cache.context.height) {
             module.reset();
             module.error(error.elementSize, $module);
-            return;
           }
         },
 
@@ -317,13 +315,8 @@ $.fn.sticky = function(parameters) {
               direction = 'down'
             ;
             scroll = scroll || $scroll.scrollTop();
-            if(module.lastScroll !== undefined) {
-              if(module.lastScroll < scroll) {
-                direction = 'down';
-              }
-              else if(module.lastScroll > scroll) {
+            if(module.lastScroll && module.lastScroll > scroll) {
                 direction = 'up';
-              }
             }
             return direction;
           },
@@ -371,7 +364,7 @@ $.fn.sticky = function(parameters) {
           lastScroll: function() {
             delete module.lastScroll;
           },
-          elementScroll: function(scroll) {
+          elementScroll: function() {
             delete module.elementScroll;
           },
           minimumSize: function() {
@@ -393,14 +386,26 @@ $.fn.sticky = function(parameters) {
           },
           containerSize: function() {
             var
-              tagName = $container.get(0).tagName
+              tagName = $container[0].tagName
             ;
-            if(tagName === 'HTML' || tagName == 'body') {
+            if(tagName === 'HTML' || tagName === 'body') {
               // this can trigger for too many reasons
               //module.error(error.container, tagName, $module);
               module.determineContainer();
             }
             else {
+              var tallestHeight = Math.max(module.cache.context.height, module.cache.element.height);
+              if(tallestHeight - $container.outerHeight() > settings.jitter) {
+                module.debug('Context is taller than container. Specifying exact height for container', module.cache.context.height);
+                $container.css({
+                  height: tallestHeight,
+                });
+              }
+              else {
+                $container.css({
+                  height: '',
+                });
+              }
               if( Math.abs($container.outerHeight() - module.cache.context.height) > settings.jitter) {
                 module.debug('Context has padding, specifying exact height for container', module.cache.context.height);
                 $container.css({
@@ -467,9 +472,9 @@ $.fn.sticky = function(parameters) {
           }
         },
 
-        stick: function(scroll) {
+        stick: function(scrollPosition) {
           var
-            cachedPosition = scroll || $scroll.scrollTop(),
+            cachedPosition = scrollPosition || $scroll.scrollTop(),
             cache          = module.cache,
             fits           = cache.fits,
             sameHeight     = cache.sameHeight,
@@ -499,7 +504,7 @@ $.fn.sticky = function(parameters) {
                 module.bindBottom();
               }
               else if(scroll.top > element.top) {
-                if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
+                if( (element.height + scroll.top - elementScroll) >= context.bottom && element.height < context.height) {
                   module.debug('Initial element position is bottom of container');
                   module.bindBottom();
                 }
@@ -578,6 +583,9 @@ $.fn.sticky = function(parameters) {
         bindTop: function() {
           module.debug('Binding element to top of parent container');
           module.remove.offset();
+          if(settings.setSize) {
+            module.set.size();
+          }
           $module
             .css({
               left         : '',
@@ -595,6 +603,9 @@ $.fn.sticky = function(parameters) {
         bindBottom: function() {
           module.debug('Binding element to bottom of parent container');
           module.remove.offset();
+          if(settings.setSize) {
+            module.set.size();
+          }
           $module
             .css({
               left         : '',
@@ -816,7 +827,7 @@ $.fn.sticky = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;

package/src/definitions/modules/sticky.less

@@ -66,7 +66,9 @@
 .ui.native.sticky {
   position: -webkit-sticky;
   position: -moz-sticky;
-  position: -ms-sticky;
+  & when (@supportIE) {
+    position: -ms-sticky;
+  }
   position: -o-sticky;
   position: sticky;
 }

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();
         },
@@ -154,7 +162,7 @@ $.fn.tab = function(parameters) {
             module.verbose('Determined parent element for creating context', $context);
           }
           else if(settings.context) {
-            $context = $(settings.context);
+            $context = [window,document].indexOf(settings.context) < 0 ? $(document).find(settings.context) : $(settings.context);
             module.verbose('Using selector for tab context', settings.context, $context);
           }
           else {
@@ -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);
@@ -851,7 +868,7 @@ $.fn.tab = function(parameters) {
             response
           ;
           passedArguments = passedArguments || queryArguments;
-          context         = element         || context;
+          context         = context         || element;
           if(typeof query == 'string' && object !== undefined) {
             query    = query.split(/[\. ]/);
             maxDepth = query.length - 1;
@@ -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/tab.less

@@ -55,8 +55,8 @@
     left: @loadingContentOffset !important;
   }
 
-  .ui.tab.loading:before,
-  .ui.tab.loading.segment:before {
+  .ui.tab.loading::before,
+  .ui.tab.loading.segment::before {
     position: absolute;
     content: '';
     top: @loaderDistanceFromTop;
@@ -69,8 +69,8 @@
     border-radius: @circularRadius;
     border: @loaderLineWidth solid @loaderFillColor;
   }
-  .ui.tab.loading:after,
-  .ui.tab.loading.segment:after {
+  .ui.tab.loading::after,
+  .ui.tab.loading.segment::after {
     position: absolute;
     content: '';
     top: @loaderDistanceFromTop;