Projet

Général

Profil

« Précédent | Suivant » 

Révision 281dd918

Ajouté par Guillaume Denis il y a environ 9 ans

responsive navbar

Voir les différences:

ckanext/ozwillo_theme/fanstatic/off-canvas.js
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('click', function(e){
52

  
53
        stopBubble (e);
54

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

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

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

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

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

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

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

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

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

  
105
        setTimeout(oc_show, 50);
106

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

  
115
    };
116

  
117
    var oc_hide = function () {
118

  
119
        //remove events
120
        $inner.off ('click', oc_hide);
121
        $close.off ('click', oc_hide);
122
        $offcanvas.off ('click', stopBubble);
123

  
124
        //delay for click action
125
        setTimeout(function(){
126
            $wrapper.removeClass ('off-canvas-open');
127
        }, 100);
128

  
129
        setTimeout (function (){
130
            $wrapper.removeClass ($btn.data('effect')).removeClass ('off-canvas-'+direction);
131
            $wrapper.scrollTop (0);
132
            // enable scroll
133
            $('html').removeClass ('noscroll').css('top', '');
134
            $('html,body').scrollTop ($('html').data('top'));
135
            $nav.removeClass ('off-canvas-current');
136
            // restore fixed elements
137
            $fixed.css ({'position': '', 'margin-top': ''});
138
            // re-enable scroll
139
            if ($(window).data('scroll-events')) {
140
              var handlers = $(window).data('scroll-events');
141
              for (var i=0; i<handlers.length; i++) {
142
                $(window).on ('scroll', handlers[i]);
143
              }
144
              $(window).data('scroll-events', null);
145
            }
146
        }, 550);
147

  
148
        // fix for old ie
149
        if ($('html').hasClass ('old-ie')) {
150
            var p1 = {}, p2 = {};
151
            p1['padding-'+direction] = 0;
152
            p2[direction] = -$('.t3-off-canvas').width();
153
            $inner.animate (p1);
154
            $nav.animate (p2);
155
        }
156
    };
157

  
158
    var stopBubble = function (e) {
159
        e.stopPropagation();
160
        return true;
1
document.addEventListener('DOMContentLoaded', function() {
2
  document.getElementById('toggle-toc').addEventListener('click', function() {
3
    var el = document.body, className = 'toc-open';
4
    if (el.classList) {
5
      el.classList.toggle(className);
6
    } else {
7
      var classes = el.className.split(' ');
8
      var existingIndex = classes.indexOf(className);
9

  
10
      if (existingIndex >= 0)
11
        classes.splice(existingIndex, 1);
12
      else
13
        classes.push(className);
14

  
15
      el.className = classes.join(' ');
161 16
    }
162
})
17
  });
18
});

Formats disponibles : Unified diff