diff options
Diffstat (limited to 'js/components/popup.reel')
-rwxr-xr-x | js/components/popup.reel/popup.html | 8 | ||||
-rwxr-xr-x | js/components/popup.reel/popup.js | 24 |
2 files changed, 17 insertions, 15 deletions
diff --git a/js/components/popup.reel/popup.html b/js/components/popup.reel/popup.html index cc31106e..2262289c 100755 --- a/js/components/popup.reel/popup.html +++ b/js/components/popup.reel/popup.html | |||
@@ -16,7 +16,9 @@ | |||
16 | "owner": { | 16 | "owner": { |
17 | "prototype": "js/components/Popup.reel", | 17 | "prototype": "js/components/Popup.reel", |
18 | "properties": { | 18 | "properties": { |
19 | "element": {"#": "default_popup"} | 19 | "element": {"#": "default_popup"}, |
20 | "popupTooltip": {"#": "tooltip"}, | ||
21 | "popupContent": {"#": "content"} | ||
20 | } | 22 | } |
21 | } | 23 | } |
22 | } | 24 | } |
@@ -27,8 +29,8 @@ | |||
27 | <body> | 29 | <body> |
28 | 30 | ||
29 | <div data-montage-id="default_popup" class="default_popup"> | 31 | <div data-montage-id="default_popup" class="default_popup"> |
30 | <div class="tooltip"><span/></div> | 32 | <div data-montage-id="tooltip" class="tooltip"><span/></div> |
31 | <div class="content"></div> | 33 | <div data-montage-id="content" class="content"></div> |
32 | </div> | 34 | </div> |
33 | 35 | ||
34 | </body> | 36 | </body> |
diff --git a/js/components/popup.reel/popup.js b/js/components/popup.reel/popup.js index ae483ea9..2d89db13 100755 --- a/js/components/popup.reel/popup.js +++ b/js/components/popup.reel/popup.js | |||
@@ -104,7 +104,7 @@ exports.Popup = Montage.create(Component, { | |||
104 | if (!this._content.style.float) { | 104 | if (!this._content.style.float) { |
105 | this._content.style.float = 'left'; | 105 | this._content.style.float = 'left'; |
106 | } | 106 | } |
107 | this.element.getElementsByClassName('content')[0].appendChild(this._content); | 107 | this.popupContent.appendChild(this._content); |
108 | // | 108 | // |
109 | if (!this.tooltip) { | 109 | if (!this.tooltip) { |
110 | this.tooltip = {}; | 110 | this.tooltip = {}; |
@@ -113,16 +113,16 @@ exports.Popup = Montage.create(Component, { | |||
113 | } | 113 | } |
114 | switch (this.tooltip.side.toLowerCase()) { | 114 | switch (this.tooltip.side.toLowerCase()) { |
115 | case 'top': | 115 | case 'top': |
116 | this.element.style.marginTop = (this.element.getElementsByClassName('tooltip')[0].clientHeight) + 'px'; | 116 | this.element.style.marginTop = (this.popupTooltip.clientHeight) + 'px'; |
117 | break; | 117 | break; |
118 | case 'bottom': | 118 | case 'bottom': |
119 | this.element.style.marginTop = -(this.element.clientHeight+(this.element.getElementsByClassName('tooltip')[0].clientHeight)) + 'px'; | 119 | this.element.style.marginTop = -(this.element.clientHeight+(this.popupTooltip.clientHeight)) + 'px'; |
120 | break; | 120 | break; |
121 | case 'left': | 121 | case 'left': |
122 | this.element.style.marginLeft = (this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px'; | 122 | this.element.style.marginLeft = (this.popupTooltip.clientWidth) + 'px'; |
123 | break; | 123 | break; |
124 | case 'right': | 124 | case 'right': |
125 | this.element.style.marginLeft = -(this.element.clientWidth + this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px'; | 125 | this.element.style.marginLeft = -(this.element.clientWidth + this.popupTooltip.clientWidth) + 'px'; |
126 | break; | 126 | break; |
127 | default: | 127 | default: |
128 | //console.log("Error: Tooltip side value of "+this.tooltip.side.toLowerCase()+" property not allowed"); | 128 | //console.log("Error: Tooltip side value of "+this.tooltip.side.toLowerCase()+" property not allowed"); |
@@ -131,22 +131,22 @@ exports.Popup = Montage.create(Component, { | |||
131 | // | 131 | // |
132 | switch (this.tooltip.align.toLowerCase()) { | 132 | switch (this.tooltip.align.toLowerCase()) { |
133 | case 'top': | 133 | case 'top': |
134 | this.element.style.marginTop = -Math.round((this.element.getElementsByClassName('tooltip')[0].clientHeight/2)+this.element.getElementsByClassName('tooltip')[0].offsetTop) + 'px'; | 134 | this.element.style.marginTop = -Math.round((this.popupTooltip.clientHeight/2)+this.popupTooltip.offsetTop) + 'px'; |
135 | break; | 135 | break; |
136 | case 'bottom': | 136 | case 'bottom': |
137 | this.element.style.marginTop = -Math.round(this.element.clientHeight-((this.element.clientHeight - this.element.getElementsByClassName('tooltip')[0].offsetTop)-(this.element.getElementsByClassName('tooltip')[0].clientHeight/2))) + 'px'; | 137 | this.element.style.marginTop = -Math.round(this.element.clientHeight-((this.element.clientHeight - this.popupTooltip.offsetTop)-(this.popupTooltip.clientHeight/2))) + 'px'; |
138 | break; | 138 | break; |
139 | case 'left': | 139 | case 'left': |
140 | this.element.style.marginLeft = -Math.round(this.element.clientWidth-((this.element.clientWidth - this.element.getElementsByClassName('tooltip')[0].offsetLeft)-(this.element.getElementsByClassName('tooltip')[0].clientWidth/2))) + 'px'; | 140 | this.element.style.marginLeft = -Math.round(this.element.clientWidth-((this.element.clientWidth - this.popupTooltip.offsetLeft)-(this.popupTooltip.clientWidth/2))) + 'px'; |
141 | break; | 141 | break; |
142 | case 'right': | 142 | case 'right': |
143 | this.element.style.marginLeft = -(this.element.clientWidth - this.element.getElementsByClassName('tooltip')[0].clientWidth) + 'px'; | 143 | this.element.style.marginLeft = -(this.element.clientWidth - this.popupTooltip.clientWidth) + 'px'; |
144 | break; | 144 | break; |
145 | case 'center': | 145 | case 'center': |
146 | this.element.style.marginLeft = -Math.round(this.element.clientWidth/2-((this.element.clientWidth/2 - this.element.getElementsByClassName('tooltip')[0].offsetLeft)-(this.element.getElementsByClassName('tooltip')[0].clientWidth/2))) + 'px'; | 146 | this.element.style.marginLeft = -Math.round(this.element.clientWidth/2-((this.element.clientWidth/2 - this.popupTooltip.offsetLeft)-(this.popupTooltip.clientWidth/2))) + 'px'; |
147 | break; | 147 | break; |
148 | case 'middle': | 148 | case 'middle': |
149 | this.element.style.marginTop = -Math.round(this.element.clientHeight/2-((this.element.clientHeight/2 - this.element.getElementsByClassName('tooltip')[0].offsetTop)-(this.element.getElementsByClassName('tooltip')[0].clientHeight/2))) + 'px'; | 149 | this.element.style.marginTop = -Math.round(this.element.clientHeight/2-((this.element.clientHeight/2 - this.popupTooltip.offsetTop)-(this.popupTooltip.clientHeight/2))) + 'px'; |
150 | break; | 150 | break; |
151 | default: | 151 | default: |
152 | //console.log("Error: Tooltip align value of "+this.tooltip.align.toLowerCase()+" property not allowed"); | 152 | //console.log("Error: Tooltip align value of "+this.tooltip.align.toLowerCase()+" property not allowed"); |
@@ -170,7 +170,7 @@ exports.Popup = Montage.create(Component, { | |||
170 | enumerable: true, | 170 | enumerable: true, |
171 | value: function () { | 171 | value: function () { |
172 | // | 172 | // |
173 | var longD = '22px', shortD = '10px', shortP = '-10px', longP = '8px', tip = this.element.getElementsByClassName('tooltip')[0]; | 173 | var longD = '22px', shortD = '10px', shortP = '-10px', longP = '8px', tip = this.popupTooltip; |
174 | // | 174 | // |
175 | if (this.tooltip && this.tooltip.side) { | 175 | if (this.tooltip && this.tooltip.side) { |
176 | switch (this.tooltip.side.toLowerCase()) { | 176 | switch (this.tooltip.side.toLowerCase()) { |