///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // VISUAL EFFECTS X LIBRARY / NEGORA © 2007 // // Description: Functions to make rich and automated visual effects easily. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // STRUCTURE BUILDERS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function VFXBuild () { } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES A LAYER IN MEMORY WITH THE SPECIFIED LIST OF CSS ATTRIBUTES APPLIED TO IT // // ? _list_css List of CSS attributes O // ? _id ID of the layer S ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXBuild.div = function (_list_css, _id) { var div = document.createElement ("div"); if (_list_css != null) CliCSS.set (div, _list_css); if (_id != null) div.id = _id; return div; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES AN IMAGE IN MEMORY WITH THE SPECIFIED LIST OF CSS ATTRIBUTES APPLIED TO IT // // _src Source path of the image S // ? _list_css List of CSS attributes O // ? _id ID of the image S // ? _form_img It makes an input form field instead of a pure image b ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXBuild.img = function (_src, _list_css, _id, _form_img) { if (_form_img == null) _form_img = false; var img = document.createElement ("img"); if (_form_img) { img = document.createElement ("input"); img.type = "image"; } img.src = _src; CliCSS.set (img, {"width": "auto", "height": "auto"}); if (_list_css != null) CliCSS.set (img, _list_css); if (_id != null) img.id = _id; return img; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES A LAYER WHICH WILL WRAP THE DESIRED ELEMENT // // _elem Element O // ? _list_css List of CSS attributes O // ? _id ID of the layer S ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXBuild.wrapperDiv = function (_elem, _list_css, _id) { var div = VFXBuild.div (_list_css, _id); div.appendChild (_elem.cloneNode (true)); _elem.parentNode.replaceChild (div, _elem); return div; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES A LAYER WHICH CONTENTS A PILE OF MODIFIED CLONE LAYERS // // _div_src Layer which acts as content source O // _arr_list_css Array of lists of CSS attributes A // _id ID of the container (the prefix "_sub" is appended for the sublayers) S // // Note 1: This function clones the content of the source layer but removes any ID or name inside of it in order to // avoid undesired behaviours. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXBuild.pileDiv = function (_div_src, _arr_list_css, _id) { // It gets the size and parent node of the source layer. var w = CliElem.getW (_div_src); var h = CliElem.getH (_div_src); var parent = _div_src.parentNode; // It builds the wrapper layer. var div_wrap = VFXBuild.div ({"position": "relative", "left": "0px", "top": "0px", "width": w + "px", "height": h +"px"}, _id); // It builds a template, cloning the source layer and removing IDs and names. var div_tmp = _div_src.cloneNode (true); div_tmp.id = ""; div_tmp.innerHTML = div_tmp.innerHTML.replace (new RegExp ("id=\"\\S+\"|id=[^ >]+", "gmi"), "") .replace (new RegExp ("id=\"\\S+\"|id=[^ >]+", "gmi"), " "); // It checks the array of sources. for (var i = _arr_list_css.length; i >= 0; i--) { var div_clone = null; // It appends the original or clone layer to the templater layer. if (i == 0) { div_clone = _div_src; } else { div_clone = div_tmp.cloneNode (true); CliCSS.set (div_clone, _arr_list_css [i - 1]); } CliCSS.set (div_clone, {"position": "absolute", "left": "0px", "top": "0px", "width": w + "px", "height": h +"px", "zIndex": i + 1}); div_wrap.appendChild (div_clone); } // It replaces the source layer with the wrapper layer. parent.appendChild (div_wrap); return div_wrap; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES A LAYER WHICH CONTENTS A PILE OF MODIFIED CLONE LAYERS // // _img Image which acts as source O // _arr_src Set of image paths A // _id ID of the container (the prefix "_sub" is appended for the sublayers) S ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXBuild.pileImg= function (_img, _arr_src, _id) { // It gets the size and parent node of the source image. var w = CliElem.getW (_img); var h = CliElem.getH (_img); var parent = _img.parentNode; // It builds the wrapper layer. var div_wrap = VFXBuild.div ({"position": "relative", "left": "0px", "top": "0px", "width": w + "px", "height": h +"px"}, _id); // It checks the array of sources. for (var i = _arr_src.length; i >= 0; i--) { // It clones the wrapper layer and modifies certain features. var div_img = div_wrap.cloneNode (false); div_img.id = ""; CliCSS.set (div_img, {"position": "absolute", "zIndex": i + 1}); // IMPORTANT: It's better not to clone the original image repeteadly, since it could be a form field of type "image" and cause // an undesired behaviour. Only the original should be cloned. if (i == 0) { div_img.appendChild (_img); } else { div_img.appendChild (VFXBuild.img (_arr_src [i - 1])); } // It appends the clone layer to the wrapper layer. div_wrap.appendChild (div_img); } // It replaces the image with the wrapper layer. parent.appendChild (div_wrap); return div_wrap; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // CORE FUNCTIONS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function VFXCore () { } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT ALIGNS AN ELEMENT TO ANOTHER ONE // // _elem_t Element O // _elem_r Reference element O // _align Horizontal alignment S right | center | left | null // _valign Vertical alignment S top | middle | bottom | null // _type Type of alignment S inner | outter ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.alignTwo = function (_elem_t, _elem_r, _align, _valign, _type) { var list_t = {"x": CliWin.getX (_elem_t), "y": CliElem.getY (_elem_t), "w": CliElem.getW (_elem_t), "h": CliElem.getH (_elem_t)}; var list_r = {"x": CliWin.getX (_elem_r), "y": CliElem.getY (_elem_r), "w": CliElem.getW (_elem_r), "h": CliElem.getH (_elem_r)}; var list_coor = CoreGeom.alignTwo (list_t, list_r, _align, _valign, _type); _elem_t.style ["left"] = list_coor ["x"] + "px"; _elem_t.style ["top"] = list_coor ["y"] + "px"; } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT EXECUTES THE DESIRED FUNCTIONS OVER AN ELEMENT PROGRESSIVELY // // _elem Element O // _id_vfx Effect ID S Must be unique! // _ti Time interval between which the function will be executed i // _qi Quantity which will be applied on every time interval d // _qf Final quantity which will stop the effect when reached d // _func_get Function which gets the present quantity O Receives the element // _func_set Function which sets the present quantity O Receives the element and value // ? _func_interval Function to be executed on every interval O Receives the element // ? _func_final Function to be executed at the end of the effect O Receives the element ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.progEffect = function (_elem, _id_vfx, _ti, _qi, _qf, _func_get, _func_set, _func_interval, _func_final) { // It initializates the array of effects IDs for the present element (if necessary). if (_elem.$vfx_arr_proge == null) _elem.$vfx_arr_proge = new Array (); // It calls the executor. VFXCore.progEffectExe (_elem, _id_vfx, _ti, _qi, _qf, _func_get, _func_set, _func_interval, _func_final); } VFXCore.progEffectExe = function (_elem, _id_vfx, _ti, _qi, _qf, _func_get, _func_set, _func_interval, _func_final, _pol) { // If no polarity has been specified, it's set. if (_pol == null) { if (_func_get (_elem) > _qf) { _pol = "decrease"; } else { _pol = "increase"; } } // If polarity is decreasing... // If it's increasing... if (_pol == "decrease") { // If the present quantity doesn't reach the final one, it continues executing the setting function. // If not, the execution ends and the interval and final functions are performed (if specified). if (_func_get (_elem) > _qf) { // It avoids assigning values over the final quantity. if (_func_get (_elem) - _qi < _qf) { _func_set (_elem, _qf); } else { _func_set (_elem, _func_get (_elem) - _qi); } // It performs the desired function on every interval (if specified); if (_func_interval != null) _func_interval (_elem); // The function calls itself (registering the "settimeout" unique ID). _elem.$vfx_arr_proge [_id_vfx] = window.setTimeout ( function () {VFXCore.progEffectExe (_elem, _id_vfx, _ti, _qi, _qf, _func_get, _func_set, _func_interval, _func_final, _pol);} , _ti); } else { if (_func_interval != null) _func_interval (_elem); if (_func_final != null) _func_final (_elem); } } else { // If the present quantity doesn't reach the final one, it continues executing the setting function. // If not, the execution ends and the interval and final functions are performed (if specified). if (_func_get (_elem) < _qf) { // It avoids assigning values under the final quantity. if (_func_get (_elem) + _qi > _qf) { _func_set (_elem, _qf); } else { _func_set (_elem, _func_get (_elem) + _qi); } // It performs the desired function on every interval (if specified); if (_func_interval != null) _func_interval (_elem); // The function calls itself (registering the "settimeout" unique ID). _elem.$vfx_arr_proge [_id_vfx] = window.setTimeout ( function () {VFXCore.progEffectExe (_elem, _id_vfx, _ti, _qi, _qf, _func_get, _func_set, _func_interval, _func_final, _pol);} , _ti); } else { if (_func_interval != null) _func_interval (_elem); if (_func_final != null) _func_final (_elem); } } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT STOPS THE SPECIFIED EFFECT ON AN ELEMENT // // _elem Element O // _id_vfx Effect ID S Must be unique! ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.progEffectStop = function (_elem, _id_vfx) { if (_elem.$vfx_arr_proge != null && _elem.$vfx_arr_proge [_id_vfx] != null) { window.clearTimeout (_elem.$vfx_arr_proge [_id_vfx]); } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES THE DESIRED ELEMENT TO VANISH UP TO CERTAIN OPACITY // // _elem Element O // _ti Time interval between which the function will be executed i // _qi Quantity which will be applied on every time interval d // _qf Final quantity which will stop the effect when reached d // ? _func_interval Function to be executed on every interval O Receives the element // ? _func_final Function to be executed at the end of the effect O Receives the element ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.vanish = function (_elem, _ti, _qi, _qf, _func_interval, _func_final) { VFXCore.progEffect (_elem, "vanish", _ti, _qi, _qf, function (_this) { return CliCSS.getOpacity (_this); }, function (_this, _q) { CliCSS.setOpacity (_this, _q); }, _func_interval, _func_final ); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT STOPS THE VANISHING OF THE DESIRED ELEMENT // // _elem Element O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.vanishStop = function (_elem) { VFXCore.progEffectStop (_elem, "vanish"); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES THE DESIRED ELEMENT TO DISPLACE UP TO CERTAIN POSITION // // _elem Element O // _ti Time interval between which the function will be executed i // _xi Quantity which will be applied on the X axys, on every time interval i // _xf Final coordinate on the X axys, which will stop the effect when reached i // _yi Quantity which will be applied on the Y axys, on every time interval i // _yf Final coordinate on the Y axys, which will stop the effect when reached i // ? _func_interval Function to be executed on every interval O Receives the element // ? _func_final Function to be executed at the end of the effect O Receives the element ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.move = function (_elem, _ti, _xi, _xf, _yi, _yf, _func_interval, _func_final) { if (_xi != null && _xf != null) { VFXCore.progEffect (_elem, "move_x", _ti, _xi, _xf, function (_this) { return CliCSS.getPXValue (CliCSS.getCompStyle (_this) ["left"]); }, function (_this, _x) { _this.style ["left"] = _x + "px"; }, _func_interval, _func_final ); } if (_yi != null && _yf != null) { VFXCore.progEffect (_elem, "move_y", _ti, _yi, _yf, function (_this) { return CliCSS.getPXValue (CliCSS.getCompStyle (_this) ["top"]); }, function (_this, _y) { _this.style ["top"] = _y + "px"; }, _func_interval, _func_final ); } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT STOPS THE DISPLACEMENT OF THE DESIRED ELEMENT // // _elem Element O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.moveStop = function (_elem) { VFXCore.progEffectStop (_elem, "move_x"); VFXCore.progEffectStop (_elem, "move_y"); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES THE DESIRED ELEMENT TO RESIZE UP TO CERTAIN SIZE // // _elem Element O // _ti Time interval between which the function will be executed i // _wi Quantity which will be applied to the width, on every time interval i // _wf Final value of the width, which will stop the effect when reached i // _hi Quantity which will be applied to the height, on every time interval i // _hf Final value of the height, which will stop the effect when reached i // ? _func_interval Function to be executed on every interval O Receives the element // ? _func_final Function to be executed at the end of the effect O Receives the element ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.resize = function (_elem, _ti, _wi, _wf, _hi, _hf, _func_interval, _func_final) { if (_wi != null && _wf != null) { VFXCore.progEffect (_elem, "resize_w", _ti, _wi, _wf, function (_this) { return CliCSS.getPXValue (CliCSS.getCompStyle (_this) ["width"]); }, function (_this, _w) { _this.style ["width"] = _w + "px"; }, _func_interval, _func_final ); } if (_hi != null && _hf != null) { VFXCore.progEffect (_elem, "resize_h", _ti, _hi, _hf, function (_this) { return CliCSS.getPXValue (CliCSS.getCompStyle (_this) ["height"]); }, function (_this, _h) { _this.style ["height"] = _h + "px"; }, _func_interval, _func_final ); } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT STOPS THE RESIZING OF THE DESIRED ELEMENT // // _elem Element O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXCore.resizeStop = function (_elem) { VFXCore.progEffectStop (_elem, "resize_w"); VFXCore.progEffectStop (_elem, "resize_h"); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // SENSIBLE EFFECTS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function VFXSens () { } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT APPLIES DIFFERENT CSS STYLES TO AN ELEMENT DEPENDING ON MOUSE EVENTS // // _elem Element O // _list_css_over List of CSS attributes for the "onMouseOver" event O // ? _list_css_down List of CSS attributes for the "onMouseDown" event O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXSens.css = function (_elem, _list_css_over, _list_css_down) { _elem.$list_css_over = _list_css_over; if (_list_css_down != null) { _elem.$list_css_down = _list_css_down; } else { _elem.$list_css_down = _list_css_over; } // ELEMENT EVENT: ON MOUSE OVER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmouseover", function (_eve, _this) { if (! CliEvent.isRelTargetInner (_eve, _this)) { CliCSS.set (_this, _this.$list_css_over, true); } } ); // ELEMENT EVENT: ON MOUSE OUT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmouseout", function (_eve, _this) { if (! CliEvent.isRelTargetInner (_eve, _this)) { CliCSS.restore (_this); } } ); // ELEMENT EVENT: ON MOUSE DOWN ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmousedown", function (_eve, _this) { CliCSS.restore (_this); CliCSS.set (_this, _this.$list_css_down, true); } ); // ELEMENT EVENT: ON MOUSE UP ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmouseup", function (_eve, _this) { CliCSS.restore (_this); CliCSS.set (_this, _this.$list_css_over, true); } ); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT CHANGES THE SOURCE PATH OF AN IMAGE DEPENDING ON MOUSE EVENTS // // _elem Element O // _src_over Source path for the "onMouseOver" event S // ? _src_down Source path for the "onMouseDown" event S ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXSens.img = function (_elem, _src_over, _src_down) { _elem.$src_over = _src_over; if (_src_down != null) { _elem.$src_down = _src_down; } else { _elem.$src_down = _src_over; } // ELEMENT EVENT: ON MOUSE OVER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmouseover", function (_eve, _this) { if (_this.$src_old == null) _this.$src_old = _this.src; _this.src = _this.$src_over; } ); // ELEMENT EVENT: ON MOUSE OUT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmouseout", function (_eve, _this) { _this.src = _this.$src_old; } ); // ELEMENT EVENT: ON MOUSE DOWN ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmousedown", function (_eve, _this) { _this.src = _this.$src_down; } ); // ELEMENT EVENT: ON MOUSE UP ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_elem, "onmouseup", function (_eve, _this) { _this.src = _this.$src_over; } ); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT ALTERNATES LAYERS OF A PILE DEPENDING ON MOUSE EVENTS, USING VANISHING EFFECTS // // _div_cont Layer which acts as container of the pile O // _ti Time interval between which the vanishing effect will be executed i // _qi Opacity which will be applied on every time interval d // // Note 1: The container layer must have a pile of 3 insight layers. // Note 2: If there were more of 3 layers, only the first 3 layers (by order in the DOM) will be used for the effect: // First for "onmouseout" event, second for "onmouseover" event and third for "onmousedown" event. // Note 3: "VFXBuild.pileDiv ()" can be useful to build the required structure. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXSens.vanish = function (_div_cont, _ti, _qi) { // It saves references to the layers which will be used and also to needed constants. _div_cont.$vfx_svan_out = _div_cont.childNodes [2]; _div_cont.$vfx_svan_over = _div_cont.childNodes [1]; _div_cont.$vfx_svan_down = _div_cont.childNodes [0]; _div_cont.$vfx_svan_ti = _ti; _div_cont.$vfx_svan_qi = _qi; // It sets the opacity of every layer. CliCSS.setOpacity (_div_cont.$vfx_svan_over, 0); CliCSS.setOpacity (_div_cont.$vfx_svan_down, 0); // ELEMENT EVENT: ON MOUSE OVER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_div_cont, "onmouseover", function (_eve, _this) { if (! CliEvent.isRelTargetInner (_eve, _this)) { VFXCore.vanishStop (_this.$vfx_svan_over); VFXCore.vanish (_this.$vfx_svan_over, _this.$vfx_svan_ti, _this.$vfx_svan_qi, 100); } } ); // ELEMENT EVENT: ON MOUSE OUT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_div_cont, "onmouseout", function (_eve, _this) { if (! CliEvent.isRelTargetInner (_eve, _this)) { VFXCore.vanishStop (_this.$vfx_svan_over); VFXCore.vanish (_this.$vfx_svan_over, _this.$vfx_svan_ti, _this.$vfx_svan_qi, 0); } } ); // ELEMENT EVENT: ON MOUSE DOWN ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_div_cont, "onmousedown", function (_eve, _this) { VFXCore.vanishStop (_this.$vfx_svan_down); VFXCore.vanish (_this.$vfx_svan_down, _this.$vfx_svan_ti, _this.$vfx_svan_qi, 100, null, function (_this) { VFXCore.vanish (_this, _this.parentNode.$vfx_svan_ti, _this.parentNode.$vfx_svan_qi, 0); } ); } ); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT APPLIES MOTION EFFECTS ON A LAYER DEPENDING ON MOUSE EVENTS // // _div Layer O // _ti Time interval between which the motion effect will be executed i // _qi Pixels quantity which will be applied on every time interval d // _xf Final coordinate on the X axys, which will stop the effect when reached i // _yf Final coordinate on the Y axys, which will stop the effect when reached i ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXSens.move = function (_div, _ti, _qi, _xf, _yf) { // It saves references to the needed constants. _div.$vfx_smove_ti = _ti; _div.$vfx_smove_qi = _qi; _div.$vfx_smove_xf = _xf; _div.$vfx_smove_yf = _yf; _div.$vfx_smove_xo = CliCSS.getPXValue (_div.style ["left"]); _div.$vfx_smove_yo = CliCSS.getPXValue (_div.style ["top"]); // ELEMENT EVENT: ON MOUSE OVER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_div, "onmouseover", function (_eve, _this) { if (! CliEvent.isRelTargetInner (_eve, _this)) { VFXCore.moveStop (_this); VFXCore.move (_this, _this.$vfx_smove_ti, _this.$vfx_smove_qi, _this.$vfx_smove_xf, _this.$vfx_smove_qi, _this.$vfx_smove_yf); } } ); // ELEMENT EVENT: ON MOUSE OUT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// CliElem.addEvent (_div, "onmouseout", function (_eve, _this) { if (! CliEvent.isRelTargetInner (_eve, _this)) { VFXCore.moveStop (_this); VFXCore.move (_this, _this.$vfx_smove_ti, _this.$vfx_smove_qi, _div.$vfx_smove_xo, _this.$vfx_smove_qi, _div.$vfx_smove_yo); } } ); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // VANISHING LOOP ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function VFXVanishLoop () { } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT MAKES THE INFRASTRUCTURE IMPLEMENTATION // // _div_cont Layer which acts as container O // _ti Time interval between which the vanishing effect will be executed i // _qi Opacity quantity which will be applied on every time interval d ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXVanishLoop.conf = function (_div_cont, _ti, _qi) { // It saves references to needed constants. _div_cont.$vfx_vanl_ti = _ti; _div_cont.$vfx_vanl_qi = _qi; // It searches for layers in the container layer. for (var i = 0; i < _div_cont.childNodes.length; i++) { // It saves in the element a reference to the next one to be fired. if (i != _div_cont.childNodes.length - 1) { _div_cont.childNodes [i].$vfx_vanl_next = _div_cont.childNodes [i + 1]; } else { _div_cont.childNodes [i].$vfx_vanl_next = _div_cont.firstChild; } } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT STARTS THE LOOP OF LAYERS // // _div_cont Layer which acts as container O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXVanishLoop.start = function (_div_cont) { // It fires the vanishing of the first element. VFXVanishLoop.exe (_div_cont.lastChild); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT STOPS THE LOOP OF LAYERS // // _div_cont Layer which acts as container O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXVanishLoop.stop = function (_div_cont) { for (var i = 0; i < _div_cont.childNodes.length; i++) { VFXCore.vanishStop (_div_cont.childNodes [i]); } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT EXECUTES THE DECREASING VANISHING OF A LAYER AND THE INCREASING ONE OF THE NEXT ONE // // _div Layer O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXVanishLoop.exe = function (_div) { VFXCore.vanish (_div, _div.parentNode.$vfx_vanl_ti, _div.parentNode.$vfx_vanl_qi, 0); VFXCore.vanish (_div.$vfx_vanl_next, _div.parentNode.$vfx_vanl_ti, _div.parentNode.$vfx_vanl_qi, 100, null, function (_this) { VFXVanishLoop.exe (_this); } ); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // PAGE LOCKING LAYER ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function VFXLockPage () { } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT LOCKS THE PRESENT DOCUMENT WITH A LAYER UNTIL ITS BODY IS FULLY LOADED // // ? _elem Element O // ? _list_css List of CSS attributes O ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXLockPage.add = function (_elem, _list_css) { // If not CSS attributes have been specified, the background color is set to #000000 by default. if (_list_css == null) _list_css = {"backgroundColor": "#000000"}; // It builds, adds and registers the locking layer. var div = VFXBuild.div (_arr_css); CliCSS.set (div, {"position": "fixed", "left": "0px", "top": "0px", "width": "100%", "height": "100%", "textAlign": "center", "zIndex": "1000"}); domBodyGet ().appendChild (div); domBodyGet ().$vfx_locker = div; // It adds a layer in the middle of the locking layer (if specified). if (_elem != null) { var div_elem = VFXBuild.div ({"position": "relative"}); div_elem.appendChild (_elem); domBodyGet ().$vfx_locker.appendChild (div_elem); div_elem.style ["top"] = Math.floor (CliElem.getH (div) / 2 - CliElem.getH (div_elem) / 2) + "px"; } } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT REMOVES, PROGRESSIVELY, THE LAYER WHICH LOCKS THE PRESENT DOCUMENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXLockPage.rem = function () { VFXCore.vanish (domBodyGet ().$vfx_locker, 25, 2, 0, null, function (_this) { _this.style ["visibility"] = "hidden"; } ); } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // SENSIBLE FORM ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// function VFXForm () { } ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// // IT DISABLES ANY BROWSER-SPECIFIC BEHAVIOUR ON THIS FORM, EXCEPT THE [TAB] KEY DISPLACEMENT, AND MAKES // THE FORM TO EXECUTE THE DESIRED FUNCTION WHEN [ENTER] IS PRESSED IN CERTAIN FIELDS. // // _fm Form O // _func Function to be performed when pressing [ENTER] O // // Note 1: "_func" receives the event and the element as arguments. // Note 2: "_func" will affect to text, password, file, select, radio and checkbox inputs fields only. ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// VFXForm.conf = function (_fm, _func) { // It checks every field of the form. var arr_input = _fm.getElementsByTagName ("input"); var first_visible = null; var last_visible = null; for (var i = 0; i < arr_input.length; i++) { switch (arr_input [i].type.toLowerCase ()) { // Exceptions. case "hidden": case "textarea": case "submit": case "reset": case "button": break; // If the field type is "image"... case "image": // It disables the browser-specific behaviour for "onclick" events in this kind of element. CliElem.addEvent (arr_input [i], "onclick", function (_eve, _this) { CliEvent.avoidBrowser (_eve); } ); break; // In other cases... default: // It saves a reference to the function. arr_input [i].$vfx_form_func = _func; // It disables the browser-specific behaviour for "onkeypress" events when [ENTER] is pressed in this kind of element. CliElem.addEvent (arr_input [i], "onkeypress", function (_eve, _this) { if (CliEvent.getKey (_eve) == CliEvent.KEY_ENTER) { CliEvent.avoidBrowser (_eve); _this.$vfx_form_func (_eve, _this); } } ); break; } // It sets the first and last non hidden field. if (arr_input [i].type.toLowerCase () != "hidden" && first_visible == null) first_visible = arr_input [i]; if (arr_input [i].type.toLowerCase () != "hidden") last_visible = arr_input [i]; } // When the last field is reached, if [TAB] is pressed, it should focus the first field of the form again, looping. However, some browsers // displaces the focus over the window chroma elements first. It avoids that behaviour. // ELEMENT EVENT: ON KEY PRESS ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// last_visible.$vfx_form_next = first_visible; // It disables the browser-specific behaviour for "onkeydown" events when [TAB] is pressed in this kind of element. CliElem.addEvent (last_visible, "onkeydown", function (_eve, _this) { if (CliEvent.getKey (_eve) == CliEvent.KEY_TAB) { CliEvent.avoidBrowser (_eve); _this.$vfx_form_next.focus (); } } ); }