[Summary view] [Print] [Text view]

   1  (function () {
   2    'use strict';
   3  
   4    function _defineProperties(target, props) {
   5      for (var i = 0; i < props.length; i++) {
   6        var descriptor = props[i];
   7        descriptor.enumerable = descriptor.enumerable || false;
   8        descriptor.configurable = true;
   9        if ("value" in descriptor) descriptor.writable = true;
  10        Object.defineProperty(target, descriptor.key, descriptor);
  11      }
  12    }
  13  
  14    function _createClass(Constructor, protoProps, staticProps) {
  15      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  16      if (staticProps) _defineProperties(Constructor, staticProps);
  17      Object.defineProperty(Constructor, "prototype", {
  18        writable: false
  19      });
  20      return Constructor;
  21    }
  22  
  23    function _inheritsLoose(subClass, superClass) {
  24      subClass.prototype = Object.create(superClass.prototype);
  25      subClass.prototype.constructor = subClass;
  26  
  27      _setPrototypeOf(subClass, superClass);
  28    }
  29  
  30    function _getPrototypeOf(o) {
  31      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
  32        return o.__proto__ || Object.getPrototypeOf(o);
  33      };
  34      return _getPrototypeOf(o);
  35    }
  36  
  37    function _setPrototypeOf(o, p) {
  38      _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
  39        o.__proto__ = p;
  40        return o;
  41      };
  42  
  43      return _setPrototypeOf(o, p);
  44    }
  45  
  46    function _isNativeReflectConstruct() {
  47      if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  48      if (Reflect.construct.sham) return false;
  49      if (typeof Proxy === "function") return true;
  50  
  51      try {
  52        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
  53        return true;
  54      } catch (e) {
  55        return false;
  56      }
  57    }
  58  
  59    function _construct(Parent, args, Class) {
  60      if (_isNativeReflectConstruct()) {
  61        _construct = Reflect.construct;
  62      } else {
  63        _construct = function _construct(Parent, args, Class) {
  64          var a = [null];
  65          a.push.apply(a, args);
  66          var Constructor = Function.bind.apply(Parent, a);
  67          var instance = new Constructor();
  68          if (Class) _setPrototypeOf(instance, Class.prototype);
  69          return instance;
  70        };
  71      }
  72  
  73      return _construct.apply(null, arguments);
  74    }
  75  
  76    function _isNativeFunction(fn) {
  77      return Function.toString.call(fn).indexOf("[native code]") !== -1;
  78    }
  79  
  80    function _wrapNativeSuper(Class) {
  81      var _cache = typeof Map === "function" ? new Map() : undefined;
  82  
  83      _wrapNativeSuper = function _wrapNativeSuper(Class) {
  84        if (Class === null || !_isNativeFunction(Class)) return Class;
  85  
  86        if (typeof Class !== "function") {
  87          throw new TypeError("Super expression must either be null or a function");
  88        }
  89  
  90        if (typeof _cache !== "undefined") {
  91          if (_cache.has(Class)) return _cache.get(Class);
  92  
  93          _cache.set(Class, Wrapper);
  94        }
  95  
  96        function Wrapper() {
  97          return _construct(Class, arguments, _getPrototypeOf(this).constructor);
  98        }
  99  
 100        Wrapper.prototype = Object.create(Class.prototype, {
 101          constructor: {
 102            value: Wrapper,
 103            enumerable: false,
 104            writable: true,
 105            configurable: true
 106          }
 107        });
 108        return _setPrototypeOf(Wrapper, Class);
 109      };
 110  
 111      return _wrapNativeSuper(Class);
 112    }
 113  
 114    function _assertThisInitialized(self) {
 115      if (self === void 0) {
 116        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
 117      }
 118  
 119      return self;
 120    }
 121  
 122    function _unsupportedIterableToArray(o, minLen) {
 123      if (!o) return;
 124      if (typeof o === "string") return _arrayLikeToArray(o, minLen);
 125      var n = Object.prototype.toString.call(o).slice(8, -1);
 126      if (n === "Object" && o.constructor) n = o.constructor.name;
 127      if (n === "Map" || n === "Set") return Array.from(o);
 128      if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
 129    }
 130  
 131    function _arrayLikeToArray(arr, len) {
 132      if (len == null || len > arr.length) len = arr.length;
 133  
 134      for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
 135  
 136      return arr2;
 137    }
 138  
 139    function _createForOfIteratorHelperLoose(o, allowArrayLike) {
 140      var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 141      if (it) return (it = it.call(o)).next.bind(it);
 142  
 143      if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
 144        if (it) o = it;
 145        var i = 0;
 146        return function () {
 147          if (i >= o.length) return {
 148            done: true
 149          };
 150          return {
 151            done: false,
 152            value: o[i++]
 153          };
 154        };
 155      }
 156  
 157      throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
 158    }
 159  
 160    var AlertElement = /*#__PURE__*/function (_HTMLElement) {
 161      _inheritsLoose(AlertElement, _HTMLElement);
 162  
 163      function AlertElement() {
 164        var _this;
 165  
 166        _this = _HTMLElement.call(this) || this; // Bindings
 167  
 168        _this.close = _this.close.bind(_assertThisInitialized(_this));
 169        _this.destroyCloseButton = _this.destroyCloseButton.bind(_assertThisInitialized(_this));
 170        _this.createCloseButton = _this.createCloseButton.bind(_assertThisInitialized(_this));
 171        _this.onMutation = _this.onMutation.bind(_assertThisInitialized(_this));
 172        _this.observer = new MutationObserver(_this.onMutation);
 173  
 174        _this.observer.observe(_assertThisInitialized(_this), {
 175          attributes: false,
 176          childList: true,
 177          subtree: true
 178        }); // Handle the fade in animation
 179  
 180  
 181        _this.addEventListener('animationend', function (event) {
 182          if (event.animationName === 'joomla-alert-fade-in' && event.target === _assertThisInitialized(_this)) {
 183            _this.dispatchEvent(new CustomEvent('joomla.alert.shown'));
 184  
 185            _this.style.removeProperty('animationName');
 186          }
 187        }); // Handle the fade out animation
 188  
 189  
 190        _this.addEventListener('animationend', function (event) {
 191          if (event.animationName === 'joomla-alert-fade-out' && event.target === _assertThisInitialized(_this)) {
 192            _this.dispatchEvent(new CustomEvent('joomla.alert.closed'));
 193  
 194            _this.remove();
 195          }
 196        });
 197  
 198        return _this;
 199      }
 200      /* Attributes to monitor */
 201  
 202  
 203      var _proto = AlertElement.prototype;
 204  
 205      /* Lifecycle, element appended to the DOM */
 206      _proto.connectedCallback = function connectedCallback() {
 207        this.dispatchEvent(new CustomEvent('joomla.alert.show'));
 208        this.style.animationName = 'joomla-alert-fade-in'; // Default to info
 209  
 210        if (!this.type || !['info', 'warning', 'danger', 'success'].includes(this.type)) {
 211          this.setAttribute('type', 'info');
 212        } // Default to alert
 213  
 214  
 215        if (!this.role || !['alert', 'alertdialog'].includes(this.role)) {
 216          this.setAttribute('role', 'alert');
 217        } // Hydrate the button
 218  
 219  
 220        if (this.firstElementChild && this.firstElementChild.tagName === 'BUTTON') {
 221          this.button = this.firstElementChild;
 222  
 223          if (this.button.classList.contains('joomla-alert--close')) {
 224            this.button.classList.add('joomla-alert--close');
 225          }
 226  
 227          if (this.button.innerHTML === '') {
 228            this.button.innerHTML = '<span aria-hidden="true">&times;</span>';
 229          }
 230  
 231          if (!this.button.hasAttribute('aria-label')) {
 232            this.button.setAttribute('aria-label', this.closeText);
 233          }
 234        } // Append button
 235  
 236  
 237        if (this.hasAttribute('dismiss') && !this.button) {
 238          this.createCloseButton();
 239        }
 240  
 241        if (this.hasAttribute('auto-dismiss')) {
 242          this.autoDismiss();
 243        }
 244      }
 245      /* Lifecycle, element removed from the DOM */
 246      ;
 247  
 248      _proto.disconnectedCallback = function disconnectedCallback() {
 249        if (this.button) {
 250          this.button.removeEventListener('click', this.close);
 251        }
 252  
 253        this.observer.disconnect();
 254      }
 255      /* Respond to attribute changes */
 256      ;
 257  
 258      _proto.attributeChangedCallback = function attributeChangedCallback(attr, oldValue, newValue) {
 259        switch (attr) {
 260          case 'type':
 261            if (!newValue || newValue && ['info', 'warning', 'danger', 'success'].indexOf(newValue) === -1) {
 262              this.type = 'info';
 263            }
 264  
 265            break;
 266  
 267          case 'role':
 268            if (!newValue || newValue && ['alert', 'alertdialog'].indexOf(newValue) === -1) {
 269              this.role = 'alert';
 270            }
 271  
 272            break;
 273  
 274          case 'dismiss':
 275            if ((!newValue || newValue === '') && (!oldValue || oldValue === '')) {
 276              if (this.button && !this.hasAttribute('dismiss')) {
 277                this.destroyCloseButton();
 278              } else if (!this.button && this.hasAttribute('dismiss')) {
 279                this.createCloseButton();
 280              }
 281            } else if (this.button && newValue === 'false') {
 282              this.destroyCloseButton();
 283            } else if (!this.button && newValue !== 'false') {
 284              this.createCloseButton();
 285            }
 286  
 287            break;
 288  
 289          case 'close-text':
 290            if (!newValue || newValue !== oldValue) {
 291              if (this.button) {
 292                this.button.setAttribute('aria-label', newValue);
 293              }
 294            }
 295  
 296            break;
 297  
 298          case 'auto-dismiss':
 299            this.autoDismiss();
 300            break;
 301        }
 302      }
 303      /* Observe added elements */
 304      ;
 305  
 306      _proto.onMutation = function onMutation(mutationsList) {
 307        // eslint-disable-next-line no-restricted-syntax
 308        for (var _iterator = _createForOfIteratorHelperLoose(mutationsList), _step; !(_step = _iterator()).done;) {
 309          var mutation = _step.value;
 310  
 311          if (mutation.type === 'childList') {
 312            if (mutation.addedNodes.length) {
 313              // Make sure that the button is always the first element
 314              if (this.button && this.firstElementChild !== this.button) {
 315                this.prepend(this.button);
 316              }
 317            }
 318          }
 319        }
 320      }
 321      /* Method to close the alert */
 322      ;
 323  
 324      _proto.close = function close() {
 325        this.dispatchEvent(new CustomEvent('joomla.alert.close'));
 326        this.style.animationName = 'joomla-alert-fade-out';
 327      }
 328      /* Method to create the close button */
 329      ;
 330  
 331      _proto.createCloseButton = function createCloseButton() {
 332        this.button = document.createElement('button');
 333        this.button.setAttribute('type', 'button');
 334        this.button.classList.add('joomla-alert--close');
 335        this.button.innerHTML = '<span aria-hidden="true">&times;</span>';
 336        this.button.setAttribute('aria-label', this.closeText);
 337        this.insertAdjacentElement('afterbegin', this.button);
 338        /* Add the required listener */
 339  
 340        this.button.addEventListener('click', this.close);
 341      }
 342      /* Method to remove the close button */
 343      ;
 344  
 345      _proto.destroyCloseButton = function destroyCloseButton() {
 346        if (this.button) {
 347          this.button.removeEventListener('click', this.close);
 348          this.button.parentNode.removeChild(this.button);
 349          this.button = null;
 350        }
 351      }
 352      /* Method to auto-dismiss */
 353      ;
 354  
 355      _proto.autoDismiss = function autoDismiss() {
 356        var timer = parseInt(this.getAttribute('auto-dismiss'), 10);
 357        setTimeout(this.close, timer >= 10 ? timer : 3000);
 358      };
 359  
 360      _createClass(AlertElement, [{
 361        key: "type",
 362        get: function get() {
 363          return this.getAttribute('type');
 364        },
 365        set: function set(value) {
 366          this.setAttribute('type', value);
 367        }
 368      }, {
 369        key: "role",
 370        get: function get() {
 371          return this.getAttribute('role');
 372        },
 373        set: function set(value) {
 374          this.setAttribute('role', value);
 375        }
 376      }, {
 377        key: "closeText",
 378        get: function get() {
 379          return this.getAttribute('close-text');
 380        },
 381        set: function set(value) {
 382          this.setAttribute('close-text', value);
 383        }
 384      }, {
 385        key: "dismiss",
 386        get: function get() {
 387          return this.getAttribute('dismiss');
 388        },
 389        set: function set(value) {
 390          this.setAttribute('dismiss', value);
 391        }
 392      }, {
 393        key: "autodismiss",
 394        get: function get() {
 395          return this.getAttribute('auto-dismiss');
 396        },
 397        set: function set(value) {
 398          this.setAttribute('auto-dismiss', value);
 399        }
 400      }], [{
 401        key: "observedAttributes",
 402        get: function get() {
 403          return ['type', 'role', 'dismiss', 'auto-dismiss', 'close-text'];
 404        }
 405      }]);
 406  
 407      return AlertElement;
 408    }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 409  
 410    if (!customElements.get('joomla-alert')) {
 411      customElements.define('joomla-alert', AlertElement);
 412    }
 413    /**
 414     * @copyright  (C) 2020 Open Source Matters, Inc. <https://www.joomla.org>
 415     * @license    GNU General Public License version 2 or later; see LICENSE.txt
 416     */
 417  
 418    /**
 419     * Returns the container of the Messages
 420     *
 421     * @param {string|HTMLElement}  container  The container
 422     *
 423     * @returns {HTMLElement}
 424     */
 425  
 426  
 427    var getMessageContainer = function getMessageContainer(container) {
 428      var messageContainer;
 429  
 430      if (container instanceof HTMLElement) {
 431        return container;
 432      }
 433  
 434      if (typeof container === 'undefined' || container && container === '#system-message-container') {
 435        messageContainer = document.getElementById('system-message-container');
 436      } else {
 437        messageContainer = document.querySelector(container);
 438      }
 439  
 440      return messageContainer;
 441    };
 442    /**
 443     * Render messages send via JSON
 444     * Used by some javascripts such as validate.js
 445     *
 446     * @param   {object}  messages JavaScript object containing the messages to render.
 447     *          Example:
 448     *          const messages = {
 449     *              "message": ["This will be a green message", "So will this"],
 450     *              "error": ["This will be a red message", "So will this"],
 451     *              "info": ["This will be a blue message", "So will this"],
 452     *              "notice": ["This will be same as info message", "So will this"],
 453     *              "warning": ["This will be a orange message", "So will this"],
 454     *              "my_custom_type": ["This will be same as info message", "So will this"]
 455     *          };
 456     * @param  {string} selector The selector of the container where the message will be rendered
 457     * @param  {bool}   keepOld  If we shall discard old messages
 458     * @param  {int}    timeout  The milliseconds before the message self destruct
 459     * @return  void
 460     */
 461  
 462  
 463    Joomla.renderMessages = function (messages, selector, keepOld, timeout) {
 464      var messageContainer = getMessageContainer(selector);
 465  
 466      if (typeof keepOld === 'undefined' || keepOld && keepOld === false) {
 467        Joomla.removeMessages(messageContainer);
 468      }
 469  
 470      [].slice.call(Object.keys(messages)).forEach(function (type) {
 471        var alertClass = type; // Array of messages of this type
 472  
 473        var typeMessages = messages[type];
 474        var messagesBox = document.createElement('joomla-alert');
 475  
 476        if (['success', 'info', 'danger', 'warning'].indexOf(type) < 0) {
 477          alertClass = type === 'notice' ? 'info' : type;
 478          alertClass = type === 'message' ? 'success' : alertClass;
 479          alertClass = type === 'error' ? 'danger' : alertClass;
 480          alertClass = type === 'warning' ? 'warning' : alertClass;
 481        }
 482  
 483        messagesBox.setAttribute('type', alertClass);
 484        messagesBox.setAttribute('close-text', Joomla.Text._('JCLOSE'));
 485        messagesBox.setAttribute('dismiss', true);
 486  
 487        if (timeout && parseInt(timeout, 10) > 0) {
 488          messagesBox.setAttribute('auto-dismiss', timeout);
 489        } // Title
 490  
 491  
 492        var title = Joomla.Text._(type); // Skip titles with untranslated strings
 493  
 494  
 495        if (typeof title !== 'undefined') {
 496          var titleWrapper = document.createElement('div');
 497          titleWrapper.className = 'alert-heading';
 498          titleWrapper.innerHTML = Joomla.sanitizeHtml("<span class=\"" + type + "\"></span><span class=\"visually-hidden\">" + (Joomla.Text._(type) ? Joomla.Text._(type) : type) + "</span>");
 499          messagesBox.appendChild(titleWrapper);
 500        } // Add messages to the message box
 501  
 502  
 503        var messageWrapper = document.createElement('div');
 504        messageWrapper.className = 'alert-wrapper';
 505        typeMessages.forEach(function (typeMessage) {
 506          messageWrapper.innerHTML += Joomla.sanitizeHtml("<div class=\"alert-message\">" + typeMessage + "</div>");
 507        });
 508        messagesBox.appendChild(messageWrapper);
 509        messageContainer.appendChild(messagesBox);
 510      });
 511    };
 512    /**
 513     * Remove messages
 514     *
 515     * @param  {element} container The element of the container of the message
 516     * to be removed
 517     *
 518     * @return  {void}
 519     */
 520  
 521  
 522    Joomla.removeMessages = function (container) {
 523      var messageContainer = getMessageContainer(container);
 524      var alerts = [].slice.call(messageContainer.querySelectorAll('joomla-alert'));
 525  
 526      if (alerts.length) {
 527        alerts.forEach(function (alert) {
 528          alert.close();
 529        });
 530      }
 531    };
 532  
 533    document.addEventListener('DOMContentLoaded', function () {
 534      var messages = Joomla.getOptions('joomla.messages');
 535  
 536      if (messages) {
 537        Object.keys(messages).map(function (message) {
 538          return Joomla.renderMessages(messages[message], undefined, true, undefined);
 539        });
 540      }
 541    });
 542  
 543  })();