diff options
Diffstat (limited to 'includes/js/dojox/fx/style.js')
-rw-r--r-- | includes/js/dojox/fx/style.js | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/includes/js/dojox/fx/style.js b/includes/js/dojox/fx/style.js new file mode 100644 index 0000000..895de9a --- /dev/null +++ b/includes/js/dojox/fx/style.js @@ -0,0 +1,219 @@ +if(!dojo._hasResource["dojox.fx.style"]){ //_hasResource checks added by build. Do not use _hasResource directly in your code. +dojo._hasResource["dojox.fx.style"] = true; +dojo.provide("dojox.fx.style"); +dojo.experimental("dojox.fx.style"); +// +// summary: dojox.fx CSS Class _Animations: +// +// description: a set of functions to animate properties based on +// normalized CSS class definitions. +// +// provides: addClass, removeClass, and toggleClass +// +dojo.require("dojox.fx._base"); + +// FIXME: should the call signatures match dojo.addClass/removeClass/toggleClass and extend +// by having a third (or fourth) param to mix in additional _Animation args for advanced +// usage (delay: curve: repeat: easing: etc ... ) + +dojox.fx.addClass = function(/*dojox.fx._arg.StyleArgs*/ args){ + // summary: Animate the effects of adding a class to a node + // description: + // Creates an animation that will animate + // the properties of a node to the properties + // defined in a standard CSS .class definition. + // (calculating the differences itself) + // + // example: + // | + // | .bar { line-height: 12px; } + // | .foo { line-height: 40px; } + // | <div class="bar" id="test"> + // | Multi<br>line<br>text + // | </div> + // | + // | // animate to line-height:40px + // | dojo.fx.addClass({ node:"test", cssClass:"foo" }).play(); + // + var node = (args.node = dojo.byId(args.node)); + + var pushClass = (function(n){ + // summary: onEnd we want to add the class to the node + // (as dojo.addClass naturally would) in case our + // class parsing misses anything the browser would + // otherwise interpret. this may cause some flicker, + // and will only apply the class so children can inherit + // after the animation is done (potentially more flicker) + return function(){ + dojo.addClass(n, args.cssClass); + n.style.cssText = _beforeStyle; + } + })(node); + + // _getCalculatedStleChanges is the core of our style/class animations + var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,true); + var _beforeStyle = node.style.cssText; + var _anim = dojo.animateProperty(dojo.mixin({ + properties: mixedProperties + },args)); + dojo.connect(_anim,"onEnd",_anim,pushClass); + return _anim; // dojo._Animation +}; + +dojox.fx.removeClass = function(/*dojox.fx._arg.StyleArgs*/ args){ + // summary: Animate the effects of removing a class from a node + // description: + // Creates an animation that will animate the properties of a + // node (args.node) to the properties calculated after removing + // a standard CSS className from a that node. + // + // calls dojo.removeClass(args.cssClass) onEnd of animation + // + // standard dojo._Animation object rules apply. + // + // example: + // | // animate the removal of "foo" from a node with id="bar" + // | dojox.fx.removeClass({ + // | node: "bar", + // | cssClass: "foo" + // | }).play(); + + var node = (args.node = dojo.byId(args.node)); + + var pullClass = (function(n){ + // summary: onEnd we want to remove the class from the node + // (as dojo.removeClass naturally would) in case our class + // parsing misses anything the browser would otherwise + // interpret. this may cause some flicker, and will only + // apply the class so children can inherit after the + // animation is done (potentially more flicker) + // + return function(){ + dojo.removeClass(n, args.cssClass); + n.style.cssText = _beforeStyle; + } + })(node); + + var mixedProperties = dojox.fx._getCalculatedStyleChanges(args,false); + var _beforeStyle = node.style.cssText; + var _anim = dojo.animateProperty(dojo.mixin({ + properties: mixedProperties + },args)); + dojo.connect(_anim,"onEnd",_anim,pullClass); + return _anim; // dojo._Animation +}; + +dojox.fx.toggleClass = function(/*DomNode|String*/node, /*String*/cssClass, /*Boolean?*/condition){ + // summary: + // Animate the effects of Toggling a class on a Node + // + // description: + // creates an animation that will animate the effect of + // toggling a class on or off of a node. + // Adds a class to node if not present, or removes if present. + // Pass a boolean condition if you want to explicitly add or remove. + // node: + // The domNode (or string of the id) to toggle + // cssClass: + // String of the classname to add to the node + // condition: + // If passed, true means to add the class, false means to remove. + // + // example: + // | // add the class "sampleClass" to a node id="theNode" + // | dojox.fx.toggleClass("theNode","sampleClass",true).play(); + // example: + // | // toggle the class "sampleClass" on the node id="theNode" + // | dojox.fx.toggleClass("theNode","sampleClass").play(); + + if(typeof condition == "undefined"){ + condition = !dojo.hasClass(node, cssClass); + } + return dojox.fx[(condition ? "addClass" : "removeClass")]({ node: node, cssClass:cssClass }); // dojo._Animation + // TODO: support 4th param animMixin to allow passing of easing and duration and other _Animtion options +}; + +dojox.fx._allowedProperties = [ + // summary: Our pseudo map of properties we will check for. + // description: + // it should be much more intuitive. a way to normalize and + // "predict" intent, or even something more clever ... + // open to suggestions. + + // no-brainers: + "width", + "height", + // only if position = absolute || relative? + "left", "top", // "right", "bottom", + // these need to be filtered through dojo.colors? + // "background", // normalize to: + /* "backgroundImage", */ + // "backgroundPosition", // FIXME: to be effective, this needs "#px #px"? + "backgroundColor", + + "color", + + // "border", + "borderBottomColor", "borderBottomWidth", + "borderTopColor","borderTopWidth", + "borderLeftColor","borderLeftWidth", + "borderRightColor","borderRightWidth", + + // "padding", // normalize to: + "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", + // "margin", // normalize to: + "marginLeft", "marginTop", "marginRight", "marginBottom", + + // unit import/delicate?: + "lineHeight", + "letterSpacing", + "fontSize" +]; + +dojox.fx._getStyleSnapshot = function(/* Object */cache){ + // summary: + // uses a dojo.getComputedStyle(node) cache reference and + // iterates through the 'documented/supported animate-able' + // properties. + // + // returns: Array + // an array of raw, calculcated values (no keys), to be normalized/compared + // elsewhere + return dojo.map(dojox.fx._allowedProperties,function(style){ + return cache[style]; // String + }); // Array +}; + +dojox.fx._getCalculatedStyleChanges = function(/*dojox.fx._arg.StyleArgs*/ args, /*Boolean*/addClass){ + // summary: calclate the difference in style properties between two states + // description: + // calculate and normalize(?) the differences between two states + // of a node (args.node) by quickly adding or removing a class, and + // iterateing over the results of dojox.fx._getStyleSnapshot() + // + // addClass: + // true to calculate what adding a class would do, + // false to calculate what removing the class would do + + var node = (args.node = dojo.byId(args.node)); + var cs = dojo.getComputedStyle(node); + + // take our snapShots + var _before = dojox.fx._getStyleSnapshot(cs); + dojo[(addClass ? "addClass" : "removeClass")](node,args.cssClass); + var _after = dojox.fx._getStyleSnapshot(cs); + dojo[(addClass ? "removeClass" : "addClass")](node,args.cssClass); + + var calculated = {}; + var i = 0; + dojo.forEach(dojox.fx._allowedProperties,function(prop){ + if(_before[i] != _after[i]){ + // FIXME: the static unit: px is not good, either. need to parse unit from computed style? + calculated[prop] = { end: parseInt(_after[i]) /* start: parseInt(_before[i]), unit: 'px' */ }; + } + i++; + }); + return calculated; +}; + +} |