Diffstat (limited to 'frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js') (more/less context) (ignore whitespace changes)
-rw-r--r-- | frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js | 29 |
1 files changed, 10 insertions, 19 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 8df7e0e..6517d2a 100644 --- a/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js +++ b/frontend/gamma/js/Clipperz/PM/UI/Common/Components/Tooltip.js | |||
@@ -1,214 +1,205 @@ | |||
1 | /* | 1 | /* |
2 | 2 | ||
3 | Copyright 2008-2011 Clipperz Srl | 3 | Copyright 2008-2013 Clipperz Srl |
4 | 4 | ||
5 | This file is part of Clipperz Community Edition. | 5 | This file is part of Clipperz, the online password manager. |
6 | Clipperz Community Edition is an online password manager. | ||
7 | For further information about its features and functionalities please | 6 | For further information about its features and functionalities please |
8 | refer to http://www.clipperz.com. | 7 | refer to http://www.clipperz.com. |
9 | 8 | ||
10 | * Clipperz Community Edition is free software: you can redistribute | 9 | * Clipperz is free software: you can redistribute it and/or modify it |
11 | it and/or modify it under the terms of the GNU Affero General Public | 10 | under the terms of the GNU Affero General Public License as published |
12 | License as published by the Free Software Foundation, either version | 11 | by the Free Software Foundation, either version 3 of the License, or |
13 | 3 of the License, or (at your option) any later version. | 12 | (at your option) any later version. |
14 | 13 | ||
15 | * Clipperz Community Edition is distributed in the hope that it will | 14 | * Clipperz is distributed in the hope that it will be useful, but |
16 | be useful, but WITHOUT ANY WARRANTY; without even the implied | 15 | WITHOUT ANY WARRANTY; without even the implied warranty of |
17 | warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. | 16 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. |
18 | See the GNU Affero General Public License for more details. | 17 | See the GNU Affero General Public License for more details. |
19 | 18 | ||
20 | * You should have received a copy of the GNU Affero General Public | 19 | * You should have received a copy of the GNU Affero General Public |
21 | License along with Clipperz Community Edition. If not, see | 20 | License along with Clipperz. If not, see http://www.gnu.org/licenses/. |
22 | <http://www.gnu.org/licenses/>. | ||
23 | 21 | ||
24 | */ | 22 | */ |
25 | 23 | ||
26 | Clipperz.Base.module('Clipperz.PM.UI.Common.Components'); | 24 | Clipperz.Base.module('Clipperz.PM.UI.Common.Components'); |
27 | 25 | ||
28 | Clipperz.PM.UI.Common.Components.Tooltip = function(args) { | 26 | Clipperz.PM.UI.Common.Components.Tooltip = function(args) { |
29 | args = args || {}; | 27 | args = args || {}; |
30 | 28 | ||
31 | Clipperz.PM.UI.Common.Components.Tooltip.superclass.constructor.apply(this, arguments); | 29 | Clipperz.PM.UI.Common.Components.Tooltip.superclass.constructor.apply(this, arguments); |
32 | 30 | ||
33 | this._element = args.element|| Clipperz.Base.exception.raise('MandatoryParameter'); | 31 | this._element = args.element|| Clipperz.Base.exception.raise('MandatoryParameter'); |
34 | this._text = args.text || Clipperz.Base.exception.raise('MandatoryParameter'); | 32 | this._text = args.text || Clipperz.Base.exception.raise('MandatoryParameter'); |
35 | this._position = args.position || 'BELOW'; //'BELOW', 'ABOVE', 'LEFT', 'RIGHT' | 33 | this._position = args.position || 'BELOW'; //'BELOW', 'ABOVE', 'LEFT', 'RIGHT' |
36 | 34 | ||
37 | this._boxDimensions = null; | 35 | this._boxDimensions = null; |
38 | this._enabled = (typeof(args.enabled) == 'undefined' ? true : args.enabled); | 36 | this._enabled = (typeof(args.enabled) == 'undefined' ? true : args.enabled); |
39 | this._isVisible = false; | 37 | this._isVisible = false; |
40 | 38 | ||
41 | this.renderSelf(); | 39 | this.renderSelf(); |
42 | 40 | ||
43 | return this; | 41 | return this; |
44 | } | 42 | } |
45 | 43 | ||
46 | //============================================================================= | 44 | //============================================================================= |
47 | 45 | ||
48 | Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Tooltip, Clipperz.PM.UI.Common.Components.BaseComponent, { | 46 | Clipperz.Base.extend(Clipperz.PM.UI.Common.Components.Tooltip, Clipperz.PM.UI.Common.Components.BaseComponent, { |
49 | 47 | ||
50 | //------------------------------------------------------------------------- | 48 | //------------------------------------------------------------------------- |
51 | 49 | ||
52 | 'toString': function () { | 50 | 'toString': function () { |
53 | return "Clipperz.PM.UI.Common.Components.Tooltip component"; | 51 | return "Clipperz.PM.UI.Common.Components.Tooltip component"; |
54 | }, | 52 | }, |
55 | 53 | ||
56 | //------------------------------------------------------------------------- | 54 | //------------------------------------------------------------------------- |
57 | 55 | ||
58 | 'text': function () { | 56 | 'text': function () { |
59 | return this._text; | 57 | return this._text; |
60 | }, | 58 | }, |
61 | 59 | ||
62 | 'setText': function (aValue) { | 60 | 'setText': function (aValue) { |
63 | this._text = aValue; | 61 | this._text = aValue; |
64 | }, | 62 | }, |
65 | 63 | ||
66 | //------------------------------------------------------------------------- | 64 | //------------------------------------------------------------------------- |
67 | 65 | ||
68 | 'position': function () { | 66 | 'position': function () { |
69 | return this._position; | 67 | return this._position; |
70 | }, | 68 | }, |
71 | 69 | ||
72 | 'setPosition': function (aValue) { | 70 | 'setPosition': function (aValue) { |
73 | this._position = aValue; | 71 | this._position = aValue; |
74 | }, | 72 | }, |
75 | 73 | ||
76 | //------------------------------------------------------------------------- | 74 | //------------------------------------------------------------------------- |
77 | 75 | ||
78 | 'enabled': function () { | 76 | 'enabled': function () { |
79 | return this._enabled; | 77 | return this._enabled; |
80 | }, | 78 | }, |
81 | 79 | ||
82 | 'setIsEnabled': function (aValue) { | 80 | 'setIsEnabled': function (aValue) { |
83 | this._enabled = aValue; | 81 | this._enabled = aValue; |
84 | }, | 82 | }, |
85 | 83 | ||
86 | //------------------------------------------------------------------------- | 84 | //------------------------------------------------------------------------- |
87 | 85 | ||
88 | 'isVisible': function () { | 86 | 'isVisible': function () { |
89 | return this._isVisible; | 87 | return this._isVisible; |
90 | }, | 88 | }, |
91 | 89 | ||
92 | 'setIsVisible': function (aValue) { | 90 | 'setIsVisible': function (aValue) { |
93 | this._isVisible = aValue; | 91 | this._isVisible = aValue; |
94 | }, | 92 | }, |
95 | 93 | ||
96 | //------------------------------------------------------------------------- | 94 | //------------------------------------------------------------------------- |
97 | 95 | ||
98 | 'renderSelf': function() { | 96 | 'renderSelf': function() { |
99 | // this.append(this.element(), {tag:'div', id:this.getId('tooltip'), cls:'tooltip ' + this.position(), children:[ | 97 | // 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:[ | 98 | // 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:[ | 99 | 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:[ | 100 | {tag:'div', id:this.getId('body'), cls:'tooltip_body', children:[ |
103 | {tag:'div', cls:'tooltip_text', children:[ | 101 | {tag:'div', cls:'tooltip_text', children:[ |
104 | {tag:'span', html:this.text()} | 102 | {tag:'span', html:this.text()} |
105 | ]}//, | 103 | ]}//, |
106 | // {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'} | 104 | // {tag:'div', id:this.getId('footer'), cls:'tooltip_footer'} |
107 | ]}, | 105 | ]}, |
108 | {tag:'div', id:this.getId('arrow'), cls:'tooltip_arrow'} | 106 | {tag:'div', id:this.getId('arrow'), cls:'tooltip_arrow'} |
109 | ]}); | 107 | ]}); |
110 | 108 | ||
111 | this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body')); | 109 | this._boxDimensions = MochiKit.Style.getElementDimensions(this.getId('body')); |
112 | // this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h; | 110 | // this._boxDimensions.h += MochiKit.Style.getElementDimensions(this.getId('footer')).h; |
113 | 111 | ||
114 | MochiKit.Style.hideElement(this.displayElement()); | 112 | MochiKit.Style.hideElement(this.displayElement()); |
115 | MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show'); | 113 | MochiKit.Signal.connect(this.element(), 'onmouseenter', this, 'show'); |
116 | MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide'); | 114 | MochiKit.Signal.connect(this.element(), 'onmouseleave', this, 'hide'); |
117 | }, | 115 | }, |
118 | 116 | ||
119 | //----------------------------------------------------- | 117 | //----------------------------------------------------- |
120 | 118 | ||
121 | 'displayElement': function() { | 119 | 'displayElement': function() { |
122 | return this.getElement('tooltip'); | 120 | return this.getElement('tooltip'); |
123 | }, | 121 | }, |
124 | 122 | ||
125 | //------------------------------------------------------------------------- | 123 | //------------------------------------------------------------------------- |
126 | 124 | ||
127 | 'boxDimensions': function () { | 125 | 'boxDimensions': function () { |
128 | return this._boxDimensions; | 126 | return this._boxDimensions; |
129 | }, | 127 | }, |
130 | 128 | ||
131 | //------------------------------------------------------------------------- | 129 | //------------------------------------------------------------------------- |
132 | 130 | ||
133 | 'show': function () { | 131 | 'show': function () { |
134 | var elementSizeAndPosition; | 132 | var elementSizeAndPosition; |
135 | var arrowPosition; | 133 | var arrowPosition; |
136 | var bodyPosition; | 134 | var bodyPosition; |
137 | 135 | ||
138 | if (this.isVisible() == false) { | 136 | if (this.isVisible() == false) { |
139 | arrowPosition = {}; | 137 | arrowPosition = {}; |
140 | bodyPosition = {}; | 138 | bodyPosition = {}; |
141 | 139 | ||
142 | this.setIsVisible(true); | 140 | this.setIsVisible(true); |
143 | elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element()); | 141 | elementSizeAndPosition = Clipperz.Style.getSizeAndPosition(this.element()); |
144 | //console.log("ELEMENT SIZE AND POSITION", Clipperz.Base.serializeJSON(elementSizeAndPosition)); | ||
145 | //console.log("BOX DIMENSIONS", Clipperz.Base.serializeJSON(this.boxDimensions())); | ||
146 | switch (this.position()) { | 142 | switch (this.position()) { |
147 | case 'ABOVE': | 143 | case 'ABOVE': |
148 | //console.log("ABOVE"); | ||
149 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px'); | 144 | // 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); | 145 | bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2); |
151 | bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13; | 146 | bodyPosition.y = elementSizeAndPosition.position.y - this.boxDimensions().h - 13; |
152 | 147 | ||
153 | // arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); | 148 | // arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); |
154 | // arrowPosition.y = elementSizeAndPosition.position.y - 13; | 149 | // arrowPosition.y = elementSizeAndPosition.position.y - 13; |
155 | break; | 150 | break; |
156 | case 'BELOW': | 151 | case 'BELOW': |
157 | //console.log("BELOW"); | ||
158 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:36, h:13}, 'px'); | 152 | // 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); | 153 | bodyPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - this.boxDimensions().w/2); |
160 | bodyPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h + 13; | 154 | bodyPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h + 13; |
161 | 155 | ||
162 | // arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); | 156 | // arrowPosition.x = elementSizeAndPosition.position.x + (elementSizeAndPosition.dimensions.w/2 - 36/2); |
163 | // arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h; | 157 | // arrowPosition.y = elementSizeAndPosition.position.y + elementSizeAndPosition.dimensions.h; |
164 | break; | 158 | break; |
165 | case 'LEFT': | 159 | case 'LEFT': |
166 | //console.log("LEFT"); | ||
167 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); | 160 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); |
168 | bodyPosition.x = elementSizeAndPosition.position.x - this.boxDimensions().w - 13; | 161 | bodyPosition.x = elementSizeAndPosition.position.x - this.boxDimensions().w - 13; |
169 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); | 162 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); |
170 | 163 | ||
171 | // arrowPosition.x = elementSizeAndPosition.position.x -13; | 164 | // arrowPosition.x = elementSizeAndPosition.position.x -13; |
172 | // arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); | 165 | // arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); |
173 | break; | 166 | break; |
174 | case 'RIGHT': | 167 | case 'RIGHT': |
175 | //console.log("RIGHT"); | ||
176 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); | 168 | // MochiKit.Style.setElementDimensions(this.getId('arrow'), {w:13, h:36}, 'px'); |
177 | bodyPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w + 13; | 169 | bodyPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w + 13; |
178 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); | 170 | bodyPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - this.boxDimensions().h/2); |
179 | 171 | ||
180 | // arrowPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w; | 172 | // arrowPosition.x = elementSizeAndPosition.position.x + elementSizeAndPosition.dimensions.w; |
181 | // arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); | 173 | // arrowPosition.y = elementSizeAndPosition.position.y + (elementSizeAndPosition.dimensions.h/2 - 36/2); |
182 | break; | 174 | break; |
183 | } | 175 | } |
184 | //console.log("X: " + bodyPosition.x + ", Y: " + bodyPosition.y); | ||
185 | 176 | ||
186 | MochiKit.Style.setElementPosition(this.getId('tooltip'), bodyPosition); | 177 | MochiKit.Style.setElementPosition(this.getId('tooltip'), bodyPosition); |
187 | // MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition); | 178 | // MochiKit.Style.setElementPosition(this.getId('body'), bodyPosition); |
188 | // MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition); | 179 | // MochiKit.Style.setElementPosition(this.getId('arrow'), arrowPosition); |
189 | MochiKit.Visual.appear(this.displayElement(), {duration:0.4}); | 180 | MochiKit.Visual.appear(this.displayElement(), {duration:0.4}); |
190 | } | 181 | } |
191 | }, | 182 | }, |
192 | 183 | ||
193 | 'hide': function () { | 184 | 'hide': function () { |
194 | if (this.isVisible() == true) { | 185 | if (this.isVisible() == true) { |
195 | MochiKit.Visual.fade(this.displayElement(), {duration:0.4}); | 186 | MochiKit.Visual.fade(this.displayElement(), {duration:0.4}); |
196 | this.setIsVisible(false); | 187 | this.setIsVisible(false); |
197 | } | 188 | } |
198 | }, | 189 | }, |
199 | 190 | ||
200 | //------------------------------------------------------------------------- | 191 | //------------------------------------------------------------------------- |
201 | /* | 192 | /* |
202 | 'shouldRemoveElementWhenClearningUp': function () { | 193 | 'shouldRemoveElementWhenClearningUp': function () { |
203 | return false; | 194 | return false; |
204 | }, | 195 | }, |
205 | */ | 196 | */ |
206 | //------------------------------------------------------------------------- | 197 | //------------------------------------------------------------------------- |
207 | __syntaxFix__: "syntax fix" | 198 | __syntaxFix__: "syntax fix" |
208 | }); | 199 | }); |
209 | 200 | ||
210 | Clipperz.PM.UI.Common.Components.Tooltip.initTooltips = function () { | 201 | Clipperz.PM.UI.Common.Components.Tooltip.initTooltips = function () { |
211 | Clipperz.DOM.Helper.insertBefore(MochiKit.DOM.currentDocument().body.childNodes[0], {tag:'div', id:'Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'}); | 202 | Clipperz.DOM.Helper.insertBefore(MochiKit.DOM.currentDocument().body.childNodes[0], {tag:'div', id:'Clipperz_PM_UI_Common_Components_Tooltip_wrapperNode'}); |
212 | } | 203 | } |
213 | 204 | ||
214 | MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.Tooltip.initTooltips); | 205 | MochiKit.DOM.addLoadEvent(Clipperz.PM.UI.Common.Components.Tooltip.initTooltips); |