https://goldelmurcia.es/plugins/system/t3/base/js/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!function($){
15	
16	$(document).ready(function(){
17		
18		//detect transform (https://github.com/cubiq/)
19		$.support.t3transform =  (function () {
20			var style = document.createElement('div').style,
21				vendors = ['t', 'webkitT', 'MozT', 'msT', 'OT'],
22				transform, i = 0, l = vendors.length;
23
24			for ( ; i < l; i++ ) {
25				transform = vendors[i] + 'ransform';
26				if ( transform in style ) {
27					return transform;
28				}
29			}
30
31			return false;
32		})();
33
34		if ($.support.t3transform !== false) {
35
36			var $btn = $('.btn-navbar[data-toggle="collapse"]'),
37				$nav = null,
38				$fixeditems = null;
39
40			if (!$btn.length){
41				return;
42			}
43
44			//mark that we have off-canvas menu
45			$(document.documentElement).addClass('off-canvas-ready');
46
47			$nav = $('<div class="t3-mainnav" />').appendTo($('<div id="off-canvas-nav"></div>').appendTo(document.body));
48
49			//not all btn-navbar is used for off-canvas
50			var $navcollapse = $btn.parent().find($btn.data('target') + ':first');
51			if(!$navcollapse.length){
52				$navcollapse = $($btn.data('target') + ':first');
53			}
54			$navcollapse.clone().appendTo($nav);
55			
56			$btn.click (function(e){
57				if ($(this).data('off-canvas') == 'show') {
58					hideNav();
59				} else {
60					showNav();
61				}
62
63				return false;
64			});
65
66			var posNav = function () {
67				var t = $(window).scrollTop();
68				if (t < $nav.position().top) $nav.css('top', t);
69			},
70
71			bdHideNav = function (e) {
72				e.preventDefault();
73				hideNav();
74				return false;
75			},
76
77			showNav = function () {
78				$('html').addClass ('off-canvas');
79
80				$nav.css('top', $(window).scrollTop());
81				wpfix(1);
82				
83				setTimeout (function(){
84					$btn.data('off-canvas', 'show');
85					$('html').addClass ('off-canvas-enabled');
86					$(window).bind('scroll touchmove', posNav);
87
88					// hide when click on off-canvas-nav
89					$('#off-canvas-nav').bind ('click', function (e) {
90						e.stopPropagation();
91					});
92					
93					$('#off-canvas-nav a').bind ('click', hideNav);
94					$('body').bind ('click', bdHideNav);
95				}, 50);
96
97				setTimeout (function(){
98					wpfix(2);
99				}, 1000);
100			},
101
102			hideNav = function () {
103				$(window).unbind('scroll touchmove', posNav);
104				$('#off-canvas-nav').unbind ('click');
105				$('#off-canvas-nav a').unbind ('click', hideNav);
106				$('body').unbind ('click', bdHideNav);
107				
108				$('html').removeClass ('off-canvas-enabled');
109				$btn.data('off-canvas', 'hide');
110
111				setTimeout (function(){
112					$('html').removeClass ('off-canvas');
113				}, 600);
114			},
115
116			wpfix = function (step) {
117				// check if need fixed
118				if ($fixeditems == -1){
119					return;// no need to fix
120				}
121
122				if (!$fixeditems) {
123					$fixeditems = $('body').children().filter(function(){ return $(this).css('position') === 'fixed' });
124					if (!$fixeditems.length) {
125						$fixeditems = -1;
126						return;
127					}
128				}
129
130				if (step==1) {
131					$fixeditems.css({'position': 'absolute', 'top': $(window).scrollTop() + 'px'});
132				} else {
133					$fixeditems.css({'position': '', 'top': ''});
134				}
135			};
136		}
137	})
138
139}(jQuery);