Source: js/app_modal_dialog.js

  1. /* global BaseUI */
  2. 'use strict';
  4. (function(exports) {
  5.   var _ = navigator.mozL10n.get;
  6.   var _id = 0;
  8.   /**
  9.    * The ModalDialog of the AppWindow.
  10.    *
  11.    * Including **alert**, **prompt**, **confirm**, and
  12.    * **single select** dialogs.
  13.    *
  14.    * @class AppModalDialog
  15.    * @param {AppWindow} app The app window instance
  16.    *                        where this dialog should popup.
  17.    * @extends BaseUI
  18.    */
  19.   var AppModalDialog = function AppModalDialog(app) {
  20.     this.app = app;
  21.     this.containerElement = app.element;
  22.     this.events = [];
  23.     // One to one mapping.
  24.     this.instanceID = _id++;
  25.     this._injected = false;
  26.     this._visible = false;
  27.     app.element.addEventListener('mozbrowsershowmodalprompt', this);
  28.     return this;
  29.   };
  31.   AppModalDialog.prototype = Object.create(BaseUI.prototype);
  33.   AppModalDialog.prototype.CLASS_NAME = 'AppModalDialog';
  35.   AppModalDialog.prototype.ELEMENT_PREFIX = 'modal-dialog-';
  37.   AppModalDialog.prototype.customID = function amd_customID() {
  38.     if (this.app) {
  39.       return '[' + this.app.origin + ']';
  40.     } else {
  41.       return '';
  42.     }
  43.   };
  45.   AppModalDialog.prototype.handleEvent = function amd_handleEvent(evt) {
  46.     this.app.debug('handling ' + evt.type);
  47.     evt.preventDefault();
  48.     evt.stopPropagation();
  49.     this.events.push(evt);
  50.     this.menuHeight = 0;
  51.     if (!this._injected) {
  52.       this.render();
  53.     }
  54.     this.show();
  55.     this._injected = true;
  56.   };
  58.   AppModalDialog.prototype.isVisible = function amd_isVisible() {
  59.     return this._visible;
  60.   };
  62.   AppModalDialog.prototype._fetchElements = function amd__fetchElements() {
  63.     this.element = document.getElementById(this.CLASS_NAME + this.instanceID);
  64.     this.elements = {};
  66.     var toCamelCase = function toCamelCase(str) {
  67.       return str.replace(/\-(.)/g, function replacer(str, p1) {
  68.         return p1.toUpperCase();
  69.       });
  70.     };
  72.     this.elementClasses = ['alert', 'alert-ok', 'alert-message',
  73.       'prompt', 'prompt-ok', 'prompt-cancel', 'prompt-input', 'prompt-message',
  74.       'confirm', 'confirm-ok', 'confirm-cancel', 'confirm-message',
  75.       'select-one', 'select-one-cancel', 'select-one-menu', 'select-one-title',
  76.       'alert-title', 'confirm-title', 'prompt-title',
  77.       'custom-prompt', 'custom-prompt-message', 'custom-prompt-buttons',
  78.       'custom-prompt-checkbox'];
  81.     // Loop and add element with camel style name to Modal Dialog attribute.
  82.     this.elementClasses.forEach(function createElementRef(name) {
  83.       this.elements[toCamelCase(name)] =
  84.         this.element.querySelector('.' + this.ELEMENT_PREFIX + name);
  85.     }, this);
  87.     this.elements.menu = this.element.querySelector('menu');
  88.   };
  90.   AppModalDialog.prototype._registerEvents = function amd__registerEvents() {
  91.     var elements = this.elements;
  92.     for (var id in elements) {
  93.       var tagName = elements[id].tagName.toLowerCase();
  94.       if (tagName == 'button' || tagName == 'ul') {
  95.         if (elements[id].classList.contains('confirm')) {
  96.           elements[id].addEventListener('click',
  97.             this.confirmHandler.bind(this));
  98.         } else if (elements[id].classList.contains('cancel')) {
  99.           elements[id].addEventListener('click', this.cancelHandler.bind(this));
  100.         }
  101.       }
  102.     }
  103.   };
  105.   AppModalDialog.prototype.view = function amd_view() {
  106.     var id = this.CLASS_NAME + this.instanceID;
  107.     return `<div class="modal-dialog" id="${id}">
  108.             <form class="modal-dialog-alert generic-dialog"
  109.             role="dialog" tabindex="-1">
  110.             <div class="modal-dialog-message-container inner">
  111.               <h3 class="modal-dialog-alert-title"></h3>
  112.               <p>
  113.                 <span class="modal-dialog-alert-message"></span>
  114.               </p>
  115.             </div>
  116.             <menu>
  117.               <button class="modal-dialog-alert-ok confirm affirmative"
  118.               data-l10n-id="ok"></button>
  119.             </menu>
  120.           </form>
  121.           <form class="modal-dialog-confirm generic-dialog"
  122.           role="dialog" tabindex="-1">
  123.             <div class="modal-dialog-message-container inner">
  124.               <h3 class="modal-dialog-confirm-title"></h3>
  125.               <p>
  126.                 <span class="modal-dialog-confirm-message"></span>
  127.               </p>
  128.             </div>
  129.             <menu data-items="2">
  130.               <button class="modal-dialog-confirm-cancel cancel"
  131.               data-l10n-id="cancel"></button>
  132.               <button class="modal-dialog-confirm-ok confirm affirmative"
  133.               data-l10n-id="ok"></button>
  134.             </menu>
  135.           </form>
  136.           <form class="modal-dialog-prompt generic-dialog"
  137.             role="dialog" tabindex="-1">
  138.             <div class="modal-dialog-message-container inner">
  139.               <h3 class="modal-dialog-prompt-title"></h3>
  140.               <p>
  141.                 <span class="modal-dialog-prompt-message"></span>
  142.                 <input class="modal-dialog-prompt-input" />
  143.               </p>
  144.             </div>
  145.             <menu data-items="2">
  146.               <button class="modal-dialog-prompt-cancel cancel"
  147.                data-l10n-id="cancel"></button>
  148.               <button class="modal-dialog-prompt-ok confirm affirmative"
  149.               data-l10n-id="ok"></button>
  150.             </menu>
  151.           </form>
  152.           <form class="modal-dialog-select-one generic-dialog"
  153.             role="dialog" tabindex="-1">
  154.             <div class="modal-dialog-message-container inner">
  155.               <h3 class="modal-dialog-select-one-title"></h3>
  156.               <ul class="modal-dialog-select-one-menu"></ul>
  157.             </div>
  158.             <menu>
  159.               <button class="modal-dialog-select-one-cancel cancel"
  160.               data-l10n-id="cancel"></button>
  161.             </menu>
  162.           </form>
  163.           <form class="modal-dialog-custom-prompt generic-dialog"
  164.             role="dialog" tabindex="-1">
  165.             <div class="modal-dialog-message-container inner">
  166.               <h3 class="modal-dialog-custom-prompt-title"></h3>
  167.               <p class="modal-dialog-custom-prompt-message"></p>
  168.               <label class="pack-checkbox">
  169.                 <input class="modal-dialog-custom-prompt-checkbox"
  170.                 type="checkbox"/>
  171.                 <span></span>
  172.               </label>
  173.             </div>
  174.             <menu class="modal-dialog-custom-prompt-buttons"></menu>
  175.           </form>
  176.         </div>`;
  177.   };
  179.   AppModalDialog.prototype.processNextEvent = function amd_processNextEvent() {
  180.     this.events.splice(0, 1);
  181.     if (this.events.length) {
  182.       this.show();
  183.     } else {
  184.       this.hide();
  185.     }
  186.   };
  188.   AppModalDialog.prototype.kill = function amd_kill() {
  189.     this._visible = false;
  190.     this.containerElement.removeChild(this.element);
  191.   };
  193.   // Show relative dialog and set message/input value well
  194.   AppModalDialog.prototype.show = function amd_show() {
  195.     if (!this.events.length) {
  196.       return;
  197.     }
  199.     this._visible = true;
  200.     var evt = this.events[0];
  202.     var message = evt.detail.message || '';
  203.     var title = this._getTitle(evt.detail.title);
  204.     var elements = this.elements;
  206.     var type = evt.detail.promptType || evt.detail.type;
  208.     switch (type) {
  209.       case 'alert':
  210.         elements.alertTitle.textContent = title;
  211.         elements.alertMessage.textContent = message;
  212.         elements.alert.classList.add('visible');
  213.         elements.alertOk.textContent = evt.yesText ? evt.yesText : _('ok');
  214.         elements.alert.focus();
  216.         this.updateMaxHeight();
  217.         break;
  219.       case 'prompt':
  220.         elements.prompt.classList.add('visible');
  221.         elements.promptInput.value = evt.detail.initialValue;
  222.         elements.promptTitle.textContent = title;
  223.         elements.promptMessage.textContent = message;
  224.         elements.promptOk.textContent = evt.yesText ? evt.yesText : _('ok');
  225.         elements.promptCancel.textContent = evt.noText ?
  226.           evt.noText : _('cancel');
  227.         elements.prompt.focus();
  228.         break;
  230.       case 'confirm':
  231.         elements.confirm.classList.add('visible');
  232.         elements.confirmTitle.textContent = title;
  233.         elements.confirmMessage.textContent = message;
  234.         elements.confirmOk.textContent = evt.yesText ? evt.yesText : _('ok');
  235.         elements.confirmCancel.textContent = evt.noText ?
  236.           evt.noText : _('cancel');
  237.         elements.confirm.focus();
  238.         break;
  240.       case 'selectone':
  241.         this.buildSelectOneDialog(message);
  242.         elements.selectOne.classList.add('visible');
  243.         elements.selectOne.focus();
  244.         break;
  246.       case 'custom-prompt':
  247.         var customPrompt = evt.detail;
  248.         elements.customPrompt.classList.add('visible');
  249.         elements.customPromptMessage.textContent = customPrompt.message;
  250.         // Display custom list of buttons
  251.         elements.customPromptButtons.innerHTML = '';
  252.         elements.customPromptButtons.setAttribute('data-items',
  253.                                                   customPrompt.buttons.length);
  254.         var domElement = null;
  255.         for (var i = customPrompt.buttons.length - 1; i >= 0; i--) {
  256.           var button = customPrompt.buttons[i];
  257.           domElement = document.createElement('button');
  258.           domElement.dataset.buttonIndex = i;
  259.           if (button.messageType === 'builtin') {
  260.             domElement.setAttribute('data-l10n-id', button.message);
  261.           } else if (button.messageType === 'custom') {
  262.             // For custom button, we assume that the text is already translated
  263.             domElement.textContent = button.message;
  264.           } else {
  265.             console.error('Unexpected button type : ' + button.messageType);
  266.             continue;
  267.           }
  268.           domElement.addEventListener('click', this.confirmHandler.bind(this));
  269.           elements.customPromptButtons.appendChild(domElement);
  270.         }
  271.         domElement.classList.add('affirmative');
  273.         // Eventualy display a checkbox:
  274.         var checkbox = elements.customPromptCheckbox;
  275.         if (customPrompt.showCheckbox) {
  276.           if (customPrompt.checkboxCheckedByDefault) {
  277.             checkbox.setAttribute('checked', 'true');
  278.           } else {
  279.             checkbox.removeAttribute('checked');
  280.           }
  281.           // We assume that checkbox custom message is already translated
  282.           checkbox.nextElementSibling.textContent =
  283.             customPrompt.checkboxMessage;
  284.         } else {
  285.           checkbox.parentNode.classList.add('hidden');
  286.         }
  288.         elements.customPrompt.focus();
  289.         break;
  290.     }
  292.     this.app.browser.element.setAttribute('aria-hidden', true);
  293.     this.element.classList.add('visible');
  294.   };
  296.   AppModalDialog.prototype.hide = function amd_hide() {
  297.     this._visible = false;
  298.     this.element.blur();
  299.     this.app.browser.element.removeAttribute('aria-hidden');
  300.     this.element.classList.remove('visible');
  301.     if (this.app) {
  302.       this.app.focus();
  303.     }
  304.     if (!this.events.length) {
  305.       return;
  306.     }
  308.     var evt = this.events[0];
  309.     var type = evt.detail.promptType || evt.detail.type;
  310.     if (type === 'prompt') {
  311.       this.elements.promptInput.blur();
  312.     }
  313.     this.elements[type].classList.remove('visible');
  314.   };
  316.   // When user clicks OK button on alert/confirm/prompt
  317.   AppModalDialog.prototype.confirmHandler =
  318.     function amd_confirmHandler(clickEvt) {
  319.       if (!this.events.length) {
  320.         return;
  321.       }
  323.       clickEvt.preventDefault();
  325.       var elements = this.elements;
  327.       var evt = this.events[0];
  329.       var type = evt.detail.promptType || evt.detail.type;
  330.       switch (type) {
  331.         case 'alert':
  332.           elements.alert.classList.remove('visible');
  333.           break;
  335.         case 'prompt':
  336.           evt.detail.returnValue = elements.promptInput.value;
  337.           elements.prompt.classList.remove('visible');
  338.           break;
  340.         case 'confirm':
  341.           evt.detail.returnValue = true;
  342.           elements.confirm.classList.remove('visible');
  343.           break;
  345.         case 'custom-prompt':
  346.           var returnValue = {
  347.             selectedButton: clickEvt.target.dataset.buttonIndex
  348.           };
  349.           if (evt.detail.showCheckbox) {
  350.             returnValue.checked = elements.customPromptCheckbox.checked;
  351.           }
  352.           evt.detail.returnValue = returnValue;
  353.           elements.customPrompt.classList.remove('visible');
  354.           break;
  355.       }
  357.       if (evt.detail.unblock) {
  358.         evt.detail.unblock();
  359.       }
  361.       this.processNextEvent();
  362.     };
  364.   // When user clicks cancel button on confirm/prompt or
  365.   // when the user try to escape the dialog with the escape key
  366.   AppModalDialog.prototype.cancelHandler =
  367.     function amd_cancelHandler(clickEvt) {
  368.       if (!this.events.length) {
  369.         return;
  370.       }
  372.       clickEvt.preventDefault();
  373.       var evt = this.events[0];
  374.       var elements = this.elements;
  376.       var type = evt.detail.promptType || evt.detail.type;
  377.       switch (type) {
  378.         case 'alert':
  379.           elements.alert.classList.remove('visible');
  380.           break;
  382.         case 'prompt':
  383.           /* return null when click cancel */
  384.           evt.detail.returnValue = null;
  385.           elements.prompt.classList.remove('visible');
  386.           break;
  388.         case 'confirm':
  389.           /* return false when click cancel */
  390.           evt.detail.returnValue = false;
  391.           elements.confirm.classList.remove('visible');
  392.           break;
  394.         case 'selectone':
  395.           /* return null when click cancel */
  396.           evt.detail.returnValue = null;
  397.           elements.selectOne.classList.remove('visible');
  398.           break;
  399.       }
  401.       if (evt.detail.unblock) {
  402.         evt.detail.unblock();
  403.       }
  405.       this.processNextEvent();
  406.     };
  408.   // When user selects an option on selectone dialog
  409.   AppModalDialog.prototype.selectOneHandler =
  410.     function amd_selectOneHandler(target) {
  411.       if (!this.events.length) {
  412.         return;
  413.       }
  415.       var elements = this.elements;
  417.       var evt = this.events[0];
  419.       evt.detail.returnValue = target.id;
  420.       elements.selectOne.classList.remove('visible');
  422.       if (evt.detail.unblock) {
  423.         evt.detail.unblock();
  424.       }
  426.       this.processNextEvent();
  427.     };
  429.   AppModalDialog.prototype.updateMaxHeight = function() {
  430.     // Setting maxHeight for being able to scroll long
  431.     // texts: formHeight - menuHeight - titleHeight - margin
  432.     // We should fix this in a common way for all the dialogs
  433.     // in the building blocks layer: Bug 1096902
  434.     this.menuHeight = this.menuHeight || this.elements.menu.offsetHeight;
  435.     var messageHeight = this.element.offsetHeight - this.menuHeight;
  436.     messageHeight -= this.elements.alertTitle.offsetHeight;
  437.     var margin = window.getComputedStyle(this.elements.alertTitle).marginBottom;
  438.     var messageContainer = this.elements.alert.querySelector('.inner p');
  439.     var calc = 'calc(' + messageHeight + 'px - ' + margin + ')';
  440.     messageContainer.style.maxHeight = calc;
  441.   };
  443.   AppModalDialog.prototype._getTitle =
  444.     function amd__getTitle(title) {
  445.       //
  446.       // XXX Bug 982006, subsystems like uriloader still report errors with
  447.       // titles which are important to the user for context in diagnosing
  448.       // issues.
  449.       //
  450.       // However, we will ignore all titles containing a URL using the app
  451.       // protocol. These types of titles simply indicate that the active
  452.       // application is prompting and are more confusing to the user than
  453.       // useful. Instead we will return the application name if there is one
  454.       // or an empty string.
  455.       //
  456.       if (!title ||
  457.           title.includes('app://')) {
  458.         return this.app.name || '';
  459.       }
  461.       return title;
  462.     };
  463.   exports.AppModalDialog = AppModalDialog;
  464. }(window));