@@ -35,6 +35,13 @@ Blind </div> </div> + + <div class='demo_container'> + <a href="#" id='highlight_link' class='action'>Highlight</a> + <div id='highlight' class='demo'> + Highlight + </div> + </div> <script type="text/javascript"> document.observe('dom:loaded', function() { examples/prototype_ext.html @@ -76,6 +76,11 @@ FX.Base = Class.create((function() { return this; } + /** + * FX.Base#getCycle() -> int + * + * Returns current cycle position + **/ function getCycle() { return this.cycle ? this.cycle.current : 1 } src/base/base.js @@ -1,5 +1,6 @@ Element.addMethods({ fade: function(element, options) { + if (!(element = $(element))) return; new FX.Element(element) .setOptions(options || {}) .animate({opacity: 0}) @@ -8,6 +9,7 @@ Element.addMethods({ }, appear: function(element, options) { + if (!(element = $(element))) return; new FX.Element(element) .setOptions(options || {}) .animate({opacity: 1}) @@ -16,26 +18,44 @@ Element.addMethods({ }, blindUp: function(element, options) { - if (!element.visible()) return; + if (!(element = $(element)) || !element.visible() || element.fx) return; - new FX.Element(element) + element.fx = new FX.Element(element) .setOptions(options || {}) .onBeforeStarted(function() {element.originalHeight = element.style.height}) - .onEnded(function() {element.hide(); element.style.height = element.originalHeight; (element.originalHeight)}) + .onEnded(function() {element.hide(); element.style.height = element.originalHeight; delete element.fx}) .animate({height: 0}) .play(); return element; }, blindDown: function(element, options) { - if (element.visible()) return; + if (!(element = $(element)) || element.visible() || element.fx) return; var height = element.getHeight(); - new FX.Element(element) + + element.fx = new FX.Element(element) .setOptions(options || {}) .onBeforeStarted(function() {element.show(); element.style.height = '0px'}) + .onEnded(function() {delete element.fx}) .animate({height: height + 'px'}) .play(); return element; - } + }, -}) \ No newline at end of file + highlight: function(element, options) { + if (!(element = $(element)) || !element.visible()) return; + options = options || {}; + + if (element.fx) element.fx.stop().reverse().rewind(); + + var highlightColor = options.highlightColor || "#ffff99"; + var originalColor = element.getStyle('background-color'); + + element.fx = new FX.Element(element.setStyle({backgroundColor: highlightColor})) + .setOptions(options) + .animate({backgroundColor: originalColor}) + .onEnded(function() {delete element.fx}) + .play(); + return element; + } +}); \ No newline at end of file src/prototype_ext/element.js 81105f10f399e594e6ba458d681d8ea47c01886a sgruhier sgruhier@mac.com http://github.com/xilinus/protofx/commit/d77ce7ae2a3690c496541db30c1da62e29ad26c8 d77ce7ae2a3690c496541db30c1da62e29ad26c8 2008-12-16T05:10:25-08:00 2008-12-16T05:10:25-08:00 add Element#highlight (with ZenCocoon help) 4adbde07cf6f0c1150e9f74031e3e7ef345b1383 sgruhier sgruhier@mac.com