root / snf-cyclades-app / synnefo / ui / new_ui / ui / javascripts / foundation / foundation.magellan.js @ e4a6c3b8
History | View | Annotate | Download (4.6 kB)
1 |
/*jslint unparam: true, browser: true, indent: 2 */
|
---|---|
2 |
|
3 |
;(function ($, window, document, undefined) { |
4 |
'use strict';
|
5 |
|
6 |
Foundation.libs.magellan = { |
7 |
name : 'magellan', |
8 |
|
9 |
version : '4.0.0', |
10 |
|
11 |
settings : {
|
12 |
activeClass: 'active' |
13 |
}, |
14 |
|
15 |
init : function (scope, method, options) { |
16 |
this.scope = scope || this.scope; |
17 |
Foundation.inherit(this, 'data_options'); |
18 |
|
19 |
if (typeof method === 'object') { |
20 |
$.extend(true, this.settings, method); |
21 |
} |
22 |
|
23 |
if (typeof method != 'string') { |
24 |
if (!this.settings.init) { |
25 |
this.fixed_magellan = $("[data-magellan-expedition]"); |
26 |
this.set_threshold();
|
27 |
this.last_destination = $('[data-magellan-destination]').last(); |
28 |
this.events();
|
29 |
} |
30 |
|
31 |
return this.settings.init; |
32 |
} else {
|
33 |
return this[method].call(this, options); |
34 |
} |
35 |
}, |
36 |
|
37 |
events : function () { |
38 |
var self = this; |
39 |
$(this.scope).on('arrival.fndtn.magellan', '[data-magellan-arrival]', function (e) { |
40 |
var $destination = $(this), |
41 |
$expedition = $destination.closest('[data-magellan-expedition]'), |
42 |
activeClass = $expedition.attr('data-magellan-active-class') |
43 |
|| self.settings.activeClass; |
44 |
|
45 |
$destination
|
46 |
.closest('[data-magellan-expedition]')
|
47 |
.find('[data-magellan-arrival]')
|
48 |
.not($destination)
|
49 |
.removeClass(activeClass); |
50 |
$destination.addClass(activeClass);
|
51 |
}); |
52 |
|
53 |
this.fixed_magellan
|
54 |
.on('update-position.fndtn.magellan', function(){ |
55 |
var $el = $(this); |
56 |
// $el.data("magellan-fixed-position","");
|
57 |
//$el.data("magellan-top-offset", "");
|
58 |
}) |
59 |
.trigger('update-position');
|
60 |
|
61 |
$(window)
|
62 |
.on('resize.fndtn.magellan', function() { |
63 |
this.fixed_magellan.trigger('update-position'); |
64 |
}.bind(this))
|
65 |
|
66 |
.on('scroll.fndtn.magellan', function() { |
67 |
var windowScrollTop = $(window).scrollTop(); |
68 |
self.fixed_magellan.each(function() {
|
69 |
var $expedition = $(this); |
70 |
if (typeof $expedition.data('magellan-top-offset') === 'undefined') { |
71 |
$expedition.data('magellan-top-offset', $expedition.offset().top); |
72 |
} |
73 |
if (typeof $expedition.data('magellan-fixed-position') === 'undefined') { |
74 |
$expedition.data('magellan-fixed-position', false) |
75 |
} |
76 |
var fixed_position = (windowScrollTop + self.settings.threshold) > $expedition.data("magellan-top-offset"); |
77 |
var attr = $expedition.attr('data-magellan-top-offset'); |
78 |
|
79 |
if ($expedition.data("magellan-fixed-position") != fixed_position) { |
80 |
$expedition.data("magellan-fixed-position", fixed_position); |
81 |
if (fixed_position) {
|
82 |
$expedition.css({position:"fixed", top:0}); |
83 |
} else {
|
84 |
$expedition.css({position:"", top:""}); |
85 |
} |
86 |
if (fixed_position && typeof attr != 'undefined' && attr != false) { |
87 |
$expedition.css({position:"fixed", top:attr + "px"}); |
88 |
} |
89 |
} |
90 |
}); |
91 |
}); |
92 |
|
93 |
|
94 |
if (this.last_destination.length > 0) { |
95 |
$(window).on('scroll.fndtn.magellan', function (e) { |
96 |
var windowScrollTop = $(window).scrollTop(), |
97 |
scrolltopPlusHeight = windowScrollTop + $(window).height(),
|
98 |
lastDestinationTop = Math.ceil(self.last_destination.offset().top); |
99 |
|
100 |
$('[data-magellan-destination]').each(function () { |
101 |
var $destination = $(this), |
102 |
destination_name = $destination.attr('data-magellan-destination'), |
103 |
topOffset = $destination.offset().top - windowScrollTop;
|
104 |
|
105 |
if (topOffset <= self.settings.threshold) {
|
106 |
$("[data-magellan-arrival='" + destination_name + "']").trigger('arrival'); |
107 |
} |
108 |
// In large screens we may hit the bottom of the page and dont reach the top of the last magellan-destination, so lets force it
|
109 |
if (scrolltopPlusHeight >= $(self.scope).height() && lastDestinationTop > windowScrollTop && lastDestinationTop < scrolltopPlusHeight) { |
110 |
$('[data-magellan-arrival]').last().trigger('arrival'); |
111 |
} |
112 |
}); |
113 |
}); |
114 |
} |
115 |
|
116 |
this.settings.init = true; |
117 |
}, |
118 |
|
119 |
set_threshold : function () { |
120 |
if (!this.settings.threshold) { |
121 |
this.settings.threshold = (this.fixed_magellan.length > 0) ? |
122 |
this.outerHeight(this.fixed_magellan, true) : 0; |
123 |
} |
124 |
}, |
125 |
|
126 |
off : function () { |
127 |
$(this.scope).off('.fndtn.magellan'); |
128 |
} |
129 |
}; |
130 |
}(Foundation.zj, this, this.document)); |