https://www.strikezon.com/new/jp/js/jquery.simplesidebar.js

1//Simple Sidebar v1.1.2 by DcDeiv https://github.com/dcdeiv
2// GPLv2 http://www.gnu.org/licenses/gpl-2.0-standalone.html
3(function( $ ) {
4	$.fn.simpleSidebar = function( options ) {
5		//declaring all global variables
6		var sbw, animationStart, animationReset, callbackA, callbackB,
7			//allowing user customisation
8			defaults  = {
9				settings: {
10					opener: undefined,
11					wrapper: undefined, //HTML tag is not safe. Please, use a container/wrapper div
12					ignore: undefined,
13					data: 'ssbplugin',
14					animation: {
15						duration: 500, //milliseconds (0.5s = 500ms)
16						easing: 'swing'
17					}
18				},
19				sidebar: {
20					align: undefined,
21					width: 350, //pixels
22					gap: 64, //pixels
23					closingLinks: 'a',
24					style: {
25						zIndex: 3000
26					}
27				},
28				mask: {
29					style: {
30						backgroundColor: 'black',
31						opacity: 0.5,
32						filter: 'Alpha(opacity=50)' //IE8 and earlier
33					}
34				}
35			},
36			config    = $.extend( true, defaults, options ),
37			$sidebar  = this,
38			$opener   = $( config.settings.opener ),
39			$wrapper  = $( config.settings.wrapper ),
40			$ignore   = $( config.settings.ignore ),
41			dataName  = config.settings.data,
42			duration  = config.settings.animation.duration,
43			easing    = config.settings.animation.easing,
44			defAlign  = config.sidebar.align,
45			sbMaxW    = config.sidebar.width,
46			gap       = config.sidebar.gap,
47			$links    = config.sidebar.closingLinks,
48			defStyle  = config.sidebar.style,
49			maskDef   = config.mask.style,
50			winMaxW   = sbMaxW + gap,
51			//selecting all fixed elements except the sidebar and the ignore elements
52			$fixedEl  = $( '*' )
53				.not( $ignore )
54				.not( $sidebar )
55				.filter(function() {
56					return $( this ).css( 'position' ) == 'fixed';
57				}),
58			$absolEl  = $( '*' )
59				.not( $ignore )
60				.filter(function() {
61					return $( this ).css( 'position' ) == 'absolute';
62				}),
63			//selecting all elements.
64			$elements = $fixedEl
65				.add( $absolEl )
66				.add( $sidebar )
67				.add( $wrapper )
68				.not( $ignore ),
69			w         = $( window ).width(),
70			MaskDef   = {
71				position: 'fixed',
72				top: -200,
73				right: -200,
74				left: -200,
75				bottom: -200,
76				zIndex: config.sidebar.style.zIndex - 1
77			},
78			maskStyle = $.extend( {},  maskDef, MaskDef ),
79			clicks    = 0,
80			//hiding overflow [callback(A/B)]
81			overflowTrue = function() {
82				$( 'body, html' ).css({
83					overflow: 'hidden'
84				});
85				
86				clicks = 0;
87			},
88			//adding overflow [callback(A/B)]
89			overflowFalse = function() {
90				$( 'body, html' ).css({
91					overflow: 'auto'
92				});
93				
94				clicks = 1;
95			};
96		
97		//adding default style to $sidebar
98		$sidebar
99			.css( defStyle )
100			//wrapping inner content to let it overflow
101			.wrapInner( '<div data-' + dataName + '="sub-wrapper"></div>' );
102			
103		var subWrapper = $sidebar.children().filter(function() {
104			return $( this ).data( dataName ) === 'sub-wrapper' ;
105		});
106		
107		subWrapper.css({
108			width: '100%',
109			height: '100%',
110			overflow: 'auto'
111		});
112			
113		//Appending to 'body' the mask-div and adding its style
114		$( 'body' ).append( '<div data-' + dataName + '="mask"></div>' );
115		
116		var maskDiv = $( 'body' ).children().filter(function(){
117			return $( this ).data( dataName ) === 'mask' ;
118		});
119		
120		maskDiv
121			.css( maskStyle )
122			.hide();
123		
124		//assigning value to sbw
125		if ( w < winMaxW ) {
126			sbw = w - gap;
127		} else {
128			sbw = sbMaxW;
129		}
130		
131		//testing config.sidebar.align
132		if( defAlign === undefined || defAlign === 'left' ) {	
133			$sidebar.css({
134				position: 'fixed',
135				top: 0,
136				bottom: 0,
137				left: 0,
138				width: sbw,
139				marginLeft: -sbw
140			});
141		} else {
142			$sidebar.css({
143				position: 'fixed',
144				top: 0,
145				right: 0,
146				bottom: 0,
147				width: sbw,
148				marginRight: -sbw
149			});
150		}
151		
152		$opener.click(function() {
153			var nsbw = $sidebar.width();
154			
155			if( defAlign === undefined || defAlign === 'left' ) {
156				animationStart = {
157					marginLeft: '+=' + nsbw,
158					marginRight: '-=' + nsbw
159				};
160			} else {
161				animationStart = {
162					marginRight: '+=' + nsbw,
163					marginLeft: '-=' + nsbw
164				};
165			}
166			
167			$elements.each(function() {
168				$( this ).animate( animationStart, {
169					duration: duration,
170					easing: easing,
171					complete: overflowTrue
172				});
173			});
174			
175			maskDiv.fadeIn();
176		});
177		
178		maskDiv.click(function() {
179			clicks++;
180			var nsbw = $sidebar.width();
181				countClicks = function( e ) {
182					return ( e % 2 === 0 ) ? true : false;
183				};
184			
185			if( defAlign === undefined || defAlign === 'left' ) {
186				animationStart = {
187					marginLeft: '+=' + nsbw,
188					marginRight: '-=' + nsbw
189				};
190				animationReset = {
191					marginRight: '+=' + nsbw,
192					marginLeft: '-=' + nsbw
193				};
194			} else {
195				animationStart = {
196					marginRight: '+=' + nsbw,
197					marginLeft: '-=' + nsbw
198				};
199				animationReset = {
200					marginLeft: '+=' + nsbw,
201					marginRight: '-=' + nsbw
202				};
203			}
204			
205			if ( false === countClicks ( clicks ) ) {
206				$elements.each(function() {
207					$( this ).animate( animationReset, {
208						duration: duration,
209						easing: easing,
210						complete: overflowFalse
211					});

212				});
213				
214				maskDiv.fadeOut();
215			} else if ( true === countClicks ( clicks ) ) {
216				$elements.each(function() {
217					$( this ).animate( animationStart, {
218						duration: duration,
219						easing: easing,
220						complete: overflowTrue
221					});
222				});
223				
224				maskDiv.fadeIn();
225			}
226		});
227		
228		$sidebar.on( 'click', $links, function() {
229			var nsbw = $sidebar.width();
230			
231			if( defAlign === undefined || defAlign === 'left' ) {
232				animationReset = {
233					marginRight: '+=' + nsbw,
234					marginLeft: '-=' + nsbw
235				};
236			} else {
237				animationReset = {
238					marginLeft: '+=' + nsbw,
239					marginRight: '-=' + nsbw
240				};
241			}
242			
243			$elements.each(function() {
244				$( this ).animate( animationReset, {
245					duration: duration,
246					easing: easing,
247					complete: overflowFalse
248				});
249				
250				maskDiv.fadeOut();
251			});
252			
253		});
254		
255		//Adding responsive to $sidebar
256		$( window ).resize(function() {
257			var rsbw, sbMar,
258				w = $( this ).width();
259				
260			if ( w < winMaxW ) {
261				rsbw = w - gap;
262			} else {
263				rsbw = sbMaxW;
264			}
265			
266			$sidebar.css({
267				width: rsbw
268			});
269			
270			//fixing $element position according to $sidebar new width (rsbw)
271			if ( defAlign === undefined || defAlign === 'left' ) {
272				sbMar = parseInt( $sidebar.css( 'margin-left' ) );
273				
274				if ( 0 > sbMar ) {
275					$sidebar.css({
276						marginLeft: -rsbw
277					});
278				} else {
279					$elements.not( $sidebar )
280						.css({
281							marginLeft: + rsbw,
282							marginRight: - rsbw
283						});
284				}
285			} else {
286				sbMar = parseInt( $sidebar.css( 'margin-right' ) );
287				
288				if ( 0 > sbMar ) {
289					$sidebar.css({
290						marginRight: -rsbw
291					});
292				} else {
293					$elements.not( $sidebar )
294						.css({
295							marginLeft: - rsbw,
296							marginRight: + rsbw
297						});
298				}
299			}
300		});
301		
302		return this;
303	};
304})( jQuery );