From 2653f6a943a6ed74e2b72246ba8211c5fb699a7f Mon Sep 17 00:00:00 2001 From: erdgeist Date: Sun, 7 Aug 2016 02:17:47 +0200 Subject: restructured ;) --- js/components/sticky.js | 364 ------------------------------------------------ 1 file changed, 364 deletions(-) delete mode 100755 js/components/sticky.js (limited to 'js/components/sticky.js') diff --git a/js/components/sticky.js b/js/components/sticky.js deleted file mode 100755 index 2765f19..0000000 --- a/js/components/sticky.js +++ /dev/null @@ -1,364 +0,0 @@ -/*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ -(function(addon) { - - var component; - - if (window.UIkit) { - component = addon(UIkit); - } - - if (typeof define == "function" && define.amd) { - define("uikit-sticky", ["uikit"], function(){ - return component || addon(UIkit); - }); - } - -})(function(UI){ - - "use strict"; - - var $win = UI.$win, - $doc = UI.$doc, - sticked = [], - direction = 1; - - UI.component('sticky', { - - defaults: { - top : 0, - bottom : 0, - animation : '', - clsinit : 'uk-sticky-init', - clsactive : 'uk-active', - clsinactive : '', - getWidthFrom : '', - showup : false, - boundary : false, - media : false, - target : false, - disabled : false - }, - - boot: function() { - - // should be more efficient than using $win.scroll(checkscrollposition): - UI.$doc.on('scrolling.uk.document', function(e, data) { - if (!data || !data.dir) return; - direction = data.dir.y; - checkscrollposition(); - }); - - UI.$win.on('resize orientationchange', UI.Utils.debounce(function() { - - if (!sticked.length) return; - - for (var i = 0; i < sticked.length; i++) { - sticked[i].reset(true); - sticked[i].self.computeWrapper(); - } - - checkscrollposition(); - }, 100)); - - // init code - UI.ready(function(context) { - - setTimeout(function(){ - - UI.$("[data-uk-sticky]", context).each(function(){ - - var $ele = UI.$(this); - - if (!$ele.data("sticky")) { - UI.sticky($ele, UI.Utils.options($ele.attr('data-uk-sticky'))); - } - }); - - checkscrollposition(); - }, 0); - }); - }, - - init: function() { - - var boundary = this.options.boundary, boundtoparent; - - this.wrapper = this.element.wrap('
').parent(); - this.computeWrapper(); - this.wrapper.css({ - 'margin-top' : this.element.css('margin-top'), - 'margin-bottom' : this.element.css('margin-bottom'), - 'margin-left' : this.element.css('margin-left'), - 'margin-right' : this.element.css('margin-right') - }) - this.element.css('margin', 0); - - if (boundary) { - - if (boundary === true || boundary[0] === '!') { - - boundary = boundary === true ? this.wrapper.parent() : this.wrapper.closest(boundary.substr(1)); - boundtoparent = true; - - } else if (typeof boundary === "string") { - boundary = UI.$(boundary); - } - } - - this.sticky = { - self : this, - options : this.options, - element : this.element, - currentTop : null, - wrapper : this.wrapper, - init : false, - getWidthFrom : UI.$(this.options.getWidthFrom || this.wrapper), - boundary : boundary, - boundtoparent : boundtoparent, - top : 0, - calcTop : function() { - - var top = this.options.top; - - // dynamic top parameter - if (this.options.top && typeof(this.options.top) == 'string') { - - // e.g. 50vh - if (this.options.top.match(/^(-|)(\d+)vh$/)) { - top = window.innerHeight * parseInt(this.options.top, 10)/100; - // e.g. #elementId, or .class-1,class-2,.class-3 (first found is used) - } else { - - var topElement = UI.$(this.options.top).first(); - - if (topElement.length && topElement.is(':visible')) { - top = -1 * ((topElement.offset().top + topElement.outerHeight()) - this.wrapper.offset().top); - } - } - - } - - this.top = top; - }, - - reset: function(force) { - - this.calcTop(); - - var finalize = function() { - this.element.css({"position":"", "top":"", "width":"", "left":"", "margin":"0"}); - this.element.removeClass([this.options.animation, 'uk-animation-reverse', this.options.clsactive].join(' ')); - this.element.addClass(this.options.clsinactive); - this.element.trigger('inactive.uk.sticky'); - - this.currentTop = null; - this.animate = false; - - }.bind(this); - - - if (!force && this.options.animation && UI.support.animation && !UI.Utils.isInView(this.wrapper)) { - - this.animate = true; - - this.element.removeClass(this.options.animation).one(UI.support.animation.end, function(){ - finalize(); - }).width(); // force redraw - - this.element.addClass(this.options.animation+' '+'uk-animation-reverse'); - } else { - finalize(); - } - }, - - check: function() { - - if (this.options.disabled) { - return false; - } - - if (this.options.media) { - - switch(typeof(this.options.media)) { - case 'number': - if (window.innerWidth < this.options.media) { - return false; - } - break; - case 'string': - if (window.matchMedia && !window.matchMedia(this.options.media).matches) { - return false; - } - break; - } - } - - var scrollTop = $win.scrollTop(), - documentHeight = $doc.height(), - dwh = documentHeight - window.innerHeight, - extra = (scrollTop > dwh) ? dwh - scrollTop : 0, - elementTop = this.wrapper.offset().top, - etse = elementTop - this.top - extra, - active = (scrollTop >= etse); - - if (active && this.options.showup) { - - // set inactiv if scrolling down - if (direction == 1) { - active = false; - } - - // set inactive when wrapper is still in view - if (direction == -1 && !this.element.hasClass(this.options.clsactive) && UI.Utils.isInView(this.wrapper)) { - active = false; - } - } - - return active; - } - }; - - this.sticky.calcTop(); - - sticked.push(this.sticky); - }, - - update: function() { - checkscrollposition(this.sticky); - }, - - enable: function() { - this.options.disabled = false; - this.update(); - }, - - disable: function(force) { - this.options.disabled = true; - this.sticky.reset(force); - }, - - computeWrapper: function() { - - this.wrapper.css({ - 'height' : ['absolute','fixed'].indexOf(this.element.css('position')) == -1 ? this.element.outerHeight() : '', - 'float' : this.element.css('float') != 'none' ? this.element.css('float') : '' - }); - - if (this.element.css('position') == 'fixed') { - this.element.css({ - width: this.sticky.getWidthFrom.length ? this.sticky.getWidthFrom.width() : this.element.width() - }); - } - } - }); - - function checkscrollposition(direction) { - - var stickies = arguments.length ? arguments : sticked; - - if (!stickies.length || $win.scrollTop() < 0) return; - - var scrollTop = $win.scrollTop(), - documentHeight = $doc.height(), - windowHeight = $win.height(), - dwh = documentHeight - windowHeight, - extra = (scrollTop > dwh) ? dwh - scrollTop : 0, - newTop, containerBottom, stickyHeight, sticky; - - for (var i = 0; i < stickies.length; i++) { - - sticky = stickies[i]; - - if (!sticky.element.is(":visible") || sticky.animate) { - continue; - } - - if (!sticky.check()) { - - if (sticky.currentTop !== null) { - sticky.reset(); - } - - } else { - - if (sticky.top < 0) { - newTop = 0; - } else { - stickyHeight = sticky.element.outerHeight(); - newTop = documentHeight - stickyHeight - sticky.top - sticky.options.bottom - scrollTop - extra; - newTop = newTop < 0 ? newTop + sticky.top : sticky.top; - } - - if (sticky.boundary && sticky.boundary.length) { - - var bTop = sticky.boundary.offset().top; - - if (sticky.boundtoparent) { - containerBottom = documentHeight - (bTop + sticky.boundary.outerHeight()) + parseInt(sticky.boundary.css('padding-bottom')); - } else { - containerBottom = documentHeight - bTop; - } - - newTop = (scrollTop + stickyHeight) > (documentHeight - containerBottom - (sticky.top < 0 ? 0 : sticky.top)) ? (documentHeight - containerBottom) - (scrollTop + stickyHeight) : newTop; - } - - - if (sticky.currentTop != newTop) { - - sticky.element.css({ - position : "fixed", - top : newTop, - width : sticky.getWidthFrom.length ? sticky.getWidthFrom.width() : sticky.element.width() - }); - - if (!sticky.init) { - - sticky.element.addClass(sticky.options.clsinit); - - if (location.hash && scrollTop > 0 && sticky.options.target) { - - var $target = UI.$(location.hash); - - if ($target.length) { - - setTimeout((function($target, sticky){ - - return function() { - - sticky.element.width(); // force redraw - - var offset = $target.offset(), - maxoffset = offset.top + $target.outerHeight(), - stickyOffset = sticky.element.offset(), - stickyHeight = sticky.element.outerHeight(), - stickyMaxOffset = stickyOffset.top + stickyHeight; - - if (stickyOffset.top < maxoffset && offset.top < stickyMaxOffset) { - scrollTop = offset.top - stickyHeight - sticky.options.target; - window.scrollTo(0, scrollTop); - } - }; - - })($target, sticky), 0); - } - } - } - - sticky.element.addClass(sticky.options.clsactive).removeClass(sticky.options.clsinactive); - sticky.element.trigger('active.uk.sticky'); - sticky.element.css('margin', ''); - - if (sticky.options.animation && sticky.init && !UI.Utils.isInView(sticky.wrapper)) { - sticky.element.addClass(sticky.options.animation); - } - - sticky.currentTop = newTop; - } - } - - sticky.init = true; - } - } - - return UI.sticky; -}); -- cgit v1.2.3