Skip to content

Commit af9cc5e

Browse files
ahmedradahmedrad
committed
adding the plugin
1 parent 426d6fe commit af9cc5e

File tree

1 file changed

+299
-0
lines changed

1 file changed

+299
-0
lines changed

‎sliiide.js‎

Lines changed: 299 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,299 @@
1+
(function ($) {
2+
3+
$.fn.sliiide = function(options) {
4+
5+
var settings = $.extend({
6+
toggle: "#sliiider-toggle",
7+
exit_selector: ".slider-exit",
8+
animation_duration: "0.5s",
9+
place: "right",
10+
animation_curve: "cubic-bezier(0.54, 0.01, 0.57, 1.03)",
11+
body_slide: true,
12+
no_scroll: true,
13+
}, options );
14+
15+
var newSize;
16+
var clicked = false;
17+
var $sliiider = $(this);
18+
var $toggle = $(settings.toggle);
19+
var $exit = $(settings.exit_selector);
20+
var $body = $('body');
21+
var bodySlideDistance;
22+
23+
var bodyResetProp = {
24+
transform: '',
25+
'overflow-x': '',
26+
'overflow-y': '',
27+
transition: '',
28+
};
29+
30+
var sliiiderResetProp = {
31+
transform: '',
32+
transition: '',
33+
width: '',
34+
height: '',
35+
left: '',
36+
top:'',
37+
bottom:'',
38+
right:''
39+
};
40+
41+
var prepareProperties = {
42+
visibility: 'hidden',
43+
transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve,
44+
position: 'fixed'
45+
};
46+
47+
var bodySlidePrepare = {
48+
transition: 'transform ' + settings.animation_duration + ' ' + settings.animation_curve,
49+
'overflow-x': 'hidden',
50+
'overflow-y': 'hidden'
51+
};
52+
53+
54+
var bodySlideProp = {
55+
56+
setleft: function(distance) {
57+
this.left.activateAnimation.transform = 'translateX('+distance+'px)';
58+
this.left.deactivateAnimation.transform = 'translateX(0px)';
59+
},
60+
setright: function(distance) {
61+
this.right.activateAnimation.transform = 'translateX(-'+distance+'px)';
62+
this.right.deactivateAnimation.transform = 'translateX(0px)';
63+
},
64+
setbottom: function(distance) {
65+
this.bottom.activateAnimation.transform = 'translateY(-'+distance+'px)';
66+
this.bottom.deactivateAnimation.transform = 'translateY(0px)';
67+
},
68+
settop: function(distance) {
69+
this.top.activateAnimation.transform = 'translateY('+distance+'px)';
70+
this.top.deactivateAnimation.transform = 'translateY(0px)';
71+
},
72+
left: {
73+
activateAnimation: {transform:''},
74+
deactivateAnimation: {transform: ''}
75+
},
76+
right: {
77+
activateAnimation: {transform: ''},
78+
deactivateAnimation: {transform: ''}
79+
},
80+
top: {
81+
activateAnimation: {transform: ''},
82+
deactivateAnimation: {transform: ''}
83+
},
84+
bottom: {
85+
activateAnimation: {transform: ''},
86+
deactivateAnimation: {transform: ''}
87+
}
88+
}
89+
90+
var Prop = {
91+
92+
left: {
93+
properties: {top: '0', left: '0', transform: 'translateX(-100%)'},
94+
activateAnimation: {transform: 'translateX(0)'},
95+
deactivateAnimation: {transform: 'translateX(-100%)'},
96+
size: function (wHeight, wWidth) {
97+
return {height: wHeight}
98+
}
99+
},
100+
101+
right: {
102+
properties: {top: '0', right: '0', transform: 'translateX(100%)'},
103+
activateAnimation: {transform: 'translateX(0)'},
104+
deactivateAnimation: {transform: 'translateX(100%)'},
105+
size: function (wHeight, wWidth) {
106+
return {height: wHeight}
107+
}
108+
109+
},
110+
111+
top: {
112+
properties: {top: '0', right: '0', left:'0', transform: 'translateY(-100%)'},
113+
activateAnimation: {transform: 'translateY(0)'},
114+
deactivateAnimation: {transform: 'translateY(-100%)'},
115+
size: function (wHeight, wWidth) {
116+
return {width: wWidth}
117+
}
118+
},
119+
120+
bottom: {
121+
properties: {bottom: '0', right: '0', left:'0', transform: 'translateY(100%)'},
122+
activateAnimation: {transform: 'translateY(0)'},
123+
deactivateAnimation: {transform: 'translateY(100%)'},
124+
size: function (wHeight, wWidth) {
125+
return {width: wWidth}
126+
}
127+
}
128+
}
129+
130+
var prefixCSS = function(cssProp) {
131+
$.each(cssProp, function(k, v) {
132+
if(k === 'transition')
133+
{ var trnsCSS = {};
134+
var trnsProp = v.split(' ',1)[0];
135+
var trnsAttr = v.split(' '); trnsAttr.shift(); trnsAttr = trnsAttr.join(' ');
136+
trnsCSS['-webkit-'+k] = '-webkit-' + trnsProp + ' ' + trnsAttr;
137+
trnsCSS['-ms-'+k] = '-ms-' + trnsProp + ' ' + trnsAttr;
138+
$.extend(cssProp, trnsCSS);
139+
}
140+
else if (k === 'transform')
141+
{
142+
var trnsfCSS = {};
143+
trnsfCSS['-webkit-'+k] = v;
144+
trnsfCSS['-ms-'+k] = v;
145+
}
146+
});
147+
148+
return cssProp;
149+
}
150+
151+
var siiize = function() {
152+
var windowSize = {};
153+
windowSize.height = $(window).height();
154+
windowSize.width = $(window).width();
155+
newSize = Prop[settings.place].size(windowSize.height, windowSize.width);
156+
$sliiider.css(newSize);
157+
setSlideDistance();
158+
}
159+
160+
var setSlideDistance = function() {
161+
if(settings.body_slide)
162+
{
163+
if(settings.place === 'right' || settings.place === 'left')
164+
{
165+
bodySlideDistance = $sliiider.width();
166+
}
167+
else
168+
{
169+
bodySlideDistance = $sliiider.height();
170+
}
171+
bodySlideProp['set'+settings.place](bodySlideDistance);
172+
}
173+
}
174+
175+
var prepare = function() {
176+
$sliiider.css(prefixCSS(prepareProperties));
177+
$sliiider.css(prefixCSS(Prop[settings.place]["properties"]));
178+
setSlideDistance();
179+
};
180+
181+
182+
var activate = function() {
183+
siiize();
184+
$sliiider.css('visibility','initial');
185+
if(settings.body_slide) {
186+
$body.css(prefixCSS(bodySlidePrepare));
187+
$body.css(prefixCSS(bodySlideProp[settings.place].activateAnimation));
188+
}
189+
190+
else {
191+
$sliiider.css(prefixCSS(Prop[settings.place]["activateAnimation"]));
192+
}
193+
194+
if(settings.no_scroll) {
195+
disable_scroll();
196+
}
197+
198+
clicked = true;
199+
}
200+
201+
var hideSlider = function(e) {
202+
$sliiider.css('visibility','hidden');
203+
$body.css(bodyResetProp);
204+
$body.unbind('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);
205+
}
206+
207+
function deactivate() {
208+
209+
$body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', hideSlider);
210+
211+
if(settings.body_slide) {
212+
$body.css(prefixCSS(bodySlideProp[settings.place].deactivateAnimation));
213+
}
214+
215+
else {
216+
$sliiider.css(prefixCSS(Prop[settings.place].deactivateAnimation));
217+
}
218+
219+
if(settings.no_scroll) {
220+
enable_scroll();
221+
}
222+
223+
clicked = false;
224+
}
225+
226+
siiize();
227+
prepare();
228+
$(window).resize(siiize);
229+
230+
var handleToggle = function() {
231+
if (!clicked)
232+
{activate();}
233+
else
234+
{deactivate();}
235+
}
236+
237+
$toggle.click(handleToggle);
238+
$sliiider.find('a').on('click', function() {deactivate()});
239+
$exit.on('click', function() {deactivate()});
240+
241+
var deleteProp = function() {
242+
$body.css(bodyResetProp);
243+
$sliiider.css(sliiiderResetProp);
244+
$(window).off('resize', siiize);
245+
$toggle.off('click', handleToggle);
246+
}
247+
248+
249+
var menu = {
250+
reset: function(name) {
251+
$body.one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', deleteProp);
252+
deactivate();
253+
// $body.unbind('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', deleteProp);
254+
},
255+
deactivate: function() {deactivate()},
256+
activate: function() {activate()}
257+
};
258+
259+
return menu;
260+
}
261+
262+
var keys = [37, 38, 39, 40];
263+
264+
function preventDefault(e) {
265+
e = e || window.event;
266+
if (e.preventDefault)
267+
e.preventDefault();
268+
e.returnValue = false;
269+
}
270+
271+
function keydown(e) {
272+
for (var i = keys.length; i--;) {
273+
if (e.keyCode === keys[i]) {
274+
preventDefault(e);
275+
return;
276+
}
277+
}
278+
}
279+
280+
function wheel(e) {
281+
preventDefault(e);
282+
}
283+
284+
function disable_scroll() {
285+
if (window.addEventListener) {
286+
window.addEventListener('DOMMouseScroll', wheel, false);
287+
}
288+
window.onmousewheel = document.onmousewheel = wheel;
289+
document.onkeydown = keydown;
290+
}
291+
292+
function enable_scroll() {
293+
if (window.removeEventListener) {
294+
window.removeEventListener('DOMMouseScroll', wheel, false);
295+
}
296+
window.onmousewheel = document.onmousewheel = document.onkeydown = null;
297+
}
298+
299+
}(jQuery));

0 commit comments

Comments
 (0)