fomantic-ui 2.9.0-beta.31 → 2.9.0-beta.312

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,13 +381,26 @@ $.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;
+            }
+          },
           keydown: function(event, first) {
             if(settings.preventCrossover && module.is.range() && module.thumbVal === module.secondThumbVal) {
               $currThumb = undefined;
@@ -500,9 +513,6 @@ $.fn.slider = function(parameters) {
           },
           smooth: function() {
             return settings.smooth || $module.hasClass(settings.className.smooth);
-          },
-          touch: function() {
-            return isTouch;
           }
         },
 
@@ -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;
             }

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;
     }
@@ -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) {
   /*--------------
@@ -385,10 +386,10 @@ each(@colors, {
      }
      & 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);
        }
      }
@@ -404,10 +405,10 @@ each(@colors, {
        }
        & 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,7 +148,7 @@ $.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;
@@ -393,9 +393,9 @@ $.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();

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);
@@ -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;