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); | ||