Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js') (more/less context) (show whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js | 33 |
1 files changed, 17 insertions, 16 deletions
diff --git a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js index 095e8ed..8df7e0e 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js | |||
@@ -93,26 +93,26 @@ Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Tooltip, Clipperz.PM.UI.Co | |||
93 | this._isVisible = aValue; | 93 | this._isVisible = aValue; |
94 | }, | 94 | }, |
95 | 95 | ||
96 | //------------------------------------------------------------------------- | 96 | //------------------------------------------------------------------------- |
97 | 97 | ||
98 | 'renderSelf': function() { | 98 | 'renderSelf': function() { |
99 | // this.append(this.element(), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[ | 99 | // this.append(this.element(), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[ |
100 | // this.append(MochiKit.DOM.currentDocument().body, {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[ | 100 | // this.append(MochiKit.DOM.currentDocument().body, {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[ |
101 | this.append(MochiKit.DOM.getElement('Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[ | 101 | this.append(MochiKit.DOM.getElement('Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[ |
102 | {tag:'div', id:this.getId('body'), cls:'tooltip_body', children:[ | 102 | {tag:'div', id:this.getId('body'), cls:'tooltip_body', children:[ |
103 | {tag:'div', cls:'tooltip_text', children:[ | 103 | {tag:'div', cls:'tooltip_text', children:[ |
104 | {tag:'span', html:this.text()} | 104 | {tag:'span', html:this.text()} |
105 | ]}, | 105 | ]}//, |
106 | {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'} | 106 | // {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'} |
107 | ]}, | 107 | ]}, |
108 | {tag:'div', id:this.getId('arrow'), cls:'tooltip_arrow'} | 108 | {tag:'div', id:this.getId('arrow'), cls:'tooltip_arrow'} |
109 | ]}); | 109 | ]}); |
110 | 110 | ||
111 | this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body')); | 111 | this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body')); |
112 | // this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h; | 112 | // this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h; |
113 | 113 | ||
114 | MochiKit.Style.hideElement(this.displayElement()); | 114 | MochiKit.Style.hideElement(this.displayElement()); |
115 | MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show'); | 115 | MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show'); |
116 | MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide'); | 116 | MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide'); |
117 | }, | 117 | }, |
118 | 118 | ||
@@ -137,63 +137,64 @@ Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Tooltip, Clipperz.PM.UI.Co | |||
137 | 137 | ||
138 | if (this.isVisible() == false) { | 138 | if (this.isVisible() == false) { |
139 | arrowPosition = {}; | 139 | arrowPosition = {}; |
140 | bodyPosition = {}; | 140 | bodyPosition = {}; |
141 | 141 | ||
142 | this.setIsVisible(true); | 142 | this.setIsVisible(true); |
143 | elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element()); | 143 | elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element()); |
144 | //console.log("ELEMENT SIZE AND POSITION", Clipperz.Base.serializeJSON(elementSizeAndPosition)); | 144 | //console.log("ELEMENT SIZE AND POSITION", Clipperz.Base.serializeJSON(elementSizeAndPosition)); |
145 | //console.log("BOX DIMENSIONS", Clipperz.Base.serializeJSON(this.boxDimensions())); | 145 | //console.log("BOX DIMENSIONS", Clipperz.Base.serializeJSON(this.boxDimensions())); |
146 | switch (this.position()) { | 146 | switch (this.position()) { |
147 | case 'ABOVE': | 147 | case 'ABOVE': |
148 | //console.log("ABOVE"); | 148 | //console.log("ABOVE"); |
149 | MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px'); | 149 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px'); |
150 | bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2); | 150 | bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2); |
151 | bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13; | 151 | bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13; |
152 | 152 | ||
153 | arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); | 153 | // arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); |
154 | arrowPosition.y = elementSizeAndPosition.position.y - 13; | 154 | // arrowPosition.y = elementSizeAndPosition.position.y - 13; |
155 | break; | 155 | break; |
156 | case 'BELOW': | 156 | case 'BELOW': |
157 | //console.log("BELOW"); | 157 | //console.log("BELOW"); |
158 | MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px'); | 158 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px'); |
159 | bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2); | 159 | bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2); |
160 | bodyPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h + 13; | 160 | bodyPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h + 13; |
161 | 161 | ||
162 | arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); | 162 | // arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); |
163 | arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h; | 163 | // arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h; |
164 | break; | 164 | break; |
165 | case 'LEFT': | 165 | case 'LEFT': |
166 | //console.log("LEFT"); | 166 | //console.log("LEFT"); |
167 | MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); | 167 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); |
168 | bodyPosition.x = elementSizeAndPosition.position.x - this.boxDimensions().w - 13; | 168 | bodyPosition.x = elementSizeAndPosition.position.x - this.boxDimensions().w - 13; |
169 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); | 169 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); |
170 | 170 | ||
171 | arrowPosition.x = elementSizeAndPosition.position.x -13; | 171 | // arrowPosition.x = elementSizeAndPosition.position.x -13; |
172 | arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); | 172 | // arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); |
173 | break; | 173 | break; |
174 | case 'RIGHT': | 174 | case 'RIGHT': |
175 | //console.log("RIGHT"); | 175 | //console.log("RIGHT"); |
176 | MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); | 176 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); |
177 | bodyPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w + 13; | 177 | bodyPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w + 13; |
178 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); | 178 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); |
179 | 179 | ||
180 | arrowPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w; | 180 | // arrowPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w; |
181 | arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); | 181 | // arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); |
182 | break; | 182 | break; |
183 | } | 183 | } |
184 | //console.log("X: " + bodyPosition.x + ", Y: " + bodyPosition.y); | 184 | //console.log("X: " + bodyPosition.x + ", Y: " + bodyPosition.y); |
185 | 185 | ||
186 | MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition); | 186 | MochiKit.Style.setElementPosition(this.getId('tooltip'), bodyPosition); |
187 | MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition); | 187 | // MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition); |
188 | // MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition); | ||
188 | MochiKit.Visual.appear(this.displayElement(), {duration:0.4}); | 189 | MochiKit.Visual.appear(this.displayElement(), {duration:0.4}); |
189 | } | 190 | } |
190 | }, | 191 | }, |
191 | 192 | ||
192 | 'hide': function () { | 193 | 'hide': function () { |
193 | if (this.isVisible() == true) { | 194 | if (this.isVisible() == true) { |
194 | MochiKit.Visual.fade(this.displayElement(), {duration:0.4}); | 195 | MochiKit.Visual.fade(this.displayElement(), {duration:0.4}); |
195 | this.setIsVisible(false); | 196 | this.setIsVisible(false); |
196 | } | 197 | } |
197 | }, | 198 | }, |
198 | 199 | ||
199 | //------------------------------------------------------------------------- | 200 | //------------------------------------------------------------------------- |