diff options
Diffstat (limited to 'js/core/scrollspy.js')
| -rwxr-xr-x | js/core/scrollspy.js | 209 |
1 files changed, 209 insertions, 0 deletions
diff --git a/js/core/scrollspy.js b/js/core/scrollspy.js new file mode 100755 index 0000000..a67e2c8 --- /dev/null +++ b/js/core/scrollspy.js | |||
| @@ -0,0 +1,209 @@ | |||
| 1 | /*! UIkit 2.26.4 | http://www.getuikit.com | (c) 2014 YOOtheme | MIT License */ | ||
| 2 | (function(UI) { | ||
| 3 | |||
| 4 | "use strict"; | ||
| 5 | |||
| 6 | var $win = UI.$win, | ||
| 7 | $doc = UI.$doc, | ||
| 8 | scrollspies = [], | ||
| 9 | checkScrollSpy = function() { | ||
| 10 | for(var i=0; i < scrollspies.length; i++) { | ||
| 11 | window.requestAnimationFrame.apply(window, [scrollspies[i].check]); | ||
| 12 | } | ||
| 13 | }; | ||
| 14 | |||
| 15 | UI.component('scrollspy', { | ||
| 16 | |||
| 17 | defaults: { | ||
| 18 | "target" : false, | ||
| 19 | "cls" : "uk-scrollspy-inview", | ||
| 20 | "initcls" : "uk-scrollspy-init-inview", | ||
| 21 | "topoffset" : 0, | ||
| 22 | "leftoffset" : 0, | ||
| 23 | "repeat" : false, | ||
| 24 | "delay" : 0 | ||
| 25 | }, | ||
| 26 | |||
| 27 | boot: function() { | ||
| 28 | |||
| 29 | // listen to scroll and resize | ||
| 30 | $doc.on("scrolling.uk.document", checkScrollSpy); | ||
| 31 | $win.on("load resize orientationchange", UI.Utils.debounce(checkScrollSpy, 50)); | ||
| 32 | |||
| 33 | // init code | ||
| 34 | UI.ready(function(context) { | ||
| 35 | |||
| 36 | UI.$("[data-uk-scrollspy]", context).each(function() { | ||
| 37 | |||
| 38 | var element = UI.$(this); | ||
| 39 | |||
| 40 | if (!element.data("scrollspy")) { | ||
| 41 | var obj = UI.scrollspy(element, UI.Utils.options(element.attr("data-uk-scrollspy"))); | ||
| 42 | } | ||
| 43 | }); | ||
| 44 | }); | ||
| 45 | }, | ||
| 46 | |||
| 47 | init: function() { | ||
| 48 | |||
| 49 | var $this = this, inviewstate, initinview, togglecls = this.options.cls.split(/,/), fn = function(){ | ||
| 50 | |||
| 51 | var elements = $this.options.target ? $this.element.find($this.options.target) : $this.element, | ||
| 52 | delayIdx = elements.length === 1 ? 1 : 0, | ||
| 53 | toggleclsIdx = 0; | ||
| 54 | |||
| 55 | elements.each(function(idx){ | ||
| 56 | |||
| 57 | var element = UI.$(this), | ||
| 58 | inviewstate = element.data('inviewstate'), | ||
| 59 | inview = UI.Utils.isInView(element, $this.options), | ||
| 60 | toggle = element.data('ukScrollspyCls') || togglecls[toggleclsIdx].trim(); | ||
| 61 | |||
| 62 | if (inview && !inviewstate && !element.data('scrollspy-idle')) { | ||
| 63 | |||
| 64 | if (!initinview) { | ||
| 65 | element.addClass($this.options.initcls); | ||
| 66 | $this.offset = element.offset(); | ||
| 67 | initinview = true; | ||
| 68 | |||
| 69 | element.trigger("init.uk.scrollspy"); | ||
| 70 | } | ||
| 71 | |||
| 72 | element.data('scrollspy-idle', setTimeout(function(){ | ||
| 73 | |||
| 74 | element.addClass("uk-scrollspy-inview").toggleClass(toggle).width(); | ||
| 75 | element.trigger("inview.uk.scrollspy"); | ||
| 76 | |||
| 77 | element.data('scrollspy-idle', false); | ||
| 78 | element.data('inviewstate', true); | ||
| 79 | |||
| 80 | }, $this.options.delay * delayIdx)); | ||
| 81 | |||
| 82 | delayIdx++; | ||
| 83 | } | ||
| 84 | |||
| 85 | if (!inview && inviewstate && $this.options.repeat) { | ||
| 86 | |||
| 87 | if (element.data('scrollspy-idle')) { | ||
| 88 | clearTimeout(element.data('scrollspy-idle')); | ||
| 89 | element.data('scrollspy-idle', false); | ||
| 90 | } | ||
| 91 | |||
| 92 | element.removeClass("uk-scrollspy-inview").toggleClass(toggle); | ||
| 93 | element.data('inviewstate', false); | ||
| 94 | |||
| 95 | element.trigger("outview.uk.scrollspy"); | ||
| 96 | } | ||
| 97 | |||
| 98 | toggleclsIdx = togglecls[toggleclsIdx + 1] ? (toggleclsIdx + 1) : 0; | ||
| 99 | |||
| 100 | }); | ||
| 101 | }; | ||
| 102 | |||
| 103 | fn(); | ||
| 104 | |||
| 105 | this.check = fn; | ||
| 106 | |||
| 107 | scrollspies.push(this); | ||
| 108 | } | ||
| 109 | }); | ||
| 110 | |||
| 111 | |||
| 112 | var scrollspynavs = [], | ||
| 113 | checkScrollSpyNavs = function() { | ||
| 114 | for(var i=0; i < scrollspynavs.length; i++) { | ||
| 115 | window.requestAnimationFrame.apply(window, [scrollspynavs[i].check]); | ||
| 116 | } | ||
| 117 | }; | ||
| 118 | |||
| 119 | UI.component('scrollspynav', { | ||
| 120 | |||
| 121 | defaults: { | ||
| 122 | "cls" : 'uk-active', | ||
| 123 | "closest" : false, | ||
| 124 | "topoffset" : 0, | ||
| 125 | "leftoffset" : 0, | ||
| 126 | "smoothscroll" : false | ||
| 127 | }, | ||
| 128 | |||
| 129 | boot: function() { | ||
| 130 | |||
| 131 | // listen to scroll and resize | ||
| 132 | $doc.on("scrolling.uk.document", checkScrollSpyNavs); | ||
| 133 | $win.on("resize orientationchange", UI.Utils.debounce(checkScrollSpyNavs, 50)); | ||
| 134 | |||
| 135 | // init code | ||
| 136 | UI.ready(function(context) { | ||
| 137 | |||
| 138 | UI.$("[data-uk-scrollspy-nav]", context).each(function() { | ||
| 139 | |||
| 140 | var element = UI.$(this); | ||
| 141 | |||
| 142 | if (!element.data("scrollspynav")) { | ||
| 143 | var obj = UI.scrollspynav(element, UI.Utils.options(element.attr("data-uk-scrollspy-nav"))); | ||
| 144 | } | ||
| 145 | }); | ||
| 146 | }); | ||
| 147 | }, | ||
| 148 | |||
| 149 | init: function() { | ||
| 150 | |||
| 151 | var ids = [], | ||
| 152 | links = this.find("a[href^='#']").each(function(){ if(this.getAttribute("href").trim()!=='#') ids.push(this.getAttribute("href")); }), | ||
| 153 | targets = UI.$(ids.join(",")), | ||
| 154 | |||
| 155 | clsActive = this.options.cls, | ||
| 156 | clsClosest = this.options.closest || this.options.closest; | ||
| 157 | |||
| 158 | var $this = this, inviews, fn = function(){ | ||
| 159 | |||
| 160 | inviews = []; | ||
| 161 | |||
| 162 | for (var i=0 ; i < targets.length ; i++) { | ||
| 163 | if (UI.Utils.isInView(targets.eq(i), $this.options)) { | ||
| 164 | inviews.push(targets.eq(i)); | ||
| 165 | } | ||
| 166 | } | ||
| 167 | |||
| 168 | if (inviews.length) { | ||
| 169 | |||
| 170 | var navitems, | ||
| 171 | scrollTop = $win.scrollTop(), | ||
| 172 | target = (function(){ | ||
| 173 | for(var i=0; i< inviews.length;i++){ | ||
| 174 | if (inviews[i].offset().top - $this.options.topoffset >= scrollTop){ | ||
| 175 | return inviews[i]; | ||
| 176 | } | ||
| 177 | } | ||
| 178 | })(); | ||
| 179 | |||
| 180 | if (!target) return; | ||
| 181 | |||
| 182 | if ($this.options.closest) { | ||
| 183 | links.blur().closest(clsClosest).removeClass(clsActive); | ||
| 184 | navitems = links.filter("a[href='#"+target.attr("id")+"']").closest(clsClosest).addClass(clsActive); | ||
| 185 | } else { | ||
| 186 | navitems = links.removeClass(clsActive).filter("a[href='#"+target.attr("id")+"']").addClass(clsActive); | ||
| 187 | } | ||
| 188 | |||
| 189 | $this.element.trigger("inview.uk.scrollspynav", [target, navitems]); | ||
| 190 | } | ||
| 191 | }; | ||
| 192 | |||
| 193 | if (this.options.smoothscroll && UI.smoothScroll) { | ||
| 194 | links.each(function(){ | ||
| 195 | UI.smoothScroll(this, $this.options.smoothscroll); | ||
| 196 | }); | ||
| 197 | } | ||
| 198 | |||
| 199 | fn(); | ||
| 200 | |||
| 201 | this.element.data("scrollspynav", this); | ||
| 202 | |||
| 203 | this.check = fn; | ||
| 204 | scrollspynavs.push(this); | ||
| 205 | |||
| 206 | } | ||
| 207 | }); | ||
| 208 | |||
| 209 | })(UIkit); | ||
