include/javascript/yui3/build/transition/transition-native.js

   1 /*
   2  Copyright (c) 2010, Yahoo! Inc. All rights reserved.
   3  Code licensed under the BSD License:
   4  http://developer.yahoo.com/yui/license.html
   5  version: 3.3.0
   6  build: 3167
   7  */
   8 YUI.add('transition-native',function(Y){var TRANSITION='-webkit-transition',TRANSITION_CAMEL='WebkitTransition',TRANSITION_PROPERTY_CAMEL='WebkitTransitionProperty',TRANSITION_PROPERTY='-webkit-transition-property',TRANSITION_DURATION='-webkit-transition-duration',TRANSITION_TIMING_FUNCTION='-webkit-transition-timing-function',TRANSITION_DELAY='-webkit-transition-delay',TRANSITION_END='webkitTransitionEnd',ON_TRANSITION_END='onwebkittransitionend',TRANSFORM_CAMEL='WebkitTransform',EMPTY_OBJ={},Transition=function(){this.init.apply(this,arguments);};Transition.fx={};Transition.toggles={};Transition._hasEnd={};Transition._toCamel=function(property){property=property.replace(/-([a-z])/gi,function(m0,m1){return m1.toUpperCase();});return property;};Transition._toHyphen=function(property){property=property.replace(/([A-Z]?)([a-z]+)([A-Z]?)/g,function(m0,m1,m2,m3){var str='';if(m1){str+='-'+m1.toLowerCase();}
   9 str+=m2;if(m3){str+='-'+m3.toLowerCase();}
  10 return str;});return property;};Transition._reKeywords=/^(?:node|duration|iterations|easing|delay|on|onstart|onend)$/i;Transition.useNative=false;if(TRANSITION in Y.config.doc.documentElement.style){Transition.useNative=true;Transition.supported=true;}
  11 Y.Node.DOM_EVENTS[TRANSITION_END]=1;Transition.NAME='transition';Transition.DEFAULT_EASING='ease';Transition.DEFAULT_DURATION=0.5;Transition.DEFAULT_DELAY=0;Transition._nodeAttrs={};Transition.prototype={constructor:Transition,init:function(node,config){var anim=this;anim._node=node;if(!anim._running&&config){anim._config=config;node._transition=anim;anim._duration=('duration'in config)?config.duration:anim.constructor.DEFAULT_DURATION;anim._delay=('delay'in config)?config.delay:anim.constructor.DEFAULT_DELAY;anim._easing=config.easing||anim.constructor.DEFAULT_EASING;anim._count=0;anim._running=false;}
  12 return anim;},addProperty:function(prop,config){var anim=this,node=this._node,uid=Y.stamp(node),nodeInstance=Y.one(node),attrs=Transition._nodeAttrs[uid],computed,compareVal,dur,attr,val;if(!attrs){attrs=Transition._nodeAttrs[uid]={};}
  13 attr=attrs[prop];if(config&&config.value!==undefined){val=config.value;}else if(config!==undefined){val=config;config=EMPTY_OBJ;}
  14 if(typeof val==='function'){val=val.call(nodeInstance,nodeInstance);}
  15 if(attr&&attr.transition){if(attr.transition!==anim){attr.transition._count--;}}
  16 anim._count++;dur=((typeof config.duration!='undefined')?config.duration:anim._duration)||0.0001;attrs[prop]={value:val,duration:dur,delay:(typeof config.delay!='undefined')?config.delay:anim._delay,easing:config.easing||anim._easing,transition:anim};computed=Y.DOM.getComputedStyle(node,prop);compareVal=(typeof val==='string')?computed:parseFloat(computed);if(Transition.useNative&&compareVal===val){setTimeout(function(){anim._onNativeEnd.call(node,{propertyName:prop,elapsedTime:dur});},dur*1000);}},removeProperty:function(prop){var anim=this,attrs=Transition._nodeAttrs[Y.stamp(anim._node)];if(attrs&&attrs[prop]){delete attrs[prop];anim._count--;}},initAttrs:function(config){var attr,node=this._node;if(config.transform&&!config[TRANSFORM_CAMEL]){config[TRANSFORM_CAMEL]=config.transform;delete config.transform;}
  17 for(attr in config){if(config.hasOwnProperty(attr)&&!Transition._reKeywords.test(attr)){this.addProperty(attr,config[attr]);if(node.style[attr]===''){Y.DOM.setStyle(node,attr,Y.DOM.getComputedStyle(node,attr));}}}},run:function(callback){var anim=this,node=anim._node,config=anim._config,data={type:'transition:start',config:config};if(!anim._running){anim._running=true;if(config.on&&config.on.start){config.on.start.call(Y.one(node),data);}
  18 anim.initAttrs(anim._config);anim._callback=callback;anim._start();}
  19 return anim;},_start:function(){this._runNative();},_prepDur:function(dur){dur=parseFloat(dur);return dur+'s';},_runNative:function(time){var anim=this,node=anim._node,uid=Y.stamp(node),style=node.style,computed=getComputedStyle(node),attrs=Transition._nodeAttrs[uid],cssText='',cssTransition=computed[TRANSITION_PROPERTY],transitionText=TRANSITION_PROPERTY+': ',duration=TRANSITION_DURATION+': ',easing=TRANSITION_TIMING_FUNCTION+': ',delay=TRANSITION_DELAY+': ',hyphy,attr,name;if(cssTransition!=='all'){transitionText+=cssTransition+',';duration+=computed[TRANSITION_DURATION]+',';easing+=computed[TRANSITION_TIMING_FUNCTION]+',';delay+=computed[TRANSITION_DELAY]+',';}
  20 for(name in attrs){hyphy=Transition._toHyphen(name);attr=attrs[name];if(attrs.hasOwnProperty(name)&&attr.transition===anim){if(name in node.style){duration+=anim._prepDur(attr.duration)+',';delay+=anim._prepDur(attr.delay)+',';easing+=(attr.easing)+',';transitionText+=hyphy+',';cssText+=hyphy+': '+attr.value+'; ';}else{this.removeProperty(name);}}}
  21 transitionText=transitionText.replace(/,$/,';');duration=duration.replace(/,$/,';');easing=easing.replace(/,$/,';');delay=delay.replace(/,$/,';');if(!Transition._hasEnd[uid]){node.addEventListener(TRANSITION_END,anim._onNativeEnd,false);Transition._hasEnd[uid]=true;}
  22 style.cssText+=transitionText+duration+easing+delay+cssText;},_end:function(elapsed){var anim=this,node=anim._node,callback=anim._callback,config=anim._config,data={type:'transition:end',config:config,elapsedTime:elapsed},nodeInstance=Y.one(node);anim._running=false;anim._callback=null;if(node){if(config.on&&config.on.end){setTimeout(function(){config.on.end.call(nodeInstance,data);if(callback){callback.call(nodeInstance,data);}},1);}else if(callback){setTimeout(function(){callback.call(nodeInstance,data);},1);}}},_endNative:function(name){var node=this._node,value=node.ownerDocument.defaultView.getComputedStyle(node,'')[TRANSITION_PROPERTY];if(typeof value==='string'){value=value.replace(new RegExp('(?:^|,\\s)'+name+',?'),',');value=value.replace(/^,|,$/,'');node.style[TRANSITION_CAMEL]=value;}},_onNativeEnd:function(e){var node=this,uid=Y.stamp(node),event=e,name=Transition._toCamel(event.propertyName),elapsed=event.elapsedTime,attrs=Transition._nodeAttrs[uid],attr=attrs[name],anim=(attr)?attr.transition:null,data,config;if(anim){anim.removeProperty(name);anim._endNative(name);config=anim._config[name];data={type:'propertyEnd',propertyName:name,elapsedTime:elapsed,config:config};if(config&&config.on&&config.on.end){config.on.end.call(Y.one(node),data);}
  23 if(anim._count<=0){anim._end(elapsed);}}},destroy:function(){var anim=this;node.removeEventListener(TRANSITION_END,anim._onNativeEnd,false);anim._node=null;}};Y.Transition=Transition;Y.TransitionNative=Transition;Y.Node.prototype.transition=function(name,config,callback){var
  24 transitionAttrs=Transition._nodeAttrs[Y.stamp(this._node)],anim=(transitionAttrs)?transitionAttrs.transition||null:null,fxConfig,prop;if(typeof name==='string'){if(typeof config==='function'){callback=config;config=null;}
  25 fxConfig=Transition.fx[name];if(config&&typeof config!=='boolean'){config=Y.clone(config);for(prop in fxConfig){if(fxConfig.hasOwnProperty(prop)){if(!(prop in config)){config[prop]=fxConfig[prop];}}}}else{config=fxConfig;}}else{callback=config;config=name;}
  26 if(anim&&!anim._running){anim.init(this,config);}else{anim=new Transition(this._node,config);}
  27 anim.run(callback);return this;};Y.Node.prototype.show=function(name,config,callback){this._show();if(name&&Y.Transition){if(typeof name!=='string'&&!name.push){if(typeof config==='function'){callback=config;config=name;}
  28 name=this.SHOW_TRANSITION;}
  29 this.transition(name,config,callback);}
  30 return this;};var _wrapCallBack=function(anim,fn,callback){return function(){if(fn){fn.call(anim);}
  31 if(callback){callback.apply(anim._node,arguments);}};};Y.Node.prototype.hide=function(name,config,callback){if(name&&Y.Transition){if(typeof config==='function'){callback=config;config=null;}
  32 callback=_wrapCallBack(this,this._hide,callback);if(typeof name!=='string'&&!name.push){if(typeof config==='function'){callback=config;config=name;}
  33 name=this.HIDE_TRANSITION;}
  34 this.transition(name,config,callback);}else{this._hide();}
  35 return this;};Y.NodeList.prototype.transition=function(config,callback){var nodes=this._nodes,i=0,node;while((node=nodes[i++])){Y.one(node).transition(config,callback);}
  36 return this;};Y.Node.prototype.toggleView=function(name,on){var callback;this._toggles=this._toggles||[];if(typeof name=='boolean'){on=name;}
  37 if(typeof on==='undefined'&&name in this._toggles){on=!this._toggles[name];}
  38 on=(on)?1:0;if(on){this._show();}else{callback=_wrapCallBack(anim,this._hide);}
  39 this._toggles[name]=on;this.transition(Y.Transition.toggles[name][on],callback);};Y.NodeList.prototype.toggleView=function(config,callback){var nodes=this._nodes,i=0,node;while((node=nodes[i++])){Y.one(node).toggleView(config,callback);}
  40 return this;};Y.mix(Transition.fx,{fadeOut:{opacity:0,duration:0.5,easing:'ease-out'},fadeIn:{opacity:1,duration:0.5,easing:'ease-in'},sizeOut:{height:0,width:0,duration:0.75,easing:'ease-out'},sizeIn:{height:function(node){return node.get('scrollHeight')+'px';},width:function(node){return node.get('scrollWidth')+'px';},duration:0.5,easing:'ease-in',on:{start:function(){var overflow=this.getStyle('overflow');if(overflow!=='hidden'){this.setStyle('overflow','hidden');this._transitionOverflow=overflow;}},end:function(){if(this._transitionOverflow){this.setStyle('overflow',this._transitionOverflow);}}}}});Y.mix(Transition.toggles,{size:['sizeIn','sizeOut'],fade:['fadeOut','fadeIn']});},'3.3.0',{requires:['node-base']});