Tim Schumacher
parent
3f1e728781
commit
4385f1acbc
425 changed files with 59924 additions and 37200 deletions
317
web/semantic/dist/components/sticky.js
vendored
317
web/semantic/dist/components/sticky.js
vendored
|
|
@ -1,9 +1,9 @@
|
|||
/*!
|
||||
* # Semantic UI 1.11.4 - Sticky
|
||||
* # Semantic UI 2.1.7 - Sticky
|
||||
* http://github.com/semantic-org/semantic-ui/
|
||||
*
|
||||
*
|
||||
* Copyright 2014 Contributorss
|
||||
* Copyright 2015 Contributors
|
||||
* Released under the MIT license
|
||||
* http://opensource.org/licenses/MIT
|
||||
*
|
||||
|
|
@ -43,8 +43,8 @@ $.fn.sticky = function(parameters) {
|
|||
|
||||
$module = $(this),
|
||||
$window = $(window),
|
||||
$container = $module.offsetParent(),
|
||||
$scroll = $(settings.scrollContext),
|
||||
$container,
|
||||
$context,
|
||||
|
||||
selector = $module.selector || '',
|
||||
|
|
@ -65,6 +65,7 @@ $.fn.sticky = function(parameters) {
|
|||
|
||||
initialize: function() {
|
||||
|
||||
module.determineContainer();
|
||||
module.determineContext();
|
||||
module.verbose('Initializing sticky', settings, $container);
|
||||
|
||||
|
|
@ -87,13 +88,18 @@ $.fn.sticky = function(parameters) {
|
|||
},
|
||||
|
||||
destroy: function() {
|
||||
module.verbose('Destroying previous module');
|
||||
module.verbose('Destroying previous instance');
|
||||
module.reset();
|
||||
if(observer) {
|
||||
observer.disconnect();
|
||||
}
|
||||
$window.off('resize' + eventNamespace, module.event.resize);
|
||||
$scroll.off('scroll' + eventNamespace, module.event.scroll);
|
||||
$window
|
||||
.off('load' + eventNamespace, module.event.load)
|
||||
.off('resize' + eventNamespace, module.event.resize)
|
||||
;
|
||||
$scroll
|
||||
.off('scrollchange' + eventNamespace, module.event.scrollchange)
|
||||
;
|
||||
$module.removeData(moduleNamespace);
|
||||
},
|
||||
|
||||
|
|
@ -105,9 +111,9 @@ $.fn.sticky = function(parameters) {
|
|||
observer = new MutationObserver(function(mutations) {
|
||||
clearTimeout(module.timer);
|
||||
module.timer = setTimeout(function() {
|
||||
module.verbose('DOM tree modified, updating sticky menu');
|
||||
module.verbose('DOM tree modified, updating sticky menu', mutations);
|
||||
module.refresh();
|
||||
}, 20);
|
||||
}, 100);
|
||||
});
|
||||
observer.observe(element, {
|
||||
childList : true,
|
||||
|
|
@ -121,6 +127,10 @@ $.fn.sticky = function(parameters) {
|
|||
}
|
||||
},
|
||||
|
||||
determineContainer: function() {
|
||||
$container = $module.offsetParent();
|
||||
},
|
||||
|
||||
determineContext: function() {
|
||||
if(settings.context) {
|
||||
$context = $(settings.context);
|
||||
|
|
@ -147,30 +157,46 @@ $.fn.sticky = function(parameters) {
|
|||
|
||||
bind: {
|
||||
events: function() {
|
||||
$window.on('resize' + eventNamespace, module.event.resize);
|
||||
$scroll.on('scroll' + eventNamespace, module.event.scroll);
|
||||
$window
|
||||
.on('load' + eventNamespace, module.event.load)
|
||||
.on('resize' + eventNamespace, module.event.resize)
|
||||
;
|
||||
// pub/sub pattern
|
||||
$scroll
|
||||
.off('scroll' + eventNamespace)
|
||||
.on('scroll' + eventNamespace, module.event.scroll)
|
||||
.on('scrollchange' + eventNamespace, module.event.scrollchange)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
event: {
|
||||
load: function() {
|
||||
module.verbose('Page contents finished loading');
|
||||
requestAnimationFrame(module.refresh);
|
||||
},
|
||||
resize: function() {
|
||||
requestAnimationFrame(function() {
|
||||
module.refresh();
|
||||
module.stick();
|
||||
});
|
||||
module.verbose('Window resized');
|
||||
requestAnimationFrame(module.refresh);
|
||||
},
|
||||
scroll: function() {
|
||||
requestAnimationFrame(function() {
|
||||
module.stick();
|
||||
settings.onScroll.call(element);
|
||||
$scroll.triggerHandler('scrollchange' + eventNamespace, $scroll.scrollTop() );
|
||||
});
|
||||
},
|
||||
scrollchange: function(event, scrollPosition) {
|
||||
module.stick(scrollPosition);
|
||||
settings.onScroll.call(element);
|
||||
}
|
||||
},
|
||||
|
||||
refresh: function(hardRefresh) {
|
||||
module.reset();
|
||||
if(!settings.context) {
|
||||
module.determineContext();
|
||||
}
|
||||
if(hardRefresh) {
|
||||
$container = $module.offsetParent();
|
||||
module.determineContainer();
|
||||
}
|
||||
module.save.positions();
|
||||
module.stick();
|
||||
|
|
@ -181,7 +207,7 @@ $.fn.sticky = function(parameters) {
|
|||
sticky: function() {
|
||||
var
|
||||
$element = $('<div/>'),
|
||||
element = $element.get()
|
||||
element = $element[0]
|
||||
;
|
||||
$element.addClass(className.supported);
|
||||
return($element.css('position').match('sticky'));
|
||||
|
|
@ -189,13 +215,16 @@ $.fn.sticky = function(parameters) {
|
|||
},
|
||||
|
||||
save: {
|
||||
scroll: function(scroll) {
|
||||
lastScroll: function(scroll) {
|
||||
module.lastScroll = scroll;
|
||||
},
|
||||
elementScroll: function(scroll) {
|
||||
module.elementScroll = scroll;
|
||||
},
|
||||
positions: function() {
|
||||
var
|
||||
window = {
|
||||
height: $window.height()
|
||||
scrollContext = {
|
||||
height : $scroll.height()
|
||||
},
|
||||
element = {
|
||||
margin: {
|
||||
|
|
@ -207,15 +236,28 @@ $.fn.sticky = function(parameters) {
|
|||
height : $module.outerHeight()
|
||||
},
|
||||
context = {
|
||||
offset : $context.offset(),
|
||||
height : $context.outerHeight(),
|
||||
bottomPadding : parseInt($context.css('padding-bottom'), 10)
|
||||
offset : $context.offset(),
|
||||
height : $context.outerHeight()
|
||||
},
|
||||
container = {
|
||||
height: $container.outerHeight()
|
||||
}
|
||||
;
|
||||
if( !module.is.standardScroll() ) {
|
||||
module.debug('Non-standard scroll. Removing scroll offset from element offset');
|
||||
|
||||
scrollContext.top = $scroll.scrollTop();
|
||||
scrollContext.left = $scroll.scrollLeft();
|
||||
|
||||
element.offset.top += scrollContext.top;
|
||||
context.offset.top += scrollContext.top;
|
||||
element.offset.left += scrollContext.left;
|
||||
context.offset.left += scrollContext.left;
|
||||
}
|
||||
module.cache = {
|
||||
fits : ( element.height < window.height ),
|
||||
window: {
|
||||
height: window.height
|
||||
fits : ( element.height < scrollContext.height ),
|
||||
scrollContext : {
|
||||
height : scrollContext.height
|
||||
},
|
||||
element: {
|
||||
margin : element.margin,
|
||||
|
|
@ -228,8 +270,7 @@ $.fn.sticky = function(parameters) {
|
|||
context: {
|
||||
top : context.offset.top,
|
||||
height : context.height,
|
||||
bottomPadding : context.bottomPadding,
|
||||
bottom : context.offset.top + context.height - context.bottomPadding
|
||||
bottom : context.offset.top + context.height
|
||||
}
|
||||
};
|
||||
module.set.containerSize();
|
||||
|
|
@ -263,26 +304,29 @@ $.fn.sticky = function(parameters) {
|
|||
;
|
||||
},
|
||||
currentElementScroll: function() {
|
||||
if(module.elementScroll) {
|
||||
return module.elementScroll;
|
||||
}
|
||||
return ( module.is.top() )
|
||||
? Math.abs(parseInt($module.css('top'), 10)) || 0
|
||||
: Math.abs(parseInt($module.css('bottom'), 10)) || 0
|
||||
;
|
||||
},
|
||||
|
||||
elementScroll: function(scroll) {
|
||||
scroll = scroll || $scroll.scrollTop();
|
||||
var
|
||||
element = module.cache.element,
|
||||
window = module.cache.window,
|
||||
scrollContext = module.cache.scrollContext,
|
||||
delta = module.get.scrollChange(scroll),
|
||||
maxScroll = (element.height - window.height + settings.offset),
|
||||
currentScroll = module.get.currentElementScroll(),
|
||||
possibleScroll = (currentScroll + delta),
|
||||
elementScroll
|
||||
maxScroll = (element.height - scrollContext.height + settings.offset),
|
||||
elementScroll = module.get.currentElementScroll(),
|
||||
possibleScroll = (elementScroll + delta)
|
||||
;
|
||||
if(module.cache.fits || possibleScroll < 0) {
|
||||
elementScroll = 0;
|
||||
}
|
||||
else if (possibleScroll > maxScroll ) {
|
||||
else if(possibleScroll > maxScroll ) {
|
||||
elementScroll = maxScroll;
|
||||
}
|
||||
else {
|
||||
|
|
@ -293,6 +337,12 @@ $.fn.sticky = function(parameters) {
|
|||
},
|
||||
|
||||
remove: {
|
||||
lastScroll: function() {
|
||||
delete module.lastScroll;
|
||||
},
|
||||
elementScroll: function(scroll) {
|
||||
delete module.elementScroll;
|
||||
},
|
||||
offset: function() {
|
||||
$module.css('margin-top', '');
|
||||
}
|
||||
|
|
@ -301,7 +351,9 @@ $.fn.sticky = function(parameters) {
|
|||
set: {
|
||||
offset: function() {
|
||||
module.verbose('Setting offset on element', settings.offset);
|
||||
$module.css('margin-top', settings.offset);
|
||||
$module
|
||||
.css('margin-top', settings.offset)
|
||||
;
|
||||
},
|
||||
containerSize: function() {
|
||||
var
|
||||
|
|
@ -310,19 +362,30 @@ $.fn.sticky = function(parameters) {
|
|||
if(tagName === 'HTML' || tagName == 'body') {
|
||||
// this can trigger for too many reasons
|
||||
//module.error(error.container, tagName, $module);
|
||||
$container = $module.offsetParent();
|
||||
module.determineContainer();
|
||||
}
|
||||
else {
|
||||
module.debug('Settings container size', module.cache.context.height);
|
||||
if( Math.abs($container.height() - module.cache.context.height) > 5) {
|
||||
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({
|
||||
height: module.cache.context.height
|
||||
});
|
||||
}
|
||||
}
|
||||
},
|
||||
minimumSize: function() {
|
||||
var
|
||||
element = module.cache.element
|
||||
;
|
||||
$container
|
||||
.css('min-height', element.height)
|
||||
;
|
||||
},
|
||||
scroll: function(scroll) {
|
||||
module.debug('Setting scroll on element', scroll);
|
||||
if(module.elementScroll == scroll) {
|
||||
return;
|
||||
}
|
||||
if( module.is.top() ) {
|
||||
$module
|
||||
.css('bottom', '')
|
||||
|
|
@ -338,17 +401,16 @@ $.fn.sticky = function(parameters) {
|
|||
},
|
||||
size: function() {
|
||||
if(module.cache.element.height !== 0 && module.cache.element.width !== 0) {
|
||||
$module
|
||||
.css({
|
||||
width : module.cache.element.width,
|
||||
height : module.cache.element.height
|
||||
})
|
||||
;
|
||||
element.style.setProperty('width', module.cache.element.width + 'px', 'important');
|
||||
element.style.setProperty('height', module.cache.element.height + 'px', 'important');
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
is: {
|
||||
standardScroll: function() {
|
||||
return ($scroll[0] == window);
|
||||
},
|
||||
top: function() {
|
||||
return $module.hasClass(className.top);
|
||||
},
|
||||
|
|
@ -369,59 +431,67 @@ $.fn.sticky = function(parameters) {
|
|||
}
|
||||
},
|
||||
|
||||
stick: function() {
|
||||
stick: function(scroll) {
|
||||
var
|
||||
cachedPosition = scroll || $scroll.scrollTop(),
|
||||
cache = module.cache,
|
||||
fits = cache.fits,
|
||||
element = cache.element,
|
||||
window = cache.window,
|
||||
scrollContext = cache.scrollContext,
|
||||
context = cache.context,
|
||||
offset = (module.is.bottom() && settings.pushing)
|
||||
? settings.bottomOffset
|
||||
: settings.offset,
|
||||
scroll = {
|
||||
top : $scroll.scrollTop() + offset,
|
||||
bottom : $scroll.scrollTop() + offset + window.height
|
||||
top : cachedPosition + offset,
|
||||
bottom : cachedPosition + offset + scrollContext.height
|
||||
},
|
||||
direction = module.get.direction(scroll.top),
|
||||
elementScroll = module.get.elementScroll(scroll.top),
|
||||
elementScroll = (fits)
|
||||
? 0
|
||||
: module.get.elementScroll(scroll.top),
|
||||
|
||||
// shorthand
|
||||
doesntFit = !fits,
|
||||
elementVisible = (element.height !== 0)
|
||||
;
|
||||
|
||||
// save current scroll for next run
|
||||
module.save.scroll(scroll.top);
|
||||
|
||||
if(elementVisible) {
|
||||
|
||||
if( module.is.initialPosition() ) {
|
||||
if(scroll.top >= context.bottom) {
|
||||
console.log(scroll.top, context.bottom);
|
||||
module.debug('Element bottom of container');
|
||||
module.debug('Initial element position is bottom of container');
|
||||
module.bindBottom();
|
||||
}
|
||||
else if(scroll.top >= element.top) {
|
||||
module.debug('Element passed, fixing element to page');
|
||||
module.fixTop();
|
||||
else if(scroll.top > element.top) {
|
||||
if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
|
||||
module.debug('Initial element position is bottom of container');
|
||||
module.bindBottom();
|
||||
}
|
||||
else {
|
||||
module.debug('Initial element position is fixed');
|
||||
module.fixTop();
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
else if( module.is.fixed() ) {
|
||||
|
||||
// currently fixed top
|
||||
if( module.is.top() ) {
|
||||
if( scroll.top < element.top ) {
|
||||
if( scroll.top <= element.top ) {
|
||||
module.debug('Fixed element reached top of container');
|
||||
module.setInitialPosition();
|
||||
}
|
||||
else if( (element.height + scroll.top - elementScroll) > context.bottom ) {
|
||||
else if( (element.height + scroll.top - elementScroll) >= context.bottom ) {
|
||||
module.debug('Fixed element reached bottom of container');
|
||||
module.bindBottom();
|
||||
}
|
||||
// scroll element if larger than screen
|
||||
else if(doesntFit) {
|
||||
module.set.scroll(elementScroll);
|
||||
module.save.lastScroll(scroll.top);
|
||||
module.save.elementScroll(elementScroll);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -429,33 +499,41 @@ $.fn.sticky = function(parameters) {
|
|||
else if(module.is.bottom() ) {
|
||||
|
||||
// top edge
|
||||
if( (scroll.bottom - element.height) < element.top) {
|
||||
if( (scroll.bottom - element.height) <= element.top) {
|
||||
module.debug('Bottom fixed rail has reached top of container');
|
||||
module.setInitialPosition();
|
||||
}
|
||||
// bottom edge
|
||||
else if(scroll.bottom > context.bottom) {
|
||||
else if(scroll.bottom >= context.bottom) {
|
||||
module.debug('Bottom fixed rail has reached bottom of container');
|
||||
module.bindBottom();
|
||||
}
|
||||
// scroll element if larger than screen
|
||||
else if(doesntFit) {
|
||||
module.set.scroll(elementScroll);
|
||||
module.save.lastScroll(scroll.top);
|
||||
module.save.elementScroll(elementScroll);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
else if( module.is.bottom() ) {
|
||||
if(settings.pushing) {
|
||||
if(module.is.bound() && scroll.bottom < context.bottom ) {
|
||||
module.debug('Fixing bottom attached element to bottom of browser.');
|
||||
module.fixBottom();
|
||||
}
|
||||
if( scroll.top <= element.top ) {
|
||||
module.debug('Jumped from bottom fixed to top fixed, most likely used home/end button');
|
||||
module.setInitialPosition();
|
||||
}
|
||||
else {
|
||||
if(module.is.bound() && (scroll.top < context.bottom - element.height) ) {
|
||||
module.debug('Fixing bottom attached element to top of browser.');
|
||||
module.fixTop();
|
||||
if(settings.pushing) {
|
||||
if(module.is.bound() && scroll.bottom <= context.bottom ) {
|
||||
module.debug('Fixing bottom attached element to bottom of browser.');
|
||||
module.fixBottom();
|
||||
}
|
||||
}
|
||||
else {
|
||||
if(module.is.bound() && (scroll.top <= context.bottom - element.height) ) {
|
||||
module.debug('Fixing bottom attached element to top of browser.');
|
||||
module.fixTop();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -466,9 +544,11 @@ $.fn.sticky = function(parameters) {
|
|||
module.debug('Binding element to top of parent container');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.css('left' , '')
|
||||
.css('top' , '')
|
||||
.css('margin-bottom' , '')
|
||||
.css({
|
||||
left : '',
|
||||
top : '',
|
||||
marginBottom : ''
|
||||
})
|
||||
.removeClass(className.fixed)
|
||||
.removeClass(className.bottom)
|
||||
.addClass(className.bound)
|
||||
|
|
@ -481,9 +561,10 @@ $.fn.sticky = function(parameters) {
|
|||
module.debug('Binding element to bottom of parent container');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.css('left' , '')
|
||||
.css('top' , '')
|
||||
.css('margin-bottom' , module.cache.context.bottomPadding)
|
||||
.css({
|
||||
left : '',
|
||||
top : ''
|
||||
})
|
||||
.removeClass(className.fixed)
|
||||
.removeClass(className.top)
|
||||
.addClass(className.bound)
|
||||
|
|
@ -494,6 +575,7 @@ $.fn.sticky = function(parameters) {
|
|||
},
|
||||
|
||||
setInitialPosition: function() {
|
||||
module.debug('Returning to initial position');
|
||||
module.unfix();
|
||||
module.unbind();
|
||||
},
|
||||
|
|
@ -501,10 +583,14 @@ $.fn.sticky = function(parameters) {
|
|||
|
||||
fixTop: function() {
|
||||
module.debug('Fixing element to top of page');
|
||||
module.set.minimumSize();
|
||||
module.set.offset();
|
||||
$module
|
||||
.css('left', module.cache.element.left)
|
||||
.css('bottom' , '')
|
||||
.css({
|
||||
left : module.cache.element.left,
|
||||
bottom : '',
|
||||
marginBottom : ''
|
||||
})
|
||||
.removeClass(className.bound)
|
||||
.removeClass(className.bottom)
|
||||
.addClass(className.fixed)
|
||||
|
|
@ -515,10 +601,14 @@ $.fn.sticky = function(parameters) {
|
|||
|
||||
fixBottom: function() {
|
||||
module.debug('Sticking element to bottom of page');
|
||||
module.set.minimumSize();
|
||||
module.set.offset();
|
||||
$module
|
||||
.css('left', module.cache.element.left)
|
||||
.css('bottom' , '')
|
||||
.css({
|
||||
left : module.cache.element.left,
|
||||
bottom : '',
|
||||
marginBottom : ''
|
||||
})
|
||||
.removeClass(className.bound)
|
||||
.removeClass(className.top)
|
||||
.addClass(className.fixed)
|
||||
|
|
@ -528,24 +618,28 @@ $.fn.sticky = function(parameters) {
|
|||
},
|
||||
|
||||
unbind: function() {
|
||||
module.debug('Removing absolute position on element');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.removeClass(className.bound)
|
||||
.removeClass(className.top)
|
||||
.removeClass(className.bottom)
|
||||
;
|
||||
if( module.is.bound() ) {
|
||||
module.debug('Removing container bound position on element');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.removeClass(className.bound)
|
||||
.removeClass(className.top)
|
||||
.removeClass(className.bottom)
|
||||
;
|
||||
}
|
||||
},
|
||||
|
||||
unfix: function() {
|
||||
module.debug('Removing fixed position on element');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.removeClass(className.fixed)
|
||||
.removeClass(className.top)
|
||||
.removeClass(className.bottom)
|
||||
;
|
||||
settings.onUnstick.call(element);
|
||||
if( module.is.fixed() ) {
|
||||
module.debug('Removing fixed position on element');
|
||||
module.remove.offset();
|
||||
$module
|
||||
.removeClass(className.fixed)
|
||||
.removeClass(className.top)
|
||||
.removeClass(className.bottom)
|
||||
;
|
||||
settings.onUnstick.call(element);
|
||||
}
|
||||
},
|
||||
|
||||
reset: function() {
|
||||
|
|
@ -553,13 +647,13 @@ $.fn.sticky = function(parameters) {
|
|||
module.unbind();
|
||||
module.unfix();
|
||||
module.resetCSS();
|
||||
module.remove.offset();
|
||||
module.remove.lastScroll();
|
||||
},
|
||||
|
||||
resetCSS: function() {
|
||||
$module
|
||||
.css({
|
||||
top : '',
|
||||
bottom : '',
|
||||
width : '',
|
||||
height : ''
|
||||
})
|
||||
|
|
@ -752,23 +846,44 @@ $.fn.sticky.settings = {
|
|||
namespace : 'sticky',
|
||||
|
||||
debug : false,
|
||||
verbose : false,
|
||||
performance : false,
|
||||
verbose : true,
|
||||
performance : true,
|
||||
|
||||
// whether to stick in the opposite direction on scroll up
|
||||
pushing : false,
|
||||
|
||||
context : false,
|
||||
|
||||
// Context to watch scroll events
|
||||
scrollContext : window,
|
||||
|
||||
// Offset to adjust scroll
|
||||
offset : 0,
|
||||
|
||||
// Offset to adjust scroll when attached to bottom of screen
|
||||
bottomOffset : 0,
|
||||
|
||||
observeChanges : true,
|
||||
jitter : 5, // will only set container height if difference between context and container is larger than this number
|
||||
|
||||
// Whether to automatically observe changes with Mutation Observers
|
||||
observeChanges : false,
|
||||
|
||||
// Called when position is recalculated
|
||||
onReposition : function(){},
|
||||
|
||||
// Called on each scroll
|
||||
onScroll : function(){},
|
||||
|
||||
// Called when element is stuck to viewport
|
||||
onStick : function(){},
|
||||
|
||||
// Called when element is unstuck from viewport
|
||||
onUnstick : function(){},
|
||||
|
||||
// Called when element reaches top of context
|
||||
onTop : function(){},
|
||||
|
||||
// Called when element reaches bottom of context
|
||||
onBottom : function(){},
|
||||
|
||||
error : {
|
||||
|
|
@ -789,4 +904,4 @@ $.fn.sticky.settings = {
|
|||
|
||||
};
|
||||
|
||||
})( jQuery, window , document );
|
||||
})( jQuery, window, document );
|
||||
Reference in a new issue