summaryrefslogtreecommitdiff
path: root/js/core/scrollspy.js
diff options
context:
space:
mode:
Diffstat (limited to 'js/core/scrollspy.js')
-rwxr-xr-xjs/core/scrollspy.js209
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);