/* * swiper scrollbar 2.1 * plugin for swiper 2.0+ * http://www.idangero.us/sliders/swiper/ * * copyright 2012-2013, vladimir kharlampidi * the idangero.us * http://www.idangero.us/ * * licensed under gpl & mit * * released on: june 9, 2013 */ swiper.prototype.plugins.scrollbar = function(swiper, params){ var enabled = params && params.container; if(!enabled) return; /*========================= default parameters ===========================*/ var defaults = { hide : true, draggable : true, snaponrelease: false } params = params || {}; for (var prop in defaults) { if (! (prop in params)) { params[prop] = defaults[prop] } } /*========================= container ===========================*/ if (!document.queryselectorall) { if (!window.jquery) return; } function $$(s) { if (document.queryselectorall) return document.queryselectorall(s) else return jquery(s) } if(!(params.container.nodetype)){ if ($$(params.container).length==0) return; } var container = (params.container.nodetype) ? params.container : $$(params.container)[0]; /*========================= default vars ===========================*/ var ish = swiper.params.mode=='horizontal', track = container, trackwidth, trackheight, divider, movedivider, dragwidth, dragheight; /*========================= define drag ===========================*/ var drag = document.createelement('div') drag.classname = 'swiper-scrollbar-drag'; if (params.draggable) drag.classname += ' swiper-scrollbar-cursor-drag'; track.appendchild(drag); if (params.hide) track.style.opacity=0; var te = swiper.touchevents /*========================= draggable ===========================*/ if (params.draggable) { var istouched = false; function dragstart(e){ istouched = true; if(e.preventdefault) e.preventdefault(); else e.returnvalue = false; setdragposition(e); cleartimeout(timeout); swiper.settransition(track,0) track.style.opacity = 1; swiper.setwrappertransition(100); swiper.settransition(drag,100) } function dragmove(e){ if(!istouched) return; if(e.preventdefault) e.preventdefault(); else e.returnvalue = false; setdragposition(e); swiper.setwrappertransition(0); swiper.settransition(track,0) swiper.settransition(drag,0) } function dragend(e) { istouched = false; if (params.hide) { cleartimeout(timeout) timeout = settimeout(function(){ track.style.opacity=0; swiper.settransition(track,400) },1000) } if (params.snaponrelease) { swiper.swipereset() } } var lestenel = swiper.support.touch ? track : document swiper.h.addeventlistener(track, te.touchstart, dragstart, false) swiper.h.addeventlistener(lestenel, te.touchmove, dragmove, false) swiper.h.addeventlistener(lestenel, te.touchend, dragend, false) function setdragposition(e){ var x = y = 0; var position; if (ish) { x = (e.pagex || e.clientx) - swiper.h.getoffset(track).left - dragwidth/2 if (x<0) x = 0; else if ( (x+dragwidth) > trackwidth) { x = trackwidth - dragwidth; } } else { y = (e.pagey||e.clienty) - swiper.h.getoffset(track).top - dragheight/2; if (y<0) y = 0; else if ( (y+dragheight) > trackheight) { y = trackheight - dragheight; } } //set drag position swiper.settranslate(drag,{x:x, y:y}) //wrapper offset var wrapx = -x/movedivider; var wrapy = -y/movedivider; swiper.setwrappertranslate(wrapx ,wrapy) } } function setscrollbars() { drag.style.width = '' drag.style.height = '' if (ish) { trackwidth = swiper.h.getwidth(track, true); divider = swiper.width/swiper.h.getwidth(swiper.wrapper); movedivider = divider*(trackwidth/swiper.width); dragwidth = trackwidth*divider; drag.style.width = dragwidth+'px'; } else { trackheight = swiper.h.getheight(track, true); divider = swiper.height/swiper.h.getheight(swiper.wrapper); movedivider = divider*(trackheight/swiper.height); dragheight = trackheight*divider; if (dragheight>trackheight) dragheight = trackheight drag.style.height = dragheight+'px'; } } var timeout; var hooks = { onfirstinit : function(args){ setscrollbars() }, oninit : function(args) { setscrollbars() }, ontouchmoveend : function(args) { if (params.hide) { cleartimeout(timeout) track.style.opacity=1; swiper.settransition(track,200) } }, ontouchend : function(args) { if (params.hide) { cleartimeout(timeout) timeout = settimeout(function(){ track.style.opacity=0; swiper.settransition(track,400) },1000) } }, onsetwrappertransform: function(pos){ if (ish) { var newleft = pos.x*movedivider; var newwidth = dragwidth; if (newleft > 0) { var diff = newleft; newleft = 0; newwidth = dragwidth-diff; } else if ( (-newleft+dragwidth) > trackwidth) { newwidth = trackwidth + newleft; } swiper.settranslate(drag,{x:-newleft}) drag.style.width = newwidth+'px'; } else { var newtop = pos.y*movedivider; var newheight = dragheight; if (newtop > 0) { var diff = newtop; newtop = 0; newheight = dragheight-diff; } else if ( (-newtop+dragheight) > trackheight) { newheight = trackheight + newtop; } swiper.settranslate(drag,{y:-newtop}) drag.style.height = newheight+'px'; } if (swiper.params.freemode && params.hide) { cleartimeout(timeout) track.style.opacity=1; timeout = settimeout(function(){ track.style.opacity=0; swiper.settransition(track,400) },1000) } }, onsetwrappertransition: function(args){ swiper.settransition(drag,args.duration) }, ondestroy: function(){ var lestenel = swiper.support.touch ? track : document swiper.h.removeeventlistener(track, te.touchstart, dragstart, false) swiper.h.removeeventlistener(lestenel, te.touchmove, dragmove, false) swiper.h.removeeventlistener(lestenel, te.touchend, dragend, false) } } return hooks; }