Adds callbacks for reverse conditions in visibility, finish nav menus, fixes for sticky. Fix card size to fit on mobile

src/definitions/behaviors/visibility.js

@@ -168,7 +168,7 @@ $.fn.visibility = function(parameters) {
         set: {
           image: function(src) {
             var
-              offScreen = (module.cache.screen.bottom + settings.offset < module.cache.element.top)
+              offScreen = (module.cache.screen.bottom < module.cache.element.top)
             ;
             $module
               .attr('src', src)
@@ -210,13 +210,20 @@ $.fn.visibility = function(parameters) {
           module.save.direction();
           module.save.screenCalculations();
           module.save.elementCalculations();
-
+          // percentage
           module.passed();
+          // one time
           module.passing();
           module.topVisible();
           module.bottomVisible();
           module.topPassed();
           module.bottomPassed();
+          // reverse
+          module.passingReverse();
+          module.topVisibleReverse();
+          module.bottomVisibleReverse();
+          module.topPassedReverse();
+          module.bottomPassedReverse();
         },
 
         passed: function(amount, newCallback) {
@@ -324,7 +331,7 @@ $.fn.visibility = function(parameters) {
             module.remove.occurred(callbackName);
           }
           if(newCallback === undefined) {
-            return calculations.topPassed;
+            return calculations.onTopPassed;
           }
         },
 
@@ -349,6 +356,112 @@ $.fn.visibility = function(parameters) {
           }
         },
 
+        passingReverse: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            callback     = newCallback || settings.onPassingReverse,
+            callbackName = 'passingReverse'
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for passing reverse', newCallback);
+            settings.onPassingReverse = newCallback;
+          }
+          if(callback && !calculations.passing) {
+            module.execute(callback, callbackName);
+          }
+          else if(!settings.once) {
+            module.remove.occurred(callbackName);
+          }
+          if(newCallback !== undefined) {
+            return !calculations.passing;
+          }
+        },
+
+
+        topVisibleReverse: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            callback     = newCallback || settings.onTopVisibleReverse,
+            callbackName = 'topVisibleReverse'
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for top visible reverse', newCallback);
+            settings.onTopVisibleReverse = newCallback;
+          }
+          if(callback && !calculations.topVisible) {
+            module.execute(callback, callbackName);
+          }
+          else if(!settings.once) {
+            module.remove.occurred(callbackName);
+          }
+          if(newCallback === undefined) {
+            return !calculations.topVisible;
+          }
+        },
+
+        bottomVisibleReverse: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            callback     = newCallback || settings.onBottomVisibleReverse,
+            callbackName = 'bottomVisibleReverse'
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for bottom visible reverse', newCallback);
+            settings.onBottomVisibleReverse = newCallback;
+          }
+          if(callback && !calculations.bottomVisible) {
+            module.execute(callback, callbackName);
+          }
+          else if(!settings.once) {
+            module.remove.occurred(callbackName);
+          }
+          if(newCallback === undefined) {
+            return !calculations.bottomVisible;
+          }
+        },
+
+        topPassedReverse: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            callback     = newCallback || settings.onTopPassedReverse,
+            callbackName = 'topPassedReverse'
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for top passed reverse', newCallback);
+            settings.onTopPassedReverse = newCallback;
+          }
+          if(callback && !calculations.topPassed) {
+            module.execute(callback, callbackName);
+          }
+          else if(!settings.once) {
+            module.remove.occurred(callbackName);
+          }
+          if(newCallback === undefined) {
+            return !calculations.onTopPassed;
+          }
+        },
+
+        bottomPassedReverse: function(newCallback) {
+          var
+            calculations = module.get.elementCalculations(),
+            callback     = newCallback || settings.onBottomPassedReverse,
+            callbackName = 'bottomPassedReverse'
+          ;
+          if(newCallback) {
+            module.debug('Adding callback for bottom passed reverse', newCallback);
+            settings.onBottomPassedReverse = newCallback;
+          }
+          if(callback && !calculations.bottomPassed) {
+            module.execute(callback, callbackName);
+          }
+          else if(!settings.once) {
+            module.remove.occurred(callbackName);
+          }
+          if(newCallback === undefined) {
+            return !calculations.bottomPassed;
+          }
+        },
+
         execute: function(callback, callbackName) {
           var
             calculations = module.get.elementCalculations(),
@@ -461,15 +574,15 @@ $.fn.visibility = function(parameters) {
           },
           screenCalculations: function() {
             var
-              scroll = $context.scrollTop()
+              scroll = $context.scrollTop() + settings.offset
             ;
             if(module.cache.scroll === undefined) {
-              module.cache.scroll = $context.scrollTop();
+              module.cache.scroll = $context.scrollTop() + settings.offset;
             }
             module.save.direction();
             $.extend(module.cache.screen, {
-              top    : scroll - settings.offset,
-              bottom : scroll - settings.offset + module.cache.screen.height
+              top    : scroll,
+              bottom : scroll + module.cache.screen.height
             });
             return module.cache.screen;
           },
@@ -723,52 +836,49 @@ $.fn.visibility = function(parameters) {
 
 $.fn.visibility.settings = {
 
-  name              : 'Visibility',
-  namespace         : 'visibility',
+  name                   : 'Visibility',
+  namespace              : 'visibility',
 
-  debug             : false,
-  verbose           : false,
-  performance       : true,
+  debug                  : false,
+  verbose                : false,
+  performance            : true,
 
-  offset            : 0,
-  includeMargin     : false,
+  offset                 : 0,
+  includeMargin          : false,
 
-  context           : window,
+  context                : window,
 
   // visibility check delay in ms
-  throttle          : false,
+  throttle               : false,
 
   // special visibility type
-  type              : false,
-  transition        : 'fade in',
-  duration          : 500,
+  type                   : false,
+  transition             : 'fade in',
+  duration               : 500,
 
-  // array of callbacks
-  onPassed          : {},
+  // array of callbacks for percentage
+  onPassed               : {},
 
   // standard callbacks
-  onPassing         : false,
-  onTopVisible      : false,
-  onBottomVisible   : false,
-  onTopPassed       : false,
-  onBottomPassed    : false,
-
-  once              : true,
-  continuous        : false,
+  onPassing              : false,
+  onTopVisible           : false,
+  onBottomVisible        : false,
+  onTopPassed            : false,
+  onBottomPassed         : false,
+
+  // reverse callbacks
+  onPassingReverse       : false,
+  onTopVisibleReverse    : false,
+  onBottomVisibleReverse : false,
+  onTopPassedReverse     : false,
+  onBottomPassedReverse  : false,
+
+  once                   : true,
+  continuous             : false,
 
   // utility callbacks
-  onRefresh         : function(){},
-  onScroll          : function(){},
-
-  // not used currently waiting for (DOM Mutations API adoption)
-  // https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers
-  watch             : true,
-  watchedProperties : [
-    'offsetWidth',
-    'offsetHeight',
-    'top',
-    'left'
-  ],
+  onRefresh              : function(){},
+  onScroll               : function(){},
 
   error : {
     method   : 'The method you called is not defined.'

src/definitions/modules/accordion.js

@@ -118,7 +118,7 @@ $.fn.accordion = function(parameters) {
 
         toggle: function(index) {
           var
-            $activeTitle = (index)
+            $activeTitle = (index !== undefined)
               ? $title.eq(index)
               : $(this),
             $activeContent = $activeTitle.next($content),
@@ -140,13 +140,14 @@ $.fn.accordion = function(parameters) {
 
         open: function(index) {
           var
-            $activeTitle = (index)
+            $activeTitle = (index !== undefined)
               ? $title.eq(index)
               : $(this),
             $activeContent     = $activeTitle.next($content),
-            currentlyAnimating = $activeContent.is(':animated')
+            currentlyAnimating = $activeContent.is(':animated'),
+            currentlyActive    = $activeContent.hasClass(className.active)
           ;
-          if(!currentlyAnimating) {
+          if(!currentlyAnimating && !currentlyActive) {
             module.debug('Opening accordion content', $activeTitle);
             if(settings.exclusive) {
               $.proxy(module.closeOthers, $activeTitle)();
@@ -176,36 +177,39 @@ $.fn.accordion = function(parameters) {
 
         close: function(index) {
           var
-            $activeTitle = (index)
+            $activeTitle = (index !== undefined)
               ? $title.eq(index)
               : $(this),
-            $activeContent = $activeTitle.next($content)
-          ;
-          module.debug('Closing accordion content', $activeContent);
-          $activeTitle
-            .removeClass(className.active)
+            $activeContent = $activeTitle.next($content),
+            isActive       = $activeContent.hasClass(className.active)
           ;
-          $activeContent
-            .removeClass(className.active)
-            .show()
-            .stop()
-            .children()
+          if(isActive) {
+            module.debug('Closing accordion content', $activeContent);
+            $activeTitle
+              .removeClass(className.active)
+            ;
+            $activeContent
+              .removeClass(className.active)
+              .show()
               .stop()
-              .animate({
-                opacity: 0
-              }, settings.duration, module.reset.opacity)
-              .end()
-            .slideUp(settings.duration, settings.easing, function() {
-              $.proxy(module.reset.display, this)();
-              $.proxy(settings.onClose, element)();
-              $.proxy(settings.onChange, element)();
-            })
-          ;
+              .children()
+                .stop()
+                .animate({
+                  opacity: 0
+                }, settings.duration, module.reset.opacity)
+                .end()
+              .slideUp(settings.duration, settings.easing, function() {
+                $.proxy(module.reset.display, this)();
+                $.proxy(settings.onClose, element)();
+                $.proxy(settings.onChange, element)();
+              })
+            ;
+          }
         },
 
         closeOthers: function(index) {
           var
-            $activeTitle = (index)
+            $activeTitle = (index !== undefined)
               ? $title.eq(index)
               : $(this),
             $parentTitles    = $activeTitle.parents(selector.content).prev(selector.title),
@@ -214,7 +218,6 @@ $.fn.accordion = function(parameters) {
             $openContents    = $openTitles.next($content),
             contentIsOpen    = ($openTitles.size() > 0)
           ;
-
           if(contentIsOpen) {
             module.debug('Exclusive enabled, closing other content', $openTitles);
             $openTitles

src/definitions/modules/sticky.js

@@ -265,7 +265,7 @@ $.fn.sticky = function(parameters) {
               possibleScroll = (currentScroll + delta),
               elementScroll
             ;
-            if(possibleScroll < 0) {
+            if(module.cache.fits || possibleScroll < 0) {
               elementScroll = 0;
             }
             else if (possibleScroll > maxScroll ) {
@@ -725,9 +725,9 @@ $.fn.sticky.settings = {
   name          : 'Sticky',
   namespace     : 'sticky',
 
-  verbose       : true,
-  debug         : true,
-  performance   : true,
+  debug         : false,
+  verbose       : false,
+  performance   : false,
 
   pushing       : false,
 

src/themes/packages/default/collections/menu.variables

@@ -60,7 +60,7 @@
 /* Sub Menu */
 @subMenuMargin: 0.5em;
 @subMenuFontSize: 0.875rem;
-@subMenuTextColor: @unselectedTextColor;
+@subMenuTextColor: rgba(0, 0, 0, 0.5);
 
 @subMenuHorizontalPadding: 0.5rem;
 @subMenuVerticalPadding: 1.5rem;

src/themes/packages/default/elements/rail.variables

@@ -10,6 +10,6 @@
 @railWidth: 300px;
 @railSize: 1em;
 
-@railDistance: 4em;
+@railDistance: 6em;
 
 @railBorder: 1px solid @borderColor;

src/themes/packages/default/views/card.variables

@@ -17,7 +17,7 @@
 @margin: 1em 0em;
 @minHeight: 0px;
 @padding: 0em;
-@width: 300px;
+@width: 290px;
 @boxShadow:
   @shadowBoxShadow,
   0px 0px 0px 1px @solidBorderColor