Skip to content

Commit 8e9e7d4

Browse files
shtirletsshtirlets
committed
first commit
1 parent 2f93c65 commit 8e9e7d4

14 files changed

+2756
-17
lines changed

‎lib/sliiide.min.js

+397
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
1+
(function ($) {
2+
3+
//get IE version if browser is IE
4+
var ie = (function detectIE() {
5+
var ua = window.navigator.userAgent;
6+
7+
var msie = ua.indexOf('MSIE ');
8+
if (msie > 0) {
9+
return parseInt(ua.substring(msie + 5, ua.indexOf('.', msie)), 10);
10+
}
11+
12+
var trident = ua.indexOf('Trident/');
13+
if (trident > 0) {
14+
var rv = ua.indexOf('rv:');
15+
return parseInt(ua.substring(rv + 3, ua.indexOf('.', rv)), 10);
16+
}
17+
18+
var edge = ua.indexOf('Edge/');
19+
if (edge > 0) {
20+
return parseInt(ua.substring(edge + 5, ua.indexOf('.', edge)), 10);
21+
}
22+
return false;
23+
})();
24+
25+
$.fn.sliiide = function(options) {
26+
27+
var settings = $.extend({
28+
toggle: "#sliiider-toggle",
29+
exit_selector: ".slider-exit",
30+
animation_duration: "0.5s",
31+
place: "right",
32+
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)",
33+
body_slide: true,
34+
no_scroll: false,
35+
auto_close: false
36+
}, options );
37+
38+
var newSize;
39+
var clicked = false;
40+
var $sliiider = $(this);
41+
var $toggle = $(settings.toggle);
42+
var $exit = $(settings.exit_selector);
43+
var $body = $('body');
44+
var bodySlideDistance;
45+
46+
var bodyResetProp = {
47+
transform: '',
48+
'overflow-x': '',
49+
transition: '',
50+
position: ''
51+
};
52+
53+
var sliiiderResetProp = {
54+
transform: '',
55+
transition: '',
56+
width: '',
57+
height: '',
58+
left: '',
59+
top:'',
60+
bottom:'',
61+
right:''
62+
};
63+
64+
var prepareProperties = {
65+
visibility: 'hidden',
66+
transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve,
67+
position: 'fixed'
68+
};
69+
70+
var bodyChildrenProp = {
71+
transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve
72+
};
73+
74+
var htmlProp = {
75+
'overflow-x': 'hidden'
76+
};
77+
78+
var bodySlidePrepare = {
79+
position: 'relative', // to make overflow-x hidden work with mobile browsers
80+
'overflow-x': 'hidden',
81+
};
82+
83+
84+
var bodySlideProp = {
85+
86+
setleft: function(distance) {
87+
this.left.activateAnimation.transform = 'translateX('+distance+'px)';
88+
this.left.deactivateAnimation.transform = 'translateX(0px)';
89+
},
90+
setright: function(distance) {
91+
this.right.activateAnimation.transform = 'translateX(-'+distance+'px)';
92+
this.right.deactivateAnimation.transform = 'translateX(0px)';
93+
},
94+
setbottom: function(distance) {
95+
this.bottom.activateAnimation.transform = 'translateY(-'+distance+'px)';
96+
this.bottom.deactivateAnimation.transform = 'translateY(0px)';
97+
},
98+
settop: function(distance) {
99+
this.top.activateAnimation.transform = 'translateY('+distance+'px)';
100+
this.top.deactivateAnimation.transform = 'translateY(0px)';
101+
},
102+
left: {
103+
activateAnimation: {transform:''},
104+
deactivateAnimation: {transform: ''}
105+
},
106+
right: {
107+
activateAnimation: {transform: ''},
108+
deactivateAnimation: {transform: ''}
109+
},
110+
top: {
111+
activateAnimation: {transform: ''},
112+
deactivateAnimation: {transform: ''}
113+
},
114+
bottom: {
115+
activateAnimation: {transform: ''},
116+
deactivateAnimation: {transform: ''}
117+
}
118+
};
119+
120+
var Prop = {
121+
122+
left: {
123+
properties: function() {
124+
var left = '-' + $sliiider.width() + 'px';
125+
return {top: '0', left: left};
126+
},
127+
activateAnimation: {transform: 'translateX(100%)'},
128+
deactivateAnimation: {transform: 'translateX(0)'},
129+
size: function (wHeight, wWidth) {
130+
return {height: wHeight};
131+
}
132+
},
133+
134+
right: {
135+
properties: function() {
136+
var right = '-' + $sliiider.width() + 'px';
137+
return {top: '0', right: right};
138+
},
139+
activateAnimation: {transform: 'translateX(-100%)'},
140+
deactivateAnimation: {transform: 'translateX(0)'},
141+
size: function (wHeight, wWidth) {
142+
return {height: wHeight};
143+
}
144+
145+
},
146+
147+
top: {
148+
properties: function() {
149+
var top = '-' + $sliiider.height() + 'px';
150+
return {left: '0', right:'0', top: top};
151+
},
152+
activateAnimation: {transform: 'translateY(100%)'},
153+
deactivateAnimation: {transform: 'translateY(0)'},
154+
size: function (wHeight, wWidth) {
155+
return {width: wWidth};
156+
}
157+
},
158+
159+
bottom: {
160+
properties: function() {
161+
var bottom = '-' + $sliiider.height() + 'px';
162+
return {left:0, right:0 , bottom: bottom};
163+
},
164+
activateAnimation: {transform: 'translateY(-100%)'},
165+
deactivateAnimation: {transform: 'translateY(0)'},
166+
size: function (wHeight, wWidth) {
167+
return {width: wWidth};
168+
}
169+
}
170+
};
171+
172+
var prefixCSS = function(cssProp) {
173+
$.each(cssProp, function(k, v) {
174+
if(k === 'transition')
175+
{ var trnsCSS = {};
176+
var trnsProp = v.split(' ',1)[0];
177+
var trnsAttr = v.split(' '); trnsAttr.shift(); trnsAttr = trnsAttr.join(' ');
178+
trnsCSS['-webkit-'+k] = '-webkit-' + trnsProp + ' ' + trnsAttr;
179+
trnsCSS['-ms-'+k] = '-ms-' + trnsProp + ' ' + trnsAttr;
180+
$.extend(cssProp, trnsCSS);
181+
}
182+
else if (k === 'transform')
183+
{
184+
var trnsfCSS = {};
185+
trnsfCSS['-webkit-'+k] = v;
186+
trnsfCSS['-ms-'+k] = v;
187+
}
188+
});
189+
190+
return cssProp;
191+
};
192+
193+
var siiize = function() {
194+
var windowSize = {};
195+
var scroll = getScrollBarWidth();
196+
windowSize.height = $(window).height();
197+
windowSize.width = $(window).width() + scroll;
198+
newSize = Prop[settings.place].size(windowSize.height, windowSize.width);
199+
$sliiider.css(newSize);
200+
$sliiider.css(prefixCSS(Prop[settings.place].properties()));
201+
setSlideDistance();
202+
};
203+
204+
var setSlideDistance = function() {
205+
if(settings.body_slide)
206+
{
207+
if(settings.place === 'right' || settings.place === 'left')
208+
{
209+
bodySlideDistance = $sliiider.width();
210+
}
211+
else
212+
{
213+
bodySlideDistance = $sliiider.height();
214+
}
215+
bodySlideProp['set'+settings.place](bodySlideDistance);
216+
}
217+
};
218+
219+
var prepare = function() {
220+
$sliiider.css(prefixCSS(prepareProperties));
221+
$sliiider.css(prefixCSS(Prop[settings.place].properties()));
222+
setSlideDistance();
223+
};
224+
225+
var getScrollBarWidth = function() {
226+
var inner = document.createElement('p');
227+
inner.style.width = "100%";
228+
inner.style.height = "200px";
229+
230+
var outer = document.createElement('div');
231+
outer.style.position = "absolute";
232+
outer.style.top = "0px";
233+
outer.style.left = "0px";
234+
outer.style.visibility = "hidden";
235+
outer.style.width = "200px";
236+
outer.style.height = "150px";
237+
outer.style.overflow = "hidden";
238+
outer.appendChild (inner);
239+
240+
document.body.appendChild (outer);
241+
var w1 = inner.offsetWidth;
242+
outer.style.overflow = 'scroll';
243+
var w2 = inner.offsetWidth;
244+
if (w1 === w2) { w2 = outer.clientWidth; }
245+
246+
document.body.removeChild (outer);
247+
248+
return (w1 - w2);
249+
};
250+
251+
var activate = function() {
252+
siiize(); //sets the size of the slider menu and the distance the body will travel on sliding
253+
$sliiider.css('visibility','visible');
254+
if(settings.body_slide)
255+
{
256+
$body.css(prefixCSS(bodySlidePrepare));
257+
$('html').css(htmlProp);
258+
$body.children().css(prefixCSS(bodyChildrenProp));
259+
$body.children().css(prefixCSS(bodySlideProp[settings.place].activateAnimation));
260+
if((ie !== false) && (ie <= 11))
261+
{
262+
$sliiider.css(prefixCSS(Prop[settings.place].activateAnimation));
263+
}
264+
265+
//dealing with the browser bug of inability to transform fixed elements
266+
267+
var windowHeight = $(window).height();
268+
var scrollTop = $(window).scrollTop();
269+
var sliiiderHeight = $sliiider.height();
270+
var sliiiderOffsetTop = $sliiider.offset().top;
271+
272+
// if((sliiiderOffsetTop !== scrollTop) && settings.place !== "bottom" && !(ie && ie <= 11 && settings.place ==="top"))
273+
// {
274+
// $sliiider.css('top', scrollTop);
275+
// }
276+
// if(((sliiiderOffsetTop !== scrollTop + windowHeight) && (settings.place === "bottom")))
277+
// {
278+
// $sliiider.css('top', scrollTop + windowHeight - sliiiderHeight).css('bottom','');
279+
// }
280+
}
281+
282+
else {
283+
$sliiider.css(prefixCSS(Prop[settings.place].activateAnimation));
284+
}
285+
286+
if(settings.no_scroll) {
287+
disable_scroll();
288+
}
289+
290+
clicked = true;
291+
};
292+
293+
var hideSlider = function(e) {
294+
$sliiider.css('visibility','hidden');
295+
$body.css(bodyResetProp);
296+
$('html').css(bodyResetProp);
297+
$body.unbind('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);
298+
prepare();
299+
};
300+
301+
function deactivate() {
302+
303+
$body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);
304+
305+
if(settings.body_slide) {
306+
$body.children().css(prefixCSS(bodySlideProp[settings.place].deactivateAnimation));
307+
if((ie !== false) && (ie <= 11))
308+
{$sliiider.css(prefixCSS(Prop[settings.place].deactivateAnimation));}
309+
}
310+
311+
else {
312+
$sliiider.css(prefixCSS(Prop[settings.place].deactivateAnimation));
313+
}
314+
315+
if(settings.no_scroll) {
316+
enable_scroll();
317+
}
318+
319+
clicked = false;
320+
}
321+
322+
siiize();
323+
prepare();
324+
$(window).resize(siiize);
325+
$sliiider.resize(siiize);
326+
327+
var handleToggle = function() {
328+
if (!clicked)
329+
{activate();}
330+
else
331+
{deactivate();}
332+
};
333+
334+
$toggle.click(handleToggle);
335+
if (settings.auto_close) {
336+
$sliiider.find('a').on('click', function() {deactivate();});
337+
}
338+
$exit.on('click', function() {deactivate();});
339+
340+
var deleteProp = function() {
341+
$body.css(bodyResetProp);
342+
$sliiider.css(sliiiderResetProp);
343+
$(window).off('resize', siiize);
344+
$toggle.off('click', handleToggle);
345+
};
346+
347+
348+
var menu = {
349+
reset: function(name) {
350+
$body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', deleteProp);
351+
deactivate();
352+
},
353+
deactivate: function() {deactivate();},
354+
activate: function() {activate();}
355+
};
356+
357+
return menu;
358+
};
359+
360+
//enable and disable scroll
361+
// left: 37, up: 38, right: 39, down: 40,
362+
// spacebar: 32, pageup: 33, pagedown: 34, end: 35, home: 36
363+
var keys = {37: 1, 38: 1, 39: 1, 40: 1};
364+
365+
function preventDefault(e) {
366+
e = e || window.event;
367+
if (e.preventDefault)
368+
e.preventDefault();
369+
e.returnValue = false;
370+
}
371+
372+
function preventDefaultForScrollKeys(e) {
373+
if (keys[e.keyCode]) {
374+
preventDefault(e);
375+
return false;
376+
}
377+
}
378+
379+
function disable_scroll() {
380+
if (window.addEventListener) // older FF
381+
window.addEventListener('DOMMouseScroll', preventDefault, false);
382+
window.onwheel = preventDefault; // modern standard
383+
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
384+
window.ontouchmove = preventDefault; // mobile
385+
document.onkeydown = preventDefaultForScrollKeys;
386+
}
387+
388+
function enable_scroll() {
389+
if (window.removeEventListener)
390+
window.removeEventListener('DOMMouseScroll', preventDefault, false);
391+
window.onmousewheel = document.onmousewheel = null;
392+
window.onwheel = null;
393+
window.ontouchmove = null;
394+
document.onkeydown = null;
395+
}
396+
397+
}(jQuery));

0 commit comments

Comments
 (0)