https://www.taaze.tw/new_ec/rwd/include/js/mSlideMenu.js

1/*
2* 美編想要的效果跟原本的不同，只好自己刻JS.....
3*
4* 手機平板展開選單
5* */
6(function($) {
7$.fn.mSlideMenu = function(options){
8//direction : 預設(L2R)選單由左至滑出，R2L則是由右至左
9$.fn.mSlideMenu.config = {
10direction:'L2R',
11_link:true
12}
13init(this,options);
14}
15var slidemenuMove=false;
16var _orientation = window.orientation;
17var init = function(el,options){
18var setting = new Array; //設定
19setting = $.extend({},$.fn.mSlideMenu.config, options);
20$('[role=togglemSlideMenu]').each(function(i,v){
21var id = $(v).attr('relMenu');
22$(v).on('click',function(event){
23event.preventDefault();
24event.stopPropagation();
25mSlideMenuToggle(id);
26});
27$(v).on('touchend',function(event){
28event.preventDefault();
29event.stopPropagation();
30mSlideMenuToggle(id);
31});
32});
33el.addClass('mSlideMenu');
34if(setting.direction!='L2R'&&setting.direction!='R2L'){
35el.addClass('L2R');
36}else{
37el.addClass(setting.direction);
38}
39//el.children('ul').addClass('mSlideMenu_main').css('height',$(window).height());
40el.find('.dividers').each(function(i,v){
41$(v).css({
42'height': '1px',
43'background': '#EFEFEF',
44})
45});
46var drawMenu = function(parent){
47parent.children('li').each(function(i,v){
48var subId = $(v).children('a').attr('href');
49if(subId !=undefined){
50if($(v).children('ul').length>0){
51$(v).on('click',function(event){
52event.preventDefault();
53if(setting._link){
54toggle(subId);
55}
56});
57$(v).on('touchend',function(event){
58event.preventDefault();
59if(setting._link){
60toggle(subId);
61}
62});
63$(v).children('ul').each(function(i2,v2){
64$(v2).addClass('subMenu');
65drawMenu($(v2));
66});
67}else{
68$(v).on('click',function(event){
69event.preventDefault();
70if(setting._link){
71location.href = subId;
72}
73});
74$(v).on('touchend',function(event){
75event.preventDefault();
76if(setting._link){
77location.href = subId;
78}
79});
80}
81}
82});
83}
84el.children('ul').each(function(i,v){
85drawMenu($(v));
86});
87if(el.css('display')=='none'){
88el.css('display','block');
89}
90var top = parseInt(el.css('top'));
91var height = $(window).height() - top;
92height += 40;
93//el.css('height',height);
94$(window).on("resize", function () {
95var nowO = window.orientation;
96nowO = window.orientation<0?window.orientation*-1:window.orientation;
97//el.css('height',height);
98if(_orientation!=nowO || nowO==undefined){
99var top = parseInt(el.css('top'));
100var height = $(window).height() ;
101//el.children('ul').addClass('mSlideMenu_main').css('height',$(window).height());
102$('.mSlideMenu_overlay').css({'width':$(window).width()});
103if($(window).width() > 1199){
104if(el.hasClass('mSlideMenuShow')){
105el.removeClass('mSlideMenuShow');
106removeOverlay();
107}
108}
109if(nowO!=undefined){
110_orientation = nowO
111}
112}
113});
114//點擊他處收起列表
115if (document.getElementById('mHeaderContainer')){
116document.getElementById('mHeaderContainer').addEventListener('click',function(e){
117if(el.hasClass('mSlideMenuShow')){
118event.preventDefault();
119event.stopPropagation();
120el.removeClass('mSlideMenuShow');
121removeOverlay();
122}
123},true);
124}
125if (document.getElementById('mHeaderContainer')){
126document.getElementById('mHeaderContainer').addEventListener('touchend',function(e){
127if(el.hasClass('mSlideMenuShow')){
128event.preventDefault();
129event.stopPropagation();
130el.removeClass('mSlideMenuShow');
131removeOverlay();
132}
133},true);
134}
135// $("#mHeaderContainer").on('click touchend',function(event){
136// 	if(el.hasClass('mSlideMenuShow')){
137// 		event.preventDefault();
138// 		event.stopPropagation();
139// 		el.removeClass('mSlideMenuShow');
140// 		removeOverlay();
141// 		return false;
142// 	}
143// });
144var _starX = null;
145var _startY = null;
146var onTouchStart = function(e){
147e.stopPropagation();
148if((e.type == "touchstart" && e.touches.length == 1) || e.type == "dragstart") {
149_startX = e.touches ? e.touches[0].pageX : e.pageX;
150_startY = e.touches ? e.touches[0].pageY : e.pageY;
151slidemenuMove=false;
152}
153}
154var onTouchMove = function(e){
155e.stopPropagation();
156if(e.type == "touchmove" || e.type == "drag"){
157if(!slidemenuMove){
158setting._link = false;
159var x = e.touches ? e.touches[0].pageX : e.pageX;
160var y = e.touches ? e.touches[0].pageY : e.pageY;
161if((e.type == "drag" && e.pageX > 0) || e.type == "touchmove"){
162moveX = _startX - x;
163moveY = _startY - y;
164}
165var tmpMoveDx = Math.abs(moveX);
166var tmpMoveDy = Math.abs(moveY);
167if (tmpMoveDx>10&&e.cancelable) {
168e.preventDefault();
169}
170if(tmpMoveDx > 30 && moveX > 0){
171if(el.hasClass('mSlideMenuShow')){
172el.removeClass('mSlideMenuShow');
173removeOverlay();
174}
175}

176slidemenuMove=true;
177}
178}
179}
180var onTouchEnd = function(e){
181e.stopPropagation();
182if(e.type == "touchend" || e.type == "drag" || e.type == "dragend"){
183_startX = null;
184_startY = null;
185setting._link = true;
186}
187if(slidemenuMove){
188setting._link = true;
189_startX = null;
190_startY = null;
191}
192setTimeout(function () {
193setting._link = true;
194},50);
195}
196if(el.get(0)){
197el.get(0).removeEventListener('touchstart', onTouchStart)
198el.get(0).removeEventListener('touchmove', onTouchMove)
199el.get(0).removeEventListener('touchend', onTouchEnd)
200//el.get(0).removeEventListener('touchcancel', onTouchEnd)
201el.get(0).removeEventListener("dragstart", onTouchStart)
202el.get(0).removeEventListener("drag", onTouchMove)
203el.get(0).removeEventListener("dragend", onTouchEnd)
204el.get(0).addEventListener('touchstart', onTouchStart)
205el.get(0).addEventListener('touchmove', onTouchMove)
206el.get(0).addEventListener('touchend', onTouchEnd)
207//el.get(0).addEventListener('touchcancel', onTouchEnd)
208el.get(0).addEventListener("dragstart", onTouchStart)
209el.get(0).addEventListener("drag", onTouchMove)
210el.get(0).addEventListener("dragend", onTouchEnd);
211}
212}
213var stopLink = function(event) {
214event.stopPropagation();
215event.preventDefault();
216}
217var toggle = function(menuId){
218if($(menuId).css('display')=='none'){
219$(menuId).show();
220}else{
221$(menuId).hide();
222}
223}
224var mSlideMenuToggle = function(id){
225if($('#'+id).hasClass('mSlideMenuShow')){
226$('#'+id).removeClass('mSlideMenuShow');
227removeOverlay();
228return false;
229}else{
230var overlay = document.createElement('div');
231overlay.id = 'mSlideMenu_overlay';
232overlay.className = ' mSlideMenu_overlay';
233$('#'+id).addClass('mSlideMenuShow');
234//document.body.insertBefore(overlay,document.body.childNodes[0]);
235document.getElementById('mobileHeader').insertBefore(overlay,document.getElementById('addHeader'));
236$(".mSlideMenu_overlay").each(function(i,v){
237$(v).on('click touchend',function(){
238if($('#'+id).hasClass('mSlideMenuShow')){
239$('#'+id).removeClass('mSlideMenuShow');
240removeOverlay();
241return false;
242}
243});
244});
245$('body').css('overflow','hidden');
246$(document).on('scroll',function () {
247window.scrollTo(0,0);
248});
249var windowW = $(window).width();
250var windowH = $(window).height();
251overlay.style.width = windowW+'px';
252//overlay.style.height = windowH+'px';
253return false;
254}
255}
256var removeOverlay = function(){
257$('.mSlideMenu_overlay').each(function(i,v){
258$(v).remove();
259});
260$(document).off('scroll');
261$('body').css('overflow','auto');
262}
263function stopScroll(e){
264e.preventDefault();
265e.stopPropagation();
266return false;
267}
268})(jQuery);