How to use transition method in Jest
Best JavaScript code snippet using jest
transition-coverage.js
Source:transition-coverage.js 
...31 calledFunctions: 0,32 path: "build/transition/transition.js",33 code: []34};35_yuitest_coverage["build/transition/transition.js"].code=["YUI.add('transition', function (Y, NAME) {","","/**","* Provides the transition method for Node.","* Transition has no API of its own, but adds the transition method to Node.","*","* @module transition","* @requires node-style","*/","","var CAMEL_VENDOR_PREFIX = '',"," VENDOR_PREFIX = '',"," DOCUMENT = Y.config.doc,"," DOCUMENT_ELEMENT = 'documentElement',"," TRANSITION = 'transition',"," TRANSITION_CAMEL = 'transition',"," TRANSITION_PROPERTY_CAMEL = 'transitionProperty',"," TRANSFORM_CAMEL = 'transform',"," TRANSITION_PROPERTY,"," TRANSITION_DURATION,"," TRANSITION_TIMING_FUNCTION,"," TRANSITION_DELAY,"," TRANSITION_END,"," ON_TRANSITION_END,",""," EMPTY_OBJ = {},",""," VENDORS = ["," 'Webkit',"," 'Moz'"," ],",""," VENDOR_TRANSITION_END = {"," Webkit: 'webkitTransitionEnd'"," },","","/**"," * A class for constructing transition instances."," * Adds the \"transition\" method to Node."," * @class Transition"," * @constructor"," */","","Transition = function() {"," this.init.apply(this, arguments);","};","","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 = ((m1) ? '-' + m1.toLowerCase() : '') + m2;",""," if (m3) {"," str += '-' + m3.toLowerCase();"," }",""," return str;"," });",""," return property;","};","","Transition.SHOW_TRANSITION = 'fadeIn';","Transition.HIDE_TRANSITION = 'fadeOut';","","Transition.useNative = false;","","if ('transition' in DOCUMENT[DOCUMENT_ELEMENT].style) {"," Transition.useNative = true;"," Transition.supported = true; // TODO: remove","} else {"," Y.Array.each(VENDORS, function(val) { // then vendor specific"," var property = val + 'Transition';"," if (property in DOCUMENT[DOCUMENT_ELEMENT].style) {"," CAMEL_VENDOR_PREFIX = val;"," VENDOR_PREFIX = Transition._toHyphen(val) + '-';",""," Transition.useNative = true;"," Transition.supported = true; // TODO: remove"," Transition._VENDOR_PREFIX = val;"," }"," });","}","","if (CAMEL_VENDOR_PREFIX) {"," TRANSITION_CAMEL = CAMEL_VENDOR_PREFIX + 'Transition';"," TRANSITION_PROPERTY_CAMEL = CAMEL_VENDOR_PREFIX + 'TransitionProperty';"," TRANSFORM_CAMEL = CAMEL_VENDOR_PREFIX + 'Transform';","}","","TRANSITION_PROPERTY = VENDOR_PREFIX + 'transition-property';","TRANSITION_DURATION = VENDOR_PREFIX + 'transition-duration';","TRANSITION_TIMING_FUNCTION = VENDOR_PREFIX + 'transition-timing-function';","TRANSITION_DELAY = VENDOR_PREFIX + 'transition-delay';","","TRANSITION_END = 'transitionend';","ON_TRANSITION_END = 'on' + CAMEL_VENDOR_PREFIX.toLowerCase() + 'transitionend';","TRANSITION_END = VENDOR_TRANSITION_END[CAMEL_VENDOR_PREFIX] || TRANSITION_END;","","Transition.fx = {};","Transition.toggles = {};","","Transition._hasEnd = {};","","Transition._reKeywords = /^(?:node|duration|iterations|easing|delay|on|onstart|onend)$/i;","","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; // cache for reuse",""," 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; // track number of animated properties"," anim._running = false;",""," }",""," 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] = {};"," }",""," attr = attrs[prop];",""," // might just be a value"," if (config && config.value !== undefined) {"," val = config.value;"," } else if (config !== undefined) {"," val = config;"," config = EMPTY_OBJ;"," }",""," if (typeof val === 'function') {"," val = val.call(nodeInstance, nodeInstance);"," }",""," if (attr && attr.transition) {"," // take control if another transition owns this property"," if (attr.transition !== anim) {"," attr.transition._count--; // remapping attr to this transition"," }"," }",""," anim._count++; // properties per transition",""," // make 0 async and fire events"," 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"," };",""," // native end event doesnt fire when setting to same value"," // supplementing with timer"," // val may be a string or number (height: 0, etc), but computedStyle is always string"," 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; // TODO: copy"," }",""," for (attr in config) {"," if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {"," this.addProperty(attr, config[attr]);",""," // when size is auto or % webkit starts from zero instead of computed"," // (https://bugs.webkit.org/show_bug.cgi?id=16020)"," // TODO: selective set"," if (node.style[attr] === '') {"," Y.DOM.setStyle(node, attr, Y.DOM.getComputedStyle(node, attr));"," }"," }"," }"," },",""," /**"," * Starts or an animation."," * @method run"," * @chainable"," * @private"," */"," 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);"," }",""," anim.initAttrs(anim._config);",""," anim._callback = callback;"," anim._start();"," }","",""," return anim;"," },",""," _start: function() {"," this._runNative();"," },",""," _prepDur: function(dur) {"," dur = parseFloat(dur) * 1000;",""," return dur + 'ms';"," },",""," _runNative: function(time) {"," var anim = this,"," node = anim._node,"," uid = Y.stamp(node),"," style = node.style,"," computed = node.ownerDocument.defaultView.getComputedStyle(node),"," attrs = Transition._nodeAttrs[uid],"," cssText = '',"," cssTransition = computed[Transition._toCamel(TRANSITION_PROPERTY)],",""," transitionText = TRANSITION_PROPERTY + ': ',"," duration = TRANSITION_DURATION + ': ',"," easing = TRANSITION_TIMING_FUNCTION + ': ',"," delay = TRANSITION_DELAY + ': ',"," hyphy,"," attr,"," name;",""," // preserve existing transitions"," if (cssTransition !== 'all') {"," transitionText += cssTransition + ',';"," duration += computed[Transition._toCamel(TRANSITION_DURATION)] + ',';"," easing += computed[Transition._toCamel(TRANSITION_TIMING_FUNCTION)] + ',';"," delay += computed[Transition._toCamel(TRANSITION_DELAY)] + ',';",""," }",""," // run transitions mapped to this instance"," for (name in attrs) {"," hyphy = Transition._toHyphen(name);"," attr = attrs[name];"," if ((attr = attrs[name]) && attr.transition === anim) {"," if (name in node.style) { // only native styles allowed"," duration += anim._prepDur(attr.duration) + ',';"," delay += anim._prepDur(attr.delay) + ',';"," easing += (attr.easing) + ',';",""," transitionText += hyphy + ',';"," cssText += hyphy + ': ' + attr.value + '; ';"," } else {"," this.removeProperty(name);"," }"," }"," }",""," transitionText = transitionText.replace(/,$/, ';');"," duration = duration.replace(/,$/, ';');"," easing = easing.replace(/,$/, ';');"," delay = delay.replace(/,$/, ';');",""," // only one native end event per node"," if (!Transition._hasEnd[uid]) {"," node.addEventListener(TRANSITION_END, anim._onNativeEnd, '');"," Transition._hasEnd[uid] = true;",""," }",""," 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() { // IE: allow previous update to finish"," config.on.end.call(nodeInstance, data);",""," // nested to ensure proper fire order"," if (callback) {"," callback.call(nodeInstance, data);"," }",""," }, 1);"," } else if (callback) {"," setTimeout(function() { // IE: allow previous update to finish"," callback.call(nodeInstance, data);"," }, 1);"," }"," }",""," },",""," _endNative: function(name) {"," var node = this._node,"," value = node.ownerDocument.defaultView.getComputedStyle(node, '')[Transition._toCamel(TRANSITION_PROPERTY)];",""," name = Transition._toHyphen(name);"," 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,//e._event,"," 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);"," }",""," if (anim._count <= 0) { // after propertyEnd fires"," anim._end(elapsed);"," node.style[TRANSITION_PROPERTY_CAMEL] = ''; // clean up style"," }"," }"," },",""," destroy: function() {"," var anim = this,"," node = anim._node;",""," if (node) {"," node.removeEventListener(TRANSITION_END, anim._onNativeEnd, false);"," anim._node = null;"," }"," }","};","","Y.Transition = Transition;","Y.TransitionNative = Transition; // TODO: remove","","/**"," * Animate one or more css properties to a given value. Requires the \"transition\" module."," * <pre>example usage:"," * Y.one('#demo').transition({"," * duration: 1, // in seconds, default is 0.5"," * easing: 'ease-out', // default is 'ease'"," * delay: '1', // delay start for 1 second, default is 0"," *"," * height: '10px',"," * width: '10px',"," *"," * opacity: { // per property"," * value: 0,"," * duration: 2,"," * delay: 2,"," * easing: 'ease-in'"," * }"," * });"," * </pre>"," * @for Node"," * @method transition"," * @param {Object} config An object containing one or more style properties, a duration and an easing."," * @param {Function} callback A function to run after the transition has completed."," * @chainable","*/","Y.Node.prototype.transition = function(name, config, callback) {"," var"," transitionAttrs = Transition._nodeAttrs[Y.stamp(this._node)],"," anim = (transitionAttrs) ? transitionAttrs.transition || null : null,"," fxConfig,"," prop;",""," if (typeof name === 'string') { // named effect, pull config from registry"," if (typeof config === 'function') {"," callback = config;"," config = null;"," }",""," 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 { // name is a config, config is a callback or undefined"," callback = config;"," config = name;"," }",""," if (anim && !anim._running) {"," anim.init(this, config);"," } else {"," anim = new Transition(this._node, config);"," }",""," anim.run(callback);"," return this;","};","","Y.Node.prototype.show = function(name, config, callback) {"," this._show(); // show prior to transition"," if (name && Y.Transition) {"," if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default"," if (typeof config === 'function') {"," callback = config;"," config = name;"," }"," name = Transition.SHOW_TRANSITION;"," }"," this.transition(name, config, callback);"," }"," return this;","};","","var _wrapCallBack = function(anim, fn, callback) {"," return function() {"," if (fn) {"," fn.call(anim);"," }"," 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;"," }",""," callback = _wrapCallBack(this, this._hide, callback); // wrap with existing callback"," if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default"," if (typeof config === 'function') {"," callback = config;"," config = name;"," }"," name = Transition.HIDE_TRANSITION;"," }"," this.transition(name, config, callback);"," } else {"," this._hide();"," }"," return this;","};","","/**"," * Animate one or more css properties to a given value. Requires the \"transition\" module."," * <pre>example usage:"," * Y.all('.demo').transition({"," * duration: 1, // in seconds, default is 0.5"," * easing: 'ease-out', // default is 'ease'"," * delay: '1', // delay start for 1 second, default is 0"," *"," * height: '10px',"," * width: '10px',"," *"," * opacity: { // per property"," * value: 0,"," * duration: 2,"," * delay: 2,"," * easing: 'ease-in'"," * }"," * });"," * </pre>"," * @for NodeList"," * @method transition"," * @param {Object} config An object containing one or more style properties, a duration and an easing."," * @param {Function} callback A function to run after the transition has completed. The callback fires"," * once per item in the NodeList."," * @chainable","*/","Y.NodeList.prototype.transition = function(config, callback) {"," var nodes = this._nodes,"," i = 0,"," node;",""," while ((node = nodes[i++])) {"," Y.one(node).transition(config, callback);"," }",""," return this;","};","","Y.Node.prototype.toggleView = function(name, on, callback) {"," this._toggles = this._toggles || [];"," callback = arguments[arguments.length - 1];",""," if (typeof name == 'boolean') { // no transition, just toggle"," on = name;"," name = null;"," }",""," name = name || Y.Transition.DEFAULT_TOGGLE;",""," if (typeof on == 'undefined' && name in this._toggles) { // reverse current toggle"," on = ! this._toggles[name];"," }",""," on = (on) ? 1 : 0;"," if (on) {"," this._show();"," } else {"," callback = _wrapCallBack(this, this._hide, callback);"," }",""," this._toggles[name] = on;"," this.transition(Y.Transition.toggles[name][on], callback);",""," return this;","};","","Y.NodeList.prototype.toggleView = function(name, on, callback) {"," var nodes = this._nodes,"," i = 0,"," node;",""," while ((node = nodes[i++])) {"," Y.one(node).toggleView(name, on, callback);"," }",""," 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') { // enable scrollHeight/Width"," this.setStyle('overflow', 'hidden');"," this._transitionOverflow = overflow;"," }"," },",""," end: function() {"," if (this._transitionOverflow) { // revert overridden value"," this.setStyle('overflow', this._transitionOverflow);"," delete this._transitionOverflow;"," }"," }"," }"," }","});","","Y.mix(Transition.toggles, {"," size: ['sizeOut', 'sizeIn'],"," fade: ['fadeOut', 'fadeIn']","});","","Transition.DEFAULT_TOGGLE = 'fade';","","","","}, '3.7.3', {\"requires\": [\"node-style\"]});"];36_yuitest_coverage["build/transition/transition.js"].lines = {"1":0,"11":0,"45":0,"48":0,"49":0,"50":0,"53":0,"56":0,"57":0,"58":0,"60":0,"61":0,"64":0,"67":0,"70":0,"71":0,"73":0,"75":0,"76":0,"77":0,"79":0,"80":0,"81":0,"82":0,"83":0,"85":0,"86":0,"87":0,"92":0,"93":0,"94":0,"95":0,"98":0,"99":0,"100":0,"101":0,"103":0,"104":0,"105":0,"107":0,"108":0,"110":0,"112":0,"114":0,"116":0,"118":0,"119":0,"120":0,"122":0,"124":0,"127":0,"128":0,"129":0,"130":0,"131":0,"133":0,"136":0,"139":0,"140":0,"141":0,"145":0,"149":0,"160":0,"161":0,"164":0,"167":0,"168":0,"169":0,"170":0,"171":0,"174":0,"175":0,"178":0,"180":0,"181":0,"185":0,"188":0,"191":0,"205":0,"206":0,"208":0,"209":0,"210":0,"219":0,"222":0,"223":0,"224":0,"230":0,"233":0,"234":0,"235":0,"238":0,"239":0,"240":0,"245":0,"246":0,"259":0,"268":0,"269":0,"271":0,"272":0,"275":0,"277":0,"278":0,"282":0,"286":0,"290":0,"292":0,"296":0,"314":0,"315":0,"316":0,"317":0,"318":0,"323":0,"324":0,"325":0,"326":0,"327":0,"328":0,"329":0,"330":0,"332":0,"333":0,"335":0,"340":0,"341":0,"342":0,"343":0,"346":0,"347":0,"348":0,"352":0,"357":0,"369":0,"370":0,"372":0,"373":0,"374":0,"375":0,"378":0,"379":0,"383":0,"384":0,"385":0,"393":0,"396":0,"397":0,"398":0,"399":0,"400":0,"405":0,"416":0,"417":0,"418":0,"419":0,"421":0,"428":0,"429":0,"432":0,"433":0,"434":0,"440":0,"443":0,"444":0,"445":0,"450":0,"451":0,"478":0,"479":0,"485":0,"486":0,"487":0,"488":0,"491":0,"493":0,"494":0,"496":0,"497":0,"498":0,"499":0,"504":0,"508":0,"509":0,"512":0,"513":0,"515":0,"518":0,"519":0,"522":0,"523":0,"524":0,"525":0,"526":0,"527":0,"528":0,"530":0,"532":0,"534":0,"537":0,"538":0,"539":0,"540":0,"542":0,"543":0,"548":0,"549":0,"550":0,"551":0,"552":0,"555":0,"556":0,"557":0,"558":0,"559":0,"561":0,"563":0,"565":0,"567":0,"596":0,"597":0,"601":0,"602":0,"605":0,"608":0,"609":0,"610":0,"612":0,"613":0,"614":0,"617":0,"619":0,"620":0,"623":0,"624":0,"625":0,"627":0,"630":0,"631":0,"633":0,"636":0,"637":0,"641":0,"642":0,"645":0,"648":0,"670":0,"673":0,"680":0,"681":0,"682":0,"683":0,"688":0,"689":0,"690":0,"697":0,"702":0};37_yuitest_coverage["build/transition/transition.js"].functions = {"Transition:44":0,"(anonymous 2):49":0,"_toCamel:48":0,"(anonymous 3):57":0,"_toHyphen:56":0,"(anonymous 4):79":0,"init:126":0,"(anonymous 5):209":0,"addProperty:148":0,"removeProperty:218":0,"initAttrs:229":0,"run:258":0,"_start:285":0,"_prepDur:289":0,"_runNative:295":0,"(anonymous 6):374":0,"(anonymous 7):384":0,"_end:356":0,"_endNative:392":0,"_onNativeEnd:404":0,"destroy:439":0,"transition:478":0,"show:522":0,"(anonymous 8):538":0,"_wrapCallBack:537":0,"hide:548":0,"transition:596":0,"toggleView:608":0,"toggleView:636":0,"height:669":0,"width:672":0,"start:679":0,"end:687":0,"(anonymous 1):1":0};38_yuitest_coverage["build/transition/transition.js"].coveredLines = 257;39_yuitest_coverage["build/transition/transition.js"].coveredFunctions = 34;40_yuitest_coverline("build/transition/transition.js", 1);41YUI.add('transition', function (Y, NAME) {42/**43* Provides the transition method for Node.44* Transition has no API of its own, but adds the transition method to Node.45*46* @module transition47* @requires node-style48*/49_yuitest_coverfunc("build/transition/transition.js", "(anonymous 1)", 1);50_yuitest_coverline("build/transition/transition.js", 11);51var CAMEL_VENDOR_PREFIX = '',52 VENDOR_PREFIX = '',53 DOCUMENT = Y.config.doc,54 DOCUMENT_ELEMENT = 'documentElement',55 TRANSITION = 'transition',56 TRANSITION_CAMEL = 'transition',57 TRANSITION_PROPERTY_CAMEL = 'transitionProperty',58 TRANSFORM_CAMEL = 'transform',59 TRANSITION_PROPERTY,60 TRANSITION_DURATION,61 TRANSITION_TIMING_FUNCTION,62 TRANSITION_DELAY,63 TRANSITION_END,64 ON_TRANSITION_END,65 EMPTY_OBJ = {},66 VENDORS = [67 'Webkit',68 'Moz'69 ],70 VENDOR_TRANSITION_END = {71 Webkit: 'webkitTransitionEnd'72 },73/**74 * A class for constructing transition instances.75 * Adds the "transition" method to Node.76 * @class Transition77 * @constructor78 */79Transition = function() {80 _yuitest_coverfunc("build/transition/transition.js", "Transition", 44);81_yuitest_coverline("build/transition/transition.js", 45);82this.init.apply(this, arguments);83};84_yuitest_coverline("build/transition/transition.js", 48);85Transition._toCamel = function(property) {86 _yuitest_coverfunc("build/transition/transition.js", "_toCamel", 48);87_yuitest_coverline("build/transition/transition.js", 49);88property = property.replace(/-([a-z])/gi, function(m0, m1) {89 _yuitest_coverfunc("build/transition/transition.js", "(anonymous 2)", 49);90_yuitest_coverline("build/transition/transition.js", 50);91return m1.toUpperCase();92 });93 _yuitest_coverline("build/transition/transition.js", 53);94return property;95};96_yuitest_coverline("build/transition/transition.js", 56);97Transition._toHyphen = function(property) {98 _yuitest_coverfunc("build/transition/transition.js", "_toHyphen", 56);99_yuitest_coverline("build/transition/transition.js", 57);100property = property.replace(/([A-Z]?)([a-z]+)([A-Z]?)/g, function(m0, m1, m2, m3) {101 _yuitest_coverfunc("build/transition/transition.js", "(anonymous 3)", 57);102_yuitest_coverline("build/transition/transition.js", 58);103var str = ((m1) ? '-' + m1.toLowerCase() : '') + m2;104 _yuitest_coverline("build/transition/transition.js", 60);105if (m3) {106 _yuitest_coverline("build/transition/transition.js", 61);107str += '-' + m3.toLowerCase();108 }109 _yuitest_coverline("build/transition/transition.js", 64);110return str;111 });112 _yuitest_coverline("build/transition/transition.js", 67);113return property;114};115_yuitest_coverline("build/transition/transition.js", 70);116Transition.SHOW_TRANSITION = 'fadeIn';117_yuitest_coverline("build/transition/transition.js", 71);118Transition.HIDE_TRANSITION = 'fadeOut';119_yuitest_coverline("build/transition/transition.js", 73);120Transition.useNative = false;121_yuitest_coverline("build/transition/transition.js", 75);122if ('transition' in DOCUMENT[DOCUMENT_ELEMENT].style) {123 _yuitest_coverline("build/transition/transition.js", 76);124Transition.useNative = true;125 _yuitest_coverline("build/transition/transition.js", 77);126Transition.supported = true; // TODO: remove127} else {128 _yuitest_coverline("build/transition/transition.js", 79);129Y.Array.each(VENDORS, function(val) { // then vendor specific130 _yuitest_coverfunc("build/transition/transition.js", "(anonymous 4)", 79);131_yuitest_coverline("build/transition/transition.js", 80);132var property = val + 'Transition';133 _yuitest_coverline("build/transition/transition.js", 81);134if (property in DOCUMENT[DOCUMENT_ELEMENT].style) {135 _yuitest_coverline("build/transition/transition.js", 82);136CAMEL_VENDOR_PREFIX = val;137 _yuitest_coverline("build/transition/transition.js", 83);138VENDOR_PREFIX = Transition._toHyphen(val) + '-';139 _yuitest_coverline("build/transition/transition.js", 85);140Transition.useNative = true;141 _yuitest_coverline("build/transition/transition.js", 86);142Transition.supported = true; // TODO: remove143 _yuitest_coverline("build/transition/transition.js", 87);144Transition._VENDOR_PREFIX = val;145 }146 });147}148_yuitest_coverline("build/transition/transition.js", 92);149if (CAMEL_VENDOR_PREFIX) {150 _yuitest_coverline("build/transition/transition.js", 93);151TRANSITION_CAMEL = CAMEL_VENDOR_PREFIX + 'Transition';152 _yuitest_coverline("build/transition/transition.js", 94);153TRANSITION_PROPERTY_CAMEL = CAMEL_VENDOR_PREFIX + 'TransitionProperty';154 _yuitest_coverline("build/transition/transition.js", 95);155TRANSFORM_CAMEL = CAMEL_VENDOR_PREFIX + 'Transform';156}157_yuitest_coverline("build/transition/transition.js", 98);158TRANSITION_PROPERTY = VENDOR_PREFIX + 'transition-property';159_yuitest_coverline("build/transition/transition.js", 99);160TRANSITION_DURATION = VENDOR_PREFIX + 'transition-duration';161_yuitest_coverline("build/transition/transition.js", 100);162TRANSITION_TIMING_FUNCTION = VENDOR_PREFIX + 'transition-timing-function';163_yuitest_coverline("build/transition/transition.js", 101);164TRANSITION_DELAY = VENDOR_PREFIX + 'transition-delay';165_yuitest_coverline("build/transition/transition.js", 103);166TRANSITION_END = 'transitionend';167_yuitest_coverline("build/transition/transition.js", 104);168ON_TRANSITION_END = 'on' + CAMEL_VENDOR_PREFIX.toLowerCase() + 'transitionend';169_yuitest_coverline("build/transition/transition.js", 105);170TRANSITION_END = VENDOR_TRANSITION_END[CAMEL_VENDOR_PREFIX] || TRANSITION_END;171_yuitest_coverline("build/transition/transition.js", 107);172Transition.fx = {};173_yuitest_coverline("build/transition/transition.js", 108);174Transition.toggles = {};175_yuitest_coverline("build/transition/transition.js", 110);176Transition._hasEnd = {};177_yuitest_coverline("build/transition/transition.js", 112);178Transition._reKeywords = /^(?:node|duration|iterations|easing|delay|on|onstart|onend)$/i;179_yuitest_coverline("build/transition/transition.js", 114);180Y.Node.DOM_EVENTS[TRANSITION_END] = 1;181_yuitest_coverline("build/transition/transition.js", 116);182Transition.NAME = 'transition';183_yuitest_coverline("build/transition/transition.js", 118);184Transition.DEFAULT_EASING = 'ease';185_yuitest_coverline("build/transition/transition.js", 119);186Transition.DEFAULT_DURATION = 0.5;187_yuitest_coverline("build/transition/transition.js", 120);188Transition.DEFAULT_DELAY = 0;189_yuitest_coverline("build/transition/transition.js", 122);190Transition._nodeAttrs = {};191_yuitest_coverline("build/transition/transition.js", 124);192Transition.prototype = {193 constructor: Transition,194 init: function(node, config) {195 _yuitest_coverfunc("build/transition/transition.js", "init", 126);196_yuitest_coverline("build/transition/transition.js", 127);197var anim = this;198 _yuitest_coverline("build/transition/transition.js", 128);199anim._node = node;200 _yuitest_coverline("build/transition/transition.js", 129);201if (!anim._running && config) {202 _yuitest_coverline("build/transition/transition.js", 130);203anim._config = config;204 _yuitest_coverline("build/transition/transition.js", 131);205node._transition = anim; // cache for reuse206 _yuitest_coverline("build/transition/transition.js", 133);207anim._duration = ('duration' in config) ?208 config.duration: anim.constructor.DEFAULT_DURATION;209 _yuitest_coverline("build/transition/transition.js", 136);210anim._delay = ('delay' in config) ?211 config.delay: anim.constructor.DEFAULT_DELAY;212 _yuitest_coverline("build/transition/transition.js", 139);213anim._easing = config.easing || anim.constructor.DEFAULT_EASING;214 _yuitest_coverline("build/transition/transition.js", 140);215anim._count = 0; // track number of animated properties216 _yuitest_coverline("build/transition/transition.js", 141);217anim._running = false;218 }219 _yuitest_coverline("build/transition/transition.js", 145);220return anim;221 },222 addProperty: function(prop, config) {223 _yuitest_coverfunc("build/transition/transition.js", "addProperty", 148);224_yuitest_coverline("build/transition/transition.js", 149);225var anim = this,226 node = this._node,227 uid = Y.stamp(node),228 nodeInstance = Y.one(node),229 attrs = Transition._nodeAttrs[uid],230 computed,231 compareVal,232 dur,233 attr,234 val;235 _yuitest_coverline("build/transition/transition.js", 160);236if (!attrs) {237 _yuitest_coverline("build/transition/transition.js", 161);238attrs = Transition._nodeAttrs[uid] = {};239 }240 _yuitest_coverline("build/transition/transition.js", 164);241attr = attrs[prop];242 // might just be a value243 _yuitest_coverline("build/transition/transition.js", 167);244if (config && config.value !== undefined) {245 _yuitest_coverline("build/transition/transition.js", 168);246val = config.value;247 } else {_yuitest_coverline("build/transition/transition.js", 169);248if (config !== undefined) {249 _yuitest_coverline("build/transition/transition.js", 170);250val = config;251 _yuitest_coverline("build/transition/transition.js", 171);252config = EMPTY_OBJ;253 }}254 _yuitest_coverline("build/transition/transition.js", 174);255if (typeof val === 'function') {256 _yuitest_coverline("build/transition/transition.js", 175);257val = val.call(nodeInstance, nodeInstance);258 }259 _yuitest_coverline("build/transition/transition.js", 178);260if (attr && attr.transition) {261 // take control if another transition owns this property262 _yuitest_coverline("build/transition/transition.js", 180);263if (attr.transition !== anim) {264 _yuitest_coverline("build/transition/transition.js", 181);265attr.transition._count--; // remapping attr to this transition266 }267 }268 _yuitest_coverline("build/transition/transition.js", 185);269anim._count++; // properties per transition270 // make 0 async and fire events271 _yuitest_coverline("build/transition/transition.js", 188);272dur = ((typeof config.duration != 'undefined') ? config.duration :273 anim._duration) || 0.0001;274 _yuitest_coverline("build/transition/transition.js", 191);275attrs[prop] = {276 value: val,277 duration: dur,278 delay: (typeof config.delay != 'undefined') ? config.delay :279 anim._delay,280 easing: config.easing || anim._easing,281 transition: anim282 };283 // native end event doesnt fire when setting to same value284 // supplementing with timer285 // val may be a string or number (height: 0, etc), but computedStyle is always string286 _yuitest_coverline("build/transition/transition.js", 205);287computed = Y.DOM.getComputedStyle(node, prop);288 _yuitest_coverline("build/transition/transition.js", 206);289compareVal = (typeof val === 'string') ? computed : parseFloat(computed);290 _yuitest_coverline("build/transition/transition.js", 208);291if (Transition.useNative && compareVal === val) {292 _yuitest_coverline("build/transition/transition.js", 209);293setTimeout(function() {294 _yuitest_coverfunc("build/transition/transition.js", "(anonymous 5)", 209);295_yuitest_coverline("build/transition/transition.js", 210);296anim._onNativeEnd.call(node, {297 propertyName: prop,298 elapsedTime: dur299 });300 }, dur * 1000);301 }302 },303 removeProperty: function(prop) {304 _yuitest_coverfunc("build/transition/transition.js", "removeProperty", 218);305_yuitest_coverline("build/transition/transition.js", 219);306var anim = this,307 attrs = Transition._nodeAttrs[Y.stamp(anim._node)];308 _yuitest_coverline("build/transition/transition.js", 222);309if (attrs && attrs[prop]) {310 _yuitest_coverline("build/transition/transition.js", 223);311delete attrs[prop];312 _yuitest_coverline("build/transition/transition.js", 224);313anim._count--;314 }315 },316 initAttrs: function(config) {317 _yuitest_coverfunc("build/transition/transition.js", "initAttrs", 229);318_yuitest_coverline("build/transition/transition.js", 230);319var attr,320 node = this._node;321 _yuitest_coverline("build/transition/transition.js", 233);322if (config.transform && !config[TRANSFORM_CAMEL]) {323 _yuitest_coverline("build/transition/transition.js", 234);324config[TRANSFORM_CAMEL] = config.transform;325 _yuitest_coverline("build/transition/transition.js", 235);326delete config.transform; // TODO: copy327 }328 _yuitest_coverline("build/transition/transition.js", 238);329for (attr in config) {330 _yuitest_coverline("build/transition/transition.js", 239);331if (config.hasOwnProperty(attr) && !Transition._reKeywords.test(attr)) {332 _yuitest_coverline("build/transition/transition.js", 240);333this.addProperty(attr, config[attr]);334 // when size is auto or % webkit starts from zero instead of computed335 // (https://bugs.webkit.org/show_bug.cgi?id=16020)336 // TODO: selective set337 _yuitest_coverline("build/transition/transition.js", 245);338if (node.style[attr] === '') {339 _yuitest_coverline("build/transition/transition.js", 246);340Y.DOM.setStyle(node, attr, Y.DOM.getComputedStyle(node, attr));341 }342 }343 }344 },345 /**346 * Starts or an animation.347 * @method run348 * @chainable349 * @private350 */351 run: function(callback) {352 _yuitest_coverfunc("build/transition/transition.js", "run", 258);353_yuitest_coverline("build/transition/transition.js", 259);354var anim = this,355 node = anim._node,356 config = anim._config,357 data = {358 type: 'transition:start',359 config: config360 };361 _yuitest_coverline("build/transition/transition.js", 268);362if (!anim._running) {363 _yuitest_coverline("build/transition/transition.js", 269);364anim._running = true;365 _yuitest_coverline("build/transition/transition.js", 271);366if (config.on && config.on.start) {367 _yuitest_coverline("build/transition/transition.js", 272);368config.on.start.call(Y.one(node), data);369 }370 _yuitest_coverline("build/transition/transition.js", 275);371anim.initAttrs(anim._config);372 _yuitest_coverline("build/transition/transition.js", 277);373anim._callback = callback;374 _yuitest_coverline("build/transition/transition.js", 278);375anim._start();376 }377 _yuitest_coverline("build/transition/transition.js", 282);378return anim;379 },380 _start: function() {381 _yuitest_coverfunc("build/transition/transition.js", "_start", 285);382_yuitest_coverline("build/transition/transition.js", 286);383this._runNative();384 },385 _prepDur: function(dur) {386 _yuitest_coverfunc("build/transition/transition.js", "_prepDur", 289);387_yuitest_coverline("build/transition/transition.js", 290);388dur = parseFloat(dur) * 1000;389 _yuitest_coverline("build/transition/transition.js", 292);390return dur + 'ms';391 },392 _runNative: function(time) {393 _yuitest_coverfunc("build/transition/transition.js", "_runNative", 295);394_yuitest_coverline("build/transition/transition.js", 296);395var anim = this,396 node = anim._node,397 uid = Y.stamp(node),398 style = node.style,399 computed = node.ownerDocument.defaultView.getComputedStyle(node),400 attrs = Transition._nodeAttrs[uid],401 cssText = '',402 cssTransition = computed[Transition._toCamel(TRANSITION_PROPERTY)],403 transitionText = TRANSITION_PROPERTY + ': ',404 duration = TRANSITION_DURATION + ': ',405 easing = TRANSITION_TIMING_FUNCTION + ': ',406 delay = TRANSITION_DELAY + ': ',407 hyphy,408 attr,409 name;410 // preserve existing transitions411 _yuitest_coverline("build/transition/transition.js", 314);412if (cssTransition !== 'all') {413 _yuitest_coverline("build/transition/transition.js", 315);414transitionText += cssTransition + ',';415 _yuitest_coverline("build/transition/transition.js", 316);416duration += computed[Transition._toCamel(TRANSITION_DURATION)] + ',';417 _yuitest_coverline("build/transition/transition.js", 317);418easing += computed[Transition._toCamel(TRANSITION_TIMING_FUNCTION)] + ',';419 _yuitest_coverline("build/transition/transition.js", 318);420delay += computed[Transition._toCamel(TRANSITION_DELAY)] + ',';421 }422 // run transitions mapped to this instance423 _yuitest_coverline("build/transition/transition.js", 323);424for (name in attrs) {425 _yuitest_coverline("build/transition/transition.js", 324);426hyphy = Transition._toHyphen(name);427 _yuitest_coverline("build/transition/transition.js", 325);428attr = attrs[name];429 _yuitest_coverline("build/transition/transition.js", 326);430if ((attr = attrs[name]) && attr.transition === anim) {431 _yuitest_coverline("build/transition/transition.js", 327);432if (name in node.style) { // only native styles allowed433 _yuitest_coverline("build/transition/transition.js", 328);434duration += anim._prepDur(attr.duration) + ',';435 _yuitest_coverline("build/transition/transition.js", 329);436delay += anim._prepDur(attr.delay) + ',';437 _yuitest_coverline("build/transition/transition.js", 330);438easing += (attr.easing) + ',';439 _yuitest_coverline("build/transition/transition.js", 332);440transitionText += hyphy + ',';441 _yuitest_coverline("build/transition/transition.js", 333);442cssText += hyphy + ': ' + attr.value + '; ';443 } else {444 _yuitest_coverline("build/transition/transition.js", 335);445this.removeProperty(name);446 }447 }448 }449 _yuitest_coverline("build/transition/transition.js", 340);450transitionText = transitionText.replace(/,$/, ';');451 _yuitest_coverline("build/transition/transition.js", 341);452duration = duration.replace(/,$/, ';');453 _yuitest_coverline("build/transition/transition.js", 342);454easing = easing.replace(/,$/, ';');455 _yuitest_coverline("build/transition/transition.js", 343);456delay = delay.replace(/,$/, ';');457 // only one native end event per node458 _yuitest_coverline("build/transition/transition.js", 346);459if (!Transition._hasEnd[uid]) {460 _yuitest_coverline("build/transition/transition.js", 347);461node.addEventListener(TRANSITION_END, anim._onNativeEnd, '');462 _yuitest_coverline("build/transition/transition.js", 348);463Transition._hasEnd[uid] = true;464 }465 _yuitest_coverline("build/transition/transition.js", 352);466style.cssText += transitionText + duration + easing + delay + cssText;467 },468 _end: function(elapsed) {469 _yuitest_coverfunc("build/transition/transition.js", "_end", 356);470_yuitest_coverline("build/transition/transition.js", 357);471var anim = this,472 node = anim._node,473 callback = anim._callback,474 config = anim._config,475 data = {476 type: 'transition:end',477 config: config,478 elapsedTime: elapsed479 },480 nodeInstance = Y.one(node);481 _yuitest_coverline("build/transition/transition.js", 369);482anim._running = false;483 _yuitest_coverline("build/transition/transition.js", 370);484anim._callback = null;485 _yuitest_coverline("build/transition/transition.js", 372);486if (node) {487 _yuitest_coverline("build/transition/transition.js", 373);488if (config.on && config.on.end) {489 _yuitest_coverline("build/transition/transition.js", 374);490setTimeout(function() { // IE: allow previous update to finish491 _yuitest_coverfunc("build/transition/transition.js", "(anonymous 6)", 374);492_yuitest_coverline("build/transition/transition.js", 375);493config.on.end.call(nodeInstance, data);494 // nested to ensure proper fire order495 _yuitest_coverline("build/transition/transition.js", 378);496if (callback) {497 _yuitest_coverline("build/transition/transition.js", 379);498callback.call(nodeInstance, data);499 }500 }, 1);501 } else {_yuitest_coverline("build/transition/transition.js", 383);502if (callback) {503 _yuitest_coverline("build/transition/transition.js", 384);504setTimeout(function() { // IE: allow previous update to finish505 _yuitest_coverfunc("build/transition/transition.js", "(anonymous 7)", 384);506_yuitest_coverline("build/transition/transition.js", 385);507callback.call(nodeInstance, data);508 }, 1);509 }}510 }511 },512 _endNative: function(name) {513 _yuitest_coverfunc("build/transition/transition.js", "_endNative", 392);514_yuitest_coverline("build/transition/transition.js", 393);515var node = this._node,516 value = node.ownerDocument.defaultView.getComputedStyle(node, '')[Transition._toCamel(TRANSITION_PROPERTY)];517 _yuitest_coverline("build/transition/transition.js", 396);518name = Transition._toHyphen(name);519 _yuitest_coverline("build/transition/transition.js", 397);520if (typeof value === 'string') {521 _yuitest_coverline("build/transition/transition.js", 398);522value = value.replace(new RegExp('(?:^|,\\s)' + name + ',?'), ',');523 _yuitest_coverline("build/transition/transition.js", 399);524value = value.replace(/^,|,$/, '');525 _yuitest_coverline("build/transition/transition.js", 400);526node.style[TRANSITION_CAMEL] = value;527 }528 },529 _onNativeEnd: function(e) {530 _yuitest_coverfunc("build/transition/transition.js", "_onNativeEnd", 404);531_yuitest_coverline("build/transition/transition.js", 405);532var node = this,533 uid = Y.stamp(node),534 event = e,//e._event,535 name = Transition._toCamel(event.propertyName),536 elapsed = event.elapsedTime,537 attrs = Transition._nodeAttrs[uid],538 attr = attrs[name],539 anim = (attr) ? attr.transition : null,540 data,541 config;542 _yuitest_coverline("build/transition/transition.js", 416);543if (anim) {544 _yuitest_coverline("build/transition/transition.js", 417);545anim.removeProperty(name);546 _yuitest_coverline("build/transition/transition.js", 418);547anim._endNative(name);548 _yuitest_coverline("build/transition/transition.js", 419);549config = anim._config[name];550 _yuitest_coverline("build/transition/transition.js", 421);551data = {552 type: 'propertyEnd',553 propertyName: name,554 elapsedTime: elapsed,555 config: config556 };557 _yuitest_coverline("build/transition/transition.js", 428);558if (config && config.on && config.on.end) {559 _yuitest_coverline("build/transition/transition.js", 429);560config.on.end.call(Y.one(node), data);561 }562 _yuitest_coverline("build/transition/transition.js", 432);563if (anim._count <= 0) { // after propertyEnd fires564 _yuitest_coverline("build/transition/transition.js", 433);565anim._end(elapsed);566 _yuitest_coverline("build/transition/transition.js", 434);567node.style[TRANSITION_PROPERTY_CAMEL] = ''; // clean up style568 }569 }570 },571 destroy: function() {572 _yuitest_coverfunc("build/transition/transition.js", "destroy", 439);573_yuitest_coverline("build/transition/transition.js", 440);574var anim = this,575 node = anim._node;576 _yuitest_coverline("build/transition/transition.js", 443);577if (node) {578 _yuitest_coverline("build/transition/transition.js", 444);579node.removeEventListener(TRANSITION_END, anim._onNativeEnd, false);580 _yuitest_coverline("build/transition/transition.js", 445);581anim._node = null;582 }583 }584};585_yuitest_coverline("build/transition/transition.js", 450);586Y.Transition = Transition;587_yuitest_coverline("build/transition/transition.js", 451);588Y.TransitionNative = Transition; // TODO: remove589/**590 * Animate one or more css properties to a given value. Requires the "transition" module.591 * <pre>example usage:592 * Y.one('#demo').transition({593 * duration: 1, // in seconds, default is 0.5594 * easing: 'ease-out', // default is 'ease'595 * delay: '1', // delay start for 1 second, default is 0596 *597 * height: '10px',598 * width: '10px',599 *600 * opacity: { // per property601 * value: 0,602 * duration: 2,603 * delay: 2,604 * easing: 'ease-in'605 * }606 * });607 * </pre>608 * @for Node609 * @method transition610 * @param {Object} config An object containing one or more style properties, a duration and an easing.611 * @param {Function} callback A function to run after the transition has completed.612 * @chainable613*/614_yuitest_coverline("build/transition/transition.js", 478);615Y.Node.prototype.transition = function(name, config, callback) {616 _yuitest_coverfunc("build/transition/transition.js", "transition", 478);617_yuitest_coverline("build/transition/transition.js", 479);618var619 transitionAttrs = Transition._nodeAttrs[Y.stamp(this._node)],620 anim = (transitionAttrs) ? transitionAttrs.transition || null : null,621 fxConfig,622 prop;623 _yuitest_coverline("build/transition/transition.js", 485);624if (typeof name === 'string') { // named effect, pull config from registry625 _yuitest_coverline("build/transition/transition.js", 486);626if (typeof config === 'function') {627 _yuitest_coverline("build/transition/transition.js", 487);628callback = config;629 _yuitest_coverline("build/transition/transition.js", 488);630config = null;631 }632 _yuitest_coverline("build/transition/transition.js", 491);633fxConfig = Transition.fx[name];634 _yuitest_coverline("build/transition/transition.js", 493);635if (config && typeof config !== 'boolean') {636 _yuitest_coverline("build/transition/transition.js", 494);637config = Y.clone(config);638 _yuitest_coverline("build/transition/transition.js", 496);639for (prop in fxConfig) {640 _yuitest_coverline("build/transition/transition.js", 497);641if (fxConfig.hasOwnProperty(prop)) {642 _yuitest_coverline("build/transition/transition.js", 498);643if (! (prop in config)) {644 _yuitest_coverline("build/transition/transition.js", 499);645config[prop] = fxConfig[prop];646 }647 }648 }649 } else {650 _yuitest_coverline("build/transition/transition.js", 504);651config = fxConfig;652 }653 } else { // name is a config, config is a callback or undefined654 _yuitest_coverline("build/transition/transition.js", 508);655callback = config;656 _yuitest_coverline("build/transition/transition.js", 509);657config = name;658 }659 _yuitest_coverline("build/transition/transition.js", 512);660if (anim && !anim._running) {661 _yuitest_coverline("build/transition/transition.js", 513);662anim.init(this, config);663 } else {664 _yuitest_coverline("build/transition/transition.js", 515);665anim = new Transition(this._node, config);666 }667 _yuitest_coverline("build/transition/transition.js", 518);668anim.run(callback);669 _yuitest_coverline("build/transition/transition.js", 519);670return this;671};672_yuitest_coverline("build/transition/transition.js", 522);673Y.Node.prototype.show = function(name, config, callback) {674 _yuitest_coverfunc("build/transition/transition.js", "show", 522);675_yuitest_coverline("build/transition/transition.js", 523);676this._show(); // show prior to transition677 _yuitest_coverline("build/transition/transition.js", 524);678if (name && Y.Transition) {679 _yuitest_coverline("build/transition/transition.js", 525);680if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default681 _yuitest_coverline("build/transition/transition.js", 526);682if (typeof config === 'function') {683 _yuitest_coverline("build/transition/transition.js", 527);684callback = config;685 _yuitest_coverline("build/transition/transition.js", 528);686config = name;687 }688 _yuitest_coverline("build/transition/transition.js", 530);689name = Transition.SHOW_TRANSITION;690 }691 _yuitest_coverline("build/transition/transition.js", 532);692this.transition(name, config, callback);693 }694 _yuitest_coverline("build/transition/transition.js", 534);695return this;696};697_yuitest_coverline("build/transition/transition.js", 537);698var _wrapCallBack = function(anim, fn, callback) {699 _yuitest_coverfunc("build/transition/transition.js", "_wrapCallBack", 537);700_yuitest_coverline("build/transition/transition.js", 538);701return function() {702 _yuitest_coverfunc("build/transition/transition.js", "(anonymous 8)", 538);703_yuitest_coverline("build/transition/transition.js", 539);704if (fn) {705 _yuitest_coverline("build/transition/transition.js", 540);706fn.call(anim);707 }708 _yuitest_coverline("build/transition/transition.js", 542);709if (callback) {710 _yuitest_coverline("build/transition/transition.js", 543);711callback.apply(anim._node, arguments);712 }713 };714};715_yuitest_coverline("build/transition/transition.js", 548);716Y.Node.prototype.hide = function(name, config, callback) {717 _yuitest_coverfunc("build/transition/transition.js", "hide", 548);718_yuitest_coverline("build/transition/transition.js", 549);719if (name && Y.Transition) {720 _yuitest_coverline("build/transition/transition.js", 550);721if (typeof config === 'function') {722 _yuitest_coverline("build/transition/transition.js", 551);723callback = config;724 _yuitest_coverline("build/transition/transition.js", 552);725config = null;726 }727 _yuitest_coverline("build/transition/transition.js", 555);728callback = _wrapCallBack(this, this._hide, callback); // wrap with existing callback729 _yuitest_coverline("build/transition/transition.js", 556);730if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default731 _yuitest_coverline("build/transition/transition.js", 557);732if (typeof config === 'function') {733 _yuitest_coverline("build/transition/transition.js", 558);734callback = config;735 _yuitest_coverline("build/transition/transition.js", 559);736config = name;737 }738 _yuitest_coverline("build/transition/transition.js", 561);739name = Transition.HIDE_TRANSITION;740 }741 _yuitest_coverline("build/transition/transition.js", 563);742this.transition(name, config, callback);743 } else {744 _yuitest_coverline("build/transition/transition.js", 565);745this._hide();746 }747 _yuitest_coverline("build/transition/transition.js", 567);748return this;749};750/**751 * Animate one or more css properties to a given value. Requires the "transition" module.752 * <pre>example usage:753 * Y.all('.demo').transition({754 * duration: 1, // in seconds, default is 0.5755 * easing: 'ease-out', // default is 'ease'756 * delay: '1', // delay start for 1 second, default is 0757 *758 * height: '10px',759 * width: '10px',760 *761 * opacity: { // per property762 * value: 0,763 * duration: 2,764 * delay: 2,765 * easing: 'ease-in'766 * }767 * });768 * </pre>769 * @for NodeList770 * @method transition771 * @param {Object} config An object containing one or more style properties, a duration and an easing.772 * @param {Function} callback A function to run after the transition has completed. The callback fires773 * once per item in the NodeList.774 * @chainable775*/776_yuitest_coverline("build/transition/transition.js", 596);777Y.NodeList.prototype.transition = function(config, callback) {778 _yuitest_coverfunc("build/transition/transition.js", "transition", 596);779_yuitest_coverline("build/transition/transition.js", 597);780var nodes = this._nodes,781 i = 0,782 node;783 _yuitest_coverline("build/transition/transition.js", 601);784while ((node = nodes[i++])) {785 _yuitest_coverline("build/transition/transition.js", 602);786Y.one(node).transition(config, callback);787 }788 _yuitest_coverline("build/transition/transition.js", 605);789return this;790};791_yuitest_coverline("build/transition/transition.js", 608);792Y.Node.prototype.toggleView = function(name, on, callback) {793 _yuitest_coverfunc("build/transition/transition.js", "toggleView", 608);794_yuitest_coverline("build/transition/transition.js", 609);795this._toggles = this._toggles || [];796 _yuitest_coverline("build/transition/transition.js", 610);797callback = arguments[arguments.length - 1];798 _yuitest_coverline("build/transition/transition.js", 612);799if (typeof name == 'boolean') { // no transition, just toggle800 _yuitest_coverline("build/transition/transition.js", 613);801on = name;802 _yuitest_coverline("build/transition/transition.js", 614);803name = null;804 }805 _yuitest_coverline("build/transition/transition.js", 617);806name = name || Y.Transition.DEFAULT_TOGGLE;807 _yuitest_coverline("build/transition/transition.js", 619);808if (typeof on == 'undefined' && name in this._toggles) { // reverse current toggle809 _yuitest_coverline("build/transition/transition.js", 620);810on = ! this._toggles[name];811 }812 _yuitest_coverline("build/transition/transition.js", 623);813on = (on) ? 1 : 0;814 _yuitest_coverline("build/transition/transition.js", 624);815if (on) {816 _yuitest_coverline("build/transition/transition.js", 625);817this._show();818 } else {819 _yuitest_coverline("build/transition/transition.js", 627);820callback = _wrapCallBack(this, this._hide, callback);821 }822 _yuitest_coverline("build/transition/transition.js", 630);823this._toggles[name] = on;824 _yuitest_coverline("build/transition/transition.js", 631);825this.transition(Y.Transition.toggles[name][on], callback);826 _yuitest_coverline("build/transition/transition.js", 633);827return this;828};829_yuitest_coverline("build/transition/transition.js", 636);830Y.NodeList.prototype.toggleView = function(name, on, callback) {831 _yuitest_coverfunc("build/transition/transition.js", "toggleView", 636);832_yuitest_coverline("build/transition/transition.js", 637);833var nodes = this._nodes,834 i = 0,835 node;836 _yuitest_coverline("build/transition/transition.js", 641);837while ((node = nodes[i++])) {838 _yuitest_coverline("build/transition/transition.js", 642);839Y.one(node).toggleView(name, on, callback);...
transition-debug.js
Source:transition-debug.js
...380Y.TransitionNative = Transition; // TODO: remove381/**382 * Animate one or more css properties to a given value. Requires the "transition" module.383 * <pre>example usage:384 * Y.one('#demo').transition({385 * duration: 1, // in seconds, default is 0.5386 * easing: 'ease-out', // default is 'ease'387 * delay: '1', // delay start for 1 second, default is 0388 *389 * height: '10px',390 * width: '10px',391 *392 * opacity: { // per property393 * value: 0,394 * duration: 2,395 * delay: 2,396 * easing: 'ease-in'397 * }398 * });399 * </pre>400 * @for Node401 * @method transition402 * @param {Object} config An object containing one or more style properties, a duration and an easing.403 * @param {Function} callback A function to run after the transition has completed.404 * @chainable405*/406Y.Node.prototype.transition = function(name, config, callback) {407 var408 transitionAttrs = Transition._nodeAttrs[Y.stamp(this._node)],409 anim = (transitionAttrs) ? transitionAttrs.transition || null : null,410 fxConfig,411 prop;412 if (typeof name === 'string') { // named effect, pull config from registry413 if (typeof config === 'function') {414 callback = config;415 config = null;416 }417 fxConfig = Transition.fx[name];418 if (config && typeof config === 'object') {419 config = Y.clone(config);420 for (prop in fxConfig) {421 if (fxConfig.hasOwnProperty(prop)) {422 if (! (prop in config)) {423 config[prop] = fxConfig[prop];424 }425 }426 }427 } else {428 config = fxConfig;429 }430 } else { // name is a config, config is a callback or undefined431 callback = config;432 config = name;433 }434 if (anim && !anim._running) {435 anim.init(this, config);436 } else {437 anim = new Transition(this._node, config);438 }439 anim.run(callback);440 return this;441};442Y.Node.prototype.show = function(name, config, callback) {443 this._show(); // show prior to transition444 if (name && Y.Transition) {445 if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default446 if (typeof config === 'function') {447 callback = config;448 config = name;449 }450 name = Transition.SHOW_TRANSITION;451 }452 this.transition(name, config, callback);453 }454 else if (name && !Y.Transition) { Y.log('unable to transition show; missing transition module', 'warn', 'node'); }455 return this;456};457Y.NodeList.prototype.show = function(name, config, callback) {458 var nodes = this._nodes,459 i = 0,460 node;461 while ((node = nodes[i++])) {462 Y.one(node).show(name, config, callback);463 }464 return this;465};466var _wrapCallBack = function(anim, fn, callback) {467 return function() {468 if (fn) {469 fn.call(anim);470 }471 if (callback && typeof callback === 'function') {472 callback.apply(anim._node, arguments);473 }474 };475};476Y.Node.prototype.hide = function(name, config, callback) {477 if (name && Y.Transition) {478 if (typeof config === 'function') {479 callback = config;480 config = null;481 }482 callback = _wrapCallBack(this, this._hide, callback); // wrap with existing callback483 if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default484 if (typeof config === 'function') {485 callback = config;486 config = name;487 }488 name = Transition.HIDE_TRANSITION;489 }490 this.transition(name, config, callback);491 } else if (name && !Y.Transition) { Y.log('unable to transition hide; missing transition module', 'warn', 'node');492 } else {493 this._hide();494 }495 return this;496};497Y.NodeList.prototype.hide = function(name, config, callback) {498 var nodes = this._nodes,499 i = 0,500 node;501 while ((node = nodes[i++])) {502 Y.one(node).hide(name, config, callback);503 }504 return this;505};506/**507 * Animate one or more css properties to a given value. Requires the "transition" module.508 * <pre>example usage:509 * Y.all('.demo').transition({510 * duration: 1, // in seconds, default is 0.5511 * easing: 'ease-out', // default is 'ease'512 * delay: '1', // delay start for 1 second, default is 0513 *514 * height: '10px',515 * width: '10px',516 *517 * opacity: { // per property518 * value: 0,519 * duration: 2,520 * delay: 2,521 * easing: 'ease-in'522 * }523 * });524 * </pre>525 * @for NodeList526 * @method transition527 * @param {Object} config An object containing one or more style properties, a duration and an easing.528 * @param {Function} callback A function to run after the transition has completed. The callback fires529 * once per item in the NodeList.530 * @param {Boolean} callbackOnce If true, the callback will be called only after the531 * last transition has completed532 * @chainable533*/534Y.NodeList.prototype.transition = function(config, callback, callbackOnce) {535 var nodes = this._nodes,536 size = this.size(),537 i = 0,538 callbackOnce = callbackOnce === true,539 node;540 while ((node = nodes[i++])) {541 if (i < size && callbackOnce){542 Y.one(node).transition(config);543 } else {544 Y.one(node).transition(config, callback);545 }546 }547 return this;548};549Y.Node.prototype.toggleView = function(name, on, callback) {550 this._toggles = this._toggles || [];551 callback = arguments[arguments.length - 1];552 if (typeof name !== 'string') { // no transition, just toggle553 on = name;554 this._toggleView(on, callback); // call original _toggleView in Y.Node555 return;556 }557 if (typeof on === 'function') { // Ignore "on" if used for callback argument.558 on = undefined;559 }560 if (typeof on === 'undefined' && name in this._toggles) { // reverse current toggle561 on = ! this._toggles[name];562 }563 on = (on) ? 1 : 0;564 if (on) {565 this._show();566 } else {567 callback = _wrapCallBack(this, this._hide, callback);568 }569 this._toggles[name] = on;570 this.transition(Y.Transition.toggles[name][on], callback);571 return this;572};573Y.NodeList.prototype.toggleView = function(name, on, callback) {574 var nodes = this._nodes,575 i = 0,576 node;577 while ((node = nodes[i++])) {578 node = Y.one(node);579 node.toggleView.apply(node, arguments);580 }581 return this;582};583Y.mix(Transition.fx, {584 fadeOut: {...
transition-native.js
Source:transition-native.js
...344Y.TransitionNative = Transition; // TODO: remove345/** 346 * Animate one or more css properties to a given value. Requires the "transition" module.347 * <pre>example usage:348 * Y.one('#demo').transition({349 * duration: 1, // in seconds, default is 0.5350 * easing: 'ease-out', // default is 'ease'351 * delay: '1', // delay start for 1 second, default is 0352 *353 * height: '10px',354 * width: '10px',355 *356 * opacity: { // per property357 * value: 0,358 * duration: 2,359 * delay: 2,360 * easing: 'ease-in'361 * }362 * });363 * </pre>364 * @for Node365 * @method transition366 * @param {Object} config An object containing one or more style properties, a duration and an easing.367 * @param {Function} callback A function to run after the transition has completed. 368 * @chainable369*/370Y.Node.prototype.transition = function(name, config, callback) {371 var 372 transitionAttrs = Transition._nodeAttrs[Y.stamp(this._node)],373 anim = (transitionAttrs) ? transitionAttrs.transition || null : null,374 fxConfig,375 prop;376 377 if (typeof name === 'string') { // named effect, pull config from registry378 if (typeof config === 'function') {379 callback = config;380 config = null;381 }382 fxConfig = Transition.fx[name];383 if (config && typeof config !== 'boolean') {384 config = Y.clone(config);385 for (prop in fxConfig) {386 if (fxConfig.hasOwnProperty(prop)) {387 if (! (prop in config)) {388 config[prop] = fxConfig[prop]; 389 }390 }391 }392 } else {393 config = fxConfig;394 }395 } else { // name is a config, config is a callback or undefined396 callback = config;397 config = name;398 }399 if (anim && !anim._running) {400 anim.init(this, config);401 } else {402 anim = new Transition(this._node, config);403 }404 anim.run(callback);405 return this;406};407Y.Node.prototype.show = function(name, config, callback) {408 this._show(); // show prior to transition409 if (name && Y.Transition) {410 if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default411 if (typeof config === 'function') {412 callback = config;413 config = name;414 }415 name = this.SHOW_TRANSITION; 416 } 417 this.transition(name, config, callback);418 } 419 return this;420};421var _wrapCallBack = function(anim, fn, callback) {422 return function() {423 if (fn) {424 fn.call(anim);425 }426 if (callback) {427 callback.apply(anim._node, arguments);428 }429 };430};431Y.Node.prototype.hide = function(name, config, callback) {432 if (name && Y.Transition) {433 if (typeof config === 'function') {434 callback = config;435 config = null;436 }437 callback = _wrapCallBack(this, this._hide, callback); // wrap with existing callback438 if (typeof name !== 'string' && !name.push) { // named effect or array of effects supercedes default439 if (typeof config === 'function') {440 callback = config;441 config = name;442 }443 name = this.HIDE_TRANSITION; 444 } 445 this.transition(name, config, callback);446 } else {447 this._hide();448 } 449 return this;450}; 451/** 452 * Animate one or more css properties to a given value. Requires the "transition" module.453 * <pre>example usage:454 * Y.all('.demo').transition({455 * duration: 1, // in seconds, default is 0.5456 * easing: 'ease-out', // default is 'ease'457 * delay: '1', // delay start for 1 second, default is 0458 *459 * height: '10px',460 * width: '10px',461 *462 * opacity: { // per property463 * value: 0,464 * duration: 2,465 * delay: 2,466 * easing: 'ease-in'467 * }468 * });469 * </pre>470 * @for NodeList471 * @method transition472 * @param {Object} config An object containing one or more style properties, a duration and an easing.473 * @param {Function} callback A function to run after the transition has completed. The callback fires474 * once per item in the NodeList.475 * @chainable476*/477Y.NodeList.prototype.transition = function(config, callback) {478 var nodes = this._nodes,479 i = 0,480 node;481 while ((node = nodes[i++])) {482 Y.one(node).transition(config, callback);483 }484 return this;485};486Y.Node.prototype.toggleView = function(name, on) {487 var callback;488 this._toggles = this._toggles || [];489 if (typeof name == 'boolean') { // no transition, just toggle490 on = name;491 }492 if (typeof on === 'undefined' && name in this._toggles) {493 on = ! this._toggles[name];494 }495 on = (on) ? 1 : 0;496 if (on) {497 this._show();498 } else {499 callback = _wrapCallBack(anim, this._hide);500 }501 this._toggles[name] = on;502 this.transition(Y.Transition.toggles[name][on], callback);503};504Y.NodeList.prototype.toggleView = function(config, callback) {505 var nodes = this._nodes,506 i = 0,507 node;508 while ((node = nodes[i++])) {509 Y.one(node).toggleView(config, callback);510 }511 return this;512};513Y.mix(Transition.fx, {514 fadeOut: {515 opacity: 0,516 duration: 0.5,...
item.js
Source:item.js
...210 var transX = x - curX;211 var transY = y - curY;212 var transitionStyle = {};213 transitionStyle.transform = this.getTranslate( transX, transY );214 this.transition({215 to: transitionStyle,216 onTransitionEnd: {217 transform: this.layoutPosition218 },219 isCleaning: true220 });221};222Item.prototype.getTranslate = function( x, y ) {223 // flip cooridinates if origin on right or bottom224 var layoutOptions = this.layout.options;225 x = layoutOptions.isOriginLeft ? x : -x;226 y = layoutOptions.isOriginTop ? y : -y;227 if ( is3d ) {228 return 'translate3d(' + x + 'px, ' + y + 'px, 0)';229 }230 return 'translate(' + x + 'px, ' + y + 'px)';231};232// non transition + transform support233Item.prototype.goTo = function( x, y ) {234 this.setPosition( x, y );235 this.layoutPosition();236};237// use transition and transforms if supported238Item.prototype.moveTo = supportsCSS3 ?239 Item.prototype._transitionTo : Item.prototype.goTo;240Item.prototype.setPosition = function( x, y ) {241 this.position.x = parseInt( x, 10 );242 this.position.y = parseInt( y, 10 );243};244// ----- transition ----- //245/**246 * @param {Object} style - CSS247 * @param {Function} onTransitionEnd248 */249// non transition, just trigger callback250Item.prototype._nonTransition = function( args ) {251 this.css( args.to );252 if ( args.isCleaning ) {253 this._removeStyles( args.to );254 }255 for ( var prop in args.onTransitionEnd ) {256 args.onTransitionEnd[ prop ].call( this );257 }258};259/**260 * proper transition261 * @param {Object} args - arguments262 * @param {Object} to - style to transition to263 * @param {Object} from - style to start transition from264 * @param {Boolean} isCleaning - removes transition styles after transition265 * @param {Function} onTransitionEnd - callback266 */267Item.prototype._transition = function( args ) {268 // redirect to nonTransition if no transition duration269 if ( !parseFloat( this.layout.options.transitionDuration ) ) {270 this._nonTransition( args );271 return;272 }273 var _transition = this._transn;274 // keep track of onTransitionEnd callback by css property275 for ( var prop in args.onTransitionEnd ) {276 _transition.onEnd[ prop ] = args.onTransitionEnd[ prop ];277 }278 // keep track of properties that are transitioning279 for ( prop in args.to ) {280 _transition.ingProperties[ prop ] = true;281 // keep track of properties to clean up when transition is done282 if ( args.isCleaning ) {283 _transition.clean[ prop ] = true;284 }285 }286 // set from styles287 if ( args.from ) {288 this.css( args.from );289 // force redraw. http://blog.alexmaccaw.com/css-transitions290 var h = this.element.offsetHeight;291 // hack for JSHint to hush about unused var292 h = null;293 }294 // enable transition295 this.enableTransition( args.to );296 // set styles that are transitioning297 this.css( args.to );298 this.isTransitioning = true;299};300// dash before all cap letters, including first for301// WebkitTransform => -webkit-transform302function toDashedAll( str ) {303 return str.replace( /([A-Z])/g, function( $1 ) {304 return '-' + $1.toLowerCase();305 });306}307var transitionProps = 'opacity,' +308 toDashedAll( vendorProperties.transform || 'transform' );309Item.prototype.enableTransition = function(/* style */) {310 // HACK changing transitionProperty during a transition311 // will cause transition to jump312 if ( this.isTransitioning ) {313 return;314 }315 // make `transition: foo, bar, baz` from style object316 // HACK un-comment this when enableTransition can work317 // while a transition is happening318 // var transitionValues = [];319 // for ( var prop in style ) {320 // // dash-ify camelCased properties like WebkitTransition321 // prop = vendorProperties[ prop ] || prop;322 // transitionValues.push( toDashedAll( prop ) );323 // }324 // enable transition styles325 this.css({326 transitionProperty: transitionProps,327 transitionDuration: this.layout.options.transitionDuration328 });329 // listen for transition end event330 this.element.addEventListener( transitionEndEvent, this, false );331};332Item.prototype.transition = Item.prototype[ transitionProperty ? '_transition' : '_nonTransition' ];333// ----- events ----- //334Item.prototype.onwebkitTransitionEnd = function( event ) {335 this.ontransitionend( event );336};337Item.prototype.onotransitionend = function( event ) {338 this.ontransitionend( event );339};340// properties that I munge to make my life easier341var dashedVendorProperties = {342 '-webkit-transform': 'transform',343 '-moz-transform': 'transform',344 '-o-transform': 'transform'345};346Item.prototype.ontransitionend = function( event ) {347 // disregard bubbled events from children348 if ( event.target !== this.element ) {349 return;350 }351 var _transition = this._transn;352 // get property name of transitioned property, convert to prefix-free353 var propertyName = dashedVendorProperties[ event.propertyName ] || event.propertyName;354 // remove property that has completed transitioning355 delete _transition.ingProperties[ propertyName ];356 // check if any properties are still transitioning357 if ( isEmptyObj( _transition.ingProperties ) ) {358 // all properties have completed transitioning359 this.disableTransition();360 }361 // clean style362 if ( propertyName in _transition.clean ) {363 // clean up style364 this.element.style[ event.propertyName ] = '';365 delete _transition.clean[ propertyName ];366 }367 // trigger onTransitionEnd callback368 if ( propertyName in _transition.onEnd ) {369 var onTransitionEnd = _transition.onEnd[ propertyName ];370 onTransitionEnd.call( this );371 delete _transition.onEnd[ propertyName ];372 }373 this.emitEvent( 'transitionEnd', [ this ] );374};375Item.prototype.disableTransition = function() {376 this.removeTransitionStyles();377 this.element.removeEventListener( transitionEndEvent, this, false );378 this.isTransitioning = false;379};380/**381 * removes style property from element382 * @param {Object} style383**/384Item.prototype._removeStyles = function( style ) {385 // clean up transition styles386 var cleanStyle = {};387 for ( var prop in style ) {388 cleanStyle[ prop ] = '';389 }390 this.css( cleanStyle );391};392var cleanTransitionStyle = {393 transitionProperty: '',394 transitionDuration: ''395};396Item.prototype.removeTransitionStyles = function() {397 // remove transition398 this.css( cleanTransitionStyle );399};400// ----- show/hide/remove ----- //401// remove element from DOM402Item.prototype.removeElem = function() {403 this.element.parentNode.removeChild( this.element );404 // remove display: none405 this.css({ display: '' });406 this.emitEvent( 'remove', [ this ] );407};408Item.prototype.remove = function() {409 // just remove element if no transition support or no transition410 if ( !transitionProperty || !parseFloat( this.layout.options.transitionDuration ) ) {411 this.removeElem();412 return;413 }414 // start transition415 var _this = this;416 this.once( 'transitionEnd', function() {417 _this.removeElem();418 });419 this.hide();420};421Item.prototype.reveal = function() {422 delete this.isHidden;423 // remove display: none424 this.css({ display: '' });425 var options = this.layout.options;426 var onTransitionEnd = {};427 var transitionEndProperty = this.getHideRevealTransitionEndProperty('visibleStyle');428 onTransitionEnd[ transitionEndProperty ] = this.onRevealTransitionEnd;429 this.transition({430 from: options.hiddenStyle,431 to: options.visibleStyle,432 isCleaning: true,433 onTransitionEnd: onTransitionEnd434 });435};436Item.prototype.onRevealTransitionEnd = function() {437 // check if still visible438 // during transition, item may have been hidden439 if ( !this.isHidden ) {440 this.emitEvent('reveal');441 }442};443/**444 * get style property use for hide/reveal transition end445 * @param {String} styleProperty - hiddenStyle/visibleStyle446 * @returns {String}447 */448Item.prototype.getHideRevealTransitionEndProperty = function( styleProperty ) {449 var optionStyle = this.layout.options[ styleProperty ];450 // use opacity451 if ( optionStyle.opacity ) {452 return 'opacity';453 }454 // get first property455 for ( var prop in optionStyle ) {456 return prop;457 }458};459Item.prototype.hide = function() {460 // set flag461 this.isHidden = true;462 // remove display: none463 this.css({ display: '' });464 var options = this.layout.options;465 var onTransitionEnd = {};466 var transitionEndProperty = this.getHideRevealTransitionEndProperty('hiddenStyle');467 onTransitionEnd[ transitionEndProperty ] = this.onHideTransitionEnd;468 this.transition({469 from: options.visibleStyle,470 to: options.hiddenStyle,471 // keep hidden stuff hidden472 isCleaning: true,473 onTransitionEnd: onTransitionEnd474 });475};476Item.prototype.onHideTransitionEnd = function() {477 // check if still hidden478 // during transition, item may have been un-hidden479 if ( this.isHidden ) {480 this.css({ display: 'none' });481 this.emitEvent('hide');482 }...
transaction.js
Source:transaction.js
1import { ensureTransaction } from './data';2/**3 * Transitions4 *5 * These strings must sync with values defined in Flex API,6 * since transaction objects given by API contain info about last transitions.7 * All the actions in API side happen in transitions,8 * so we need to understand what those strings mean.9 */10// When a customer makes a booking to a listing, a transaction is11// created with the initial request-payment transition.12// At this transition a PaymentIntent is created by Marketplace API.13// After this transition, the actual payment must be made on client-side directly to Stripe.14export const TRANSITION_REQUEST_PAYMENT = 'transition/request-payment';15export const TRANSITION_REQUEST_PAYMENT_10 = 'transition/request-payment-commission-10';16export const TRANSITION_REQUEST_PAYMENT_15 = "transition/request-payment-commission-15";17export const TRANSITION_REQUEST_PAYMENT_20 = "transition/request-payment-commission-20";18// A customer can also initiate a transaction with an enquiry, and19// then transition that with a request.20export const TRANSITION_ENQUIRE = 'transition/enquire';21export const TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY = 'transition/request-payment-after-enquiry';22export const TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY_10 = 'transition/request-payment-after-enquiry-commission-10';23export const TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY_15 = 'transition/request-payment-after-enquiry-commission-15';24export const TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY_20 = 'transition/request-payment-after-enquiry-commission-20';25// Stripe SDK might need to ask 3D security from customer, in a separate front-end step.26// Therefore we need to make another transition to Marketplace API,27// to tell that the payment is confirmed.28export const TRANSITION_CONFIRM_PAYMENT = 'transition/confirm-payment';29// If the payment is not confirmed in the time limit set in transaction process (by default 15min)30// the transaction will expire automatically.31export const TRANSITION_EXPIRE_PAYMENT = 'transition/expire-payment';32// When the provider accepts or declines a transaction from the33// SalePage, it is transitioned with the accept or decline transition.34export const TRANSITION_ACCEPT = 'transition/accept';35export const TRANSITION_ACCEPT_AUTO = 'transition/accept-auto';36export const TRANSITION_DECLINE = 'transition/decline';37// The backend automatically expire the transaction.38export const TRANSITION_EXPIRE = 'transition/expire';39// Admin can also cancel the transition.40export const TRANSITION_CANCEL = 'transition/cancel';41// The backend will mark the transaction completed.42export const TRANSITION_COMPLETE = 'transition/complete';43// Reviews are given through transaction transitions. Review 1 can be44// by provider or customer, and review 2 will be the other party of45// the transaction.46export const TRANSITION_REVIEW_1_BY_PROVIDER = 'transition/review-1-by-provider';47export const TRANSITION_REVIEW_2_BY_PROVIDER = 'transition/review-2-by-provider';48export const TRANSITION_REVIEW_1_BY_CUSTOMER = 'transition/review-1-by-customer';49export const TRANSITION_REVIEW_2_BY_CUSTOMER = 'transition/review-2-by-customer';50export const TRANSITION_EXPIRE_CUSTOMER_REVIEW_PERIOD = 'transition/expire-customer-review-period';51export const TRANSITION_EXPIRE_PROVIDER_REVIEW_PERIOD = 'transition/expire-provider-review-period';52export const TRANSITION_EXPIRE_REVIEW_PERIOD = 'transition/expire-review-period';53/**54 * Actors55 *56 * There are 4 different actors that might initiate transitions:57 */58// Roles of actors that perform transaction transitions59export const TX_TRANSITION_ACTOR_CUSTOMER = 'customer';60export const TX_TRANSITION_ACTOR_PROVIDER = 'provider';61export const TX_TRANSITION_ACTOR_SYSTEM = 'system';62export const TX_TRANSITION_ACTOR_OPERATOR = 'operator';63export const TX_TRANSITION_ACTORS = [64 TX_TRANSITION_ACTOR_CUSTOMER,65 TX_TRANSITION_ACTOR_PROVIDER,66 TX_TRANSITION_ACTOR_SYSTEM,67 TX_TRANSITION_ACTOR_OPERATOR,68];69/**70 * States71 *72 * These constants are only for making it clear how transitions work together.73 * You should not use these constants outside of this file.74 *75 * Note: these states are not in sync with states used transaction process definitions76 * in Marketplace API. Only last transitions are passed along transaction object.77 */78const STATE_INITIAL = 'initial';79const STATE_ENQUIRY = 'enquiry';80const STATE_PENDING_PAYMENT = 'pending-payment';81const STATE_PAYMENT_EXPIRED = 'payment-expired';82const STATE_PREAUTHORIZED = 'preauthorized';83const STATE_DECLINED = 'declined';84const STATE_ACCEPTED = 'accepted';85const STATE_CANCELED = 'canceled';86const STATE_DELIVERED = 'delivered';87const STATE_REVIEWED = 'reviewed';88const STATE_REVIEWED_BY_CUSTOMER = 'reviewed-by-customer';89const STATE_REVIEWED_BY_PROVIDER = 'reviewed-by-provider';90/**91 * Description of transaction process92 *93 * You should keep this in sync with transaction process defined in Marketplace API94 *95 * Note: we don't use yet any state machine library,96 * but this description format is following Xstate (FSM library)97 * https://xstate.js.org/docs/98 */99const stateDescription = {100 // id is defined only to support Xstate format.101 // However if you have multiple transaction processes defined,102 // it is best to keep them in sync with transaction process aliases.103 id: 'preauth-with-nightly-booking-custom/release-1',104 // This 'initial' state is a starting point for new transaction105 initial: STATE_INITIAL,106 // States107 states: {108 [STATE_INITIAL]: {109 on: {110 [TRANSITION_ENQUIRE]: STATE_ENQUIRY,111 [TRANSITION_REQUEST_PAYMENT]: STATE_PENDING_PAYMENT,112 [TRANSITION_REQUEST_PAYMENT_10]: STATE_PENDING_PAYMENT,113 [TRANSITION_REQUEST_PAYMENT_15]: STATE_PENDING_PAYMENT,114 [TRANSITION_REQUEST_PAYMENT_20]: STATE_PENDING_PAYMENT,115 },116 },117 [STATE_ENQUIRY]: {118 on: {119 [TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY]: STATE_PENDING_PAYMENT,120 [TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY_10]: STATE_PENDING_PAYMENT,121 [TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY_15]: STATE_PENDING_PAYMENT,122 [TRANSITION_REQUEST_PAYMENT_AFTER_ENQUIRY_20]: STATE_PENDING_PAYMENT,123 },124 },125 [STATE_PENDING_PAYMENT]: {126 on: {127 [TRANSITION_EXPIRE_PAYMENT]: STATE_PAYMENT_EXPIRED,128 [TRANSITION_CONFIRM_PAYMENT]: STATE_PREAUTHORIZED,129 [TRANSITION_ACCEPT_AUTO]: STATE_ACCEPTED,130 },131 },132 [STATE_PAYMENT_EXPIRED]: {},133 [STATE_PREAUTHORIZED]: {134 on: {135 [TRANSITION_DECLINE]: STATE_DECLINED,136 [TRANSITION_EXPIRE]: STATE_DECLINED,137 [TRANSITION_ACCEPT]: STATE_ACCEPTED,138 },139 },140 [STATE_DECLINED]: {},141 [STATE_ACCEPTED]: {142 on: {143 [TRANSITION_CANCEL]: STATE_CANCELED,144 [TRANSITION_COMPLETE]: STATE_DELIVERED,145 },146 },147 [STATE_CANCELED]: {},148 [STATE_DELIVERED]: {149 on: {150 [TRANSITION_EXPIRE_REVIEW_PERIOD]: STATE_REVIEWED,151 [TRANSITION_REVIEW_1_BY_CUSTOMER]: STATE_REVIEWED_BY_CUSTOMER,152 [TRANSITION_REVIEW_1_BY_PROVIDER]: STATE_REVIEWED_BY_PROVIDER,153 },154 },155 [STATE_REVIEWED_BY_CUSTOMER]: {156 on: {157 [TRANSITION_REVIEW_2_BY_PROVIDER]: STATE_REVIEWED,158 [TRANSITION_EXPIRE_PROVIDER_REVIEW_PERIOD]: STATE_REVIEWED,159 },160 },161 [STATE_REVIEWED_BY_PROVIDER]: {162 on: {163 [TRANSITION_REVIEW_2_BY_CUSTOMER]: STATE_REVIEWED,164 [TRANSITION_EXPIRE_CUSTOMER_REVIEW_PERIOD]: STATE_REVIEWED,165 },166 },167 [STATE_REVIEWED]: { type: 'final' },168 },169};170// Note: currently we assume that state description doesn't contain nested states.171const statesFromStateDescription = description => description.states || {};172// Get all the transitions from states object in an array173const getTransitions = states => {174 const stateNames = Object.keys(states);175 const transitionsReducer = (transitionArray, name) => {176 const stateTransitions = states[name] && states[name].on;177 const transitionKeys = stateTransitions ? Object.keys(stateTransitions) : [];178 return [179 ...transitionArray,180 ...transitionKeys.map(key => ({ key, value: stateTransitions[key] })),181 ];182 };183 return stateNames.reduce(transitionsReducer, []);184};185// This is a list of all the transitions that this app should be able to handle.186export const TRANSITIONS = getTransitions(statesFromStateDescription(stateDescription)).map(187 t => t.key188);189// This function returns a function that has given stateDesc in scope chain.190const getTransitionsToStateFn = stateDesc => state =>191 getTransitions(statesFromStateDescription(stateDesc))192 .filter(t => t.value === state)193 .map(t => t.key);194// Get all the transitions that lead to specified state.195const getTransitionsToState = getTransitionsToStateFn(stateDescription);196// This is needed to fetch transactions that need response from provider.197// I.e. transactions which provider needs to accept or decline198export const transitionsToRequested = getTransitionsToState(STATE_PREAUTHORIZED);199/**200 * Helper functions to figure out if transaction is in a specific state.201 * State is based on lastTransition given by transaction object and state description.202 */203const txLastTransition = tx => ensureTransaction(tx).attributes.lastTransition;204export const txIsEnquired = tx =>205 getTransitionsToState(STATE_ENQUIRY).includes(txLastTransition(tx));206export const txIsPaymentPending = tx =>207 getTransitionsToState(STATE_PENDING_PAYMENT).includes(txLastTransition(tx));208export const txIsPaymentExpired = tx =>209 getTransitionsToState(STATE_PAYMENT_EXPIRED).includes(txLastTransition(tx));210// Note: state name used in Marketplace API docs (and here) is actually preauthorized211// However, word "requested" is used in many places so that we decided to keep it.212export const txIsRequested = tx =>213 getTransitionsToState(STATE_PREAUTHORIZED).includes(txLastTransition(tx));214export const txIsAccepted = tx =>215 getTransitionsToState(STATE_ACCEPTED).includes(txLastTransition(tx));216export const txIsDeclined = tx =>217 getTransitionsToState(STATE_DECLINED).includes(txLastTransition(tx));218export const txIsCanceled = tx =>219 getTransitionsToState(STATE_CANCELED).includes(txLastTransition(tx));220export const txIsDelivered = tx =>221 getTransitionsToState(STATE_DELIVERED).includes(txLastTransition(tx));222const firstReviewTransitions = [223 ...getTransitionsToState(STATE_REVIEWED_BY_CUSTOMER),224 ...getTransitionsToState(STATE_REVIEWED_BY_PROVIDER),225];226export const txIsInFirstReview = tx => firstReviewTransitions.includes(txLastTransition(tx));227export const txIsInFirstReviewBy = (tx, isCustomer) =>228 isCustomer229 ? getTransitionsToState(STATE_REVIEWED_BY_CUSTOMER).includes(txLastTransition(tx))230 : getTransitionsToState(STATE_REVIEWED_BY_PROVIDER).includes(txLastTransition(tx));231export const txIsReviewed = tx =>232 getTransitionsToState(STATE_REVIEWED).includes(txLastTransition(tx));233/**234 * Helper functions to figure out if transaction has passed a given state.235 * This is based on transitions history given by transaction object.236 */237const txTransitions = tx => ensureTransaction(tx).attributes.transitions || [];238const hasPassedTransition = (transitionName, tx) =>239 !!txTransitions(tx).find(t => t.transition === transitionName);240const hasPassedStateFn = state => tx =>241 getTransitionsToState(state).filter(t => hasPassedTransition(t, tx)).length > 0;242export const txHasBeenAccepted = hasPassedStateFn(STATE_ACCEPTED);243export const txHasBeenDelivered = hasPassedStateFn(STATE_DELIVERED);244/**245 * Other transaction related utility functions246 */247export const transitionIsReviewed = transition =>248 getTransitionsToState(STATE_REVIEWED).includes(transition);249export const transitionIsFirstReviewedBy = (transition, isCustomer) =>250 isCustomer251 ? getTransitionsToState(STATE_REVIEWED_BY_CUSTOMER).includes(transition)252 : getTransitionsToState(STATE_REVIEWED_BY_PROVIDER).includes(transition);253export const getReview1Transition = isCustomer =>254 isCustomer ? TRANSITION_REVIEW_1_BY_CUSTOMER : TRANSITION_REVIEW_1_BY_PROVIDER;255export const getReview2Transition = isCustomer =>256 isCustomer ? TRANSITION_REVIEW_2_BY_CUSTOMER : TRANSITION_REVIEW_2_BY_PROVIDER;257// Check if a transition is the kind that should be rendered258// when showing transition history (e.g. ActivityFeed)259// The first transition and most of the expiration transitions made by system are not relevant260export const isRelevantPastTransition = transition => {261 return [262 TRANSITION_ACCEPT,263 TRANSITION_ACCEPT_AUTO,264 TRANSITION_CANCEL,265 TRANSITION_COMPLETE,266 TRANSITION_CONFIRM_PAYMENT,267 TRANSITION_DECLINE,268 TRANSITION_EXPIRE,269 TRANSITION_REVIEW_1_BY_CUSTOMER,270 TRANSITION_REVIEW_1_BY_PROVIDER,271 TRANSITION_REVIEW_2_BY_CUSTOMER,272 TRANSITION_REVIEW_2_BY_PROVIDER,273 ].includes(transition);274};275export const isCustomerReview = transition => {276 return [TRANSITION_REVIEW_1_BY_CUSTOMER, TRANSITION_REVIEW_2_BY_CUSTOMER].includes(transition);277};278export const isProviderReview = transition => {279 return [TRANSITION_REVIEW_1_BY_PROVIDER, TRANSITION_REVIEW_2_BY_PROVIDER].includes(transition);280};281export const getUserTxRole = (currentUserId, transaction) => {282 const tx = ensureTransaction(transaction);283 const customer = tx.customer;284 if (currentUserId && currentUserId.uuid && tx.id && customer.id) {285 // user can be either customer or provider286 return currentUserId.uuid === customer.id.uuid287 ? TX_TRANSITION_ACTOR_CUSTOMER288 : TX_TRANSITION_ACTOR_PROVIDER;289 } else {290 throw new Error(`Parameters for "userIsCustomer" function were wrong.291 currentUserId: ${currentUserId}, transaction: ${transaction}`);292 }293};294export const txRoleIsProvider = userRole => userRole === TX_TRANSITION_ACTOR_PROVIDER;...
ActivityFeed.example.js
Source:ActivityFeed.example.js
1import React, { Component } from 'react';2import {3 createUser,4 createCurrentUser,5 createMessage,6 createTransaction,7 createListing,8 createTxTransition,9 createReview,10} from '../../util/test-data';11import {12 TRANSITION_ACCEPT,13 TRANSITION_COMPLETE,14 TRANSITION_DECLINE,15 TRANSITION_EXPIRE_REVIEW_PERIOD,16 TRANSITION_REQUEST_PAYMENT,17 TRANSITION_CONFIRM_PAYMENT,18 TRANSITION_REVIEW_1_BY_CUSTOMER,19 TRANSITION_REVIEW_1_BY_PROVIDER,20 TRANSITION_REVIEW_2_BY_CUSTOMER,21 TRANSITION_REVIEW_2_BY_PROVIDER,22 TX_TRANSITION_ACTOR_CUSTOMER,23 TX_TRANSITION_ACTOR_PROVIDER,24} from '../../util/transaction';25import ActivityFeed from './ActivityFeed';26const noop = () => null;27export const Empty = {28 component: ActivityFeed,29 props: {30 messages: [],31 hasOlderMessages: false,32 onOpenReviewModal: noop,33 onShowOlderMessages: noop,34 fetchMessagesInProgress: false,35 },36 group: 'messages',37};38export const WithoutCurrentUser = {39 component: ActivityFeed,40 props: {41 messages: [42 createMessage('msg1', {}, { sender: createUser('user1') }),43 createMessage('msg2', {}, { sender: createUser('user2') }),44 ],45 hasOlderMessages: false,46 onOpenReviewModal: noop,47 onShowOlderMessages: noop,48 fetchMessagesInProgress: false,49 },50 group: 'messages',51};52export const WithCurrentUser = {53 component: ActivityFeed,54 props: {55 currentUser: createCurrentUser('user2'),56 messages: [57 createMessage('msg1', {}, { sender: createUser('user1') }),58 createMessage('msg2', {}, { sender: createUser('user2') }),59 createMessage('msg3', { content: 'ok' }, { sender: createUser('user2') }),60 createMessage('msg4', { content: 'ok' }, { sender: createUser('user1') }),61 createMessage('msg5', {}, { sender: createUser('user1') }),62 ],63 hasOlderMessages: false,64 onOpenReviewModal: noop,65 onShowOlderMessages: noop,66 fetchMessagesInProgress: false,67 },68 group: 'messages',69};70export const WithTransitions = {71 component: ActivityFeed,72 props: {73 currentUser: createCurrentUser('user2'),74 transaction: createTransaction({75 customer: createUser('user1'),76 provider: createUser('user2'),77 listing: createListing('Listing'),78 transitions: [79 // this should not be visible in the feed80 createTxTransition({81 createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),82 by: TX_TRANSITION_ACTOR_CUSTOMER,83 transition: TRANSITION_REQUEST_PAYMENT,84 }),85 createTxTransition({86 createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),87 by: TX_TRANSITION_ACTOR_CUSTOMER,88 transition: TRANSITION_CONFIRM_PAYMENT,89 }),90 createTxTransition({91 createdAt: new Date(Date.UTC(2017, 10, 9, 8, 12)),92 by: TX_TRANSITION_ACTOR_PROVIDER,93 transition: TRANSITION_ACCEPT,94 }),95 // this should not be visible in the feed96 createTxTransition({97 createdAt: new Date(Date.UTC(2017, 10, 16, 8, 12)),98 by: TX_TRANSITION_ACTOR_PROVIDER,99 transition: TRANSITION_EXPIRE_REVIEW_PERIOD,100 }),101 ],102 }),103 messages: [],104 hasOlderMessages: false,105 onOpenReviewModal: noop,106 onShowOlderMessages: noop,107 fetchMessagesInProgress: false,108 },109 group: 'messages',110};111export const WithMessagesTransitionsAndReviews = {112 component: ActivityFeed,113 props: {114 currentUser: createCurrentUser('user2'),115 transaction: createTransaction({116 customer: createUser('user1'),117 provider: createUser('user2'),118 listing: createListing('Listing'),119 lastTransition: TRANSITION_REVIEW_2_BY_CUSTOMER,120 transitions: [121 createTxTransition({122 createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),123 by: TX_TRANSITION_ACTOR_CUSTOMER,124 transition: TRANSITION_REQUEST_PAYMENT,125 }),126 createTxTransition({127 createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),128 by: TX_TRANSITION_ACTOR_CUSTOMER,129 transition: TRANSITION_CONFIRM_PAYMENT,130 }),131 createTxTransition({132 createdAt: new Date(Date.UTC(2017, 10, 9, 8, 12)),133 by: TX_TRANSITION_ACTOR_PROVIDER,134 transition: TRANSITION_ACCEPT,135 }),136 createTxTransition({137 createdAt: new Date(Date.UTC(2017, 10, 9, 10, 33)),138 by: TX_TRANSITION_ACTOR_PROVIDER,139 transition: TRANSITION_DECLINE,140 }),141 createTxTransition({142 createdAt: new Date(Date.UTC(2017, 10, 9, 10, 34)),143 by: TX_TRANSITION_ACTOR_PROVIDER,144 transition: TRANSITION_COMPLETE,145 }),146 createTxTransition({147 createdAt: new Date(Date.UTC(2017, 10, 9, 11, 34)),148 by: TX_TRANSITION_ACTOR_PROVIDER,149 transition: TRANSITION_REVIEW_1_BY_PROVIDER,150 }),151 createTxTransition({152 createdAt: new Date(Date.UTC(2017, 10, 9, 12, 34)),153 by: TX_TRANSITION_ACTOR_CUSTOMER,154 transition: TRANSITION_REVIEW_2_BY_CUSTOMER,155 }),156 ],157 reviews: [158 createReview(159 'review1',160 { createdAt: new Date(Date.UTC(2017, 10, 9, 11, 34)), rating: 3, type: 'ofCustomer' },161 { author: createUser('user2'), subject: createUser('user1') }162 ),163 createReview(164 'review2',165 { createdAt: new Date(Date.UTC(2017, 10, 9, 12, 34)), rating: 5, type: 'ofProvider' },166 { author: createUser('user1'), subject: createUser('user2') }167 ),168 ],169 }),170 messages: [171 createMessage(172 'msg1',173 { createdAt: new Date(Date.UTC(2017, 10, 9, 8, 11)) },174 { sender: createUser('user1') }175 ),176 createMessage(177 'msg2',178 { createdAt: new Date(Date.UTC(2017, 10, 9, 8, 14)) },179 { sender: createUser('user1') }180 ),181 createMessage(182 'msg3',183 { createdAt: new Date(Date.UTC(2017, 10, 9, 8, 17)) },184 { sender: createUser('user2') }185 ),186 createMessage(187 'msg4',188 { createdAt: new Date(Date.UTC(2017, 10, 12, 13, 20)) },189 { sender: createUser('user2') }190 ),191 ],192 hasOlderMessages: false,193 onOpenReviewModal: noop,194 onShowOlderMessages: noop,195 fetchMessagesInProgress: false,196 },197 group: 'messages',198};199export const WithAReviewFromBothUsers = {200 component: ActivityFeed,201 props: {202 currentUser: createCurrentUser('user1'),203 transaction: createTransaction({204 customer: createUser('user1'),205 provider: createUser('user2'),206 listing: createListing('Listing'),207 reviews: [208 createReview(209 'review1',210 { createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)), rating: 3, type: 'ofProvider' },211 { author: createUser('user1'), subject: createUser('user2') }212 ),213 createReview(214 'review2',215 { createdAt: new Date(Date.UTC(2017, 10, 10, 8, 10)), rating: 5, type: 'ofCustomer' },216 { author: createUser('user2'), subject: createUser('user1') }217 ),218 ],219 lastTransition: TRANSITION_REVIEW_2_BY_PROVIDER,220 transitions: [221 createTxTransition({222 createdAt: new Date(Date.UTC(2017, 10, 9, 8, 10)),223 by: TX_TRANSITION_ACTOR_CUSTOMER,224 transition: TRANSITION_REVIEW_1_BY_CUSTOMER,225 }),226 createTxTransition({227 createdAt: new Date(Date.UTC(2017, 10, 10, 8, 10)),228 by: TX_TRANSITION_ACTOR_PROVIDER,229 transition: TRANSITION_REVIEW_2_BY_PROVIDER,230 }),231 ],232 }),233 messages: [],234 hasOlderMessages: false,235 onOpenReviewModal: noop,236 onShowOlderMessages: noop,237 fetchMessagesInProgress: false,238 },239 group: 'messages',240};241class PagedFeed extends Component {242 constructor(props) {243 super(props);244 this.state = { showAllMessages: false };245 }246 render() {247 const dates = [248 new Date(Date.UTC(2017, 10, 20, 12)),249 new Date(Date.UTC(2017, 10, 21, 12)),250 new Date(Date.UTC(2017, 10, 22, 12)),251 new Date(Date.UTC(2017, 10, 23, 12)),252 new Date(Date.UTC(2017, 10, 24, 12)),253 new Date(Date.UTC(2017, 10, 25, 12)),254 new Date(Date.UTC(2017, 10, 26, 12)),255 ];256 const currentUser = createCurrentUser('customer');257 const customer = createUser('customer');258 const provider = createUser('provider');259 const trans1 = createTxTransition({260 createdAt: dates[0],261 by: TX_TRANSITION_ACTOR_CUSTOMER,262 transition: TRANSITION_REQUEST_PAYMENT,263 });264 const trans2 = createTxTransition({265 createdAt: dates[0],266 by: TX_TRANSITION_ACTOR_CUSTOMER,267 transition: TRANSITION_CONFIRM_PAYMENT,268 });269 const trans3 = createTxTransition({270 createdAt: dates[2],271 by: TX_TRANSITION_ACTOR_PROVIDER,272 transition: TRANSITION_ACCEPT,273 });274 // Last transition timestamp is interleaved between the last two275 // messages.276 const trans4 = createTxTransition({277 createdAt: dates[5],278 by: TX_TRANSITION_ACTOR_CUSTOMER,279 transition: TRANSITION_COMPLETE,280 });281 // First message timestamp is interleaved between the first two282 // transitions.283 const msg1 = createMessage('msg1', { createdAt: dates[1] }, { sender: customer });284 const msg2 = createMessage('msg2', { createdAt: dates[3] }, { sender: provider });285 const msg3 = createMessage('msg3', { createdAt: dates[4] }, { sender: customer });286 const msg4 = createMessage('msg4', { createdAt: dates[6] }, { sender: customer });287 const transaction = createTransaction({288 id: 'tx1',289 lastTransition: TRANSITION_COMPLETE,290 lastTransitionedAt: dates[5],291 transitions: [trans1, trans2, trans3, trans4],292 listing: createListing('listing'),293 customer,294 provider,295 });296 const messages = this.state.showAllMessages ? [msg1, msg2, msg3, msg4] : [msg2, msg3, msg4];297 const handleShowOlder = () => {298 console.log('show older messages');299 this.setState({ showAllMessages: true });300 };301 const feedProps = {302 currentUser,303 transaction,304 messages,305 hasOlderMessages: !this.state.showAllMessages,306 onOpenReviewModal: noop,307 onShowOlderMessages: handleShowOlder,308 fetchMessagesInProgress: false,309 };310 return <ActivityFeed {...feedProps} />;311 }312}313export const WithMessagePaging = {314 component: PagedFeed,315 props: {},316 group: 'messages',...
transition.js
Source:transition.js
1var H5P = H5P || {};2/**3 * Transition contains helper function relevant for transitioning4 */5H5P.Transition = (function ($) {6 /**7 * @class8 * @namespace H5P9 */10 Transition = {};11 /**12 * @private13 */14 Transition.transitionEndEventNames = {15 'WebkitTransition': 'webkitTransitionEnd',16 'transition': 'transitionend',17 'MozTransition': 'transitionend',18 'OTransition': 'oTransitionEnd',19 'msTransition': 'MSTransitionEnd'20 };21 /**22 * @private23 */24 Transition.cache = [];25 /**26 * Get the vendor property name for an event27 *28 * @function H5P.Transition.getVendorPropertyName29 * @static30 * @private31 * @param {string} prop Generic property name32 * @return {string} Vendor specific property name33 */34 Transition.getVendorPropertyName = function (prop) {35 if (Transition.cache[prop] !== undefined) {36 return Transition.cache[prop];37 }38 var div = document.createElement('div');39 // Handle unprefixed versions (FF16+, for example)40 if (prop in div.style) {41 Transition.cache[prop] = prop;42 }43 else {44 var prefixes = ['Moz', 'Webkit', 'O', 'ms'];45 var prop_ = prop.charAt(0).toUpperCase() + prop.substr(1);46 if (prop in div.style) {47 Transition.cache[prop] = prop;48 }49 else {50 for (var i = 0; i < prefixes.length; ++i) {51 var vendorProp = prefixes[i] + prop_;52 if (vendorProp in div.style) {53 Transition.cache[prop] = vendorProp;54 break;55 }56 }57 }58 }59 return Transition.cache[prop];60 };61 /**62 * Get the name of the transition end event63 *64 * @static65 * @private66 * @return {string} description67 */68 Transition.getTransitionEndEventName = function () {69 return Transition.transitionEndEventNames[Transition.getVendorPropertyName('transition')] || undefined;70 };71 /**72 * Helper function for listening on transition end events73 *74 * @function H5P.Transition.onTransitionEnd75 * @static76 * @param {domElement} $element The element which is transitioned77 * @param {function} callback The callback to be invoked when transition is finished78 * @param {number} timeout Timeout in milliseconds. Fallback if transition event is never fired79 */80 Transition.onTransitionEnd = function ($element, callback, timeout) {81 // Fallback on 1 second if transition event is not supported/triggered82 timeout = timeout || 1000;83 Transition.transitionEndEventName = Transition.transitionEndEventName || Transition.getTransitionEndEventName();84 var callbackCalled = false;85 var doCallback = function () {86 if (callbackCalled) {87 return;88 }89 $element.off(Transition.transitionEndEventName, callback);90 callbackCalled = true;91 clearTimeout(timer);92 callback();93 };94 var timer = setTimeout(function () {95 doCallback();96 }, timeout);97 $element.on(Transition.transitionEndEventName, function () {98 doCallback();99 });100 };101 /**102 * Wait for a transition - when finished, invokes next in line103 *104 * @private105 *106 * @param {Object[]} transitions Array of transitions107 * @param {H5P.jQuery} transitions[].$element Dom element transition is performed on108 * @param {number=} transitions[].timeout Timeout fallback if transition end never is triggered109 * @param {bool=} transitions[].break If true, sequence breaks after this transition110 * @param {number} index The index for current transition111 */112 var runSequence = function (transitions, index) {113 if (index >= transitions.length) {114 return;115 }116 var transition = transitions[index];117 H5P.Transition.onTransitionEnd(transition.$element, function () {118 if (transition.end) {119 transition.end();120 }121 if (transition.break !== true) {122 runSequence(transitions, index+1);123 }124 }, transition.timeout || undefined);125 };126 /**127 * Run a sequence of transitions128 *129 * @function H5P.Transition.sequence130 * @static131 * @param {Object[]} transitions Array of transitions132 * @param {H5P.jQuery} transitions[].$element Dom element transition is performed on133 * @param {number=} transitions[].timeout Timeout fallback if transition end never is triggered134 * @param {bool=} transitions[].break If true, sequence breaks after this transition135 */136 Transition.sequence = function (transitions) {137 runSequence(transitions, 0);138 };139 return Transition;...
properties.js
Source:properties.js
1"use strict";2var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");3exports.__esModule = true;4exports.default = exports.animationEnd = exports.animationDelay = exports.animationTiming = exports.animationDuration = exports.animationName = exports.transitionEnd = exports.transitionDuration = exports.transitionDelay = exports.transitionTiming = exports.transitionProperty = exports.transform = void 0;5var _inDOM = _interopRequireDefault(require("../util/inDOM"));6var transform = 'transform';7exports.transform = transform;8var prefix, transitionEnd, animationEnd;9exports.animationEnd = animationEnd;10exports.transitionEnd = transitionEnd;11var transitionProperty, transitionDuration, transitionTiming, transitionDelay;12exports.transitionDelay = transitionDelay;13exports.transitionTiming = transitionTiming;14exports.transitionDuration = transitionDuration;15exports.transitionProperty = transitionProperty;16var animationName, animationDuration, animationTiming, animationDelay;17exports.animationDelay = animationDelay;18exports.animationTiming = animationTiming;19exports.animationDuration = animationDuration;20exports.animationName = animationName;21if (_inDOM.default) {22 var _getTransitionPropert = getTransitionProperties();23 prefix = _getTransitionPropert.prefix;24 exports.transitionEnd = transitionEnd = _getTransitionPropert.transitionEnd;25 exports.animationEnd = animationEnd = _getTransitionPropert.animationEnd;26 exports.transform = transform = prefix + "-" + transform;27 exports.transitionProperty = transitionProperty = prefix + "-transition-property";28 exports.transitionDuration = transitionDuration = prefix + "-transition-duration";29 exports.transitionDelay = transitionDelay = prefix + "-transition-delay";30 exports.transitionTiming = transitionTiming = prefix + "-transition-timing-function";31 exports.animationName = animationName = prefix + "-animation-name";32 exports.animationDuration = animationDuration = prefix + "-animation-duration";33 exports.animationTiming = animationTiming = prefix + "-animation-delay";34 exports.animationDelay = animationDelay = prefix + "-animation-timing-function";35}36var _default = {37 transform: transform,38 end: transitionEnd,39 property: transitionProperty,40 timing: transitionTiming,41 delay: transitionDelay,42 duration: transitionDuration43};44exports.default = _default;45function getTransitionProperties() {46 var style = document.createElement('div').style;47 var vendorMap = {48 O: function O(e) {49 return "o" + e.toLowerCase();50 },51 Moz: function Moz(e) {52 return e.toLowerCase();53 },54 Webkit: function Webkit(e) {55 return "webkit" + e;56 },57 ms: function ms(e) {58 return "MS" + e;59 }60 };61 var vendors = Object.keys(vendorMap);62 var transitionEnd, animationEnd;63 var prefix = '';64 for (var i = 0; i < vendors.length; i++) {65 var vendor = vendors[i];66 if (vendor + "TransitionProperty" in style) {67 prefix = "-" + vendor.toLowerCase();68 transitionEnd = vendorMap[vendor]('TransitionEnd');69 animationEnd = vendorMap[vendor]('AnimationEnd');70 break;71 }72 }73 if (!transitionEnd && 'transitionProperty' in style) transitionEnd = 'transitionend';74 if (!animationEnd && 'animationName' in style) animationEnd = 'animationend';75 style = null;76 return {77 animationEnd: animationEnd,78 transitionEnd: transitionEnd,79 prefix: prefix80 };...
Jest Testing Tutorial
LambdaTest’s Jest Testing Tutorial covers step-by-step guides around Jest with code examples to help you be proficient with the Jest framework. The Jest tutorial has chapters to help you learn right from the basics of Jest framework to code-based tutorials around testing react apps with Jest, perform snapshot testing, import ES modules and more.
Chapters
- What is Jest Framework
- Advantages of Jest - Jest has 3,898,000 GitHub repositories, as mentioned on its official website. Learn what makes Jest special and why Jest has gained popularity among the testing and developer community.
- Jest Installation - All the prerequisites and set up steps needed to help you start Jest automation testing.
- Using Jest with NodeJS Project - Learn how to leverage Jest framework to automate testing using a NodeJS Project.
- Writing First Test for Jest Framework - Get started with code-based tutorial to help you write and execute your first Jest framework testing script.
- Jest Vocabulary - Learn the industry renowned and official jargons of the Jest framework by digging deep into the Jest vocabulary.
- Unit Testing with Jest - Step-by-step tutorial to help you execute unit testing with Jest framework.
- Jest Basics - Learn about the most pivotal and basic features which makes Jest special.
- Jest Parameterized Tests - Avoid code duplication and fasten automation testing with Jest using parameterized tests. Parameterization allows you to trigger the same test scenario over different test configurations by incorporating parameters.
- Jest Matchers - Enforce assertions better with the help of matchers. Matchers help you compare the actual output with the expected one. Here is an example to see if the object is acquired from the correct class or not. -
|<p>it('check_object_of_Car', () => {</p><p> expect(newCar()).toBeInstanceOf(Car);</p><p> });</p>|
| :- |
- Jest Hooks: Setup and Teardown - Learn how to set up conditions which needs to be followed by the test execution and incorporate a tear down function to free resources after the execution is complete.
- Jest Code Coverage - Unsure there is no code left unchecked in your application. Jest gives a specific flag called --coverage to help you generate code coverage.
- HTML Report Generation - Learn how to create a comprehensive HTML report based on your Jest test execution.
- Testing React app using Jest Framework - Learn how to test your react web-application with Jest framework in this detailed Jest tutorial.
- Test using LambdaTest cloud Selenium Grid - Run your Jest testing script over LambdaTest cloud-based platform and leverage parallel testing to help trim down your test execution time.
- Snapshot Testing for React Front Ends - Capture screenshots of your react based web-application and compare them automatically for visual anomalies with the help of Jest tutorial.
- Bonus: Import ES modules with Jest - ES modules are also known as ECMAScript modules. Learn how to best use them by importing in your Jest testing scripts.
- Jest vs Mocha vs Jasmine - Learn the key differences between the most popular JavaScript-based testing frameworks i.e. Jest, Mocha, and Jasmine.
- Jest FAQs(Frequently Asked Questions) - Explore the most commonly asked questions around Jest framework, with their answers.
Run Jest automation tests on LambdaTest cloud grid
Perform automation testing on 3000+ real desktop and mobile devices online.
Try LambdaTest Now !!
Get 100 minutes of automation test minutes FREE!!
Was this article helpful?
