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