diff --git a/gui/.eslintrc.js b/gui/.eslintrc.js index eda065b5..bf509d78 100644 --- a/gui/.eslintrc.js +++ b/gui/.eslintrc.js @@ -60,8 +60,6 @@ module.exports = { "userLogin": true, "Keycloak": true, "slug": true, - "interact": true, - "velocity": true, "iziToast": true } }; diff --git a/gui/ember-cli-build.js b/gui/ember-cli-build.js index 4d7e36f4..7138ee7d 100644 --- a/gui/ember-cli-build.js +++ b/gui/ember-cli-build.js @@ -58,8 +58,6 @@ module.exports = function (defaults) { app.import('vendor/datetimepicker.min.js'); app.import('vendor/documize.js'); app.import('vendor/dropzone.js'); - app.import('vendor/hoverIntent.min.js'); - app.import('vendor/interact.min.js'); app.import('vendor/is.js'); app.import('vendor/iziToast.js'); app.import('vendor/keycloak.js'); @@ -67,15 +65,11 @@ module.exports = function (defaults) { app.import('vendor/md5.js'); app.import('vendor/moment.js'); app.import('vendor/mousetrap.js'); - app.import('vendor/overlay-scrollbars.js'); app.import('vendor/prism.js'); app.import('vendor/slug.js'); app.import('vendor/sortable.js'); app.import('vendor/table-editor.min.js'); app.import('vendor/underscore.js'); - app.import('vendor/velocity.js'); - app.import('vendor/velocity.ui.js'); - app.import('vendor/waypoints.js'); app.import('vendor/codemirror.js'); // boot-up files app.import('vendor/bootstrap.bundle.min.js'); diff --git a/gui/vendor/hoverIntent.min.js b/gui/vendor/hoverIntent.min.js deleted file mode 100644 index ac514103..00000000 --- a/gui/vendor/hoverIntent.min.js +++ /dev/null @@ -1,9 +0,0 @@ -/*! - * hoverIntent v1.9.0 // 2017.09.01 // jQuery v1.7.0+ - * http://briancherne.github.io/jquery-hoverIntent/ - * - * You may use hoverIntent under the terms of the MIT license. Basically that - * means you are free to use hoverIntent as long as this header is left intact. - * Copyright 2007-2017 Brian Cherne - */ -!function(factory){"use strict";"function"==typeof define&&define.amd?define(["jquery"],factory):jQuery&&!jQuery.fn.hoverIntent&&factory(jQuery)}(function($){"use strict";var cX,cY,_cfg={interval:100,sensitivity:6,timeout:0},INSTANCE_COUNT=0,track=function(ev){cX=ev.pageX,cY=ev.pageY},compare=function(ev,$el,s,cfg){if(Math.sqrt((s.pX-cX)*(s.pX-cX)+(s.pY-cY)*(s.pY-cY))6&&void 0!==arguments[6]&&arguments[6];r(this,t);var f=e.target,v=(f&&f.options||s).deltaSource,g=o(f,p,c),h="start"===l,m="end"===l,y=h?e.startCoords:e.curCoords,x=e.prevEvent;p=p||e.element;var b=i({},y.page),w=i({},y.client);b.x-=g.x,b.y-=g.y,w.x-=g.x,w.y-=g.y,this.ctrlKey=n.ctrlKey,this.altKey=n.altKey,this.shiftKey=n.shiftKey,this.metaKey=n.metaKey,this.button=n.button,this.buttons=n.buttons,this.target=p,this.currentTarget=p,this.relatedTarget=u||null,this.preEnd=d,this.type=c+(l||""),this.interaction=e,this.interactable=f,this.t0=h?e.downTimes[e.downTimes.length-1]:x.t0;var E={interaction:e,event:n,action:c,phase:l,element:p,related:u,page:b,client:w,coords:y,starting:h,ending:m,deltaSource:v,iEvent:this};a.fire("set-xy",E),m?(this.pageX=x.pageX,this.pageY=x.pageY,this.clientX=x.clientX,this.clientY=x.clientY):(this.pageX=b.x,this.pageY=b.y,this.clientX=w.x,this.clientY=w.y),this.x0=e.startCoords.page.x-g.x,this.y0=e.startCoords.page.y-g.y,this.clientX0=e.startCoords.client.x-g.x,this.clientY0=e.startCoords.client.y-g.y,a.fire("set-delta",E),this.timeStamp=y.timeStamp,this.dt=e.pointerDelta.timeStamp,this.duration=this.timeStamp-this.t0,this.speed=e.pointerDelta[v].speed,this.velocityX=e.pointerDelta[v].vx,this.velocityY=e.pointerDelta[v].vy,this.swipe=m||"inertiastart"===l?this.getSwipe():null,a.fire("new",E)}return t.prototype.getSwipe=function(){var t=this.interaction;if(t.prevEvent.speed<600||this.timeStamp-t.prevEvent.timeStamp>150)return null;var e=180*Math.atan2(t.prevEvent.velocityY,t.prevEvent.velocityX)/Math.PI;e<0&&(e+=360);var n=112.5<=e&&e<247.5,r=202.5<=e&&e<337.5,i=!n&&(292.5<=e||e<67.5);return{up:r,down:!r&&22.5<=e&&e<157.5,left:n,right:i,angle:e,speed:t.prevEvent.speed,velocity:{x:t.prevEvent.velocityX,y:t.prevEvent.velocityY}}},t.prototype.preventDefault=function(){},t.prototype.stopImmediatePropagation=function(){this.immediatePropagationStopped=this.propagationStopped=!0},t.prototype.stopPropagation=function(){this.propagationStopped=!0},t}();a.on("set-delta",function(t){var e=t.iEvent,n=t.interaction,r=t.starting,i=t.deltaSource,o=r?e:n.prevEvent;"client"===i?(e.dx=e.clientX-o.clientX,e.dy=e.clientY-o.clientY):(e.dx=e.pageX-o.pageX,e.dy=e.pageY-o.pageY)}),c.signals=a,e.exports=c},{"./defaultOptions":18,"./utils/Signals":34,"./utils/extend":40,"./utils/getOriginXY":41}],4:[function(t,e,n){"use strict";function r(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}var i=t("./utils/is"),o=t("./utils/events"),s=t("./utils/extend"),a=t("./actions/base"),c=t("./scope"),l=t("./Eventable"),p=t("./defaultOptions"),u=t("./utils/Signals").new(),d=t("./utils/domUtils"),f=d.getElementRect,v=d.nodeContains,g=d.trySelector,h=d.matchesSelector,m=t("./utils/window"),y=m.getWindow,x=t("./utils/arr"),b=x.contains,w=t("./utils/browser"),E=w.wheelEvent;c.interactables=[];var T=function(){function t(e,n){r(this,t),n=n||{},this.target=e,this.events=new l,this._context=n.context||c.document,this._win=y(g(e)?this._context:e),this._doc=this._win.document,u.fire("new",{target:e,options:n,interactable:this,win:this._win}),c.addDocument(this._doc,this._win),c.interactables.push(this),this.set(n)}return t.prototype.setOnEvents=function(t,e){var n="on"+t;return i.function(e.onstart)&&(this.events[n+"start"]=e.onstart),i.function(e.onmove)&&(this.events[n+"move"]=e.onmove),i.function(e.onend)&&(this.events[n+"end"]=e.onend),i.function(e.oninertiastart)&&(this.events[n+"inertiastart"]=e.oninertiastart),this},t.prototype.setPerAction=function(t,e){for(var n in e)n in p[t]&&(i.object(e[n])?(this.options[t][n]=s(this.options[t][n]||{},e[n]),i.object(p.perAction[n])&&"enabled"in p.perAction[n]&&(this.options[t][n].enabled=!1!==e[n].enabled)):i.bool(e[n])&&i.object(p.perAction[n])?this.options[t][n].enabled=e[n]:void 0!==e[n]&&(this.options[t][n]=e[n]))},t.prototype.getRect=function(t){return t=t||this.target,i.string(this.target)&&!i.element(t)&&(t=this._context.querySelector(this.target)),f(t)},t.prototype.rectChecker=function(t){return i.function(t)?(this.getRect=t,this):null===t?(delete this.options.getRect,this):this.getRect},t.prototype._backCompatOption=function(t,e){if(g(e)||i.object(e)){this.options[t]=e;for(var n=0;nt.pointerMoveTolerance);var a={pointer:e,pointerIndex:this.getPointerIndex(e),event:n,eventTarget:r,dx:o,dy:s,duplicate:i,interaction:this,interactingBeforeMove:this.interacting()};i||c.setCoordDeltas(this.pointerDelta,this.prevCoords,this.curCoords),f.fire("move",a),i||(this.interacting()&&this.doMove(a),this.pointerWasMoved&&c.copyCoords(this.prevCoords,this.curCoords))},t.prototype.doMove=function(t){t=c.extend({pointer:this.pointers[0],event:this.prevEvent,eventTarget:this._eventTarget,interaction:this},t||{}),f.fire("before-action-move",t),this._dontFireMove||f.fire("action-move",t),this._dontFireMove=!1},t.prototype.pointerUp=function(t,e,n,r){var i=this.getPointerIndex(t);f.fire(/cancel$/i.test(e.type)?"cancel":"up",{pointer:t,pointerIndex:i,event:e,eventTarget:n,curEventTarget:r,interaction:this}),this.simulation||this.end(e),this.pointerIsDown=!1,this.removePointer(t,e)},t.prototype.end=function(t){this._ending=!0,t=t||this.prevEvent,this.interacting()&&f.fire("action-end",{event:t,interaction:this}),this.stop(),this._ending=!1},t.prototype.currentAction=function(){return this._interacting?this.prepared.name:null},t.prototype.interacting=function(){return this._interacting},t.prototype.stop=function(){f.fire("stop",{interaction:this}),this._interacting&&(f.fire("stop-active",{interaction:this}),f.fire("stop-"+this.prepared.name,{interaction:this})),this.target=this.element=null,this._interacting=!1,this.prepared.name=this.prevEvent=null},t.prototype.getPointerIndex=function(t){return"mouse"===this.pointerType||"pen"===this.pointerType?0:this.pointerIds.indexOf(c.getPointerId(t))},t.prototype.updatePointer=function(t,e){var n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:e&&/(down|start)$/i.test(e.type),r=c.getPointerId(t),i=this.getPointerIndex(t);return-1===i&&(i=this.pointerIds.length,this.pointerIds[i]=r),n&&f.fire("update-pointer-down",{pointer:t,event:e,down:n,pointerId:r,pointerIndex:i,interaction:this}),this.pointers[i]=t,i},t.prototype.removePointer=function(t,e){var n=this.getPointerIndex(t);-1!==n&&(f.fire("remove-pointer",{pointer:t,event:e,pointerIndex:n,interaction:this}),this.pointers.splice(n,1),this.pointerIds.splice(n,1),this.downTargets.splice(n,1),this.downTimes.splice(n,1))},t.prototype._updateEventTargets=function(t,e){this._eventTarget=t,this._curEventTarget=e},t}(),y=0;yo.left&&l.xo.top&&l.y=o.left&&v<=o.right&&g>=o.top&&g<=o.bottom}if(f&&p.is.number(a)){s=Math.max(0,Math.min(o.right,f.right)-Math.max(o.left,f.left))*Math.max(0,Math.min(o.bottom,f.bottom)-Math.max(o.top,f.top))/(f.width*f.height)>=a}return this.options.drop.checker&&(s=this.options.drop.checker(t,e,s,this,i,n,r)),s},v.signals.on("unset",function(t){t.interactable.dropzone(!1)}),v.settingsMethods.push("dropChecker"),g.signals.on("new",function(t){t.dropTarget=null,t.dropElement=null,t.prevDropTarget=null,t.prevDropElement=null,t.dropEvents=null,t.activeDrops={dropzones:[],elements:[],rects:[]}}),g.signals.on("stop",function(t){var e=t.interaction;e.dropTarget=e.dropElement=e.prevDropTarget=e.prevDropElement=null}),d.dynamicDrop=function(t){return p.is.bool(t)?(y=t,d):y},p.merge(v.eventTypes,["dragenter","dragleave","dropactivate","dropdeactivate","dropmove","drop"]),l.methodDict.drop="dropzone",h.drop=m.defaults,e.exports=m},{"../InteractEvent":3,"../Interactable":4,"../Interaction":5,"../defaultOptions":18,"../interact":21,"../scope":33,"../utils":43,"./base":6}],9:[function(t,e,n){"use strict";var r=t("./base"),i=t("../utils"),o=t("../InteractEvent"),s=t("../Interactable"),a=t("../Interaction"),c=t("../defaultOptions"),l={defaults:{enabled:!1,origin:null,restrict:null},checker:function(t,e,n,r,i){return i.pointerIds.length>=2?{name:"gesture"}:null},getCursor:function(){return""}};o.signals.on("new",function(t){var e=t.iEvent,n=t.interaction;"gesturestart"===e.type&&(e.ds=0,n.gesture.startDistance=n.gesture.prevDistance=e.distance,n.gesture.startAngle=n.gesture.prevAngle=e.angle,n.gesture.scale=1)}),o.signals.on("new",function(t){var e=t.iEvent,n=t.interaction;"gesturemove"===e.type&&(e.ds=e.scale-n.gesture.scale,n.target.fire(e),n.gesture.prevAngle=e.angle,n.gesture.prevDistance=e.distance,e.scale===1/0||null===e.scale||void 0===e.scale||isNaN(e.scale)||(n.gesture.scale=e.scale))}),s.prototype.gesturable=function(t){return i.is.object(t)?(this.options.gesture.enabled=!1!==t.enabled,this.setPerAction("gesture",t),this.setOnEvents("gesture",t),this):i.is.bool(t)?(this.options.gesture.enabled=t,t||(this.ongesturestart=this.ongesturestart=this.ongestureend=null),this):this.options.gesture},o.signals.on("set-delta",function(t){var e=t.interaction,n=t.iEvent,r=t.action,s=t.event,a=t.starting,c=t.ending,l=t.deltaSource;if("gesture"===r){var p=e.pointers;n.touches=[p[0],p[1]],a?(n.distance=i.touchDistance(p,l),n.box=i.touchBBox(p),n.scale=1,n.ds=0,n.angle=i.touchAngle(p,void 0,l),n.da=0):c||s instanceof o?(n.distance=e.prevEvent.distance,n.box=e.prevEvent.box,n.scale=e.prevEvent.scale,n.ds=n.scale-1,n.angle=e.prevEvent.angle,n.da=n.angle-e.gesture.startAngle):(n.distance=i.touchDistance(p,l),n.box=i.touchBBox(p),n.scale=n.distance/e.gesture.startDistance,n.angle=i.touchAngle(p,e.gesture.prevAngle,l),n.ds=n.scale-e.gesture.prevScale,n.da=n.angle-e.gesture.prevAngle)}}),a.signals.on("new",function(t){t.gesture={start:{x:0,y:0},startDistance:0,prevDistance:0,distance:0,scale:1,startAngle:0,prevAngle:0}}),r.gesture=l,r.names.push("gesture"),i.merge(s.eventTypes,["gesturestart","gesturemove","gestureend"]),r.methodDict.gesture="gesturable",c.gesture=l.defaults,e.exports=l},{"../InteractEvent":3,"../Interactable":4,"../Interaction":5,"../defaultOptions":18,"../utils":43,"./base":6}],10:[function(t,e,n){"use strict";function r(t,e,n,r,i,s,a){if(!e)return!1;if(!0===e){var c=o.is.number(s.width)?s.width:s.right-s.left,l=o.is.number(s.height)?s.height:s.bottom-s.top;if(c<0&&("left"===t?t="right":"right"===t&&(t="left")),l<0&&("top"===t?t="bottom":"bottom"===t&&(t="top")),"left"===t)return n.x<(c>=0?s.left:s.right)+a;if("top"===t)return n.y<(l>=0?s.top:s.bottom)+a;if("right"===t)return n.x>(c>=0?s.right:s.left)-a;if("bottom"===t)return n.y>(l>=0?s.bottom:s.top)-a}return!!o.is.element(r)&&(o.is.element(e)?e===r:o.matchesUpTo(r,e,i))}var i=t("./base"),o=t("../utils"),s=t("../utils/browser"),a=t("../InteractEvent"),c=t("../Interactable"),l=t("../Interaction"),p=t("../defaultOptions"),u=s.supportsTouch||s.supportsPointerEvent?20:10,d={defaults:{enabled:!1,mouseButtons:null,origin:null,snap:null,restrict:null,inertia:null,autoScroll:null,square:!1,preserveAspectRatio:!1,axis:"xy",margin:NaN,edges:null,invert:"none"},checker:function(t,e,n,i,s,a){if(!a)return null;var c=o.extend({},s.curCoords.page),l=n.options;if(l.resize.enabled){var p=l.resize,d={left:!1,right:!1,top:!1,bottom:!1};if(o.is.object(p.edges)){for(var f in d)d[f]=r(f,p.edges[f],c,s._eventTarget,i,a,p.margin||u);if(d.left=d.left&&!d.right,d.top=d.top&&!d.bottom,d.left||d.right||d.top||d.bottom)return{name:"resize",edges:d}}else{var v="y"!==l.resize.axis&&c.x>a.right-u,g="x"!==l.resize.axis&&c.y>a.bottom-u;if(v||g)return{name:"resize",axes:(v?"x":"")+(g?"y":"")}}}return null},cursors:s.isIe9?{x:"e-resize",y:"s-resize",xy:"se-resize",top:"n-resize",left:"w-resize",bottom:"s-resize",right:"e-resize",topleft:"se-resize",bottomright:"se-resize",topright:"ne-resize",bottomleft:"ne-resize"}:{x:"ew-resize",y:"ns-resize",xy:"nwse-resize",top:"ns-resize",left:"ew-resize",bottom:"ns-resize",right:"ew-resize",topleft:"nwse-resize",bottomright:"nwse-resize",topright:"nesw-resize",bottomleft:"nesw-resize"},getCursor:function(t){if(t.axis)return d.cursors[t.name+t.axis];if(t.edges){for(var e="",n=["top","bottom","left","right"],r=0;r<4;r++)t.edges[n[r]]&&(e+=n[r]);return d.cursors[e]}}};a.signals.on("new",function(t){var e=t.iEvent,n=t.interaction;if("resizestart"===e.type&&n.prepared.edges){var r=n.target.getRect(n.element),i=n.target.options.resize;if(i.square||i.preserveAspectRatio){var s=o.extend({},n.prepared.edges);s.top=s.top||s.left&&!s.bottom,s.left=s.left||s.top&&!s.right,s.bottom=s.bottom||s.right&&!s.top,s.right=s.right||s.bottom&&!s.left,n.prepared._linkedEdges=s}else n.prepared._linkedEdges=null;i.preserveAspectRatio&&(n.resizeStartAspectRatio=r.width/r.height),n.resizeRects={start:r,current:o.extend({},r),inverted:o.extend({},r),previous:o.extend({},r),delta:{left:0,right:0,width:0,top:0,bottom:0,height:0}},e.rect=n.resizeRects.inverted,e.deltaRect=n.resizeRects.delta}}),a.signals.on("new",function(t){var e=t.iEvent,n=t.phase,r=t.interaction;if("move"===n&&r.prepared.edges){var i=r.target.options.resize,s=i.invert,a="reposition"===s||"negate"===s,c=r.prepared.edges,l=r.resizeRects.start,p=r.resizeRects.current,u=r.resizeRects.inverted,d=r.resizeRects.delta,f=o.extend(r.resizeRects.previous,u),v=c,g=e.dx,h=e.dy;if(i.preserveAspectRatio||i.square){var m=i.preserveAspectRatio?r.resizeStartAspectRatio:1;c=r.prepared._linkedEdges,v.left&&v.bottom||v.right&&v.top?h=-g/m:v.left||v.right?h=g/m:(v.top||v.bottom)&&(g=h*m)}if(c.top&&(p.top+=h),c.bottom&&(p.bottom+=h),c.left&&(p.left+=g),c.right&&(p.right+=g),a){if(o.extend(u,p),"reposition"===s){var y=void 0;u.top>u.bottom&&(y=u.top,u.top=u.bottom,u.bottom=y),u.left>u.right&&(y=u.left,u.left=u.right,u.right=y)}}else u.top=Math.min(p.top,l.bottom),u.bottom=Math.max(p.bottom,l.top),u.left=Math.min(p.left,l.right),u.right=Math.max(p.right,l.left);u.width=u.right-u.left,u.height=u.bottom-u.top;for(var x in u)d[x]=u[x]-f[x];e.edges=r.prepared.edges,e.rect=u,e.deltaRect=d}}),c.prototype.resizable=function(t){return o.is.object(t)?(this.options.resize.enabled=!1!==t.enabled,this.setPerAction("resize",t),this.setOnEvents("resize",t),/^x$|^y$|^xy$/.test(t.axis)?this.options.resize.axis=t.axis:null===t.axis&&(this.options.resize.axis=p.resize.axis),o.is.bool(t.preserveAspectRatio)?this.options.resize.preserveAspectRatio=t.preserveAspectRatio:o.is.bool(t.square)&&(this.options.resize.square=t.square),this):o.is.bool(t)?(this.options.resize.enabled=t,t||(this.onresizestart=this.onresizestart=this.onresizeend=null),this):this.options.resize},l.signals.on("new",function(t){t.resizeAxes="xy"}),a.signals.on("set-delta",function(t){var e=t.interaction,n=t.iEvent;"resize"===t.action&&e.resizeAxes&&(e.target.options.resize.square?("y"===e.resizeAxes?n.dx=n.dy:n.dy=n.dx,n.axes="xy"):(n.axes=e.resizeAxes,"x"===e.resizeAxes?n.dy=0:"y"===e.resizeAxes&&(n.dx=0)))}),i.resize=d,i.names.push("resize"), -o.merge(c.eventTypes,["resizestart","resizemove","resizeinertiastart","resizeinertiaresume","resizeend"]),i.methodDict.resize="resizable",p.resize=d.defaults,e.exports=d},{"../InteractEvent":3,"../Interactable":4,"../Interaction":5,"../defaultOptions":18,"../utils":43,"../utils/browser":36,"./base":6}],11:[function(t,e,n){"use strict";var r=t("./utils/raf"),i=t("./utils/window").getWindow,o=t("./utils/is"),s=t("./utils/domUtils"),a=t("./Interaction"),c=t("./defaultOptions"),l={defaults:{enabled:!1,container:null,margin:60,speed:300},interaction:null,i:null,x:0,y:0,isScrolling:!1,prevTime:0,start:function(t){l.isScrolling=!0,r.cancel(l.i),l.interaction=t,l.prevTime=(new Date).getTime(),l.i=r.request(l.scroll)},stop:function(){l.isScrolling=!1,r.cancel(l.i)},scroll:function(){var t=l.interaction.target.options[l.interaction.prepared.name].autoScroll,e=t.container||i(l.interaction.element),n=(new Date).getTime(),s=(n-l.prevTime)/1e3,a=t.speed*s;a>=1&&(o.window(e)?e.scrollBy(l.x*a,l.y*a):e&&(e.scrollLeft+=l.x*a,e.scrollTop+=l.y*a),l.prevTime=n),l.isScrolling&&(r.cancel(l.i),l.i=r.request(l.scroll))},check:function(t,e){var n=t.options;return n[e].autoScroll&&n[e].autoScroll.enabled},onInteractionMove:function(t){var e=t.interaction,n=t.pointer;if(e.interacting()&&l.check(e.target,e.prepared.name)){if(e.simulation)return void(l.x=l.y=0);var r=void 0,a=void 0,c=void 0,p=void 0,u=e.target.options[e.prepared.name].autoScroll,d=u.container||i(e.element);if(o.window(d))p=n.clientXd.innerWidth-l.margin,c=n.clientY>d.innerHeight-l.margin;else{var f=s.getElementClientRect(d);p=n.clientXf.right-l.margin,c=n.clientY>f.bottom-l.margin}l.x=a?1:p?-1:0,l.y=c?1:r?-1:0,l.isScrolling||(l.margin=u.margin,l.speed=u.speed,l.start(e))}}};a.signals.on("stop-active",function(){l.stop()}),a.signals.on("action-move",l.onInteractionMove),c.perAction.autoScroll=l.defaults,e.exports=l},{"./Interaction":5,"./defaultOptions":18,"./utils/domUtils":38,"./utils/is":45,"./utils/raf":49,"./utils/window":51}],12:[function(t,e,n){"use strict";var r=t("../Interactable"),i=t("../actions/base"),o=t("../utils/is"),s=t("../utils/domUtils"),a=t("../utils"),c=a.warnOnce;r.prototype.getAction=function(t,e,n,r){var i=this.defaultActionChecker(t,e,n,r);return this.options.actionChecker?this.options.actionChecker(t,e,i,this,r,n):i},r.prototype.ignoreFrom=c(function(t){return this._backCompatOption("ignoreFrom",t)},"Interactable.ignoreForm() has been deprecated. Use Interactble.draggable({ignoreFrom: newValue})."),r.prototype.allowFrom=c(function(t){return this._backCompatOption("allowFrom",t)},"Interactable.allowForm() has been deprecated. Use Interactble.draggable({allowFrom: newValue})."),r.prototype.testIgnore=function(t,e,n){return!(!t||!o.element(n))&&(o.string(t)?s.matchesUpTo(n,t,e):!!o.element(t)&&s.nodeContains(t,n))},r.prototype.testAllow=function(t,e,n){return!t||!!o.element(n)&&(o.string(t)?s.matchesUpTo(n,t,e):!!o.element(t)&&s.nodeContains(t,n))},r.prototype.testIgnoreAllow=function(t,e,n){return!this.testIgnore(t.ignoreFrom,e,n)&&this.testAllow(t.allowFrom,e,n)},r.prototype.actionChecker=function(t){return o.function(t)?(this.options.actionChecker=t,this):null===t?(delete this.options.actionChecker,this):this.options.actionChecker},r.prototype.styleCursor=function(t){return o.bool(t)?(this.options.styleCursor=t,this):null===t?(delete this.options.styleCursor,this):this.options.styleCursor},r.prototype.defaultActionChecker=function(t,e,n,r){for(var o=this.getRect(r),s=e.buttons||{0:1,1:4,3:8,4:16}[e.button],a=null,c=0;c=h.maxInteractions)return!1;if(u.target===t){if((a+=d===n.name|0)>=i)return!1;if(u.element===e&&(c++,d!==n.name||c>=o))return!1}}}return h.maxInteractions>0}}var c=t("../interact"),l=t("../Interactable"),p=t("../Interaction"),u=t("../actions/base"),d=t("../defaultOptions"),f=t("../scope"),v=t("../utils"),g=t("../utils/Signals").new();t("./InteractableMethods");var h={signals:g,withinInteractionLimit:a,maxInteractions:1/0,defaults:{perAction:{manualStart:!1,max:1/0,maxPerElement:1,allowFrom:null,ignoreFrom:null,mouseButtons:1}},setActionDefaults:function(t){v.extend(t.defaults,h.defaults.perAction)},validateAction:r};p.signals.on("down",function(t){var e=t.interaction,n=t.pointer,r=t.event,i=t.eventTarget;if(!e.interacting()){s(e,o(e,n,r,i))}}),p.signals.on("move",function(t){var e=t.interaction,n=t.pointer,r=t.event,i=t.eventTarget;if("mouse"===e.pointerType&&!e.pointerIsDown&&!e.interacting()){s(e,o(e,n,r,i))}}),p.signals.on("move",function(t){var e=t.interaction,n=t.event;if(e.pointerIsDown&&!e.interacting()&&e.pointerWasMoved&&e.prepared.name){g.fire("before-start",t);var r=e.target;e.prepared.name&&r&&(r.options[e.prepared.name].manualStart||!a(r,e.element,e.prepared)?e.stop(n):e.start(e.prepared,r,e.element))}}),p.signals.on("stop",function(t){var e=t.interaction,n=e.target;n&&n.options.styleCursor&&(n._doc.documentElement.style.cursor="")}),c.maxInteractions=function(t){return v.is.number(t)?(h.maxInteractions=t,c):h.maxInteractions},l.settingsMethods.push("styleCursor"),l.settingsMethods.push("actionChecker"),l.settingsMethods.push("ignoreFrom"),l.settingsMethods.push("allowFrom"),d.base.actionChecker=null,d.base.styleCursor=!0,v.extend(d.perAction,h.defaults.perAction),e.exports=h},{"../Interactable":4,"../Interaction":5,"../actions/base":6,"../defaultOptions":18,"../interact":21,"../scope":33,"../utils":43,"../utils/Signals":34,"./InteractableMethods":12}],14:[function(t,e,n){"use strict";function r(t,e){if(!e)return!1;var n=e.options.drag.startAxis;return"xy"===t||"xy"===n||n===t}var i=t("./base"),o=t("../scope"),s=t("../utils/is"),a=t("../utils/domUtils"),c=a.parentNode;i.setActionDefaults(t("../actions/drag")),i.signals.on("before-start",function(t){var e=t.interaction,n=t.eventTarget,a=t.dx,l=t.dy;if("drag"===e.prepared.name){var p=Math.abs(a),u=Math.abs(l),d=e.target.options.drag,f=d.startAxis,v=p>u?"x":p0&&(e.autoStartHoldTimer=setTimeout(function(){e.start(e.prepared,e.target,e.element)},n))}),o.signals.on("move",function(t){var e=t.interaction,n=t.duplicate;e.pointerWasMoved&&!n&&clearTimeout(e.autoStartHoldTimer)}),i.signals.on("before-start",function(t){var e=t.interaction;r(e)>0&&(e.prepared.name=null)}),e.exports={getHoldDuration:r}},{"../Interaction":5,"./base":13}],17:[function(t,e,n){"use strict";t("./base").setActionDefaults(t("../actions/resize"))},{"../actions/resize":10,"./base":13}],18:[function(t,e,n){"use strict";e.exports={base:{accept:null,preventDefault:"auto",deltaSource:"page"},perAction:{origin:{x:0,y:0},inertia:{enabled:!1,resistance:10,minSpeed:100,endSpeed:10,allowResume:!0,smoothEndDuration:300}}}},{}],19:[function(t,e,n){"use strict";t("./inertia"),t("./modifiers/snap"),t("./modifiers/restrict"),t("./pointerEvents/base"),t("./pointerEvents/holdRepeat"),t("./pointerEvents/interactableTargets"),t("./autoStart/hold"),t("./actions/gesture"),t("./actions/resize"),t("./actions/drag"),t("./actions/drop"),t("./modifiers/snapSize"),t("./modifiers/restrictEdges"),t("./modifiers/restrictSize"),t("./autoStart/gesture"),t("./autoStart/resize"),t("./autoStart/drag"),t("./interactablePreventDefault.js"),t("./autoScroll"),e.exports=t("./interact")},{"./actions/drag":7,"./actions/drop":8,"./actions/gesture":9,"./actions/resize":10,"./autoScroll":11,"./autoStart/drag":14,"./autoStart/gesture":15,"./autoStart/hold":16,"./autoStart/resize":17,"./inertia":20,"./interact":21,"./interactablePreventDefault.js":22,"./modifiers/restrict":24,"./modifiers/restrictEdges":25,"./modifiers/restrictSize":26,"./modifiers/snap":27,"./modifiers/snapSize":28,"./pointerEvents/base":30,"./pointerEvents/holdRepeat":31,"./pointerEvents/interactableTargets":32}],20:[function(t,e,n){"use strict";function r(t,e){var n=t.target.options[t.prepared.name].inertia,r=n.resistance,i=-Math.log(n.endSpeed/e.v0)/r;e.x0=t.prevEvent.pageX,e.y0=t.prevEvent.pageY,e.t0=e.startEvent.timeStamp/1e3,e.sx=e.sy=0,e.modifiedXe=e.xe=(e.vx0-i)/r,e.modifiedYe=e.ye=(e.vy0-i)/r,e.te=i,e.lambda_v0=r/e.v0,e.one_ve_v0=1-n.endSpeed/e.v0}function i(){s(this),p.setCoordDeltas(this.pointerDelta,this.prevCoords,this.curCoords);var t=this.inertiaStatus,e=this.target.options[this.prepared.name].inertia,n=e.resistance,r=(new Date).getTime()/1e3-t.t0;if(rc.minSpeed&&g>c.endSpeed,b={interaction:e,pageCoords:v,statuses:f,preEnd:!0,requireEndOnly:!0};y&&!x&&(l.resetStatuses(f),m=l.setAll(b),m.shouldMove&&m.locked&&(h=!0)),(x||h)&&(p.copyCoords(i.upCoords,e.curCoords),e.pointers[0]=i.startEvent=new a(e,n,e.prepared.name,"inertiastart",e.element),i.t0=d,i.active=!0,i.allowResume=c.allowResume,e.simulation=i,o.fire(i.startEvent),x?(i.vx0=e.pointerDelta.client.vx,i.vy0=e.pointerDelta.client.vy,i.v0=g,r(e,i),p.extend(v,e.curCoords.page),v.x+=i.xe,v.y+=i.ye,l.resetStatuses(f),m=l.setAll(b),i.modifiedXe+=m.dx,i.modifiedYe+=m.dy,i.i=u.request(e.boundInertiaFrame)):(i.smoothEnd=!0,i.xe=m.dx,i.ye=m.dy,i.sx=i.sy=0,i.i=u.request(e.boundSmoothEndFrame)))}}),c.signals.on("stop-active",function(t){var e=t.interaction,n=e.inertiaStatus;n.active&&(u.cancel(n.i),n.active=!1,e.simulation=null)})},{"./InteractEvent":3,"./Interaction":5,"./modifiers/base":23,"./utils":43,"./utils/raf":49}],21:[function(t,e,n){"use strict";function r(t,e){var n=a.interactables.get(t,e);return n||(n=new c(t,e),n.events.global=p),n}var i=t("./utils/browser"),o=t("./utils/events"),s=t("./utils"),a=t("./scope"),c=t("./Interactable"),l=t("./Interaction"),p={};r.isSet=function(t,e){return-1!==a.interactables.indexOfElement(t,e&&e.context)},r.on=function(t,e,n){if(s.is.string(t)&&-1!==t.search(" ")&&(t=t.trim().split(/ +/)),s.is.array(t)){for(var i=0;i=0;e--)a.interactions[e].stop(t);return r},r.pointerMoveTolerance=function(t){return s.is.number(t)?(l.pointerMoveTolerance=t,r):l.pointerMoveTolerance},r.addDocument=a.addDocument,r.removeDocument=a.removeDocument,a.interact=r,e.exports=r},{"./Interactable":4,"./Interaction":5,"./scope":33,"./utils":43,"./utils/browser":36,"./utils/events":39}],22:[function(t,e,n){"use strict";function r(t){var e=t.interaction,n=t.event;e.target&&e.target.checkAndPreventDefault(n)}var i=t("./Interactable"),o=t("./Interaction"),s=t("./scope"),a=t("./utils/is"),c=t("./utils/events"),l=t("./utils/browser"),p=t("./utils/domUtils"),u=p.nodeContains,d=p.matchesSelector;i.prototype.preventDefault=function(t){return/^(always|never|auto)$/.test(t)?(this.options.preventDefault=t,this):a.bool(t)?(this.options.preventDefault=t?"always":"never",this):this.options.preventDefault},i.prototype.checkAndPreventDefault=function(t){var e=this.options.preventDefault;if("never"!==e)return"always"===e?void t.preventDefault():void(c.supportsPassive&&/^touch(start|move)$/.test(t.type)&&!l.isIOS||/^(mouse|pointer|touch)*(down|start)/i.test(t.type)||a.element(t.target)&&d(t.target,"input,select,textarea,[contenteditable=true],[contenteditable=true] *")||t.preventDefault())};for(var f=["down","move","up","cancel"],v=0;v=0&&(d.selectors[f]!==t||d.contexts[f]!==e);f--);-1===f&&(f=d.selectors.length,d.selectors.push(t),d.contexts.push(e),d.listeners.push([])),d.listeners[f].push([i,!!s.capture,s.passive])}function s(t,e,n,r,o){var s=p(o),l=w[n],u=!1,d=void 0;if(l)for(d=l.selectors.length-1;d>=0;d--)if(l.selectors[d]===t&&l.contexts[d]===e){for(var f=l.listeners[d],v=f.length-1;v>=0;v--){var g=f[v],h=g[0],m=g[1],y=g[2];if(h===r&&m===!!s.capture&&y===s.passive){f.splice(v,1),f.length||(l.selectors.splice(d,1),l.contexts.splice(d,1),l.listeners.splice(d,1),i(e,n,a),i(e,n,c,!0),l.selectors.length||(w[n]=null)),u=!0;break}}if(u)break}}function a(t,e){var n=p(e),r={},i=w[t.type],o=f.getEventTargets(t),s=o[0],a=s;for(v(r,t),r.originalEvent=t,r.preventDefault=l;u.element(a);){for(var c=0;c=2)continue;if(!o.interacting()&&e===o.pointerType)return o}return null}};e.exports=o},{"../scope":33,"./index":43}],45:[function(t,e,n){"use strict";var r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},i=t("./window"),o=t("./isWindow"),s={array:function(){},window:function(t){return t===i.window||o(t)},docFrag:function(t){return s.object(t)&&11===t.nodeType},object:function(t){return!!t&&"object"===(void 0===t?"undefined":r(t))},function:function(t){return"function"==typeof t},number:function(t){return"number"==typeof t},bool:function(t){return"boolean"==typeof t},string:function(t){return"string"==typeof t},element:function(t){if(!t||"object"!==(void 0===t?"undefined":r(t)))return!1;var e=i.getWindow(t)||i.window;return/object|function/.test(r(e.Element))?t instanceof e.Element:1===t.nodeType&&"string"==typeof t.nodeName}};s.array=function(t){return s.object(t)&&void 0!==t.length&&s.function(t.splice)},e.exports=s},{"./isWindow":46,"./window":51}],46:[function(t,e,n){"use strict";e.exports=function(t){return!(!t||!t.Window)&&t instanceof t.Window}},{}],47:[function(t,e,n){"use strict";function r(t,n){for(var r in n){var i=e.exports.prefixedPropREs,o=!1;for(var s in i)if(0===r.indexOf(s)&&i[s].test(r)){o=!0;break}o||"function"==typeof n[r]||(t[r]=n[r])}return t}r.prefixedPropREs={webkit:/(Movement[XY]|Radius[XY]|RotationAngle|Force)$/},e.exports=r},{}],48:[function(t,e,n){"use strict";var r=t("./hypot"),i=t("./browser"),o=t("./domObjects"),s=t("./domUtils"),a=t("./domObjects"),c=t("./is"),l=t("./pointerExtend"),p={copyCoords:function(t,e){t.page=t.page||{},t.page.x=e.page.x,t.page.y=e.page.y,t.client=t.client||{},t.client.x=e.client.x,t.client.y=e.client.y,t.timeStamp=e.timeStamp},setCoordDeltas:function(t,e,n){t.page.x=n.page.x-e.page.x,t.page.y=n.page.y-e.page.y,t.client.x=n.client.x-e.client.x,t.client.y=n.client.y-e.client.y,t.timeStamp=n.timeStamp-e.timeStamp;var i=Math.max(t.timeStamp/1e3,.001);t.page.speed=r(t.page.x,t.page.y)/i,t.page.vx=t.page.x/i,t.page.vy=t.page.y/i,t.client.speed=r(t.client.x,t.page.y)/i,t.client.vx=t.client.x/i,t.client.vy=t.client.y/i},isNativePointer:function(t){return t instanceof o.Event||t instanceof o.Touch},getXY:function(t,e,n){return n=n||{},t=t||"page",n.x=e[t+"X"],n.y=e[t+"Y"],n},getPageXY:function(t,e){return e=e||{},i.isOperaMobile&&p.isNativePointer(t)?(p.getXY("screen",t,e),e.x+=window.scrollX,e.y+=window.scrollY):p.getXY("page",t,e),e},getClientXY:function(t,e){return e=e||{},i.isOperaMobile&&p.isNativePointer(t)?p.getXY("screen",t,e):p.getXY("client",t,e),e},getPointerId:function(t){return c.number(t.pointerId)?t.pointerId:t.identifier},setCoords:function(t,e,n){var r=e.length>1?p.pointerAverage(e):e[0],i={};p.getPageXY(r,i),t.page.x=i.x,t.page.y=i.y,p.getClientXY(r,i),t.client.x=i.x,t.client.y=i.y,t.timeStamp=c.number(n)?n:(new Date).getTime()},pointerExtend:l,getTouchPair:function(t){var e=[];return c.array(t)?(e[0]=t[0],e[1]=t[1]):"touchend"===t.type?1===t.touches.length?(e[0]=t.touches[0],e[1]=t.changedTouches[0]):0===t.touches.length&&(e[0]=t.changedTouches[0],e[1]=t.changedTouches[1]):(e[0]=t.touches[0],e[1]=t.touches[1]),e},pointerAverage:function(t){for(var e={pageX:0,pageY:0,clientX:0,clientY:0,screenX:0,screenY:0},n=0;n1){var e=p.getTouchPair(t),n=Math.min(e[0].pageX,e[1].pageX),r=Math.min(e[0].pageY,e[1].pageY);return{x:n,y:r,left:n,top:r,width:Math.max(e[0].pageX,e[1].pageX)-n,height:Math.max(e[0].pageY,e[1].pageY)-r}}},touchDistance:function(t,e){var n=e+"X",i=e+"Y",o=p.getTouchPair(t),s=o[0][n]-o[1][n],a=o[0][i]-o[1][i];return r(s,a)},touchAngle:function(t,e,n){var r=n+"X",i=n+"Y",o=p.getTouchPair(t),s=o[1][r]-o[0][r],a=o[1][i]-o[0][i];return 180*Math.atan2(a,s)/Math.PI},getPointerType:function(t){return c.string(t.pointerType)?t.pointerType:c.number(t.pointerType)?[void 0,void 0,"touch","pen","mouse"][t.pointerType]:/touch/.test(t.type)||t instanceof a.Touch?"touch":"mouse"},getEventTargets:function(t){var e=c.function(t.composedPath)?t.composedPath():t.path;return[s.getActualElement(e?e[0]:t.target),s.getActualElement(t.currentTarget)]}};e.exports=p},{"./browser":36,"./domObjects":37,"./domUtils":38,"./hypot":42,"./is":45,"./pointerExtend":47}],49:[function(t,e,n){"use strict";for(var r=t("./window"),i=r.window,o=["ms","moz","webkit","o"],s=0,a=void 0,c=void 0,l=0;l -1) { - delete target[_instancePropertyString]; - _targets.splice(index, 1); - } - } - - /** - * Checks if the target element has a registered instance. - * @param target The target element. - * @returns {boolean} True if the target element is already registered, false otherwise. - */ - function targetHasRegisteredInstance(target) { - return getRegisteredInstanceFromTarget(target) !== undefined; - } - - /** - * Gets the registered instance of the given element. - * @param target The target element. - * @returns {*} The registered instance of the target or undefined if there isn't any. - */ - function getRegisteredInstanceFromTarget(target) { - var index = compatibility.inA(target, _targets); - if (index > -1) - return _targets[index][_instancePropertyString]; - } - - return { - all : function() { - return _targets; - }, - add : registerInstanceToTarget, - rem : unregisterInstanceFromTarget, - has : targetHasRegisteredInstance, - get : getRegisteredInstanceFromTarget - }; - })(COMPATIBILITY); - var PLUGIN = (function(compatibility, instances, helper) { - var _pluginsGlobals; - var _pluginsAutoUpdateLoop; - var _pluginsOptions = (function() { - var possibleTemplateTypes = [ - TYPES.b, //boolean - TYPES.n, //number - TYPES.s, //string - TYPES.a, //array - TYPES.o, //object - TYPES.f, //function - TYPES.z //null - ]; - var restrictedStringsSplit = " "; - var restrictedStringsPossibilitiesSplit = ":"; - var classNameAllowedValues = [TYPES.z, TYPES.s]; - var booleanAllowedValues = TYPES.b; - var numberAllowedValues = TYPES.n; - var booleanNullAllowedValues = [TYPES.z, booleanAllowedValues]; - var callbackAllowedValues = [TYPES.z, TYPES.f]; - var resizeAllowedValues = 'n:none b:both h:horizontal v:vertical'; - var overflowBehaviorAllowedValues = 'v-h:visible-hidden v-s:visible-scroll s:scroll h:hidden'; - var scrollbarsVisibilityAllowedValues = 'v:visible h:hidden a:auto'; - var scrollbarsAutoHideAllowedValues = 'n:never s:scroll l:leave m:move'; - var optionsDefaultsAndTemplate = { - className: ['os-theme-dark', classNameAllowedValues], //null || string - resize: ['none', resizeAllowedValues], //none || both || horizontal || vertical || n || b || h || v - sizeAutoCapable: [true, booleanAllowedValues], //true || false - clipAlways: [true, booleanAllowedValues], //true || false - normalizeRTL: [true, booleanAllowedValues], //true || false - paddingAbsolute: [false, booleanAllowedValues], //true || false - autoUpdate: [null, booleanNullAllowedValues], //true || false || null - autoUpdateInterval: [33, numberAllowedValues], //number - nativeScrollbarsOverlaid: { - showNativeScrollbars: [false, booleanAllowedValues], //true || false - initialize: [true, booleanAllowedValues] //true || false - }, - overflowBehavior: { - x: ['scroll', overflowBehaviorAllowedValues], //visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s - y: ['scroll', overflowBehaviorAllowedValues] //visible-hidden || visible-scroll || hidden || scroll || v-h || v-s || h || s - }, - scrollbars: { - visibility: ['auto', scrollbarsVisibilityAllowedValues], //visible || hidden || auto || v || h || a - autoHide: ['never', scrollbarsAutoHideAllowedValues], //never || scroll || leave || move || n || s || l || m - autoHideDelay: [800, numberAllowedValues], //number - dragScrolling: [true, booleanAllowedValues], //true || false - clickScrolling: [false, booleanAllowedValues], //true || false - touchSupport: [true, booleanAllowedValues] //true || false - }, - textarea: { - dynWidth: [false, booleanAllowedValues], //true || false - dynHeight: [false, booleanAllowedValues] //true || false - }, - callbacks: { - onInitialized: [null, callbackAllowedValues], //null || function - onInitializationWithdrawn: [null, callbackAllowedValues], //null || function - onDestroyed: [null, callbackAllowedValues], //null || function - onScrollStart: [null, callbackAllowedValues], //null || function - onScroll: [null, callbackAllowedValues], //null || function - onScrollStop: [null, callbackAllowedValues], //null || function - onOverflowChanged: [null, callbackAllowedValues], //null || function - onOverflowAmountChanged: [null, callbackAllowedValues], //null || function - onDirectionChanged: [null, callbackAllowedValues], //null || function - onContentSizeChanged: [null, callbackAllowedValues], //null || function - onHostSizeChanged: [null, callbackAllowedValues], //null || function - onUpdated: [null, callbackAllowedValues] //null || function - } - //extensions : [{ }, TYPES.o] - }; - var convert = function(template) { - var recursive = function(obj) { - var key; - var val; - var valType; - for(key in obj) { - if(!obj.hasOwnProperty(key)) - continue; - val = obj[key]; - valType = helper.type(val); - if(valType === TYPES.a) - obj[key] = val[template ? 1 : 0]; - else if(valType === TYPES.o) - obj[key] = recursive(val); - } - return obj; - }; - return recursive(helper.extend(true, { }, optionsDefaultsAndTemplate)); - }; - - return { - //defaults - d : convert(), - - //template - t : convert(true), - - //validate - /** - * Validates the passed object by the passed template. - * @param obj The object which shall be validated. - * @param template The template which defines the allowed values and types. - * @param writeErrors True if errors shall be logged to the console. - * @param usePreparedValues True if the validated main values shall be returned in the validated object, false otherwise. - * @param keepForeignProps True if properties which aren't in the template shall be added to the validated object, false otherwise. - * @returns {{}} A object which contains only the valid properties of the passed original object. - */ - v : function (obj, template, writeErrors, usePreparedValues, keepForeignProps) { - var validatedOptions = { }; - var objectCopy = helper.extend(true, { }, obj); - var checkObjectProps = function(data, template, validatedOptions, prevPropName) { - for (var prop in template) { - if (template.hasOwnProperty(prop) && data.hasOwnProperty(prop)) { - var isValid = false; - var templateValue = template[prop]; - var templateValueType = helper.type(templateValue); - var templateTypes = helper.type(templateValue) !== TYPES.a ? [ templateValue ] : templateValue; - var dataValue = data[prop]; - var dataValueType = helper.type(dataValue); - var propPrefix = prevPropName ? prevPropName + "." : ""; - var error = "The option \"" + propPrefix + prop + "\" wasn't set, because"; - var errorPossibleTypes = [ ]; - var errorRestrictedStrings = [ ]; - var restrictedStringValuesSplit; - var restrictedStringValuesPossibilitiesSplit; - var isRestrictedValue; - var mainPossibility; - var currType; - var i; - var v; - var j; - - //if the template has a object as value, it means that the options are complex (verschachtelt) - if(templateValueType === TYPES.o) { - validatedOptions[prop] = { }; - checkObjectProps(dataValue, templateValue, validatedOptions[prop], propPrefix + prop); - if(helper.isEmptyObject(dataValue)) - delete data[prop]; - } - else { - for(i = 0; i < templateTypes.length; i++) { - currType = templateTypes[i]; - templateValueType = helper.type(currType); - //if currtype is string and starts with restrictedStringPrefix and end with restrictedStringSuffix - isRestrictedValue = templateValueType === TYPES.s && helper.inArray(currType, possibleTemplateTypes) === -1; - if(isRestrictedValue) { - errorPossibleTypes.push(TYPES.s); - - //split it into a array which contains all possible values for example: ["y:yes", "n:no", "m:maybe"] - restrictedStringValuesSplit = currType.split(restrictedStringsSplit); - errorRestrictedStrings = errorRestrictedStrings.concat(restrictedStringValuesSplit); - for(v = 0; v < restrictedStringValuesSplit.length; v++) { - //split the possible values into their possibiliteis for example: ["y", "yes"] -> the first is always the mainPossibility - restrictedStringValuesPossibilitiesSplit = restrictedStringValuesSplit[v].split(restrictedStringsPossibilitiesSplit); - mainPossibility = restrictedStringValuesPossibilitiesSplit[0]; - for(j = 0; j < restrictedStringValuesPossibilitiesSplit.length; j++) { - //if any possibility matches with the dataValue, its valid - if(dataValue === restrictedStringValuesPossibilitiesSplit[j]) { - isValid = true; - break; - } - } - if(isValid) - break; - } - } - else { - errorPossibleTypes.push(currType); - - if(dataValueType === currType) { - isValid = true; - break; - } - } - } - - if(isValid) { - validatedOptions[prop] = isRestrictedValue && usePreparedValues ? mainPossibility : dataValue; - } - else if(writeErrors) { - console.warn(error + " it doesn't accept the type [ " + dataValueType.toUpperCase() + " ] with the value of \"" + dataValue + "\".\r\n" + - "Accepted types are: [ " + errorPossibleTypes.join(", ").toUpperCase() + " ]." + - (errorRestrictedStrings.length > 0 ? "\r\nValid strings are: [ " + errorRestrictedStrings.join(", ").split(restrictedStringsPossibilitiesSplit).join(", ") + " ]." : "")); - } - delete data[prop]; - } - } - } - }; - checkObjectProps(objectCopy, template, validatedOptions); - - //add values which aren't specified in the template to the finished validated object to prevent them from being discarded - if(keepForeignProps) - helper.extend(true, validatedOptions, objectCopy); - else if(!helper.isEmptyObject(objectCopy) && writeErrors) - console.warn("The following options are discarded due to invalidity:\r\n" + JSON.stringify(objectCopy, null, 2)); - - return validatedOptions; - } - } - }()); - - /** - * Initializes the object which contains global information about the plugin and each instance of it. - */ - function initOverlayScrollbarsStatics() { - if(!_pluginsGlobals) - _pluginsGlobals = new OverlayScrollbarsGlobals(_pluginsOptions.d); - if(!_pluginsAutoUpdateLoop) - _pluginsAutoUpdateLoop = new OverlayScrollbarsAutoUpdateLoop(_pluginsGlobals); - } - - /** - * The global object for the hide scrollbars objects. It contains resources which every hide scrollbars object needs. This object is initialized only once: if the first hide scrollbars object gets initialized. - * @param defaultOptions - * @constructor - */ - function OverlayScrollbarsGlobals(defaultOptions) { - var _base = this; - var strOverflow = 'overflow'; - var strHidden = 'hidden'; - var strScroll = 'scroll'; - var bodyElement = helper('body'); - var scrollbarDummyElement = helper('
'); - var scrollbarDummyElement0 = scrollbarDummyElement[0]; - var dummyContainerChild = helper(scrollbarDummyElement.children('div').eq(0)); - var IEBUGFIX = scrollbarDummyElement0[LEXICON.oH]; //IE9 causes a bug where offsetHeight is zero for no reason - - bodyElement.append(scrollbarDummyElement); - if(IEBUGFIX === 0) - scrollbarDummyElement.hide().show(); - - var nativeScrollbarSize = calcNativeScrollbarSize(scrollbarDummyElement0); - var nativeScrollbarIsOverlaid = { - x: nativeScrollbarSize.x === 0, - y: nativeScrollbarSize.y === 0 - }; - - helper.extend(_base, { - defaultOptions : defaultOptions, - autoUpdateLoop : false, - autoUpdateRecommended : !compatibility.mO(), - nativeScrollbarSize : nativeScrollbarSize, - nativeScrollbarIsOverlaid : nativeScrollbarIsOverlaid, - nativeScrollbarStyling : (function() { - scrollbarDummyElement.addClass('os-viewport-native-scrollbars-invisible'); - //fix opera bug: scrollbar styles will only appear if overflow value is scroll or auto during the activation of the style. - //and set overflow to scroll - scrollbarDummyElement.css(strOverflow, strHidden).hide().css(strOverflow, strScroll).show(); - return (scrollbarDummyElement0[LEXICON.oH] - scrollbarDummyElement0[LEXICON.cH]) === 0 && (scrollbarDummyElement0[LEXICON.oW] - scrollbarDummyElement0[LEXICON.cW]) === 0; - })(), - overlayScrollbarDummySize : { x: 30, y: 30 }, - msie : (function() { - var ua = window.navigator.userAgent; - var strIndexOf = 'indexOf'; - var strSubString = 'substring'; - var msie = ua[strIndexOf]('MSIE '); - var trident = ua[strIndexOf]('Trident/'); - var edge = ua[strIndexOf]('Edge/'); - var rv = ua[strIndexOf]('rv:'); - var result; - var parseInt = window.parseInt; - - // IE 10 or older => return version number - if (msie > 0) - result = parseInt(ua[strSubString](msie + 5, ua[strIndexOf]('.', msie)), 10); - - // IE 11 => return version number - else if (trident > 0) - result = parseInt(ua[strSubString](rv + 3, ua[strIndexOf]('.', rv)), 10); - - // Edge (IE 12+) => return version number - else if (edge > 0) - result = parseInt(ua[strSubString](edge + 5, ua[strIndexOf]('.', edge)), 10); - - // other browser - return result; - })(), - cssCalc : (function() { - var dummy = document.createElement('div'); - var props = ['calc', '-webkit-calc', '-moz-calc', '-o-calc']; - var i; - var prop; - - for (i = 0; i < props.length; ++i) { - prop = props[i]; - dummy.style.cssText = 'width:' + prop + '(1px);'; - if (dummy.style.length) - return prop; - } - return null; - })(), - restrictedMeasuring : (function() { - //https://bugzilla.mozilla.org/show_bug.cgi?id=1439305 - scrollbarDummyElement.css(strOverflow, strHidden); - var scrollSize = { - w : scrollbarDummyElement0[LEXICON.sW], - h : scrollbarDummyElement0[LEXICON.sH] - }; - scrollbarDummyElement.css(strOverflow, 'visible'); - var scrollSize2 = { - w : scrollbarDummyElement0[LEXICON.sW], - h : scrollbarDummyElement0[LEXICON.sH] - }; - return (scrollSize.w - scrollSize2.w) !== 0 || (scrollSize.h - scrollSize2.h) !== 0; - })(), - rtlScrollBehavior : (function() { - scrollbarDummyElement.css({ 'overflow-y' : strHidden, 'overflow-x' : strScroll, 'direction' : 'rtl' }).scrollLeft(0); - var dummyContainerOffset = scrollbarDummyElement.offset(); - var dummyContainerChildOffset = dummyContainerChild.offset(); - scrollbarDummyElement.scrollLeft(999); - var dummyContainerScrollOffsetAfterScroll = dummyContainerChild.offset(); - return { - //origin direction = determines if the zero scroll position is on the left or right side - //'i' means 'invert' (i === true means that the axis must be inverted to be correct) - //true = on the left side - //false = on the right side - i : dummyContainerOffset.left === dummyContainerChildOffset.left, - //negative = determines if the maximum scroll is positive or negative - //'n' means 'negate' (n === true means that the axis must be negated to be correct) - //true = negative - //false = positive - n : dummyContainerChildOffset.left - dummyContainerScrollOffsetAfterScroll.left === 0 - }; - })(), - supportTransform : detectCSSFeature('transform'), - supportTransition : detectCSSFeature('transition'), - supportPassiveEvents : (function() { - var supportsPassive = false; - try { - window.addEventListener('test', null, Object.defineProperty({ }, 'passive', { - get: function() { - supportsPassive = true; - } - })); - } catch (e) { } - return supportsPassive; - })(), - supportResizeObserver : !!compatibility.rO(), - supportMutationObserver : !!compatibility.mO() - }); - - scrollbarDummyElement.removeAttr(LEXICON.s).remove(); - - //Catch zoom event: - (function () { - if(nativeScrollbarIsOverlaid.x && nativeScrollbarIsOverlaid.y) - return; - - var windowWidth = compatibility.wW(); - var windowHeight = compatibility.wH(); - var windowDpr = getWindowDPR(); - - function differenceIsBiggerThanOne(valOne, valTwo) { - var absValOne = Math.abs(valOne); - var absValTwo = Math.abs(valTwo); - return !(absValOne === absValTwo || absValOne + 1 === absValTwo || absValOne - 1 === absValTwo); - } - - function getWindowDPR() { - var dDPI = window.screen.deviceXDPI || 0; - var sDPI = window.screen.logicalXDPI || 1; - return window.devicePixelRatio || (dDPI / sDPI); - } - - helper(window).on('resize', function() { - if(instances.all().length > 0) { - var newW = compatibility.wW(); - var newH = compatibility.wH(); - var deltaW = newW - windowWidth; - var deltaH = newH - windowHeight; - - if (deltaW === 0 && deltaH === 0) - return; - - var deltaWRatio = Math.round(newW / (windowWidth / 100.0)); - var deltaHRatio = Math.round(newH / (windowHeight / 100.0)); - var absDeltaW = Math.abs(deltaW); - var absDeltaH = Math.abs(deltaH); - var absDeltaWRatio = Math.abs(deltaWRatio); - var absDeltaHRatio = Math.abs(deltaHRatio); - var newDPR = getWindowDPR(); - - var deltaIsBigger = absDeltaW > 2 && absDeltaH > 2; - var difference = !differenceIsBiggerThanOne(absDeltaWRatio, absDeltaHRatio); - var dprChanged = newDPR !== windowDpr && windowDpr > 0; - var windowResized = !(deltaIsBigger && difference && dprChanged); - - if (!windowResized) { - bodyElement.append(scrollbarDummyElement); - _base.nativeScrollbarSize = calcNativeScrollbarSize(scrollbarDummyElement[0]); - scrollbarDummyElement.remove(); - helper.each(instances.all(), function () { - if(instances.has(this)) - instances.get(this).update('zoom'); - }); - } - - windowWidth = newW; - windowHeight = newH; - windowDpr = newDPR; - } - }); - })(); - - function detectCSSFeature(featurename) { - var feature = false; - var domPrefixes = 'Webkit Moz ms O'.split(' '); - var elm = document.createElement('div'); - var featurenameCapital = null; - var i = 0; - - featurename = featurename.toLowerCase(); - - if (elm.style[featurename] !== undefined) - feature = true; - - if (!feature) { - featurenameCapital = featurename.charAt(0).toUpperCase() + featurename.substr(1); - for (; i < domPrefixes.length; i++) { - if (elm.style[domPrefixes[i] + featurenameCapital] !== undefined) { - feature = true; - break; - } - } - } - return feature; - } - - function calcNativeScrollbarSize(measureElement) { - return { - x: measureElement[LEXICON.oH] - measureElement[LEXICON.cH], - y: measureElement[LEXICON.oW] - measureElement[LEXICON.cW] - }; - } - } - - /** - * The object which manages the auto update loop for all hide scrollbars objects. This object is initialized only once: if the first hide scrollbars object gets initialized. - * @constructor - */ - function OverlayScrollbarsAutoUpdateLoop(globals) { - var _base = this; - var _strAutoUpdate = 'autoUpdate'; - var _strAutoUpdateInterval = _strAutoUpdate + 'Interval'; - - var _loopingInstances = [ ]; - var _loopingInstancesIntervalCache = [ ]; - var _loopIsActive = false; - var _loopIntervalDefault = 33; - var _loopInterval = _loopIntervalDefault; - var _loopTimeOld = compatibility.now(); - var _loopID; - - /** - * The auto update loop which will run every 50 milliseconds or less if the update interval of a instance is lower than 50 milliseconds. - */ - var loop = function() { - if(_loopingInstances.length > 0 && _loopIsActive) { - _loopID = compatibility.rAF()(function () { - loop(); - }); - var timeNew = compatibility.now(); - var timeDelta = timeNew - _loopTimeOld; - - if (timeDelta > _loopInterval) { - _loopTimeOld = timeNew - (timeDelta % _loopInterval); - var lowestInterval = _loopIntervalDefault; - for(var i = 0; i < _loopingInstances.length; i++) { - var instance = _loopingInstances[i]; - if (instance !== undefined) { - var instanceOptions = instance.options(); - var instanceAutoUpdateAllowed = instanceOptions[_strAutoUpdate]; - var instanceAutoUpdateInterval = Math.max(1, instanceOptions[_strAutoUpdateInterval]); - var now = compatibility.now(); - if ((instanceAutoUpdateAllowed === true || instanceAutoUpdateAllowed === null) && (now - _loopingInstancesIntervalCache[i]) > instanceAutoUpdateInterval) { - instance.update('auto'); - _loopingInstancesIntervalCache[i] = new Date(now += instanceAutoUpdateInterval); - } - lowestInterval = Math.max(1, Math.min(lowestInterval, instanceAutoUpdateInterval)); - } - } - _loopInterval = lowestInterval; - } - } else { - _loopInterval = _loopIntervalDefault; - } - }; - - /** - * Add OverlayScrollbars instance to the auto update loop. Only successful if the instance isn't already added. - * @param instance The instance which shall be updated in a loop automatically. - */ - _base.add = function(instance) { - if(helper.inArray(instance, _loopingInstances) === -1) { - _loopingInstances.push(instance); - _loopingInstancesIntervalCache.push(compatibility.now()); - if (_loopingInstances.length > 0 && !_loopIsActive) { - _loopIsActive = true; - globals.autoUpdateLoop = _loopIsActive; - loop(); - } - } - }; - - /** - * Remove OverlayScrollbars instance from the auto update loop. Only successful if the instance was added before. - * @param instance The instance which shall be updated in a loop automatically. - */ - _base.remove = function(instance) { - var index = helper.inArray(instance, _loopingInstances); - if(index > -1) { - //remove from loopingInstances list - _loopingInstancesIntervalCache.splice(index, 1); - _loopingInstances.splice(index, 1); - - //correct update loop behavior - if (_loopingInstances.length === 0 && _loopIsActive) { - _loopIsActive = false; - globals.autoUpdateLoop = _loopIsActive; - if(_loopID !== undefined) { - compatibility.cAF()(_loopID); - _loopID = -1; - } - } - } - }; - } - - /** - * A object which manages the scrollbars visibility of the target element. - * @param pluginTargetElement The element from which the scrollbars shall be hidden. - * @param options The custom options. - * @param globals - * @param autoUpdateLoop - * @returns {*} - * @constructor - */ - function OverlayScrollbarsInstance(pluginTargetElement, options, globals, autoUpdateLoop) { - //if passed element is no HTML element: skip and return - if(!isHTMLElement(pluginTargetElement)) - return; - - //if passed element is already initialized: set passed options if there are any and return its instance - if(instances.has(pluginTargetElement)) { - var inst = instances.get(pluginTargetElement); - inst.options(options); - return inst; - } - - //make correct instanceof - var _base = new window[PLUGINNAME](); - - //globals: - var _nativeScrollbarIsOverlaid; - var _overlayScrollbarDummySize; - var _rtlScrollBehavior; - var _autoUpdateRecommended; - var _msieVersion; - var _nativeScrollbarStyling; - var _cssCalc; - var _nativeScrollbarSize; - var _supportTransition; - var _supportTransform; - var _supportPassiveEvents; - var _supportResizeObserver; - var _restrictedMeasuring; - - //general readonly: - var _initialized; - var _destroyed; - var _isTextarea; - var _isBody; - var _documentMixed; - - //general: - var _isBorderBox; - var _sizeAutoObserverAdded; - var _paddingX; - var _paddingY; - var _borderX; - var _borderY; - var _marginX; - var _marginY; - var _isRTL; - var _isSleeping; - var _contentBorderSize = { }; - var _scrollHorizontalInfo = { }; - var _scrollVerticalInfo = { }; - var _viewportSize = { }; - var _nativeScrollbarMinSize = { }; - - //scroll - var _scrollStopDelay = 175; - var _scrollStopTimeoutId; - - //naming: - var _strMinusHidden = '-hidden'; - var _strMarginMinus = 'margin-'; - var _strPaddingMinus = 'padding-'; - var _strBorderMinus = 'border-'; - var _strTop = 'top'; - var _strRight = 'right'; - var _strBottom = 'bottom'; - var _strLeft = 'left'; - var _strMinMinus = 'min-'; - var _strMaxMinus = 'max-'; - var _strWidth = 'width'; - var _strHeight = 'height'; - var _strFloat = 'float'; - var _strEmpty = ''; - var _strAuto = 'auto'; - var _strScroll = 'scroll'; - var _strHundredPercent = '100%'; - var _strX = 'x'; - var _strY = 'y'; - var _strDot = '.'; - var _strSpace = ' '; - var _strScrollbar = 'scrollbar'; - var _strMinusHorizontal = '-horizontal'; - var _strMinusVertical = '-vertical'; - var _strScrollLeft = _strScroll + 'Left'; - var _strScrollTop = _strScroll + 'Top'; - var _strMouseTouchDownEvent = 'mousedown touchstart'; - var _strMouseTouchUpEvent = 'mouseup touchend touchcancel'; - var _strMouseTouchMoveEvent = 'mousemove touchmove'; - var _strMouseTouchEnter = 'mouseenter'; - var _strMouseTouchLeave = 'mouseleave'; - var _strKeyDownEvent = 'keydown'; - var _strKeyUpEvent = 'keyup'; - var _strSelectStartEvent = 'selectstart'; - var _strTransitionEndEvent = 'transitionend webkitTransitionEnd oTransitionEnd'; - var _strResizeObserverProperty = '__overlayScrollbarsRO__'; - - //class names: - var _cassNamesPrefix = 'os-'; - var _classNameHTMLElement = _cassNamesPrefix + 'html'; - var _classNameHostElement = _cassNamesPrefix + 'host'; - var _classNameHostTextareaElement = _classNameHostElement + '-textarea'; - var _classNameHostScrollbarHorizontalHidden = _classNameHostElement + '-' + _strScrollbar + _strMinusHorizontal + _strMinusHidden; - var _classNameHostScrollbarVerticalHidden = _classNameHostElement + '-' + _strScrollbar + _strMinusVertical + _strMinusHidden; - var _classNameHostTransition = _classNameHostElement + '-transition'; - var _classNameHostRTL = _classNameHostElement + '-rtl'; - var _classNameHostResizeDisabled = _classNameHostElement + '-resize-disabled'; - var _classNameHostScrolling = _classNameHostElement + '-scrolling'; - var _classNameHostOverflow = _classNameHostElement + '-overflow'; - var _classNameHostOverflowX = _classNameHostOverflow + '-x'; - var _classNameHostOverflowY = _classNameHostOverflow + '-y'; - var _classNameTextareaElement = _cassNamesPrefix + 'textarea'; - var _classNameTextareaCoverElement = _classNameTextareaElement + '-cover'; - var _classNamePaddingElement = _cassNamesPrefix + 'padding'; - var _classNameViewportElement = _cassNamesPrefix + 'viewport'; - var _classNameViewportNativeScrollbarsInvisible = _classNameViewportElement + '-native-scrollbars-invisible'; - var _classNameViewportNativeScrollbarsOverlaid = _classNameViewportElement + '-native-scrollbars-overlaid'; - var _classNameContentElement = _cassNamesPrefix + 'content'; - var _classNameContentArrangeElement = _cassNamesPrefix + 'content-arrange'; - var _classNameContentGlueElement = _cassNamesPrefix + 'content-glue'; - var _classNameSizeAutoObserverElement = _cassNamesPrefix + 'size-auto-observer'; - var _classNameResizeObserverElement = _cassNamesPrefix + 'resize-observer'; - var _classNameResizeObserverItemElement = _cassNamesPrefix + 'resize-observer-item'; - var _classNameResizeObserverItemFinalElement = _classNameResizeObserverItemElement + '-final'; - var _classNameTextInherit = _cassNamesPrefix + 'text-inherit'; - var _classNameScrollbar = _cassNamesPrefix + _strScrollbar; - var _classNameScrollbarTrack = _classNameScrollbar + '-track'; - var _classNameScrollbarTrackOff = _classNameScrollbarTrack + '-off'; - var _classNameScrollbarHandle = _classNameScrollbar + '-handle'; - var _classNameScrollbarHandleOff = _classNameScrollbarHandle + '-off'; - var _classNameScrollbarUnusable = _classNameScrollbar + '-unusable'; - var _classNameScrollbarAutoHidden = _classNameScrollbar + '-' + _strAuto + _strMinusHidden; - var _classNameScrollbarCorner = _classNameScrollbar + '-corner'; - var _classNameScrollbarCornerResize = _classNameScrollbarCorner + '-resize'; - var _classNameScrollbarCornerResizeB = _classNameScrollbarCornerResize + '-both'; - var _classNameScrollbarCornerResizeH = _classNameScrollbarCornerResize + _strMinusHorizontal; - var _classNameScrollbarCornerResizeV = _classNameScrollbarCornerResize + _strMinusVertical; - var _classNameScrollbarHorizontal = _classNameScrollbar + _strMinusHorizontal; - var _classNameScrollbarVertical = _classNameScrollbar + _strMinusVertical; - var _classNameDragging = _cassNamesPrefix + 'dragging'; - var _classNameThemeNone = _cassNamesPrefix + 'theme-none'; - - //options: - var _defaultOptions; - var _currentOptions; - var _currentPreparedOptions; - - //update - var _lastUpdateTime; - var _swallowedUpdateParams = { }; - var _swallowedUpdateTimeout; - var _swallowUpdateLag = 33; - var _imgs = [ ]; - - //DOM elements: - var _windowElement; - var _documentElement; - var _htmlElement; - var _bodyElement; - var _targetElement; //the target element of this hide scrollbars object - var _hostElement; //the host element of this hide scrollbars object -> may be the same as targetElement - var _sizeAutoObserverElement; //observes size auto changes - var _sizeObserverElement; //observes size and padding changes - var _contentGlueElement; //has always the size of the content element - var _paddingElement; //manages the padding - var _viewportElement; //is the viewport of our scrollbar model - var _contentArrangeElement; //is needed for correct sizing of the content element (only if native scrollbars are overlays) - var _contentElement; //the element which holds the content - var _textareaCoverElement; //only applied if target is a textarea element. Used for correct size calculation and for prevention of uncontrolled scrolling - var _scrollbarCornerElement; - var _scrollbarHorizontalElement; - var _scrollbarHorizontalTrackElement; - var _scrollbarHorizontalHandleElement; - var _scrollbarVerticalElement; - var _scrollbarVerticalTrackElement; - var _scrollbarVerticalHandleElement; - - //Cache: - var _hostSizeCache; - var _contentScrollSizeCache; - var _arrangeContentSizeCache; - var _hasOverflowCache; - var _hideOverflowCache; - var _widthAutoCache; - var _heightAutoCache; - var _cssMaxValueCache; - var _cssBoxSizingCache; - var _cssPaddingCache; - var _cssBorderCache; - var _cssMarginCache; - var _cssDirectionCache; - var _cssDirectionDetectedCache; - var _paddingAbsoluteCache; - var _clipAlwaysCache; - var _contentGlueSizeCache; - var _overflowBehaviorCache; - var _overflowAmountCache; - var _ignoreOverlayScrollbarHidingCache; - var _autoUpdateCache; - var _sizeAutoCapableCache; - var _textareaAutoWrappingCache; - var _textareaInfoCache; - var _updateAutoHostElementIdCache; - var _updateAutoHostElementClassCache; - var _updateAutoHostElementStyleCache; - var _updateAutoHostElementVisibleCache; - var _updateAutoTargetElementRowsCache; - var _updateAutoTargetElementColsCache; - var _updateAutoTargetElementWrapCache; - var _contentElementScrollSizeChangeDetectedCache; - var _hostElementSizeChangeDetectedCache; - var _scrollbarsVisibilityCache; - var _scrollbarsAutoHideCache; - var _scrollbarsClickScrollingCache; - var _scrollbarsDragScrollingCache; - var _resizeCache; - var _normalizeRTLCache; - var _classNameCache; - var _oldClassName; - var _textareaDynHeightCache; - var _textareaDynWidthCache; - var _bodyMinSizeCache; - - //MutationObserver: - var _mutationObserverContentLag = 11; - var _mutationObserverHost; - var _mutationObserverContent; - var _mutationObserverConnected; - var _supportMutationObserver; - - //textarea: - var _textareaKeyDownRestrictedKeyCodes = [ - 112, 113, 114, 115, 116, 117, 118, 119, 120, 121, 123, //F1 to F12 - 33, 34, //page up, page down - 37, 38, 39, 40, //left, up, right, down arrows - 16, 17, 18, 19, 20, 144 //Shift, Ctrl, Alt, Pause, CapsLock, NumLock - ]; - var _textareaKeyDownKeyCodesList = [ ]; - var _textareaUpdateIntervalID; - var _textareaHasFocus; - - //scrollbars: - var _scrollbarsAutoHideTimeoutId; - var _scrollbarsAutoHideMoveTimeoutId; - var _scrollbarsAutoHideDelay; - var _scrollbarsAutoHideNever; - var _scrollbarsAutoHideScroll; - var _scrollbarsAutoHideMove; - var _scrollbarsAutoHideLeave; - var _scrollbarsTouchSupport; - var _scrollbarsAutoHideFlagScrollAndHovered; - - //resize - var _resizeReconnectMutationObserver; - var _resizeNone; - var _resizeBoth; - var _resizeHorizontal; - var _resizeVertical; - var _resizeDragStartPosition = { }; - var _resizeDragStartSize = { }; - - - //==== Add / Remove Passive Event Listener ====// - - /** - * Adds a passive event listener to the given element. - * @param element The element to which the event listener shall be applied. - * @param eventNames The name(s) of the event listener. - * @param listener The listener method which shall be called. - */ - function addPassiveEventListener(element, eventNames, listener) { - var events = eventNames.split(_strSpace); - for (var i = 0; i < events.length; i++) - element[0].addEventListener(events[i], listener, {passive: true}); - } - - /** - * Removes a passive event listener to the given element. - * @param element The element from which the event listener shall be removed. - * @param eventNames The name(s) of the event listener. - * @param listener The listener method which shall be removed. - */ - function removePassiveEventListener(element, eventNames, listener) { - var events = eventNames.split(_strSpace); - for (var i = 0; i < events.length; i++) - element[0].removeEventListener(events[i], listener, {passive: true}); - } - - - //==== Add / Remove / Freeze / Unfreeze Resize Observer ====// - - /** - * Adds a resize observer to the given element. - * @param targetElement The element to which the resize observer shall be applied. - * @param onElementResizedCallback The callback which is fired every time the resize observer registers a size change. - */ - function addResizeObserver(targetElement, onElementResizedCallback) { - var constMaximum = 3333333; - var resizeObserver = compatibility.rO(); - var strAnimationStartEvent = 'animationstart mozAnimationStart webkitAnimationStart MSAnimationStart'; - var strChildNodes = 'childNodes'; - var callback = function () { - targetElement[_strScrollTop](constMaximum)[_strScrollLeft](_isRTL ? _rtlScrollBehavior.n ? -constMaximum : _rtlScrollBehavior.i ? 0 : constMaximum : constMaximum); - onElementResizedCallback(); - }; - if (_supportResizeObserver) { - var element = targetElement.append(generateDiv(_classNameResizeObserverElement + ' observed')).contents()[0]; - var observer = element[_strResizeObserverProperty] = new resizeObserver(callback); - observer.observe(element); - } - else { - if (_msieVersion > 9 || !_autoUpdateRecommended) { - targetElement.prepend( - generateDiv(_classNameResizeObserverElement, - generateDiv({ className : _classNameResizeObserverItemElement, dir : "ltr" }, - generateDiv(_classNameResizeObserverItemElement, - generateDiv(_classNameResizeObserverItemFinalElement) - ) + - generateDiv(_classNameResizeObserverItemElement, - generateDiv({ className : _classNameResizeObserverItemFinalElement, style : 'width: 200%; height: 200%' }) - ) - ) - ) - ); - - var observerElement = targetElement[0][strChildNodes][0][strChildNodes][0]; - var shrinkElement = helper(observerElement[strChildNodes][1]); - var expandElement = helper(observerElement[strChildNodes][0]); - var expandElementChild = helper(expandElement[0][strChildNodes][0]); - var widthCache = observerElement[LEXICON.oW]; - var heightCache = observerElement[LEXICON.oH]; - var isDirty; - var rAFId; - var currWidth; - var currHeight; - var factor = 2; - var nativeScrollbarSize = globals.nativeScrollbarSize; //care don't make changes to this object!!! - var reset = function () { - /* - var sizeResetWidth = observerElement[LEXICON.oW] + nativeScrollbarSize.x * factor + nativeScrollbarSize.y * factor + _overlayScrollbarDummySize.x + _overlayScrollbarDummySize.y; - var sizeResetHeight = observerElement[LEXICON.oH] + nativeScrollbarSize.x * factor + nativeScrollbarSize.y * factor + _overlayScrollbarDummySize.x + _overlayScrollbarDummySize.y; - var expandChildCSS = {}; - expandChildCSS[_strWidth] = sizeResetWidth; - expandChildCSS[_strHeight] = sizeResetHeight; - expandElementChild.css(expandChildCSS); - - - expandElement[_strScrollLeft](sizeResetWidth)[_strScrollTop](sizeResetHeight); - shrinkElement[_strScrollLeft](sizeResetWidth)[_strScrollTop](sizeResetHeight); - */ - expandElement[_strScrollLeft](constMaximum)[_strScrollTop](constMaximum); - shrinkElement[_strScrollLeft](constMaximum)[_strScrollTop](constMaximum); - }; - var onResized = function () { - rAFId = 0; - if (!isDirty) - return; - - widthCache = currWidth; - heightCache = currHeight; - callback(); - }; - var onScroll = function (event) { - currWidth = observerElement[LEXICON.oW]; - currHeight = observerElement[LEXICON.oH]; - isDirty = currWidth != widthCache || currHeight != heightCache; - - if (event && isDirty && !rAFId) { - compatibility.cAF()(rAFId); - rAFId = compatibility.rAF()(onResized); - } - else if (!event) - onResized(); - - reset(); - - if (event) { - compatibility.prvD(event); - compatibility.stpP(event); - } - return false; - }; - var expandChildCSS = {}; - var observerElementCSS = {}; - - observerElementCSS[_strTop] = (-((nativeScrollbarSize.y + 1) * factor)); - observerElementCSS[_strRight] = (nativeScrollbarSize.x * -factor); - observerElementCSS[_strBottom] = (nativeScrollbarSize.y * -factor); - observerElementCSS[_strLeft] = (-((nativeScrollbarSize.x + 1) * factor)); - - helper(observerElement).css(observerElementCSS); - expandElement.on(_strScroll, onScroll); - shrinkElement.on(_strScroll, onScroll); - targetElement.on(strAnimationStartEvent, function () { - onScroll(false); - }); - //lets assume that the divs will never be that large and a constant value is enough - expandChildCSS[_strWidth] = constMaximum; - expandChildCSS[_strHeight] = constMaximum; - expandElementChild.css(expandChildCSS); - - reset(); - } - else { - var doc = _documentElement[0]; - var attachEvent = doc.attachEvent; - var isIE = _msieVersion !== undefined; - if (attachEvent) { - targetElement.prepend(generateDiv(_classNameResizeObserverElement)); - findFirst(targetElement, _strDot + _classNameResizeObserverElement)[0].attachEvent('onresize', callback); - } - else { - var obj = doc.createElement(TYPES.o); - obj.setAttribute('tabindex', '-1'); - obj.setAttribute(LEXICON.c, _classNameResizeObserverElement); - obj.onload = function () { - var wnd = this.contentDocument.defaultView; - wnd.addEventListener('resize', callback); - wnd.document.documentElement.style.display = 'none'; - }; - obj.type = 'text/html'; - if (isIE) - targetElement.prepend(obj); - obj.data = 'about:blank'; - if (!isIE) - targetElement.prepend(obj); - targetElement.on(strAnimationStartEvent, callback); - } - } - } - - //direction change detection: - if (targetElement[0] === _sizeObserverElement[0]) { - var directionChanged = function () { - var dir = _hostElement.css('direction'); - var css = {}; - var scrollLeftValue = 0; - var result = false; - if (dir !== _cssDirectionDetectedCache) { - if (dir === 'ltr') { - css[_strLeft] = 0; - css[_strRight] = _strAuto; - scrollLeftValue = constMaximum; - } - else { - css[_strLeft] = _strAuto; - css[_strRight] = 0; - scrollLeftValue = _rtlScrollBehavior.n ? -constMaximum : _rtlScrollBehavior.i ? 0 : constMaximum; - } - _sizeObserverElement.children().eq(0).css(css); - targetElement[_strScrollLeft](scrollLeftValue)[_strScrollTop](constMaximum); - _cssDirectionDetectedCache = dir; - result = true; - } - return result; - }; - directionChanged(); - targetElement.on(_strScroll, function (event) { - if (directionChanged()) - update(); - compatibility.prvD(event); - compatibility.stpP(event); - return false; - }); - } - } - - /** - * Removes a resize observer from the given element. - * @param targetElement The element to which the target resize observer is applied. - */ - function removeResizeObserver(targetElement) { - if (_supportResizeObserver) { - var element = targetElement.contents()[0]; - element[_strResizeObserverProperty].disconnect(); - delete element[_strResizeObserverProperty]; - } - else { - remove(targetElement.children(_strDot + _classNameResizeObserverElement).eq(0)); - } - } - - /** - * Freezes the given resize observer. - * @param targetElement The element to which the target resize observer is applied. - */ - function freezeResizeObserver(targetElement) { - if (targetElement !== undefined) { - if (_supportResizeObserver) { - var element = targetElement.contents()[0]; - element[_strResizeObserverProperty].unobserve(element); - } - /* - else { - targetElement = targetElement.children(_strDot + _classNameResizeObserverElement).eq(0); - var w = targetElement.css(_strWidth); - var h = targetElement.css(_strHeight); - var css = {}; - css[_strWidth] = w; - css[_strHeight] = h; - targetElement.css(css); - } - */ - } - } - - /** - * Unfreezes the given resize observer. - * @param targetElement The element to which the target resize observer is applied. - */ - function unfreezeResizeObserver(targetElement) { - if (targetElement !== undefined) { - if (_supportResizeObserver) { - var element = targetElement.contents()[0]; - element[_strResizeObserverProperty].observe(element); - } - /* - else { - var css = { }; - css[_strHeight] = _strEmpty; - css[_strWidth] = _strEmpty; - targetElement.children(_strDot + _classNameResizeObserverElement).eq(0).css(css); - } - */ - } - } - - - //==== Connect / Disconnect Mutation Observer ====// - - /** - * Connects the MutationObservers if they are supported. - */ - function mutationObserversConnect() { - if (_supportMutationObserver && !_mutationObserverConnected) { - _mutationObserverHost.observe(_hostElement[0], { - attributes: true, - attributeOldValue: true, - attributeFilter: [LEXICON.i, LEXICON.c, LEXICON.s] - }); - - _mutationObserverContent.observe(_isTextarea ? _targetElement[0] : _contentElement[0], { - attributes: true, - attributeOldValue: true, - subtree: !_isTextarea, - childList: !_isTextarea, - characterData: !_isTextarea, - attributeFilter: _isTextarea ? ['wrap', 'cols', 'rows'] : [LEXICON.i, LEXICON.c, LEXICON.s] - }); - - _mutationObserverConnected = true; - } - } - - /** - * Disconnects the MutationObservers if they are supported. - */ - function mutationObserversDisconnect() { - if (_supportMutationObserver && _mutationObserverConnected) { - _mutationObserverHost.disconnect(); - _mutationObserverContent.disconnect(); - - _mutationObserverConnected = false; - } - } - - - //==== Events of elements ====// - - /** - * This method gets called every time the host element gets resized. IMPORTANT: Padding changes are detected too!! - * It refreshes the hostResizedEventArgs and the hostSizeResizeCache. - * If there are any size changes, the update method gets called. - */ - function hostOnResized() { - if (_isSleeping) - return; - var measureElement = _sizeObserverElement[0]; - var hostSize = { - w: measureElement[LEXICON.sW], - h: measureElement[LEXICON.sH] - }; - if (_initialized) { - var changed = checkCacheDouble(hostSize, _hostElementSizeChangeDetectedCache); - _hostElementSizeChangeDetectedCache = hostSize; - if (changed) - update(true, false); - } - else { - _hostElementSizeChangeDetectedCache = hostSize; - } - } - - /** - * The mouse enter event of the host element. This event is only needed for the autoHide feature. - */ - function hostOnMouseEnter() { - if (_scrollbarsAutoHideLeave) - refreshScrollbarsAutoHide(true); - } - - /** - * The mouse leave event of the host element. This event is only needed for the autoHide feature. - */ - function hostOnMouseLeave() { - if (_scrollbarsAutoHideLeave && !_bodyElement.hasClass(_classNameDragging)) - refreshScrollbarsAutoHide(false); - } - - /** - * The mouse move event of the host element. This event is only needed for the autoHide "move" feature. - */ - function hostOnMouseMove() { - if (_scrollbarsAutoHideMove) { - refreshScrollbarsAutoHide(true); - clearTimeout(_scrollbarsAutoHideMoveTimeoutId); - _scrollbarsAutoHideMoveTimeoutId = setTimeout(function () { - if (_scrollbarsAutoHideMove && !_destroyed) - refreshScrollbarsAutoHide(false); - }, 100); - } - } - - /** - * The scroll event of the viewport element. That is the main scroll event. It controls also the "scroll", "scrollStart" and "scrollStop" callbacks. - * @param event The scroll event. - */ - function viewportOnScroll(event) { - var optionsCallbacks = _currentPreparedOptions.callbacks; - - if (_isSleeping) - return; - - if (_scrollStopTimeoutId !== undefined) - clearTimeout(_scrollStopTimeoutId); - else { - if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) - refreshScrollbarsAutoHide(true); - - if (!nativeOverlayScrollbarsAreActive()) - addClass(_hostElement, _classNameHostScrolling); - - callCallback(optionsCallbacks.onScrollStart, event); - } - - refreshScrollbarHandleOffset(true, _viewportElement[_strScrollLeft]()); - refreshScrollbarHandleOffset(false, _viewportElement[_strScrollTop]()); - callCallback(optionsCallbacks.onScroll, event); - - _scrollStopTimeoutId = setTimeout(function () { - if(!_destroyed) { - viewportOnScrollStop(); - callCallback(optionsCallbacks.onScrollStop, event); - } - }, _scrollStopDelay); - } - - /** - * This method gets called if the scroll event stopped for a specified amount of time. - */ - function viewportOnScrollStop() { - clearTimeout(_scrollStopTimeoutId); - _scrollStopTimeoutId = undefined; - if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) - refreshScrollbarsAutoHide(false); - - if (!nativeOverlayScrollbarsAreActive()) - removeClass(_hostElement, _classNameHostScrolling); - } - - /** - * The key input event of the textarea element. - */ - function textareaOnInput() { - textareaUpdate(); - _base.update(_strAuto); - } - - /** - * The key down event of the textarea element. Is only applied if the input event isn't fully supported. - * @param event The key down event. - */ - function textareaOnKeyDown(event) { - var keyCode = event.keyCode; - if (textareaIsRestrictedKeyCode(keyCode)) - return; - if (_textareaKeyDownKeyCodesList.length === 0) { - var action = function () { - textareaUpdate(); - _base.update(_strAuto); - }; - action(); - _textareaUpdateIntervalID = setInterval(action, 1000 / 60); - } - if (helper.inArray(keyCode, _textareaKeyDownKeyCodesList) === -1) - _textareaKeyDownKeyCodesList.push(keyCode); - } - - /** - * The key up event of the textarea element. Is only applied if the input event isn't fully supported. - * @param event The key up event. - */ - function textareaOnKeyUp(event) { - var keyCode = event.keyCode; - if (textareaIsRestrictedKeyCode(keyCode)) - return; - var index = helper.inArray(keyCode, _textareaKeyDownKeyCodesList); - if (index > -1) - _textareaKeyDownKeyCodesList.splice(index, 1); - if (_textareaKeyDownKeyCodesList.length === 0) { - textareaUpdate(); - _base.update(_strAuto); - clearInterval(_textareaUpdateIntervalID); - } - } - - /** - * The drop event of the textarea element. - */ - function textareaOnDrop() { - setTimeout(function () { - if(!_destroyed) { - textareaUpdate(); - _base.update(_strAuto); - } - }, 50); - } - - /** - * The focus event of the textarea element. - */ - function textareaOnFocus() { - _textareaHasFocus = true; - } - - /** - * The focus out event of the textarea element. - */ - function textareaOnFocusOut() { - _textareaHasFocus = false; - clearInterval(_textareaUpdateIntervalID); - _textareaKeyDownKeyCodesList = [ ]; - textareaUpdate(); - _base.update(_strAuto); - } - - /** - * The scroll event of the textarea element. - * @param event The scroll event. - */ - function textareaOnScroll(event) { - _targetElement[_strScrollLeft](_rtlScrollBehavior.i && _normalizeRTLCache ? 9999999 : 0); - _targetElement[_strScrollTop](0); - compatibility.prvD(event); - compatibility.stpP(event); - return false; - } - - /** - * The mouse down event of the scrollbar corner element. - * @param event The mouse down event. - */ - function scrollbarCornerOnMouseDown(event) { - if (_isSleeping) - return; - - var originalEvent = event.originalEvent || event; - var isTouchEvent = originalEvent.touches !== undefined; - - if (compatibility.mBtn(event) === 1 || isTouchEvent) { - if (_mutationObserverConnected) { - _resizeReconnectMutationObserver = true; - mutationObserversDisconnect(); - } - - _resizeDragStartPosition = compatibility.page(event); - - _resizeDragStartSize.w = _hostElement[0][LEXICON.oW] - (!_isBorderBox ? _paddingX : 0); - _resizeDragStartSize.h = _hostElement[0][LEXICON.oH] - (!_isBorderBox ? _paddingY : 0); - - _documentElement.on(_strSelectStartEvent, documentOnSelectStart) - .on(_strMouseTouchMoveEvent, scrollbarCornerOnResize) - .on(_strMouseTouchUpEvent, scrollbarCornerOnResized); - - addClass(_bodyElement, _classNameDragging); - if (_scrollbarCornerElement.setCapture) - _scrollbarCornerElement.setCapture(); - - compatibility.prvD(event); - compatibility.stpP(event); - } - } - - /** - * The mouse move event if the scrollbar corner element is resizable and gets dragged. - * @param event The mouse move event. - */ - function scrollbarCornerOnResize(event) { - var pageOffset = compatibility.page(event); - var hostElementCSS = { }; - if (_resizeHorizontal || _resizeBoth) - hostElementCSS[_strWidth] = (_resizeDragStartSize.w + pageOffset.x - _resizeDragStartPosition.x); - if (_resizeVertical || _resizeBoth) - hostElementCSS[_strHeight] = (_resizeDragStartSize.h + pageOffset.y - _resizeDragStartPosition.y); - _hostElement.css(hostElementCSS); - compatibility.stpP(event); - } - - /** - * The mouse up event if the scrollbar corner element is resizable and was dragged and now the mouse button is released. - * @param event The mouse up event. - */ - function scrollbarCornerOnResized(event) { - var eventIsTrusted = event !== undefined; - - _documentElement.off(_strSelectStartEvent, documentOnSelectStart) - .off(_strMouseTouchMoveEvent, scrollbarCornerOnResize) - .off(_strMouseTouchUpEvent, scrollbarCornerOnResized); - - removeClass(_bodyElement, _classNameDragging); - if (_scrollbarCornerElement.releaseCapture) - _scrollbarCornerElement.releaseCapture(); - - if (eventIsTrusted) { - if (_resizeReconnectMutationObserver) - mutationObserversConnect(); - _base.update(_strAuto); - } - _resizeReconnectMutationObserver = false; - } - - /** - * Prevents text from deselection if attached to the document element on the mousedown event of a DOM element. - * @param event The select start event. - */ - function documentOnSelectStart(event) { - compatibility.prvD(event); - return false; - } - - /** - * A callback which will be called after a img element has downloaded its src asynchronous. - */ - function imgOnLoad() { - update(); - } - - - //==== Update Detection ====// - - /** - * Measures the min width and min height of the body element and refreshes the related cache. - * @returns {boolean} True if the min width or min height has changed, false otherwise. - */ - function bodyMinSizeChanged() { - var bodyMinSize = {}; - if (_isBody && _contentArrangeElement) { - bodyMinSize.w = parseIntToZeroOrNumber(_contentArrangeElement.css(_strMinMinus + _strWidth)); - bodyMinSize.h = parseIntToZeroOrNumber(_contentArrangeElement.css(_strMinMinus + _strHeight)); - bodyMinSize.c = checkCacheDouble(bodyMinSize, _bodyMinSizeCache); - bodyMinSize.f = true; //flag for "measured at least once" - } - _bodyMinSizeCache = bodyMinSize; - return bodyMinSize.c; - } - - /** - * Returns true if the class names really changed (new class without plugin host prefix) - * @param oldCassNames The old ClassName string. - * @param newClassNames The new ClassName string. - * @returns {boolean} True if the class names has really changed, false otherwise. - */ - function hostClassNamesChanged(oldCassNames, newClassNames) { - var currClasses = (newClassNames !== undefined && newClassNames !== null) ? newClassNames.split(_strSpace) : _strEmpty; - var oldClasses = (oldCassNames !== undefined && oldCassNames !== null) ? oldCassNames.split(_strSpace) : _strEmpty; - if (currClasses === _strEmpty && oldClasses === _strEmpty) - return false; - var diff = getArrayDifferences(oldClasses, currClasses); - var changed = false; - var oldClassNames = _oldClassName !== undefined && _oldClassName !== null ? _oldClassName.split(_strSpace) : [_strEmpty]; - var currClassNames = _classNameCache !== undefined && _classNameCache !== null ? _classNameCache.split(_strSpace) : [_strEmpty]; - - //remove none theme from diff list to prevent update - var idx = helper.inArray(_classNameThemeNone, diff); - var curr = diff[i]; - var i; - var v; - var o; - var c; - - if (idx > -1) - diff.splice(idx, 1); - - for (i = 0; i < diff.length; i++) { - curr = diff[i]; - if (curr.indexOf(_classNameHostElement) !== 0) { - o = true; - c = true; - for (v = 0; v < oldClassNames.length; v++) { - if (curr === oldClassNames[v]) { - o = false; - break; - } - } - for (v = 0; v < currClassNames.length; v++) { - if (curr === currClassNames[v]) { - c = false; - break; - } - } - if (o && c) { - changed = true; - break; - } - } - - } - return changed; - } - - /** - * Returns true if the given mutation is not from a from the plugin generated element. If the target element is a textarea the mutation is always unknown. - * @param mutation The mutation which shall be checked. - * @returns {boolean} True if the mutation is from a unknown element, false otherwise. - */ - function isUnknownMutation(mutation) { - var attributeName = mutation.attributeName; - var mutationTarget = mutation.target; - var mutationType = mutation.type; - var strClosest = 'closest'; - - if (mutationTarget === _contentElement[0]) - return attributeName === null; - if (mutationType === 'attributes' && (attributeName === LEXICON.c || attributeName === LEXICON.s) && !_isTextarea) { - //only do it of browser support it natively - if (typeof mutationTarget[strClosest] !== TYPES.f) - return true; - if (mutationTarget[strClosest](_strDot + _classNameResizeObserverElement) !== null || - mutationTarget[strClosest](_strDot + _classNameScrollbar) !== null || - mutationTarget[strClosest](_strDot + _classNameScrollbarCorner) !== null) - return false; - } - return true; - } - - /** - * Returns true if the content size was changed since the last time this method was called. - * @returns {boolean} True if the content size was changed, false otherwise. - */ - function updateAutoContentSizeChanged() { - if (_isSleeping) - return false; - - var textareaValueLength = _isTextarea && _widthAutoCache && !_textareaAutoWrappingCache ? _targetElement.val().length : 0; - var float; - var setCSS = !_mutationObserverConnected && _widthAutoCache && !_isTextarea; - var css = {}; - if (setCSS) { - float = _contentElement.css(_strFloat); - css[_strFloat] = _isRTL ? _strRight : _strLeft; - css[_strWidth] = _strAuto; - _contentElement.css(css); - } - var contentElementScrollSize = { - w: getContentMeasureElement()[LEXICON.sW] + textareaValueLength, - h: getContentMeasureElement()[LEXICON.sH] + textareaValueLength - }; - if (setCSS) { - css[_strFloat] = float; - css[_strWidth] = _strHundredPercent; - _contentElement.css(css); - } - var bodyMinSizeC = bodyMinSizeChanged(); - var changed = checkCacheDouble(contentElementScrollSize, _contentElementScrollSizeChangeDetectedCache) || bodyMinSizeC; - _contentElementScrollSizeChangeDetectedCache = contentElementScrollSize; - - return changed; - } - - /** - * Returns true if the host element attributes (id, class, style) was changed since the last time this method was called. - * @returns {boolean} - */ - function meaningfulAttrsChanged() { - if (_isSleeping || _mutationObserverConnected) - return false; - - var hostElementId = _hostElement.attr(LEXICON.i) || _strEmpty; - var hostElementIdChanged = checkCacheSingle(hostElementId, _updateAutoHostElementIdCache); - var hostElementClass = _hostElement.attr(LEXICON.c) || _strEmpty; - var hostElementClassChanged = checkCacheSingle(hostElementClass, _updateAutoHostElementClassCache); - var hostElementStyle = _hostElement.attr(LEXICON.s) || _strEmpty; - var hostElementStyleChanged = checkCacheSingle(hostElementStyle, _updateAutoHostElementStyleCache); - var hostElementVisible = _hostElement.is(':visible') || _strEmpty; - var hostElementVisibleChanged = checkCacheSingle(hostElementVisible, _updateAutoHostElementVisibleCache); - var targetElementRows = _isTextarea ? (_targetElement.attr('rows') || _strEmpty) : _strEmpty; - var targetElementRowsChanged = checkCacheSingle(targetElementRows, _updateAutoTargetElementRowsCache); - var targetElementCols = _isTextarea ? (_targetElement.attr('cols') || _strEmpty) : _strEmpty; - var targetElementColsChanged = checkCacheSingle(targetElementCols, _updateAutoTargetElementColsCache); - var targetElementWrap = _isTextarea ? (_targetElement.attr('wrap') || _strEmpty) : _strEmpty; - var targetElementWrapChanged = checkCacheSingle(targetElementWrap, _updateAutoTargetElementWrapCache); - - _updateAutoHostElementIdCache = hostElementId; - if (hostElementClassChanged) - hostElementClassChanged = hostClassNamesChanged(_updateAutoHostElementClassCache, hostElementClass); - _updateAutoHostElementClassCache = hostElementClass; - _updateAutoHostElementStyleCache = hostElementStyle; - _updateAutoHostElementVisibleCache = hostElementVisible; - _updateAutoTargetElementRowsCache = targetElementRows; - _updateAutoTargetElementColsCache = targetElementCols; - _updateAutoTargetElementWrapCache = targetElementWrap; - - return hostElementIdChanged || hostElementClassChanged || hostElementStyleChanged || hostElementVisibleChanged || targetElementRowsChanged || targetElementColsChanged || targetElementWrapChanged; - } - - /** - * Checks is a CSS Property of a child element is affecting the scroll size of the content. - * @param propertyName The CSS property name. - * @returns {boolean} True if the property is affecting the content scroll size, false otherwise. - */ - function isSizeAffectingCSSProperty(propertyName) { - if (!_initialized) - return true; - var affectingPropsX = [ - _strWidth, - _strMinMinus + _strWidth, - _strMaxMinus + _strWidth, - _strMarginMinus + _strLeft, - _strMarginMinus + _strRight, - _strLeft, - _strRight, - 'font-weight', - 'word-spacing' - ]; - var affectingPropsXContentBox = [ - _strPaddingMinus + _strLeft, - _strPaddingMinus + _strRight, - _strBorderMinus + _strLeft + _strWidth, - _strBorderMinus + _strRight + _strWidth - ]; - var affectingPropsY = [ - _strHeight, - _strMinMinus + _strHeight, - _strMaxMinus + _strHeight, - _strMarginMinus + _strTop, - _strMarginMinus + _strBottom, - _strTop, - _strBottom, - 'line-height' - ]; - var affectingPropsYContentBox = [ - _strPaddingMinus + _strTop, - _strPaddingMinus + _strBottom, - _strBorderMinus + _strTop + _strWidth, - _strBorderMinus + _strBottom + _strWidth - ]; - var _strS = 's'; - var _strVS = 'v-s'; - var checkX = _overflowBehaviorCache.x === _strS || _overflowBehaviorCache.x === _strVS; - var checkY = _overflowBehaviorCache.y === _strS || _overflowBehaviorCache.y === _strVS; - var sizeIsAffected = false; - var checkPropertyName = function (arr, name) { - for (var i = 0; i < arr.length; i++) { - if (arr[i] === name) - return true; - } - return false; - }; - - if (checkY) { - sizeIsAffected = checkPropertyName(affectingPropsY, propertyName); - if (!sizeIsAffected && !_isBorderBox) - sizeIsAffected = checkPropertyName(affectingPropsYContentBox, propertyName); - } - if (checkX && !sizeIsAffected) { - sizeIsAffected = checkPropertyName(affectingPropsX, propertyName); - if (!sizeIsAffected && !_isBorderBox) - sizeIsAffected = checkPropertyName(affectingPropsXContentBox, propertyName); - } - return sizeIsAffected; - } - - - //==== Update ====// - - /** - * Updates the variables and size of the textarea element, and manages the scroll on new line or new character. - */ - function textareaUpdate() { - if (_isSleeping) - return; - - var wrapAttrOff = !_textareaAutoWrappingCache; - var minWidth = _viewportSize.w - (!_isBorderBox && !_paddingAbsoluteCache && _widthAutoCache ? _paddingY + _borderY : 0); - var minHeight = _viewportSize.h - (!_isBorderBox && !_paddingAbsoluteCache && _heightAutoCache ? _paddingY + _borderY : 0); - var css = { }; - var doMeasure = _widthAutoCache || wrapAttrOff; - var measureElement = _targetElement[0]; - var origWidth; - var width; - var origHeight; - var height; - - //reset min size - css[_strMinMinus + _strWidth] = _strEmpty; - css[_strMinMinus + _strHeight] = _strEmpty; - - //set width auto - css[_strWidth] = _strAuto; - _targetElement.css(css); - - //measure width - origWidth = measureElement[LEXICON.oW]; - width = doMeasure ? Math.max(origWidth, measureElement[LEXICON.sW] - 1) : 1; - width += (_widthAutoCache ? _marginX + (!_isBorderBox ? wrapAttrOff ? 0 : _paddingX + _borderX : 0) : 0); - - //set measured width and height auto - css[_strWidth] = _widthAutoCache ? width : _strHundredPercent; - css[_strHeight] = _strAuto; //_strAuto - _targetElement.css(css); - - //measure height - origHeight = measureElement[LEXICON.oH]; - height = Math.max(origHeight, measureElement[LEXICON.sH] - 1); - - //append correct size values - css[_strWidth] = width; - css[_strHeight] = height; - _textareaCoverElement.css(css); - - //apply min width / min height to prevent textarea collapsing - css[_strMinMinus + _strWidth] = minWidth + (!_isBorderBox && _widthAutoCache ? _paddingX + _borderX : 0); - css[_strMinMinus + _strHeight] = minHeight + (!_isBorderBox && _heightAutoCache ? _paddingY + _borderY : 0); - _targetElement.css(css); - - return { - ow: origWidth, - oh: origHeight, - dw: width, - dh: height - }; - } - - /** - * Updates the plugin and DOM to the current options. - * This method should only be called if a update is 100% required. - * @param hostSizeChanged True if this method was called due to a host size change. - * @param contentSizeChanged True if this method was called due to a content size change. - * @param force True if every property shall be updated and the cache shall be ignored. - */ - function update(hostSizeChanged, contentSizeChanged, force) { - var now = compatibility.now(); - var swallow = _swallowUpdateLag > 0 && _initialized && (now - _lastUpdateTime) < _swallowUpdateLag && (!_heightAutoCache && !_widthAutoCache); - clearTimeout(_swallowedUpdateTimeout); - if (swallow) { - _swallowedUpdateParams.h = hostSizeChanged; - _swallowedUpdateParams.c = contentSizeChanged; - _swallowedUpdateParams.f = force; - _swallowedUpdateTimeout = setTimeout(update, _swallowUpdateLag); - } - - //abort update due to: - //destroyed - //swallowing - //sleeping - //host is hidden or has false display - if (_destroyed || swallow || _isSleeping || (_initialized && !force && _hostElement.is(':hidden')) || _hostElement.css('display') === 'inline') - return; - - _lastUpdateTime = now; - hostSizeChanged = hostSizeChanged || _swallowedUpdateParams.h; - contentSizeChanged = contentSizeChanged || _swallowedUpdateParams.c; - force = force || _swallowedUpdateParams.f; - _swallowedUpdateParams = {}; - - hostSizeChanged = hostSizeChanged === undefined ? false : hostSizeChanged; - contentSizeChanged = contentSizeChanged === undefined ? false : contentSizeChanged; - force = force === undefined ? false : force; - - //if scrollbar styling is possible and native scrollbars aren't overlaid the scrollbar styling will be applied which hides the native scrollbars completely. - if (_nativeScrollbarStyling && !(_nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y)) { - //native scrollbars are hidden, so change the values to zero - _nativeScrollbarSize.x = 0; - _nativeScrollbarSize.y = 0; - } - else { - //refresh native scrollbar size (in case of zoom) - _nativeScrollbarSize = extend(true, {}, globals.nativeScrollbarSize); - } - - // Scrollbar padding is needed for firefox, because firefox hides scrollbar automatically if the size of the div is too small. - // The calculation: [scrollbar size +3 *3] - // (+3 because of possible decoration e.g. borders, margins etc., but only if native scrollbar is NOT a overlaid scrollbar) - // (*3 because (1)increase / (2)decrease -button and (3)resize handle) - _nativeScrollbarMinSize = { - x: (_nativeScrollbarSize.x + (_nativeScrollbarIsOverlaid.x ? 0 : 3)) * 3, - y: (_nativeScrollbarSize.y + (_nativeScrollbarIsOverlaid.y ? 0 : 3)) * 3 - }; - - freezeResizeObserver(_sizeObserverElement); - freezeResizeObserver(_sizeAutoObserverElement); - - //save current scroll offset - var currScroll = { - l: _viewportElement[_strScrollLeft](), - t: _viewportElement[_strScrollTop]() - }; - var currentPreparedOptionsCallbacks = _currentPreparedOptions.callbacks; - var currentPreparedOptionsScrollbars = _currentPreparedOptions.scrollbars; - var currentPreparedOptionsTextarea = _currentPreparedOptions.textarea; - - //callbacks - var onUpdated = currentPreparedOptionsCallbacks.onUpdated; - var onOverflowChanged = currentPreparedOptionsCallbacks.onOverflowChanged; - var onOverflowAmountChanged = currentPreparedOptionsCallbacks.onOverflowAmountChanged; - var onDirectionChanged = currentPreparedOptionsCallbacks.onDirectionChanged; - var onContentSizeChanged = currentPreparedOptionsCallbacks.onContentSizeChanged; - var onHostSizeChanged = currentPreparedOptionsCallbacks.onHostSizeChanged; - - //scrollbars visibility: - var scrollbarsVisibility = currentPreparedOptionsScrollbars.visibility; - var scrollbarsVisibilityChanged = checkCacheSingle(scrollbarsVisibility, _scrollbarsVisibilityCache, force); - - //scrollbars autoHide: - var scrollbarsAutoHide = currentPreparedOptionsScrollbars.autoHide; - var scrollbarsAutoHideChanged = checkCacheSingle(scrollbarsAutoHide, _scrollbarsAutoHideCache, force); - - //scrollbars click scrolling - var scrollbarsClickScrolling = currentPreparedOptionsScrollbars.clickScrolling; - var scrollbarsClickScrollingChanged = checkCacheSingle(scrollbarsClickScrolling, _scrollbarsClickScrollingCache, force); - - //scrollbars drag scrolling - var scrollbarsDragScrolling = currentPreparedOptionsScrollbars.dragScrolling; - var scrollbarsDragScrollingChanged = checkCacheSingle(scrollbarsDragScrolling, _scrollbarsDragScrollingCache, force); - - //className - var className = _currentPreparedOptions.className; - var classNameChanged = checkCacheSingle(className, _classNameCache, force); - - //resize - var resize = _currentPreparedOptions.resize; - var resizeChanged = checkCacheSingle(resize, _resizeCache, force) && !_isBody; //body can't be resized since the window itself acts as resize possibility. - - //textarea AutoWrapping - var textareaAutoWrapping = _isTextarea ? _targetElement.attr('wrap') !== 'off' : false; - var textareaAutoWrappingChanged = checkCacheSingle(textareaAutoWrapping, _textareaAutoWrappingCache, force); - - //paddingAbsolute - var paddingAbsolute = _currentPreparedOptions.paddingAbsolute; - var paddingAbsoluteChanged = checkCacheSingle(paddingAbsolute, _paddingAbsoluteCache, force); - - //clipAlways - var clipAlways = _currentPreparedOptions.clipAlways; - var clipAlwaysChanged = checkCacheSingle(clipAlways, _clipAlwaysCache, force); - - //sizeAutoCapable - var sizeAutoCapable = _currentPreparedOptions.sizeAutoCapable && !_isBody; //body can never be size auto, because it shall be always as big as the viewport. - var sizeAutoCapableChanged = checkCacheSingle(sizeAutoCapable, _sizeAutoCapableCache, force); - - //showNativeScrollbars - var ignoreOverlayScrollbarHiding = _currentPreparedOptions.nativeScrollbarsOverlaid.showNativeScrollbars; - var ignoreOverlayScrollbarHidingChanged = checkCacheSingle(ignoreOverlayScrollbarHiding, _ignoreOverlayScrollbarHidingCache); - - //autoUpdate - var autoUpdate = _currentPreparedOptions.autoUpdate; - var autoUpdateChanged = checkCacheSingle(autoUpdate, _autoUpdateCache); - - //overflowBehavior - var overflowBehavior = _currentPreparedOptions.overflowBehavior; - var overflowBehaviorChanged = checkCacheDouble(overflowBehavior, _overflowBehaviorCache, _strX, _strY, force); - - //dynWidth: - var textareaDynWidth = currentPreparedOptionsTextarea.dynWidth; - var textareaDynWidthChanged = checkCacheSingle(_textareaDynWidthCache, textareaDynHeight); - - //dynHeight: - var textareaDynHeight = currentPreparedOptionsTextarea.dynHeight; - var textareaDynHeightChanged = checkCacheSingle(_textareaDynHeightCache, textareaDynHeight); - - //scrollbars visibility - _scrollbarsAutoHideNever = scrollbarsAutoHide === 'n'; - _scrollbarsAutoHideScroll = scrollbarsAutoHide === 's'; - _scrollbarsAutoHideMove = scrollbarsAutoHide === 'm'; - _scrollbarsAutoHideLeave = scrollbarsAutoHide === 'l'; - - //scrollbars autoHideDelay - _scrollbarsAutoHideDelay = currentPreparedOptionsScrollbars.autoHideDelay; - - //scrollbars support touch - _scrollbarsTouchSupport = currentPreparedOptionsScrollbars.touchSupport; - - //old className - _oldClassName = _classNameCache; - - //resize - _resizeNone = resize === 'n'; - _resizeBoth = resize === 'b'; - _resizeHorizontal = resize === 'h'; - _resizeVertical = resize === 'v'; - - //normalizeRTL - _normalizeRTLCache = _currentPreparedOptions.normalizeRTL; - - //ignore overlay scrollbar hiding - ignoreOverlayScrollbarHiding = ignoreOverlayScrollbarHiding && (_nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y); - - //refresh options cache - _scrollbarsVisibilityCache = scrollbarsVisibility; - _scrollbarsAutoHideCache = scrollbarsAutoHide; - _scrollbarsClickScrollingCache = scrollbarsClickScrolling; - _scrollbarsDragScrollingCache = scrollbarsDragScrolling; - _classNameCache = className; - _resizeCache = resize; - _textareaAutoWrappingCache = textareaAutoWrapping; - _paddingAbsoluteCache = paddingAbsolute; - _clipAlwaysCache = clipAlways; - _sizeAutoCapableCache = sizeAutoCapable; - _ignoreOverlayScrollbarHidingCache = ignoreOverlayScrollbarHiding; - _autoUpdateCache = autoUpdate; - _overflowBehaviorCache = extend(true, {}, overflowBehavior); - _textareaDynWidthCache = textareaDynWidth; - _textareaDynHeightCache = textareaDynHeight; - - //set correct class name to the host element - if (classNameChanged) { - removeClass(_hostElement, _oldClassName + _strSpace + _classNameThemeNone) - addClass(_hostElement, className !== undefined && className !== null && className.length > 0 ? className : _classNameThemeNone); - } - - //set correct auto Update - if (autoUpdateChanged) { - if (autoUpdate === true) { - mutationObserversDisconnect(); - autoUpdateLoop.add(_base); - } - else if (autoUpdate === null) { - if (_autoUpdateRecommended) { - mutationObserversDisconnect(); - autoUpdateLoop.add(_base); - } - else { - autoUpdateLoop.remove(_base); - mutationObserversConnect(); - } - } - else { - autoUpdateLoop.remove(_base); - mutationObserversConnect(); - } - } - - //activate or deactivate size auto capability - if (sizeAutoCapableChanged) { - if (sizeAutoCapable) { - if (_contentGlueElement === undefined) { - _contentGlueElement = helper(generateDiv(_classNameContentGlueElement)); - _paddingElement.before(_contentGlueElement); - } - if (_sizeAutoObserverAdded) { - _sizeAutoObserverElement.show(); - } - else { - _sizeAutoObserverElement = helper(generateDiv(_classNameSizeAutoObserverElement)); - _contentGlueElement.before(_sizeAutoObserverElement); - var oldSize = {w: -1, h: -1}; - addResizeObserver(_sizeAutoObserverElement, function () { - var newSize = { - w: _sizeAutoObserverElement[0][LEXICON.oW], - h: _sizeAutoObserverElement[0][LEXICON.oH] - }; - if (checkCacheDouble(newSize, oldSize)) { - if (_initialized && (_heightAutoCache && newSize.h > 0) || (_widthAutoCache && newSize.w > 0)) { - update(); - } - else if (_initialized && (!_heightAutoCache && newSize.h === 0) || (!_widthAutoCache && newSize.w === 0)) { - update(); - } - } - oldSize = newSize; - }); - _sizeAutoObserverAdded = true; - //fix heightAuto detector bug if height is fixed but contentHeight is 0. - //the probability this bug will ever happen is very very low, thats why its ok if we use calc which isn't supported in IE8. - if (_cssCalc !== null) - _sizeAutoObserverElement.css(_strHeight, _cssCalc + '(100% + 1px)'); - } - } - else { - if (_sizeAutoObserverAdded) - _sizeAutoObserverElement.hide(); - } - } - - //if force, update all resizeObservers too - if (force) { - _sizeObserverElement.find('*').trigger(_strScroll); - if (_sizeAutoObserverAdded) - _sizeAutoObserverElement.find('*').trigger(_strScroll); - } - - //detect direction: - var cssDirection = _hostElement.css('direction'); - var cssDirectionChanged = checkCacheSingle(cssDirection, _cssDirectionCache, force); - - //detect box-sizing: - var boxSizing = _hostElement.css('box-sizing'); - var boxSizingChanged = checkCacheSingle(boxSizing, _cssBoxSizingCache, force); - - //detect padding: - var padding = { - c: force, - t: parseIntToZeroOrNumber(_hostElement.css(_strPaddingMinus + _strTop)), - r: parseIntToZeroOrNumber(_hostElement.css(_strPaddingMinus + _strRight)), - b: parseIntToZeroOrNumber(_hostElement.css(_strPaddingMinus + _strBottom)), - l: parseIntToZeroOrNumber(_hostElement.css(_strPaddingMinus + _strLeft)) - }; - - //width + height auto detecting var: - var sizeAutoObserverElementBCRect; - //exception occurs in IE8 sometimes (unknown exception) - try { - sizeAutoObserverElementBCRect = _sizeAutoObserverAdded ? _sizeAutoObserverElement[0].getBoundingClientRect() : null; - } catch (ex) { - return; - } - - _isRTL = cssDirection === 'rtl'; - _isBorderBox = (boxSizing === 'border-box'); - var isRTLLeft = _isRTL ? _strLeft : _strRight; - var isRTLRight = _isRTL ? _strRight : _strLeft; - var hostElement = _hostElement[0]; - var paddingElement = _paddingElement[0]; - - //detect width auto: - var widthAutoResizeDetection = false; - var widthAutoObserverDetection = (_sizeAutoObserverAdded && (_hostElement.css(_strFloat) !== 'none' /*|| _isTextarea */)) ? (Math.round(sizeAutoObserverElementBCRect.right - sizeAutoObserverElementBCRect.left) === 0) && (!paddingAbsolute ? (hostElement[LEXICON.cW] - _paddingX) > 0 : true) : false; - if (sizeAutoCapable && !widthAutoObserverDetection) { - var tmpCurrHostWidth = hostElement[LEXICON.oW]; - var tmpCurrContentGlueWidth = _contentGlueElement.css(_strWidth); - _contentGlueElement.css(_strWidth, _strAuto); - - var tmpNewHostWidth = hostElement[LEXICON.oW]; - _contentGlueElement.css(_strWidth, tmpCurrContentGlueWidth); - widthAutoResizeDetection = tmpCurrHostWidth !== tmpNewHostWidth; - if (!widthAutoResizeDetection) { - _contentGlueElement.css(_strWidth, tmpCurrHostWidth + 1); - tmpNewHostWidth = hostElement[LEXICON.oW]; - _contentGlueElement.css(_strWidth, tmpCurrContentGlueWidth); - widthAutoResizeDetection = tmpCurrHostWidth !== tmpNewHostWidth; - } - } - var widthAuto = (widthAutoObserverDetection || widthAutoResizeDetection) && sizeAutoCapable; - var widthAutoChanged = checkCacheSingle(widthAuto, _widthAutoCache, force); - var wasWidthAuto = !widthAuto && _widthAutoCache; - - //detect height auto: - var heightAuto = _sizeAutoObserverAdded ? (Math.round(sizeAutoObserverElementBCRect.bottom - sizeAutoObserverElementBCRect.top) === 0) /* && (!paddingAbsolute && (_msieVersion > 9 || !_msieVersion) ? true : true) */ : false; - var heightAutoChanged = checkCacheSingle(heightAuto, _heightAutoCache, force); - var wasHeightAuto = !heightAuto && _heightAutoCache; - - //detect border: - //we need the border only if border box and auto size - var strMinusWidth = '-' + _strWidth; - var updateBorderX = (widthAuto && _isBorderBox) || !_isBorderBox; - var updateBorderY = (heightAuto && _isBorderBox) || !_isBorderBox; - var border = { - c: force, - t: updateBorderY ? parseIntToZeroOrNumber(_hostElement.css(_strBorderMinus + _strTop + strMinusWidth)) : 0, - r: updateBorderX ? parseIntToZeroOrNumber(_hostElement.css(_strBorderMinus + _strRight + strMinusWidth)) : 0, - b: updateBorderY ? parseIntToZeroOrNumber(_hostElement.css(_strBorderMinus + _strBottom + strMinusWidth)) : 0, - l: updateBorderX ? parseIntToZeroOrNumber(_hostElement.css(_strBorderMinus + _strLeft + strMinusWidth)) : 0 - }; - - //detect margin: - var margin = { - c: force, - t: parseIntToZeroOrNumber(_hostElement.css(_strMarginMinus + _strTop)), - r: parseIntToZeroOrNumber(_hostElement.css(_strMarginMinus + _strRight)), - b: parseIntToZeroOrNumber(_hostElement.css(_strMarginMinus + _strBottom)), - l: parseIntToZeroOrNumber(_hostElement.css(_strMarginMinus + _strLeft)) - }; - - //detect css max width & height: - var cssMaxValue = { - h: String(_hostElement.css(_strMaxMinus + _strHeight)), - w: String(_hostElement.css(_strMaxMinus + _strWidth)) - }; - - //vars to apply correct css - var contentElementCSS = { }; - var contentGlueElementCSS = { }; - - //set info for padding - _paddingX = padding.l + padding.r; - _paddingY = padding.t + padding.b; - padding.c = checkCacheTRBL(padding, _cssPaddingCache); - - //set info for border - _borderX = border.l + border.r; - _borderY = border.t + border.b; - border.c = checkCacheTRBL(border, _cssBorderCache); - - //set info for margin - _marginX = margin.l + margin.r; - _marginY = margin.t + margin.b; - margin.c = checkCacheTRBL(margin, _cssMarginCache); - - //set info for css max value - cssMaxValue.ih = parseIntToZeroOrNumber(cssMaxValue.h); //ih = integer height - cssMaxValue.iw = parseIntToZeroOrNumber(cssMaxValue.w); //iw = integer width - cssMaxValue.ch = cssMaxValue.h.indexOf('px') > -1; //ch = correct height - cssMaxValue.cw = cssMaxValue.w.indexOf('px') > -1; //cw = correct width - cssMaxValue.c = checkCacheDouble(cssMaxValue, _cssMaxValueCache, force); - - //refresh cache - _cssDirectionCache = cssDirection; - _cssBoxSizingCache = boxSizing; - _widthAutoCache = widthAuto; - _heightAutoCache = heightAuto; - _cssPaddingCache = padding; - _cssBorderCache = border; - _cssMarginCache = margin; - _cssMaxValueCache = cssMaxValue; - - //IEFix direction changed - if (cssDirectionChanged && _sizeAutoObserverAdded) - _sizeAutoObserverElement.css(_strFloat, isRTLRight); - - //apply padding: - if (padding.c || cssDirectionChanged || paddingAbsoluteChanged || widthAutoChanged || heightAutoChanged || boxSizingChanged || sizeAutoCapableChanged) { - var paddingElementCSS = {}; - var textareaCSS = {}; - setTopRightBottomLeft(contentGlueElementCSS, _strMarginMinus, [-padding.t, -padding.r, -padding.b, -padding.l]); - if (paddingAbsolute) { - setTopRightBottomLeft(paddingElementCSS, _strEmpty, [padding.t, padding.r, padding.b, padding.l]); - if (_isTextarea) - setTopRightBottomLeft(textareaCSS, _strPaddingMinus); - else - setTopRightBottomLeft(contentElementCSS, _strPaddingMinus); - } - else { - setTopRightBottomLeft(paddingElementCSS, _strEmpty); - if (_isTextarea) - setTopRightBottomLeft(textareaCSS, _strPaddingMinus, [padding.t, padding.r, padding.b, padding.l]); - else - setTopRightBottomLeft(contentElementCSS, _strPaddingMinus, [padding.t, padding.r, padding.b, padding.l]); - } - _paddingElement.css(paddingElementCSS); - _targetElement.css(textareaCSS); - } - - //viewport size is padding container because it never has padding, margin and a border. - _viewportSize = { - w: paddingElement[LEXICON.oW], - h: paddingElement[LEXICON.oH] - }; - - //update Textarea - var textareaSize = _isTextarea ? textareaUpdate() : false; - - //fix height auto / width auto in cooperation with current padding & boxSizing behavior: - if (heightAuto && (heightAutoChanged || paddingAbsoluteChanged || boxSizingChanged || cssMaxValue.c || padding.c || border.c)) { - if (cssMaxValue.cw) - contentElementCSS[_strMaxMinus + _strHeight] = - (cssMaxValue.ch ? (cssMaxValue.ih - (paddingAbsolute ? _paddingY : 0) + - (_isBorderBox ? -_borderY : _paddingY)) : _strEmpty); - contentElementCSS[_strHeight] = _strAuto; - } else if (heightAutoChanged || paddingAbsoluteChanged) { - contentElementCSS[_strMaxMinus + _strHeight] = _strEmpty; - contentElementCSS[_strHeight] = _strHundredPercent; - } - if (widthAuto && (widthAutoChanged || paddingAbsoluteChanged || boxSizingChanged || cssMaxValue.c || padding.c || border.c || cssDirectionChanged)) { - if (cssMaxValue.cw) - contentElementCSS[_strMaxMinus + _strWidth] = - (cssMaxValue.cw ? (cssMaxValue.iw - (paddingAbsolute ? _paddingX : 0) + - (_isBorderBox ? -_borderX : _paddingX)) + - (_nativeScrollbarIsOverlaid.y /*&& _hasOverflowCache.y && widthAuto */ ? _overlayScrollbarDummySize.y : 0) : _strEmpty); - contentElementCSS[_strWidth] = _strAuto; - contentGlueElementCSS[_strMaxMinus + _strWidth] = _strHundredPercent; //IE Fix - } else if (widthAutoChanged || paddingAbsoluteChanged) { - contentElementCSS[_strMaxMinus + _strWidth] = _strEmpty; - contentElementCSS[_strWidth] = _strHundredPercent; - contentElementCSS[_strFloat] = _strEmpty; - contentGlueElementCSS[_strMaxMinus + _strWidth] = _strEmpty; //IE Fix - } - if (widthAuto) { - if (!cssMaxValue.cw) - contentElementCSS[_strMaxMinus + _strWidth] = _strEmpty; - contentGlueElementCSS[_strWidth] = _isTextarea && textareaDynWidth ? textareaSize.dw : _strAuto; - - contentElementCSS[_strWidth] = _strAuto; - contentElementCSS[_strFloat] = isRTLRight; - } - if (heightAuto) { - if (!cssMaxValue.ch) - contentElementCSS[_strMaxMinus + _strHeight] = _strEmpty; - //fix dyn height collapse bug: (doesn't works for width!) - //contentGlueElementCSS[_strHeight] = _isTextarea && textareaDynHeight ? textareaSize.dh : _strAuto; - contentGlueElementCSS[_strHeight] = _isTextarea ? textareaDynHeight ? textareaSize.dh : _strAuto : _contentElement[0][LEXICON.cH]; - } - if (sizeAutoCapable) - _contentGlueElement.css(contentGlueElementCSS); - _contentElement.css(contentElementCSS); - - - //CHECKPOINT HERE ~ - contentElementCSS = {}; - contentGlueElementCSS = {}; - _hasOverflowCache = _hasOverflowCache || {x: false, y: false}; - - //if [content(host) client / scroll size, or target element direction, or content(host) max-sizes] changed, or force is true - if (hostSizeChanged || contentSizeChanged || cssDirectionChanged || boxSizingChanged || paddingAbsoluteChanged || widthAutoChanged || widthAuto || heightAutoChanged || heightAuto || cssMaxValue.c || ignoreOverlayScrollbarHidingChanged || overflowBehaviorChanged || clipAlwaysChanged || resizeChanged || scrollbarsVisibilityChanged || textareaDynWidthChanged || textareaDynHeightChanged || textareaAutoWrappingChanged || paddingAbsoluteChanged || textareaDynWidthChanged || textareaDynHeightChanged || force) { - var strOverflow = 'overflow'; - var strOverflowX = strOverflow + '-x'; - var strOverflowY = strOverflow + '-y'; - var strHidden = 'hidden'; - var strVisible = 'visible'; - //decide whether the content overflow must get hidden for correct overflow measuring, it MUST be always hidden if the height is auto - var hideOverflow4CorrectMeasuring = _restrictedMeasuring ? - (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) || //it must be hidden if native scrollbars are overlaid - (_viewportSize.w < _nativeScrollbarMinSize.y || _viewportSize.h < _nativeScrollbarMinSize.x) || //it must be hidden if host-element is too small - heightAuto //it must be hidden if height is auto - : heightAuto; //if there is not the restricted Measuring bug, it must be hidden if the height is auto - - //Reset the viewport (very important for natively overlaid scrollbars and zoom change - var viewportElementResetCSS = {}; - var resetXTmp = _hasOverflowCache.y && _hideOverflowCache.ys && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.y ? _viewportElement.css(isRTLLeft) : -_nativeScrollbarSize.y) : 0; - var resetBottomTmp = _hasOverflowCache.x && _hideOverflowCache.xs && !ignoreOverlayScrollbarHiding ? (_nativeScrollbarIsOverlaid.x ? _viewportElement.css(_strBottom) : -_nativeScrollbarSize.x) : 0; - setTopRightBottomLeft(viewportElementResetCSS, _strEmpty); - _viewportElement.css(viewportElementResetCSS); - - if(hideOverflow4CorrectMeasuring) - _contentElement.css(strOverflow, strHidden); - - //measure several sizes: - var contentMeasureElement = getContentMeasureElement(); - //in Firefox content element has to have overflow hidden, else element margins aren't calculated properly, this element prevents this bug, but only if scrollbars aren't overlaid - var contentMeasureElementGuaranty = _restrictedMeasuring && !hideOverflow4CorrectMeasuring ? _viewportElement[0] : contentMeasureElement; - var clientSize = { - w: contentMeasureElement[LEXICON.cW], - h: contentMeasureElement[LEXICON.cH] - }; - var scrollSize = { - w: Math.max(contentMeasureElement[LEXICON.sW], contentMeasureElementGuaranty[LEXICON.sW]), - h: Math.max(contentMeasureElement[LEXICON.sH], contentMeasureElementGuaranty[LEXICON.sH]) - }; - var contentClientSize = { - w: _isTextarea && textareaSize && !textareaDynWidth ? textareaSize.ow : widthAuto ? clientSize.w : scrollSize.w, - h: _isTextarea && textareaSize && !textareaDynHeight ? textareaSize.oh : heightAuto ? clientSize.h : scrollSize.h - }; - - //apply the correct viewport style - viewportElementResetCSS[_strBottom] = wasHeightAuto ? _strEmpty : resetBottomTmp; - viewportElementResetCSS[isRTLLeft] = wasWidthAuto ? _strEmpty : resetXTmp; - _viewportElement.css(viewportElementResetCSS); - - //measure and correct several sizes - //has to be clientSize because offsetSize respect borders. - var hostSize = { - w: hostElement[LEXICON.cW], - h: hostElement[LEXICON.cH] - }; - var contentGlueSize = { - w: Math.max(contentClientSize.w + (paddingAbsolute ? _paddingX : 0), hostSize.w - _paddingX) - (textareaDynWidth ? (_isTextarea && widthAuto ? _marginX + (!_isBorderBox ? _paddingX + _borderX : 0) : 0) : 0), - h: Math.max(contentClientSize.h + (paddingAbsolute ? _paddingY : 0), hostSize.h - _paddingY) - }; - contentGlueSize.c = checkCacheDouble(contentGlueSize, _contentGlueSizeCache, force); - _contentGlueSizeCache = contentGlueSize; - - //apply correct contentGlue size - if (sizeAutoCapable) { - //size contentGlue correctly to make sure the element has correct size if the sizing switches to auto - if (contentGlueSize.c || (heightAuto || widthAuto)) { - contentGlueElementCSS[_strWidth] = contentGlueSize.w; - contentGlueElementCSS[_strHeight] = contentGlueSize.h; - } - - var maxWidth = contentGlueElementCSS[_strWidth] + (_isBorderBox ? _borderX : -_paddingX); - var maxHeight = contentGlueElementCSS[_strHeight] + (_isBorderBox ? _borderY : -_paddingX); - var textareaCoverCSS = {}; - - //make contentGlue size -1 if element is not auto sized, to make sure that a resize event happens when the element shrinks - if (!widthAuto || (!widthAuto && border.c)) - contentGlueElementCSS[_strWidth] = hostSize.w - (_isBorderBox ? 0 : _paddingX + _borderX) - 1 - _marginX; - if (!heightAuto || (!heightAuto && border.c)) - contentGlueElementCSS[_strHeight] = hostSize.h - (_isBorderBox ? 0 : _paddingY + _borderY) - 1 - _marginY; - - //if size is auto and host is same size as max size, make content glue size +1 to make sure size changes will be detected - if (cssMaxValue.cw && cssMaxValue.iw === maxWidth) - contentGlueElementCSS[_strWidth] = maxWidth + (_isBorderBox ? 0 : _paddingX) + 1; - if (cssMaxValue.ch && cssMaxValue.ih === maxHeight) - contentGlueElementCSS[_strHeight] = maxHeight + (_isBorderBox ? 0 : _paddingY) + 1; - - //if size is auto and host is smaller than size as min size, make content glue size -1 to make sure size changes will be detected (this is only needed if padding is 0) - if (widthAuto && (clientSize.w < _viewportSize.w || _isTextarea && !textareaAutoWrapping) && _paddingX === 0) { - if (_isTextarea) - textareaCoverCSS[_strWidth] = parseIntToZeroOrNumber(_textareaCoverElement.css(_strWidth)) - 1; - contentGlueElementCSS[_strWidth] -= 1; - } - if (heightAuto && (clientSize.h < _viewportSize.h || _isTextarea) && _paddingY === 0) { - if (_isTextarea) - textareaCoverCSS[_strHeight] = parseIntToZeroOrNumber(_textareaCoverElement.css(_strHeight)) - 1; - contentGlueElementCSS[_strHeight] -= 1; - } - - //make sure content glue size at least 1 - if (contentClientSize.h > 0) { - contentGlueElementCSS[_strWidth] = Math.max(1, contentGlueElementCSS[_strWidth]); - contentGlueElementCSS[_strHeight] = Math.max(1, contentGlueElementCSS[_strHeight]); - } - - if (_isTextarea) - _textareaCoverElement.css(textareaCoverCSS); - _contentGlueElement.css(contentGlueElementCSS); - } - if (widthAuto) - contentElementCSS[_strWidth] = _strHundredPercent; - if (widthAuto && !_isBorderBox && !_mutationObserverConnected) - contentElementCSS[_strFloat] = 'none'; - - - //apply and reset content style - _contentElement.css(contentElementCSS); - contentElementCSS = {}; - - //measure again, but this time all correct sizes: - var contentBCRect = contentMeasureElement.getBoundingClientRect(); - var contentScrollSize = { - w: Math.max(contentMeasureElement[LEXICON.sW], contentMeasureElementGuaranty[LEXICON.sW]), - h: Math.max(contentMeasureElement[LEXICON.sH], contentMeasureElementGuaranty[LEXICON.sH]) - }; - if(hideOverflow4CorrectMeasuring) - _contentElement.css(strOverflow, _strEmpty); - if (contentBCRect.width) { - var contentBCRectW = contentBCRect.width; - var contentBCRectH = contentBCRect.height; - var contentBCRectMargin = 0.001; - contentScrollSize.w += parseIntToZeroOrNumber(contentBCRectW + contentBCRectMargin) - contentBCRectW; - contentScrollSize.h += parseIntToZeroOrNumber(contentBCRectH + contentBCRectMargin) - contentBCRectH; - } - contentScrollSize.c = contentSizeChanged = checkCacheDouble(contentScrollSize, _contentScrollSizeCache, force); - _contentScrollSizeCache = contentScrollSize; - - //has to be clientSize because offsetSize respect borders. - hostSize = { - w: hostElement[LEXICON.cW], - h: hostElement[LEXICON.cH] - }; - hostSizeChanged = checkCacheDouble(hostSize, _hostSizeCache); - _hostSizeCache = hostSize; - - //viewport size is padding container because it never has padding, margin and a border. - _viewportSize = { - w: paddingElement[LEXICON.oW], - h: paddingElement[LEXICON.oH] - }; - - var overflowBehaviorIsVS = { - x: overflowBehavior.x === 'v-s', - y: overflowBehavior.y === 'v-s' - }; - var overflowBehaviorIsVH = { - x: overflowBehavior.x === 'v-h', - y: overflowBehavior.y === 'v-h' - }; - var overflowBehaviorIsS = { - x: overflowBehavior.x === 's', - y: overflowBehavior.y === 's' - }; - /* - * var overflowBehaviorIsH = { - * x : overflowBehavior.x === 'h', - * y : overflowBehavior.y === 'h' - * }; - */ - var overflowAmount = { - x: Math.max(0, Math.round((contentScrollSize.w - hostSize.w + (paddingAbsolute ? _paddingX : 0)) * 100) / 100), - y: Math.max(0, Math.round((contentScrollSize.h - hostSize.h + (paddingAbsolute ? _paddingY : 0)) * 100) / 100) - }; - var hideOverflowForceTextarea = _isTextarea && (_viewportSize.w === 0 || _viewportSize.h === 0); - if (hideOverflowForceTextarea) { - overflowAmount.x = 0; - overflowAmount.y = 0; - } - var hasOverflow = { - x: overflowAmount.x > 0, - y: overflowAmount.y > 0 - }; - //hideOverflow: - //x || y : true === overflow is hidden by "overflow: scroll" OR "overflow: hidden" - //xs || ys : true === overflow is hidden by "overflow: scroll" - var hideOverflow = {x: hasOverflow.x, y: hasOverflow.y}; - if (overflowBehaviorIsVS.x || overflowBehaviorIsVH.x) - hideOverflow.x = (hasOverflow.y && !overflowBehaviorIsVS.y && !overflowBehaviorIsVH.y); - if (overflowBehaviorIsVS.y || overflowBehaviorIsVH.y) - hideOverflow.y = (hasOverflow.x && !overflowBehaviorIsVS.x && !overflowBehaviorIsVH.x); - hideOverflow.xs = hideOverflow.x ? (overflowBehaviorIsS.x || overflowBehaviorIsVS.x) : false; - hideOverflow.ys = hideOverflow.y ? (overflowBehaviorIsS.y || overflowBehaviorIsVS.y) : false; - - var canScroll = { - x: hasOverflow.x && hideOverflow.xs, - y: hasOverflow.y && hideOverflow.ys - }; - var previousOverflow = _overflowAmountCache; - overflowAmount.c = checkCacheDouble(overflowAmount, _overflowAmountCache, _strX, _strY, force); - _overflowAmountCache = overflowAmount; - hasOverflow.c = checkCacheDouble(hasOverflow, _hasOverflowCache, _strX, _strY, force); - _hasOverflowCache = hasOverflow; - hideOverflow.c = checkCacheDouble(hideOverflow, _hideOverflowCache, _strX, _strY, force); - _hideOverflowCache = hideOverflow; - - //if native scrollbar is overlay at x OR y axis, prepare DOM - if (_nativeScrollbarIsOverlaid.x || _nativeScrollbarIsOverlaid.y) { - var arrangeChanged = force; - var arrangeContent = {}; - if (hasOverflow.x || hasOverflow.y) { - arrangeContent.w = _nativeScrollbarIsOverlaid.y && hasOverflow.y ? contentScrollSize.w + _overlayScrollbarDummySize.y : _strEmpty; - arrangeContent.h = _nativeScrollbarIsOverlaid.x && hasOverflow.x ? contentScrollSize.h + _overlayScrollbarDummySize.x : _strEmpty; - - arrangeChanged = checkCacheSingle(arrangeContent, _arrangeContentSizeCache, force); - _arrangeContentSizeCache = arrangeContent; - } - - if (hasOverflow.c || hideOverflow.c || contentScrollSize.c || cssDirectionChanged || widthAutoChanged || heightAutoChanged || widthAuto || heightAuto || ignoreOverlayScrollbarHidingChanged) { - var borderDesign = 'px solid transparent'; - contentElementCSS[_strBorderMinus + isRTLRight] = _strEmpty; - contentElementCSS[_strMarginMinus + isRTLRight] = _strEmpty; - if (_nativeScrollbarIsOverlaid.x && hasOverflow.x && hideOverflow.xs) { - if (heightAuto) - contentElementCSS[_strMarginMinus + _strBottom] = ignoreOverlayScrollbarHiding ? _strEmpty : _overlayScrollbarDummySize.x; - if (!heightAuto && !ignoreOverlayScrollbarHiding) - contentElementCSS[_strBorderMinus + _strBottom] = _overlayScrollbarDummySize.x + borderDesign; - else - contentElementCSS[_strBorderMinus + _strBottom] = _strEmpty; - } - else { - arrangeContent.h = _strEmpty; - arrangeChanged = true; - contentElementCSS[_strBorderMinus + _strBottom] = _strEmpty; - contentElementCSS[_strMarginMinus + _strBottom] = _strEmpty; - } - if (_nativeScrollbarIsOverlaid.y && hasOverflow.y && hideOverflow.ys) { - if (widthAuto) - contentElementCSS[_strMarginMinus + isRTLLeft] = ignoreOverlayScrollbarHiding ? _strEmpty : _overlayScrollbarDummySize.y; - if (/* !widthAuto && */ !ignoreOverlayScrollbarHiding) - contentElementCSS[_strBorderMinus + isRTLLeft] = _overlayScrollbarDummySize.y + borderDesign; - else - contentElementCSS[_strBorderMinus + isRTLLeft] = _strEmpty; - } - else { - arrangeContent.w = _strEmpty; - arrangeChanged = true; - contentElementCSS[_strBorderMinus + isRTLLeft] = _strEmpty; - contentElementCSS[_strMarginMinus + isRTLLeft] = _strEmpty; - } - } - if (ignoreOverlayScrollbarHiding) { - arrangeContent.w = _strEmpty; - arrangeContent.h = _strEmpty; - arrangeChanged = true; - } - if (arrangeChanged) { - var contentArrangeElementCSS = {}; - contentArrangeElementCSS[_strWidth] = hideOverflow.y ? arrangeContent.w : _strEmpty; - contentArrangeElementCSS[_strHeight] = hideOverflow.x ? arrangeContent.h : _strEmpty; - - if (_contentArrangeElement === undefined) { - _contentArrangeElement = helper(generateDiv(_classNameContentArrangeElement)); - _viewportElement.prepend(_contentArrangeElement); - } - _contentArrangeElement.css(contentArrangeElementCSS); - } - _contentElement.css(contentElementCSS); - } - - var viewportElementCSS = {}; - var paddingElementCSS = {}; - if (hostSizeChanged || hasOverflow.c || hideOverflow.c || contentScrollSize.c || overflowBehaviorChanged || boxSizingChanged || ignoreOverlayScrollbarHidingChanged || cssDirectionChanged || clipAlwaysChanged || heightAutoChanged) { - viewportElementCSS[isRTLRight] = _strEmpty; - var resetScrollbarHidingX = function () { - viewportElementCSS[_strBottom] = _strEmpty; - _contentBorderSize.h = 0; - }; - var resetScrollbarHidingY = function () { - viewportElementCSS[isRTLLeft] = _strEmpty; - _contentBorderSize.w = 0; - }; - if (hasOverflow.x && hideOverflow.xs) { - viewportElementCSS[strOverflowX] = _strScroll; - if (!ignoreOverlayScrollbarHiding) { - viewportElementCSS[_strBottom] = -(_nativeScrollbarIsOverlaid.x ? _overlayScrollbarDummySize.x : _nativeScrollbarSize.x); - _contentBorderSize.h = _nativeScrollbarIsOverlaid.x ? _overlayScrollbarDummySize.y : 0; - } - else - resetScrollbarHidingX(); - } else { - viewportElementCSS[strOverflowX] = _strEmpty; - resetScrollbarHidingX(); - } - if (hasOverflow.y && hideOverflow.ys) { - viewportElementCSS[strOverflowY] = _strScroll; - if (!ignoreOverlayScrollbarHiding) { - viewportElementCSS[isRTLLeft] = -(_nativeScrollbarIsOverlaid.y ? _overlayScrollbarDummySize.y : _nativeScrollbarSize.y); - _contentBorderSize.w = _nativeScrollbarIsOverlaid.y ? _overlayScrollbarDummySize.x : 0; - } - else - resetScrollbarHidingY(); - } else { - viewportElementCSS[strOverflowY] = _strEmpty; - resetScrollbarHidingY(); - } - - - // if the scroll container is too small and if there is any overflow with not overlay scrollbar, make viewport element greater in size (Firefox hide Scrollbars fix) - // because firefox starts hiding scrollbars on too small elements - // with this behavior the overflow calculation may be incorrect or the scrollbars would appear suddenly - // https://bugzilla.mozilla.org/show_bug.cgi?id=292284 - if ((_viewportSize.h < _nativeScrollbarMinSize.x || _viewportSize.w < _nativeScrollbarMinSize.y) - && ((hasOverflow.x && hideOverflow.x && !_nativeScrollbarIsOverlaid.x) || (hasOverflow.y && hideOverflow.y && !_nativeScrollbarIsOverlaid.y))) { - viewportElementCSS[_strPaddingMinus + _strTop] = _nativeScrollbarMinSize.x; - viewportElementCSS[_strMarginMinus + _strTop] = -_nativeScrollbarMinSize.x; - - viewportElementCSS[_strPaddingMinus + isRTLRight] = _nativeScrollbarMinSize.y; - viewportElementCSS[_strMarginMinus + isRTLRight] = -_nativeScrollbarMinSize.y; - } - else { - viewportElementCSS[_strPaddingMinus + _strTop] = _strEmpty; - viewportElementCSS[_strMarginMinus + _strTop] = _strEmpty; - - viewportElementCSS[_strPaddingMinus + isRTLRight] = _strEmpty; - viewportElementCSS[_strMarginMinus + isRTLRight] = _strEmpty; - } - viewportElementCSS[_strPaddingMinus + isRTLLeft] = _strEmpty; - viewportElementCSS[_strMarginMinus + isRTLLeft] = _strEmpty; - - //if there is any overflow (x OR y axis) and this overflow shall be hidden, make overflow hidden, else overflow visible - if ((hasOverflow.x && hideOverflow.x) || (hasOverflow.y && hideOverflow.y) || hideOverflowForceTextarea) { - //only hide if is Textarea - if (_isTextarea && hideOverflowForceTextarea) { - paddingElementCSS[strOverflowX] = strHidden; - paddingElementCSS[strOverflowY] = strHidden; - } - } - else { - if (!clipAlways || (overflowBehaviorIsVH.x || overflowBehaviorIsVS.x || overflowBehaviorIsVH.y || overflowBehaviorIsVS.y)) { - //only un-hide if Textarea - if (_isTextarea) { - paddingElementCSS[strOverflowX] = _strEmpty; - paddingElementCSS[strOverflowY] = _strEmpty; - } - viewportElementCSS[strOverflowX] = strVisible; - viewportElementCSS[strOverflowY] = strVisible; - } - } - - _paddingElement.css(paddingElementCSS); - _viewportElement.css(viewportElementCSS); - viewportElementCSS = {}; - - //force soft redraw in webkit because without the scrollbars will may appear because DOM wont be redrawn under special conditions - if ((hasOverflow.c || boxSizingChanged || widthAutoChanged || heightAutoChanged) && !(_nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y)) { - var element = _contentElement[0]; - var elementStyle = element.style; - elementStyle.webkitTransform = 'scale(1)'; - elementStyle.display = 'run-in'; - var dump = element[LEXICON.oH]; - elementStyle.display = _strEmpty; - elementStyle.webkitTransform = _strEmpty; - } - //force hard redraw in webkit if native overlaid scrollbars shall appear - if (ignoreOverlayScrollbarHidingChanged && ignoreOverlayScrollbarHiding) { - _hostElement.hide(); - var dump = hostElement[LEXICON.oH]; - _hostElement.show(); - } - } - - //change to direction RTL and width auto Bugfix in Webkit - //without this fix, the DOM still thinks the scrollbar is LTR and thus the content is shifted to the left - contentElementCSS = {}; - if (cssDirectionChanged || widthAutoChanged || heightAutoChanged) { - if (_isRTL && widthAuto) { - var floatTmp = _contentElement.css(_strFloat); - var posLeftWithoutFloat = Math.round(_contentElement.css(_strFloat, _strEmpty).css(_strLeft, _strEmpty).position().left); - _contentElement.css(_strFloat, floatTmp); - var posLeftWithFloat = Math.round(_contentElement.position().left); - - if (posLeftWithoutFloat !== posLeftWithFloat) - contentElementCSS[_strLeft] = posLeftWithoutFloat; - } - else { - contentElementCSS[_strLeft] = _strEmpty; - } - } - _contentElement.css(contentElementCSS); - - //scrollbars management: - var scrollbarsVisibilityVisible = scrollbarsVisibility === 'v'; - var scrollbarsVisibilityHidden = scrollbarsVisibility === 'h'; - var scrollbarsVisibilityAuto = scrollbarsVisibility === 'a'; - - var showScrollbarH = compatibility.bind(refreshScrollbarAppearance, 0, true, true, canScroll.x); - var showScrollbarV = compatibility.bind(refreshScrollbarAppearance, 0, false, true, canScroll.y); - var hideScrollbarH = compatibility.bind(refreshScrollbarAppearance, 0, true, false, canScroll.x); - var hideScrollbarV = compatibility.bind(refreshScrollbarAppearance, 0, false, false, canScroll.y); - - //manage class name which indicates scrollable overflow - if (hideOverflow.x || hideOverflow.y) - addClass(_hostElement, _classNameHostOverflow); - else - removeClass(_hostElement, _classNameHostOverflow); - if (hideOverflow.x) - addClass(_hostElement, _classNameHostOverflowX); - else - removeClass(_hostElement, _classNameHostOverflowX); - if (hideOverflow.y) - addClass(_hostElement, _classNameHostOverflowY); - else - removeClass(_hostElement, _classNameHostOverflowY); - - //add or remove rtl class name for styling purposes - if (cssDirectionChanged) { - if (_isRTL) - addClass(_hostElement, _classNameHostRTL); - else - removeClass(_hostElement, _classNameHostRTL); - } - - //manage the resize feature (CSS3 resize "polyfill" for this plugin) - if (_isBody) - addClass(_hostElement, _classNameHostResizeDisabled); - if (resizeChanged) { - var addCornerEvents = function () { - _scrollbarCornerElement.on(_strMouseTouchDownEvent, scrollbarCornerOnMouseDown); - }; - var removeCornerEvents = function () { - _scrollbarCornerElement.off(_strMouseTouchDownEvent, scrollbarCornerOnMouseDown); - }; - if (_resizeNone) { - addClass(_hostElement, _classNameHostResizeDisabled); - removeClass(_scrollbarCornerElement, [ - _classNameScrollbarCornerResize, - _classNameScrollbarCornerResizeB, - _classNameScrollbarCornerResizeH, - _classNameScrollbarCornerResizeV].join(_strSpace)); - removeCornerEvents(); - } - else { - removeClass(_hostElement, _classNameHostResizeDisabled); - addClass(_scrollbarCornerElement, _classNameScrollbarCornerResize); - if (_resizeBoth) - addClass(_scrollbarCornerElement, _classNameScrollbarCornerResizeB); - else if (_resizeHorizontal) - addClass(_scrollbarCornerElement, _classNameScrollbarCornerResizeH); - else if (_resizeVertical) - addClass(_scrollbarCornerElement, _classNameScrollbarCornerResizeV); - - removeCornerEvents(); - addCornerEvents(); - } - } - - //manage the scrollbars general visibility + the scrollbar interactivity (unusable class name) - if (scrollbarsVisibilityChanged || overflowBehaviorChanged || hideOverflow.c || hasOverflow.c || ignoreOverlayScrollbarHidingChanged) { - if (ignoreOverlayScrollbarHiding) { - if (ignoreOverlayScrollbarHidingChanged) { - removeClass(_hostElement, _classNameHostScrolling); - if (ignoreOverlayScrollbarHiding) { - hideScrollbarH(); - hideScrollbarV(); - } - } - } - else if (scrollbarsVisibilityAuto) { - if (canScroll.x) - showScrollbarH(); - else - hideScrollbarH(); - - if (canScroll.y) - showScrollbarV(); - else - hideScrollbarV(); - } - else if (scrollbarsVisibilityVisible) { - showScrollbarH(); - showScrollbarV(); - } - else if (scrollbarsVisibilityHidden) { - hideScrollbarH(); - hideScrollbarV(); - } - } - - //manage the scrollbars auto hide feature (auto hide them after specific actions) - if (scrollbarsAutoHideChanged || ignoreOverlayScrollbarHidingChanged) { - var addMouseTouchEvents = function (move) { - if (_supportPassiveEvents) { - if(move) - addPassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove); - else { - addPassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter); - addPassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave); - } - } - else { - if(move) - _hostElement.on(_strMouseTouchMoveEvent, hostOnMouseMove); - else { - _hostElement.on(_strMouseTouchEnter, hostOnMouseEnter) - .on(_strMouseTouchLeave, hostOnMouseLeave); - } - } - }; - var removeMouseTouchEvents = function () { - if (_supportPassiveEvents) { - removePassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove); - removePassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter); - removePassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave); - } - else { - _hostElement.off(_strMouseTouchMoveEvent, hostOnMouseMove) - .off(_strMouseTouchEnter, hostOnMouseEnter) - .off(_strMouseTouchLeave, hostOnMouseLeave); - } - }; - if (_scrollbarsAutoHideLeave || _scrollbarsAutoHideMove) { - removeMouseTouchEvents(); - addMouseTouchEvents(_scrollbarsAutoHideMove); - } - else { - removeMouseTouchEvents(); - } - - if (_scrollbarsAutoHideNever) - refreshScrollbarsAutoHide(true); - else - refreshScrollbarsAutoHide(false, true); - } - - //manage scrollbars handle length and offset - if (hostSizeChanged || overflowAmount.c || heightAutoChanged || widthAutoChanged || resizeChanged || boxSizingChanged || paddingAbsoluteChanged || ignoreOverlayScrollbarHidingChanged || cssDirectionChanged) { - refreshScrollbarHandleLength(true); - refreshScrollbarHandleOffset(true, currScroll.l); - refreshScrollbarHandleLength(false); - refreshScrollbarHandleOffset(false, currScroll.t); - } - - //manage interactivity - if (scrollbarsClickScrollingChanged) - refreshScrollbarsInteractive(true, scrollbarsClickScrolling); - if (scrollbarsDragScrollingChanged) - refreshScrollbarsInteractive(false, scrollbarsDragScrolling); - - //handle scroll - if (_isTextarea && contentSizeChanged) { - var textareaInfo = getTextareaInfo(); - if (textareaInfo) { - var textareaRowsChanged = _textareaInfoCache === undefined ? true : textareaInfo.rows !== _textareaInfoCache.rows; - var cursorRow = textareaInfo.cR; - var cursorCol = textareaInfo.cC; - var widestRow = textareaInfo.w; - var lastRow = textareaInfo.r; - var lastCol = textareaInfo.c; - var cursorPos = textareaInfo.p; - var cursorMax = textareaInfo.m; - var cursorIsLastPosition = (cursorMax === cursorPos && _textareaHasFocus); - var doScroll = { - x: (!textareaAutoWrapping && (cursorCol === lastCol && cursorRow === widestRow)) ? _overflowAmountCache.x : -1, - y: (textareaAutoWrapping ? cursorIsLastPosition || textareaRowsChanged && (previousOverflow !== undefined ? (currScroll.t === previousOverflow.y) : false) : (cursorIsLastPosition || textareaRowsChanged) && cursorRow === lastRow) ? _overflowAmountCache.y : -1 - }; - var doScrollX = doScroll.x > -1; - var doScrollY = doScroll.y > -1; - - if (doScrollX || doScrollY) { - if (doScrollY) - _viewportElement[_strScrollTop](doScroll.y); - if (doScrollX) { - if (_isRTL && _normalizeRTLCache && _rtlScrollBehavior.i) - _viewportElement[_strScrollLeft](0); //if inverted, scroll to 0 -> normalized this means to max scroll offset. - else - _viewportElement[_strScrollLeft](doScroll.x); - } - } - } - _textareaInfoCache = textareaInfo; - } - else if (!_isTextarea) { - if (_isRTL && _rtlScrollBehavior.i && _nativeScrollbarIsOverlaid.y && hasOverflow.x && _normalizeRTLCache) - currScroll.l += _contentBorderSize.w || 0; - _viewportElement[_strScrollLeft](currScroll.l); - _viewportElement[_strScrollTop](currScroll.t); - } - - if (cssDirectionChanged) { - callCallback(onDirectionChanged, { - isRTL: _isRTL, - dir: cssDirection - }); - } - if (hostSizeChanged) { - callCallback(onHostSizeChanged, { - width: _hostSizeCache.w, - height: _hostSizeCache.h - }); - } - if (contentSizeChanged) { - callCallback(onContentSizeChanged, { - width: _contentScrollSizeCache.w, - height: _contentScrollSizeCache.h - }); - } - if (hasOverflow.c || hideOverflow.c) { - callCallback(onOverflowChanged, { - x: hasOverflow.x, - y: hasOverflow.y, - xScrollable: hideOverflow.xs, - yScrollable: hideOverflow.ys, - clipped: hideOverflow.x || hideOverflow.y - }); - } - if (overflowAmount.c) { - callCallback(onOverflowAmountChanged, { - x: overflowAmount.x, - y: overflowAmount.y - }); - } - } - - //fix body min size - if (_isBody && (hasOverflow.c || _bodyMinSizeCache.c)) { - //its possible that no min size was measured until now, because the content arrange element was just added now, in this case, measure now the min size. - if (!_bodyMinSizeCache.f) - bodyMinSizeChanged(); - if (_nativeScrollbarIsOverlaid.y && hasOverflow.x) - _contentElement.css(_strMinMinus + _strWidth, _bodyMinSizeCache.w + _overlayScrollbarDummySize.y); - if (_nativeScrollbarIsOverlaid.x && hasOverflow.y) - _contentElement.css(_strMinMinus + _strHeight, _bodyMinSizeCache.h + _overlayScrollbarDummySize.x); - _bodyMinSizeCache.c = false; - } - - unfreezeResizeObserver(_sizeObserverElement); - unfreezeResizeObserver(_sizeAutoObserverElement); - - callCallback(onUpdated, { forced: force }); - } - - - //==== Options ====// - - /** - * Sets new options but doesn't call the update method. - * @param newOptions The object which contains the new options. - */ - function setOptions(newOptions) { - _currentOptions = extend(true, {}, _currentOptions, _pluginsOptions.v(newOptions, _pluginsOptions.t, true)); - _currentPreparedOptions = extend(true, {}, _currentPreparedOptions, _pluginsOptions.v(newOptions, _pluginsOptions.t, false, true)); - } - - - //==== Scrollbars ====// - - /** - * Builds all scrollbars if they aren't already build. - */ - function buildScrollbars() { - - _scrollbarHorizontalElement = helper(generateDiv(_classNameScrollbar + _strSpace + _classNameScrollbarHorizontal)); - _scrollbarHorizontalTrackElement = helper(generateDiv(_classNameScrollbarTrack)); - _scrollbarHorizontalHandleElement = helper(generateDiv(_classNameScrollbarHandle)); - _scrollbarVerticalElement = helper(generateDiv(_classNameScrollbar + _strSpace + _classNameScrollbarVertical)); - _scrollbarVerticalTrackElement = helper(generateDiv(_classNameScrollbarTrack)); - _scrollbarVerticalHandleElement = helper(generateDiv(_classNameScrollbarHandle)); - - _scrollbarHorizontalElement.append(_scrollbarHorizontalTrackElement); - _scrollbarHorizontalTrackElement.append(_scrollbarHorizontalHandleElement); - _scrollbarVerticalElement.append(_scrollbarVerticalTrackElement); - _scrollbarVerticalTrackElement.append(_scrollbarVerticalHandleElement); - - _paddingElement.after(_scrollbarVerticalElement); - _paddingElement.after(_scrollbarHorizontalElement); - - //scrollbar events - if (_supportTransition) { - _scrollbarHorizontalElement.on(_strTransitionEndEvent, function (event) { - if (event.target !== _scrollbarHorizontalElement[0]) - return; - refreshScrollbarHandleLength(true); - refreshScrollbarHandleOffset(true, _viewportElement[_strScrollLeft]()); - }); - _scrollbarVerticalElement.on(_strTransitionEndEvent, function (event) { - if (event.target !== _scrollbarVerticalElement[0]) - return; - refreshScrollbarHandleLength(false); - refreshScrollbarHandleOffset(false, _viewportElement[_strScrollTop]()); - }); - } - initScrollbarInteractivity(true); - initScrollbarInteractivity(false); - _scrollbarCornerElement = helper(generateDiv(_classNameScrollbarCorner)); - _hostElement.append(_scrollbarCornerElement); - } - - /** - * Initializes all scrollbar interactivity. (track and handle dragging, clicking, scrolling) - * @param isHorizontal True if the target scrollbar is the horizontal scrollbar, false if the target scrollbar is the vertical scrollbar. - */ - function initScrollbarInteractivity(isHorizontal) { - var scrollbarVars = getScrollbarVars(isHorizontal); - var mouseDownScroll; - var mouseDownOffset; - var xy = scrollbarVars.xy; - var scroll = _strScroll + scrollbarVars.LT; - var strActive = 'active'; - var trackTimeout; - var scrollDurationFactor = 1; - var increaseTrackScrollAmount = function () { - scrollDurationFactor = 0.5; - }; - var decreaseTrackScrollAmount = function () { - scrollDurationFactor = 1; - }; - var handleDragMove = function (event) { - var trackLength = scrollbarVars.i.tl; - var handleLength = scrollbarVars.i.hl; - var scrollRange = scrollbarVars.i.ms; - var scrollRaw = (handleLength / 2) + compatibility.page(event)[xy] - mouseDownOffset; - var scrollDeltaPercent = (scrollRaw - (handleLength / 2)) / (trackLength - handleLength); - var scrollDelta = (scrollRange * scrollDeltaPercent); - scrollDelta = isFinite(scrollDelta) ? scrollDelta : 0; - if (_isRTL && isHorizontal && (_rtlScrollBehavior.n || !_rtlScrollBehavior.n && !_rtlScrollBehavior.i)) - scrollDelta *= -1; - _viewportElement[scroll](mouseDownScroll + scrollDelta); - - if (!_supportPassiveEvents) - compatibility.prvD(event); - }; - var documentMouseTouchUp = function (event) { - event = event || event.originalEvent; - removeClass(_bodyElement, _classNameDragging); - removeClass(scrollbarVars.h, strActive); - removeClass(scrollbarVars.t, strActive); - removeClass(scrollbarVars.s, strActive); - - _documentElement.off(_strMouseTouchMoveEvent, handleDragMove) - .off(_strMouseTouchUpEvent, documentMouseTouchUp) - .off(_strKeyDownEvent, documentKeyDown) - .off(_strKeyUpEvent, documentKeyUp) - .off(_strSelectStartEvent, documentOnSelectStart); - - decreaseTrackScrollAmount(); - mouseDownScroll = undefined; - mouseDownOffset = undefined; - if (trackTimeout !== undefined) { - _base.scrollStop(); - clearTimeout(trackTimeout); - trackTimeout = undefined; - } - - //if mouse is outside host element - var rect = _hostElement[0].getBoundingClientRect(); - if (!(event.clientX >= rect.left && event.clientX <= rect.right && - event.clientY >= rect.top && event.clientY <= rect.bottom)) { - hostOnMouseLeave(); - } - if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) - refreshScrollbarsAutoHide(false); - }; - var documentKeyDown = function (event) { - if (event.keyCode == 16) - increaseTrackScrollAmount(); - }; - var documentKeyUp = function (event) { - if (event.keyCode == 16) - decreaseTrackScrollAmount(); - }; - scrollbarVars.h.on(_strMouseTouchDownEvent, function (event) { - if (_isSleeping) - return; - - var originalEvent = event.originalEvent || event; - var isTouchEvent = originalEvent.touches !== undefined; - if (nativeOverlayScrollbarsAreActive() || !_scrollbarsDragScrollingCache || (isTouchEvent && !_scrollbarsTouchSupport)) - return; - - if (compatibility.mBtn(event) === 1 || isTouchEvent) { - mouseDownScroll = _viewportElement[scroll](); - mouseDownScroll = mouseDownScroll === undefined ? 0 : mouseDownScroll; - if (_isRTL && isHorizontal && !_rtlScrollBehavior.n || !_isRTL) - mouseDownScroll = mouseDownScroll < 0 ? 0 : mouseDownScroll; - mouseDownOffset = compatibility.page(event)[xy]; - - addClass(_bodyElement, _classNameDragging); - addClass(scrollbarVars.h, strActive); - addClass(scrollbarVars.s, strActive); - - _documentElement.on(_strMouseTouchMoveEvent, handleDragMove) - .on(_strMouseTouchUpEvent, documentMouseTouchUp) - .on(_strSelectStartEvent, documentOnSelectStart); - - if(_msieVersion || !_documentMixed) - compatibility.prvD(event); - compatibility.stpP(event); - } - }); - scrollbarVars.t.on(_strMouseTouchDownEvent, function (event) { - if (_isSleeping) - return; - - var originalEvent = event.originalEvent || event; - var isTouchEvent = originalEvent.touches !== undefined; - if (nativeOverlayScrollbarsAreActive() || !_scrollbarsClickScrollingCache || (isTouchEvent && !_scrollbarsTouchSupport)) - return; - - if (compatibility.mBtn(event) === 1 || isTouchEvent) { - var scrollDistance = _viewportSize[scrollbarVars._wh]; - var trackOffset = scrollbarVars.t.offset()[scrollbarVars.lt]; - var decreaseScroll; - var isFirstIteration = true; - if (event.shiftKey) - increaseTrackScrollAmount(); - var scrollAction = function () { - if(!_destroyed) { - var handleOffset = scrollbarVars.i.ho; - var handleLength = scrollbarVars.i.hl; - var mouseOffset = mouseDownOffset - trackOffset; - var scrollDuration = 200 * scrollDurationFactor; - var timeoutDelay = isFirstIteration ? Math.max(333, scrollDuration) : scrollDuration; - var scrollObj = {}; - var rtlIsNormal = _isRTL && isHorizontal && ((!_rtlScrollBehavior.i && !_rtlScrollBehavior.n) || _normalizeRTLCache); - var decreaseScrollCondition = handleOffset > mouseOffset; - - if (rtlIsNormal) - decreaseScrollCondition = handleOffset < mouseOffset; - - if (decreaseScrollCondition) { - if (decreaseScroll === undefined) - decreaseScroll = true; - scrollObj[scrollbarVars.xy] = '-=' + scrollDistance; - } - else { - if (decreaseScroll === undefined) - decreaseScroll = false; - scrollObj[scrollbarVars.xy] = '+=' + scrollDistance; - } - _base.scrollStop(); - _base.scroll(scrollObj, scrollDuration, 'linear'); - - var finishedCondition = decreaseScroll ? handleOffset <= mouseOffset : handleOffset + handleLength >= mouseOffset; - if (rtlIsNormal) - finishedCondition = decreaseScroll ? handleOffset + handleLength >= mouseOffset : handleOffset <= mouseOffset; - - if (finishedCondition) { - clearTimeout(trackTimeout); - _base.scrollStop(); - trackTimeout = undefined; - } - else - trackTimeout = setTimeout(scrollAction, timeoutDelay); - isFirstIteration = false; - } - }; - - mouseDownOffset = compatibility.page(event)[xy]; - - addClass(_bodyElement, _classNameDragging); - addClass(scrollbarVars.t, strActive); - addClass(scrollbarVars.s, strActive); - - _documentElement.on(_strMouseTouchUpEvent, documentMouseTouchUp) - .on(_strKeyDownEvent, documentKeyDown) - .on(_strKeyUpEvent, documentKeyUp) - .on(_strSelectStartEvent, documentOnSelectStart); - - scrollAction(); - compatibility.prvD(event); - compatibility.stpP(event); - } - }).hover(function () { //make sure both scrollbars will stay visible if one scrollbar is hovered if autoHide is "scroll". - if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) { - _scrollbarsAutoHideFlagScrollAndHovered = true; - refreshScrollbarsAutoHide(true); - } - }, function () { - if (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove) { - _scrollbarsAutoHideFlagScrollAndHovered = false; - refreshScrollbarsAutoHide(false); - } - }); - scrollbarVars.s.on(_strMouseTouchDownEvent, function (event) { - compatibility.stpP(event); - }); - } - - /** - * Shows or hides the given scrollbar and applied a class name which indicates if the scrollbar is scrollable or not. - * @param isHorizontal True if the horizontal scrollbar is the target, false if the vertical scrollbar is the target. - * @param shallBeVisible True if the scrollbar shall be shown, false if hidden. - * @param canScroll True if the scrollbar is scrollable, false otherwise. - */ - function refreshScrollbarAppearance(isHorizontal, shallBeVisible, canScroll) { - var scrollbarClassName = isHorizontal ? _classNameHostScrollbarHorizontalHidden : _classNameHostScrollbarVerticalHidden; - var scrollbarElement = isHorizontal ? _scrollbarHorizontalElement : _scrollbarVerticalElement; - - if (shallBeVisible) - removeClass(_hostElement, scrollbarClassName); - else - addClass(_hostElement, scrollbarClassName); - - if (canScroll) - removeClass(scrollbarElement, _classNameScrollbarUnusable); - else - addClass(scrollbarElement, _classNameScrollbarUnusable); - } - - /** - * Autoshows / autohides both scrollbars with. - * @param shallBeVisible True if the scrollbars shall be autoshown (only the case if they are hidden by a autohide), false if the shall be auto hidden. - * @param delayfree True if the scrollbars shall be hidden without a delay, false or undefined otherwise. - */ - function refreshScrollbarsAutoHide(shallBeVisible, delayfree) { - clearTimeout(_scrollbarsAutoHideTimeoutId); - if (shallBeVisible) { - //if(_hasOverflowCache.x && _hideOverflowCache.xs) - removeClass(_scrollbarHorizontalElement, _classNameScrollbarAutoHidden); - //if(_hasOverflowCache.y && _hideOverflowCache.ys) - removeClass(_scrollbarVerticalElement, _classNameScrollbarAutoHidden); - } - else { - var strActive = 'active'; - var hide = function () { - if (!_scrollbarsAutoHideFlagScrollAndHovered && !_destroyed) { - var anyActive = _scrollbarHorizontalHandleElement.hasClass(strActive) || _scrollbarVerticalHandleElement.hasClass(strActive); - if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove || _scrollbarsAutoHideLeave)) - addClass(_scrollbarHorizontalElement, _classNameScrollbarAutoHidden); - if (!anyActive && (_scrollbarsAutoHideScroll || _scrollbarsAutoHideMove || _scrollbarsAutoHideLeave)) - addClass(_scrollbarVerticalElement, _classNameScrollbarAutoHidden); - } - }; - if (_scrollbarsAutoHideDelay > 0 && delayfree !== true) - _scrollbarsAutoHideTimeoutId = setTimeout(hide, _scrollbarsAutoHideDelay); - else - hide(); - } - } - - /** - * Refreshes the handle length of the given scrollbar. - * @param isHorizontal True if the horizontal scrollbar handle shall be refreshed, false if the vertical one shall be refreshed. - */ - function refreshScrollbarHandleLength(isHorizontal) { - var handleCSS = {}; - var scrollbarVars = getScrollbarVars(isHorizontal); - var digit = 1000000; - //get and apply intended handle length - var handleRatio = Math.min(1, (_hostSizeCache[scrollbarVars._wh] - (_paddingAbsoluteCache ? (isHorizontal ? _paddingX : _paddingY) : 0)) / _contentScrollSizeCache[scrollbarVars._wh]); - handleCSS[scrollbarVars.wh] = (Math.floor(handleRatio * 100 * digit) / digit) + "%"; //the last * digit / digit is for flooring to the 4th digit - - if (!nativeOverlayScrollbarsAreActive()) - scrollbarVars.h.css(handleCSS); - - //measure the handle length to respect min & max length - scrollbarVars.i.hl = scrollbarVars.h[0]['offset' + scrollbarVars.WH]; //hl = handle length - scrollbarVars.i.hlr = handleRatio; //hr = handle length ratio - } - - /** - * Refreshes the handle offset of the given scrollbar. - * @param isHorizontal True if the horizontal scrollbar handle shall be refreshed, false if the vertical one shall be refreshed. - * @param currentScroll The current scroll offset of the given scrollbar axis. (if isHorizontal ? scrollLeft : scrollTop) - */ - function refreshScrollbarHandleOffset(isHorizontal, currentScroll) { - var isRTLisHorizontal = _isRTL && isHorizontal; - var handleCSS = {}; - var scrollbarVars = getScrollbarVars(isHorizontal); - var strTranslateBrace = 'translate('; - var strTransform = 'transform'; - var translateValue; - - //measure the handle length to respect min & max length - //DONT use the variable '_contentScrollSizeCache[scrollbarVars._wh]' instead of '_viewportElement[0]['scroll' + scrollbarVars.WH]' - // because its a bit behind during the small delay when content size updates - //(delay = _mutationObserverContentLag, if its 0 then this var could be used) - var maxScroll = _viewportElement[0][_strScroll + scrollbarVars.WH] - _viewportElement[0]['client' + scrollbarVars.WH]; - var posRatio; - var handleLength = scrollbarVars.i.hl; - var trackLength = scrollbarVars.t[0]['offset' + scrollbarVars.WH]; - var handleTrackDiff = trackLength - handleLength; - var offset = handleTrackDiff; - - //if rtl scroll max is negative - if (_rtlScrollBehavior.n && isRTLisHorizontal) - maxScroll *= -1; - - posRatio = currentScroll / maxScroll; - posRatio = isNaN(posRatio) ? 0 : Math.min(1, posRatio); - - scrollbarVars.i.ms = maxScroll; //ms = max scroll - scrollbarVars.i.cs = currentScroll; //cs = current scroll - scrollbarVars.i.csr = posRatio; //csr = current scroll Ratio - - offset *= posRatio; - offset = isNaN(offset) ? 0 : offset; - if (isRTLisHorizontal && (_rtlScrollBehavior.n || !_rtlScrollBehavior.n && !_rtlScrollBehavior.i)) - offset = trackLength - handleLength - offset; - offset = Math.max(0, offset); - - if (_supportTransform) { - if (isRTLisHorizontal) - offset = -(trackLength - handleLength - offset); - //offset = (offset / trackLength * 100) * (trackLength / handleLength); in % - translateValue = isHorizontal ? strTranslateBrace + offset + 'px, 0)' : strTranslateBrace + '0, ' + offset + 'px)'; - handleCSS['-webkit-' + strTransform] = translateValue; - handleCSS['-moz-' + strTransform] = translateValue; - handleCSS['-ms-' + strTransform] = translateValue; - handleCSS['-o-' + strTransform] = translateValue; - handleCSS[strTransform] = translateValue; - } - else - handleCSS[scrollbarVars.lt] = offset; - //only apply css if offset has changed and overflow exists. - - if (!nativeOverlayScrollbarsAreActive()) - scrollbarVars.h.css(handleCSS); - - scrollbarVars.i.ho = offset; //ho = handle offset - scrollbarVars.i.tl = trackLength; //tl = track length - } - - /** - * Refreshes the interactivity of the given scrollbar element. - * @param isTrack True if the track element is the target, false if the handle element is the target. - * @param value True for interactivity false for no interactivity. - */ - function refreshScrollbarsInteractive(isTrack, value) { - var action = value ? 'removeClass' : 'addClass'; - var element1 = isTrack ? _scrollbarHorizontalTrackElement : _scrollbarHorizontalHandleElement; - var element2 = isTrack ? _scrollbarVerticalTrackElement : _scrollbarVerticalHandleElement; - var className = isTrack ? _classNameScrollbarTrackOff : _classNameScrollbarHandleOff; - - element1[action](className); - element2[action](className); - } - - /** - * Returns a object which is used for fast access for specific variables. - * @param isHorizontal True if the horizontal scrollbar vars shall be accessed, false if the vertical scrollbar vars shall be accessed. - * @returns {{wh: string, WH: string, lt: string, _wh: string, _lt: string, t: *, h: *, c: {}, s: *}} - */ - function getScrollbarVars(isHorizontal) { - return { - wh: isHorizontal ? _strWidth : _strHeight, - WH: isHorizontal ? 'Width' : 'Height', - lt: isHorizontal ? _strLeft : _strTop, - LT: isHorizontal ? 'Left' : 'Top', - xy: isHorizontal ? _strX : _strY, - XY: isHorizontal ? 'X' : 'Y', - _wh: isHorizontal ? 'w' : 'h', - _lt: isHorizontal ? 'l' : 't', - t: isHorizontal ? _scrollbarHorizontalTrackElement : _scrollbarVerticalTrackElement, - h: isHorizontal ? _scrollbarHorizontalHandleElement : _scrollbarVerticalHandleElement, - s: isHorizontal ? _scrollbarHorizontalElement : _scrollbarVerticalElement, - i: isHorizontal ? _scrollHorizontalInfo : _scrollVerticalInfo - }; - } - - - //==== Utils ====// - - /** - * Calls the given callback with the given args. The Context of this callback is always _base (this). - * @param callback The callback function which shall be called. - * @param args The args with which the callback shall be called. - */ - function callCallback(callback, args) { - if(_initialized && helper.isFunction(callback)) - callback.call(_base, args); - } - - /** - * Sets the "top, right, bottom, left" properties, with a given prefix, of the given css object. - * @param targetCSSObject The css object to which the values shall be applied. - * @param prefix The prefix of the "top, right, bottom, left" css properties. (example: 'padding-' is a valid prefix) - * @param values A array of values which shall be applied to the "top, right, bottom, left" -properties. The array order is [top, right, bottom, left]. - * If this argument is undefined the value '' (empty string) will be applied to all properties. - */ - function setTopRightBottomLeft(targetCSSObject, prefix, values) { - if (values === undefined) - values = [_strEmpty, _strEmpty, _strEmpty, _strEmpty]; - - targetCSSObject[prefix + _strTop] = values[0]; - targetCSSObject[prefix + _strRight] = values[1]; - targetCSSObject[prefix + _strBottom] = values[2]; - targetCSSObject[prefix + _strLeft] = values[3]; - } - - /** - * Checks whether the given object is a HTMLElement. - * @param o The object which shall be checked. - * @returns {boolean} True the given object is a HTMLElement, false otherwise. - */ - function isHTMLElement(o) { - var strOwnerDocument = 'ownerDocument'; - var strHTMLElement = 'HTMLElement'; - var wnd = o && o[strOwnerDocument] ? (o[strOwnerDocument].parentWindow || window) : window; - return ( - typeof wnd[strHTMLElement] === TYPES.o ? o instanceof wnd[strHTMLElement] : //DOM2 - o && typeof o === TYPES.o && o !== null && o.nodeType === 1 && typeof o.nodeName === TYPES.s - ); - } - - /** - * Compares 2 arrays and returns the differences between them as a array. - * @param a1 The first array which shall be compared. - * @param a2 The second array which shall be compared. - * @returns {Array} The differences between the two arrays. - */ - function getArrayDifferences(a1, a2) { - var a = [ ]; - var diff = [ ]; - var i; - var k; - for (i = 0; i < a1.length; i++) - a[a1[i]] = true; - for (i = 0; i < a2.length; i++) { - if (a[a2[i]]) - delete a[a2[i]]; - else - a[a2[i]] = true; - } - for (k in a) - diff.push(k); - return diff; - } - - /** - * Returns Zero or the number to which the value can be parsed. - * @param value The value which shall be parsed. - */ - function parseIntToZeroOrNumber(value) { - var num = window.parseInt(value); - return isNaN(num) ? 0 : num; - } - - /** - * Gets several information of the textarea and returns them as a object or undefined if the browser doesn't support it. - * @returns {{cursorRow: Number, cursorCol, rows: Number, cols: number, wRow: number, pos: number, max : number}} or undefined if not supported. - */ - function getTextareaInfo() { - //read needed values - var textareaCursorPosition = _targetElement[0].selectionStart; - if (textareaCursorPosition === undefined) - return; - - var strLength = 'length'; - var textareaValue = _targetElement.val(); - var textareaLength = textareaValue[strLength]; - var textareaRowSplit = textareaValue.split("\n"); - var textareaLastRow = textareaRowSplit[strLength]; - var textareaCurrentCursorRowSplit = textareaValue.substr(0, textareaCursorPosition).split("\n"); - var widestRow = 0; - var textareaLastCol = 0; - var cursorRow = textareaCurrentCursorRowSplit[strLength]; - var cursorCol = textareaCurrentCursorRowSplit[textareaCurrentCursorRowSplit[strLength] - 1][strLength]; - var rowCols; - var i; - - //get widest Row and the last column of the textarea - for (i = 0; i < textareaRowSplit[strLength]; i++) { - rowCols = textareaRowSplit[i][strLength]; - if (rowCols > textareaLastCol) { - widestRow = i + 1; - textareaLastCol = rowCols; - } - } - - return { - cR: cursorRow, //cursorRow - cC: cursorCol, //cursorCol - r: textareaLastRow, //rows - c: textareaLastCol, //cols - w: widestRow, //wRow - p: textareaCursorPosition, //pos - m: textareaLength //max - }; - } - - /** - * Checks the given key code and returns a boolean which is indicating if the given key code is a restricted one. - * @param keyCode The key code which shall be checked. - * @returns {boolean} True if the given key code is restricted, false otherwise. - */ - function textareaIsRestrictedKeyCode(keyCode) { - for (var i = 0; i < _textareaKeyDownRestrictedKeyCodes.length; i++) { - if (keyCode === _textareaKeyDownRestrictedKeyCodes[i]) - return true; - } - return false; - } - - /** - * Determines whether native overlay scrollbars are active. - * @returns {boolean} True if native overlay scrollbars are active, false otherwise. - */ - function nativeOverlayScrollbarsAreActive() { - return (_ignoreOverlayScrollbarHidingCache && (_nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y)); - } - - /** - * Gets the element which is used to measure the content size. - * @returns {*} TextareaCover if target element is textarea else the ContentElement. - */ - function getContentMeasureElement() { - return _isTextarea ? _textareaCoverElement[0] : _contentElement[0]; - } - - /** - * Finds the first child element with the given selector of the given element. - * @param el The root element from which the selector shall be valid. - * @param selector The selector of the searched element. - * @returns {*} The first element which is a child of the given element and matches the givens selector. - */ - function findFirst(el, selector) { - return helper.prototype.find.call(el, selector).eq(0); - } - - /** - * Generates a string which represents a HTML div with the given classes or attributes. - * @param classesOrAttrs The class of the div as string or a object which represents the attributes of the div. (The class attribute can also be written as "className".) - * @param content The content of the div as string. - * @returns {string} The concated string which represents a HTML div and its content. - */ - function generateDiv(classesOrAttrs, content) { - return '
' + - (content ? content : _strEmpty) + - '
'; - } - - /** - * Gets the value of the given property from the given object. - * @param obj The object from which the property value shall be got. - * @param path The property of which the value shall be got. - * @returns {*} Returns the value of the searched property or undefined of the property wasn't found. - */ - function getObjectPropVal(obj, path) { - var splits = path.split(_strDot); - var i = 0; - var val; - for(; i < splits.length; i++) { - if(!obj.hasOwnProperty(splits[i])) - return; - val = obj[splits[i]]; - if(i < splits.length && type(val) === TYPES.o) - obj = val; - } - return val; - } - - /** - * Sets the value of the given property from the given object. - * @param obj The object from which the property value shall be set. - * @param path The property of which the value shall be set. - * @param val The value of the property which shall be set. - */ - function setObjectPropVal(obj, path, val) { - var splits = path.split(_strDot); - var splitsLength = splits.length; - var i = 0; - var extendObj = { }; - var extendObjRoot = extendObj; - for(; i < splitsLength; i++) - extendObj = extendObj[splits[i]] = i + 1 < splitsLength ? { } : val; - helper.extend(obj, extendObjRoot, true); - } - - //==== Utils Cache ====// - - /** - * Compares two values and returns the result of the comparison as a boolean. - * @param current The first value which shall be compared. - * @param cache The second value which shall be compared. - * @param force If true the returned value is always true. - * @returns {boolean} True if both variables aren't equal or some of them is undefined or when the force parameter is true, false otherwise. - */ - function checkCacheSingle(current, cache, force) { - if (force === true) - return force; - if (cache === undefined) - return true; - else if (current !== cache) - return true; - return false; - } - - /** - * Compares two objects with two properties and returns the result of the comparison as a boolean. - * @param current The first object which shall be compared. - * @param cache The second object which shall be compared. - * @param prop1 The name of the first property of the objects which shall be compared. - * @param prop2 The name of the second property of the objects which shall be compared. - * @param force If true the returned value is always true. - * @returns {boolean} True if both variables aren't equal or some of them is undefined or when the force parameter is true, false otherwise. - */ - function checkCacheDouble(current, cache, prop1, prop2, force) { - if (force === true) - return force; - if (prop2 === undefined && force === undefined) { - if (prop1 === true) - return prop1; - else - prop1 = undefined; - } - prop1 = prop1 === undefined ? 'w' : prop1; - prop2 = prop2 === undefined ? 'h' : prop2; - if (cache === undefined) - return true; - else if (current[prop1] !== cache[prop1] || current[prop2] !== cache[prop2]) - return true; - return false; - } - - /** - * Compares two objects which have four properties and returns the result of the comparison as a boolean. - * @param current The first object with four properties. - * @param cache The second object with four properties. - * @returns {boolean} True if both objects aren't equal or some of them is undefined, false otherwise. - */ - function checkCacheTRBL(current, cache) { - if (cache === undefined) - return true; - else if (current.t !== cache.t || - current.r !== cache.r || - current.b !== cache.b || - current.l !== cache.l) - return true; - return false; - } - - - //==== Shortcuts ====// - - /** - * jQuery type method shortcut. - */ - function type(obj) { - return helper.type(obj); - } - - /** - * jQuery extend method shortcut. - */ - function extend() { - return helper.extend.apply(this, arguments); - } - - /** - * jQuery addClass method shortcut. - */ - function addClass(el, classes) { - return helper.prototype.addClass.call(el, classes); - } - - /** - * jQuery removeClass method shortcut. - */ - function removeClass(el, classes) { - return helper.prototype.removeClass.call(el, classes); - } - - /** - * jQuery remove method shortcut. - */ - function remove(el) { - return helper.prototype.remove.call(el); - } - - - //==== API ====// - - /** - * Puts the instance to sleep. It wont respond to any changes in the DOM and won't update. Scrollbar Interactivity is also disabled as well as the resize handle. - * This behavior can be reset by calling the update method. - */ - _base.sleep = function () { - _isSleeping = true; - }; - - /** - * Updates the plugin and DOM to the current options. - * This method should only be called if a update is 100% required. - * @param force True if every property shall be updated and the cache shall be ignored. - * !INTERNAL USAGE! : force can be a string "auto" or "zoom" too - * if this is the case then before a real update the content size and host element attributes gets checked, and if they changed only then the update method will be called. - */ - _base.update = function (force) { - var attrsChanged; - var contentSizeC; - var isZoom = force === 'zoom'; - var imgElementSelector = 'img'; - var imgElementLoadEvent = 'load'; - if (force === _strAuto) { - attrsChanged = meaningfulAttrsChanged(); - contentSizeC = updateAutoContentSizeChanged(); - if (attrsChanged || contentSizeC) - update(false, contentSizeC); - } - else if (isZoom) { - update(true, true); - } - else { - force = _isSleeping || force; - _isSleeping = false; - update(false, false, force); - } - if(!_isTextarea && !isZoom) { - _contentElement.find(imgElementSelector).each(function(i, el) { - var index = compatibility.inA(el, _imgs); - if (index === -1) { - el = helper(el); - el.off(imgElementLoadEvent, imgOnLoad).on(imgElementLoadEvent, imgOnLoad); - } - }); - } - }; - - /** - Gets or sets the current options. The update method will be called automatically if new options were set. - * @param newOptions If new options are given, then the new options will be set, if new options aren't given (undefined or a not a plain object) then the current options will be returned. - * @param value If new options is a property path string, then this value will be used to set the option to which the property path string leads. - * @returns {*} - */ - _base.options = function (newOptions, value) { - //return current options if newOptions are undefined or empty - if (helper.isEmptyObject(newOptions) || !helper.isPlainObject(newOptions)) { - if (type(newOptions) === TYPES.s) { - if (arguments.length >= 2) { - var option = { }; - setObjectPropVal(option, newOptions, value); - setOptions(option); - update(); - return; - } - else - return getObjectPropVal(_currentOptions, newOptions); - } - else - return _currentOptions; - } - setOptions(newOptions); - var isSleepingTmp = _isSleeping || false; - _isSleeping = false; - update(); - _isSleeping = isSleepingTmp; - }; - - /** - * Restore the DOM, disconnects all observers, remove all resize observers and destroy all methods. - */ - _base.destroy = function () { - _destroyed = true; - - autoUpdateLoop.remove(_base); - mutationObserversDisconnect(); - removeResizeObserver(_sizeObserverElement); - if (_sizeAutoObserverAdded) - removeResizeObserver(_sizeAutoObserverElement); - - remove(_sizeObserverElement); - if (_contentGlueElement !== undefined) - remove(_contentGlueElement); - if (_contentArrangeElement !== undefined) - remove(_contentArrangeElement); - if (_sizeAutoObserverAdded) - remove(_sizeAutoObserverElement); - - if (_supportPassiveEvents) { - removePassiveEventListener(_hostElement, _strMouseTouchMoveEvent, hostOnMouseMove); - removePassiveEventListener(_hostElement, _strMouseTouchEnter, hostOnMouseEnter); - removePassiveEventListener(_hostElement, _strMouseTouchLeave, hostOnMouseLeave); - } - else { - _hostElement.off(_strMouseTouchMoveEvent, hostOnMouseMove) - .off(_strMouseTouchEnter, hostOnMouseEnter) - .off(_strMouseTouchLeave, hostOnMouseLeave); - } - - remove(_scrollbarHorizontalElement); - remove(_scrollbarVerticalElement); - if(_scrollbarCornerElement) - remove(_scrollbarCornerElement); - if (!_resizeNone) - scrollbarCornerOnResized(); - - _contentElement.contents() - .unwrap() - .unwrap() - .unwrap(); - - if (_isBody) - removeClass(_htmlElement, _classNameHTMLElement); - - - if (_isTextarea) { - _targetElement.off(_strScroll, textareaOnScroll) - .off('drop', textareaOnDrop) - .off('focus', textareaOnFocus) - .off('focusout', textareaOnFocusOut); - if (_msieVersion > 9 || !_autoUpdateRecommended) - _targetElement.off('input', textareaOnInput); - else { - _targetElement.off(_strKeyDownEvent, textareaOnKeyDown) - .off(_strKeyUpEvent, textareaOnKeyUp); - } - - remove(_textareaCoverElement); - removeClass(_targetElement, _classNameTextareaElement + _strSpace + _classNameTextInherit) - .unwrap() - .removeAttr(LEXICON.s); - remove(_hostElement); - } - else { - removeClass(_targetElement, _classNameHostElement); - removeClass(_hostElement, [ - _classNameHostElement, - _classNameHostResizeDisabled, - _classNameHostRTL, - _classNameHostScrollbarHorizontalHidden, - _classNameHostScrollbarVerticalHidden, - _classNameHostTransition, - _classNameHostScrolling, - _classNameHostOverflow, - _classNameHostOverflowX, - _classNameHostOverflowY, - _classNameThemeNone, - _classNameCache].join(_strSpace)); - } - - for(var i = 0; i < _imgs.length; i++) - helper(_imgs[i]).off('load', imgOnLoad); - _imgs = undefined; - - instances.rem(pluginTargetElement); - callCallback(_currentPreparedOptions.callbacks.onDestroyed); - - for (var property in _base) - delete _base[property]; - _base = undefined; - }; - - /** - * Scrolls to a given position or element. - * @param coordinates - * 1. Can be "coordinates" which looks like: - * { x : ?, y : ? } OR Object with x and y properties - * { left : ?, top : ? } OR Object with left and top properties - * { l : ?, t : ? } OR Object with l and t properties - * [ ?, ? ] OR Array where the first two element are the coordinates (first is x, second is y) - * ? A single value which stays for both axis - * A value can be a number, a string or a calculation. - * - * Operators: - * [NONE] The current scroll will be overwritten by the value. - * '+=' The value will be added to the current scroll offset - * '-=' The value will be subtracted from the current scroll offset - * '*=' The current scroll wil be multiplicated by the value. - * '/=' The current scroll wil be divided by the value. - * - * Units: - * [NONE] The value is the final scroll amount. final = (value * 1) - * 'px' Same as none - * '%' The value is dependent on the current scroll value. final = ((currentScrollValue / 100) * value) - * 'vw' The value is multiplicated by the viewport width. final = (value * viewportWidth) - * 'vh' The value is multiplicated by the viewport height. final = (value * viewportHeight) - * - * example final values: - * 200, '200px', '50%', '1vw', '1vh', '+=200', '/=1vw', '*=2px', '-=5vh', '+=33%', '+= 50% - 2px', '-= 1vw - 50%' - * - * 2. Can be a HTML or jQuery element: - * The final scroll offset is the offset (without margin) of the given HTML / jQuery element. - * - * 3. Can be a object with a HTML or jQuery element with additional settings: - * { - * el : [HTMLElement, jQuery element], MUST be defined, else this object isn't valid. - * axis : [string], Default value is 'xy'. - * block : [string], Default value is 'begin'. - * margin : [number, array, boolean] Default value is false. - * } - * - * Possible axis settings are: - * 'x' Scrolls only the x axis. - * 'y' Scrolls only the y axis. - * 'xy' Scrolls both axis. - * 'yx' Same as 'xy' - * - * Possible block settings are: - * 'begin' Both axis shall be docked to the "begin" edge. - The element will be docked to the top and left edge of the viewport. - * 'end' Both axis shall be docked to the "end" edge. - The element will be docked to the bottom and right edge of the viewport. (If direction is RTL to the bottom and left edge.) - * 'center' Both axis shall be docked to "center". - The element will be centered in the viewport. - * 'nearest' The element will be docked to the nearest edges, but only if it isn't in view. - * [ string, string ] Specify Begin or End for each axis individually. - * - * Possible margin settings are: -- The actual margin of the element wont be affect, this option affects only the final scroll offset. - * true The true margin of the element will be used. - * false No margin will be used. - * [NUMBER] The margin will be used for all edges. - * [ [NUMBER], [NUMBER] ] The first margin number will be used for the margin of the X axis egdes (left and right) and the second number will be used for the Y axis edges (top and bottom). - * [ [NUMBER], [NUMBER],[NUMBER], [NUMBER] ] Each edge gets its own margin value, the first value stays for the top margin, the second for the right margin, the third for the bottom margin and the forth for the left margin. - * - * @param duration The duration of the scroll animation, OR a jQuery animation configuration object. - * @param easing The animation easing. - * @param complete The animation complete callback. - * @returns - * { - * x: {position: *, ratio: (number|*), max: (number|*), handleOffset: (number|*), handleLength: *, handleLengthRatio: (number|*), trackLength: *, isRTL: *, isRTLNormalized: *}, - * y: {position: *, ratio: (number|*), max: (number|*), handleOffset: (number|*), handleLength: *, handleLengthRatio: (number|*), trackLength: *} - * } - */ - _base.scroll = function (coordinates, duration, easing, complete) { - if (arguments.length === 0 || coordinates === undefined) { - var infoX = _scrollHorizontalInfo; - var infoY = _scrollVerticalInfo; - var normalizeInvert = _normalizeRTLCache && _isRTL && _rtlScrollBehavior.i; - var normalizeNegate = _normalizeRTLCache && _isRTL && _rtlScrollBehavior.n; - var scrollX = infoX.cs; - var scrollXRatio = infoX.csr; - var maxScrollX = infoX.ms; - scrollXRatio = normalizeInvert ? 1 - scrollXRatio : scrollXRatio; - scrollX = normalizeInvert ? maxScrollX - scrollX : scrollX; - scrollX *= normalizeNegate ? -1 : 1; - maxScrollX *= normalizeNegate ? -1 : 1; - return { - x: { - position: scrollX, - ratio: scrollXRatio, - max: maxScrollX, - handleOffset: infoX.ho, - handleLength: infoX.hl, - handleLengthRatio: infoX.hlr, - trackLength: infoX.tl, - isRTL: _isRTL, - isRTLNormalized: _normalizeRTLCache - }, - y: { - position: infoY.cs, - ratio: infoY.csr, - max: infoY.ms, - handleOffset: infoY.ho, - handleLength: infoY.hl, - handleLengthRatio: infoY.hlr, - trackLength: infoY.tl - } - }; - } - - var coordinatesXAxisProps = [_strX, _strLeft, 'l']; - var coordinatesYAxisProps = [_strY, _strTop, 't']; - var coordinatesOperators = ['+=', '-=', '*=', '/=']; - var i; - var finalScroll = { }; - var durationIsObject = type(duration) === TYPES.o; - var strEnd = 'end'; - var strBegin = 'begin'; - var strCenter = 'center'; - var strNearest = 'nearest'; - var elementObjSettings = { - axis: 'xy', - block: [strBegin, strBegin], - margin: [0, 0, 0, 0] - }; - var elementObjSettingsAxisValues = [_strX, _strY, 'xy', 'yx']; - var elementObjSettingsBlockValues = [strBegin, strEnd, strCenter, strNearest]; - var coordinatesIsElementObj = coordinates.hasOwnProperty('el'); - var possibleElement = coordinatesIsElementObj ? coordinates.el : coordinates; - var possibleElementIsJQuery = possibleElement instanceof helper || JQUERY ? possibleElement instanceof JQUERY : false; - var possibleElementIsHTMLElement = possibleElementIsJQuery ? false : isHTMLElement(possibleElement); - var checkSettingsStringValue = function (currValue, allowedValues) { - for (i = 0; i < allowedValues.length; i++) { - if (currValue === allowedValues[i]) - return true; - } - return false; - }; - var getRawScroll = function (coordinates) { - var rawScroll = {}; - if (type(coordinates) === TYPES.a && coordinates.length > 0) { - rawScroll.x = coordinates[0]; - rawScroll.y = coordinates[1]; - } - else if (type(coordinates) === TYPES.s || type(coordinates) === TYPES.n) { - rawScroll.x = coordinates; - rawScroll.y = coordinates; - } - else if (type(coordinates) === TYPES.o) { - coordinates = extend({}, coordinates); - i = 0; - for (var key in coordinates) { - if (coordinates.hasOwnProperty(key)) { - if (i > 2) - delete coordinates[key]; - i++; - } - } - var getRawScrollValue = function (isX) { - var coordinateProps = isX ? coordinatesXAxisProps : coordinatesYAxisProps; - for (i = 0; i < coordinateProps.length; i++) { - if (coordinateProps[i] in coordinates) { - return coordinates[coordinateProps[i]]; - } - } - }; - rawScroll.x = getRawScrollValue(true); - rawScroll.y = getRawScrollValue(false); - } - return rawScroll; - }; - var getFinalScroll = function (isX, rawScroll) { - var operator; - var amount; - var scrollInfo = isX ? _scrollHorizontalInfo : _scrollVerticalInfo; - var currScroll = scrollInfo.cs; - var maxScroll = scrollInfo.ms; - var mult = ' * '; - var finalValue; - var isRTLisX = _isRTL && isX; - var normalizeShortcuts = isRTLisX && _rtlScrollBehavior.n && !_normalizeRTLCache; - var strReplace = 'replace'; - if (type(rawScroll) === TYPES.s) { - //check operator - if (rawScroll.length > 2) { - var possibleOperator = rawScroll.substr(0, 2); - for (i = 0; i < coordinatesOperators.length; i++) { - if (possibleOperator === coordinatesOperators[i]) { - operator = coordinatesOperators[i]; - break; - } - } - } - - //calculate units and shortcuts - rawScroll = operator !== undefined ? rawScroll.substr(2) : rawScroll; - rawScroll = rawScroll[strReplace](/min/g, 0); //'min' = 0% - rawScroll = rawScroll[strReplace](//g, (normalizeShortcuts ? '-' : _strEmpty) + _strHundredPercent); //'>' = 100% - rawScroll = rawScroll[strReplace](/px/g, _strEmpty); - rawScroll = rawScroll[strReplace](/%/g, mult + (maxScroll * (isRTLisX && _rtlScrollBehavior.n ? -1 : 1) / 100.0)); - rawScroll = rawScroll[strReplace](/vw/g, mult + _viewportSize.w); - rawScroll = rawScroll[strReplace](/vh/g, mult + _viewportSize.h); - amount = parseIntToZeroOrNumber(window.parseFloat(window.eval(rawScroll)).toFixed()); - } - else if (type(rawScroll) === TYPES.n) { - amount = rawScroll; - } - - if (!isNaN(amount) && amount !== undefined && type(amount) === TYPES.n) { - var normalizeIsRTLisX = _normalizeRTLCache && isRTLisX; - var operatorCurrScroll = currScroll * (normalizeIsRTLisX && _rtlScrollBehavior.n ? -1 : 1); - var invert = normalizeIsRTLisX && _rtlScrollBehavior.i; - var negate = normalizeIsRTLisX && _rtlScrollBehavior.n; - operatorCurrScroll = invert ? (maxScroll - operatorCurrScroll) : operatorCurrScroll; - switch (operator) { - case '+=': - finalValue = operatorCurrScroll + amount; - break; - case '-=': - finalValue = operatorCurrScroll - amount; - break; - case '*=': - finalValue = operatorCurrScroll * amount; - break; - case '/=': - finalValue = operatorCurrScroll / amount; - break; - default: - finalValue = amount; - break; - } - if (invert) - finalValue = maxScroll - finalValue; - if (negate) - finalValue *= -1; - - if (isRTLisX && _rtlScrollBehavior.n) { - finalValue = Math.max(maxScroll, finalValue); - finalValue = Math.min(0, finalValue); - } - else { - finalValue = Math.min(maxScroll, finalValue); - finalValue = Math.max(0, finalValue); - } - if (finalValue === currScroll) - finalValue = undefined; - } - return finalValue; - }; - - if (possibleElementIsJQuery || possibleElementIsHTMLElement) { - var finalElement = possibleElementIsJQuery ? possibleElement : helper(possibleElement); - if (finalElement.length === 0) - return; - - //get settings - if (coordinatesIsElementObj) { - var valid; - var axis = coordinates.axis; - var block = coordinates.block; - var blockType = type(block); - var blockLength; - var margin = coordinates.margin; - var marginType = type(margin); - var marginLength; - - //block can be [ string, or array of two strings ] - if (blockType === TYPES.s) - block = [block, block]; - else if (blockType === TYPES.a) { - blockLength = block.length; - if (blockLength > 2 || blockLength < 1) - block = undefined; - else { - valid = true; - if (blockLength === 1) - block[1] = strBegin; - for (i = 0; i < blockLength; i++) { - var item = block[i]; - if (type(item) !== TYPES.s || !checkSettingsStringValue(item, elementObjSettingsBlockValues)) { - valid = false; - break; - } - } - if (!valid) - block = undefined; - } - } - else - block = undefined; - - //margin can be [ true, false, number, array of 2 numbers, array of 4 numbers ] - if (marginType === TYPES.n) - margin = [margin, margin, margin, margin]; - else if (marginType === TYPES.b) { - if (margin) { - margin = [ - parseIntToZeroOrNumber(finalElement.css(_strMarginMinus + _strTop)), - parseIntToZeroOrNumber(finalElement.css(_strMarginMinus + _strRight)), - parseIntToZeroOrNumber(finalElement.css(_strMarginMinus + _strBottom)), - parseIntToZeroOrNumber(finalElement.css(_strMarginMinus + _strLeft)) - ]; - } - else - margin = [0, 0, 0, 0]; - } - else if (marginType === TYPES.a) { - marginLength = margin.length; - if (marginLength !== 2 && marginLength !== 4) - margin = undefined; - else { - valid = true; - for (i = 0; i < marginLength; i++) { - if (type(margin[i]) !== TYPES.n) { - valid = false; - break; - } - } - if (valid) { - if (marginLength === 2) - margin = [margin[0], margin[1], margin[0], margin[1]]; - } - else - margin = undefined; - } - } - else - margin = undefined; - - elementObjSettings.axis = checkSettingsStringValue(axis, elementObjSettingsAxisValues) ? axis : elementObjSettings.axis; - elementObjSettings.block = block || elementObjSettings.block; - elementObjSettings.margin = margin || elementObjSettings.margin; - } - - //get coordinates - var elementOffset = finalElement.offset(); - var viewportOffset = _paddingElement.offset(); // use padding element instead of viewport element because padding element has never padding, margin or position applied. - var viewportScroll = { - l: _scrollHorizontalInfo.cs, - t: _scrollVerticalInfo.cs - }; - var settingsAxis = elementObjSettings.axis; - var settingsBlock = elementObjSettings.block; - var settingsMargin = elementObjSettings.margin; - var blockIsEnd = { - x : settingsBlock[0] === (_isRTL ? strBegin : strEnd), - y : settingsBlock[1] === strEnd - }; - var blockIsCenter = { - x : settingsBlock[0] === strCenter, - y : settingsBlock[1] === strCenter - }; - var blockIsNearest = { - x : settingsBlock[0] === strNearest, - y : settingsBlock[1] === strNearest - }; - var doNothing = { }; - var measuringForBlockIsRequired = blockIsEnd.x || blockIsEnd.y || blockIsCenter.x || blockIsCenter.y || blockIsNearest.x || blockIsNearest.y; - elementOffset.top -= settingsMargin[0]; - elementOffset.left -= settingsMargin[3]; - var elementScrollCoordinates = { - x: Math.round(elementOffset.left - viewportOffset.left + viewportScroll.l), - y: Math.round(elementOffset.top - viewportOffset.top + viewportScroll.t) - }; - if (_isRTL) { - if (!_rtlScrollBehavior.n && !_rtlScrollBehavior.i) - elementScrollCoordinates.x = Math.round(viewportOffset.left - elementOffset.left + viewportScroll.l); - if (_rtlScrollBehavior.n && _normalizeRTLCache) - elementScrollCoordinates.x *= -1; - if (_rtlScrollBehavior.i && _normalizeRTLCache) - elementScrollCoordinates.x = Math.round(viewportOffset.left - elementOffset.left + (_scrollHorizontalInfo.ms - viewportScroll.l)); - } - - if (measuringForBlockIsRequired) { - var rawElementSize = {}; - var rect; - if (_supportTransform) { - rect = finalElement[0].getBoundingClientRect(); - rawElementSize = { - w: rect[_strWidth], - h: rect[_strHeight] - }; - } - else { - rawElementSize = { - w: finalElement[0][LEXICON.oW], - h: finalElement[0][LEXICON.oH] - }; - } - var elementSize = { - w: rawElementSize.w + settingsMargin[3] + settingsMargin[1], - h: rawElementSize.h + settingsMargin[0] + settingsMargin[2] - }; - var finalizeBlock = function(isX) { - var scrollbarVars = getScrollbarVars(isX); - var wh = scrollbarVars._wh; - var lt = scrollbarVars.lt; - var xy = scrollbarVars.xy; - var divide = blockIsCenter[xy] ? 2 : 1; - var elementCenterOffset = elementOffset[lt] + (elementSize[wh] / 2); - var viewportCenterOffset = viewportOffset[lt] + (_viewportSize[wh] / 2); - - if(blockIsNearest[xy]) { - //if element is completely in view don't scroll on this axis - doNothing[xy] = elementSize[wh] <= _viewportSize[wh] && elementOffset[lt] >= viewportOffset[lt] && elementOffset[lt] + elementSize[wh] <= viewportOffset[lt] + _viewportSize[wh]; - blockIsEnd[xy] = elementSize[wh] < _viewportSize[wh] ? elementCenterOffset > viewportCenterOffset : elementCenterOffset < viewportCenterOffset; - } - - if (blockIsEnd[xy] || blockIsCenter[xy]) - elementScrollCoordinates[xy] -= ((_viewportSize[wh] / divide) - (elementSize[wh] / divide)) * (isX && _isRTL && _normalizeRTLCache ? -1 : 1); - }; - finalizeBlock(true); - finalizeBlock(false); - } - - if (settingsAxis === _strX || doNothing.y) - delete elementScrollCoordinates.y; - if (settingsAxis === _strY || doNothing.x) - delete elementScrollCoordinates.x; - - coordinates = elementScrollCoordinates; - } - - finalScroll.x = getFinalScroll(true, getRawScroll(coordinates).x); - finalScroll.y = getFinalScroll(false, getRawScroll(coordinates).y); - var scrollLeft = finalScroll.x !== undefined; - var scrollTop = finalScroll.y !== undefined; - - if (duration > 0 || durationIsObject) { - var animateObj = { }; - if (scrollLeft) - animateObj[_strScrollLeft] = finalScroll.x; - if (scrollTop) - animateObj[_strScrollTop] = finalScroll.y; - - if (durationIsObject) { - _viewportElement.animate(animateObj, duration); - } - else { - var animateOpt = { - duration : duration, - complete : complete - }; - if(type(easing) === TYPES.a) { - var specialEasing = { }; - specialEasing[_strScrollLeft] = easing[0]; - specialEasing[_strScrollTop] = easing[1]; - animateOpt.specialEasing = specialEasing; - } - else { - animateOpt.easing = easing; - } - _viewportElement.animate(animateObj, animateOpt); - } - } - else { - if (scrollLeft) - _viewportElement[_strScrollLeft](finalScroll.x); - if (scrollTop) - _viewportElement[_strScrollTop](finalScroll.y); - } - }; - - /** - * Stops all scroll animations. - */ - _base.scrollStop = function (param1, param2, param3) { - _viewportElement.stop(param1, param2, param3); - }; - - /** - * Returns all relevant elements. - * @returns {{target: *, host: *, padding: *, viewport: *, content: *, scrollbarHorizontal: {scrollbar: *, track: *, handle: *}, scrollbarVertical: {scrollbar: *, track: *, handle: *}, scrollbarCorner: *}} - */ - _base.getElements = function () { - return { - target: _targetElement[0], - host: _hostElement[0], - padding: _paddingElement[0], - viewport: _viewportElement[0], - content: _contentElement[0], - scrollbarHorizontal: { - scrollbar: _scrollbarHorizontalElement[0], - track: _scrollbarHorizontalTrackElement[0], - handle: _scrollbarHorizontalHandleElement[0] - }, - scrollbarVertical: { - scrollbar: _scrollbarVerticalElement[0], - track: _scrollbarVerticalTrackElement[0], - handle: _scrollbarVerticalHandleElement[0] - }, - scrollbarCorner: _scrollbarCornerElement - }; - }; - - /** - * Returns a object which describes the current state of this instance. - * @param stateProperty A specific property from the state object which shall be returned. - * @returns {{widthAuto, heightAuto, overflowAmount, hideOverflow, hasOverflow, contentScrollSize, viewportSize, hostSize, autoUpdate} | *} - */ - _base.getState = function (stateProperty) { - var prepare = function (obj) { - if (!helper.isPlainObject(obj)) - return obj; - var extended = extend(true, {}, obj); - var changePropertyName = function (from, to) { - if (extended.hasOwnProperty(from)) { - extended[to] = extended[from]; - delete extended[from]; - } - }; - changePropertyName('w', _strWidth); //change w to width - changePropertyName('h', _strHeight); //change h to height - delete extended.c; //delete c (the 'changed' prop) - return extended; - }; - var obj = { - sleeping: prepare(_isSleeping) || false, - autoUpdate: prepare(!_mutationObserverConnected), - widthAuto: prepare(_widthAutoCache), - heightAuto: prepare(_heightAutoCache), - padding: prepare(_cssPaddingCache), - overflowAmount: prepare(_overflowAmountCache), - hideOverflow: prepare(_hideOverflowCache), - hasOverflow: prepare(_hasOverflowCache), - contentScrollSize: prepare(_contentScrollSizeCache), - viewportSize: prepare(_viewportSize), - hostSize: prepare(_hostSizeCache), - documentMixed : prepare(_documentMixed) - }; - if (type(stateProperty) === TYPES.s) - return getObjectPropVal(obj, stateProperty); - return obj; - }; - - /** - * Constructs the plugin. - * @param targetElement The element to which the plugin shall be applied. - * @param options The initial options of the plugin. - * @returns {boolean} True if the plugin was successfully initialized, false otherwise. - */ - function construct(targetElement, options) { - _defaultOptions = globals.defaultOptions; - _nativeScrollbarStyling = globals.nativeScrollbarStyling; - _nativeScrollbarSize = extend(true, {}, globals.nativeScrollbarSize); - _nativeScrollbarIsOverlaid = extend(true, {}, globals.nativeScrollbarIsOverlaid); - _overlayScrollbarDummySize = extend(true, {}, globals.overlayScrollbarDummySize); - _rtlScrollBehavior = extend(true, {}, globals.rtlScrollBehavior); - - //parse & set options but don't update - setOptions(extend(true, {}, _defaultOptions, options)); - - var optionsCallbacks = _currentPreparedOptions.callbacks; - - //check if the plugin hasn't to be initialized - if (_nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.x && !_currentPreparedOptions.nativeScrollbarsOverlaid.initialize) { - callCallback(optionsCallbacks.onInitializationWithdrawn); - return false; - } - - _cssCalc = globals.cssCalc; - _msieVersion = globals.msie; - _autoUpdateRecommended = globals.autoUpdateRecommended; - _supportTransition = globals.supportTransition; - _supportTransform = globals.supportTransform; - _supportPassiveEvents = globals.supportPassiveEvents; - _supportResizeObserver = globals.supportResizeObserver; - _supportMutationObserver = globals.supportMutationObserver; - _restrictedMeasuring = globals.restrictedMeasuring; - _documentElement = helper(targetElement.ownerDocument); - _windowElement = helper(_documentElement[0].defaultView || _documentElement[0].parentWindow); - _htmlElement = findFirst(_documentElement, 'html'); - _bodyElement = findFirst(_htmlElement, 'body'); - _targetElement = helper(targetElement); - _isTextarea = _targetElement.is('textarea'); - _isBody = _targetElement.is('body'); - _documentMixed = _documentElement[0] !== document; - - var initBodyScroll; - if (_isBody) { - initBodyScroll = {}; - initBodyScroll.l = Math.max(_targetElement[_strScrollLeft](), _htmlElement[_strScrollLeft](), _windowElement[_strScrollLeft]()); - initBodyScroll.t = Math.max(_targetElement[_strScrollTop](), _htmlElement[_strScrollTop](), _windowElement[_strScrollTop]()); - } - - //build Hide-scrollbars DOM - if (_isTextarea) { - _targetElement.wrap(generateDiv(_classNameHostTextareaElement)); - addClass(_targetElement, _classNameTextareaElement + _strSpace + _classNameTextInherit); - _hostElement = _targetElement.parent(); - var hostElementCSS = {}; - if (!_currentPreparedOptions.sizeAutoCapable) { - hostElementCSS[_strWidth] = _targetElement.css(_strWidth); - hostElementCSS[_strHeight] = _targetElement.css(_strHeight); - } - _hostElement.css(hostElementCSS) - .wrapInner(generateDiv(_classNameContentElement + _strSpace + _classNameTextInherit)) - .wrapInner(generateDiv(_classNameViewportElement + _strSpace + _classNameTextInherit)) - .wrapInner(generateDiv(_classNamePaddingElement + _strSpace + _classNameTextInherit)); - _contentElement = findFirst(_hostElement, _strDot + _classNameContentElement); - _viewportElement = findFirst(_hostElement, _strDot + _classNameViewportElement); - _paddingElement = findFirst(_hostElement, _strDot + _classNamePaddingElement); - _textareaCoverElement = helper(generateDiv(_classNameTextareaCoverElement)); - _contentElement.prepend(_textareaCoverElement); - - _targetElement.on(_strScroll, textareaOnScroll) - .on('drop', textareaOnDrop) - .on('focus', textareaOnFocus) - .on('focusout', textareaOnFocusOut); - if (_msieVersion > 9 || !_autoUpdateRecommended) { - _targetElement.on('input', textareaOnInput); - } - else { - _targetElement.on(_strKeyDownEvent, textareaOnKeyDown) - .on(_strKeyUpEvent, textareaOnKeyUp); - } - } else { - addClass(_targetElement, _classNameHostElement); - _hostElement = _targetElement; - _hostElement.wrapInner(generateDiv(_classNameContentElement)) - .wrapInner(generateDiv(_classNameViewportElement)) - .wrapInner(generateDiv(_classNamePaddingElement)); - _contentElement = findFirst(_hostElement, _strDot + _classNameContentElement); - _viewportElement = findFirst(_hostElement, _strDot + _classNameViewportElement); - _paddingElement = findFirst(_hostElement, _strDot + _classNamePaddingElement); - - //add transitionend event - _contentElement.on(_strTransitionEndEvent, function (event) { - if (_autoUpdateCache === true) - return; - event = event.originalEvent || event; - if (isSizeAffectingCSSProperty(event.propertyName)) - update(_strAuto); - }); - } - - buildScrollbars(); - - //add scroll event - if (_supportPassiveEvents) - addPassiveEventListener(_viewportElement, _strScroll, viewportOnScroll); - else - _viewportElement.on(_strScroll, viewportOnScroll); - - if (_nativeScrollbarStyling) - addClass(_viewportElement, _nativeScrollbarIsOverlaid.x && _nativeScrollbarIsOverlaid.y ? _classNameViewportNativeScrollbarsOverlaid : _classNameViewportNativeScrollbarsInvisible); - - //build mutation observers - if (_supportMutationObserver) { - var mutationObserver = compatibility.mO(); - var contentLastUpdate = compatibility.now(); - var mutationTarget; - var mutationAttrName; - var contentTimeout; - var now; - var sizeAuto; - var action; - - _mutationObserverHost = new mutationObserver(function (mutations) { - if (!_initialized || _isSleeping) - return; - - var doUpdate = false; - var mutation; - helper.each(mutations, function () { - mutation = this; - mutationTarget = mutation.target; - mutationAttrName = mutation.attributeName; - - if (mutationAttrName === LEXICON.c) - doUpdate = hostClassNamesChanged(mutation.oldValue, mutationTarget.className); - else if (mutationAttrName === LEXICON.s) - doUpdate = mutation.oldValue !== mutationTarget.style.cssText; - else - doUpdate = true; - - if (doUpdate) - return false; - }); - - if (doUpdate) - _base.update(_strAuto); - }); - _mutationObserverContent = new mutationObserver(function (mutations) { - if (!_initialized || _isSleeping) - return; - - var doUpdate = false; - var mutation; - helper.each(mutations, function () { - mutation = this; - doUpdate = isUnknownMutation(mutation); - return !doUpdate; - }); - - if (doUpdate) { - now = compatibility.now(); - sizeAuto = (_heightAutoCache || _widthAutoCache); - action = function () { - if(!_destroyed) { - contentLastUpdate = now; - - //if cols, rows or wrap attr was changed - if (_isTextarea) - textareaUpdate(); - - if (sizeAuto) - _base.update(); - else - _base.update(_strAuto); - } - }; - clearTimeout(contentTimeout); - if (_mutationObserverContentLag <= 0 || now - contentLastUpdate > _mutationObserverContentLag || !sizeAuto) - action(); - else - contentTimeout = setTimeout(action, _mutationObserverContentLag); - } - }); - } - - //build resize observer for the host element - if (_isBody) { - addClass(_htmlElement, _classNameHTMLElement); - - //apply the body scroll to handle it right in the update method - _viewportElement[_strScrollLeft](initBodyScroll.l); - _viewportElement[_strScrollTop](initBodyScroll.t); - } - _sizeObserverElement = helper(generateDiv('os-resize-observer-host')); - _hostElement.prepend(_sizeObserverElement); - addResizeObserver(_sizeObserverElement, hostOnResized); - - //update for the first time - hostOnResized(); //initialize cache for host size - _base.update(_strAuto); //initialize cache for content - - //add the transition class for transitions AFTER the first update (for preventing unwanted transitions) - setTimeout(function () { - if (_supportTransition && !_destroyed) - addClass(_hostElement, _classNameHostTransition) - }, 333); - - //the plugin is initialized now! - _initialized = true; - callCallback(optionsCallbacks.onInitialized); - return _initialized; - } - - if (construct(pluginTargetElement, options)) { - instances.add(pluginTargetElement, _base); - return _base; - } - _base = undefined; - } - - /** - * Initializes a new OverlayScrollbarsInstance object or changes options if already initialized or returns the current instance. - * @param pluginTargetElements The elements to which the Plugin shall be initialized. - * @param options The custom options. - * @returns {*} - */ - window[PLUGINNAME] = function(pluginTargetElements, options) { - if(arguments.length === 0) - return this; - - initOverlayScrollbarsStatics(); - - var arr = [ ]; - var inst; - var result; - if(helper.isPlainObject(options)) { - if (pluginTargetElements && pluginTargetElements.length) { - helper.each(pluginTargetElements, function () { - inst = this; - if(inst !== undefined) - arr.push(OverlayScrollbarsInstance(inst, options, _pluginsGlobals, _pluginsAutoUpdateLoop)); - }); - result = arr.length > 1 ? arr : arr[0]; - } - else - result = OverlayScrollbarsInstance(pluginTargetElements, options, _pluginsGlobals, _pluginsAutoUpdateLoop); - } - else if(pluginTargetElements) { - if(pluginTargetElements.length && pluginTargetElements.length > 0) { - helper.each(pluginTargetElements, function() { - inst = instances.get(this); - if(options === '!') { - if(inst instanceof window[PLUGINNAME]) - arr.push(inst); - } - else - arr.push(inst); - }); - result = arr.length > 1 ? arr : arr[0]; - } - else - result = instances.get(pluginTargetElements); - } - return result; - }; - - /** - * Returns a object which contains global information about the plugin and each instance of it. - * The returned object is just a copy, that means that changes to the returned object won't have any effect to the original object. - */ - window[PLUGINNAME].globals = function () { - initOverlayScrollbarsStatics(); - var globals = helper.extend(true, { }, _pluginsGlobals); - delete globals['msie']; - return globals; - }; - - /** - * Gets or Sets the default options for each new plugin initialization. - * @param newDefaultOptions The object with which the default options shall be extended. - */ - window[PLUGINNAME].defaultOptions = function(newDefaultOptions) { - initOverlayScrollbarsStatics(); - var currDefaultOptions = _pluginsGlobals.defaultOptions; - if(newDefaultOptions === undefined) - return helper.extend(true, { }, currDefaultOptions); - - //set the new default options - _pluginsGlobals.defaultOptions = helper.extend(true, { }, currDefaultOptions , _pluginsOptions.v(newDefaultOptions, _pluginsOptions.t, true)); - }; - - return window[PLUGINNAME]; - })(COMPATIBILITY, INSTANCES, FRAMEWORK); - - if(JQUERY && JQUERY.fn) { - /** - * The jQuery initialization interface. - * @param options The initial options for the construction of the plugin. To initialize the plugin, this option has to be a object! If it isn't a object, the instance(s) are returned and the plugin wont be initialized. - * @returns {*} After initialization it returns the jQuery element array, else it returns the instance(s) of the elements which are selected. - */ - JQUERY.fn.overlayScrollbars = function (options) { - var _elements = this; - if(JQUERY.isPlainObject(options)) { - JQUERY.each(_elements, function() { PLUGIN(this, options); }); - return _elements; - } - else - return PLUGIN(_elements, options); - }; - } - - return PLUGIN; - } -)); diff --git a/gui/vendor/velocity.js b/gui/vendor/velocity.js deleted file mode 100644 index 8a78dffa..00000000 --- a/gui/vendor/velocity.js +++ /dev/null @@ -1,4768 +0,0 @@ -/*! VelocityJS.org (1.5.0). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License */ - -/************************* - Velocity jQuery Shim - *************************/ - -/*! VelocityJS.org jQuery Shim (1.0.1). (C) 2014 The jQuery Foundation. MIT @license: en.wikipedia.org/wiki/MIT_License. */ - -/* This file contains the jQuery functions that Velocity relies on, thereby removing Velocity's dependency on a full copy of jQuery, and allowing it to work in any environment. */ -/* These shimmed functions are only used if jQuery isn't present. If both this shim and jQuery are loaded, Velocity defaults to jQuery proper. */ -/* Browser support: Using this shim instead of jQuery proper removes support for IE8. */ - -(function(window) { - "use strict"; - /*************** - Setup - ***************/ - - /* If jQuery is already loaded, there's no point in loading this shim. */ - if (window.jQuery) { - return; - } - - /* jQuery base. */ - var $ = function(selector, context) { - return new $.fn.init(selector, context); - }; - - /******************** - Private Methods - ********************/ - - /* jQuery */ - $.isWindow = function(obj) { - /* jshint eqeqeq: false */ - return obj && obj === obj.window; - }; - - /* jQuery */ - $.type = function(obj) { - if (!obj) { - return obj + ""; - } - - return typeof obj === "object" || typeof obj === "function" ? - class2type[toString.call(obj)] || "object" : - typeof obj; - }; - - /* jQuery */ - $.isArray = Array.isArray || function(obj) { - return $.type(obj) === "array"; - }; - - /* jQuery */ - function isArraylike(obj) { - var length = obj.length, - type = $.type(obj); - - if (type === "function" || $.isWindow(obj)) { - return false; - } - - if (obj.nodeType === 1 && length) { - return true; - } - - return type === "array" || length === 0 || typeof length === "number" && length > 0 && (length - 1) in obj; - } - - /*************** - $ Methods - ***************/ - - /* jQuery: Support removed for IE<9. */ - $.isPlainObject = function(obj) { - var key; - - if (!obj || $.type(obj) !== "object" || obj.nodeType || $.isWindow(obj)) { - return false; - } - - try { - if (obj.constructor && - !hasOwn.call(obj, "constructor") && - !hasOwn.call(obj.constructor.prototype, "isPrototypeOf")) { - return false; - } - } catch (e) { - return false; - } - - for (key in obj) { - } - - return key === undefined || hasOwn.call(obj, key); - }; - - /* jQuery */ - $.each = function(obj, callback, args) { - var value, - i = 0, - length = obj.length, - isArray = isArraylike(obj); - - if (args) { - if (isArray) { - for (; i < length; i++) { - value = callback.apply(obj[i], args); - - if (value === false) { - break; - } - } - } else { - for (i in obj) { - if (!obj.hasOwnProperty(i)) { - continue; - } - value = callback.apply(obj[i], args); - - if (value === false) { - break; - } - } - } - - } else { - if (isArray) { - for (; i < length; i++) { - value = callback.call(obj[i], i, obj[i]); - - if (value === false) { - break; - } - } - } else { - for (i in obj) { - if (!obj.hasOwnProperty(i)) { - continue; - } - value = callback.call(obj[i], i, obj[i]); - - if (value === false) { - break; - } - } - } - } - - return obj; - }; - - /* Custom */ - $.data = function(node, key, value) { - /* $.getData() */ - if (value === undefined) { - var getId = node[$.expando], - store = getId && cache[getId]; - - if (key === undefined) { - return store; - } else if (store) { - if (key in store) { - return store[key]; - } - } - /* $.setData() */ - } else if (key !== undefined) { - var setId = node[$.expando] || (node[$.expando] = ++$.uuid); - - cache[setId] = cache[setId] || {}; - cache[setId][key] = value; - - return value; - } - }; - - /* Custom */ - $.removeData = function(node, keys) { - var id = node[$.expando], - store = id && cache[id]; - - if (store) { - // Cleanup the entire store if no keys are provided. - if (!keys) { - delete cache[id]; - } else { - $.each(keys, function(_, key) { - delete store[key]; - }); - } - } - }; - - /* jQuery */ - $.extend = function() { - var src, copyIsArray, copy, name, options, clone, - target = arguments[0] || {}, - i = 1, - length = arguments.length, - deep = false; - - if (typeof target === "boolean") { - deep = target; - - target = arguments[i] || {}; - i++; - } - - if (typeof target !== "object" && $.type(target) !== "function") { - target = {}; - } - - if (i === length) { - target = this; - i--; - } - - for (; i < length; i++) { - if ((options = arguments[i])) { - for (name in options) { - if (!options.hasOwnProperty(name)) { - continue; - } - src = target[name]; - copy = options[name]; - - if (target === copy) { - continue; - } - - if (deep && copy && ($.isPlainObject(copy) || (copyIsArray = $.isArray(copy)))) { - if (copyIsArray) { - copyIsArray = false; - clone = src && $.isArray(src) ? src : []; - - } else { - clone = src && $.isPlainObject(src) ? src : {}; - } - - target[name] = $.extend(deep, clone, copy); - - } else if (copy !== undefined) { - target[name] = copy; - } - } - } - } - - return target; - }; - - /* jQuery 1.4.3 */ - $.queue = function(elem, type, data) { - function $makeArray(arr, results) { - var ret = results || []; - - if (arr) { - if (isArraylike(Object(arr))) { - /* $.merge */ - (function(first, second) { - var len = +second.length, - j = 0, - i = first.length; - - while (j < len) { - first[i++] = second[j++]; - } - - if (len !== len) { - while (second[j] !== undefined) { - first[i++] = second[j++]; - } - } - - first.length = i; - - return first; - })(ret, typeof arr === "string" ? [arr] : arr); - } else { - [].push.call(ret, arr); - } - } - - return ret; - } - - if (!elem) { - return; - } - - type = (type || "fx") + "queue"; - - var q = $.data(elem, type); - - if (!data) { - return q || []; - } - - if (!q || $.isArray(data)) { - q = $.data(elem, type, $makeArray(data)); - } else { - q.push(data); - } - - return q; - }; - - /* jQuery 1.4.3 */ - $.dequeue = function(elems, type) { - /* Custom: Embed element iteration. */ - $.each(elems.nodeType ? [elems] : elems, function(i, elem) { - type = type || "fx"; - - var queue = $.queue(elem, type), - fn = queue.shift(); - - if (fn === "inprogress") { - fn = queue.shift(); - } - - if (fn) { - if (type === "fx") { - queue.unshift("inprogress"); - } - - fn.call(elem, function() { - $.dequeue(elem, type); - }); - } - }); - }; - - /****************** - $.fn Methods - ******************/ - - /* jQuery */ - $.fn = $.prototype = { - init: function(selector) { - /* Just return the element wrapped inside an array; don't proceed with the actual jQuery node wrapping process. */ - if (selector.nodeType) { - this[0] = selector; - - return this; - } else { - throw new Error("Not a DOM node."); - } - }, - offset: function() { - /* jQuery altered code: Dropped disconnected DOM node checking. */ - var box = this[0].getBoundingClientRect ? this[0].getBoundingClientRect() : {top: 0, left: 0}; - - return { - top: box.top + (window.pageYOffset || document.scrollTop || 0) - (document.clientTop || 0), - left: box.left + (window.pageXOffset || document.scrollLeft || 0) - (document.clientLeft || 0) - }; - }, - position: function() { - /* jQuery */ - function offsetParentFn(elem) { - var offsetParent = elem.offsetParent; - - while (offsetParent && (offsetParent.nodeName.toLowerCase() !== "html" && offsetParent.style && offsetParent.style.position.toLowerCase() === "static")) { - offsetParent = offsetParent.offsetParent; - } - - return offsetParent || document; - } - - /* Zepto */ - var elem = this[0], - offsetParent = offsetParentFn(elem), - offset = this.offset(), - parentOffset = /^(?:body|html)$/i.test(offsetParent.nodeName) ? {top: 0, left: 0} : $(offsetParent).offset(); - - offset.top -= parseFloat(elem.style.marginTop) || 0; - offset.left -= parseFloat(elem.style.marginLeft) || 0; - - if (offsetParent.style) { - parentOffset.top += parseFloat(offsetParent.style.borderTopWidth) || 0; - parentOffset.left += parseFloat(offsetParent.style.borderLeftWidth) || 0; - } - - return { - top: offset.top - parentOffset.top, - left: offset.left - parentOffset.left - }; - } - }; - - /********************** - Private Variables - **********************/ - - /* For $.data() */ - var cache = {}; - $.expando = "velocity" + (new Date().getTime()); - $.uuid = 0; - - /* For $.queue() */ - var class2type = {}, - hasOwn = class2type.hasOwnProperty, - toString = class2type.toString; - - var types = "Boolean Number String Function Array Date RegExp Object Error".split(" "); - for (var i = 0; i < types.length; i++) { - class2type["[object " + types[i] + "]"] = types[i].toLowerCase(); - } - - /* Makes $(node) possible, without having to call init. */ - $.fn.init.prototype = $.fn; - - /* Globalize Velocity onto the window, and assign its Utilities property. */ - window.Velocity = {Utilities: $}; -})(window); - -/****************** - Velocity.js - ******************/ - -(function(factory) { - "use strict"; - /* CommonJS module. */ - if (typeof module === "object" && typeof module.exports === "object") { - module.exports = factory(); - /* AMD module. */ - } else if (typeof define === "function" && define.amd) { - define(factory); - /* Browser globals. */ - } else { - factory(); - } -}(function() { - "use strict"; - return function(global, window, document, undefined) { - - /*************** - Summary - ***************/ - - /* - - CSS: CSS stack that works independently from the rest of Velocity. - - animate(): Core animation method that iterates over the targeted elements and queues the incoming call onto each element individually. - - Pre-Queueing: Prepare the element for animation by instantiating its data cache and processing the call's options. - - Queueing: The logic that runs once the call has reached its point of execution in the element's $.queue() stack. - Most logic is placed here to avoid risking it becoming stale (if the element's properties have changed). - - Pushing: Consolidation of the tween data followed by its push onto the global in-progress calls container. - - tick(): The single requestAnimationFrame loop responsible for tweening all in-progress calls. - - completeCall(): Handles the cleanup process for each Velocity call. - */ - - /********************* - Helper Functions - *********************/ - - /* IE detection. Gist: https://gist.github.com/julianshapiro/9098609 */ - var IE = (function() { - if (document.documentMode) { - return document.documentMode; - } else { - for (var i = 7; i > 4; i--) { - var div = document.createElement("div"); - - div.innerHTML = ""; - - if (div.getElementsByTagName("span").length) { - div = null; - - return i; - } - } - } - - return undefined; - })(); - - /* rAF shim. Gist: https://gist.github.com/julianshapiro/9497513 */ - var rAFShim = (function() { - var timeLast = 0; - - return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { - var timeCurrent = (new Date()).getTime(), - timeDelta; - - /* Dynamically set delay on a per-tick basis to match 60fps. */ - /* Technique by Erik Moller. MIT license: https://gist.github.com/paulirish/1579671 */ - timeDelta = Math.max(0, 16 - (timeCurrent - timeLast)); - timeLast = timeCurrent + timeDelta; - - return setTimeout(function() { - callback(timeCurrent + timeDelta); - }, timeDelta); - }; - })(); - - var performance = (function() { - var perf = window.performance || {}; - - if (typeof perf.now !== "function") { - var nowOffset = perf.timing && perf.timing.navigationStart ? perf.timing.navigationStart : (new Date()).getTime(); - - perf.now = function() { - return (new Date()).getTime() - nowOffset; - }; - } - return perf; - })(); - - /* Array compacting. Copyright Lo-Dash. MIT License: https://github.com/lodash/lodash/blob/master/LICENSE.txt */ - function compactSparseArray(array) { - var index = -1, - length = array ? array.length : 0, - result = []; - - while (++index < length) { - var value = array[index]; - - if (value) { - result.push(value); - } - } - - return result; - } - - /** - * Shim for "fixing" IE's lack of support (IE < 9) for applying slice - * on host objects like NamedNodeMap, NodeList, and HTMLCollection - * (technically, since host objects have been implementation-dependent, - * at least before ES2015, IE hasn't needed to work this way). - * Also works on strings, fixes IE < 9 to allow an explicit undefined - * for the 2nd argument (as in Firefox), and prevents errors when - * called on other DOM objects. - */ - var _slice = (function() { - var slice = Array.prototype.slice; - - try { - // Can't be used with DOM elements in IE < 9 - slice.call(document.documentElement); - return slice; - } catch (e) { // Fails in IE < 9 - - // This will work for genuine arrays, array-like objects, - // NamedNodeMap (attributes, entities, notations), - // NodeList (e.g., getElementsByTagName), HTMLCollection (e.g., childNodes), - // and will not fail on other DOM objects (as do DOM elements in IE < 9) - return function(begin, end) { - var len = this.length; - - if (typeof begin !== "number") { - begin = 0; - } - // IE < 9 gets unhappy with an undefined end argument - if (typeof end !== "number") { - end = len; - } - // For native Array objects, we use the native slice function - if (this.slice) { - return slice.call(this, begin, end); - } - // For array like object we handle it ourselves. - var i, - cloned = [], - // Handle negative value for "begin" - start = (begin >= 0) ? begin : Math.max(0, len + begin), - // Handle negative value for "end" - upTo = end < 0 ? len + end : Math.min(end, len), - // Actual expected size of the slice - size = upTo - start; - - if (size > 0) { - cloned = new Array(size); - if (this.charAt) { - for (i = 0; i < size; i++) { - cloned[i] = this.charAt(start + i); - } - } else { - for (i = 0; i < size; i++) { - cloned[i] = this[start + i]; - } - } - } - return cloned; - }; - } - })(); - - /* .indexOf doesn't exist in IE<9 */ - var _inArray = (function() { - if (Array.prototype.includes) { - return function(arr, val) { - return arr.includes(val); - }; - } - if (Array.prototype.indexOf) { - return function(arr, val) { - return arr.indexOf(val) >= 0; - }; - } - return function(arr, val) { - for (var i = 0; i < arr.length; i++) { - if (arr[i] === val) { - return true; - } - } - return false; - }; - }); - - function sanitizeElements(elements) { - /* Unwrap jQuery/Zepto objects. */ - if (Type.isWrapped(elements)) { - elements = _slice.call(elements); - /* Wrap a single element in an array so that $.each() can iterate with the element instead of its node's children. */ - } else if (Type.isNode(elements)) { - elements = [elements]; - } - - return elements; - } - - var Type = { - isNumber: function(variable) { - return (typeof variable === "number"); - }, - isString: function(variable) { - return (typeof variable === "string"); - }, - isArray: Array.isArray || function(variable) { - return Object.prototype.toString.call(variable) === "[object Array]"; - }, - isFunction: function(variable) { - return Object.prototype.toString.call(variable) === "[object Function]"; - }, - isNode: function(variable) { - return variable && variable.nodeType; - }, - /* Determine if variable is an array-like wrapped jQuery, Zepto or similar element, or even a NodeList etc. */ - /* NOTE: HTMLFormElements also have a length. */ - isWrapped: function(variable) { - return variable - && variable !== window - && Type.isNumber(variable.length) - && !Type.isString(variable) - && !Type.isFunction(variable) - && !Type.isNode(variable) - && (variable.length === 0 || Type.isNode(variable[0])); - }, - isSVG: function(variable) { - return window.SVGElement && (variable instanceof window.SVGElement); - }, - isEmptyObject: function(variable) { - for (var name in variable) { - if (variable.hasOwnProperty(name)) { - return false; - } - } - - return true; - } - }; - - /***************** - Dependencies - *****************/ - - var $, - isJQuery = false; - - if (global.fn && global.fn.jquery) { - $ = global; - isJQuery = true; - } else { - $ = window.Velocity.Utilities; - } - - if (IE <= 8 && !isJQuery) { - throw new Error("Velocity: IE8 and below require jQuery to be loaded before Velocity."); - } else if (IE <= 7) { - /* Revert to jQuery's $.animate(), and lose Velocity's extra features. */ - jQuery.fn.velocity = jQuery.fn.animate; - - /* Now that $.fn.velocity is aliased, abort this Velocity declaration. */ - return; - } - - /***************** - Constants - *****************/ - - var DURATION_DEFAULT = 400, - EASING_DEFAULT = "swing"; - - /************* - State - *************/ - - var Velocity = { - /* Container for page-wide Velocity state data. */ - State: { - /* Detect mobile devices to determine if mobileHA should be turned on. */ - isMobile: /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent), - /* The mobileHA option's behavior changes on older Android devices (Gingerbread, versions 2.3.3-2.3.7). */ - isAndroid: /Android/i.test(navigator.userAgent), - isGingerbread: /Android 2\.3\.[3-7]/i.test(navigator.userAgent), - isChrome: window.chrome, - isFirefox: /Firefox/i.test(navigator.userAgent), - /* Create a cached element for re-use when checking for CSS property prefixes. */ - prefixElement: document.createElement("div"), - /* Cache every prefix match to avoid repeating lookups. */ - prefixMatches: {}, - /* Cache the anchor used for animating window scrolling. */ - scrollAnchor: null, - /* Cache the browser-specific property names associated with the scroll anchor. */ - scrollPropertyLeft: null, - scrollPropertyTop: null, - /* Keep track of whether our RAF tick is running. */ - isTicking: false, - /* Container for every in-progress call to Velocity. */ - calls: [], - delayedElements: { - count: 0 - } - }, - /* Velocity's custom CSS stack. Made global for unit testing. */ - CSS: {/* Defined below. */}, - /* A shim of the jQuery utility functions used by Velocity -- provided by Velocity's optional jQuery shim. */ - Utilities: $, - /* Container for the user's custom animation redirects that are referenced by name in place of the properties map argument. */ - Redirects: {/* Manually registered by the user. */}, - Easings: {/* Defined below. */}, - /* Attempt to use ES6 Promises by default. Users can override this with a third-party promises library. */ - Promise: window.Promise, - /* Velocity option defaults, which can be overriden by the user. */ - defaults: { - queue: "", - duration: DURATION_DEFAULT, - easing: EASING_DEFAULT, - begin: undefined, - complete: undefined, - progress: undefined, - display: undefined, - visibility: undefined, - loop: false, - delay: false, - mobileHA: true, - /* Advanced: Set to false to prevent property values from being cached between consecutive Velocity-initiated chain calls. */ - _cacheValues: true, - /* Advanced: Set to false if the promise should always resolve on empty element lists. */ - promiseRejectEmpty: true - }, - /* A design goal of Velocity is to cache data wherever possible in order to avoid DOM requerying. Accordingly, each element has a data cache. */ - init: function(element) { - $.data(element, "velocity", { - /* Store whether this is an SVG element, since its properties are retrieved and updated differently than standard HTML elements. */ - isSVG: Type.isSVG(element), - /* Keep track of whether the element is currently being animated by Velocity. - This is used to ensure that property values are not transferred between non-consecutive (stale) calls. */ - isAnimating: false, - /* A reference to the element's live computedStyle object. Learn more here: https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle */ - computedStyle: null, - /* Tween data is cached for each animation on the element so that data can be passed across calls -- - in particular, end values are used as subsequent start values in consecutive Velocity calls. */ - tweensContainer: null, - /* The full root property values of each CSS hook being animated on this element are cached so that: - 1) Concurrently-animating hooks sharing the same root can have their root values' merged into one while tweening. - 2) Post-hook-injection root values can be transferred over to consecutively chained Velocity calls as starting root values. */ - rootPropertyValueCache: {}, - /* A cache for transform updates, which must be manually flushed via CSS.flushTransformCache(). */ - transformCache: {} - }); - }, - /* A parallel to jQuery's $.css(), used for getting/setting Velocity's hooked CSS properties. */ - hook: null, /* Defined below. */ - /* Velocity-wide animation time remapping for testing purposes. */ - mock: false, - version: {major: 1, minor: 5, patch: 0}, - /* Set to 1 or 2 (most verbose) to output debug info to console. */ - debug: false, - /* Use rAF high resolution timestamp when available */ - timestamp: true, - /* Pause all animations */ - pauseAll: function(queueName) { - var currentTime = (new Date()).getTime(); - - $.each(Velocity.State.calls, function(i, activeCall) { - - if (activeCall) { - - /* If we have a queueName and this call is not on that queue, skip */ - if (queueName !== undefined && ((activeCall[2].queue !== queueName) || (activeCall[2].queue === false))) { - return true; - } - - /* Set call to paused */ - activeCall[5] = { - resume: false - }; - } - }); - - /* Pause timers on any currently delayed calls */ - $.each(Velocity.State.delayedElements, function(k, element) { - if (!element) { - return; - } - pauseDelayOnElement(element, currentTime); - }); - }, - /* Resume all animations */ - resumeAll: function(queueName) { - var currentTime = (new Date()).getTime(); - - $.each(Velocity.State.calls, function(i, activeCall) { - - if (activeCall) { - - /* If we have a queueName and this call is not on that queue, skip */ - if (queueName !== undefined && ((activeCall[2].queue !== queueName) || (activeCall[2].queue === false))) { - return true; - } - - /* Set call to resumed if it was paused */ - if (activeCall[5]) { - activeCall[5].resume = true; - } - } - }); - /* Resume timers on any currently delayed calls */ - $.each(Velocity.State.delayedElements, function(k, element) { - if (!element) { - return; - } - resumeDelayOnElement(element, currentTime); - }); - } - }; - - /* Retrieve the appropriate scroll anchor and property name for the browser: https://developer.mozilla.org/en-US/docs/Web/API/Window.scrollY */ - if (window.pageYOffset !== undefined) { - Velocity.State.scrollAnchor = window; - Velocity.State.scrollPropertyLeft = "pageXOffset"; - Velocity.State.scrollPropertyTop = "pageYOffset"; - } else { - Velocity.State.scrollAnchor = document.documentElement || document.body.parentNode || document.body; - Velocity.State.scrollPropertyLeft = "scrollLeft"; - Velocity.State.scrollPropertyTop = "scrollTop"; - } - - /* Shorthand alias for jQuery's $.data() utility. */ - function Data(element) { - /* Hardcode a reference to the plugin name. */ - var response = $.data(element, "velocity"); - - /* jQuery <=1.4.2 returns null instead of undefined when no match is found. We normalize this behavior. */ - return response === null ? undefined : response; - } - - /************** - Delay Timer - **************/ - - function pauseDelayOnElement(element, currentTime) { - /* Check for any delay timers, and pause the set timeouts (while preserving time data) - to be resumed when the "resume" command is issued */ - var data = Data(element); - if (data && data.delayTimer && !data.delayPaused) { - data.delayRemaining = data.delay - currentTime + data.delayBegin; - data.delayPaused = true; - clearTimeout(data.delayTimer.setTimeout); - } - } - - function resumeDelayOnElement(element, currentTime) { - /* Check for any paused timers and resume */ - var data = Data(element); - if (data && data.delayTimer && data.delayPaused) { - /* If the element was mid-delay, re initiate the timeout with the remaining delay */ - data.delayPaused = false; - data.delayTimer.setTimeout = setTimeout(data.delayTimer.next, data.delayRemaining); - } - } - - - - /************** - Easing - **************/ - - /* Step easing generator. */ - function generateStep(steps) { - return function(p) { - return Math.round(p * steps) * (1 / steps); - }; - } - - /* Bezier curve function generator. Copyright Gaetan Renaudeau. MIT License: http://en.wikipedia.org/wiki/MIT_License */ - function generateBezier(mX1, mY1, mX2, mY2) { - var NEWTON_ITERATIONS = 4, - NEWTON_MIN_SLOPE = 0.001, - SUBDIVISION_PRECISION = 0.0000001, - SUBDIVISION_MAX_ITERATIONS = 10, - kSplineTableSize = 11, - kSampleStepSize = 1.0 / (kSplineTableSize - 1.0), - float32ArraySupported = "Float32Array" in window; - - /* Must contain four arguments. */ - if (arguments.length !== 4) { - return false; - } - - /* Arguments must be numbers. */ - for (var i = 0; i < 4; ++i) { - if (typeof arguments[i] !== "number" || isNaN(arguments[i]) || !isFinite(arguments[i])) { - return false; - } - } - - /* X values must be in the [0, 1] range. */ - mX1 = Math.min(mX1, 1); - mX2 = Math.min(mX2, 1); - mX1 = Math.max(mX1, 0); - mX2 = Math.max(mX2, 0); - - var mSampleValues = float32ArraySupported ? new Float32Array(kSplineTableSize) : new Array(kSplineTableSize); - - function A(aA1, aA2) { - return 1.0 - 3.0 * aA2 + 3.0 * aA1; - } - function B(aA1, aA2) { - return 3.0 * aA2 - 6.0 * aA1; - } - function C(aA1) { - return 3.0 * aA1; - } - - function calcBezier(aT, aA1, aA2) { - return ((A(aA1, aA2) * aT + B(aA1, aA2)) * aT + C(aA1)) * aT; - } - - function getSlope(aT, aA1, aA2) { - return 3.0 * A(aA1, aA2) * aT * aT + 2.0 * B(aA1, aA2) * aT + C(aA1); - } - - function newtonRaphsonIterate(aX, aGuessT) { - for (var i = 0; i < NEWTON_ITERATIONS; ++i) { - var currentSlope = getSlope(aGuessT, mX1, mX2); - - if (currentSlope === 0.0) { - return aGuessT; - } - - var currentX = calcBezier(aGuessT, mX1, mX2) - aX; - aGuessT -= currentX / currentSlope; - } - - return aGuessT; - } - - function calcSampleValues() { - for (var i = 0; i < kSplineTableSize; ++i) { - mSampleValues[i] = calcBezier(i * kSampleStepSize, mX1, mX2); - } - } - - function binarySubdivide(aX, aA, aB) { - var currentX, currentT, i = 0; - - do { - currentT = aA + (aB - aA) / 2.0; - currentX = calcBezier(currentT, mX1, mX2) - aX; - if (currentX > 0.0) { - aB = currentT; - } else { - aA = currentT; - } - } while (Math.abs(currentX) > SUBDIVISION_PRECISION && ++i < SUBDIVISION_MAX_ITERATIONS); - - return currentT; - } - - function getTForX(aX) { - var intervalStart = 0.0, - currentSample = 1, - lastSample = kSplineTableSize - 1; - - for (; currentSample !== lastSample && mSampleValues[currentSample] <= aX; ++currentSample) { - intervalStart += kSampleStepSize; - } - - --currentSample; - - var dist = (aX - mSampleValues[currentSample]) / (mSampleValues[currentSample + 1] - mSampleValues[currentSample]), - guessForT = intervalStart + dist * kSampleStepSize, - initialSlope = getSlope(guessForT, mX1, mX2); - - if (initialSlope >= NEWTON_MIN_SLOPE) { - return newtonRaphsonIterate(aX, guessForT); - } else if (initialSlope === 0.0) { - return guessForT; - } else { - return binarySubdivide(aX, intervalStart, intervalStart + kSampleStepSize); - } - } - - var _precomputed = false; - - function precompute() { - _precomputed = true; - if (mX1 !== mY1 || mX2 !== mY2) { - calcSampleValues(); - } - } - - var f = function(aX) { - if (!_precomputed) { - precompute(); - } - if (mX1 === mY1 && mX2 === mY2) { - return aX; - } - if (aX === 0) { - return 0; - } - if (aX === 1) { - return 1; - } - - return calcBezier(getTForX(aX), mY1, mY2); - }; - - f.getControlPoints = function() { - return [{x: mX1, y: mY1}, {x: mX2, y: mY2}]; - }; - - var str = "generateBezier(" + [mX1, mY1, mX2, mY2] + ")"; - f.toString = function() { - return str; - }; - - return f; - } - - /* Runge-Kutta spring physics function generator. Adapted from Framer.js, copyright Koen Bok. MIT License: http://en.wikipedia.org/wiki/MIT_License */ - /* Given a tension, friction, and duration, a simulation at 60FPS will first run without a defined duration in order to calculate the full path. A second pass - then adjusts the time delta -- using the relation between actual time and duration -- to calculate the path for the duration-constrained animation. */ - var generateSpringRK4 = (function() { - function springAccelerationForState(state) { - return (-state.tension * state.x) - (state.friction * state.v); - } - - function springEvaluateStateWithDerivative(initialState, dt, derivative) { - var state = { - x: initialState.x + derivative.dx * dt, - v: initialState.v + derivative.dv * dt, - tension: initialState.tension, - friction: initialState.friction - }; - - return {dx: state.v, dv: springAccelerationForState(state)}; - } - - function springIntegrateState(state, dt) { - var a = { - dx: state.v, - dv: springAccelerationForState(state) - }, - b = springEvaluateStateWithDerivative(state, dt * 0.5, a), - c = springEvaluateStateWithDerivative(state, dt * 0.5, b), - d = springEvaluateStateWithDerivative(state, dt, c), - dxdt = 1.0 / 6.0 * (a.dx + 2.0 * (b.dx + c.dx) + d.dx), - dvdt = 1.0 / 6.0 * (a.dv + 2.0 * (b.dv + c.dv) + d.dv); - - state.x = state.x + dxdt * dt; - state.v = state.v + dvdt * dt; - - return state; - } - - return function springRK4Factory(tension, friction, duration) { - - var initState = { - x: -1, - v: 0, - tension: null, - friction: null - }, - path = [0], - time_lapsed = 0, - tolerance = 1 / 10000, - DT = 16 / 1000, - have_duration, dt, last_state; - - tension = parseFloat(tension) || 500; - friction = parseFloat(friction) || 20; - duration = duration || null; - - initState.tension = tension; - initState.friction = friction; - - have_duration = duration !== null; - - /* Calculate the actual time it takes for this animation to complete with the provided conditions. */ - if (have_duration) { - /* Run the simulation without a duration. */ - time_lapsed = springRK4Factory(tension, friction); - /* Compute the adjusted time delta. */ - dt = time_lapsed / duration * DT; - } else { - dt = DT; - } - - while (true) { - /* Next/step function .*/ - last_state = springIntegrateState(last_state || initState, dt); - /* Store the position. */ - path.push(1 + last_state.x); - time_lapsed += 16; - /* If the change threshold is reached, break. */ - if (!(Math.abs(last_state.x) > tolerance && Math.abs(last_state.v) > tolerance)) { - break; - } - } - - /* If duration is not defined, return the actual time required for completing this animation. Otherwise, return a closure that holds the - computed path and returns a snapshot of the position according to a given percentComplete. */ - return !have_duration ? time_lapsed : function(percentComplete) { - return path[ (percentComplete * (path.length - 1)) | 0 ]; - }; - }; - }()); - - /* jQuery easings. */ - Velocity.Easings = { - linear: function(p) { - return p; - }, - swing: function(p) { - return 0.5 - Math.cos(p * Math.PI) / 2; - }, - /* Bonus "spring" easing, which is a less exaggerated version of easeInOutElastic. */ - spring: function(p) { - return 1 - (Math.cos(p * 4.5 * Math.PI) * Math.exp(-p * 6)); - } - }; - - /* CSS3 and Robert Penner easings. */ - $.each( - [ - ["ease", [0.25, 0.1, 0.25, 1.0]], - ["ease-in", [0.42, 0.0, 1.00, 1.0]], - ["ease-out", [0.00, 0.0, 0.58, 1.0]], - ["ease-in-out", [0.42, 0.0, 0.58, 1.0]], - ["easeInSine", [0.47, 0, 0.745, 0.715]], - ["easeOutSine", [0.39, 0.575, 0.565, 1]], - ["easeInOutSine", [0.445, 0.05, 0.55, 0.95]], - ["easeInQuad", [0.55, 0.085, 0.68, 0.53]], - ["easeOutQuad", [0.25, 0.46, 0.45, 0.94]], - ["easeInOutQuad", [0.455, 0.03, 0.515, 0.955]], - ["easeInCubic", [0.55, 0.055, 0.675, 0.19]], - ["easeOutCubic", [0.215, 0.61, 0.355, 1]], - ["easeInOutCubic", [0.645, 0.045, 0.355, 1]], - ["easeInQuart", [0.895, 0.03, 0.685, 0.22]], - ["easeOutQuart", [0.165, 0.84, 0.44, 1]], - ["easeInOutQuart", [0.77, 0, 0.175, 1]], - ["easeInQuint", [0.755, 0.05, 0.855, 0.06]], - ["easeOutQuint", [0.23, 1, 0.32, 1]], - ["easeInOutQuint", [0.86, 0, 0.07, 1]], - ["easeInExpo", [0.95, 0.05, 0.795, 0.035]], - ["easeOutExpo", [0.19, 1, 0.22, 1]], - ["easeInOutExpo", [1, 0, 0, 1]], - ["easeInCirc", [0.6, 0.04, 0.98, 0.335]], - ["easeOutCirc", [0.075, 0.82, 0.165, 1]], - ["easeInOutCirc", [0.785, 0.135, 0.15, 0.86]] - ], function(i, easingArray) { - Velocity.Easings[easingArray[0]] = generateBezier.apply(null, easingArray[1]); - }); - - /* Determine the appropriate easing type given an easing input. */ - function getEasing(value, duration) { - var easing = value; - - /* The easing option can either be a string that references a pre-registered easing, - or it can be a two-/four-item array of integers to be converted into a bezier/spring function. */ - if (Type.isString(value)) { - /* Ensure that the easing has been assigned to jQuery's Velocity.Easings object. */ - if (!Velocity.Easings[value]) { - easing = false; - } - } else if (Type.isArray(value) && value.length === 1) { - easing = generateStep.apply(null, value); - } else if (Type.isArray(value) && value.length === 2) { - /* springRK4 must be passed the animation's duration. */ - /* Note: If the springRK4 array contains non-numbers, generateSpringRK4() returns an easing - function generated with default tension and friction values. */ - easing = generateSpringRK4.apply(null, value.concat([duration])); - } else if (Type.isArray(value) && value.length === 4) { - /* Note: If the bezier array contains non-numbers, generateBezier() returns false. */ - easing = generateBezier.apply(null, value); - } else { - easing = false; - } - - /* Revert to the Velocity-wide default easing type, or fall back to "swing" (which is also jQuery's default) - if the Velocity-wide default has been incorrectly modified. */ - if (easing === false) { - if (Velocity.Easings[Velocity.defaults.easing]) { - easing = Velocity.defaults.easing; - } else { - easing = EASING_DEFAULT; - } - } - - return easing; - } - - /***************** - CSS Stack - *****************/ - - /* The CSS object is a highly condensed and performant CSS stack that fully replaces jQuery's. - It handles the validation, getting, and setting of both standard CSS properties and CSS property hooks. */ - /* Note: A "CSS" shorthand is aliased so that our code is easier to read. */ - var CSS = Velocity.CSS = { - /************* - RegEx - *************/ - - RegEx: { - isHex: /^#([A-f\d]{3}){1,2}$/i, - /* Unwrap a property value's surrounding text, e.g. "rgba(4, 3, 2, 1)" ==> "4, 3, 2, 1" and "rect(4px 3px 2px 1px)" ==> "4px 3px 2px 1px". */ - valueUnwrap: /^[A-z]+\((.*)\)$/i, - wrappedValueAlreadyExtracted: /[0-9.]+ [0-9.]+ [0-9.]+( [0-9.]+)?/, - /* Split a multi-value property into an array of subvalues, e.g. "rgba(4, 3, 2, 1) 4px 3px 2px 1px" ==> [ "rgba(4, 3, 2, 1)", "4px", "3px", "2px", "1px" ]. */ - valueSplit: /([A-z]+\(.+\))|(([A-z0-9#-.]+?)(?=\s|$))/ig - }, - /************ - Lists - ************/ - - Lists: { - colors: ["fill", "stroke", "stopColor", "color", "backgroundColor", "borderColor", "borderTopColor", "borderRightColor", "borderBottomColor", "borderLeftColor", "outlineColor"], - transformsBase: ["translateX", "translateY", "scale", "scaleX", "scaleY", "skewX", "skewY", "rotateZ"], - transforms3D: ["transformPerspective", "translateZ", "scaleZ", "rotateX", "rotateY"], - units: [ - "%", // relative - "em", "ex", "ch", "rem", // font relative - "vw", "vh", "vmin", "vmax", // viewport relative - "cm", "mm", "Q", "in", "pc", "pt", "px", // absolute lengths - "deg", "grad", "rad", "turn", // angles - "s", "ms" // time - ], - colorNames: { - "aliceblue": "240,248,255", - "antiquewhite": "250,235,215", - "aquamarine": "127,255,212", - "aqua": "0,255,255", - "azure": "240,255,255", - "beige": "245,245,220", - "bisque": "255,228,196", - "black": "0,0,0", - "blanchedalmond": "255,235,205", - "blueviolet": "138,43,226", - "blue": "0,0,255", - "brown": "165,42,42", - "burlywood": "222,184,135", - "cadetblue": "95,158,160", - "chartreuse": "127,255,0", - "chocolate": "210,105,30", - "coral": "255,127,80", - "cornflowerblue": "100,149,237", - "cornsilk": "255,248,220", - "crimson": "220,20,60", - "cyan": "0,255,255", - "darkblue": "0,0,139", - "darkcyan": "0,139,139", - "darkgoldenrod": "184,134,11", - "darkgray": "169,169,169", - "darkgrey": "169,169,169", - "darkgreen": "0,100,0", - "darkkhaki": "189,183,107", - "darkmagenta": "139,0,139", - "darkolivegreen": "85,107,47", - "darkorange": "255,140,0", - "darkorchid": "153,50,204", - "darkred": "139,0,0", - "darksalmon": "233,150,122", - "darkseagreen": "143,188,143", - "darkslateblue": "72,61,139", - "darkslategray": "47,79,79", - "darkturquoise": "0,206,209", - "darkviolet": "148,0,211", - "deeppink": "255,20,147", - "deepskyblue": "0,191,255", - "dimgray": "105,105,105", - "dimgrey": "105,105,105", - "dodgerblue": "30,144,255", - "firebrick": "178,34,34", - "floralwhite": "255,250,240", - "forestgreen": "34,139,34", - "fuchsia": "255,0,255", - "gainsboro": "220,220,220", - "ghostwhite": "248,248,255", - "gold": "255,215,0", - "goldenrod": "218,165,32", - "gray": "128,128,128", - "grey": "128,128,128", - "greenyellow": "173,255,47", - "green": "0,128,0", - "honeydew": "240,255,240", - "hotpink": "255,105,180", - "indianred": "205,92,92", - "indigo": "75,0,130", - "ivory": "255,255,240", - "khaki": "240,230,140", - "lavenderblush": "255,240,245", - "lavender": "230,230,250", - "lawngreen": "124,252,0", - "lemonchiffon": "255,250,205", - "lightblue": "173,216,230", - "lightcoral": "240,128,128", - "lightcyan": "224,255,255", - "lightgoldenrodyellow": "250,250,210", - "lightgray": "211,211,211", - "lightgrey": "211,211,211", - "lightgreen": "144,238,144", - "lightpink": "255,182,193", - "lightsalmon": "255,160,122", - "lightseagreen": "32,178,170", - "lightskyblue": "135,206,250", - "lightslategray": "119,136,153", - "lightsteelblue": "176,196,222", - "lightyellow": "255,255,224", - "limegreen": "50,205,50", - "lime": "0,255,0", - "linen": "250,240,230", - "magenta": "255,0,255", - "maroon": "128,0,0", - "mediumaquamarine": "102,205,170", - "mediumblue": "0,0,205", - "mediumorchid": "186,85,211", - "mediumpurple": "147,112,219", - "mediumseagreen": "60,179,113", - "mediumslateblue": "123,104,238", - "mediumspringgreen": "0,250,154", - "mediumturquoise": "72,209,204", - "mediumvioletred": "199,21,133", - "midnightblue": "25,25,112", - "mintcream": "245,255,250", - "mistyrose": "255,228,225", - "moccasin": "255,228,181", - "navajowhite": "255,222,173", - "navy": "0,0,128", - "oldlace": "253,245,230", - "olivedrab": "107,142,35", - "olive": "128,128,0", - "orangered": "255,69,0", - "orange": "255,165,0", - "orchid": "218,112,214", - "palegoldenrod": "238,232,170", - "palegreen": "152,251,152", - "paleturquoise": "175,238,238", - "palevioletred": "219,112,147", - "papayawhip": "255,239,213", - "peachpuff": "255,218,185", - "peru": "205,133,63", - "pink": "255,192,203", - "plum": "221,160,221", - "powderblue": "176,224,230", - "purple": "128,0,128", - "red": "255,0,0", - "rosybrown": "188,143,143", - "royalblue": "65,105,225", - "saddlebrown": "139,69,19", - "salmon": "250,128,114", - "sandybrown": "244,164,96", - "seagreen": "46,139,87", - "seashell": "255,245,238", - "sienna": "160,82,45", - "silver": "192,192,192", - "skyblue": "135,206,235", - "slateblue": "106,90,205", - "slategray": "112,128,144", - "snow": "255,250,250", - "springgreen": "0,255,127", - "steelblue": "70,130,180", - "tan": "210,180,140", - "teal": "0,128,128", - "thistle": "216,191,216", - "tomato": "255,99,71", - "turquoise": "64,224,208", - "violet": "238,130,238", - "wheat": "245,222,179", - "whitesmoke": "245,245,245", - "white": "255,255,255", - "yellowgreen": "154,205,50", - "yellow": "255,255,0" - } - }, - /************ - Hooks - ************/ - - /* Hooks allow a subproperty (e.g. "boxShadowBlur") of a compound-value CSS property - (e.g. "boxShadow: X Y Blur Spread Color") to be animated as if it were a discrete property. */ - /* Note: Beyond enabling fine-grained property animation, hooking is necessary since Velocity only - tweens properties with single numeric values; unlike CSS transitions, Velocity does not interpolate compound-values. */ - Hooks: { - /******************** - Registration - ********************/ - - /* Templates are a concise way of indicating which subproperties must be individually registered for each compound-value CSS property. */ - /* Each template consists of the compound-value's base name, its constituent subproperty names, and those subproperties' default values. */ - templates: { - "textShadow": ["Color X Y Blur", "black 0px 0px 0px"], - "boxShadow": ["Color X Y Blur Spread", "black 0px 0px 0px 0px"], - "clip": ["Top Right Bottom Left", "0px 0px 0px 0px"], - "backgroundPosition": ["X Y", "0% 0%"], - "transformOrigin": ["X Y Z", "50% 50% 0px"], - "perspectiveOrigin": ["X Y", "50% 50%"] - }, - /* A "registered" hook is one that has been converted from its template form into a live, - tweenable property. It contains data to associate it with its root property. */ - registered: { - /* Note: A registered hook looks like this ==> textShadowBlur: [ "textShadow", 3 ], - which consists of the subproperty's name, the associated root property's name, - and the subproperty's position in the root's value. */ - }, - /* Convert the templates into individual hooks then append them to the registered object above. */ - register: function() { - /* Color hooks registration: Colors are defaulted to white -- as opposed to black -- since colors that are - currently set to "transparent" default to their respective template below when color-animated, - and white is typically a closer match to transparent than black is. An exception is made for text ("color"), - which is almost always set closer to black than white. */ - for (var i = 0; i < CSS.Lists.colors.length; i++) { - var rgbComponents = (CSS.Lists.colors[i] === "color") ? "0 0 0 1" : "255 255 255 1"; - CSS.Hooks.templates[CSS.Lists.colors[i]] = ["Red Green Blue Alpha", rgbComponents]; - } - - var rootProperty, - hookTemplate, - hookNames; - - /* In IE, color values inside compound-value properties are positioned at the end the value instead of at the beginning. - Thus, we re-arrange the templates accordingly. */ - if (IE) { - for (rootProperty in CSS.Hooks.templates) { - if (!CSS.Hooks.templates.hasOwnProperty(rootProperty)) { - continue; - } - hookTemplate = CSS.Hooks.templates[rootProperty]; - hookNames = hookTemplate[0].split(" "); - - var defaultValues = hookTemplate[1].match(CSS.RegEx.valueSplit); - - if (hookNames[0] === "Color") { - /* Reposition both the hook's name and its default value to the end of their respective strings. */ - hookNames.push(hookNames.shift()); - defaultValues.push(defaultValues.shift()); - - /* Replace the existing template for the hook's root property. */ - CSS.Hooks.templates[rootProperty] = [hookNames.join(" "), defaultValues.join(" ")]; - } - } - } - - /* Hook registration. */ - for (rootProperty in CSS.Hooks.templates) { - if (!CSS.Hooks.templates.hasOwnProperty(rootProperty)) { - continue; - } - hookTemplate = CSS.Hooks.templates[rootProperty]; - hookNames = hookTemplate[0].split(" "); - - for (var j in hookNames) { - if (!hookNames.hasOwnProperty(j)) { - continue; - } - var fullHookName = rootProperty + hookNames[j], - hookPosition = j; - - /* For each hook, register its full name (e.g. textShadowBlur) with its root property (e.g. textShadow) - and the hook's position in its template's default value string. */ - CSS.Hooks.registered[fullHookName] = [rootProperty, hookPosition]; - } - } - }, - /***************************** - Injection and Extraction - *****************************/ - - /* Look up the root property associated with the hook (e.g. return "textShadow" for "textShadowBlur"). */ - /* Since a hook cannot be set directly (the browser won't recognize it), style updating for hooks is routed through the hook's root property. */ - getRoot: function(property) { - var hookData = CSS.Hooks.registered[property]; - - if (hookData) { - return hookData[0]; - } else { - /* If there was no hook match, return the property name untouched. */ - return property; - } - }, - getUnit: function(str, start) { - var unit = (str.substr(start || 0, 5).match(/^[a-z%]+/) || [])[0] || ""; - - if (unit && _inArray(CSS.Lists.units, unit)) { - return unit; - } - return ""; - }, - fixColors: function(str) { - return str.replace(/(rgba?\(\s*)?(\b[a-z]+\b)/g, function($0, $1, $2) { - if (CSS.Lists.colorNames.hasOwnProperty($2)) { - return ($1 ? $1 : "rgba(") + CSS.Lists.colorNames[$2] + ($1 ? "" : ",1)"); - } - return $1 + $2; - }); - }, - /* Convert any rootPropertyValue, null or otherwise, into a space-delimited list of hook values so that - the targeted hook can be injected or extracted at its standard position. */ - cleanRootPropertyValue: function(rootProperty, rootPropertyValue) { - /* If the rootPropertyValue is wrapped with "rgb()", "clip()", etc., remove the wrapping to normalize the value before manipulation. */ - if (CSS.RegEx.valueUnwrap.test(rootPropertyValue)) { - rootPropertyValue = rootPropertyValue.match(CSS.RegEx.valueUnwrap)[1]; - } - - /* If rootPropertyValue is a CSS null-value (from which there's inherently no hook value to extract), - default to the root's default value as defined in CSS.Hooks.templates. */ - /* Note: CSS null-values include "none", "auto", and "transparent". They must be converted into their - zero-values (e.g. textShadow: "none" ==> textShadow: "0px 0px 0px black") for hook manipulation to proceed. */ - if (CSS.Values.isCSSNullValue(rootPropertyValue)) { - rootPropertyValue = CSS.Hooks.templates[rootProperty][1]; - } - - return rootPropertyValue; - }, - /* Extracted the hook's value from its root property's value. This is used to get the starting value of an animating hook. */ - extractValue: function(fullHookName, rootPropertyValue) { - var hookData = CSS.Hooks.registered[fullHookName]; - - if (hookData) { - var hookRoot = hookData[0], - hookPosition = hookData[1]; - - rootPropertyValue = CSS.Hooks.cleanRootPropertyValue(hookRoot, rootPropertyValue); - - /* Split rootPropertyValue into its constituent hook values then grab the desired hook at its standard position. */ - return rootPropertyValue.toString().match(CSS.RegEx.valueSplit)[hookPosition]; - } else { - /* If the provided fullHookName isn't a registered hook, return the rootPropertyValue that was passed in. */ - return rootPropertyValue; - } - }, - /* Inject the hook's value into its root property's value. This is used to piece back together the root property - once Velocity has updated one of its individually hooked values through tweening. */ - injectValue: function(fullHookName, hookValue, rootPropertyValue) { - var hookData = CSS.Hooks.registered[fullHookName]; - - if (hookData) { - var hookRoot = hookData[0], - hookPosition = hookData[1], - rootPropertyValueParts, - rootPropertyValueUpdated; - - rootPropertyValue = CSS.Hooks.cleanRootPropertyValue(hookRoot, rootPropertyValue); - - /* Split rootPropertyValue into its individual hook values, replace the targeted value with hookValue, - then reconstruct the rootPropertyValue string. */ - rootPropertyValueParts = rootPropertyValue.toString().match(CSS.RegEx.valueSplit); - rootPropertyValueParts[hookPosition] = hookValue; - rootPropertyValueUpdated = rootPropertyValueParts.join(" "); - - return rootPropertyValueUpdated; - } else { - /* If the provided fullHookName isn't a registered hook, return the rootPropertyValue that was passed in. */ - return rootPropertyValue; - } - } - }, - /******************* - Normalizations - *******************/ - - /* Normalizations standardize CSS property manipulation by pollyfilling browser-specific implementations (e.g. opacity) - and reformatting special properties (e.g. clip, rgba) to look like standard ones. */ - Normalizations: { - /* Normalizations are passed a normalization target (either the property's name, its extracted value, or its injected value), - the targeted element (which may need to be queried), and the targeted property value. */ - registered: { - clip: function(type, element, propertyValue) { - switch (type) { - case "name": - return "clip"; - /* Clip needs to be unwrapped and stripped of its commas during extraction. */ - case "extract": - var extracted; - - /* If Velocity also extracted this value, skip extraction. */ - if (CSS.RegEx.wrappedValueAlreadyExtracted.test(propertyValue)) { - extracted = propertyValue; - } else { - /* Remove the "rect()" wrapper. */ - extracted = propertyValue.toString().match(CSS.RegEx.valueUnwrap); - - /* Strip off commas. */ - extracted = extracted ? extracted[1].replace(/,(\s+)?/g, " ") : propertyValue; - } - - return extracted; - /* Clip needs to be re-wrapped during injection. */ - case "inject": - return "rect(" + propertyValue + ")"; - } - }, - blur: function(type, element, propertyValue) { - switch (type) { - case "name": - return Velocity.State.isFirefox ? "filter" : "-webkit-filter"; - case "extract": - var extracted = parseFloat(propertyValue); - - /* If extracted is NaN, meaning the value isn't already extracted. */ - if (!(extracted || extracted === 0)) { - var blurComponent = propertyValue.toString().match(/blur\(([0-9]+[A-z]+)\)/i); - - /* If the filter string had a blur component, return just the blur value and unit type. */ - if (blurComponent) { - extracted = blurComponent[1]; - /* If the component doesn't exist, default blur to 0. */ - } else { - extracted = 0; - } - } - - return extracted; - /* Blur needs to be re-wrapped during injection. */ - case "inject": - /* For the blur effect to be fully de-applied, it needs to be set to "none" instead of 0. */ - if (!parseFloat(propertyValue)) { - return "none"; - } else { - return "blur(" + propertyValue + ")"; - } - } - }, - /* <=IE8 do not support the standard opacity property. They use filter:alpha(opacity=INT) instead. */ - opacity: function(type, element, propertyValue) { - if (IE <= 8) { - switch (type) { - case "name": - return "filter"; - case "extract": - /* <=IE8 return a "filter" value of "alpha(opacity=\d{1,3})". - Extract the value and convert it to a decimal value to match the standard CSS opacity property's formatting. */ - var extracted = propertyValue.toString().match(/alpha\(opacity=(.*)\)/i); - - if (extracted) { - /* Convert to decimal value. */ - propertyValue = extracted[1] / 100; - } else { - /* When extracting opacity, default to 1 since a null value means opacity hasn't been set. */ - propertyValue = 1; - } - - return propertyValue; - case "inject": - /* Opacified elements are required to have their zoom property set to a non-zero value. */ - element.style.zoom = 1; - - /* Setting the filter property on elements with certain font property combinations can result in a - highly unappealing ultra-bolding effect. There's no way to remedy this throughout a tween, but dropping the - value altogether (when opacity hits 1) at leasts ensures that the glitch is gone post-tweening. */ - if (parseFloat(propertyValue) >= 1) { - return ""; - } else { - /* As per the filter property's spec, convert the decimal value to a whole number and wrap the value. */ - return "alpha(opacity=" + parseInt(parseFloat(propertyValue) * 100, 10) + ")"; - } - } - /* With all other browsers, normalization is not required; return the same values that were passed in. */ - } else { - switch (type) { - case "name": - return "opacity"; - case "extract": - return propertyValue; - case "inject": - return propertyValue; - } - } - } - }, - /***************************** - Batched Registrations - *****************************/ - - /* Note: Batched normalizations extend the CSS.Normalizations.registered object. */ - register: function() { - - /***************** - Transforms - *****************/ - - /* Transforms are the subproperties contained by the CSS "transform" property. Transforms must undergo normalization - so that they can be referenced in a properties map by their individual names. */ - /* Note: When transforms are "set", they are actually assigned to a per-element transformCache. When all transform - setting is complete complete, CSS.flushTransformCache() must be manually called to flush the values to the DOM. - Transform setting is batched in this way to improve performance: the transform style only needs to be updated - once when multiple transform subproperties are being animated simultaneously. */ - /* Note: IE9 and Android Gingerbread have support for 2D -- but not 3D -- transforms. Since animating unsupported - transform properties results in the browser ignoring the *entire* transform string, we prevent these 3D values - from being normalized for these browsers so that tweening skips these properties altogether - (since it will ignore them as being unsupported by the browser.) */ - if ((!IE || IE > 9) && !Velocity.State.isGingerbread) { - /* Note: Since the standalone CSS "perspective" property and the CSS transform "perspective" subproperty - share the same name, the latter is given a unique token within Velocity: "transformPerspective". */ - CSS.Lists.transformsBase = CSS.Lists.transformsBase.concat(CSS.Lists.transforms3D); - } - - for (var i = 0; i < CSS.Lists.transformsBase.length; i++) { - /* Wrap the dynamically generated normalization function in a new scope so that transformName's value is - paired with its respective function. (Otherwise, all functions would take the final for loop's transformName.) */ - (function() { - var transformName = CSS.Lists.transformsBase[i]; - - CSS.Normalizations.registered[transformName] = function(type, element, propertyValue) { - switch (type) { - /* The normalized property name is the parent "transform" property -- the property that is actually set in CSS. */ - case "name": - return "transform"; - /* Transform values are cached onto a per-element transformCache object. */ - case "extract": - /* If this transform has yet to be assigned a value, return its null value. */ - if (Data(element) === undefined || Data(element).transformCache[transformName] === undefined) { - /* Scale CSS.Lists.transformsBase default to 1 whereas all other transform properties default to 0. */ - return /^scale/i.test(transformName) ? 1 : 0; - /* When transform values are set, they are wrapped in parentheses as per the CSS spec. - Thus, when extracting their values (for tween calculations), we strip off the parentheses. */ - } - return Data(element).transformCache[transformName].replace(/[()]/g, ""); - case "inject": - var invalid = false; - - /* If an individual transform property contains an unsupported unit type, the browser ignores the *entire* transform property. - Thus, protect users from themselves by skipping setting for transform values supplied with invalid unit types. */ - /* Switch on the base transform type; ignore the axis by removing the last letter from the transform's name. */ - switch (transformName.substr(0, transformName.length - 1)) { - /* Whitelist unit types for each transform. */ - case "translate": - invalid = !/(%|px|em|rem|vw|vh|\d)$/i.test(propertyValue); - break; - /* Since an axis-free "scale" property is supported as well, a little hack is used here to detect it by chopping off its last letter. */ - case "scal": - case "scale": - /* Chrome on Android has a bug in which scaled elements blur if their initial scale - value is below 1 (which can happen with forcefeeding). Thus, we detect a yet-unset scale property - and ensure that its first value is always 1. More info: http://stackoverflow.com/questions/10417890/css3-animations-with-transform-causes-blurred-elements-on-webkit/10417962#10417962 */ - if (Velocity.State.isAndroid && Data(element).transformCache[transformName] === undefined && propertyValue < 1) { - propertyValue = 1; - } - - invalid = !/(\d)$/i.test(propertyValue); - break; - case "skew": - invalid = !/(deg|\d)$/i.test(propertyValue); - break; - case "rotate": - invalid = !/(deg|\d)$/i.test(propertyValue); - break; - } - - if (!invalid) { - /* As per the CSS spec, wrap the value in parentheses. */ - Data(element).transformCache[transformName] = "(" + propertyValue + ")"; - } - - /* Although the value is set on the transformCache object, return the newly-updated value for the calling code to process as normal. */ - return Data(element).transformCache[transformName]; - } - }; - })(); - } - - /************* - Colors - *************/ - - /* Since Velocity only animates a single numeric value per property, color animation is achieved by hooking the individual RGBA components of CSS color properties. - Accordingly, color values must be normalized (e.g. "#ff0000", "red", and "rgb(255, 0, 0)" ==> "255 0 0 1") so that their components can be injected/extracted by CSS.Hooks logic. */ - for (var j = 0; j < CSS.Lists.colors.length; j++) { - /* Wrap the dynamically generated normalization function in a new scope so that colorName's value is paired with its respective function. - (Otherwise, all functions would take the final for loop's colorName.) */ - (function() { - var colorName = CSS.Lists.colors[j]; - - /* Note: In IE<=8, which support rgb but not rgba, color properties are reverted to rgb by stripping off the alpha component. */ - CSS.Normalizations.registered[colorName] = function(type, element, propertyValue) { - switch (type) { - case "name": - return colorName; - /* Convert all color values into the rgb format. (Old IE can return hex values and color names instead of rgb/rgba.) */ - case "extract": - var extracted; - - /* If the color is already in its hookable form (e.g. "255 255 255 1") due to having been previously extracted, skip extraction. */ - if (CSS.RegEx.wrappedValueAlreadyExtracted.test(propertyValue)) { - extracted = propertyValue; - } else { - var converted, - colorNames = { - black: "rgb(0, 0, 0)", - blue: "rgb(0, 0, 255)", - gray: "rgb(128, 128, 128)", - green: "rgb(0, 128, 0)", - red: "rgb(255, 0, 0)", - white: "rgb(255, 255, 255)" - }; - - /* Convert color names to rgb. */ - if (/^[A-z]+$/i.test(propertyValue)) { - if (colorNames[propertyValue] !== undefined) { - converted = colorNames[propertyValue]; - } else { - /* If an unmatched color name is provided, default to black. */ - converted = colorNames.black; - } - /* Convert hex values to rgb. */ - } else if (CSS.RegEx.isHex.test(propertyValue)) { - converted = "rgb(" + CSS.Values.hexToRgb(propertyValue).join(" ") + ")"; - /* If the provided color doesn't match any of the accepted color formats, default to black. */ - } else if (!(/^rgba?\(/i.test(propertyValue))) { - converted = colorNames.black; - } - - /* Remove the surrounding "rgb/rgba()" string then replace commas with spaces and strip - repeated spaces (in case the value included spaces to begin with). */ - extracted = (converted || propertyValue).toString().match(CSS.RegEx.valueUnwrap)[1].replace(/,(\s+)?/g, " "); - } - - /* So long as this isn't <=IE8, add a fourth (alpha) component if it's missing and default it to 1 (visible). */ - if ((!IE || IE > 8) && extracted.split(" ").length === 3) { - extracted += " 1"; - } - - return extracted; - case "inject": - /* If we have a pattern then it might already have the right values */ - if (/^rgb/.test(propertyValue)) { - return propertyValue; - } - - /* If this is IE<=8 and an alpha component exists, strip it off. */ - if (IE <= 8) { - if (propertyValue.split(" ").length === 4) { - propertyValue = propertyValue.split(/\s+/).slice(0, 3).join(" "); - } - /* Otherwise, add a fourth (alpha) component if it's missing and default it to 1 (visible). */ - } else if (propertyValue.split(" ").length === 3) { - propertyValue += " 1"; - } - - /* Re-insert the browser-appropriate wrapper("rgb/rgba()"), insert commas, and strip off decimal units - on all values but the fourth (R, G, and B only accept whole numbers). */ - return (IE <= 8 ? "rgb" : "rgba") + "(" + propertyValue.replace(/\s+/g, ",").replace(/\.(\d)+(?=,)/g, "") + ")"; - } - }; - })(); - } - - /************** - Dimensions - **************/ - function augmentDimension(name, element, wantInner) { - var isBorderBox = CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() === "border-box"; - - if (isBorderBox === (wantInner || false)) { - /* in box-sizing mode, the CSS width / height accessors already give the outerWidth / outerHeight. */ - var i, - value, - augment = 0, - sides = name === "width" ? ["Left", "Right"] : ["Top", "Bottom"], - fields = ["padding" + sides[0], "padding" + sides[1], "border" + sides[0] + "Width", "border" + sides[1] + "Width"]; - - for (i = 0; i < fields.length; i++) { - value = parseFloat(CSS.getPropertyValue(element, fields[i])); - if (!isNaN(value)) { - augment += value; - } - } - return wantInner ? -augment : augment; - } - return 0; - } - function getDimension(name, wantInner) { - return function(type, element, propertyValue) { - switch (type) { - case "name": - return name; - case "extract": - return parseFloat(propertyValue) + augmentDimension(name, element, wantInner); - case "inject": - return (parseFloat(propertyValue) - augmentDimension(name, element, wantInner)) + "px"; - } - }; - } - CSS.Normalizations.registered.innerWidth = getDimension("width", true); - CSS.Normalizations.registered.innerHeight = getDimension("height", true); - CSS.Normalizations.registered.outerWidth = getDimension("width"); - CSS.Normalizations.registered.outerHeight = getDimension("height"); - } - }, - /************************ - CSS Property Names - ************************/ - - Names: { - /* Camelcase a property name into its JavaScript notation (e.g. "background-color" ==> "backgroundColor"). - Camelcasing is used to normalize property names between and across calls. */ - camelCase: function(property) { - return property.replace(/-(\w)/g, function(match, subMatch) { - return subMatch.toUpperCase(); - }); - }, - /* For SVG elements, some properties (namely, dimensional ones) are GET/SET via the element's HTML attributes (instead of via CSS styles). */ - SVGAttribute: function(property) { - var SVGAttributes = "width|height|x|y|cx|cy|r|rx|ry|x1|x2|y1|y2"; - - /* Certain browsers require an SVG transform to be applied as an attribute. (Otherwise, application via CSS is preferable due to 3D support.) */ - if (IE || (Velocity.State.isAndroid && !Velocity.State.isChrome)) { - SVGAttributes += "|transform"; - } - - return new RegExp("^(" + SVGAttributes + ")$", "i").test(property); - }, - /* Determine whether a property should be set with a vendor prefix. */ - /* If a prefixed version of the property exists, return it. Otherwise, return the original property name. - If the property is not at all supported by the browser, return a false flag. */ - prefixCheck: function(property) { - /* If this property has already been checked, return the cached value. */ - if (Velocity.State.prefixMatches[property]) { - return [Velocity.State.prefixMatches[property], true]; - } else { - var vendors = ["", "Webkit", "Moz", "ms", "O"]; - - for (var i = 0, vendorsLength = vendors.length; i < vendorsLength; i++) { - var propertyPrefixed; - - if (i === 0) { - propertyPrefixed = property; - } else { - /* Capitalize the first letter of the property to conform to JavaScript vendor prefix notation (e.g. webkitFilter). */ - propertyPrefixed = vendors[i] + property.replace(/^\w/, function(match) { - return match.toUpperCase(); - }); - } - - /* Check if the browser supports this property as prefixed. */ - if (Type.isString(Velocity.State.prefixElement.style[propertyPrefixed])) { - /* Cache the match. */ - Velocity.State.prefixMatches[property] = propertyPrefixed; - - return [propertyPrefixed, true]; - } - } - - /* If the browser doesn't support this property in any form, include a false flag so that the caller can decide how to proceed. */ - return [property, false]; - } - } - }, - /************************ - CSS Property Values - ************************/ - - Values: { - /* Hex to RGB conversion. Copyright Tim Down: http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb */ - hexToRgb: function(hex) { - var shortformRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i, - longformRegex = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i, - rgbParts; - - hex = hex.replace(shortformRegex, function(m, r, g, b) { - return r + r + g + g + b + b; - }); - - rgbParts = longformRegex.exec(hex); - - return rgbParts ? [parseInt(rgbParts[1], 16), parseInt(rgbParts[2], 16), parseInt(rgbParts[3], 16)] : [0, 0, 0]; - }, - isCSSNullValue: function(value) { - /* The browser defaults CSS values that have not been set to either 0 or one of several possible null-value strings. - Thus, we check for both falsiness and these special strings. */ - /* Null-value checking is performed to default the special strings to 0 (for the sake of tweening) or their hook - templates as defined as CSS.Hooks (for the sake of hook injection/extraction). */ - /* Note: Chrome returns "rgba(0, 0, 0, 0)" for an undefined color whereas IE returns "transparent". */ - return (!value || /^(none|auto|transparent|(rgba\(0, ?0, ?0, ?0\)))$/i.test(value)); - }, - /* Retrieve a property's default unit type. Used for assigning a unit type when one is not supplied by the user. */ - getUnitType: function(property) { - if (/^(rotate|skew)/i.test(property)) { - return "deg"; - } else if (/(^(scale|scaleX|scaleY|scaleZ|alpha|flexGrow|flexHeight|zIndex|fontWeight)$)|((opacity|red|green|blue|alpha)$)/i.test(property)) { - /* The above properties are unitless. */ - return ""; - } else { - /* Default to px for all other properties. */ - return "px"; - } - }, - /* HTML elements default to an associated display type when they're not set to display:none. */ - /* Note: This function is used for correctly setting the non-"none" display value in certain Velocity redirects, such as fadeIn/Out. */ - getDisplayType: function(element) { - var tagName = element && element.tagName.toString().toLowerCase(); - - if (/^(b|big|i|small|tt|abbr|acronym|cite|code|dfn|em|kbd|strong|samp|var|a|bdo|br|img|map|object|q|script|span|sub|sup|button|input|label|select|textarea)$/i.test(tagName)) { - return "inline"; - } else if (/^(li)$/i.test(tagName)) { - return "list-item"; - } else if (/^(tr)$/i.test(tagName)) { - return "table-row"; - } else if (/^(table)$/i.test(tagName)) { - return "table"; - } else if (/^(tbody)$/i.test(tagName)) { - return "table-row-group"; - /* Default to "block" when no match is found. */ - } else { - return "block"; - } - }, - /* The class add/remove functions are used to temporarily apply a "velocity-animating" class to elements while they're animating. */ - addClass: function(element, className) { - if (element) { - if (element.classList) { - element.classList.add(className); - } else if (Type.isString(element.className)) { - // Element.className is around 15% faster then set/getAttribute - element.className += (element.className.length ? " " : "") + className; - } else { - // Work around for IE strict mode animating SVG - and anything else that doesn't behave correctly - the same way jQuery does it - var currentClass = element.getAttribute(IE <= 7 ? "className" : "class") || ""; - - element.setAttribute("class", currentClass + (currentClass ? " " : "") + className); - } - } - }, - removeClass: function(element, className) { - if (element) { - if (element.classList) { - element.classList.remove(className); - } else if (Type.isString(element.className)) { - // Element.className is around 15% faster then set/getAttribute - // TODO: Need some jsperf tests on performance - can we get rid of the regex and maybe use split / array manipulation? - element.className = element.className.toString().replace(new RegExp("(^|\\s)" + className.split(" ").join("|") + "(\\s|$)", "gi"), " "); - } else { - // Work around for IE strict mode animating SVG - and anything else that doesn't behave correctly - the same way jQuery does it - var currentClass = element.getAttribute(IE <= 7 ? "className" : "class") || ""; - - element.setAttribute("class", currentClass.replace(new RegExp("(^|\s)" + className.split(" ").join("|") + "(\s|$)", "gi"), " ")); - } - } - } - }, - /**************************** - Style Getting & Setting - ****************************/ - - /* The singular getPropertyValue, which routes the logic for all normalizations, hooks, and standard CSS properties. */ - getPropertyValue: function(element, property, rootPropertyValue, forceStyleLookup) { - /* Get an element's computed property value. */ - /* Note: Retrieving the value of a CSS property cannot simply be performed by checking an element's - style attribute (which only reflects user-defined values). Instead, the browser must be queried for a property's - *computed* value. You can read more about getComputedStyle here: https://developer.mozilla.org/en/docs/Web/API/window.getComputedStyle */ - function computePropertyValue(element, property) { - /* When box-sizing isn't set to border-box, height and width style values are incorrectly computed when an - element's scrollbars are visible (which expands the element's dimensions). Thus, we defer to the more accurate - offsetHeight/Width property, which includes the total dimensions for interior, border, padding, and scrollbar. - We subtract border and padding to get the sum of interior + scrollbar. */ - var computedValue = 0; - - /* IE<=8 doesn't support window.getComputedStyle, thus we defer to jQuery, which has an extensive array - of hacks to accurately retrieve IE8 property values. Re-implementing that logic here is not worth bloating the - codebase for a dying browser. The performance repercussions of using jQuery here are minimal since - Velocity is optimized to rarely (and sometimes never) query the DOM. Further, the $.css() codepath isn't that slow. */ - if (IE <= 8) { - computedValue = $.css(element, property); /* GET */ - /* All other browsers support getComputedStyle. The returned live object reference is cached onto its - associated element so that it does not need to be refetched upon every GET. */ - } else { - /* Browsers do not return height and width values for elements that are set to display:"none". Thus, we temporarily - toggle display to the element type's default value. */ - var toggleDisplay = false; - - if (/^(width|height)$/.test(property) && CSS.getPropertyValue(element, "display") === 0) { - toggleDisplay = true; - CSS.setPropertyValue(element, "display", CSS.Values.getDisplayType(element)); - } - - var revertDisplay = function() { - if (toggleDisplay) { - CSS.setPropertyValue(element, "display", "none"); - } - }; - - if (!forceStyleLookup) { - if (property === "height" && CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() !== "border-box") { - var contentBoxHeight = element.offsetHeight - (parseFloat(CSS.getPropertyValue(element, "borderTopWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderBottomWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingTop")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingBottom")) || 0); - revertDisplay(); - - return contentBoxHeight; - } else if (property === "width" && CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() !== "border-box") { - var contentBoxWidth = element.offsetWidth - (parseFloat(CSS.getPropertyValue(element, "borderLeftWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "borderRightWidth")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingLeft")) || 0) - (parseFloat(CSS.getPropertyValue(element, "paddingRight")) || 0); - revertDisplay(); - - return contentBoxWidth; - } - } - - var computedStyle; - - /* For elements that Velocity hasn't been called on directly (e.g. when Velocity queries the DOM on behalf - of a parent of an element its animating), perform a direct getComputedStyle lookup since the object isn't cached. */ - if (Data(element) === undefined) { - computedStyle = window.getComputedStyle(element, null); /* GET */ - /* If the computedStyle object has yet to be cached, do so now. */ - } else if (!Data(element).computedStyle) { - computedStyle = Data(element).computedStyle = window.getComputedStyle(element, null); /* GET */ - /* If computedStyle is cached, use it. */ - } else { - computedStyle = Data(element).computedStyle; - } - - /* IE and Firefox do not return a value for the generic borderColor -- they only return individual values for each border side's color. - Also, in all browsers, when border colors aren't all the same, a compound value is returned that Velocity isn't setup to parse. - So, as a polyfill for querying individual border side colors, we just return the top border's color and animate all borders from that value. */ - if (property === "borderColor") { - property = "borderTopColor"; - } - - /* IE9 has a bug in which the "filter" property must be accessed from computedStyle using the getPropertyValue method - instead of a direct property lookup. The getPropertyValue method is slower than a direct lookup, which is why we avoid it by default. */ - if (IE === 9 && property === "filter") { - computedValue = computedStyle.getPropertyValue(property); /* GET */ - } else { - computedValue = computedStyle[property]; - } - - /* Fall back to the property's style value (if defined) when computedValue returns nothing, - which can happen when the element hasn't been painted. */ - if (computedValue === "" || computedValue === null) { - computedValue = element.style[property]; - } - - revertDisplay(); - } - - /* For top, right, bottom, and left (TRBL) values that are set to "auto" on elements of "fixed" or "absolute" position, - defer to jQuery for converting "auto" to a numeric value. (For elements with a "static" or "relative" position, "auto" has the same - effect as being set to 0, so no conversion is necessary.) */ - /* An example of why numeric conversion is necessary: When an element with "position:absolute" has an untouched "left" - property, which reverts to "auto", left's value is 0 relative to its parent element, but is often non-zero relative - to its *containing* (not parent) element, which is the nearest "position:relative" ancestor or the viewport (and always the viewport in the case of "position:fixed"). */ - if (computedValue === "auto" && /^(top|right|bottom|left)$/i.test(property)) { - var position = computePropertyValue(element, "position"); /* GET */ - - /* For absolute positioning, jQuery's $.position() only returns values for top and left; - right and bottom will have their "auto" value reverted to 0. */ - /* Note: A jQuery object must be created here since jQuery doesn't have a low-level alias for $.position(). - Not a big deal since we're currently in a GET batch anyway. */ - if (position === "fixed" || (position === "absolute" && /top|left/i.test(property))) { - /* Note: jQuery strips the pixel unit from its returned values; we re-add it here to conform with computePropertyValue's behavior. */ - computedValue = $(element).position()[property] + "px"; /* GET */ - } - } - - return computedValue; - } - - var propertyValue; - - /* If this is a hooked property (e.g. "clipLeft" instead of the root property of "clip"), - extract the hook's value from a normalized rootPropertyValue using CSS.Hooks.extractValue(). */ - if (CSS.Hooks.registered[property]) { - var hook = property, - hookRoot = CSS.Hooks.getRoot(hook); - - /* If a cached rootPropertyValue wasn't passed in (which Velocity always attempts to do in order to avoid requerying the DOM), - query the DOM for the root property's value. */ - if (rootPropertyValue === undefined) { - /* Since the browser is now being directly queried, use the official post-prefixing property name for this lookup. */ - rootPropertyValue = CSS.getPropertyValue(element, CSS.Names.prefixCheck(hookRoot)[0]); /* GET */ - } - - /* If this root has a normalization registered, peform the associated normalization extraction. */ - if (CSS.Normalizations.registered[hookRoot]) { - rootPropertyValue = CSS.Normalizations.registered[hookRoot]("extract", element, rootPropertyValue); - } - - /* Extract the hook's value. */ - propertyValue = CSS.Hooks.extractValue(hook, rootPropertyValue); - - /* If this is a normalized property (e.g. "opacity" becomes "filter" in <=IE8) or "translateX" becomes "transform"), - normalize the property's name and value, and handle the special case of transforms. */ - /* Note: Normalizing a property is mutually exclusive from hooking a property since hook-extracted values are strictly - numerical and therefore do not require normalization extraction. */ - } else if (CSS.Normalizations.registered[property]) { - var normalizedPropertyName, - normalizedPropertyValue; - - normalizedPropertyName = CSS.Normalizations.registered[property]("name", element); - - /* Transform values are calculated via normalization extraction (see below), which checks against the element's transformCache. - At no point do transform GETs ever actually query the DOM; initial stylesheet values are never processed. - This is because parsing 3D transform matrices is not always accurate and would bloat our codebase; - thus, normalization extraction defaults initial transform values to their zero-values (e.g. 1 for scaleX and 0 for translateX). */ - if (normalizedPropertyName !== "transform") { - normalizedPropertyValue = computePropertyValue(element, CSS.Names.prefixCheck(normalizedPropertyName)[0]); /* GET */ - - /* If the value is a CSS null-value and this property has a hook template, use that zero-value template so that hooks can be extracted from it. */ - if (CSS.Values.isCSSNullValue(normalizedPropertyValue) && CSS.Hooks.templates[property]) { - normalizedPropertyValue = CSS.Hooks.templates[property][1]; - } - } - - propertyValue = CSS.Normalizations.registered[property]("extract", element, normalizedPropertyValue); - } - - /* If a (numeric) value wasn't produced via hook extraction or normalization, query the DOM. */ - if (!/^[\d-]/.test(propertyValue)) { - /* For SVG elements, dimensional properties (which SVGAttribute() detects) are tweened via - their HTML attribute values instead of their CSS style values. */ - var data = Data(element); - - if (data && data.isSVG && CSS.Names.SVGAttribute(property)) { - /* Since the height/width attribute values must be set manually, they don't reflect computed values. - Thus, we use use getBBox() to ensure we always get values for elements with undefined height/width attributes. */ - if (/^(height|width)$/i.test(property)) { - /* Firefox throws an error if .getBBox() is called on an SVG that isn't attached to the DOM. */ - try { - propertyValue = element.getBBox()[property]; - } catch (error) { - propertyValue = 0; - } - /* Otherwise, access the attribute value directly. */ - } else { - propertyValue = element.getAttribute(property); - } - } else { - propertyValue = computePropertyValue(element, CSS.Names.prefixCheck(property)[0]); /* GET */ - } - } - - /* Since property lookups are for animation purposes (which entails computing the numeric delta between start and end values), - convert CSS null-values to an integer of value 0. */ - if (CSS.Values.isCSSNullValue(propertyValue)) { - propertyValue = 0; - } - - if (Velocity.debug >= 2) { - console.log("Get " + property + ": " + propertyValue); - } - - return propertyValue; - }, - /* The singular setPropertyValue, which routes the logic for all normalizations, hooks, and standard CSS properties. */ - setPropertyValue: function(element, property, propertyValue, rootPropertyValue, scrollData) { - var propertyName = property; - - /* In order to be subjected to call options and element queueing, scroll animation is routed through Velocity as if it were a standard CSS property. */ - if (property === "scroll") { - /* If a container option is present, scroll the container instead of the browser window. */ - if (scrollData.container) { - scrollData.container["scroll" + scrollData.direction] = propertyValue; - /* Otherwise, Velocity defaults to scrolling the browser window. */ - } else { - if (scrollData.direction === "Left") { - window.scrollTo(propertyValue, scrollData.alternateValue); - } else { - window.scrollTo(scrollData.alternateValue, propertyValue); - } - } - } else { - /* Transforms (translateX, rotateZ, etc.) are applied to a per-element transformCache object, which is manually flushed via flushTransformCache(). - Thus, for now, we merely cache transforms being SET. */ - if (CSS.Normalizations.registered[property] && CSS.Normalizations.registered[property]("name", element) === "transform") { - /* Perform a normalization injection. */ - /* Note: The normalization logic handles the transformCache updating. */ - CSS.Normalizations.registered[property]("inject", element, propertyValue); - - propertyName = "transform"; - propertyValue = Data(element).transformCache[property]; - } else { - /* Inject hooks. */ - if (CSS.Hooks.registered[property]) { - var hookName = property, - hookRoot = CSS.Hooks.getRoot(property); - - /* If a cached rootPropertyValue was not provided, query the DOM for the hookRoot's current value. */ - rootPropertyValue = rootPropertyValue || CSS.getPropertyValue(element, hookRoot); /* GET */ - - propertyValue = CSS.Hooks.injectValue(hookName, propertyValue, rootPropertyValue); - property = hookRoot; - } - - /* Normalize names and values. */ - if (CSS.Normalizations.registered[property]) { - propertyValue = CSS.Normalizations.registered[property]("inject", element, propertyValue); - property = CSS.Normalizations.registered[property]("name", element); - } - - /* Assign the appropriate vendor prefix before performing an official style update. */ - propertyName = CSS.Names.prefixCheck(property)[0]; - - /* A try/catch is used for IE<=8, which throws an error when "invalid" CSS values are set, e.g. a negative width. - Try/catch is avoided for other browsers since it incurs a performance overhead. */ - if (IE <= 8) { - try { - element.style[propertyName] = propertyValue; - } catch (error) { - if (Velocity.debug) { - console.log("Browser does not support [" + propertyValue + "] for [" + propertyName + "]"); - } - } - /* SVG elements have their dimensional properties (width, height, x, y, cx, etc.) applied directly as attributes instead of as styles. */ - /* Note: IE8 does not support SVG elements, so it's okay that we skip it for SVG animation. */ - } else { - var data = Data(element); - - if (data && data.isSVG && CSS.Names.SVGAttribute(property)) { - /* Note: For SVG attributes, vendor-prefixed property names are never used. */ - /* Note: Not all CSS properties can be animated via attributes, but the browser won't throw an error for unsupported properties. */ - element.setAttribute(property, propertyValue); - } else { - element.style[propertyName] = propertyValue; - } - } - - if (Velocity.debug >= 2) { - console.log("Set " + property + " (" + propertyName + "): " + propertyValue); - } - } - } - - /* Return the normalized property name and value in case the caller wants to know how these values were modified before being applied to the DOM. */ - return [propertyName, propertyValue]; - }, - /* To increase performance by batching transform updates into a single SET, transforms are not directly applied to an element until flushTransformCache() is called. */ - /* Note: Velocity applies transform properties in the same order that they are chronogically introduced to the element's CSS styles. */ - flushTransformCache: function(element) { - var transformString = "", - data = Data(element); - - /* Certain browsers require that SVG transforms be applied as an attribute. However, the SVG transform attribute takes a modified version of CSS's transform string - (units are dropped and, except for skewX/Y, subproperties are merged into their master property -- e.g. scaleX and scaleY are merged into scale(X Y). */ - if ((IE || (Velocity.State.isAndroid && !Velocity.State.isChrome)) && data && data.isSVG) { - /* Since transform values are stored in their parentheses-wrapped form, we use a helper function to strip out their numeric values. - Further, SVG transform properties only take unitless (representing pixels) values, so it's okay that parseFloat() strips the unit suffixed to the float value. */ - var getTransformFloat = function(transformProperty) { - return parseFloat(CSS.getPropertyValue(element, transformProperty)); - }; - - /* Create an object to organize all the transforms that we'll apply to the SVG element. To keep the logic simple, - we process *all* transform properties -- even those that may not be explicitly applied (since they default to their zero-values anyway). */ - var SVGTransforms = { - translate: [getTransformFloat("translateX"), getTransformFloat("translateY")], - skewX: [getTransformFloat("skewX")], skewY: [getTransformFloat("skewY")], - /* If the scale property is set (non-1), use that value for the scaleX and scaleY values - (this behavior mimics the result of animating all these properties at once on HTML elements). */ - scale: getTransformFloat("scale") !== 1 ? [getTransformFloat("scale"), getTransformFloat("scale")] : [getTransformFloat("scaleX"), getTransformFloat("scaleY")], - /* Note: SVG's rotate transform takes three values: rotation degrees followed by the X and Y values - defining the rotation's origin point. We ignore the origin values (default them to 0). */ - rotate: [getTransformFloat("rotateZ"), 0, 0] - }; - - /* Iterate through the transform properties in the user-defined property map order. - (This mimics the behavior of non-SVG transform animation.) */ - $.each(Data(element).transformCache, function(transformName) { - /* Except for with skewX/Y, revert the axis-specific transform subproperties to their axis-free master - properties so that they match up with SVG's accepted transform properties. */ - if (/^translate/i.test(transformName)) { - transformName = "translate"; - } else if (/^scale/i.test(transformName)) { - transformName = "scale"; - } else if (/^rotate/i.test(transformName)) { - transformName = "rotate"; - } - - /* Check that we haven't yet deleted the property from the SVGTransforms container. */ - if (SVGTransforms[transformName]) { - /* Append the transform property in the SVG-supported transform format. As per the spec, surround the space-delimited values in parentheses. */ - transformString += transformName + "(" + SVGTransforms[transformName].join(" ") + ")" + " "; - - /* After processing an SVG transform property, delete it from the SVGTransforms container so we don't - re-insert the same master property if we encounter another one of its axis-specific properties. */ - delete SVGTransforms[transformName]; - } - }); - } else { - var transformValue, - perspective; - - /* Transform properties are stored as members of the transformCache object. Concatenate all the members into a string. */ - $.each(Data(element).transformCache, function(transformName) { - transformValue = Data(element).transformCache[transformName]; - - /* Transform's perspective subproperty must be set first in order to take effect. Store it temporarily. */ - if (transformName === "transformPerspective") { - perspective = transformValue; - return true; - } - - /* IE9 only supports one rotation type, rotateZ, which it refers to as "rotate". */ - if (IE === 9 && transformName === "rotateZ") { - transformName = "rotate"; - } - - transformString += transformName + transformValue + " "; - }); - - /* If present, set the perspective subproperty first. */ - if (perspective) { - transformString = "perspective" + perspective + " " + transformString; - } - } - - CSS.setPropertyValue(element, "transform", transformString); - } - }; - - /* Register hooks and normalizations. */ - CSS.Hooks.register(); - CSS.Normalizations.register(); - - /* Allow hook setting in the same fashion as jQuery's $.css(). */ - Velocity.hook = function(elements, arg2, arg3) { - var value; - - elements = sanitizeElements(elements); - - $.each(elements, function(i, element) { - /* Initialize Velocity's per-element data cache if this element hasn't previously been animated. */ - if (Data(element) === undefined) { - Velocity.init(element); - } - - /* Get property value. If an element set was passed in, only return the value for the first element. */ - if (arg3 === undefined) { - if (value === undefined) { - value = CSS.getPropertyValue(element, arg2); - } - /* Set property value. */ - } else { - /* sPV returns an array of the normalized propertyName/propertyValue pair used to update the DOM. */ - var adjustedSet = CSS.setPropertyValue(element, arg2, arg3); - - /* Transform properties don't automatically set. They have to be flushed to the DOM. */ - if (adjustedSet[0] === "transform") { - Velocity.CSS.flushTransformCache(element); - } - - value = adjustedSet; - } - }); - - return value; - }; - - /***************** - Animation - *****************/ - - var animate = function() { - var opts; - - /****************** - Call Chain - ******************/ - - /* Logic for determining what to return to the call stack when exiting out of Velocity. */ - function getChain() { - /* If we are using the utility function, attempt to return this call's promise. If no promise library was detected, - default to null instead of returning the targeted elements so that utility function's return value is standardized. */ - if (isUtility) { - return promiseData.promise || null; - /* Otherwise, if we're using $.fn, return the jQuery-/Zepto-wrapped element set. */ - } else { - return elementsWrapped; - } - } - - /************************* - Arguments Assignment - *************************/ - - /* To allow for expressive CoffeeScript code, Velocity supports an alternative syntax in which "elements" (or "e"), "properties" (or "p"), and "options" (or "o") - objects are defined on a container object that's passed in as Velocity's sole argument. */ - /* Note: Some browsers automatically populate arguments with a "properties" object. We detect it by checking for its default "names" property. */ - var syntacticSugar = (arguments[0] && (arguments[0].p || (($.isPlainObject(arguments[0].properties) && !arguments[0].properties.names) || Type.isString(arguments[0].properties)))), - /* Whether Velocity was called via the utility function (as opposed to on a jQuery/Zepto object). */ - isUtility, - /* When Velocity is called via the utility function ($.Velocity()/Velocity()), elements are explicitly - passed in as the first parameter. Thus, argument positioning varies. We normalize them here. */ - elementsWrapped, - argumentIndex; - - var elements, - propertiesMap, - options; - - /* Detect jQuery/Zepto elements being animated via the $.fn method. */ - if (Type.isWrapped(this)) { - isUtility = false; - - argumentIndex = 0; - elements = this; - elementsWrapped = this; - /* Otherwise, raw elements are being animated via the utility function. */ - } else { - isUtility = true; - - argumentIndex = 1; - elements = syntacticSugar ? (arguments[0].elements || arguments[0].e) : arguments[0]; - } - - /*************** - Promises - ***************/ - - var promiseData = { - promise: null, - resolver: null, - rejecter: null - }; - - /* If this call was made via the utility function (which is the default method of invocation when jQuery/Zepto are not being used), and if - promise support was detected, create a promise object for this call and store references to its resolver and rejecter methods. The resolve - method is used when a call completes naturally or is prematurely stopped by the user. In both cases, completeCall() handles the associated - call cleanup and promise resolving logic. The reject method is used when an invalid set of arguments is passed into a Velocity call. */ - /* Note: Velocity employs a call-based queueing architecture, which means that stopping an animating element actually stops the full call that - triggered it -- not that one element exclusively. Similarly, there is one promise per call, and all elements targeted by a Velocity call are - grouped together for the purposes of resolving and rejecting a promise. */ - if (isUtility && Velocity.Promise) { - promiseData.promise = new Velocity.Promise(function(resolve, reject) { - promiseData.resolver = resolve; - promiseData.rejecter = reject; - }); - } - - if (syntacticSugar) { - propertiesMap = arguments[0].properties || arguments[0].p; - options = arguments[0].options || arguments[0].o; - } else { - propertiesMap = arguments[argumentIndex]; - options = arguments[argumentIndex + 1]; - } - - elements = sanitizeElements(elements); - - if (!elements) { - if (promiseData.promise) { - if (!propertiesMap || !options || options.promiseRejectEmpty !== false) { - promiseData.rejecter(); - } else { - promiseData.resolver(); - } - } - return; - } - - /* The length of the element set (in the form of a nodeList or an array of elements) is defaulted to 1 in case a - single raw DOM element is passed in (which doesn't contain a length property). */ - var elementsLength = elements.length, - elementsIndex = 0; - - /*************************** - Argument Overloading - ***************************/ - - /* Support is included for jQuery's argument overloading: $.animate(propertyMap [, duration] [, easing] [, complete]). - Overloading is detected by checking for the absence of an object being passed into options. */ - /* Note: The stop/finish/pause/resume actions do not accept animation options, and are therefore excluded from this check. */ - if (!/^(stop|finish|finishAll|pause|resume)$/i.test(propertiesMap) && !$.isPlainObject(options)) { - /* The utility function shifts all arguments one position to the right, so we adjust for that offset. */ - var startingArgumentPosition = argumentIndex + 1; - - options = {}; - - /* Iterate through all options arguments */ - for (var i = startingArgumentPosition; i < arguments.length; i++) { - /* Treat a number as a duration. Parse it out. */ - /* Note: The following RegEx will return true if passed an array with a number as its first item. - Thus, arrays are skipped from this check. */ - if (!Type.isArray(arguments[i]) && (/^(fast|normal|slow)$/i.test(arguments[i]) || /^\d/.test(arguments[i]))) { - options.duration = arguments[i]; - /* Treat strings and arrays as easings. */ - } else if (Type.isString(arguments[i]) || Type.isArray(arguments[i])) { - options.easing = arguments[i]; - /* Treat a function as a complete callback. */ - } else if (Type.isFunction(arguments[i])) { - options.complete = arguments[i]; - } - } - } - - /********************* - Action Detection - *********************/ - - /* Velocity's behavior is categorized into "actions": Elements can either be specially scrolled into view, - or they can be started, stopped, paused, resumed, or reversed . If a literal or referenced properties map is passed in as Velocity's - first argument, the associated action is "start". Alternatively, "scroll", "reverse", "pause", "resume" or "stop" can be passed in - instead of a properties map. */ - var action; - - switch (propertiesMap) { - case "scroll": - action = "scroll"; - break; - - case "reverse": - action = "reverse"; - break; - - case "pause": - - /******************* - Action: Pause - *******************/ - - var currentTime = (new Date()).getTime(); - - /* Handle delay timers */ - $.each(elements, function(i, element) { - pauseDelayOnElement(element, currentTime); - }); - - /* Pause and Resume are call-wide (not on a per element basis). Thus, calling pause or resume on a - single element will cause any calls that containt tweens for that element to be paused/resumed - as well. */ - - /* Iterate through all calls and pause any that contain any of our elements */ - $.each(Velocity.State.calls, function(i, activeCall) { - - var found = false; - /* Inactive calls are set to false by the logic inside completeCall(). Skip them. */ - if (activeCall) { - /* Iterate through the active call's targeted elements. */ - $.each(activeCall[1], function(k, activeElement) { - var queueName = (options === undefined) ? "" : options; - - if (queueName !== true && (activeCall[2].queue !== queueName) && !(options === undefined && activeCall[2].queue === false)) { - return true; - } - - /* Iterate through the calls targeted by the stop command. */ - $.each(elements, function(l, element) { - /* Check that this call was applied to the target element. */ - if (element === activeElement) { - - /* Set call to paused */ - activeCall[5] = { - resume: false - }; - - /* Once we match an element, we can bounce out to the next call entirely */ - found = true; - return false; - } - }); - - /* Proceed to check next call if we have already matched */ - if (found) { - return false; - } - }); - } - - }); - - /* Since pause creates no new tweens, exit out of Velocity. */ - return getChain(); - - case "resume": - - /******************* - Action: Resume - *******************/ - - /* Handle delay timers */ - $.each(elements, function(i, element) { - resumeDelayOnElement(element, currentTime); - }); - - /* Pause and Resume are call-wide (not on a per elemnt basis). Thus, calling pause or resume on a - single element will cause any calls that containt tweens for that element to be paused/resumed - as well. */ - - /* Iterate through all calls and pause any that contain any of our elements */ - $.each(Velocity.State.calls, function(i, activeCall) { - var found = false; - /* Inactive calls are set to false by the logic inside completeCall(). Skip them. */ - if (activeCall) { - /* Iterate through the active call's targeted elements. */ - $.each(activeCall[1], function(k, activeElement) { - var queueName = (options === undefined) ? "" : options; - - if (queueName !== true && (activeCall[2].queue !== queueName) && !(options === undefined && activeCall[2].queue === false)) { - return true; - } - - /* Skip any calls that have never been paused */ - if (!activeCall[5]) { - return true; - } - - /* Iterate through the calls targeted by the stop command. */ - $.each(elements, function(l, element) { - /* Check that this call was applied to the target element. */ - if (element === activeElement) { - - /* Flag a pause object to be resumed, which will occur during the next tick. In - addition, the pause object will at that time be deleted */ - activeCall[5].resume = true; - - /* Once we match an element, we can bounce out to the next call entirely */ - found = true; - return false; - } - }); - - /* Proceed to check next call if we have already matched */ - if (found) { - return false; - } - }); - } - - }); - - /* Since resume creates no new tweens, exit out of Velocity. */ - return getChain(); - - case "finish": - case "finishAll": - case "stop": - /******************* - Action: Stop - *******************/ - - /* Clear the currently-active delay on each targeted element. */ - $.each(elements, function(i, element) { - if (Data(element) && Data(element).delayTimer) { - /* Stop the timer from triggering its cached next() function. */ - clearTimeout(Data(element).delayTimer.setTimeout); - - /* Manually call the next() function so that the subsequent queue items can progress. */ - if (Data(element).delayTimer.next) { - Data(element).delayTimer.next(); - } - - delete Data(element).delayTimer; - } - - /* If we want to finish everything in the queue, we have to iterate through it - and call each function. This will make them active calls below, which will - cause them to be applied via the duration setting. */ - if (propertiesMap === "finishAll" && (options === true || Type.isString(options))) { - /* Iterate through the items in the element's queue. */ - $.each($.queue(element, Type.isString(options) ? options : ""), function(_, item) { - /* The queue array can contain an "inprogress" string, which we skip. */ - if (Type.isFunction(item)) { - item(); - } - }); - - /* Clearing the $.queue() array is achieved by resetting it to []. */ - $.queue(element, Type.isString(options) ? options : "", []); - } - }); - - var callsToStop = []; - - /* When the stop action is triggered, the elements' currently active call is immediately stopped. The active call might have - been applied to multiple elements, in which case all of the call's elements will be stopped. When an element - is stopped, the next item in its animation queue is immediately triggered. */ - /* An additional argument may be passed in to clear an element's remaining queued calls. Either true (which defaults to the "fx" queue) - or a custom queue string can be passed in. */ - /* Note: The stop command runs prior to Velocity's Queueing phase since its behavior is intended to take effect *immediately*, - regardless of the element's current queue state. */ - - /* Iterate through every active call. */ - $.each(Velocity.State.calls, function(i, activeCall) { - /* Inactive calls are set to false by the logic inside completeCall(). Skip them. */ - if (activeCall) { - /* Iterate through the active call's targeted elements. */ - $.each(activeCall[1], function(k, activeElement) { - /* If true was passed in as a secondary argument, clear absolutely all calls on this element. Otherwise, only - clear calls associated with the relevant queue. */ - /* Call stopping logic works as follows: - - options === true --> stop current default queue calls (and queue:false calls), including remaining queued ones. - - options === undefined --> stop current queue:"" call and all queue:false calls. - - options === false --> stop only queue:false calls. - - options === "custom" --> stop current queue:"custom" call, including remaining queued ones (there is no functionality to only clear the currently-running queue:"custom" call). */ - var queueName = (options === undefined) ? "" : options; - - if (queueName !== true && (activeCall[2].queue !== queueName) && !(options === undefined && activeCall[2].queue === false)) { - return true; - } - - /* Iterate through the calls targeted by the stop command. */ - $.each(elements, function(l, element) { - /* Check that this call was applied to the target element. */ - if (element === activeElement) { - /* Optionally clear the remaining queued calls. If we're doing "finishAll" this won't find anything, - due to the queue-clearing above. */ - if (options === true || Type.isString(options)) { - /* Iterate through the items in the element's queue. */ - $.each($.queue(element, Type.isString(options) ? options : ""), function(_, item) { - /* The queue array can contain an "inprogress" string, which we skip. */ - if (Type.isFunction(item)) { - /* Pass the item's callback a flag indicating that we want to abort from the queue call. - (Specifically, the queue will resolve the call's associated promise then abort.) */ - item(null, true); - } - }); - - /* Clearing the $.queue() array is achieved by resetting it to []. */ - $.queue(element, Type.isString(options) ? options : "", []); - } - - if (propertiesMap === "stop") { - /* Since "reverse" uses cached start values (the previous call's endValues), these values must be - changed to reflect the final value that the elements were actually tweened to. */ - /* Note: If only queue:false animations are currently running on an element, it won't have a tweensContainer - object. Also, queue:false animations can't be reversed. */ - var data = Data(element); - if (data && data.tweensContainer && queueName !== false) { - $.each(data.tweensContainer, function(m, activeTween) { - activeTween.endValue = activeTween.currentValue; - }); - } - - callsToStop.push(i); - } else if (propertiesMap === "finish" || propertiesMap === "finishAll") { - /* To get active tweens to finish immediately, we forcefully shorten their durations to 1ms so that - they finish upon the next rAf tick then proceed with normal call completion logic. */ - activeCall[2].duration = 1; - } - } - }); - }); - } - }); - - /* Prematurely call completeCall() on each matched active call. Pass an additional flag for "stop" to indicate - that the complete callback and display:none setting should be skipped since we're completing prematurely. */ - if (propertiesMap === "stop") { - $.each(callsToStop, function(i, j) { - completeCall(j, true); - }); - - if (promiseData.promise) { - /* Immediately resolve the promise associated with this stop call since stop runs synchronously. */ - promiseData.resolver(elements); - } - } - - /* Since we're stopping, and not proceeding with queueing, exit out of Velocity. */ - return getChain(); - - default: - /* Treat a non-empty plain object as a literal properties map. */ - if ($.isPlainObject(propertiesMap) && !Type.isEmptyObject(propertiesMap)) { - action = "start"; - - /**************** - Redirects - ****************/ - - /* Check if a string matches a registered redirect (see Redirects above). */ - } else if (Type.isString(propertiesMap) && Velocity.Redirects[propertiesMap]) { - opts = $.extend({}, options); - - var durationOriginal = opts.duration, - delayOriginal = opts.delay || 0; - - /* If the backwards option was passed in, reverse the element set so that elements animate from the last to the first. */ - if (opts.backwards === true) { - elements = $.extend(true, [], elements).reverse(); - } - - /* Individually trigger the redirect for each element in the set to prevent users from having to handle iteration logic in their redirect. */ - $.each(elements, function(elementIndex, element) { - /* If the stagger option was passed in, successively delay each element by the stagger value (in ms). Retain the original delay value. */ - if (parseFloat(opts.stagger)) { - opts.delay = delayOriginal + (parseFloat(opts.stagger) * elementIndex); - } else if (Type.isFunction(opts.stagger)) { - opts.delay = delayOriginal + opts.stagger.call(element, elementIndex, elementsLength); - } - - /* If the drag option was passed in, successively increase/decrease (depending on the presense of opts.backwards) - the duration of each element's animation, using floors to prevent producing very short durations. */ - if (opts.drag) { - /* Default the duration of UI pack effects (callouts and transitions) to 1000ms instead of the usual default duration of 400ms. */ - opts.duration = parseFloat(durationOriginal) || (/^(callout|transition)/.test(propertiesMap) ? 1000 : DURATION_DEFAULT); - - /* For each element, take the greater duration of: A) animation completion percentage relative to the original duration, - B) 75% of the original duration, or C) a 200ms fallback (in case duration is already set to a low value). - The end result is a baseline of 75% of the redirect's duration that increases/decreases as the end of the element set is approached. */ - opts.duration = Math.max(opts.duration * (opts.backwards ? 1 - elementIndex / elementsLength : (elementIndex + 1) / elementsLength), opts.duration * 0.75, 200); - } - - /* Pass in the call's opts object so that the redirect can optionally extend it. It defaults to an empty object instead of null to - reduce the opts checking logic required inside the redirect. */ - Velocity.Redirects[propertiesMap].call(element, element, opts || {}, elementIndex, elementsLength, elements, promiseData.promise ? promiseData : undefined); - }); - - /* Since the animation logic resides within the redirect's own code, abort the remainder of this call. - (The performance overhead up to this point is virtually non-existant.) */ - /* Note: The jQuery call chain is kept intact by returning the complete element set. */ - return getChain(); - } else { - var abortError = "Velocity: First argument (" + propertiesMap + ") was not a property map, a known action, or a registered redirect. Aborting."; - - if (promiseData.promise) { - promiseData.rejecter(new Error(abortError)); - } else if (window.console) { - console.log(abortError); - } - - return getChain(); - } - } - - /************************** - Call-Wide Variables - **************************/ - - /* A container for CSS unit conversion ratios (e.g. %, rem, and em ==> px) that is used to cache ratios across all elements - being animated in a single Velocity call. Calculating unit ratios necessitates DOM querying and updating, and is therefore - avoided (via caching) wherever possible. This container is call-wide instead of page-wide to avoid the risk of using stale - conversion metrics across Velocity animations that are not immediately consecutively chained. */ - var callUnitConversionData = { - lastParent: null, - lastPosition: null, - lastFontSize: null, - lastPercentToPxWidth: null, - lastPercentToPxHeight: null, - lastEmToPx: null, - remToPx: null, - vwToPx: null, - vhToPx: null - }; - - /* A container for all the ensuing tween data and metadata associated with this call. This container gets pushed to the page-wide - Velocity.State.calls array that is processed during animation ticking. */ - var call = []; - - /************************ - Element Processing - ************************/ - - /* Element processing consists of three parts -- data processing that cannot go stale and data processing that *can* go stale (i.e. third-party style modifications): - 1) Pre-Queueing: Element-wide variables, including the element's data storage, are instantiated. Call options are prepared. If triggered, the Stop action is executed. - 2) Queueing: The logic that runs once this call has reached its point of execution in the element's $.queue() stack. Most logic is placed here to avoid risking it becoming stale. - 3) Pushing: Consolidation of the tween data followed by its push onto the global in-progress calls container. - `elementArrayIndex` allows passing index of the element in the original array to value functions. - If `elementsIndex` were used instead the index would be determined by the elements' per-element queue. - */ - function processElement(element, elementArrayIndex) { - - /************************* - Part I: Pre-Queueing - *************************/ - - /*************************** - Element-Wide Variables - ***************************/ - - var /* The runtime opts object is the extension of the current call's options and Velocity's page-wide option defaults. */ - opts = $.extend({}, Velocity.defaults, options), - /* A container for the processed data associated with each property in the propertyMap. - (Each property in the map produces its own "tween".) */ - tweensContainer = {}, - elementUnitConversionData; - - /****************** - Element Init - ******************/ - - if (Data(element) === undefined) { - Velocity.init(element); - } - - /****************** - Option: Delay - ******************/ - - /* Since queue:false doesn't respect the item's existing queue, we avoid injecting its delay here (it's set later on). */ - /* Note: Velocity rolls its own delay function since jQuery doesn't have a utility alias for $.fn.delay() - (and thus requires jQuery element creation, which we avoid since its overhead includes DOM querying). */ - if (parseFloat(opts.delay) && opts.queue !== false) { - $.queue(element, opts.queue, function(next) { - /* This is a flag used to indicate to the upcoming completeCall() function that this queue entry was initiated by Velocity. See completeCall() for further details. */ - Velocity.velocityQueueEntryFlag = true; - - /* The ensuing queue item (which is assigned to the "next" argument that $.queue() automatically passes in) will be triggered after a setTimeout delay. - The setTimeout is stored so that it can be subjected to clearTimeout() if this animation is prematurely stopped via Velocity's "stop" command, and - delayBegin/delayTime is used to ensure we can "pause" and "resume" a tween that is still mid-delay. */ - - /* Temporarily store delayed elements to facilite access for global pause/resume */ - var callIndex = Velocity.State.delayedElements.count++; - Velocity.State.delayedElements[callIndex] = element; - - var delayComplete = (function(index) { - return function() { - /* Clear the temporary element */ - Velocity.State.delayedElements[index] = false; - - /* Finally, issue the call */ - next(); - }; - })(callIndex); - - - Data(element).delayBegin = (new Date()).getTime(); - Data(element).delay = parseFloat(opts.delay); - Data(element).delayTimer = { - setTimeout: setTimeout(next, parseFloat(opts.delay)), - next: delayComplete - }; - }); - } - - /********************* - Option: Duration - *********************/ - - /* Support for jQuery's named durations. */ - switch (opts.duration.toString().toLowerCase()) { - case "fast": - opts.duration = 200; - break; - - case "normal": - opts.duration = DURATION_DEFAULT; - break; - - case "slow": - opts.duration = 600; - break; - - default: - /* Remove the potential "ms" suffix and default to 1 if the user is attempting to set a duration of 0 (in order to produce an immediate style change). */ - opts.duration = parseFloat(opts.duration) || 1; - } - - /************************ - Global Option: Mock - ************************/ - - if (Velocity.mock !== false) { - /* In mock mode, all animations are forced to 1ms so that they occur immediately upon the next rAF tick. - Alternatively, a multiplier can be passed in to time remap all delays and durations. */ - if (Velocity.mock === true) { - opts.duration = opts.delay = 1; - } else { - opts.duration *= parseFloat(Velocity.mock) || 1; - opts.delay *= parseFloat(Velocity.mock) || 1; - } - } - - /******************* - Option: Easing - *******************/ - - opts.easing = getEasing(opts.easing, opts.duration); - - /********************** - Option: Callbacks - **********************/ - - /* Callbacks must functions. Otherwise, default to null. */ - if (opts.begin && !Type.isFunction(opts.begin)) { - opts.begin = null; - } - - if (opts.progress && !Type.isFunction(opts.progress)) { - opts.progress = null; - } - - if (opts.complete && !Type.isFunction(opts.complete)) { - opts.complete = null; - } - - /********************************* - Option: Display & Visibility - *********************************/ - - /* Refer to Velocity's documentation (VelocityJS.org/#displayAndVisibility) for a description of the display and visibility options' behavior. */ - /* Note: We strictly check for undefined instead of falsiness because display accepts an empty string value. */ - if (opts.display !== undefined && opts.display !== null) { - opts.display = opts.display.toString().toLowerCase(); - - /* Users can pass in a special "auto" value to instruct Velocity to set the element to its default display value. */ - if (opts.display === "auto") { - opts.display = Velocity.CSS.Values.getDisplayType(element); - } - } - - if (opts.visibility !== undefined && opts.visibility !== null) { - opts.visibility = opts.visibility.toString().toLowerCase(); - } - - /********************** - Option: mobileHA - **********************/ - - /* When set to true, and if this is a mobile device, mobileHA automatically enables hardware acceleration (via a null transform hack) - on animating elements. HA is removed from the element at the completion of its animation. */ - /* Note: Android Gingerbread doesn't support HA. If a null transform hack (mobileHA) is in fact set, it will prevent other tranform subproperties from taking effect. */ - /* Note: You can read more about the use of mobileHA in Velocity's documentation: VelocityJS.org/#mobileHA. */ - opts.mobileHA = (opts.mobileHA && Velocity.State.isMobile && !Velocity.State.isGingerbread); - - /*********************** - Part II: Queueing - ***********************/ - - /* When a set of elements is targeted by a Velocity call, the set is broken up and each element has the current Velocity call individually queued onto it. - In this way, each element's existing queue is respected; some elements may already be animating and accordingly should not have this current Velocity call triggered immediately. */ - /* In each queue, tween data is processed for each animating property then pushed onto the call-wide calls array. When the last element in the set has had its tweens processed, - the call array is pushed to Velocity.State.calls for live processing by the requestAnimationFrame tick. */ - function buildQueue(next) { - var data, lastTweensContainer; - - /******************* - Option: Begin - *******************/ - - /* The begin callback is fired once per call -- not once per elemenet -- and is passed the full raw DOM element set as both its context and its first argument. */ - if (opts.begin && elementsIndex === 0) { - /* We throw callbacks in a setTimeout so that thrown errors don't halt the execution of Velocity itself. */ - try { - opts.begin.call(elements, elements); - } catch (error) { - setTimeout(function() { - throw error; - }, 1); - } - } - - /***************************************** - Tween Data Construction (for Scroll) - *****************************************/ - - /* Note: In order to be subjected to chaining and animation options, scroll's tweening is routed through Velocity as if it were a standard CSS property animation. */ - if (action === "scroll") { - /* The scroll action uniquely takes an optional "offset" option -- specified in pixels -- that offsets the targeted scroll position. */ - var scrollDirection = (/^x$/i.test(opts.axis) ? "Left" : "Top"), - scrollOffset = parseFloat(opts.offset) || 0, - scrollPositionCurrent, - scrollPositionCurrentAlternate, - scrollPositionEnd; - - /* Scroll also uniquely takes an optional "container" option, which indicates the parent element that should be scrolled -- - as opposed to the browser window itself. This is useful for scrolling toward an element that's inside an overflowing parent element. */ - if (opts.container) { - /* Ensure that either a jQuery object or a raw DOM element was passed in. */ - if (Type.isWrapped(opts.container) || Type.isNode(opts.container)) { - /* Extract the raw DOM element from the jQuery wrapper. */ - opts.container = opts.container[0] || opts.container; - /* Note: Unlike other properties in Velocity, the browser's scroll position is never cached since it so frequently changes - (due to the user's natural interaction with the page). */ - scrollPositionCurrent = opts.container["scroll" + scrollDirection]; /* GET */ - - /* $.position() values are relative to the container's currently viewable area (without taking into account the container's true dimensions - -- say, for example, if the container was not overflowing). Thus, the scroll end value is the sum of the child element's position *and* - the scroll container's current scroll position. */ - scrollPositionEnd = (scrollPositionCurrent + $(element).position()[scrollDirection.toLowerCase()]) + scrollOffset; /* GET */ - /* If a value other than a jQuery object or a raw DOM element was passed in, default to null so that this option is ignored. */ - } else { - opts.container = null; - } - } else { - /* If the window itself is being scrolled -- not a containing element -- perform a live scroll position lookup using - the appropriate cached property names (which differ based on browser type). */ - scrollPositionCurrent = Velocity.State.scrollAnchor[Velocity.State["scrollProperty" + scrollDirection]]; /* GET */ - /* When scrolling the browser window, cache the alternate axis's current value since window.scrollTo() doesn't let us change only one value at a time. */ - scrollPositionCurrentAlternate = Velocity.State.scrollAnchor[Velocity.State["scrollProperty" + (scrollDirection === "Left" ? "Top" : "Left")]]; /* GET */ - - /* Unlike $.position(), $.offset() values are relative to the browser window's true dimensions -- not merely its currently viewable area -- - and therefore end values do not need to be compounded onto current values. */ - scrollPositionEnd = $(element).offset()[scrollDirection.toLowerCase()] + scrollOffset; /* GET */ - } - - /* Since there's only one format that scroll's associated tweensContainer can take, we create it manually. */ - tweensContainer = { - scroll: { - rootPropertyValue: false, - startValue: scrollPositionCurrent, - currentValue: scrollPositionCurrent, - endValue: scrollPositionEnd, - unitType: "", - easing: opts.easing, - scrollData: { - container: opts.container, - direction: scrollDirection, - alternateValue: scrollPositionCurrentAlternate - } - }, - element: element - }; - - if (Velocity.debug) { - console.log("tweensContainer (scroll): ", tweensContainer.scroll, element); - } - - /****************************************** - Tween Data Construction (for Reverse) - ******************************************/ - - /* Reverse acts like a "start" action in that a property map is animated toward. The only difference is - that the property map used for reverse is the inverse of the map used in the previous call. Thus, we manipulate - the previous call to construct our new map: use the previous map's end values as our new map's start values. Copy over all other data. */ - /* Note: Reverse can be directly called via the "reverse" parameter, or it can be indirectly triggered via the loop option. (Loops are composed of multiple reverses.) */ - /* Note: Reverse calls do not need to be consecutively chained onto a currently-animating element in order to operate on cached values; - there is no harm to reverse being called on a potentially stale data cache since reverse's behavior is simply defined - as reverting to the element's values as they were prior to the previous *Velocity* call. */ - } else if (action === "reverse") { - data = Data(element); - - /* Abort if there is no prior animation data to reverse to. */ - if (!data) { - return; - } - - if (!data.tweensContainer) { - /* Dequeue the element so that this queue entry releases itself immediately, allowing subsequent queue entries to run. */ - $.dequeue(element, opts.queue); - - return; - } else { - /********************* - Options Parsing - *********************/ - - /* If the element was hidden via the display option in the previous call, - revert display to "auto" prior to reversal so that the element is visible again. */ - if (data.opts.display === "none") { - data.opts.display = "auto"; - } - - if (data.opts.visibility === "hidden") { - data.opts.visibility = "visible"; - } - - /* If the loop option was set in the previous call, disable it so that "reverse" calls aren't recursively generated. - Further, remove the previous call's callback options; typically, users do not want these to be refired. */ - data.opts.loop = false; - data.opts.begin = null; - data.opts.complete = null; - - /* Since we're extending an opts object that has already been extended with the defaults options object, - we remove non-explicitly-defined properties that are auto-assigned values. */ - if (!options.easing) { - delete opts.easing; - } - - if (!options.duration) { - delete opts.duration; - } - - /* The opts object used for reversal is an extension of the options object optionally passed into this - reverse call plus the options used in the previous Velocity call. */ - opts = $.extend({}, data.opts, opts); - - /************************************* - Tweens Container Reconstruction - *************************************/ - - /* Create a deepy copy (indicated via the true flag) of the previous call's tweensContainer. */ - lastTweensContainer = $.extend(true, {}, data ? data.tweensContainer : null); - - /* Manipulate the previous tweensContainer by replacing its end values and currentValues with its start values. */ - for (var lastTween in lastTweensContainer) { - /* In addition to tween data, tweensContainers contain an element property that we ignore here. */ - if (lastTweensContainer.hasOwnProperty(lastTween) && lastTween !== "element") { - var lastStartValue = lastTweensContainer[lastTween].startValue; - - lastTweensContainer[lastTween].startValue = lastTweensContainer[lastTween].currentValue = lastTweensContainer[lastTween].endValue; - lastTweensContainer[lastTween].endValue = lastStartValue; - - /* Easing is the only option that embeds into the individual tween data (since it can be defined on a per-property basis). - Accordingly, every property's easing value must be updated when an options object is passed in with a reverse call. - The side effect of this extensibility is that all per-property easing values are forcefully reset to the new value. */ - if (!Type.isEmptyObject(options)) { - lastTweensContainer[lastTween].easing = opts.easing; - } - - if (Velocity.debug) { - console.log("reverse tweensContainer (" + lastTween + "): " + JSON.stringify(lastTweensContainer[lastTween]), element); - } - } - } - - tweensContainer = lastTweensContainer; - } - - /***************************************** - Tween Data Construction (for Start) - *****************************************/ - - } else if (action === "start") { - - /************************* - Value Transferring - *************************/ - - /* If this queue entry follows a previous Velocity-initiated queue entry *and* if this entry was created - while the element was in the process of being animated by Velocity, then this current call is safe to use - the end values from the prior call as its start values. Velocity attempts to perform this value transfer - process whenever possible in order to avoid requerying the DOM. */ - /* If values aren't transferred from a prior call and start values were not forcefed by the user (more on this below), - then the DOM is queried for the element's current values as a last resort. */ - /* Note: Conversely, animation reversal (and looping) *always* perform inter-call value transfers; they never requery the DOM. */ - - data = Data(element); - - /* The per-element isAnimating flag is used to indicate whether it's safe (i.e. the data isn't stale) - to transfer over end values to use as start values. If it's set to true and there is a previous - Velocity call to pull values from, do so. */ - if (data && data.tweensContainer && data.isAnimating === true) { - lastTweensContainer = data.tweensContainer; - } - - /*************************** - Tween Data Calculation - ***************************/ - - /* This function parses property data and defaults endValue, easing, and startValue as appropriate. */ - /* Property map values can either take the form of 1) a single value representing the end value, - or 2) an array in the form of [ endValue, [, easing] [, startValue] ]. - The optional third parameter is a forcefed startValue to be used instead of querying the DOM for - the element's current value. Read Velocity's docmentation to learn more about forcefeeding: VelocityJS.org/#forcefeeding */ - var parsePropertyValue = function(valueData, skipResolvingEasing) { - var endValue, easing, startValue; - - /* If we have a function as the main argument then resolve it first, in case it returns an array that needs to be split */ - if (Type.isFunction(valueData)) { - valueData = valueData.call(element, elementArrayIndex, elementsLength); - } - - /* Handle the array format, which can be structured as one of three potential overloads: - A) [ endValue, easing, startValue ], B) [ endValue, easing ], or C) [ endValue, startValue ] */ - if (Type.isArray(valueData)) { - /* endValue is always the first item in the array. Don't bother validating endValue's value now - since the ensuing property cycling logic does that. */ - endValue = valueData[0]; - - /* Two-item array format: If the second item is a number, function, or hex string, treat it as a - start value since easings can only be non-hex strings or arrays. */ - if ((!Type.isArray(valueData[1]) && /^[\d-]/.test(valueData[1])) || Type.isFunction(valueData[1]) || CSS.RegEx.isHex.test(valueData[1])) { - startValue = valueData[1]; - /* Two or three-item array: If the second item is a non-hex string easing name or an array, treat it as an easing. */ - } else if ((Type.isString(valueData[1]) && !CSS.RegEx.isHex.test(valueData[1]) && Velocity.Easings[valueData[1]]) || Type.isArray(valueData[1])) { - easing = skipResolvingEasing ? valueData[1] : getEasing(valueData[1], opts.duration); - - /* Don't bother validating startValue's value now since the ensuing property cycling logic inherently does that. */ - startValue = valueData[2]; - } else { - startValue = valueData[1] || valueData[2]; - } - /* Handle the single-value format. */ - } else { - endValue = valueData; - } - - /* Default to the call's easing if a per-property easing type was not defined. */ - if (!skipResolvingEasing) { - easing = easing || opts.easing; - } - - /* If functions were passed in as values, pass the function the current element as its context, - plus the element's index and the element set's size as arguments. Then, assign the returned value. */ - if (Type.isFunction(endValue)) { - endValue = endValue.call(element, elementArrayIndex, elementsLength); - } - - if (Type.isFunction(startValue)) { - startValue = startValue.call(element, elementArrayIndex, elementsLength); - } - - /* Allow startValue to be left as undefined to indicate to the ensuing code that its value was not forcefed. */ - return [endValue || 0, easing, startValue]; - }; - - var fixPropertyValue = function(property, valueData) { - /* In case this property is a hook, there are circumstances where we will intend to work on the hook's root property and not the hooked subproperty. */ - var rootProperty = CSS.Hooks.getRoot(property), - rootPropertyValue = false, - /* Parse out endValue, easing, and startValue from the property's data. */ - endValue = valueData[0], - easing = valueData[1], - startValue = valueData[2], - pattern; - - /************************** - Start Value Sourcing - **************************/ - - /* Other than for the dummy tween property, properties that are not supported by the browser (and do not have an associated normalization) will - inherently produce no style changes when set, so they are skipped in order to decrease animation tick overhead. - Property support is determined via prefixCheck(), which returns a false flag when no supported is detected. */ - /* Note: Since SVG elements have some of their properties directly applied as HTML attributes, - there is no way to check for their explicit browser support, and so we skip skip this check for them. */ - if ((!data || !data.isSVG) && rootProperty !== "tween" && CSS.Names.prefixCheck(rootProperty)[1] === false && CSS.Normalizations.registered[rootProperty] === undefined) { - if (Velocity.debug) { - console.log("Skipping [" + rootProperty + "] due to a lack of browser support."); - } - return; - } - - /* If the display option is being set to a non-"none" (e.g. "block") and opacity (filter on IE<=8) is being - animated to an endValue of non-zero, the user's intention is to fade in from invisible, thus we forcefeed opacity - a startValue of 0 if its startValue hasn't already been sourced by value transferring or prior forcefeeding. */ - if (((opts.display !== undefined && opts.display !== null && opts.display !== "none") || (opts.visibility !== undefined && opts.visibility !== "hidden")) && /opacity|filter/.test(property) && !startValue && endValue !== 0) { - startValue = 0; - } - - /* If values have been transferred from the previous Velocity call, extract the endValue and rootPropertyValue - for all of the current call's properties that were *also* animated in the previous call. */ - /* Note: Value transferring can optionally be disabled by the user via the _cacheValues option. */ - if (opts._cacheValues && lastTweensContainer && lastTweensContainer[property]) { - if (startValue === undefined) { - startValue = lastTweensContainer[property].endValue + lastTweensContainer[property].unitType; - } - - /* The previous call's rootPropertyValue is extracted from the element's data cache since that's the - instance of rootPropertyValue that gets freshly updated by the tweening process, whereas the rootPropertyValue - attached to the incoming lastTweensContainer is equal to the root property's value prior to any tweening. */ - rootPropertyValue = data.rootPropertyValueCache[rootProperty]; - /* If values were not transferred from a previous Velocity call, query the DOM as needed. */ - } else { - /* Handle hooked properties. */ - if (CSS.Hooks.registered[property]) { - if (startValue === undefined) { - rootPropertyValue = CSS.getPropertyValue(element, rootProperty); /* GET */ - /* Note: The following getPropertyValue() call does not actually trigger a DOM query; - getPropertyValue() will extract the hook from rootPropertyValue. */ - startValue = CSS.getPropertyValue(element, property, rootPropertyValue); - /* If startValue is already defined via forcefeeding, do not query the DOM for the root property's value; - just grab rootProperty's zero-value template from CSS.Hooks. This overwrites the element's actual - root property value (if one is set), but this is acceptable since the primary reason users forcefeed is - to avoid DOM queries, and thus we likewise avoid querying the DOM for the root property's value. */ - } else { - /* Grab this hook's zero-value template, e.g. "0px 0px 0px black". */ - rootPropertyValue = CSS.Hooks.templates[rootProperty][1]; - } - /* Handle non-hooked properties that haven't already been defined via forcefeeding. */ - } else if (startValue === undefined) { - startValue = CSS.getPropertyValue(element, property); /* GET */ - } - } - - /************************** - Value Data Extraction - **************************/ - - var separatedValue, - endValueUnitType, - startValueUnitType, - operator = false; - - /* Separates a property value into its numeric value and its unit type. */ - var separateValue = function(property, value) { - var unitType, - numericValue; - - numericValue = (value || "0") - .toString() - .toLowerCase() - /* Match the unit type at the end of the value. */ - .replace(/[%A-z]+$/, function(match) { - /* Grab the unit type. */ - unitType = match; - - /* Strip the unit type off of value. */ - return ""; - }); - - /* If no unit type was supplied, assign one that is appropriate for this property (e.g. "deg" for rotateZ or "px" for width). */ - if (!unitType) { - unitType = CSS.Values.getUnitType(property); - } - - return [numericValue, unitType]; - }; - - if (startValue !== endValue && Type.isString(startValue) && Type.isString(endValue)) { - pattern = ""; - var iStart = 0, // index in startValue - iEnd = 0, // index in endValue - aStart = [], // array of startValue numbers - aEnd = [], // array of endValue numbers - inCalc = 0, // Keep track of being inside a "calc()" so we don't duplicate it - inRGB = 0, // Keep track of being inside an RGB as we can't use fractional values - inRGBA = 0; // Keep track of being inside an RGBA as we must pass fractional for the alpha channel - - startValue = CSS.Hooks.fixColors(startValue); - endValue = CSS.Hooks.fixColors(endValue); - while (iStart < startValue.length && iEnd < endValue.length) { - var cStart = startValue[iStart], - cEnd = endValue[iEnd]; - - if (/[\d\.-]/.test(cStart) && /[\d\.-]/.test(cEnd)) { - var tStart = cStart, // temporary character buffer - tEnd = cEnd, // temporary character buffer - dotStart = ".", // Make sure we can only ever match a single dot in a decimal - dotEnd = "."; // Make sure we can only ever match a single dot in a decimal - - while (++iStart < startValue.length) { - cStart = startValue[iStart]; - if (cStart === dotStart) { - dotStart = ".."; // Can never match two characters - } else if (!/\d/.test(cStart)) { - break; - } - tStart += cStart; - } - while (++iEnd < endValue.length) { - cEnd = endValue[iEnd]; - if (cEnd === dotEnd) { - dotEnd = ".."; // Can never match two characters - } else if (!/\d/.test(cEnd)) { - break; - } - tEnd += cEnd; - } - var uStart = CSS.Hooks.getUnit(startValue, iStart), // temporary unit type - uEnd = CSS.Hooks.getUnit(endValue, iEnd); // temporary unit type - - iStart += uStart.length; - iEnd += uEnd.length; - if (uStart === uEnd) { - // Same units - if (tStart === tEnd) { - // Same numbers, so just copy over - pattern += tStart + uStart; - } else { - // Different numbers, so store them - pattern += "{" + aStart.length + (inRGB ? "!" : "") + "}" + uStart; - aStart.push(parseFloat(tStart)); - aEnd.push(parseFloat(tEnd)); - } - } else { - // Different units, so put into a "calc(from + to)" and animate each side to/from zero - var nStart = parseFloat(tStart), - nEnd = parseFloat(tEnd); - - pattern += (inCalc < 5 ? "calc" : "") + "(" - + (nStart ? "{" + aStart.length + (inRGB ? "!" : "") + "}" : "0") + uStart - + " + " - + (nEnd ? "{" + (aStart.length + (nStart ? 1 : 0)) + (inRGB ? "!" : "") + "}" : "0") + uEnd - + ")"; - if (nStart) { - aStart.push(nStart); - aEnd.push(0); - } - if (nEnd) { - aStart.push(0); - aEnd.push(nEnd); - } - } - } else if (cStart === cEnd) { - pattern += cStart; - iStart++; - iEnd++; - // Keep track of being inside a calc() - if (inCalc === 0 && cStart === "c" - || inCalc === 1 && cStart === "a" - || inCalc === 2 && cStart === "l" - || inCalc === 3 && cStart === "c" - || inCalc >= 4 && cStart === "(" - ) { - inCalc++; - } else if ((inCalc && inCalc < 5) - || inCalc >= 4 && cStart === ")" && --inCalc < 5) { - inCalc = 0; - } - // Keep track of being inside an rgb() / rgba() - if (inRGB === 0 && cStart === "r" - || inRGB === 1 && cStart === "g" - || inRGB === 2 && cStart === "b" - || inRGB === 3 && cStart === "a" - || inRGB >= 3 && cStart === "(" - ) { - if (inRGB === 3 && cStart === "a") { - inRGBA = 1; - } - inRGB++; - } else if (inRGBA && cStart === ",") { - if (++inRGBA > 3) { - inRGB = inRGBA = 0; - } - } else if ((inRGBA && inRGB < (inRGBA ? 5 : 4)) - || inRGB >= (inRGBA ? 4 : 3) && cStart === ")" && --inRGB < (inRGBA ? 5 : 4)) { - inRGB = inRGBA = 0; - } - } else { - inCalc = 0; - // TODO: changing units, fixing colours - break; - } - } - if (iStart !== startValue.length || iEnd !== endValue.length) { - if (Velocity.debug) { - console.error("Trying to pattern match mis-matched strings [\"" + endValue + "\", \"" + startValue + "\"]"); - } - pattern = undefined; - } - if (pattern) { - if (aStart.length) { - if (Velocity.debug) { - console.log("Pattern found \"" + pattern + "\" -> ", aStart, aEnd, "[" + startValue + "," + endValue + "]"); - } - startValue = aStart; - endValue = aEnd; - endValueUnitType = startValueUnitType = ""; - } else { - pattern = undefined; - } - } - } - - if (!pattern) { - /* Separate startValue. */ - separatedValue = separateValue(property, startValue); - startValue = separatedValue[0]; - startValueUnitType = separatedValue[1]; - - /* Separate endValue, and extract a value operator (e.g. "+=", "-=") if one exists. */ - separatedValue = separateValue(property, endValue); - endValue = separatedValue[0].replace(/^([+-\/*])=/, function(match, subMatch) { - operator = subMatch; - - /* Strip the operator off of the value. */ - return ""; - }); - endValueUnitType = separatedValue[1]; - - /* Parse float values from endValue and startValue. Default to 0 if NaN is returned. */ - startValue = parseFloat(startValue) || 0; - endValue = parseFloat(endValue) || 0; - - /*************************************** - Property-Specific Value Conversion - ***************************************/ - - /* Custom support for properties that don't actually accept the % unit type, but where pollyfilling is trivial and relatively foolproof. */ - if (endValueUnitType === "%") { - /* A %-value fontSize/lineHeight is relative to the parent's fontSize (as opposed to the parent's dimensions), - which is identical to the em unit's behavior, so we piggyback off of that. */ - if (/^(fontSize|lineHeight)$/.test(property)) { - /* Convert % into an em decimal value. */ - endValue = endValue / 100; - endValueUnitType = "em"; - /* For scaleX and scaleY, convert the value into its decimal format and strip off the unit type. */ - } else if (/^scale/.test(property)) { - endValue = endValue / 100; - endValueUnitType = ""; - /* For RGB components, take the defined percentage of 255 and strip off the unit type. */ - } else if (/(Red|Green|Blue)$/i.test(property)) { - endValue = (endValue / 100) * 255; - endValueUnitType = ""; - } - } - } - - /*************************** - Unit Ratio Calculation - ***************************/ - - /* When queried, the browser returns (most) CSS property values in pixels. Therefore, if an endValue with a unit type of - %, em, or rem is animated toward, startValue must be converted from pixels into the same unit type as endValue in order - for value manipulation logic (increment/decrement) to proceed. Further, if the startValue was forcefed or transferred - from a previous call, startValue may also not be in pixels. Unit conversion logic therefore consists of two steps: - 1) Calculating the ratio of %/em/rem/vh/vw relative to pixels - 2) Converting startValue into the same unit of measurement as endValue based on these ratios. */ - /* Unit conversion ratios are calculated by inserting a sibling node next to the target node, copying over its position property, - setting values with the target unit type then comparing the returned pixel value. */ - /* Note: Even if only one of these unit types is being animated, all unit ratios are calculated at once since the overhead - of batching the SETs and GETs together upfront outweights the potential overhead - of layout thrashing caused by re-querying for uncalculated ratios for subsequently-processed properties. */ - /* Todo: Shift this logic into the calls' first tick instance so that it's synced with RAF. */ - var calculateUnitRatios = function() { - - /************************ - Same Ratio Checks - ************************/ - - /* The properties below are used to determine whether the element differs sufficiently from this call's - previously iterated element to also differ in its unit conversion ratios. If the properties match up with those - of the prior element, the prior element's conversion ratios are used. Like most optimizations in Velocity, - this is done to minimize DOM querying. */ - var sameRatioIndicators = { - myParent: element.parentNode || document.body, /* GET */ - position: CSS.getPropertyValue(element, "position"), /* GET */ - fontSize: CSS.getPropertyValue(element, "fontSize") /* GET */ - }, - /* Determine if the same % ratio can be used. % is based on the element's position value and its parent's width and height dimensions. */ - samePercentRatio = ((sameRatioIndicators.position === callUnitConversionData.lastPosition) && (sameRatioIndicators.myParent === callUnitConversionData.lastParent)), - /* Determine if the same em ratio can be used. em is relative to the element's fontSize. */ - sameEmRatio = (sameRatioIndicators.fontSize === callUnitConversionData.lastFontSize); - - /* Store these ratio indicators call-wide for the next element to compare against. */ - callUnitConversionData.lastParent = sameRatioIndicators.myParent; - callUnitConversionData.lastPosition = sameRatioIndicators.position; - callUnitConversionData.lastFontSize = sameRatioIndicators.fontSize; - - /*************************** - Element-Specific Units - ***************************/ - - /* Note: IE8 rounds to the nearest pixel when returning CSS values, thus we perform conversions using a measurement - of 100 (instead of 1) to give our ratios a precision of at least 2 decimal values. */ - var measurement = 100, - unitRatios = {}; - - if (!sameEmRatio || !samePercentRatio) { - var dummy = data && data.isSVG ? document.createElementNS("http://www.w3.org/2000/svg", "rect") : document.createElement("div"); - - Velocity.init(dummy); - sameRatioIndicators.myParent.appendChild(dummy); - - /* To accurately and consistently calculate conversion ratios, the element's cascaded overflow and box-sizing are stripped. - Similarly, since width/height can be artificially constrained by their min-/max- equivalents, these are controlled for as well. */ - /* Note: Overflow must be also be controlled for per-axis since the overflow property overwrites its per-axis values. */ - $.each(["overflow", "overflowX", "overflowY"], function(i, property) { - Velocity.CSS.setPropertyValue(dummy, property, "hidden"); - }); - Velocity.CSS.setPropertyValue(dummy, "position", sameRatioIndicators.position); - Velocity.CSS.setPropertyValue(dummy, "fontSize", sameRatioIndicators.fontSize); - Velocity.CSS.setPropertyValue(dummy, "boxSizing", "content-box"); - - /* width and height act as our proxy properties for measuring the horizontal and vertical % ratios. */ - $.each(["minWidth", "maxWidth", "width", "minHeight", "maxHeight", "height"], function(i, property) { - Velocity.CSS.setPropertyValue(dummy, property, measurement + "%"); - }); - /* paddingLeft arbitrarily acts as our proxy property for the em ratio. */ - Velocity.CSS.setPropertyValue(dummy, "paddingLeft", measurement + "em"); - - /* Divide the returned value by the measurement to get the ratio between 1% and 1px. Default to 1 since working with 0 can produce Infinite. */ - unitRatios.percentToPxWidth = callUnitConversionData.lastPercentToPxWidth = (parseFloat(CSS.getPropertyValue(dummy, "width", null, true)) || 1) / measurement; /* GET */ - unitRatios.percentToPxHeight = callUnitConversionData.lastPercentToPxHeight = (parseFloat(CSS.getPropertyValue(dummy, "height", null, true)) || 1) / measurement; /* GET */ - unitRatios.emToPx = callUnitConversionData.lastEmToPx = (parseFloat(CSS.getPropertyValue(dummy, "paddingLeft")) || 1) / measurement; /* GET */ - - sameRatioIndicators.myParent.removeChild(dummy); - } else { - unitRatios.emToPx = callUnitConversionData.lastEmToPx; - unitRatios.percentToPxWidth = callUnitConversionData.lastPercentToPxWidth; - unitRatios.percentToPxHeight = callUnitConversionData.lastPercentToPxHeight; - } - - /*************************** - Element-Agnostic Units - ***************************/ - - /* Whereas % and em ratios are determined on a per-element basis, the rem unit only needs to be checked - once per call since it's exclusively dependant upon document.body's fontSize. If this is the first time - that calculateUnitRatios() is being run during this call, remToPx will still be set to its default value of null, - so we calculate it now. */ - if (callUnitConversionData.remToPx === null) { - /* Default to browsers' default fontSize of 16px in the case of 0. */ - callUnitConversionData.remToPx = parseFloat(CSS.getPropertyValue(document.body, "fontSize")) || 16; /* GET */ - } - - /* Similarly, viewport units are %-relative to the window's inner dimensions. */ - if (callUnitConversionData.vwToPx === null) { - callUnitConversionData.vwToPx = parseFloat(window.innerWidth) / 100; /* GET */ - callUnitConversionData.vhToPx = parseFloat(window.innerHeight) / 100; /* GET */ - } - - unitRatios.remToPx = callUnitConversionData.remToPx; - unitRatios.vwToPx = callUnitConversionData.vwToPx; - unitRatios.vhToPx = callUnitConversionData.vhToPx; - - if (Velocity.debug >= 1) { - console.log("Unit ratios: " + JSON.stringify(unitRatios), element); - } - return unitRatios; - }; - - /******************** - Unit Conversion - ********************/ - - /* The * and / operators, which are not passed in with an associated unit, inherently use startValue's unit. Skip value and unit conversion. */ - if (/[\/*]/.test(operator)) { - endValueUnitType = startValueUnitType; - /* If startValue and endValue differ in unit type, convert startValue into the same unit type as endValue so that if endValueUnitType - is a relative unit (%, em, rem), the values set during tweening will continue to be accurately relative even if the metrics they depend - on are dynamically changing during the course of the animation. Conversely, if we always normalized into px and used px for setting values, the px ratio - would become stale if the original unit being animated toward was relative and the underlying metrics change during the animation. */ - /* Since 0 is 0 in any unit type, no conversion is necessary when startValue is 0 -- we just start at 0 with endValueUnitType. */ - } else if ((startValueUnitType !== endValueUnitType) && startValue !== 0) { - /* Unit conversion is also skipped when endValue is 0, but *startValueUnitType* must be used for tween values to remain accurate. */ - /* Note: Skipping unit conversion here means that if endValueUnitType was originally a relative unit, the animation won't relatively - match the underlying metrics if they change, but this is acceptable since we're animating toward invisibility instead of toward visibility, - which remains past the point of the animation's completion. */ - if (endValue === 0) { - endValueUnitType = startValueUnitType; - } else { - /* By this point, we cannot avoid unit conversion (it's undesirable since it causes layout thrashing). - If we haven't already, we trigger calculateUnitRatios(), which runs once per element per call. */ - elementUnitConversionData = elementUnitConversionData || calculateUnitRatios(); - - /* The following RegEx matches CSS properties that have their % values measured relative to the x-axis. */ - /* Note: W3C spec mandates that all of margin and padding's properties (even top and bottom) are %-relative to the *width* of the parent element. */ - var axis = (/margin|padding|left|right|width|text|word|letter/i.test(property) || /X$/.test(property) || property === "x") ? "x" : "y"; - - /* In order to avoid generating n^2 bespoke conversion functions, unit conversion is a two-step process: - 1) Convert startValue into pixels. 2) Convert this new pixel value into endValue's unit type. */ - switch (startValueUnitType) { - case "%": - /* Note: translateX and translateY are the only properties that are %-relative to an element's own dimensions -- not its parent's dimensions. - Velocity does not include a special conversion process to account for this behavior. Therefore, animating translateX/Y from a % value - to a non-% value will produce an incorrect start value. Fortunately, this sort of cross-unit conversion is rarely done by users in practice. */ - startValue *= (axis === "x" ? elementUnitConversionData.percentToPxWidth : elementUnitConversionData.percentToPxHeight); - break; - - case "px": - /* px acts as our midpoint in the unit conversion process; do nothing. */ - break; - - default: - startValue *= elementUnitConversionData[startValueUnitType + "ToPx"]; - } - - /* Invert the px ratios to convert into to the target unit. */ - switch (endValueUnitType) { - case "%": - startValue *= 1 / (axis === "x" ? elementUnitConversionData.percentToPxWidth : elementUnitConversionData.percentToPxHeight); - break; - - case "px": - /* startValue is already in px, do nothing; we're done. */ - break; - - default: - startValue *= 1 / elementUnitConversionData[endValueUnitType + "ToPx"]; - } - } - } - - /********************* - Relative Values - *********************/ - - /* Operator logic must be performed last since it requires unit-normalized start and end values. */ - /* Note: Relative *percent values* do not behave how most people think; while one would expect "+=50%" - to increase the property 1.5x its current value, it in fact increases the percent units in absolute terms: - 50 points is added on top of the current % value. */ - switch (operator) { - case "+": - endValue = startValue + endValue; - break; - - case "-": - endValue = startValue - endValue; - break; - - case "*": - endValue = startValue * endValue; - break; - - case "/": - endValue = startValue / endValue; - break; - } - - /************************** - tweensContainer Push - **************************/ - - /* Construct the per-property tween object, and push it to the element's tweensContainer. */ - tweensContainer[property] = { - rootPropertyValue: rootPropertyValue, - startValue: startValue, - currentValue: startValue, - endValue: endValue, - unitType: endValueUnitType, - easing: easing - }; - if (pattern) { - tweensContainer[property].pattern = pattern; - } - - if (Velocity.debug) { - console.log("tweensContainer (" + property + "): " + JSON.stringify(tweensContainer[property]), element); - } - }; - - /* Create a tween out of each property, and append its associated data to tweensContainer. */ - for (var property in propertiesMap) { - - if (!propertiesMap.hasOwnProperty(property)) { - continue; - } - /* The original property name's format must be used for the parsePropertyValue() lookup, - but we then use its camelCase styling to normalize it for manipulation. */ - var propertyName = CSS.Names.camelCase(property), - valueData = parsePropertyValue(propertiesMap[property]); - - /* Find shorthand color properties that have been passed a hex string. */ - /* Would be quicker to use CSS.Lists.colors.includes() if possible */ - if (_inArray(CSS.Lists.colors, propertyName)) { - /* Parse the value data for each shorthand. */ - var endValue = valueData[0], - easing = valueData[1], - startValue = valueData[2]; - - if (CSS.RegEx.isHex.test(endValue)) { - /* Convert the hex strings into their RGB component arrays. */ - var colorComponents = ["Red", "Green", "Blue"], - endValueRGB = CSS.Values.hexToRgb(endValue), - startValueRGB = startValue ? CSS.Values.hexToRgb(startValue) : undefined; - - /* Inject the RGB component tweens into propertiesMap. */ - for (var i = 0; i < colorComponents.length; i++) { - var dataArray = [endValueRGB[i]]; - - if (easing) { - dataArray.push(easing); - } - - if (startValueRGB !== undefined) { - dataArray.push(startValueRGB[i]); - } - - fixPropertyValue(propertyName + colorComponents[i], dataArray); - } - /* If we have replaced a shortcut color value then don't update the standard property name */ - continue; - } - } - fixPropertyValue(propertyName, valueData); - } - - /* Along with its property data, store a reference to the element itself onto tweensContainer. */ - tweensContainer.element = element; - } - - /***************** - Call Push - *****************/ - - /* Note: tweensContainer can be empty if all of the properties in this call's property map were skipped due to not - being supported by the browser. The element property is used for checking that the tweensContainer has been appended to. */ - if (tweensContainer.element) { - /* Apply the "velocity-animating" indicator class. */ - CSS.Values.addClass(element, "velocity-animating"); - - /* The call array houses the tweensContainers for each element being animated in the current call. */ - call.push(tweensContainer); - - data = Data(element); - - if (data) { - /* Store the tweensContainer and options if we're working on the default effects queue, so that they can be used by the reverse command. */ - if (opts.queue === "") { - - data.tweensContainer = tweensContainer; - data.opts = opts; - } - - /* Switch on the element's animating flag. */ - data.isAnimating = true; - } - - /* Once the final element in this call's element set has been processed, push the call array onto - Velocity.State.calls for the animation tick to immediately begin processing. */ - if (elementsIndex === elementsLength - 1) { - /* Add the current call plus its associated metadata (the element set and the call's options) onto the global call container. - Anything on this call container is subjected to tick() processing. */ - Velocity.State.calls.push([call, elements, opts, null, promiseData.resolver, null, 0]); - - /* If the animation tick isn't running, start it. (Velocity shuts it off when there are no active calls to process.) */ - if (Velocity.State.isTicking === false) { - Velocity.State.isTicking = true; - - /* Start the tick loop. */ - tick(); - } - } else { - elementsIndex++; - } - } - } - - /* When the queue option is set to false, the call skips the element's queue and fires immediately. */ - if (opts.queue === false) { - /* Since this buildQueue call doesn't respect the element's existing queue (which is where a delay option would have been appended), - we manually inject the delay property here with an explicit setTimeout. */ - if (opts.delay) { - - /* Temporarily store delayed elements to facilitate access for global pause/resume */ - var callIndex = Velocity.State.delayedElements.count++; - Velocity.State.delayedElements[callIndex] = element; - - var delayComplete = (function(index) { - return function() { - /* Clear the temporary element */ - Velocity.State.delayedElements[index] = false; - - /* Finally, issue the call */ - buildQueue(); - }; - })(callIndex); - - Data(element).delayBegin = (new Date()).getTime(); - Data(element).delay = parseFloat(opts.delay); - Data(element).delayTimer = { - setTimeout: setTimeout(buildQueue, parseFloat(opts.delay)), - next: delayComplete - }; - } else { - buildQueue(); - } - /* Otherwise, the call undergoes element queueing as normal. */ - /* Note: To interoperate with jQuery, Velocity uses jQuery's own $.queue() stack for queuing logic. */ - } else { - $.queue(element, opts.queue, function(next, clearQueue) { - /* If the clearQueue flag was passed in by the stop command, resolve this call's promise. (Promises can only be resolved once, - so it's fine if this is repeatedly triggered for each element in the associated call.) */ - if (clearQueue === true) { - if (promiseData.promise) { - promiseData.resolver(elements); - } - - /* Do not continue with animation queueing. */ - return true; - } - - /* This flag indicates to the upcoming completeCall() function that this queue entry was initiated by Velocity. - See completeCall() for further details. */ - Velocity.velocityQueueEntryFlag = true; - - buildQueue(next); - }); - } - - /********************* - Auto-Dequeuing - *********************/ - - /* As per jQuery's $.queue() behavior, to fire the first non-custom-queue entry on an element, the element - must be dequeued if its queue stack consists *solely* of the current call. (This can be determined by checking - for the "inprogress" item that jQuery prepends to active queue stack arrays.) Regardless, whenever the element's - queue is further appended with additional items -- including $.delay()'s or even $.animate() calls, the queue's - first entry is automatically fired. This behavior contrasts that of custom queues, which never auto-fire. */ - /* Note: When an element set is being subjected to a non-parallel Velocity call, the animation will not begin until - each one of the elements in the set has reached the end of its individually pre-existing queue chain. */ - /* Note: Unfortunately, most people don't fully grasp jQuery's powerful, yet quirky, $.queue() function. - Lean more here: http://stackoverflow.com/questions/1058158/can-somebody-explain-jquery-queue-to-me */ - if ((opts.queue === "" || opts.queue === "fx") && $.queue(element)[0] !== "inprogress") { - $.dequeue(element); - } - } - - /************************** - Element Set Iteration - **************************/ - - /* If the "nodeType" property exists on the elements variable, we're animating a single element. - Place it in an array so that $.each() can iterate over it. */ - $.each(elements, function(i, element) { - /* Ensure each element in a set has a nodeType (is a real element) to avoid throwing errors. */ - if (Type.isNode(element)) { - processElement(element, i); - } - }); - - /****************** - Option: Loop - ******************/ - - /* The loop option accepts an integer indicating how many times the element should loop between the values in the - current call's properties map and the element's property values prior to this call. */ - /* Note: The loop option's logic is performed here -- after element processing -- because the current call needs - to undergo its queue insertion prior to the loop option generating its series of constituent "reverse" calls, - which chain after the current call. Two reverse calls (two "alternations") constitute one loop. */ - opts = $.extend({}, Velocity.defaults, options); - opts.loop = parseInt(opts.loop, 10); - var reverseCallsCount = (opts.loop * 2) - 1; - - if (opts.loop) { - /* Double the loop count to convert it into its appropriate number of "reverse" calls. - Subtract 1 from the resulting value since the current call is included in the total alternation count. */ - for (var x = 0; x < reverseCallsCount; x++) { - /* Since the logic for the reverse action occurs inside Queueing and therefore this call's options object - isn't parsed until then as well, the current call's delay option must be explicitly passed into the reverse - call so that the delay logic that occurs inside *Pre-Queueing* can process it. */ - var reverseOptions = { - delay: opts.delay, - progress: opts.progress - }; - - /* If a complete callback was passed into this call, transfer it to the loop redirect's final "reverse" call - so that it's triggered when the entire redirect is complete (and not when the very first animation is complete). */ - if (x === reverseCallsCount - 1) { - reverseOptions.display = opts.display; - reverseOptions.visibility = opts.visibility; - reverseOptions.complete = opts.complete; - } - - animate(elements, "reverse", reverseOptions); - } - } - - /*************** - Chaining - ***************/ - - /* Return the elements back to the call chain, with wrapped elements taking precedence in case Velocity was called via the $.fn. extension. */ - return getChain(); - }; - - /* Turn Velocity into the animation function, extended with the pre-existing Velocity object. */ - Velocity = $.extend(animate, Velocity); - /* For legacy support, also expose the literal animate method. */ - Velocity.animate = animate; - - /************** - Timing - **************/ - - /* Ticker function. */ - var ticker = window.requestAnimationFrame || rAFShim; - - /* Inactive browser tabs pause rAF, which results in all active animations immediately sprinting to their completion states when the tab refocuses. - To get around this, we dynamically switch rAF to setTimeout (which the browser *doesn't* pause) when the tab loses focus. We skip this for mobile - devices to avoid wasting battery power on inactive tabs. */ - /* Note: Tab focus detection doesn't work on older versions of IE, but that's okay since they don't support rAF to begin with. */ - if (!Velocity.State.isMobile && document.hidden !== undefined) { - var updateTicker = function() { - /* Reassign the rAF function (which the global tick() function uses) based on the tab's focus state. */ - if (document.hidden) { - ticker = function(callback) { - /* The tick function needs a truthy first argument in order to pass its internal timestamp check. */ - return setTimeout(function() { - callback(true); - }, 16); - }; - - /* The rAF loop has been paused by the browser, so we manually restart the tick. */ - tick(); - } else { - ticker = window.requestAnimationFrame || rAFShim; - } - }; - - /* Page could be sitting in the background at this time (i.e. opened as new tab) so making sure we use correct ticker from the start */ - updateTicker(); - - /* And then run check again every time visibility changes */ - document.addEventListener("visibilitychange", updateTicker); - } - - /************ - Tick - ************/ - - /* Note: All calls to Velocity are pushed to the Velocity.State.calls array, which is fully iterated through upon each tick. */ - function tick(timestamp) { - /* An empty timestamp argument indicates that this is the first tick occurence since ticking was turned on. - We leverage this metadata to fully ignore the first tick pass since RAF's initial pass is fired whenever - the browser's next tick sync time occurs, which results in the first elements subjected to Velocity - calls being animated out of sync with any elements animated immediately thereafter. In short, we ignore - the first RAF tick pass so that elements being immediately consecutively animated -- instead of simultaneously animated - by the same Velocity call -- are properly batched into the same initial RAF tick and consequently remain in sync thereafter. */ - if (timestamp) { - /* We normally use RAF's high resolution timestamp but as it can be significantly offset when the browser is - under high stress we give the option for choppiness over allowing the browser to drop huge chunks of frames. - We use performance.now() and shim it if it doesn't exist for when the tab is hidden. */ - var timeCurrent = Velocity.timestamp && timestamp !== true ? timestamp : performance.now(); - - /******************** - Call Iteration - ********************/ - - var callsLength = Velocity.State.calls.length; - - /* To speed up iterating over this array, it is compacted (falsey items -- calls that have completed -- are removed) - when its length has ballooned to a point that can impact tick performance. This only becomes necessary when animation - has been continuous with many elements over a long period of time; whenever all active calls are completed, completeCall() clears Velocity.State.calls. */ - if (callsLength > 10000) { - Velocity.State.calls = compactSparseArray(Velocity.State.calls); - callsLength = Velocity.State.calls.length; - } - - /* Iterate through each active call. */ - for (var i = 0; i < callsLength; i++) { - /* When a Velocity call is completed, its Velocity.State.calls entry is set to false. Continue on to the next call. */ - if (!Velocity.State.calls[i]) { - continue; - } - - /************************ - Call-Wide Variables - ************************/ - - var callContainer = Velocity.State.calls[i], - call = callContainer[0], - opts = callContainer[2], - timeStart = callContainer[3], - firstTick = !!timeStart, - tweenDummyValue = null, - pauseObject = callContainer[5], - millisecondsEllapsed = callContainer[6]; - - - - /* If timeStart is undefined, then this is the first time that this call has been processed by tick(). - We assign timeStart now so that its value is as close to the real animation start time as possible. - (Conversely, had timeStart been defined when this call was added to Velocity.State.calls, the delay - between that time and now would cause the first few frames of the tween to be skipped since - percentComplete is calculated relative to timeStart.) */ - /* Further, subtract 16ms (the approximate resolution of RAF) from the current time value so that the - first tick iteration isn't wasted by animating at 0% tween completion, which would produce the - same style value as the element's current value. */ - if (!timeStart) { - timeStart = Velocity.State.calls[i][3] = timeCurrent - 16; - } - - /* If a pause object is present, skip processing unless it has been set to resume */ - if (pauseObject) { - if (pauseObject.resume === true) { - /* Update the time start to accomodate the paused completion amount */ - timeStart = callContainer[3] = Math.round(timeCurrent - millisecondsEllapsed - 16); - - /* Remove pause object after processing */ - callContainer[5] = null; - } else { - continue; - } - } - - millisecondsEllapsed = callContainer[6] = timeCurrent - timeStart; - - /* The tween's completion percentage is relative to the tween's start time, not the tween's start value - (which would result in unpredictable tween durations since JavaScript's timers are not particularly accurate). - Accordingly, we ensure that percentComplete does not exceed 1. */ - var percentComplete = Math.min((millisecondsEllapsed) / opts.duration, 1); - - /********************** - Element Iteration - **********************/ - - /* For every call, iterate through each of the elements in its set. */ - for (var j = 0, callLength = call.length; j < callLength; j++) { - var tweensContainer = call[j], - element = tweensContainer.element; - - /* Check to see if this element has been deleted midway through the animation by checking for the - continued existence of its data cache. If it's gone, or the element is currently paused, skip animating this element. */ - if (!Data(element)) { - continue; - } - - var transformPropertyExists = false; - - /********************************** - Display & Visibility Toggling - **********************************/ - - /* If the display option is set to non-"none", set it upfront so that the element can become visible before tweening begins. - (Otherwise, display's "none" value is set in completeCall() once the animation has completed.) */ - if (opts.display !== undefined && opts.display !== null && opts.display !== "none") { - if (opts.display === "flex") { - var flexValues = ["-webkit-box", "-moz-box", "-ms-flexbox", "-webkit-flex"]; - - $.each(flexValues, function(i, flexValue) { - CSS.setPropertyValue(element, "display", flexValue); - }); - } - - CSS.setPropertyValue(element, "display", opts.display); - } - - /* Same goes with the visibility option, but its "none" equivalent is "hidden". */ - if (opts.visibility !== undefined && opts.visibility !== "hidden") { - CSS.setPropertyValue(element, "visibility", opts.visibility); - } - - /************************ - Property Iteration - ************************/ - - /* For every element, iterate through each property. */ - for (var property in tweensContainer) { - /* Note: In addition to property tween data, tweensContainer contains a reference to its associated element. */ - if (tweensContainer.hasOwnProperty(property) && property !== "element") { - var tween = tweensContainer[property], - currentValue, - /* Easing can either be a pre-genereated function or a string that references a pre-registered easing - on the Velocity.Easings object. In either case, return the appropriate easing *function*. */ - easing = Type.isString(tween.easing) ? Velocity.Easings[tween.easing] : tween.easing; - - /****************************** - Current Value Calculation - ******************************/ - - if (Type.isString(tween.pattern)) { - var patternReplace = percentComplete === 1 ? - function($0, index, round) { - var result = tween.endValue[index]; - - return round ? Math.round(result) : result; - } : - function($0, index, round) { - var startValue = tween.startValue[index], - tweenDelta = tween.endValue[index] - startValue, - result = startValue + (tweenDelta * easing(percentComplete, opts, tweenDelta)); - - return round ? Math.round(result) : result; - }; - - currentValue = tween.pattern.replace(/{(\d+)(!)?}/g, patternReplace); - } else if (percentComplete === 1) { - /* If this is the last tick pass (if we've reached 100% completion for this tween), - ensure that currentValue is explicitly set to its target endValue so that it's not subjected to any rounding. */ - currentValue = tween.endValue; - } else { - /* Otherwise, calculate currentValue based on the current delta from startValue. */ - var tweenDelta = tween.endValue - tween.startValue; - - currentValue = tween.startValue + (tweenDelta * easing(percentComplete, opts, tweenDelta)); - /* If no value change is occurring, don't proceed with DOM updating. */ - } - if (!firstTick && (currentValue === tween.currentValue)) { - continue; - } - - tween.currentValue = currentValue; - - /* If we're tweening a fake 'tween' property in order to log transition values, update the one-per-call variable so that - it can be passed into the progress callback. */ - if (property === "tween") { - tweenDummyValue = currentValue; - } else { - /****************** - Hooks: Part I - ******************/ - var hookRoot; - - /* For hooked properties, the newly-updated rootPropertyValueCache is cached onto the element so that it can be used - for subsequent hooks in this call that are associated with the same root property. If we didn't cache the updated - rootPropertyValue, each subsequent update to the root property in this tick pass would reset the previous hook's - updates to rootPropertyValue prior to injection. A nice performance byproduct of rootPropertyValue caching is that - subsequently chained animations using the same hookRoot but a different hook can use this cached rootPropertyValue. */ - if (CSS.Hooks.registered[property]) { - hookRoot = CSS.Hooks.getRoot(property); - - var rootPropertyValueCache = Data(element).rootPropertyValueCache[hookRoot]; - - if (rootPropertyValueCache) { - tween.rootPropertyValue = rootPropertyValueCache; - } - } - - /***************** - DOM Update - *****************/ - - /* setPropertyValue() returns an array of the property name and property value post any normalization that may have been performed. */ - /* Note: To solve an IE<=8 positioning bug, the unit type is dropped when setting a property value of 0. */ - var adjustedSetData = CSS.setPropertyValue(element, /* SET */ - property, - tween.currentValue + (IE < 9 && parseFloat(currentValue) === 0 ? "" : tween.unitType), - tween.rootPropertyValue, - tween.scrollData); - - /******************* - Hooks: Part II - *******************/ - - /* Now that we have the hook's updated rootPropertyValue (the post-processed value provided by adjustedSetData), cache it onto the element. */ - if (CSS.Hooks.registered[property]) { - /* Since adjustedSetData contains normalized data ready for DOM updating, the rootPropertyValue needs to be re-extracted from its normalized form. ?? */ - if (CSS.Normalizations.registered[hookRoot]) { - Data(element).rootPropertyValueCache[hookRoot] = CSS.Normalizations.registered[hookRoot]("extract", null, adjustedSetData[1]); - } else { - Data(element).rootPropertyValueCache[hookRoot] = adjustedSetData[1]; - } - } - - /*************** - Transforms - ***************/ - - /* Flag whether a transform property is being animated so that flushTransformCache() can be triggered once this tick pass is complete. */ - if (adjustedSetData[0] === "transform") { - transformPropertyExists = true; - } - - } - } - } - - /**************** - mobileHA - ****************/ - - /* If mobileHA is enabled, set the translate3d transform to null to force hardware acceleration. - It's safe to override this property since Velocity doesn't actually support its animation (hooks are used in its place). */ - if (opts.mobileHA) { - /* Don't set the null transform hack if we've already done so. */ - if (Data(element).transformCache.translate3d === undefined) { - /* All entries on the transformCache object are later concatenated into a single transform string via flushTransformCache(). */ - Data(element).transformCache.translate3d = "(0px, 0px, 0px)"; - - transformPropertyExists = true; - } - } - - if (transformPropertyExists) { - CSS.flushTransformCache(element); - } - } - - /* The non-"none" display value is only applied to an element once -- when its associated call is first ticked through. - Accordingly, it's set to false so that it isn't re-processed by this call in the next tick. */ - if (opts.display !== undefined && opts.display !== "none") { - Velocity.State.calls[i][2].display = false; - } - if (opts.visibility !== undefined && opts.visibility !== "hidden") { - Velocity.State.calls[i][2].visibility = false; - } - - /* Pass the elements and the timing data (percentComplete, msRemaining, timeStart, tweenDummyValue) into the progress callback. */ - if (opts.progress) { - opts.progress.call(callContainer[1], - callContainer[1], - percentComplete, - Math.max(0, (timeStart + opts.duration) - timeCurrent), - timeStart, - tweenDummyValue); - } - - /* If this call has finished tweening, pass its index to completeCall() to handle call cleanup. */ - if (percentComplete === 1) { - completeCall(i); - } - } - } - - /* Note: completeCall() sets the isTicking flag to false when the last call on Velocity.State.calls has completed. */ - if (Velocity.State.isTicking) { - ticker(tick); - } - } - - /********************** - Call Completion - **********************/ - - /* Note: Unlike tick(), which processes all active calls at once, call completion is handled on a per-call basis. */ - function completeCall(callIndex, isStopped) { - /* Ensure the call exists. */ - if (!Velocity.State.calls[callIndex]) { - return false; - } - - /* Pull the metadata from the call. */ - var call = Velocity.State.calls[callIndex][0], - elements = Velocity.State.calls[callIndex][1], - opts = Velocity.State.calls[callIndex][2], - resolver = Velocity.State.calls[callIndex][4]; - - var remainingCallsExist = false; - - /************************* - Element Finalization - *************************/ - - for (var i = 0, callLength = call.length; i < callLength; i++) { - var element = call[i].element; - - /* If the user set display to "none" (intending to hide the element), set it now that the animation has completed. */ - /* Note: display:none isn't set when calls are manually stopped (via Velocity("stop"). */ - /* Note: Display gets ignored with "reverse" calls and infinite loops, since this behavior would be undesirable. */ - if (!isStopped && !opts.loop) { - if (opts.display === "none") { - CSS.setPropertyValue(element, "display", opts.display); - } - - if (opts.visibility === "hidden") { - CSS.setPropertyValue(element, "visibility", opts.visibility); - } - } - - /* If the element's queue is empty (if only the "inprogress" item is left at position 0) or if its queue is about to run - a non-Velocity-initiated entry, turn off the isAnimating flag. A non-Velocity-initiatied queue entry's logic might alter - an element's CSS values and thereby cause Velocity's cached value data to go stale. To detect if a queue entry was initiated by Velocity, - we check for the existence of our special Velocity.queueEntryFlag declaration, which minifiers won't rename since the flag - is assigned to jQuery's global $ object and thus exists out of Velocity's own scope. */ - var data = Data(element); - - if (opts.loop !== true && ($.queue(element)[1] === undefined || !/\.velocityQueueEntryFlag/i.test($.queue(element)[1]))) { - /* The element may have been deleted. Ensure that its data cache still exists before acting on it. */ - if (data) { - data.isAnimating = false; - /* Clear the element's rootPropertyValueCache, which will become stale. */ - data.rootPropertyValueCache = {}; - - var transformHAPropertyExists = false; - /* If any 3D transform subproperty is at its default value (regardless of unit type), remove it. */ - $.each(CSS.Lists.transforms3D, function(i, transformName) { - var defaultValue = /^scale/.test(transformName) ? 1 : 0, - currentValue = data.transformCache[transformName]; - - if (data.transformCache[transformName] !== undefined && new RegExp("^\\(" + defaultValue + "[^.]").test(currentValue)) { - transformHAPropertyExists = true; - - delete data.transformCache[transformName]; - } - }); - - /* Mobile devices have hardware acceleration removed at the end of the animation in order to avoid hogging the GPU's memory. */ - if (opts.mobileHA) { - transformHAPropertyExists = true; - delete data.transformCache.translate3d; - } - - /* Flush the subproperty removals to the DOM. */ - if (transformHAPropertyExists) { - CSS.flushTransformCache(element); - } - - /* Remove the "velocity-animating" indicator class. */ - CSS.Values.removeClass(element, "velocity-animating"); - } - } - - /********************* - Option: Complete - *********************/ - - /* Complete is fired once per call (not once per element) and is passed the full raw DOM element set as both its context and its first argument. */ - /* Note: Callbacks aren't fired when calls are manually stopped (via Velocity("stop"). */ - if (!isStopped && opts.complete && !opts.loop && (i === callLength - 1)) { - /* We throw callbacks in a setTimeout so that thrown errors don't halt the execution of Velocity itself. */ - try { - opts.complete.call(elements, elements); - } catch (error) { - setTimeout(function() { - throw error; - }, 1); - } - } - - /********************** - Promise Resolving - **********************/ - - /* Note: Infinite loops don't return promises. */ - if (resolver && opts.loop !== true) { - resolver(elements); - } - - /**************************** - Option: Loop (Infinite) - ****************************/ - - if (data && opts.loop === true && !isStopped) { - /* If a rotateX/Y/Z property is being animated by 360 deg with loop:true, swap tween start/end values to enable - continuous iterative rotation looping. (Otherise, the element would just rotate back and forth.) */ - $.each(data.tweensContainer, function(propertyName, tweenContainer) { - if (/^rotate/.test(propertyName) && ((parseFloat(tweenContainer.startValue) - parseFloat(tweenContainer.endValue)) % 360 === 0)) { - var oldStartValue = tweenContainer.startValue; - - tweenContainer.startValue = tweenContainer.endValue; - tweenContainer.endValue = oldStartValue; - } - - if (/^backgroundPosition/.test(propertyName) && parseFloat(tweenContainer.endValue) === 100 && tweenContainer.unitType === "%") { - tweenContainer.endValue = 0; - tweenContainer.startValue = 100; - } - }); - - Velocity(element, "reverse", {loop: true, delay: opts.delay}); - } - - /*************** - Dequeueing - ***************/ - - /* Fire the next call in the queue so long as this call's queue wasn't set to false (to trigger a parallel animation), - which would have already caused the next call to fire. Note: Even if the end of the animation queue has been reached, - $.dequeue() must still be called in order to completely clear jQuery's animation queue. */ - if (opts.queue !== false) { - $.dequeue(element, opts.queue); - } - } - - /************************ - Calls Array Cleanup - ************************/ - - /* Since this call is complete, set it to false so that the rAF tick skips it. This array is later compacted via compactSparseArray(). - (For performance reasons, the call is set to false instead of being deleted from the array: http://www.html5rocks.com/en/tutorials/speed/v8/) */ - Velocity.State.calls[callIndex] = false; - - /* Iterate through the calls array to determine if this was the final in-progress animation. - If so, set a flag to end ticking and clear the calls array. */ - for (var j = 0, callsLength = Velocity.State.calls.length; j < callsLength; j++) { - if (Velocity.State.calls[j] !== false) { - remainingCallsExist = true; - - break; - } - } - - if (remainingCallsExist === false) { - /* tick() will detect this flag upon its next iteration and subsequently turn itself off. */ - Velocity.State.isTicking = false; - - /* Clear the calls array so that its length is reset. */ - delete Velocity.State.calls; - Velocity.State.calls = []; - } - } - - /****************** - Frameworks - ******************/ - - /* Both jQuery and Zepto allow their $.fn object to be extended to allow wrapped elements to be subjected to plugin calls. - If either framework is loaded, register a "velocity" extension pointing to Velocity's core animate() method. Velocity - also registers itself onto a global container (window.jQuery || window.Zepto || window) so that certain features are - accessible beyond just a per-element scope. This master object contains an .animate() method, which is later assigned to $.fn - (if jQuery or Zepto are present). Accordingly, Velocity can both act on wrapped DOM elements and stand alone for targeting raw DOM elements. */ - global.Velocity = Velocity; - - if (global !== window) { - /* Assign the element function to Velocity's core animate() method. */ - global.fn.velocity = animate; - /* Assign the object function's defaults to Velocity's global defaults object. */ - global.fn.velocity.defaults = Velocity.defaults; - } - - /*********************** - Packaged Redirects - ***********************/ - - /* slideUp, slideDown */ - $.each(["Down", "Up"], function(i, direction) { - Velocity.Redirects["slide" + direction] = function(element, options, elementsIndex, elementsSize, elements, promiseData) { - var opts = $.extend({}, options), - begin = opts.begin, - complete = opts.complete, - inlineValues = {}, - computedValues = {height: "", marginTop: "", marginBottom: "", paddingTop: "", paddingBottom: ""}; - - if (opts.display === undefined) { - /* Show the element before slideDown begins and hide the element after slideUp completes. */ - /* Note: Inline elements cannot have dimensions animated, so they're reverted to inline-block. */ - opts.display = (direction === "Down" ? (Velocity.CSS.Values.getDisplayType(element) === "inline" ? "inline-block" : "block") : "none"); - } - - opts.begin = function() { - /* If the user passed in a begin callback, fire it now. */ - if (elementsIndex === 0 && begin) { - begin.call(elements, elements); - } - - /* Cache the elements' original vertical dimensional property values so that we can animate back to them. */ - for (var property in computedValues) { - if (!computedValues.hasOwnProperty(property)) { - continue; - } - inlineValues[property] = element.style[property]; - - /* For slideDown, use forcefeeding to animate all vertical properties from 0. For slideUp, - use forcefeeding to start from computed values and animate down to 0. */ - var propertyValue = CSS.getPropertyValue(element, property); - computedValues[property] = (direction === "Down") ? [propertyValue, 0] : [0, propertyValue]; - } - - /* Force vertical overflow content to clip so that sliding works as expected. */ - inlineValues.overflow = element.style.overflow; - element.style.overflow = "hidden"; - }; - - opts.complete = function() { - /* Reset element to its pre-slide inline values once its slide animation is complete. */ - for (var property in inlineValues) { - if (inlineValues.hasOwnProperty(property)) { - element.style[property] = inlineValues[property]; - } - } - - /* If the user passed in a complete callback, fire it now. */ - if (elementsIndex === elementsSize - 1) { - if (complete) { - complete.call(elements, elements); - } - if (promiseData) { - promiseData.resolver(elements); - } - } - }; - - Velocity(element, computedValues, opts); - }; - }); - - /* fadeIn, fadeOut */ - $.each(["In", "Out"], function(i, direction) { - Velocity.Redirects["fade" + direction] = function(element, options, elementsIndex, elementsSize, elements, promiseData) { - var opts = $.extend({}, options), - complete = opts.complete, - propertiesMap = {opacity: (direction === "In") ? 1 : 0}; - - /* Since redirects are triggered individually for each element in the animated set, avoid repeatedly triggering - callbacks by firing them only when the final element has been reached. */ - if (elementsIndex !== 0) { - opts.begin = null; - } - if (elementsIndex !== elementsSize - 1) { - opts.complete = null; - } else { - opts.complete = function() { - if (complete) { - complete.call(elements, elements); - } - if (promiseData) { - promiseData.resolver(elements); - } - }; - } - - /* If a display was passed in, use it. Otherwise, default to "none" for fadeOut or the element-specific default for fadeIn. */ - /* Note: We allow users to pass in "null" to skip display setting altogether. */ - if (opts.display === undefined) { - opts.display = (direction === "In" ? "auto" : "none"); - } - - Velocity(this, propertiesMap, opts); - }; - }); - - return Velocity; - }((window.jQuery || window.Zepto || window), window, (window ? window.document : undefined)); -})); - -/****************** - Known Issues - ******************/ - -/* The CSS spec mandates that the translateX/Y/Z transforms are %-relative to the element itself -- not its parent. - Velocity, however, doesn't make this distinction. Thus, converting to or from the % unit with these subproperties - will produce an inaccurate conversion value. The same issue exists with the cx/cy attributes of SVG circles and ellipses. */ \ No newline at end of file diff --git a/gui/vendor/velocity.ui.js b/gui/vendor/velocity.ui.js deleted file mode 100644 index 78f3ce8f..00000000 --- a/gui/vendor/velocity.ui.js +++ /dev/null @@ -1,804 +0,0 @@ -/********************** - Velocity UI Pack - **********************/ - -/* VelocityJS.org UI Pack (5.2.0). (C) 2014 Julian Shapiro. MIT @license: en.wikipedia.org/wiki/MIT_License. Portions copyright Daniel Eden, Christian Pucci. */ - -(function(factory) { - "use strict"; - /* CommonJS module. */ - if (typeof require === "function" && typeof exports === "object") { - module.exports = factory(); - /* AMD module. */ - } else if (typeof define === "function" && define.amd) { - define(["velocity"], factory); - /* Browser globals. */ - } else { - factory(); - } -}(function() { - "use strict"; - return function(global, window, document, undefined) { - - /************* - Checks - *************/ - var Velocity = global.Velocity; - - if (!Velocity || !Velocity.Utilities) { - if (window.console) { - console.log("Velocity UI Pack: Velocity must be loaded first. Aborting."); - } - return; - } - var $ = Velocity.Utilities; - - var velocityVersion = Velocity.version, - requiredVersion = {major: 1, minor: 1, patch: 0}; - - function greaterSemver(primary, secondary) { - var versionInts = []; - - if (!primary || !secondary) { - return false; - } - - $.each([primary, secondary], function(i, versionObject) { - var versionIntsComponents = []; - - $.each(versionObject, function(component, value) { - while (value.toString().length < 5) { - value = "0" + value; - } - versionIntsComponents.push(value); - }); - - versionInts.push(versionIntsComponents.join("")); - }); - - return (parseFloat(versionInts[0]) > parseFloat(versionInts[1])); - } - - if (greaterSemver(requiredVersion, velocityVersion)) { - var abortError = "Velocity UI Pack: You need to update Velocity (velocity.js) to a newer version. Visit http://github.com/julianshapiro/velocity."; - alert(abortError); - throw new Error(abortError); - } - - /************************ - Effect Registration - ************************/ - - /* Note: RegisterUI is a legacy name. */ - Velocity.RegisterEffect = Velocity.RegisterUI = function(effectName, properties) { - /* Animate the expansion/contraction of the elements' parent's height for In/Out effects. */ - function animateParentHeight(elements, direction, totalDuration, stagger) { - var totalHeightDelta = 0, - parentNode; - - /* Sum the total height (including padding and margin) of all targeted elements. */ - $.each(elements.nodeType ? [elements] : elements, function(i, element) { - if (stagger) { - /* Increase the totalDuration by the successive delay amounts produced by the stagger option. */ - totalDuration += i * stagger; - } - - parentNode = element.parentNode; - - var propertiesToSum = ["height", "paddingTop", "paddingBottom", "marginTop", "marginBottom"]; - - /* If box-sizing is border-box, the height already includes padding and margin */ - if (Velocity.CSS.getPropertyValue(element, "boxSizing").toString().toLowerCase() === "border-box") { - propertiesToSum = ["height"]; - } - - $.each(propertiesToSum, function(i, property) { - totalHeightDelta += parseFloat(Velocity.CSS.getPropertyValue(element, property)); - }); - }); - - /* Animate the parent element's height adjustment (with a varying duration multiplier for aesthetic benefits). */ - Velocity.animate( - parentNode, - {height: (direction === "In" ? "+" : "-") + "=" + totalHeightDelta}, - {queue: false, easing: "ease-in-out", duration: totalDuration * (direction === "In" ? 0.6 : 1)} - ); - } - - /* Register a custom redirect for each effect. */ - Velocity.Redirects[effectName] = function(element, redirectOptions, elementsIndex, elementsSize, elements, promiseData, loop) { - var finalElement = (elementsIndex === elementsSize - 1), - totalDuration = 0; - - loop = loop || properties.loop; - if (typeof properties.defaultDuration === "function") { - properties.defaultDuration = properties.defaultDuration.call(elements, elements); - } else { - properties.defaultDuration = parseFloat(properties.defaultDuration); - } - - /* Get the total duration used, so we can share it out with everything that doesn't have a duration */ - for (var callIndex = 0; callIndex < properties.calls.length; callIndex++) { - durationPercentage = properties.calls[callIndex][1]; - if (typeof durationPercentage === "number") { - totalDuration += durationPercentage; - } - } - var shareDuration = totalDuration >= 1 ? 0 : properties.calls.length ? (1 - totalDuration) / properties.calls.length : 1; - - /* Iterate through each effect's call array. */ - for (callIndex = 0; callIndex < properties.calls.length; callIndex++) { - var call = properties.calls[callIndex], - propertyMap = call[0], - redirectDuration = 1000, - durationPercentage = call[1], - callOptions = call[2] || {}, - opts = {}; - - if (redirectOptions.duration !== undefined) { - redirectDuration = redirectOptions.duration; - } else if (properties.defaultDuration !== undefined) { - redirectDuration = properties.defaultDuration; - } - - /* Assign the whitelisted per-call options. */ - opts.duration = redirectDuration * (typeof durationPercentage === "number" ? durationPercentage : shareDuration); - opts.queue = redirectOptions.queue || ""; - opts.easing = callOptions.easing || "ease"; - opts.delay = parseFloat(callOptions.delay) || 0; - opts.loop = !properties.loop && callOptions.loop; - opts._cacheValues = callOptions._cacheValues || true; - - /* Special processing for the first effect call. */ - if (callIndex === 0) { - /* If a delay was passed into the redirect, combine it with the first call's delay. */ - opts.delay += (parseFloat(redirectOptions.delay) || 0); - - if (elementsIndex === 0) { - opts.begin = function() { - /* Only trigger a begin callback on the first effect call with the first element in the set. */ - if (redirectOptions.begin) { - redirectOptions.begin.call(elements, elements); - } - - var direction = effectName.match(/(In|Out)$/); - - /* Make "in" transitioning elements invisible immediately so that there's no FOUC between now - and the first RAF tick. */ - if ((direction && direction[0] === "In") && propertyMap.opacity !== undefined) { - $.each(elements.nodeType ? [elements] : elements, function(i, element) { - Velocity.CSS.setPropertyValue(element, "opacity", 0); - }); - } - - /* Only trigger animateParentHeight() if we're using an In/Out transition. */ - if (redirectOptions.animateParentHeight && direction) { - animateParentHeight(elements, direction[0], redirectDuration + opts.delay, redirectOptions.stagger); - } - }; - } - - /* If the user isn't overriding the display option, default to "auto" for "In"-suffixed transitions. */ - if (redirectOptions.display !== null) { - if (redirectOptions.display !== undefined && redirectOptions.display !== "none") { - opts.display = redirectOptions.display; - } else if (/In$/.test(effectName)) { - /* Inline elements cannot be subjected to transforms, so we switch them to inline-block. */ - var defaultDisplay = Velocity.CSS.Values.getDisplayType(element); - opts.display = (defaultDisplay === "inline") ? "inline-block" : defaultDisplay; - } - } - - if (redirectOptions.visibility && redirectOptions.visibility !== "hidden") { - opts.visibility = redirectOptions.visibility; - } - } - - /* Special processing for the last effect call. */ - if (callIndex === properties.calls.length - 1) { - /* Append promise resolving onto the user's redirect callback. */ - var injectFinalCallbacks = function() { - if ((redirectOptions.display === undefined || redirectOptions.display === "none") && /Out$/.test(effectName)) { - $.each(elements.nodeType ? [elements] : elements, function(i, element) { - Velocity.CSS.setPropertyValue(element, "display", "none"); - }); - } - if (redirectOptions.complete) { - redirectOptions.complete.call(elements, elements); - } - if (promiseData) { - promiseData.resolver(elements || element); - } - }; - - opts.complete = function() { - if (loop) { - Velocity.Redirects[effectName](element, redirectOptions, elementsIndex, elementsSize, elements, promiseData, loop === true ? true : Math.max(0, loop - 1)); - } - if (properties.reset) { - for (var resetProperty in properties.reset) { - if (!properties.reset.hasOwnProperty(resetProperty)) { - continue; - } - var resetValue = properties.reset[resetProperty]; - - /* Format each non-array value in the reset property map to [ value, value ] so that changes apply - immediately and DOM querying is avoided (via forcefeeding). */ - /* Note: Don't forcefeed hooks, otherwise their hook roots will be defaulted to their null values. */ - if (Velocity.CSS.Hooks.registered[resetProperty] === undefined && (typeof resetValue === "string" || typeof resetValue === "number")) { - properties.reset[resetProperty] = [properties.reset[resetProperty], properties.reset[resetProperty]]; - } - } - - /* So that the reset values are applied instantly upon the next rAF tick, use a zero duration and parallel queueing. */ - var resetOptions = {duration: 0, queue: false}; - - /* Since the reset option uses up the complete callback, we trigger the user's complete callback at the end of ours. */ - if (finalElement) { - resetOptions.complete = injectFinalCallbacks; - } - - Velocity.animate(element, properties.reset, resetOptions); - /* Only trigger the user's complete callback on the last effect call with the last element in the set. */ - } else if (finalElement) { - injectFinalCallbacks(); - } - }; - - if (redirectOptions.visibility === "hidden") { - opts.visibility = redirectOptions.visibility; - } - } - - Velocity.animate(element, propertyMap, opts); - } - }; - - /* Return the Velocity object so that RegisterUI calls can be chained. */ - return Velocity; - }; - - /********************* - Packaged Effects - *********************/ - - /* Externalize the packagedEffects data so that they can optionally be modified and re-registered. */ - /* Support: <=IE8: Callouts will have no effect, and transitions will simply fade in/out. IE9/Android 2.3: Most effects are fully supported, the rest fade in/out. All other browsers: full support. */ - Velocity.RegisterEffect.packagedEffects = - { - /* Animate.css */ - "callout.bounce": { - defaultDuration: 550, - calls: [ - [{translateY: -30}, 0.25], - [{translateY: 0}, 0.125], - [{translateY: -15}, 0.125], - [{translateY: 0}, 0.25] - ] - }, - /* Animate.css */ - "callout.shake": { - defaultDuration: 800, - calls: [ - [{translateX: -11}], - [{translateX: 11}], - [{translateX: -11}], - [{translateX: 11}], - [{translateX: -11}], - [{translateX: 11}], - [{translateX: -11}], - [{translateX: 0}] - ] - }, - /* Animate.css */ - "callout.flash": { - defaultDuration: 1100, - calls: [ - [{opacity: [0, "easeInOutQuad", 1]}], - [{opacity: [1, "easeInOutQuad"]}], - [{opacity: [0, "easeInOutQuad"]}], - [{opacity: [1, "easeInOutQuad"]}] - ] - }, - /* Animate.css */ - "callout.pulse": { - defaultDuration: 825, - calls: [ - [{scaleX: 1.1, scaleY: 1.1}, 0.50, {easing: "easeInExpo"}], - [{scaleX: 1, scaleY: 1}, 0.50] - ] - }, - /* Animate.css */ - "callout.swing": { - defaultDuration: 950, - calls: [ - [{rotateZ: 15}], - [{rotateZ: -10}], - [{rotateZ: 5}], - [{rotateZ: -5}], - [{rotateZ: 0}] - ] - }, - /* Animate.css */ - "callout.tada": { - defaultDuration: 1000, - calls: [ - [{scaleX: 0.9, scaleY: 0.9, rotateZ: -3}, 0.10], - [{scaleX: 1.1, scaleY: 1.1, rotateZ: 3}, 0.10], - [{scaleX: 1.1, scaleY: 1.1, rotateZ: -3}, 0.10], - ["reverse", 0.125], - ["reverse", 0.125], - ["reverse", 0.125], - ["reverse", 0.125], - ["reverse", 0.125], - [{scaleX: 1, scaleY: 1, rotateZ: 0}, 0.20] - ] - }, - "transition.fadeIn": { - defaultDuration: 500, - calls: [ - [{opacity: [1, 0]}] - ] - }, - "transition.fadeOut": { - defaultDuration: 500, - calls: [ - [{opacity: [0, 1]}] - ] - }, - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipXIn": { - defaultDuration: 700, - calls: [ - [{opacity: [1, 0], transformPerspective: [800, 800], rotateY: [0, -55]}] - ], - reset: {transformPerspective: 0} - }, - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipXOut": { - defaultDuration: 700, - calls: [ - [{opacity: [0, 1], transformPerspective: [800, 800], rotateY: 55}] - ], - reset: {transformPerspective: 0, rotateY: 0} - }, - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipYIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], transformPerspective: [800, 800], rotateX: [0, -45]}] - ], - reset: {transformPerspective: 0} - }, - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipYOut": { - defaultDuration: 800, - calls: [ - [{opacity: [0, 1], transformPerspective: [800, 800], rotateX: 25}] - ], - reset: {transformPerspective: 0, rotateX: 0} - }, - /* Animate.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipBounceXIn": { - defaultDuration: 900, - calls: [ - [{opacity: [0.725, 0], transformPerspective: [400, 400], rotateY: [-10, 90]}, 0.50], - [{opacity: 0.80, rotateY: 10}, 0.25], - [{opacity: 1, rotateY: 0}, 0.25] - ], - reset: {transformPerspective: 0} - }, - /* Animate.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipBounceXOut": { - defaultDuration: 800, - calls: [ - [{opacity: [0.9, 1], transformPerspective: [400, 400], rotateY: -10}], - [{opacity: 0, rotateY: 90}] - ], - reset: {transformPerspective: 0, rotateY: 0} - }, - /* Animate.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipBounceYIn": { - defaultDuration: 850, - calls: [ - [{opacity: [0.725, 0], transformPerspective: [400, 400], rotateX: [-10, 90]}, 0.50], - [{opacity: 0.80, rotateX: 10}, 0.25], - [{opacity: 1, rotateX: 0}, 0.25] - ], - reset: {transformPerspective: 0} - }, - /* Animate.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.flipBounceYOut": { - defaultDuration: 800, - calls: [ - [{opacity: [0.9, 1], transformPerspective: [400, 400], rotateX: -15}], - [{opacity: 0, rotateX: 90}] - ], - reset: {transformPerspective: 0, rotateX: 0} - }, - /* Magic.css */ - "transition.swoopIn": { - defaultDuration: 850, - calls: [ - [{opacity: [1, 0], transformOriginX: ["100%", "50%"], transformOriginY: ["100%", "100%"], scaleX: [1, 0], scaleY: [1, 0], translateX: [0, -700], translateZ: 0}] - ], - reset: {transformOriginX: "50%", transformOriginY: "50%"} - }, - /* Magic.css */ - "transition.swoopOut": { - defaultDuration: 850, - calls: [ - [{opacity: [0, 1], transformOriginX: ["50%", "100%"], transformOriginY: ["100%", "100%"], scaleX: 0, scaleY: 0, translateX: -700, translateZ: 0}] - ], - reset: {transformOriginX: "50%", transformOriginY: "50%", scaleX: 1, scaleY: 1, translateX: 0} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */ - "transition.whirlIn": { - defaultDuration: 850, - calls: [ - [{opacity: [1, 0], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: [1, 0], scaleY: [1, 0], rotateY: [0, 160]}, 1, {easing: "easeInOutSine"}] - ] - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3. (Fades and scales only.) */ - "transition.whirlOut": { - defaultDuration: 750, - calls: [ - [{opacity: [0, "easeInOutQuint", 1], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: 0, scaleY: 0, rotateY: 160}, 1, {easing: "swing"}] - ], - reset: {scaleX: 1, scaleY: 1, rotateY: 0} - }, - "transition.shrinkIn": { - defaultDuration: 750, - calls: [ - [{opacity: [1, 0], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: [1, 1.5], scaleY: [1, 1.5], translateZ: 0}] - ] - }, - "transition.shrinkOut": { - defaultDuration: 600, - calls: [ - [{opacity: [0, 1], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: 1.3, scaleY: 1.3, translateZ: 0}] - ], - reset: {scaleX: 1, scaleY: 1} - }, - "transition.expandIn": { - defaultDuration: 700, - calls: [ - [{opacity: [1, 0], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: [1, 0.625], scaleY: [1, 0.625], translateZ: 0}] - ] - }, - "transition.expandOut": { - defaultDuration: 700, - calls: [ - [{opacity: [0, 1], transformOriginX: ["50%", "50%"], transformOriginY: ["50%", "50%"], scaleX: 0.5, scaleY: 0.5, translateZ: 0}] - ], - reset: {scaleX: 1, scaleY: 1} - }, - /* Animate.css */ - "transition.bounceIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], scaleX: [1.05, 0.3], scaleY: [1.05, 0.3]}, 0.35], - [{scaleX: 0.9, scaleY: 0.9, translateZ: 0}, 0.20], - [{scaleX: 1, scaleY: 1}, 0.45] - ] - }, - /* Animate.css */ - "transition.bounceOut": { - defaultDuration: 800, - calls: [ - [{scaleX: 0.95, scaleY: 0.95}, 0.35], - [{scaleX: 1.1, scaleY: 1.1, translateZ: 0}, 0.35], - [{opacity: [0, 1], scaleX: 0.3, scaleY: 0.3}, 0.30] - ], - reset: {scaleX: 1, scaleY: 1} - }, - /* Animate.css */ - "transition.bounceUpIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], translateY: [-30, 1000]}, 0.60, {easing: "easeOutCirc"}], - [{translateY: 10}, 0.20], - [{translateY: 0}, 0.20] - ] - }, - /* Animate.css */ - "transition.bounceUpOut": { - defaultDuration: 1000, - calls: [ - [{translateY: 20}, 0.20], - [{opacity: [0, "easeInCirc", 1], translateY: -1000}, 0.80] - ], - reset: {translateY: 0} - }, - /* Animate.css */ - "transition.bounceDownIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], translateY: [30, -1000]}, 0.60, {easing: "easeOutCirc"}], - [{translateY: -10}, 0.20], - [{translateY: 0}, 0.20] - ] - }, - /* Animate.css */ - "transition.bounceDownOut": { - defaultDuration: 1000, - calls: [ - [{translateY: -20}, 0.20], - [{opacity: [0, "easeInCirc", 1], translateY: 1000}, 0.80] - ], - reset: {translateY: 0} - }, - /* Animate.css */ - "transition.bounceLeftIn": { - defaultDuration: 750, - calls: [ - [{opacity: [1, 0], translateX: [30, -1250]}, 0.60, {easing: "easeOutCirc"}], - [{translateX: -10}, 0.20], - [{translateX: 0}, 0.20] - ] - }, - /* Animate.css */ - "transition.bounceLeftOut": { - defaultDuration: 750, - calls: [ - [{translateX: 30}, 0.20], - [{opacity: [0, "easeInCirc", 1], translateX: -1250}, 0.80] - ], - reset: {translateX: 0} - }, - /* Animate.css */ - "transition.bounceRightIn": { - defaultDuration: 750, - calls: [ - [{opacity: [1, 0], translateX: [-30, 1250]}, 0.60, {easing: "easeOutCirc"}], - [{translateX: 10}, 0.20], - [{translateX: 0}, 0.20] - ] - }, - /* Animate.css */ - "transition.bounceRightOut": { - defaultDuration: 750, - calls: [ - [{translateX: -30}, 0.20], - [{opacity: [0, "easeInCirc", 1], translateX: 1250}, 0.80] - ], - reset: {translateX: 0} - }, - "transition.slideUpIn": { - defaultDuration: 900, - calls: [ - [{opacity: [1, 0], translateY: [0, 20], translateZ: 0}] - ] - }, - "transition.slideUpOut": { - defaultDuration: 900, - calls: [ - [{opacity: [0, 1], translateY: -20, translateZ: 0}] - ], - reset: {translateY: 0} - }, - "transition.slideDownIn": { - defaultDuration: 900, - calls: [ - [{opacity: [1, 0], translateY: [0, -20], translateZ: 0}] - ] - }, - "transition.slideDownOut": { - defaultDuration: 900, - calls: [ - [{opacity: [0, 1], translateY: 20, translateZ: 0}] - ], - reset: {translateY: 0} - }, - "transition.slideLeftIn": { - defaultDuration: 1000, - calls: [ - [{opacity: [1, 0], translateX: [0, -20], translateZ: 0}] - ] - }, - "transition.slideLeftOut": { - defaultDuration: 1050, - calls: [ - [{opacity: [0, 1], translateX: -20, translateZ: 0}] - ], - reset: {translateX: 0} - }, - "transition.slideRightIn": { - defaultDuration: 1000, - calls: [ - [{opacity: [1, 0], translateX: [0, 20], translateZ: 0}] - ] - }, - "transition.slideRightOut": { - defaultDuration: 1050, - calls: [ - [{opacity: [0, 1], translateX: 20, translateZ: 0}] - ], - reset: {translateX: 0} - }, - "transition.slideUpBigIn": { - defaultDuration: 850, - calls: [ - [{opacity: [1, 0], translateY: [0, 75], translateZ: 0}] - ] - }, - "transition.slideUpBigOut": { - defaultDuration: 800, - calls: [ - [{opacity: [0, 1], translateY: -75, translateZ: 0}] - ], - reset: {translateY: 0} - }, - "transition.slideDownBigIn": { - defaultDuration: 850, - calls: [ - [{opacity: [1, 0], translateY: [0, -75], translateZ: 0}] - ] - }, - "transition.slideDownBigOut": { - defaultDuration: 800, - calls: [ - [{opacity: [0, 1], translateY: 75, translateZ: 0}] - ], - reset: {translateY: 0} - }, - "transition.slideLeftBigIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], translateX: [0, -75], translateZ: 0}] - ] - }, - "transition.slideLeftBigOut": { - defaultDuration: 750, - calls: [ - [{opacity: [0, 1], translateX: -75, translateZ: 0}] - ], - reset: {translateX: 0} - }, - "transition.slideRightBigIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], translateX: [0, 75], translateZ: 0}] - ] - }, - "transition.slideRightBigOut": { - defaultDuration: 750, - calls: [ - [{opacity: [0, 1], translateX: 75, translateZ: 0}] - ], - reset: {translateX: 0} - }, - /* Magic.css */ - "transition.perspectiveUpIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: ["100%", "100%"], rotateX: [0, -180]}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.perspectiveUpOut": { - defaultDuration: 850, - calls: [ - [{opacity: [0, 1], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: ["100%", "100%"], rotateX: -180}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.perspectiveDownIn": { - defaultDuration: 800, - calls: [ - [{opacity: [1, 0], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateX: [0, 180]}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.perspectiveDownOut": { - defaultDuration: 850, - calls: [ - [{opacity: [0, 1], transformPerspective: [800, 800], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateX: 180}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateX: 0} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.perspectiveLeftIn": { - defaultDuration: 950, - calls: [ - [{opacity: [1, 0], transformPerspective: [2000, 2000], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateY: [0, -180]}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.perspectiveLeftOut": { - defaultDuration: 950, - calls: [ - [{opacity: [0, 1], transformPerspective: [2000, 2000], transformOriginX: [0, 0], transformOriginY: [0, 0], rotateY: -180}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.perspectiveRightIn": { - defaultDuration: 950, - calls: [ - [{opacity: [1, 0], transformPerspective: [2000, 2000], transformOriginX: ["100%", "100%"], transformOriginY: [0, 0], rotateY: [0, 180]}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%"} - }, - /* Magic.css */ - /* Support: Loses rotation in IE9/Android 2.3 (fades only). */ - "transition.perspectiveRightOut": { - defaultDuration: 950, - calls: [ - [{opacity: [0, 1], transformPerspective: [2000, 2000], transformOriginX: ["100%", "100%"], transformOriginY: [0, 0], rotateY: 180}] - ], - reset: {transformPerspective: 0, transformOriginX: "50%", transformOriginY: "50%", rotateY: 0} - } - }; - - /* Register the packaged effects. */ - for (var effectName in Velocity.RegisterEffect.packagedEffects) { - if (Velocity.RegisterEffect.packagedEffects.hasOwnProperty(effectName)) { - Velocity.RegisterEffect(effectName, Velocity.RegisterEffect.packagedEffects[effectName]); - } - } - - /********************* - Sequence Running - **********************/ - - /* Note: Sequence calls must use Velocity's single-object arguments syntax. */ - Velocity.RunSequence = function(originalSequence) { - var sequence = $.extend(true, [], originalSequence); - - if (sequence.length > 1) { - $.each(sequence.reverse(), function(i, currentCall) { - var nextCall = sequence[i + 1]; - - if (nextCall) { - /* Parallel sequence calls (indicated via sequenceQueue:false) are triggered - in the previous call's begin callback. Otherwise, chained calls are normally triggered - in the previous call's complete callback. */ - var currentCallOptions = currentCall.o || currentCall.options, - nextCallOptions = nextCall.o || nextCall.options; - - var timing = (currentCallOptions && currentCallOptions.sequenceQueue === false) ? "begin" : "complete", - callbackOriginal = nextCallOptions && nextCallOptions[timing], - options = {}; - - options[timing] = function() { - var nextCallElements = nextCall.e || nextCall.elements; - var elements = nextCallElements.nodeType ? [nextCallElements] : nextCallElements; - - if (callbackOriginal) { - callbackOriginal.call(elements, elements); - } - Velocity(currentCall); - }; - - if (nextCall.o) { - nextCall.o = $.extend({}, nextCallOptions, options); - } else { - nextCall.options = $.extend({}, nextCallOptions, options); - } - } - }); - - sequence.reverse(); - } - - Velocity(sequence[0]); - }; - }((window.jQuery || window.Zepto || window), window, (window ? window.document : undefined)); -})); \ No newline at end of file diff --git a/gui/vendor/waypoints.js b/gui/vendor/waypoints.js deleted file mode 100644 index ae3d60f5..00000000 --- a/gui/vendor/waypoints.js +++ /dev/null @@ -1,939 +0,0 @@ -/*! -Waypoints - 4.0.1 -Copyright © 2011-2016 Caleb Troughton -Licensed under the MIT license. -https://github.com/imakewebthings/waypoints/blob/master/licenses.txt -*/ -(function() { - 'use strict' - - var keyCounter = 0 - var allWaypoints = {} - - /* http://imakewebthings.com/waypoints/api/waypoint */ - function Waypoint(options) { - if (!options) { - throw new Error('No options passed to Waypoint constructor') - } - if (!options.element) { - throw new Error('No element option passed to Waypoint constructor') - } - if (!options.handler) { - throw new Error('No handler option passed to Waypoint constructor') - } - - this.key = 'waypoint-' + keyCounter - this.options = Waypoint.Adapter.extend({}, Waypoint.defaults, options) - this.element = this.options.element - this.adapter = new Waypoint.Adapter(this.element) - this.callback = options.handler - this.axis = this.options.horizontal ? 'horizontal' : 'vertical' - this.enabled = this.options.enabled - this.triggerPoint = null - this.group = Waypoint.Group.findOrCreate({ - name: this.options.group, - axis: this.axis - }) - this.context = Waypoint.Context.findOrCreateByElement(this.options.context) - - if (Waypoint.offsetAliases[this.options.offset]) { - this.options.offset = Waypoint.offsetAliases[this.options.offset] - } - this.group.add(this) - this.context.add(this) - allWaypoints[this.key] = this - keyCounter += 1 - } - - /* Private */ - Waypoint.prototype.queueTrigger = function(direction) { - this.group.queueTrigger(this, direction) - } - - /* Private */ - Waypoint.prototype.trigger = function(args) { - if (!this.enabled) { - return - } - if (this.callback) { - this.callback.apply(this, args) - } - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/destroy */ - Waypoint.prototype.destroy = function() { - this.context.remove(this) - this.group.remove(this) - delete allWaypoints[this.key] - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/disable */ - Waypoint.prototype.disable = function() { - this.enabled = false - return this - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/enable */ - Waypoint.prototype.enable = function() { - this.context.refresh() - this.enabled = true - return this - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/next */ - Waypoint.prototype.next = function() { - return this.group.next(this) - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/previous */ - Waypoint.prototype.previous = function() { - return this.group.previous(this) - } - - /* Private */ - Waypoint.invokeAll = function(method) { - var allWaypointsArray = [] - for (var waypointKey in allWaypoints) { - allWaypointsArray.push(allWaypoints[waypointKey]) - } - for (var i = 0, end = allWaypointsArray.length; i < end; i++) { - allWaypointsArray[i][method]() - } - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/destroy-all */ - Waypoint.destroyAll = function() { - Waypoint.invokeAll('destroy') - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/disable-all */ - Waypoint.disableAll = function() { - Waypoint.invokeAll('disable') - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/enable-all */ - Waypoint.enableAll = function() { - Waypoint.Context.refreshAll() - for (var waypointKey in allWaypoints) { - allWaypoints[waypointKey].enabled = true - } - return this - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/refresh-all */ - Waypoint.refreshAll = function() { - Waypoint.Context.refreshAll() - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/viewport-height */ - Waypoint.viewportHeight = function() { - return window.innerHeight || document.documentElement.clientHeight - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/viewport-width */ - Waypoint.viewportWidth = function() { - return document.documentElement.clientWidth - } - - Waypoint.adapters = [] - - Waypoint.defaults = { - context: window, - continuous: true, - enabled: true, - group: 'default', - horizontal: false, - offset: 0 - } - - Waypoint.offsetAliases = { - 'bottom-in-view': function() { - return this.context.innerHeight() - this.adapter.outerHeight() - }, - 'right-in-view': function() { - return this.context.innerWidth() - this.adapter.outerWidth() - } - } - - window.Waypoint = Waypoint -}()) -;(function() { - 'use strict' - - function requestAnimationFrameShim(callback) { - window.setTimeout(callback, 1000 / 60) - } - - var keyCounter = 0 - var contexts = {} - var Waypoint = window.Waypoint - var oldWindowLoad = window.onload - - /* http://imakewebthings.com/waypoints/api/context */ - function Context(element) { - this.element = element - this.Adapter = Waypoint.Adapter - this.adapter = new this.Adapter(element) - this.key = 'waypoint-context-' + keyCounter - this.didScroll = false - this.didResize = false - this.oldScroll = { - x: this.adapter.scrollLeft(), - y: this.adapter.scrollTop() - } - this.waypoints = { - vertical: {}, - horizontal: {} - } - - element.waypointContextKey = this.key - contexts[element.waypointContextKey] = this - keyCounter += 1 - if (!Waypoint.windowContext) { - Waypoint.windowContext = true - Waypoint.windowContext = new Context(window) - } - - this.createThrottledScrollHandler() - this.createThrottledResizeHandler() - } - - /* Private */ - Context.prototype.add = function(waypoint) { - var axis = waypoint.options.horizontal ? 'horizontal' : 'vertical' - this.waypoints[axis][waypoint.key] = waypoint - this.refresh() - } - - /* Private */ - Context.prototype.checkEmpty = function() { - var horizontalEmpty = this.Adapter.isEmptyObject(this.waypoints.horizontal) - var verticalEmpty = this.Adapter.isEmptyObject(this.waypoints.vertical) - var isWindow = this.element == this.element.window - if (horizontalEmpty && verticalEmpty && !isWindow) { - this.adapter.off('.waypoints') - delete contexts[this.key] - } - } - - /* Private */ - Context.prototype.createThrottledResizeHandler = function() { - var self = this - - function resizeHandler() { - self.handleResize() - self.didResize = false - } - - this.adapter.on('resize.waypoints', function() { - if (!self.didResize) { - self.didResize = true - Waypoint.requestAnimationFrame(resizeHandler) - } - }) - } - - /* Private */ - Context.prototype.createThrottledScrollHandler = function() { - var self = this - function scrollHandler() { - self.handleScroll() - self.didScroll = false - } - - this.adapter.on('scroll.waypoints', function() { - if (!self.didScroll || Waypoint.isTouch) { - self.didScroll = true - Waypoint.requestAnimationFrame(scrollHandler) - } - }) - } - - /* Private */ - Context.prototype.handleResize = function() { - Waypoint.Context.refreshAll() - } - - /* Private */ - Context.prototype.handleScroll = function() { - var triggeredGroups = {} - var axes = { - horizontal: { - newScroll: this.adapter.scrollLeft(), - oldScroll: this.oldScroll.x, - forward: 'right', - backward: 'left' - }, - vertical: { - newScroll: this.adapter.scrollTop(), - oldScroll: this.oldScroll.y, - forward: 'down', - backward: 'up' - } - } - - for (var axisKey in axes) { - var axis = axes[axisKey] - var isForward = axis.newScroll > axis.oldScroll - var direction = isForward ? axis.forward : axis.backward - - for (var waypointKey in this.waypoints[axisKey]) { - var waypoint = this.waypoints[axisKey][waypointKey] - if (waypoint.triggerPoint === null) { - continue - } - var wasBeforeTriggerPoint = axis.oldScroll < waypoint.triggerPoint - var nowAfterTriggerPoint = axis.newScroll >= waypoint.triggerPoint - var crossedForward = wasBeforeTriggerPoint && nowAfterTriggerPoint - var crossedBackward = !wasBeforeTriggerPoint && !nowAfterTriggerPoint - if (crossedForward || crossedBackward) { - waypoint.queueTrigger(direction) - triggeredGroups[waypoint.group.id] = waypoint.group - } - } - } - - for (var groupKey in triggeredGroups) { - triggeredGroups[groupKey].flushTriggers() - } - - this.oldScroll = { - x: axes.horizontal.newScroll, - y: axes.vertical.newScroll - } - } - - /* Private */ - Context.prototype.innerHeight = function() { - /*eslint-disable eqeqeq */ - if (this.element == this.element.window) { - return Waypoint.viewportHeight() - } - /*eslint-enable eqeqeq */ - return this.adapter.innerHeight() - } - - /* Private */ - Context.prototype.remove = function(waypoint) { - delete this.waypoints[waypoint.axis][waypoint.key] - this.checkEmpty() - } - - /* Private */ - Context.prototype.innerWidth = function() { - /*eslint-disable eqeqeq */ - if (this.element == this.element.window) { - return Waypoint.viewportWidth() - } - /*eslint-enable eqeqeq */ - return this.adapter.innerWidth() - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/context-destroy */ - Context.prototype.destroy = function() { - var allWaypoints = [] - for (var axis in this.waypoints) { - for (var waypointKey in this.waypoints[axis]) { - allWaypoints.push(this.waypoints[axis][waypointKey]) - } - } - for (var i = 0, end = allWaypoints.length; i < end; i++) { - allWaypoints[i].destroy() - } - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/context-refresh */ - Context.prototype.refresh = function() { - /*eslint-disable eqeqeq */ - var isWindow = this.element == this.element.window - /*eslint-enable eqeqeq */ - var contextOffset = isWindow ? undefined : this.adapter.offset() - var triggeredGroups = {} - var axes - - this.handleScroll() - axes = { - horizontal: { - contextOffset: isWindow ? 0 : contextOffset.left, - contextScroll: isWindow ? 0 : this.oldScroll.x, - contextDimension: this.innerWidth(), - oldScroll: this.oldScroll.x, - forward: 'right', - backward: 'left', - offsetProp: 'left' - }, - vertical: { - contextOffset: isWindow ? 0 : contextOffset.top, - contextScroll: isWindow ? 0 : this.oldScroll.y, - contextDimension: this.innerHeight(), - oldScroll: this.oldScroll.y, - forward: 'down', - backward: 'up', - offsetProp: 'top' - } - } - - for (var axisKey in axes) { - var axis = axes[axisKey] - for (var waypointKey in this.waypoints[axisKey]) { - var waypoint = this.waypoints[axisKey][waypointKey] - var adjustment = waypoint.options.offset - var oldTriggerPoint = waypoint.triggerPoint - var elementOffset = 0 - var freshWaypoint = oldTriggerPoint == null - var contextModifier, wasBeforeScroll, nowAfterScroll - var triggeredBackward, triggeredForward - - if (waypoint.element !== waypoint.element.window) { - elementOffset = waypoint.adapter.offset()[axis.offsetProp] - } - - if (typeof adjustment === 'function') { - adjustment = adjustment.apply(waypoint) - } - else if (typeof adjustment === 'string') { - adjustment = parseFloat(adjustment) - if (waypoint.options.offset.indexOf('%') > - 1) { - adjustment = Math.ceil(axis.contextDimension * adjustment / 100) - } - } - - contextModifier = axis.contextScroll - axis.contextOffset - waypoint.triggerPoint = Math.floor(elementOffset + contextModifier - adjustment) - wasBeforeScroll = oldTriggerPoint < axis.oldScroll - nowAfterScroll = waypoint.triggerPoint >= axis.oldScroll - triggeredBackward = wasBeforeScroll && nowAfterScroll - triggeredForward = !wasBeforeScroll && !nowAfterScroll - - if (!freshWaypoint && triggeredBackward) { - waypoint.queueTrigger(axis.backward) - triggeredGroups[waypoint.group.id] = waypoint.group - } - else if (!freshWaypoint && triggeredForward) { - waypoint.queueTrigger(axis.forward) - triggeredGroups[waypoint.group.id] = waypoint.group - } - else if (freshWaypoint && axis.oldScroll >= waypoint.triggerPoint) { - waypoint.queueTrigger(axis.forward) - triggeredGroups[waypoint.group.id] = waypoint.group - } - } - } - - Waypoint.requestAnimationFrame(function() { - for (var groupKey in triggeredGroups) { - triggeredGroups[groupKey].flushTriggers() - } - }) - - return this - } - - /* Private */ - Context.findOrCreateByElement = function(element) { - return Context.findByElement(element) || new Context(element) - } - - /* Private */ - Context.refreshAll = function() { - for (var contextId in contexts) { - contexts[contextId].refresh() - } - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/context-find-by-element */ - Context.findByElement = function(element) { - return contexts[element.waypointContextKey] - } - - window.onload = function() { - if (oldWindowLoad) { - oldWindowLoad() - } - Context.refreshAll() - } - - - Waypoint.requestAnimationFrame = function(callback) { - var requestFn = window.requestAnimationFrame || - window.mozRequestAnimationFrame || - window.webkitRequestAnimationFrame || - requestAnimationFrameShim - requestFn.call(window, callback) - } - Waypoint.Context = Context -}()) -;(function() { - 'use strict' - - function byTriggerPoint(a, b) { - return a.triggerPoint - b.triggerPoint - } - - function byReverseTriggerPoint(a, b) { - return b.triggerPoint - a.triggerPoint - } - - var groups = { - vertical: {}, - horizontal: {} - } - var Waypoint = window.Waypoint - - /* http://imakewebthings.com/waypoints/api/group */ - function Group(options) { - this.name = options.name - this.axis = options.axis - this.id = this.name + '-' + this.axis - this.waypoints = [] - this.clearTriggerQueues() - groups[this.axis][this.name] = this - } - - /* Private */ - Group.prototype.add = function(waypoint) { - this.waypoints.push(waypoint) - } - - /* Private */ - Group.prototype.clearTriggerQueues = function() { - this.triggerQueues = { - up: [], - down: [], - left: [], - right: [] - } - } - - /* Private */ - Group.prototype.flushTriggers = function() { - for (var direction in this.triggerQueues) { - var waypoints = this.triggerQueues[direction] - var reverse = direction === 'up' || direction === 'left' - waypoints.sort(reverse ? byReverseTriggerPoint : byTriggerPoint) - for (var i = 0, end = waypoints.length; i < end; i += 1) { - var waypoint = waypoints[i] - if (waypoint.options.continuous || i === waypoints.length - 1) { - waypoint.trigger([direction]) - } - } - } - this.clearTriggerQueues() - } - - /* Private */ - Group.prototype.next = function(waypoint) { - this.waypoints.sort(byTriggerPoint) - var index = Waypoint.Adapter.inArray(waypoint, this.waypoints) - var isLast = index === this.waypoints.length - 1 - return isLast ? null : this.waypoints[index + 1] - } - - /* Private */ - Group.prototype.previous = function(waypoint) { - this.waypoints.sort(byTriggerPoint) - var index = Waypoint.Adapter.inArray(waypoint, this.waypoints) - return index ? this.waypoints[index - 1] : null - } - - /* Private */ - Group.prototype.queueTrigger = function(waypoint, direction) { - this.triggerQueues[direction].push(waypoint) - } - - /* Private */ - Group.prototype.remove = function(waypoint) { - var index = Waypoint.Adapter.inArray(waypoint, this.waypoints) - if (index > -1) { - this.waypoints.splice(index, 1) - } - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/first */ - Group.prototype.first = function() { - return this.waypoints[0] - } - - /* Public */ - /* http://imakewebthings.com/waypoints/api/last */ - Group.prototype.last = function() { - return this.waypoints[this.waypoints.length - 1] - } - - /* Private */ - Group.findOrCreate = function(options) { - return groups[options.axis][options.name] || new Group(options) - } - - Waypoint.Group = Group -}()) -;(function() { - 'use strict' - - var $ = window.jQuery - var Waypoint = window.Waypoint - - function JQueryAdapter(element) { - this.$element = $(element) - } - - $.each([ - 'innerHeight', - 'innerWidth', - 'off', - 'offset', - 'on', - 'outerHeight', - 'outerWidth', - 'scrollLeft', - 'scrollTop' - ], function(i, method) { - JQueryAdapter.prototype[method] = function() { - var args = Array.prototype.slice.call(arguments) - return this.$element[method].apply(this.$element, args) - } - }) - - $.each([ - 'extend', - 'inArray', - 'isEmptyObject' - ], function(i, method) { - JQueryAdapter[method] = $[method] - }) - - Waypoint.adapters.push({ - name: 'jquery', - Adapter: JQueryAdapter - }) - Waypoint.Adapter = JQueryAdapter -}()) -;(function() { - 'use strict' - - var Waypoint = window.Waypoint - - function createExtension(framework) { - return function() { - var waypoints = [] - var overrides = arguments[0] - - if (framework.isFunction(arguments[0])) { - overrides = framework.extend({}, arguments[1]) - overrides.handler = arguments[0] - } - - this.each(function() { - var options = framework.extend({}, overrides, { - element: this - }) - if (typeof options.context === 'string') { - options.context = framework(this).closest(options.context)[0] - } - waypoints.push(new Waypoint(options)) - }) - - return waypoints - } - } - - if (window.jQuery) { - window.jQuery.fn.waypoint = createExtension(window.jQuery) - } - if (window.Zepto) { - window.Zepto.fn.waypoint = createExtension(window.Zepto) - } -}()) -; - -/*! -Waypoints Sticky Element Shortcut - 4.0.1 -Copyright © 2011-2016 Caleb Troughton -Licensed under the MIT license. -https://github.com/imakewebthings/waypoints/blob/master/licenses.txt -*/ -(function() { - 'use strict' - - var $ = window.jQuery - var Waypoint = window.Waypoint - - /* http://imakewebthings.com/waypoints/shortcuts/sticky-elements */ - function Sticky(options) { - this.options = $.extend({}, Waypoint.defaults, Sticky.defaults, options) - this.element = this.options.element - this.$element = $(this.element) - this.createWrapper() - this.createWaypoint() - } - - /* Private */ - Sticky.prototype.createWaypoint = function() { - var originalHandler = this.options.handler - - this.waypoint = new Waypoint($.extend({}, this.options, { - element: this.wrapper, - handler: $.proxy(function(direction) { - var shouldBeStuck = this.options.direction.indexOf(direction) > -1 - var wrapperHeight = shouldBeStuck ? this.$element.outerHeight(true) : '' - - this.$wrapper.height(wrapperHeight) - this.$element.toggleClass(this.options.stuckClass, shouldBeStuck) - - if (originalHandler) { - originalHandler.call(this, direction) - } - }, this) - })) - } - - /* Private */ - Sticky.prototype.createWrapper = function() { - if (this.options.wrapper) { - this.$element.wrap(this.options.wrapper) - } - this.$wrapper = this.$element.parent() - this.wrapper = this.$wrapper[0] - } - - /* Public */ - Sticky.prototype.destroy = function() { - if (this.$element.parent()[0] === this.wrapper) { - this.waypoint.destroy() - this.$element.removeClass(this.options.stuckClass) - if (this.options.wrapper) { - this.$element.unwrap() - } - } - } - - Sticky.defaults = { - wrapper: '
', - stuckClass: 'stuck', - direction: 'down right' - } - - Waypoint.Sticky = Sticky -}()) -; - -/*! -Waypoints Inview Shortcut - 4.0.1 -Copyright © 2011-2016 Caleb Troughton -Licensed under the MIT license. -https://github.com/imakewebthings/waypoints/blob/master/licenses.txt -*/ -(function() { - 'use strict' - - function noop() {} - - var Waypoint = window.Waypoint - - /* http://imakewebthings.com/waypoints/shortcuts/inview */ - function Inview(options) { - this.options = Waypoint.Adapter.extend({}, Inview.defaults, options) - this.axis = this.options.horizontal ? 'horizontal' : 'vertical' - this.waypoints = [] - this.element = this.options.element - this.createWaypoints() - } - - /* Private */ - Inview.prototype.createWaypoints = function() { - var configs = { - vertical: [{ - down: 'enter', - up: 'exited', - offset: '100%' - }, { - down: 'entered', - up: 'exit', - offset: 'bottom-in-view' - }, { - down: 'exit', - up: 'entered', - offset: 0 - }, { - down: 'exited', - up: 'enter', - offset: function() { - return -this.adapter.outerHeight() - } - }], - horizontal: [{ - right: 'enter', - left: 'exited', - offset: '100%' - }, { - right: 'entered', - left: 'exit', - offset: 'right-in-view' - }, { - right: 'exit', - left: 'entered', - offset: 0 - }, { - right: 'exited', - left: 'enter', - offset: function() { - return -this.adapter.outerWidth() - } - }] - } - - for (var i = 0, end = configs[this.axis].length; i < end; i++) { - var config = configs[this.axis][i] - this.createWaypoint(config) - } - } - - /* Private */ - Inview.prototype.createWaypoint = function(config) { - var self = this - this.waypoints.push(new Waypoint({ - context: this.options.context, - element: this.options.element, - enabled: this.options.enabled, - handler: (function(config) { - return function(direction) { - self.options[config[direction]].call(self, direction) - } - }(config)), - offset: config.offset, - horizontal: this.options.horizontal - })) - } - - /* Public */ - Inview.prototype.destroy = function() { - for (var i = 0, end = this.waypoints.length; i < end; i++) { - this.waypoints[i].destroy() - } - this.waypoints = [] - } - - Inview.prototype.disable = function() { - for (var i = 0, end = this.waypoints.length; i < end; i++) { - this.waypoints[i].disable() - } - } - - Inview.prototype.enable = function() { - for (var i = 0, end = this.waypoints.length; i < end; i++) { - this.waypoints[i].enable() - } - } - - Inview.defaults = { - context: window, - enabled: true, - enter: noop, - entered: noop, - exit: noop, - exited: noop - } - - Waypoint.Inview = Inview -}()) -; - -/*! -Waypoints Infinite Scroll Shortcut - 4.0.1 -Copyright © 2011-2016 Caleb Troughton -Licensed under the MIT license. -https://github.com/imakewebthings/waypoints/blob/master/licenses.txt -*/ -(function() { - 'use strict' - - var $ = window.jQuery - var Waypoint = window.Waypoint - - /* http://imakewebthings.com/waypoints/shortcuts/infinite-scroll */ - function Infinite(options) { - this.options = $.extend({}, Infinite.defaults, options) - this.container = this.options.element - if (this.options.container !== 'auto') { - this.container = this.options.container - } - this.$container = $(this.container) - this.$more = $(this.options.more) - - if (this.$more.length) { - this.setupHandler() - this.waypoint = new Waypoint(this.options) - } - } - - /* Private */ - Infinite.prototype.setupHandler = function() { - this.options.handler = $.proxy(function() { - this.options.onBeforePageLoad() - this.destroy() - this.$container.addClass(this.options.loadingClass) - - $.get($(this.options.more).attr('href'), $.proxy(function(data) { - var $data = $($.parseHTML(data)) - var $newMore = $data.find(this.options.more) - - var $items = $data.find(this.options.items) - if (!$items.length) { - $items = $data.filter(this.options.items) - } - - this.$container.append($items) - this.$container.removeClass(this.options.loadingClass) - - if (!$newMore.length) { - $newMore = $data.filter(this.options.more) - } - if ($newMore.length) { - this.$more.replaceWith($newMore) - this.$more = $newMore - this.waypoint = new Waypoint(this.options) - } - else { - this.$more.remove() - } - - this.options.onAfterPageLoad($items) - }, this)) - }, this) - } - - /* Public */ - Infinite.prototype.destroy = function() { - if (this.waypoint) { - this.waypoint.destroy() - } - } - - Infinite.defaults = { - container: 'auto', - items: '.infinite-item', - more: '.infinite-more-link', - offset: 'bottom-in-view', - loadingClass: 'infinite-loading', - onBeforePageLoad: $.noop, - onAfterPageLoad: $.noop - } - - Waypoint.Infinite = Infinite -}()) -;