https://www.telportus.com/upload/tpl/08/79/2169/template2169/js/app.js

1/*
2*构建SDAPP
3*/
4SDAPP = (function(){
5	function App(options){
6		this.O = options;
7		this.J = jQuery;
8		this.init();
9	}
10	return App;
11})();
12
13SDAPP.prototype.init = function(){
14	this.client();
15	this.plugin();
16	this.renew();
17}
18
19/**
20 * getClient
21 */
22SDAPP.prototype.client = function(){
23	return {
24		"width":this.J(window).width(),
25		"height":this.J(window).height()
26	};
27}
28
29/**
30 * resize
31 */
32SDAPP.prototype.renew = function(){
33	var _this = this;
34	_this.J(window).resize(function(event) {
35		_this.client();
36		window.console&&console.log(_this.client().width,_this.client().height);
37	});
38}
39
40/**
41 * plugin
42 */
43SDAPP.prototype.plugin = function(){
44	var _this = this;
45	// focus
46	this.O['focus']&&this.J("[data-focus]").sudyfocus(this.O['focus']);
47
48	// menu
49	
50	this.J(".main-nav-window").find("li").on("mouseenter",function(){
51		_this.J(this).children('.sub-menu').show();
52	}).on("mouseleave",function(){
53		_this.J(this).children('.sub-menu').hide();
54	});
55
56	var $aside = this.J("#wp-navi-aside");
57	if(this.O['menu']){
58		if(/slide/.test(this.O.menu['type'])){
59			this.J(".wp-navi").addClass('wp-navi-slide');
60			this.J(".navi-slide-head").on("click",function(){
61				_this.J(this).siblings().slideToggle(150);
62			});
63		}
64		if(/aside/.test(this.O.menu['type'])){
65			var $menus = [];
66			this.J("[data-nav-aside]").clone().each(function(index, el) {
67				var opt = _this.J.parseJSON(_this.J(el).attr("data-nav-aside").replace(/'/g, '"'));
68				$menus[opt.index] = _this.J('<div class="navi-aside-head"><h3 class="navi-aside-title">'+opt.title+'</h3></div>').add(el);
69			});;
70
71			$.each($menus, function() {
72				_this.J(this).appendTo(".navi-aside-wrap");
73			});
74
75			this.J(".navi-aside-toggle").addClass('navi-aside-toggle-show').on("click",function(){
76				$aside.addClass('wp-navi-aside-active');
77				_this.J("html").css({marginTop:0});
78				_this.J("body").addClass('navi-aside-page').css({width:_this.client().width,height:_this.client().height})
79				.stop().animate({marginLeft:216}, 250);
80				_this.J(".aside-inner", $aside).addClass('aside-inner-show').stop().animate({left:0}, 250);
81			});
82			this.J(".navi-aside-mask").on("click",function(event){
83				event.preventDefault();
84				_this.J("body").removeClass('navi-aside-page').stop().animate({marginLeft:0}, 250,function(){
85					_this.J("body").removeAttr('style');
86					$aside.removeClass('wp-navi-aside-active');
87					_this.J("html").removeAttr('style');
88				});
89				_this.J(".aside-inner", $aside).removeClass('aside-inner-show').stop().animate({left:-216}, 250);
90			});
91
92			this.J(".menu-switch-arrow").on("click",function(){
93				_this.J(this).toggleClass('menu-open-arrow').siblings(".sub-menu").slideToggle(250);
94			});
95		}
96	}
97
98	this.J(".column-head").on("click",function(event){
99		event.preventDefault();
100		_this.J(".column-body").slideToggle(150);
101	});
102
103	if(this.J(".column-item").length<1){
104		this.J(".column-switch").hide();
105		this.J(".column-head").unbind("click");
106	}
107
108	// small screen
109	if(this.client().width<768){
110		if(this.O['view']){
111			this.J(window).load(function() {
112
113				/* Act on the event */
114				var $images = _this.J(_this.O['view']['target']);
115				var imgs = [],uWidth , index, total = 0, current, wScroll;
116				_this.J.each($images, function(index, val) {
117					if(_this.J(val).width()>_this.O['view']['minSize']&&_this.J(val).height()>_this.O['view']['minSize']){
118						total++;
119						var url = _this.J(val).attr("src"),title = _this.J(val).attr("title")||"";
120						imgs.push({"url":url,"title":title});
121						_this.J(val).addClass('image-view').wrap('<em class="view-box"><i class="view-box-inner"></i></em>')
122						.parent().append('<a href="javascript:;" class="open-view" data-view-index="'+total+'"><i class="view-icon"></i></a>');
123						_this.J('#view-image-items').append('<li style="background-image:url('+url+')"></li>');
124					}
125				});
126				uWidth = total*_this.client().width;
127				_this.J('#view-image-items').width(uWidth).children().css({"width":_this.client().width,"height":_this.client().height});
128
129				function aniView(){

130					_this.J('#view-image-items').stop(true,false).animate({"left":-index*_this.client().width},300, function(){
131						current = index + 1;
132						_this.J("#view-current").html(current);
133						_this.J("#view-original-image").attr("href",imgs[index].url);
134					});
135				}
136
137				function viewImageInfo(){
138					_this.J("#view-current").html(current);
139					_this.J("#view-title").html(imgs[index].title);
140					_this.J("#view-original-image").attr("href",imgs[index].url);
141				}
142
143				_this.J(".open-view").on("click",function(event){
144					event.preventDefault();
145					_this.J("body").css({"height":_this.client().height,"overflow":"hidden"});
146					wScroll = _this.J(window).scrollTop();
147					current = parseInt(_this.J(this).attr("data-view-index"));
148					index = current - 1;
149					_this.J("#wp-view-page").show();
150					_this.J("#view-total").html(total);
151					_this.J('#view-image-items').css({"left":-index*_this.client().width});
152					viewImageInfo();
153
154				});
155
156				_this.J(window).resize(function(){
157					_this.J("body").css({"height":_this.client().height});
158					uWidth = total*_this.client().width;
159					_this.J('#view-image-items').css({"width":uWidth,"left":-index*_this.client().width}).children().css({"width":_this.client().width,"height":_this.client().height});
160				});
161
162				_this.J("#view-body").on("click",function(event){
163					event.preventDefault();
164					_this.J(this).toggleClass('hide-view-bar');
165					if(_this.J(this).hasClass('hide-view-bar')){
166						_this.J("#view-head").stop().animate({"top":-42}, 200);
167						_this.J("#view-foot").stop().animate({"bottom":-42}, 200);
168					}else{
169						_this.J("#view-head").stop().animate({"top":0}, 200);
170						_this.J("#view-foot").stop().animate({"bottom":0}, 200);
171					}
172				});
173
174				function aniView(){
175					_this.J('#view-image-items').stop(true,false).animate({"left":-index*_this.client().width},300, function(){
176						current = index + 1;
177						viewImageInfo();
178					});
179				}
180
181				_this.J("#view-body").sudyTouch({
182					"swipeLeft": function(){
183						index++;
184						if((total-1)<index)index = total-1;
185					},
186					"swipeRight":function(){
187						index--;
188						if(index<0)index=0;
189					},
190					"swipeEnd":function(){
191						aniView();
192					}
193				});
194				_this.J("#back-read-page").on("click",function(event){
195					event.preventDefault();
196					_this.J("body").css({"height":"","overflow":""});
197					_this.J("#wp-view-page").hide();
198					_this.J(window).scrollTop(wScroll);
199				});
200			});
201		}
202
203		// jumphandle
204		
205		this.J('<div id="jumphandle"><a id="gotop"></a><a id="gobot"></a></div>').appendTo('body');
206		this.J(window).scroll(function(event) {
207			/* Act on the event */
208			var scrolltop = _this.J(window).scrollTop();
209			if(scrolltop>200){
210				_this.J("#jumphandle").show();
211			}else{
212				_this.J("#jumphandle").hide();
213			}
214		});
215		this.J("#gotop").on("click",function(){
216			_this.J("body,html").stop().animate({scrollTop:0}, 500);
217		});
218		this.J("#gobot").on("click",function(){
219			_this.J("body,html").stop().animate({scrollTop:_this.J(document).height()}, 500);
220		});
221
222
223		//read model
224		
225		this.J('#read-options').on("click",function(e){
226			e.preventDefault();
227			_this.J("#read-setting").slideToggle(100);
228		});
229
230		this.J("#read-model").on("click",function(){
231			_this.J("html").toggleClass('night-model');
232			if(_this.J("html").hasClass('night-model')){
233				_this.J(this).html('\u767d\u5929\u6a21\u5f0f');
234			}else{
235				_this.J(this).html('\u591c\u665a\u6a21\u5f0f');
236			}
237		});
238
239		var fontSize = 16; // 初始字体大小
240		function setFontSize(){
241			_this.J(".read").removeClass('set-fz12 set-fz14 set-fz16 set-fz18 set-fz20 set-fz22').addClass('set-fz'+fontSize);
242		}
243		this.J("#larger-font").on("click",function(){
244			fontSize += 2;
245			if(fontSize>22)fontSize=22;
246			setFontSize();	
247		});
248		this.J("#smaller-font").on("click",function(){
249			fontSize -= 2;
250			if(fontSize<12)fontSize=12;
251			setFontSize();
252		});
253	}
254
255}