1 /** 2 * @fileOverview HTML/DOM Effects 3 * @author <a href="http://www.bobs-bits.com">Stephen Reay</a> 4 */ 5 6 /** 7 * @namespace HTML/DOM Effects Namespace 8 */ 9 BTM.Effect = {}; 10 11 /** 12 * Convenience function to toggle an element using {@link BTM.Effect.show} and {@link BTM.Effect.hide} 13 * @param {String|HTMLElement|String[]|HTMLElement[]} element element ID or reference to element (either single or an array), to be toggled. Each element is toggled based on its own current status, so this could make "show" some elements and "hide" others. 14 * @returns {HTMLElement|HTMLElement[]|String[]} the original array/HTMLElement 15 * @see BTM.Effect.hide 16 * @see BTM.Effect.show 17 */ 18 BTM.Effect.toggle = function toggle(element) { 19 if (Object.isArray(element)) { 20 element.forEach(BTM.Effect.toggle); 21 } 22 else { 23 element = BTM.$(element); 24 var func = BTM.DOM.getComputedStyle(element, 'display') === 'none' ? BTM.Effect.show : BTM.Effect.hide; 25 func(element); 26 } 27 return element; 28 }; 29 30 /** 31 * Hide an Element or array of Elements 32 * @param {String|HTMLElement|String[]|HTMLElement[]} element element ID or reference to element (either single or an array), to be hidden. 33 * @returns {HTMLElement|HTMLElement[]|String[]} the original array/HTMLElement 34 * @see BTM.Effect.toggle 35 * @see BTM.Effect.show 36 */ 37 BTM.Effect.hide = function hide(element) { 38 if (Object.isArray(element)) { 39 element.forEach(BTM.Effect.hide); 40 } 41 else { 42 element = BTM.$(element); 43 BTM.DOM.setStyle(element, 'display', 'none'); 44 if (BTM.Browser.engine === 'Trident' && BTM.Browser.engineVersion < 7) { 45 BTM.$$('select',element).forEach(BTM.Compatibility.MSIE.Six.hideSELECT); 46 } 47 } 48 return element; 49 }; 50 51 /** 52 * Show an Element or array of Elements 53 * @param {String|HTMLElement|String[]|HTMLElement[]} element element ID or reference to element (either single or an array), to be shown. 54 * @returns {HTMLElement|HTMLElement[]|String[]} the original array/HTMLElement 55 * @see BTM.Effect.toggle 56 * @see BTM.Effect.hide 57 */ 58 BTM.Effect.show = function show(element) { 59 if (Object.isArray(element)) { 60 element.forEach(BTM.Effect.show); 61 } 62 else { 63 element = BTM.$(element); 64 BTM.DOM.setStyle(element, 'display', ''); 65 if (BTM.Browser.engine === 'Trident' && BTM.Browser.engineVersion < 7) { 66 BTM.$$('select',element).forEach(BTM.Compatibility.MSIE.Six.showSELECT); 67 } 68 } 69 return element; 70 }; 71 72 /** 73 * @class Animation Class 74 * @experimental 75 * @param {String|HTMLElement} element element ID or reference to element to be animated 76 * @param {Object} style the style the Element should finish with at the end of the animation 77 * @param {Object} [options] the options object 78 * @param {Nubber} [options.timer=5] the duration in seconds for the animation 79 */ 80 BTM.Effect.Animation = function Animation(element, style, options) { 81 this.element = BTM.$(element); 82 this.endStyle = style; 83 this.options = Object.update({ 84 'timer' : 5 85 }, options); 86 87 this.options.timer *= 1000; 88 89 var delay = 15; 90 var step = 0; 91 var steps = timer/delay; 92 93 this.apply = function apply() { 94 step++; 95 BTM.DOM.setStyle(this.element, 'width', this.style/steps*step + 'px'); 96 if (step >= steps) { 97 window.clearTimeout(this.timeout); 98 this.end = new Date(); 99 window.console.log(this.end - this.start + 'milliseconds'); 100 } 101 }; 102 this.start = new Date(); 103 this.apply(); 104 this.timeout = window.setInterval(this.apply.bind(this), delay); 105 };