diff options
Diffstat (limited to 'node_modules/montage/ui/popup/popup.reel/popup.js')
-rwxr-xr-x | node_modules/montage/ui/popup/popup.reel/popup.js | 69 |
1 files changed, 49 insertions, 20 deletions
diff --git a/node_modules/montage/ui/popup/popup.reel/popup.js b/node_modules/montage/ui/popup/popup.reel/popup.js index fdfb0ef9..f13a6aed 100755 --- a/node_modules/montage/ui/popup/popup.reel/popup.js +++ b/node_modules/montage/ui/popup/popup.reel/popup.js | |||
@@ -5,7 +5,7 @@ | |||
5 | </copyright> */ | 5 | </copyright> */ |
6 | 6 | ||
7 | /** | 7 | /** |
8 | @module "montage/ui/popup/popup.reel" | 8 | @module "montage/ui/popup/popup.reel" |
9 | @requires montage/core/core | 9 | @requires montage/core/core |
10 | @requires montage/ui/component | 10 | @requires montage/ui/component |
11 | */ | 11 | */ |
@@ -190,7 +190,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
190 | */ | 190 | */ |
191 | prepareForDraw: { | 191 | prepareForDraw: { |
192 | value: function() { | 192 | value: function() { |
193 | 193 | this.type = this.type || 'custom'; | |
194 | } | 194 | } |
195 | }, | 195 | }, |
196 | 196 | ||
@@ -224,7 +224,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
224 | 224 | ||
225 | _calculatePosition: { | 225 | _calculatePosition: { |
226 | value: function() { | 226 | value: function() { |
227 | var pos, delegate = this.delegate, anchor = this.anchor, type = (this.type || 'custom'); | 227 | var pos, delegate = this.delegate, anchor = this.anchor, type = this.type; |
228 | 228 | ||
229 | if(delegate && (typeof delegate.positionPopup === 'function')) { | 229 | if(delegate && (typeof delegate.positionPopup === 'function')) { |
230 | var anchorPosition; | 230 | var anchorPosition; |
@@ -303,8 +303,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
303 | value: function() { | 303 | value: function() { |
304 | var el = document.createElement('div'); | 304 | var el = document.createElement('div'); |
305 | el.classList.add('montage-popup-modal-mask'); | 305 | el.classList.add('montage-popup-modal-mask'); |
306 | el.style['z-index'] = 9000; | 306 | el.style['z-index'] = 6999; |
307 | el.classList.add('montage-hide'); | 307 | el.classList.add('montage-invisible'); |
308 | |||
308 | document.body.appendChild(el); | 309 | document.body.appendChild(el); |
309 | return el; | 310 | return el; |
310 | } | 311 | } |
@@ -341,7 +342,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
341 | 342 | ||
342 | show: { | 343 | show: { |
343 | value: function() { | 344 | value: function() { |
344 | var type = this.type || "custom", | 345 | var type = this.type, |
345 | self = this; | 346 | self = this; |
346 | this.application.getPopupSlot(type, this, function(slot) { | 347 | this.application.getPopupSlot(type, this, function(slot) { |
347 | self._popupSlot = slot; | 348 | self._popupSlot = slot; |
@@ -355,11 +356,40 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
355 | value: function() { | 356 | value: function() { |
356 | this._removeEventListeners(); | 357 | this._removeEventListeners(); |
357 | 358 | ||
358 | var type = this.type || "custom", | 359 | var type = this.type, |
359 | self = this; | 360 | self = this; |
360 | this.application.getPopupSlot(type, null, function() { | 361 | |
361 | self.displayed = false; | 362 | this.application.returnPopupSlot(type); |
362 | }); | 363 | this.displayed = false; |
364 | } | ||
365 | }, | ||
366 | |||
367 | _showModalMask: { | ||
368 | value: function() { | ||
369 | this._modalDialogMask = document.querySelector('.montage-popup-modal-mask'); | ||
370 | this._modalDialogMask = this._modalDialogMask || this._createModalMask(); | ||
371 | this._modalDialogMask.classList.remove('montage-invisible'); | ||
372 | } | ||
373 | }, | ||
374 | |||
375 | _hideModalMask: { | ||
376 | value: function() { | ||
377 | // check to see if there is at least one modal dialog in the DOM | ||
378 | // See https://github.com/Motorola-Mobility/montage/issues/32 | ||
379 | var activePopups = this.application._getActivePopupSlots(); | ||
380 | var count = 0; | ||
381 | if(activePopups && activePopups.length > 0) { | ||
382 | // look to see if any content is a modal | ||
383 | var i, len = activePopups.length; | ||
384 | for(i=0; i< len; i++) { | ||
385 | if(activePopups[i].content && activePopups[i].content.modal === true) { | ||
386 | count++; | ||
387 | } | ||
388 | } | ||
389 | } | ||
390 | if(count <= 0) { | ||
391 | this._modalDialogMask.classList.add('montage-invisible'); | ||
392 | } | ||
363 | } | 393 | } |
364 | }, | 394 | }, |
365 | 395 | ||
@@ -372,9 +402,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
372 | // kishore - does the above restriction make sense ? should we restrict it ? | 402 | // kishore - does the above restriction make sense ? should we restrict it ? |
373 | 403 | ||
374 | if(this.modal === true) { | 404 | if(this.modal === true) { |
375 | this._modalDialogMask = document.querySelector('.montage-popup-modal-mask'); | 405 | this.element.classList.add('montage-modal'); |
376 | this._modalDialogMask = this._modalDialogMask || this._createModalMask(); | ||
377 | this.element.classList.add('montage-modal'); | ||
378 | } else { | 406 | } else { |
379 | this.element.classList.remove('montage-modal'); | 407 | this.element.classList.remove('montage-modal'); |
380 | } | 408 | } |
@@ -384,9 +412,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
384 | // For the first release, we position inside the didDraw | 412 | // For the first release, we position inside the didDraw |
385 | //this._positionPopup(); | 413 | //this._positionPopup(); |
386 | 414 | ||
387 | this.element.classList.remove('montage-hide'); | 415 | this.element.classList.remove('montage-invisible'); |
388 | this.content.element.style.display = 'block'; | 416 | this.content.element.style.display = 'block'; |
389 | this.content.element.classList.remove('montage-hide'); | 417 | this.content.element.classList.remove('montage-invisible'); |
390 | // TODO do we want the panel to be focusable? | 418 | // TODO do we want the panel to be focusable? |
391 | // this.content.element.setAttribute("tabindex", "0"); // Make the alert focusable | 419 | // this.content.element.setAttribute("tabindex", "0"); // Make the alert focusable |
392 | 420 | ||
@@ -397,10 +425,10 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
397 | }, this.autoDismiss); | 425 | }, this.autoDismiss); |
398 | } | 426 | } |
399 | } else { | 427 | } else { |
400 | if (!this.element.classList.contains('montage-hide')) { | 428 | if (!this.element.classList.contains('montage-invisible')) { |
401 | this.element.classList.add('montage-hide'); | 429 | this.element.classList.add('montage-invisible'); |
402 | } | 430 | } |
403 | this.content.element.classList.add('montage-hide'); | 431 | this.content.element.classList.add('montage-invisible'); |
404 | if(this._popupSlot) { | 432 | if(this._popupSlot) { |
405 | this._popupSlot.content = null; | 433 | this._popupSlot.content = null; |
406 | } | 434 | } |
@@ -415,8 +443,9 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
415 | value: function() { | 443 | value: function() { |
416 | if (this._displayed) { | 444 | if (this._displayed) { |
417 | this.content.element.focus(); | 445 | this.content.element.focus(); |
446 | |||
418 | if(this.modal === true) { | 447 | if(this.modal === true) { |
419 | this._modalDialogMask.classList.remove('montage-hide'); | 448 | this._showModalMask(); |
420 | } | 449 | } |
421 | 450 | ||
422 | this.position = this.position || this._calculatePosition(); | 451 | this.position = this.position || this._calculatePosition(); |
@@ -424,7 +453,7 @@ var Popup = exports.Popup = Montage.create(Component, { /** @lends module:"modul | |||
424 | 453 | ||
425 | } else { | 454 | } else { |
426 | if(this.modal === true) { | 455 | if(this.modal === true) { |
427 | this._modalDialogMask.classList.add('montage-hide'); | 456 | this._hideModalMask(); |
428 | } | 457 | } |
429 | } | 458 | } |
430 | // kishore: invoking this event in didDraw as we need the dimensions of the content. | 459 | // kishore: invoking this event in didDraw as we need the dimensions of the content. |