From d2c7d7193dde1436227b6d54aea3973d61d9992a Mon Sep 17 00:00:00 2001 From: jlukic Date: Wed, 17 Sep 2014 16:51:23 -0400 Subject: [PATCH] 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 | 192 ++++++++++++++---- src/definitions/modules/accordion.js | 57 +++--- src/definitions/modules/sticky.js | 8 +- .../default/collections/menu.variables | 2 +- .../packages/default/elements/rail.variables | 2 +- .../packages/default/views/card.variables | 2 +- 6 files changed, 188 insertions(+), 75 deletions(-) diff --git a/src/definitions/behaviors/visibility.js b/src/definitions/behaviors/visibility.js index 392a10d34..46f56f18b 100755 --- a/src/definitions/behaviors/visibility.js +++ b/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.' diff --git a/src/definitions/modules/accordion.js b/src/definitions/modules/accordion.js index 7f892d6a3..2115e4e6e 100755 --- a/src/definitions/modules/accordion.js +++ b/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 diff --git a/src/definitions/modules/sticky.js b/src/definitions/modules/sticky.js index e6525f329..e8ab32cb8 100755 --- a/src/definitions/modules/sticky.js +++ b/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, diff --git a/src/themes/packages/default/collections/menu.variables b/src/themes/packages/default/collections/menu.variables index 19f7b2479..480ce4419 100755 --- a/src/themes/packages/default/collections/menu.variables +++ b/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; diff --git a/src/themes/packages/default/elements/rail.variables b/src/themes/packages/default/elements/rail.variables index c11f55599..318133745 100644 --- a/src/themes/packages/default/elements/rail.variables +++ b/src/themes/packages/default/elements/rail.variables @@ -10,6 +10,6 @@ @railWidth: 300px; @railSize: 1em; -@railDistance: 4em; +@railDistance: 6em; @railBorder: 1px solid @borderColor; \ No newline at end of file diff --git a/src/themes/packages/default/views/card.variables b/src/themes/packages/default/views/card.variables index 485f2a246..0908cc540 100644 --- a/src/themes/packages/default/views/card.variables +++ b/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