Removes all uses of jquery waypoint for SUI sticky module

server/documents/module.html.eco

@@ -92,7 +92,7 @@ type        : 'Semantic'
   </div>
   <div class="ui tab" data-tab="behavior">
     <div class="fixed column">
-      <div class="content">
+      <div class="ui sticky">
         <h3 class="ui header">Demo Element</h3>
         <i class="demo circular help link icon" data-content="Popup #1"></i>
         <i class="demo circular help link icon" data-content="Popup #2"></i>

server/documents/modules/transition.html.eco

@@ -18,7 +18,6 @@ type        : 'UI Module'
     <div class="fixed column">
       <div class="demo content ui sticky">
         <img src="/images/cat.png" class="ui cat image">
-        <img src="/images/dog.png" class="ui hidden transition dog image">
       </div>
     </div>
     <div class="ui active tab" data-tab="standard">
@@ -188,7 +187,9 @@ type        : 'UI Module'
   </div>
   <div class="ui tab" data-tab="usage">
     <div class="fixed column">
-      <img src="/images/dog.png" class="ui dog image">
+      <div class="ui sticky">
+        <img src="/images/dog.png" class="ui dog image">
+      </div>
     </div>
     <div class="examples">
       <h2 class="ui dividing header">Introduction</h2>
@@ -346,7 +347,9 @@ type        : 'UI Module'
 
   <div class="ui tab" data-tab="examples">
     <div class="fixed column">
-      <img src="/images/cat.png" class="ui kitten image">
+      <div class="ui sticky">
+        <img src="/images/cat.png" class="ui kitten image">
+      </div>
     </div>
     <div class="examples">
       <h3 class="ui header">Visibility</h3>

server/files/javascript/semantic.js

@@ -501,7 +501,7 @@ semantic.ready = function() {
       // add run code button
       if(demo) {
         $('<a>')
-          .addClass('ui pointing below black label')
+          .addClass('ui pointing below label')
           .html('Run Code')
           .on('click', function() {
             eval(code);
@@ -587,9 +587,11 @@ semantic.ready = function() {
         context      : '.main.container',
         childrenOnly : true,
         history      : true,
-        onTabInit    : handler.makeCode,
+        onTabInit    : function() {
+          handler.makeCode();
+        },
         onTabLoad    : function() {
-
+          $sticky.filter(':visible').sticky('refresh');
         }
       })
     ;
@@ -664,7 +666,10 @@ semantic.ready = function() {
   ;
 
   $sticky
-    .sticky()
+    .sticky({
+      context : '.main.container',
+      pushing : true
+    })
   ;
 
 

server/files/stylesheets/semantic.css

@@ -994,7 +994,7 @@ body#example {
   display: none;
 }
 /*rtl:ignore*/
-/*#example div.code {
+#example div.code {
   position: relative;
   width: 100%;
   height: 200px;
@@ -1010,11 +1010,10 @@ body#example {
   padding-right: 20px;
   padding-left: 10px;
 }
-
 #example div.code .ace_bracket {
   background-color: rgba(0, 0, 0, 0.05);
   border: 1px solid rgba(0, 0, 0, 0.1);
-}*/
+}
 /* #example div.code .ace_indent-guide:after {
   content: '';
   position: absolute;
@@ -1376,27 +1375,15 @@ body.progress .ui.progress .bar {
   display: none;
 }
 
-#example .fixed.column .sticky-wrapper {
+#example .fixed.column {
   position: relative;
-  height: 0px !important;
 }
-
-#example .fixed.column .fixed,
-#example .fixed.segment .fixed {
-  position: fixed;
-  top: 65px;
-  -webkit-perspective: 1000px;
-  -moz-perspective: 1000px;
-  -ms-perspective: 1000px;
-  perspective: 1000px;
-
-  -webkit-transform-style: preserve-3d;
-  -moz-transform-style: preserve-3d;
-  -ms-transform-style: preserve-3d;
-  transform-style: preserve-3d;
+#example .fixed.column .sticky {
+  padding-top: 3em;
 }
 
 
+
 /*******************************
           Responsive
 *******************************/
@@ -1620,6 +1607,15 @@ body.progress .ui.progress .bar {
   #example.transition .examples .pointing.below.label {
     display: none;
   }
+  #example .examples {
+    margin-right: 220px;
+    padding: 1px;
+  }
+  #example .fixed.column,
+  #example .fixed.column .fixed {
+    float: right;
+    width: 200px;
+  }
 }
 @media only screen and (min-width : 998px) {
   #example.index .main.menu .container {
@@ -1627,7 +1623,7 @@ body.progress .ui.progress .bar {
     padding: 0% 8%;
   }
   #example .examples {
-    margin-right: 400px;
+    margin-right: 330px;
     padding: 1px;
   }
   #example .fixed.column,

server/layouts/default.html.eco

@@ -119,6 +119,7 @@
   <% if 'development' in @getEnvironments(): %>
   <script src="/build/uncompressed/definitions/globals/site.js"></script>
   <script src="/build/uncompressed/definitions/behaviors/api.js"></script>
+  <script src="/build/uncompressed/definitions/behaviors/watch.js"></script>
   <script src="/build/uncompressed/definitions/behaviors/visibility.js"></script>
   <script src="/build/uncompressed/definitions/behaviors/state.js"></script>
   <script src="/build/uncompressed/definitions/modules/accordion.js"></script>

src/definitions/elements/segment.less

@@ -45,13 +45,14 @@
   margin-bottom: 0em;
 }
 
+/* Testing removal
 .ui.segment:after {
   content: '';
   display: block;
   height: 0px;
   clear: both;
   visibility: hidden;
-}
+}*/
 
 .ui.vertical.segment {
   margin: 0em;

src/definitions/modules/popup.js

@@ -396,7 +396,6 @@ $.fn.popup = function(parameters) {
               offstage  = {},
               offstagePositions = []
             ;
-            console.log($popup.width());
             if(popup.position) {
               offstage = {
                 top    : (popup.position.top < boundary.top),

src/definitions/modules/sticky.js

@@ -28,22 +28,23 @@ $.fn.sticky = function(parameters) {
   $allModules
     .each(function() {
       var
-        settings        = $.extend(true, {}, $.fn.sticky.settings, parameters),
+        settings              = $.extend(true, {}, $.fn.sticky.settings, parameters),
 
-        className       = settings.className,
-        namespace       = settings.namespace,
-        error           = settings.error,
+        className             = settings.className,
+        namespace             = settings.namespace,
+        error                 = settings.error,
 
-        eventNamespace  = '.' + namespace,
-        moduleNamespace = 'module-' + namespace,
+        eventNamespace        = '.' + namespace,
+        moduleNamespace       = 'module-' + namespace,
 
-        $module         = $(this),
-        $window         = $(window),
-        $container      = $module.offsetParent(),
+        $module               = $(this),
+        $window               = $(window),
+        $container            = $module.offsetParent(),
+        $scroll               = $(settings.scrollContext),
         $context,
 
-        selector        = $module.selector || '',
-        instance        = $module.data(moduleNamespace),
+        selector              = $module.selector || '',
+        instance              = $module.data(moduleNamespace),
 
         requestAnimationFrame = window.requestAnimationFrame
           || window.mozRequestAnimationFrame
@@ -52,12 +53,16 @@ $.fn.sticky = function(parameters) {
           || function(callback) { setTimeout(callback, 0); },
 
         element         = this,
+        observer,
         module
       ;
 
       module      = {
 
         initialize: function() {
+          if( !$module.is(':visible') ) {
+            module.error(error.visible, $module);
+          }
           if(settings.context) {
             $context = $(settings.context);
           }
@@ -73,10 +78,13 @@ $.fn.sticky = function(parameters) {
           }
           $window
             .on('resize' + eventNamespace, module.event.resize)
+          ;
+          $scroll
             .on('scroll' + eventNamespace, module.event.scroll)
           ;
           module.verbose('Initializing sticky', settings, $container);
           module.save.positions();
+          module.observeChanges();
           module.instantiate();
         },
 
@@ -100,6 +108,30 @@ $.fn.sticky = function(parameters) {
           ;
         },
 
+        observeChanges: function() {
+          var
+            context = $context[0]
+          ;
+          if(MutationObserver !== undefined) {
+            observer = new MutationObserver(function(mutations) {
+              clearTimeout(module.timer);
+              module.timer = setTimeout(function() {
+                module.verbose('DOM tree modified, updating sticky menu');
+                module.refresh();
+              }, 200);
+            });
+            observer.observe(element, {
+              childList : true,
+              subtree   : true
+            });
+            observer.observe(context, {
+              childList : true,
+              subtree   : true
+            });
+            module.debug('Setting up mutation observer', observer);
+          }
+        },
+
         event: {
           resize: function() {
             requestAnimationFrame(module.refresh);
@@ -188,7 +220,7 @@ $.fn.sticky = function(parameters) {
             var
               direction = 'down'
             ;
-            scroll = scroll || $window.scrollTop();
+            scroll = scroll || $scroll.scrollTop();
             if(module.lastScroll !== undefined) {
               if(module.lastScroll < scroll) {
                 direction = 'down';
@@ -206,14 +238,14 @@ $.fn.sticky = function(parameters) {
             ;
           },
           offsetChange: function(scroll) {
-            scroll = scroll || $window.scrollTop();
+            scroll = scroll || $scroll.scrollTop();
             return (module.lastScroll)
               ? Math.abs(scroll - module.lastScroll)
               : 0
             ;
           },
           newOffset: function(scroll) {
-            scroll = scroll || $window.scrollTop();
+            scroll = scroll || $scroll.scrollTop();
             var
               currentOffset = module.get.currentOffset(),
               delta         = module.get.offsetChange(scroll)
@@ -228,10 +260,8 @@ $.fn.sticky = function(parameters) {
               tagName = $container.get(0).tagName
             ;
             if(tagName === 'HTML' || tagName == 'body') {
-              if($module.is(':visible')) {
-                module.error(error.container, tagName, $module);
-                $container = $module.offsetParent();
-              }
+              module.error(error.container, tagName, $module);
+              $container = $module.offsetParent();
             }
             else {
               module.debug('Settings container size', module.cache.context.height);
@@ -239,12 +269,14 @@ $.fn.sticky = function(parameters) {
             }
           },
           size: function() {
-            $module
-              .css({
-                width  : module.cache.element.width,
-                height : module.cache.element.height
-              })
-            ;
+            if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
+              $module
+                .css({
+                  width  : module.cache.element.width,
+                  height : module.cache.element.height
+                })
+              ;
+            }
           }
         },
 
@@ -270,7 +302,7 @@ $.fn.sticky = function(parameters) {
             element        = cache.element,
             window         = cache.window,
             context        = cache.context,
-            scrollTop      = $window.scrollTop(),
+            scrollTop      = $scroll.scrollTop(),
             screen           = {
               top    : scrollTop + settings.offset,
               bottom : scrollTop + window.height + settings.offset
@@ -283,101 +315,103 @@ $.fn.sticky = function(parameters) {
           ;
 
           module.save.scroll(scrollTop);
-
-          if( module.is.fixed() ) {
-            if(fits) {
-              // if module is fixed top
-              if(module.is.top()) {
-                if( screen.top < element.top ) {
-                  module.unfix();
+          if(element.height !== 0) {
+
+            if( module.is.fixed() ) {
+              if(fits) {
+                // if module is fixed top
+                if(module.is.top()) {
+                  if( screen.top < element.top ) {
+                    module.unfix();
+                  }
+                  else if( fixedBottom > context.bottom ) {
+                    module.debug('Top attached rail has reached bottom of container');
+                    module.bindBottom();
+                  }
                 }
-                else if( fixedBottom > context.bottom ) {
-                  module.debug('Top attached rail has reached bottom of container');
+                // if module is fixed bottom
+                if(module.is.bottom() ) {
+                  // top edge
+                  if( (screen.bottom - element.height) < element.top) {
+                    module.unfix();
+                  }
+                  // bottom edge
+                  else if(screen.bottom > context.bottom) {
+                    module.debug('Bottom attached rail has reached bottom of container');
+                    module.bindBottom();
+                  }
+                }
+                if( fixedBottom > context.bottom ) {
                   module.bindBottom();
                 }
               }
-              // if module is fixed bottom
-              if(module.is.bottom() ) {
-                // top edge
-                if( (screen.bottom - element.height) < element.top) {
-                  module.unfix();
-                }
-                // bottom edge
-                else if(screen.bottom > context.bottom) {
-                  module.debug('Bottom attached rail has reached bottom of container');
+              else {
+                if(screen.bottom > context.bottom) {
                   module.bindBottom();
                 }
-              }
-              if( fixedBottom > context.bottom ) {
-                module.bindBottom();
+                else if(elementPassed) {
+                  if(module.is.top() && direction == 'down') {
+                    module.debug('Stuck content at bottom edge');
+                    if(newOffset >= (element.height - window.height)) {
+                      $module
+                        .css('top', '')
+                      ;
+                      module.stickBottom();
+                    }
+                    else {
+                      $module
+                        .css('top', -newOffset)
+                      ;
+                    }
+                  }
+                  if(module.is.bottom() && direction == 'up') {
+                    module.debug('Stuck content at top edge');
+                    if(newOffset >= (element.height - window.height)) {
+                      $module
+                        .css('bottom', '')
+                      ;
+                      module.stickTop();
+                    }
+                    else {
+                      $module
+                        .css('bottom', -newOffset)
+                      ;
+                    }
+                  }
+                }
+                else {
+                  module.unfix();
+                }
               }
             }
             else {
-              if(screen.bottom > context.bottom) {
+              // determine if needs to be bound
+              if(screen.top + element.height > context.bottom) {
                 module.bindBottom();
               }
-              else if(elementPassed) {
-                if(module.is.top() && direction == 'down') {
-                  module.debug('Stuck content at bottom edge');
-                  if(newOffset >= (element.height - window.height)) {
-                    $module
-                      .css('top', '')
-                    ;
-                    module.stickBottom();
+              if(fits) {
+                // fix to bottom of screen on way back up
+                if(module.is.bottom() ) {
+                  if(settings.pushing) {
+                    if(module.is.bound() && screen.bottom < context.bottom ) {
+                      module.stickBottom();
+                    }
                   }
                   else {
-                    $module
-                      .css('top', -newOffset)
-                    ;
+                    if(module.is.bound() && screen.top < context.bottom - element.height) {
+                      module.stickTop();
+                    }
                   }
                 }
-                if(module.is.bottom() && direction == 'up') {
-                  module.debug('Stuck content at top edge');
-                  if(newOffset >= (element.height - window.height)) {
-                    $module
-                      .css('bottom', '')
-                    ;
-                    module.stickTop();
-                  }
-                  else {
-                    $module
-                      .css('bottom', -newOffset)
-                    ;
-                  }
+                else if(screen.top >= element.top && screen.top < context.bottom - element.height) {
+                  module.stickTop();
                 }
               }
               else {
-                module.unfix();
-              }
-            }
-          }
-          else {
-            // determine if needs to be bound
-            if(screen.top + element.height > context.bottom) {
-              module.bindBottom();
-            }
-            if(fits) {
-              // fix to bottom of screen on way back up
-              if(module.is.bottom() ) {
-                if(settings.pushing) {
-                  if(module.is.bound() && screen.bottom < context.bottom ) {
-                    module.stickBottom();
-                  }
-                }
-                else {
-                  if(module.is.bound() && screen.top < context.bottom - element.height) {
-                    module.stickTop();
-                  }
+                if(elementPassed && screen.bottom < context.bottom ) {
+                  module.stickBottom();
                 }
               }
-              else if(screen.top >= element.top && screen.top < context.bottom - element.height) {
-                module.stickTop();
-              }
-            }
-            else {
-              if(elementPassed && screen.bottom < context.bottom ) {
-                module.stickBottom();
-              }
             }
           }
         },
@@ -541,7 +575,7 @@ $.fn.sticky = function(parameters) {
               });
             }
             clearTimeout(module.performance.timer);
-            module.performance.timer = setTimeout(module.performance.display, 100);
+            module.performance.timer = setTimeout(module.performance.display, 0);
           },
           display: function() {
             var
@@ -650,27 +684,29 @@ $.fn.sticky = function(parameters) {
 
 $.fn.sticky.settings = {
 
-  name         : 'Sticky',
-  namespace    : 'sticky',
+  name          : 'Sticky',
+  namespace     : 'sticky',
 
-  verbose      : true,
-  debug        : false,
-  performance  : true,
+  verbose       : false,
+  debug         : false,
+  performance   : false,
 
-  pushing      : false,
+  pushing       : false,
 
-  context      : false,
-  offset       : 0,
+  context       : false,
+  scrollContext : window,
+  offset        : 0,
 
-  onReposition : function(){},
-  onScroll     : function(){},
-  onStick      : function(){},
-  onUnstick    : function(){},
-  onTop        : function(){},
-  onBottom     : function(){},
+  onReposition  : function(){},
+  onScroll      : function(){},
+  onStick       : function(){},
+  onUnstick     : function(){},
+  onTop         : function(){},
+  onBottom      : function(){},
 
-  error     : {
+  error         : {
     container      : 'Sticky element must be inside a relative container',
+    visible        : 'Element is hidden, you must call refresh after element becomes visible',
     method         : 'The method you called is not defined.',
     invalidContext : 'Context specified does not exist'
   },