https://mercadoracing.com/external/panelmenu/panelmenu.js

1
2
3var delay_tab = 300,
4	delay_show_mm = 300,
5	delay_hide_mm = 300;
6
7$("body").append(getFullscreenBg());
8
9$.fn.initMM = function() {
10	var mmpanel = {
11		$mobilemenu: $(".panel-menu"),
12		mm_close_button: 'Close',
13		mm_back_button: 'Back',
14		mm_breakpoint: 768,
15		mm_enable_breakpoint: false,
16		mm_mobile_button: false,
17		remember_state: false,
18		second_button: false, // class
19		init: function($button, data){
20			var _this = this;
21			if(!_this.$mobilemenu.length){
22				console.log('You not have <nav class="panel-menu mobile-main-menu">menu</nav>. See Documentation')
23				return false;
24			}
25
26			arguments[1] != undefined && _this.parse_arguments(data);
27			_this.$mobilemenu.parse_mm(mmpanel);//_this.mm_close_button, _this.mm_back_button);
28			_this.$mobilemenu.init_mm(mmpanel);
29			_this.mm_enable_breakpoint && _this.$mobilemenu.check_resolution_mm(mmpanel);//_this.mm_breakpoint);
30			$button.mm_handler(mmpanel);
31		},
32		parse_arguments: function(data){
33			var _this = this;
34			if(Object(data).hasOwnProperty("menu_class")) _this.$mobilemenu = $("."+data.menu_class);
35
36			$.each(data, function( k, v ) {
37				switch(k) {
38				case 'right':
39					v && _this.$mobilemenu.addClass("mm-right");
40					break;
41				case 'close_button_name':
42					_this.mm_close_button = v;
43					break;
44				case 'back_button_name':
45					_this.mm_back_button = v;
46					break;
47				case 'width':
48					_this.$mobilemenu.css("width", v);
49					break;
50				case 'breakpoint':
51					_this.mm_breakpoint = v;
52					break;
53				case 'enable_breakpoint':
54					_this.mm_enable_breakpoint = v;
55					break;
56				case 'mobile_button':
57					_this.mm_mobile_button = v;
58					break;
59				case 'remember_state':
60					_this.remember_state = v;
61					break;
62				case 'second_button':
63					_this.second_button = v;
64					break;
65				};
66			});
67		},
68		show_button_in_mobile: function($button){
69			var _this = this;
70			if(_this.mm_mobile_button) {
71				/* FERNANDO VIADERO - EN EL VIEWTOPIC, POR ALGUNA RAZÓN EL SLICK SLIDER SETEA EL WINDOW.INNERWIDTH A UN VALOR NO VALIDO*/
72				//window.innerWidth > _this.mm_breakpoint ? $button.hide() : $button.show();
73				$(window).width() > _this.mm_breakpoint ? $button.hide() : $button.show();
74				$(window).resize(function(){
75					/* FERNANDO VIADERO - EN EL VIEWTOPIC, POR ALGUNA RAZÓN EL SLICK SLIDER SETEA EL WINDOW.INNERWIDTH A UN VALOR NO VALIDO*/
76					$(window).width() > _this.mm_breakpoint ? $button.hide() : $button.show();
77				})
78			}
79		}
80	}
81	mmpanel.init($(this), arguments[0]);
82	mmpanel.show_button_in_mobile($(this));
83}
84
85$.fn.check_resolution_mm = function(mmpanel) {
86	var _this = $(this);
87	$(window).resize(function(){
88		if(!$("body").hasClass("mm-open") || !_this.hasClass("mmitemopen")) return false;
89		/* FERNANDO VIADERO - EN EL VIEWTOPIC, POR ALGUNA RAZÓN EL SLICK SLIDER SETEA EL WINDOW.INNERWIDTH A UN VALOR NO VALIDO*/
90		//window.innerWidth > mmpanel.mm_breakpoint && _this.closemm(mmpanel);
91		$(window).width() > mmpanel.mm_breakpoint && _this.closemm(mmpanel);
92	});
93}
94$.fn.mm_handler = function(mmpanel){
95	$(this).click(function(e){
96		e.preventDefault();
97		mmpanel.$mobilemenu.openmm();
98	});
99
100	if(mmpanel.second_button != false){
101		$(mmpanel.second_button).click(function(e){
102			e.preventDefault();
103			mmpanel.$mobilemenu.openmm();
104		});
105	};
106}
107
108$.fn.parse_mm = function(mmpanel) {
109	var $mm_curent = $(this).clone(),
110		$mm_new = $(get_mm_parent()),
111		$mm_block = false,
112		count = 0,
113		_this = false,
114		$btnBack = false,
115		$ul;
116	$(this).empty();
117
118	$mm_curent.find('a').each(function(){
119		_this = $(this);
120		$ul = _this.parent().find("ul").first();
121		if($ul.length) {
122			count++;
123			$ul.prepend("<li></li>").find("li").first().append(_this.clone().addClass("mm-original-link"));
124			_this.attr("href", "#mm"+count).attr("data-target", "#mm"+count).addClass("mm-next-level");
125		}
126	});
127	$mm_curent.find('ul').each(function(index){
128		$btnBack = false;
129		$mm_block = $(get_mm_block()).attr("id", "mm"+index).append($(this));
130		if (index == 0) {
131			$mm_block.addClass("mmopened").addClass("mmcurrent").removeClass("mmhidden");
132			$btnBack = getButtonClose($mm_curent.find(".mm-closebtn").html(), mmpanel.mm_close_button);
133			$mm_block.find("ul").first().prepend($btnBack);
134		}
135		else {
136			$btnBack = getButtonBack($mm_curent.find(".mm-backbtn").html(), mmpanel.mm_back_button);
137			$mm_block.find("ul").first().prepend($btnBack);
138		}
139		$mm_new.append($mm_block);
140	});
141
142	$(this).append($mm_new);
143}
144$.fn.init_mm = function(mmpanel) {
145	var _parent = $(this);
146	_parent.find("a").each(function(){
147		$(this).click(function(e){
148			var _this = $(this);
149			var $panel = false;

150			var $currobj = false;
151			var lv = '';
152			if(_this.hasClass("mm-next-level")){
153				e.preventDefault();
154				lv = _this.attr("href");
155				$currobj = _parent.find(".mmcurrent");
156				$currobj.addClass("mmsubopened").removeClass("mmcurrent");
157				_parent.find(lv).removeClass("mmhidden");
158				setTimeout(function(){_parent.find(lv).scrollTop(0).addClass("mmcurrent").addClass("mmopened");}, 0);
159				setTimeout(function(){$currobj.addClass("mmhidden")}, delay_tab);
160				return false;
161			}
162			if(_this.hasClass("mm-prev-level")){
163				e.preventDefault();
164				lv = _this.attr("href");
165				$currobj = _parent.find(".mmcurrent");
166				$currobj.removeClass("mmcurrent").removeClass("mmopened");
167				_parent.find(".mmsubopened").last().removeClass("mmhidden").scrollTop(0).removeClass("mmsubopened").addClass("mmcurrent");
168				setTimeout(function(){$currobj.addClass("mmhidden")}, delay_tab);
169				return false;
170			}
171			if(_this.hasClass("mm-close")){
172				_parent.closemm(mmpanel);
173				return false;
174			}
175		})
176	});
177	$(".mm-fullscreen-bg").click(function(e){
178		e.preventDefault();
179		_parent.closemm(mmpanel);
180	});
181}
182$.fn.openmm = function(){
183	var _this = $(this);
184	_this.show();
185	setTimeout(function(){$("body").addClass("mm-open");_this.addClass("mmitemopen");$(".mm-fullscreen-bg").fadeIn(delay_show_mm);}, 0);
186}
187$.fn.closemm = function(mmpanel){
188	var _this = $(this);
189	_this.addClass("mmhide");
190	$(".mm-fullscreen-bg").fadeOut(delay_hide_mm);
191	setTimeout(function(){ mm_destroy(_this, mmpanel); }, delay_hide_mm);
192}
193function mm_destroy(_parent, mmpanel){
194	if(!mmpanel.remember_state) {
195		_parent.find(".mmpanel").toggleClass("mmsubopened mmcurrent mmopened", false).addClass("mmhidden");
196		_parent.find("#mm0").addClass("mmopened").addClass("mmcurrent").removeClass("mmhidden");
197	}
198	_parent.toggleClass("mmhide mmitemopen", false).hide();
199	$("body").removeClass("mm-open");
200}
201function get_mm_parent(){
202	return '<div class="mmpanels"></div>';
203}
204function get_mm_block(){
205	return '<div class="mmpanel mmhidden">';
206}
207function getButtonBack(value, _default) {
208	value = value == undefined ? _default : value;
209	return '<li><a href="#" data-target="#" class="mm-prev-level">'+value+'</a></li>';
210}
211function getButtonClose(value, _default) {
212	value = value == undefined ? _default : value;
213	return '<li class="mm-close-parent"><a href="#close" data-target="#close" class="mm-close">'+value+'</a></li>';
214}
215function getFullscreenBg() {
216	return '<div class="mm-fullscreen-bg"></div>';
217}