Statistics
| Branch: | Tag: | Revision:

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