Project

General

Profile

Bug #6534 » off-canvas.js

Guillaume Denis, 26 March 2015 03:50 PM

 
1
/**
2
 *------------------------------------------------------------------------------
3
 * @package       T3 Framework for Joomla!
4
 *------------------------------------------------------------------------------
5
 * @copyright     Copyright (C) 2004-2013 JoomlArt.com. All Rights Reserved.
6
 * @license       GNU General Public License version 2 or later; see LICENSE.txt
7
 * @authors       JoomlArt, JoomlaBamboo, (contribute to this project at github
8
 *                & Google group to become co-author)
9
 * @Google group: https://groups.google.com/forum/#!forum/t3fw
10
 * @Link:         http://t3-framework.org
11
 *------------------------------------------------------------------------------
12
 */
13

    
14
jQuery (document).ready(function($){
15
    // fix for old ie
16
    if (/MSIE\s([\d.]+)/.test(navigator.userAgent) ? new Number(RegExp.$1) < 10 : false) {
17
        $('html').addClass ('old-ie');
18
    } else if(/constructor/i.test(window.HTMLElement)){
19
        $('html').addClass('safari');
20
    }
21

    
22
    var $wrapper = $('body'),
23
        $inner = $('.t3-wrapper'),
24
        $toggles = $('.off-canvas-toggle'),
25
        $offcanvas = $('.t3-off-canvas'),
26
        $close = $('.t3-off-canvas .close'),
27
        $btn=null,
28
        $nav=null,
29
        direction = 'left',
30
        $fixed = null;
31
    // no wrapper, just exit
32
    if (!$wrapper.length) return ;
33

    
34
    // add effect class for nav
35
    $toggles.each (function () {
36
        var $this = $(this),
37
            $nav = $($this.data('nav')),
38
            effect = $this.data('effect'),
39
            direction = ($('html').attr('dir') == 'rtl' && $this.data('pos')!='right') || ($('html').attr('dir') != 'rtl' && $this.data('pos')=='right')  ? 'right':'left';
40
        $nav.addClass (effect).addClass ('off-canvas-'+direction);
41

    
42
        // move to outside wrapper-content
43
        var inside_effect = ['off-canvas-effect-3','off-canvas-effect-16','off-canvas-effect-7','off-canvas-effect-8','off-canvas-effect-14'];
44
        if ($.inArray(effect, inside_effect) == -1) {
45
            $inner.before($nav);
46
        } else {
47
            $inner.prepend($nav);
48
        }
49
    });
50

    
51
    $toggles.on('tap', function(e){
52
        // detect direction
53

    
54
        stopBubble (e);
55

    
56
        if ($wrapper.hasClass ('off-canvas-open')) {
57
            oc_hide (e);
58
            return false;
59
        }
60

    
61
        $btn = $(this);
62
        $nav = $($btn.data('nav'));
63
        $fixed = $inner.find('*').filter (function() {return $(this).css("position") === 'fixed';});
64

    
65
        $nav.addClass ('off-canvas-current');
66

    
67
        direction = ($('html').attr('dir') == 'rtl' && $btn.data('pos')!='right') || ($('html').attr('dir') != 'rtl' && $btn.data('pos')=='right')  ? 'right':'left';
68

    
69
        // add direction class to body
70
        // $('html').removeClass ('off-canvas-left off-canvas-right').addClass ('off-canvas-' + direction);
71

    
72
        $offcanvas.height($(window).height());
73

    
74
        // disable scroll event
75
        var events = $(window).data('events');
76
        if (events && events.scroll && events.scroll.length) {
77
          // store current handler for scroll
78
          var handlers = [];
79
          for (var i=0; i<events.scroll.length; i++){
80
            handlers[i] = events.scroll[i].handler;
81
          }
82
          $(window).data('scroll-events', handlers);
83
          $(window).off ('scroll');
84
        }
85
        // disable scroll on page
86
        var scrollTop = ($('html').scrollTop()) ? $('html').scrollTop() : $('body').scrollTop(); // Works for Chrome, Firefox, IE...
87
        $('html').addClass('noscroll').css('top',-scrollTop).data('top', scrollTop);
88
        $('.t3-off-canvas').css('top',scrollTop);
89

    
90
        // make the fixed element become absolute
91
        $fixed.each (function () {
92
            var $this = $(this),
93
                $parent = $this.parent(),
94
                mtop = 0;
95
            // find none static parent
96
            while (!$parent.is($inner) && $parent.css("position") === 'static') $parent = $parent.parent();
97
            mtop = -$parent.offset().top;
98
            $this.css ({'position': 'absolute', 'margin-top': mtop});
99
        });
100

    
101
        $wrapper.scrollTop (scrollTop);
102
        // update effect class
103
        $wrapper[0].className = $wrapper[0].className.replace (/\s*off\-canvas\-effect\-\d+\s*/g, ' ').trim() +
104
            ' ' + $btn.data('effect') + ' ' + 'off-canvas-' + direction;
105

    
106
        setTimeout(oc_show, 50);
107

    
108
        return false;
109
    });
110
    var oc_show = function () {
111
        $wrapper.addClass ('off-canvas-open');
112
        $inner.on ('click', oc_hide);
113
        $close.on ('click', oc_hide);
114
        $offcanvas.on ('click', stopBubble);
115

    
116
        // fix for old ie
117
        if ($.browser.msie && $.browser.version < 10) {
118
            var p1 = {}, p2 = {};
119
            p1['padding-'+direction] = $('.t3-off-canvas').width();
120
            p2[direction] = 0;
121
            $inner.animate (p1);
122
            $nav.animate (p2);
123
        }
124
    };
125

    
126
    var oc_hide = function () {
127
        
128
        //remove events
129
        $inner.off ('click', oc_hide);
130
        $close.off ('click', oc_hide);
131
        $offcanvas.off ('click', stopBubble);
132

    
133
        //delay for click action
134
        setTimeout(function(){
135
            $wrapper.removeClass ('off-canvas-open');
136
        }, 100);
137

    
138
        setTimeout (function (){
139
            $wrapper.removeClass ($btn.data('effect')).removeClass ('off-canvas-'+direction);
140
            $wrapper.scrollTop (0);
141
            // enable scroll
142
            $('html').removeClass ('noscroll').css('top', '');
143
            $('html,body').scrollTop ($('html').data('top'));
144
            $nav.removeClass ('off-canvas-current');
145
            // restore fixed elements
146
            $fixed.css ({'position': '', 'margin-top': ''});
147
            // re-enable scroll
148
            if ($(window).data('scroll-events')) {
149
              var handlers = $(window).data('scroll-events');
150
              for (var i=0; i<handlers.length; i++) {
151
                $(window).on ('scroll', handlers[i]);
152
              }
153
              $(window).data('scroll-events', null);
154
            }
155
        }, 550);
156

    
157
        // fix for old ie
158
        if ($('html').hasClass ('old-ie')) {
159
            var p1 = {}, p2 = {};
160
            p1['padding-'+direction] = 0;
161
            p2[direction] = -$('.t3-off-canvas').width();
162
            $inner.animate (p1);
163
            $nav.animate (p2);
164
        }
165
    };
166

    
167
    var stopBubble = function (e) {
168
        e.stopPropagation();
169
        return true;
170
    }
171
})