API Documentation
Warning: DOMDocument::loadHTMLFile() [domdocument.loadhtmlfile]: htmlParseEntityRef: no name in jsdoc/symbols/src/src_gui_gadget.js.html, line: 126 in /homepages/22/d163487924/htdocs/glge/wp-content/themes/glge/manual.php on line 29
Warning: DOMDocument::loadHTMLFile() [domdocument.loadhtmlfile]: htmlParseEntityRef: no name in jsdoc/symbols/src/src_gui_gadget.js.html, line: 126 in /homepages/22/d163487924/htdocs/glge/wp-content/themes/glge/manual.php on line 29
1 /* 2 Copyright (c) 2011 Martin Ruenz 3 4 Permission is hereby granted, free of charge, to any person obtaining a copy 5 of this software and associated documentation files (the "Software"), to deal 6 in the Software without restriction, including without limitation the rights 7 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 8 copies of the Software, and to permit persons to whom the Software is 9 furnished to do so, subject to the following conditions: 10 11 The above copyright notice and this permission notice shall be included in 12 all copies or substantial portions of the Software. 13 14 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 15 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 16 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 17 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 18 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 19 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 20 THE SOFTWARE. 21 */ 22 23 /** 24 * @fileOverview 25 * @name gadget.js 26 * @author seamonkey@uni-koblenz.de 27 */ 28 29 (function(GLGE){ 30 if(typeof(GLGE.GUI) == "undefined"){ 31 /** 32 * @namespace Holds the functionality of the GUI 33 */ 34 GLGE.GUI = {}; 35 } 36 (function(GUI){ 37 38 /** 39 * @class Gadget Gadgets are more complex widgets. One could think of them as windows. They may contain widgets. 40 */ 41 GUI.Gadget=function(){ 42 43 // setup new DOM-Object 44 45 // root 46 this.domGadgetRoot = document.createElement('div'); 47 this.domGadgetRoot.setAttribute('class','glge-gui-gadget-root'); 48 this.domGadgetRoot.style.position = 'absolute'; 49 this.domGadgetRoot.style.top = '0px'; 50 51 // Outer Wrapper 52 this.domGadgetOuterWrapper = document.createElement('div'); 53 this.domGadgetOuterWrapper.setAttribute('class','glge-gui-gadget-OuterWrapper'); 54 this.domGadgetOuterWrapper.style.position = 'relative'; 55 this.domGadgetRoot.appendChild(this.domGadgetOuterWrapper); 56 57 // Inner Wrapper 58 this.domGadgetInnerWrapper = document.createElement('div'); 59 this.domGadgetInnerWrapper.setAttribute('class','glge-gui-gadget-InnerWrapper'); 60 this.domGadgetInnerWrapper.style.position = 'relative'; 61 this.domGadgetOuterWrapper.appendChild(this.domGadgetInnerWrapper); 62 63 // object 64 this.domGadgetObject = document.createElement('div'); 65 this.domGadgetObject.setAttribute('class','glge-gui-gadget'); 66 this.domGadgetObject.style.position = 'relative'; 67 this.domGadgetInnerWrapper.appendChild(this.domGadgetObject); 68 69 // footer 70 this.domGadgetFooter = document.createElement('div'); 71 this.domGadgetFooter.setAttribute('class','glge-gui-gadget-footer'); 72 this.domGadgetFooter.style.clear = 'both'; 73 this.domGadgetRoot.appendChild(this.domGadgetFooter); 74 75 // variables 76 77 this.position = {}; 78 this.position.x = 'middle'; 79 this.position.y = 'middle'; 80 81 this.updatePosition(); 82 } 83 84 85 GUI.Gadget.prototype.domGadgetRoot = null; // div: attached to dom 86 GUI.Gadget.prototype.domGadgetOuterWrapper = null; // div: wrapper for css (vertical align) 87 GUI.Gadget.prototype.domGadgetInnerWrapper = null; // div: wrapper for css (horizontal align) 88 GUI.Gadget.prototype.domGadgetObject = null; // div: actual gadget 89 GUI.Gadget.prototype.domGadgetFooter = null; // div: footer 90 GUI.Gadget.prototype.domGadgetParent = null; // parent object, already in dom 91 GUI.Gadget.prototype.position = null; // position.x, position.y 92 93 /** 94 * This function sets the position of the gadget 95 * @param {object} position position.x, possible values: "left", "middle", "right", number<br /> 96 * position.y, possible values: "top", "middle", "bottom", number 97 */ 98 GUI.Gadget.prototype.setPosition = function(position){ 99 if(position){ 100 if(position.x) 101 this.position.x = position.x; 102 if(position.y) 103 this.position.y = position.y; 104 } 105 this.updatePosition(); 106 } 107 108 /** 109 * This function changes css attributes in order to position the gadget 110 * @param {object} position position.x, possible values: "left", "middle", "right"<br /> 111 * position.y, possible values: "top", "middle", "bottom" 112 */ 113 // TODO: Possibility to set the position absolute (e.g. x= 15, y=20) 114 GUI.Gadget.prototype.updatePosition = function(){ 115 116 if(!this.domGadgetParent) return; 117 118 var parentPosition = ''; 119 if(document.defaultView && document.defaultView.getComputedStyle) 120 parentPosition = document.defaultView.getComputedStyle(this.domGadgetParent,null).getPropertyValue('position'); 121 else if (this.domGadgetParent.currentStyle) 122 parentPosition = this.domGadgetParent.currentStyle['position']; 123 124 if(parentPosition == 'absolute'){ 125 126 this.domGadgetRoot.style.width = '100%'; 127 this.domGadgetRoot.style.height = '100%'; 128 this.domGadgetRoot.style.display = 'table'; 129 130 this.domGadgetOuterWrapper.style.display = 'table-cell'; 131 132 if(this.position.y == "top"){ 133 this.domGadgetOuterWrapper.style.verticalAlign = 'top'; 134 } 135 else if(this.position.y == "middle"){ 136 this.domGadgetOuterWrapper.style.verticalAlign = 'middle'; 137 } 138 else if(this.position.y == "bottom"){ 139 this.domGadgetOuterWrapper.style.verticalAlign = 'bottom'; 140 } 141 142 if(this.position.x == "left"){ 143 144 this.domGadgetInnerWrapper.style.cssFloat = 'left'; 145 this.domGadgetInnerWrapper.style.left = '0px'; 146 147 this.domGadgetObject.style.cssFloat = 'left'; 148 this.domGadgetObject.style.left = '0px'; 149 } 150 else if(this.position.x == "middle"){ 151 152 this.domGadgetInnerWrapper.style.cssFloat = 'right'; 153 this.domGadgetInnerWrapper.style.right = '50%'; 154 155 this.domGadgetObject.style.cssFloat = 'left'; 156 this.domGadgetObject.style.right = '-50%'; 157 } 158 else if(this.position.x == "right"){ 159 160 this.domGadgetInnerWrapper.style.cssFloat = 'right'; 161 this.domGadgetInnerWrapper.style.right = '0px'; 162 163 this.domGadgetObject.style.cssFloat = 'right'; 164 this.domGadgetObject.style.right = '0px'; 165 } 166 }else{ // TODO: css would be much better! 167 168 if(this.position.y == "top"){ 169 this.domGadgetRoot.style.top = this.domGadgetParent.offsetTop; 170 } 171 else if(this.position.y == "middle"){ 172 this.domGadgetRoot.style.top = this.domGadgetParent.offsetTop + this.domGadgetParent.offsetHeight / 2 - this.domGadgetRoot.offsetHeight / 2; 173 } 174 else if(this.position.y == "bottom"){ 175 this.domGadgetRoot.style.top = this.domGadgetParent.offsetTop + this.domGadgetParent.offsetHeight - this.domGadgetRoot.offsetHeight; 176 } 177 178 if(this.position.x == "left"){ 179 this.domGadgetRoot.style.left = this.domGadgetParent.offsetLeft; 180 } 181 else if(this.position.x == "middle"){ 182 this.domGadgetRoot.style.left = this.domGadgetParent.offsetLeft + this.domGadgetParent.offsetWidth / 2 - this.domGadgetRoot.offsetWidth / 2; 183 } 184 else if(this.position.x == "right"){ 185 this.domGadgetRoot.style.left = this.domGadgetParent.offsetLeft + this.domGadgetParent.offsetWidth - this.domGadgetRoot.offsetWidth; 186 } 187 } 188 } 189 190 /** 191 * Add Gadget to DOM 192 * @param {object} element Parent element of the gadget 193 * @param {object} [position] position.x, possible values: "left", "middle", "right"<br /> 194 * position.y, possible values: "top", "middle", "bottom" 195 */ 196 GUI.Gadget.prototype.addToDOM = function(element, position){ 197 198 this.domGadgetParent = element; 199 200 // add gadget to the document 201 this.domGadgetParent.appendChild(this.domGadgetRoot); 202 203 this.setPosition(position); 204 } 205 206 207 })(GLGE.GUI);})(GLGE); 208
