Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Common') (more/less context) (ignore 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 | |||
@@ -57,157 +57,158 @@ Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Tooltip, Clipperz.PM.UI.Co | |||
57 | 57 | ||
58 | 'text': function () { | 58 | 'text': function () { |
59 | return this._text; | 59 | return this._text; |
60 | }, | 60 | }, |
61 | 61 | ||
62 | 'setText': function (aValue) { | 62 | 'setText': function (aValue) { |
63 | this._text = aValue; | 63 | this._text = aValue; |
64 | }, | 64 | }, |
65 | 65 | ||
66 | //------------------------------------------------------------------------- | 66 | //------------------------------------------------------------------------- |
67 | 67 | ||
68 | 'position': function () { | 68 | 'position': function () { |
69 | return this._position; | 69 | return this._position; |
70 | }, | 70 | }, |
71 | 71 | ||
72 | 'setPosition': function (aValue) { | 72 | 'setPosition': function (aValue) { |
73 | this._position = aValue; | 73 | this._position = aValue; |
74 | }, | 74 | }, |
75 | 75 | ||
76 | //------------------------------------------------------------------------- | 76 | //------------------------------------------------------------------------- |
77 | 77 | ||
78 | 'enabled': function () { | 78 | 'enabled': function () { |
79 | return this._enabled; | 79 | return this._enabled; |
80 | }, | 80 | }, |
81 | 81 | ||
82 | 'setIsEnabled': function (aValue) { | 82 | 'setIsEnabled': function (aValue) { |
83 | this._enabled = aValue; | 83 | this._enabled = aValue; |
84 | }, | 84 | }, |
85 | 85 | ||
86 | //------------------------------------------------------------------------- | 86 | //------------------------------------------------------------------------- |
87 | 87 | ||
88 | 'isVisible': function () { | 88 | 'isVisible': function () { |
89 | return this._isVisible; | 89 | return this._isVisible; |
90 | }, | 90 | }, |
91 | 91 | ||
92 | 'setIsVisible': function (aValue) { | 92 | 'setIsVisible': function (aValue) { |
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 | ||
119 | //----------------------------------------------------- | 119 | //----------------------------------------------------- |
120 | 120 | ||
121 | 'displayElement': function() { | 121 | 'displayElement': function() { |
122 | return this.getElement('tooltip'); | 122 | return this.getElement('tooltip'); |
123 | }, | 123 | }, |
124 | 124 | ||
125 | //------------------------------------------------------------------------- | 125 | //------------------------------------------------------------------------- |
126 | 126 | ||
127 | 'boxDimensions': function () { | 127 | 'boxDimensions': function () { |
128 | return this._boxDimensions; | 128 | return this._boxDimensions; |
129 | }, | 129 | }, |
130 | 130 | ||
131 | //------------------------------------------------------------------------- | 131 | //------------------------------------------------------------------------- |
132 | 132 | ||
133 | 'show': function () { | 133 | 'show': function () { |
134 | var elementSizeAndPosition; | 134 | var elementSizeAndPosition; |
135 | var arrowPosition; | 135 | var arrowPosition; |
136 | var bodyPosition; | 136 | var bodyPosition; |
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 | //------------------------------------------------------------------------- |
200 | /* | 201 | /* |
201 | 'shouldRemoveElementWhenClearningUp': function () { | 202 | 'shouldRemoveElementWhenClearningUp': function () { |
202 | return false; | 203 | return false; |
203 | }, | 204 | }, |
204 | */ | 205 | */ |
205 | //------------------------------------------------------------------------- | 206 | //------------------------------------------------------------------------- |
206 | __syntaxFix__: "syntax fix" | 207 | __syntaxFix__: "syntax fix" |
207 | }); | 208 | }); |
208 | 209 | ||
209 | Clipperz.PM.UI.Common.Components.Tooltip.initTooltips = function () { | 210 | Clipperz.PM.UI.Common.Components.Tooltip.initTooltips = function () { |
210 | Clipperz.DOM.Helper.insertBefore(MochiKit.DOM.currentDocument().body.childNodes[0], {tag:'div', id:'Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'}); | 211 | Clipperz.DOM.Helper.insertBefore(MochiKit.DOM.currentDocument().body.childNodes[0], {tag:'div', id:'Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'}); |
211 | } | 212 | } |
212 | 213 | ||
213 | MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.Tooltip.initTooltips); | 214 | MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.Tooltip.initTooltips); |