]>
git.immae.eu Git - github/Chocobozzz/PeerTube.git/blob - support/doc/api/html/javascripts/spectacle.js
e75fc6a3a5c063ed3676c97e0075c7444b9802c1
2 // $(document).foundation();
4 var $sidebar
= $('#sidebar');
6 var $docs
= $('#docs');
7 var $nav
= $sidebar
.find('nav');
10 // Setup sidebar navigation
11 var traverse
= new Traverse($nav
, {
13 barOffset: $sidebar
.position().top
16 $nav
.on('update.traverse', function(event
, element
) {
17 $nav
.find('section').removeClass('expand');
18 var $section
= element
.parents('section:first');
19 if ($section
.length
) {
20 $section
.addClass('expand');
25 // Bind the drawer layout
26 var $drawerLayout
= $('.drawer-layout'),
27 $drawer
= $drawerLayout
.find('.drawer'),
28 closeDrawer = function() {
29 $drawer
.removeClass('slide-right slide-left');
30 $drawer
.find('.drawer-overlay').remove();
31 $drawerLayout
.removeClass('drawer-open drawer-slide-left-large drawer-slide-right-large');
35 // Drawer open buttons
36 $drawerLayout
.find('[data-drawer-slide]').click(function(e
) {
38 direction
= $this.data('drawer-slide');
39 $drawerLayout
.addClass('drawer-open');
40 $drawer
.addClass('slide-' + direction
);
42 var $overlay
= $('<a href="#" class="drawer-overlay"></a>')
43 $drawer
.append($overlay
);
44 $overlay
.click(closeDrawer
);
49 // Drawer close buttons
50 $drawerLayout
.find('[data-drawer-close]').click(closeDrawer
);
55 * Creates a new instance of Traverse.
57 * @fires Traverse#init
58 * @param {Object} element - jQuery object to add the trigger to.
59 * @param {Object} options - Overrides to the default plugin settings.
61 function Traverse(element
, options
) {
62 this.$element
= element
;
63 this.options
= $.extend({}, Traverse
.defaults
, this.$element
.data(), options
);
69 * Default settings for plugin
73 * Amount of time, in ms, the animated scrolling should take between locations.
77 animationDuration: 500,
79 * Animation style to use when scrolling between locations.
81 * @example 'ease-in-out'
83 animationEasing: 'linear',
85 * Number of pixels to use as a marker for location changes.
91 * Class applied to the active locations link on the traverse container.
95 activeClass: 'active',
97 * Allows the script to manipulate the url of the current page, and if supported, alter the history.
103 * Number of pixels to offset the scroll of the page on item click if using a sticky nav bar.
111 * Initializes the Traverse plugin and calls functions to get equalizer functioning on load.
114 Traverse
.prototype._init = function() {
115 var id
= this.$element
[0].id
, // || Foundation.GetYoDigits(6, 'traverse'),
117 this.$targets
= $('[data-traverse-target]');
118 this.$links
= this.$element
.find('a');
125 this.scrollPos
= parseInt(window
.pageYOffset
, 10);
131 * Calculates an array of pixel values that are the demarcation lines between locations on the page.
132 * Can be invoked if new elements are added or the size of a location changes.
135 Traverse
.prototype.calcPoints = function(){
137 body
= document
.body
,
138 html
= document
.documentElement
;
141 this.winHeight
= Math
.round(Math
.max(window
.innerHeight
, html
.clientHeight
));
142 this.docHeight
= Math
.round(Math
.max(body
.scrollHeight
, body
.offsetHeight
, html
.clientHeight
, html
.scrollHeight
, html
.offsetHeight
));
144 this.$targets
.each(function(){
146 pt
= $tar
.offset().top
; // Math.round($tar.offset().top - _this.options.threshold);
147 $tar
.targetPoint
= pt
;
148 _this
.points
.push(pt
);
153 * Initializes events for Traverse.
156 Traverse
.prototype._events = function() {
158 $body
= $('html, body'),
160 duration: _this
.options
.animationDuration
,
161 easing: _this
.options
.animationEasing
164 $(window
).one('load', function(){
166 _this
._updateActive();
168 $(this).resize(function(e
) {
170 }).scroll(function(e
) {
171 _this
._updateActive();
175 this.$element
.on('click', 'a[href^="#"]', function(e
) { //'click.zf.traverse'
177 var arrival
= this.getAttribute('href').replace(".", "\\."),
178 scrollPos
= $(arrival
).offset().top
- _this
.options
.barOffset
; // - _this.options.threshold / 2 - _this.options.barOffset;
180 $body
.stop(true).animate({
187 * Calls necessary functions to update Traverse upon DOM change
190 Traverse
.prototype.reflow = function(){
192 this._updateActive();
196 * Updates the visibility of an active location link,
197 * and updates the url hash for the page, if deepLinking enabled.
200 * @fires Traverse#update
202 Traverse
.prototype._updateActive = function(){
203 var winPos
= parseInt(window
.pageYOffset
, 10),
206 if(winPos
+ this.winHeight
=== this.docHeight
){ curIdx
= this.points
.length
- 1; }
207 else if(winPos
< this.points
[0]){ curIdx
= 0; }
209 var isDown
= this.scrollPos
< winPos
,
211 curVisible
= this.points
.filter(function(p
, i
){
213 p
<= (winPos
+ _this
.options
.barOffset
+ _this
.options
.threshold
) :
214 (p
- (_this
.options
.barOffset
+ _this
.options
.threshold
)) <= winPos
;
215 // p <= (winPos - (offset - _this.options.threshold)) :
216 // (p - (-offset + _this.options.threshold)) <= winPos;
218 curIdx
= curVisible
.length
? curVisible
.length
- 1 : 0;
221 var $prev
= this.$active
;
222 var $next
= this.$links
.eq(curIdx
);
223 this.$active
.removeClass(this.options
.activeClass
);
224 this.$active
= $next
.addClass(this.options
.activeClass
);
226 if(this.options
.deepLinking
){
227 var hash
= this.$active
[0].getAttribute('href');
228 if(window
.history
.pushState
){
229 window
.history
.pushState(null, null, hash
);
231 window
.location
.hash
= hash
;
235 this.scrollPos
= winPos
;
237 // Fire event if the active element was changed
238 var changed
= $prev
[0] !== $next
[0];
240 this.$element
.trigger('update.traverse', [this.$active
]);