[Summary view] [Print] [Text view]

   1  (function () {
   2    'use strict';
   3  
   4    function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {
   5      try {
   6        var info = gen[key](arg);
   7        var value = info.value;
   8      } catch (error) {
   9        reject(error);
  10        return;
  11      }
  12  
  13      if (info.done) {
  14        resolve(value);
  15      } else {
  16        Promise.resolve(value).then(_next, _throw);
  17      }
  18    }
  19  
  20    function _asyncToGenerator(fn) {
  21      return function () {
  22        var self = this,
  23            args = arguments;
  24        return new Promise(function (resolve, reject) {
  25          var gen = fn.apply(self, args);
  26  
  27          function _next(value) {
  28            asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value);
  29          }
  30  
  31          function _throw(err) {
  32            asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err);
  33          }
  34  
  35          _next(undefined);
  36        });
  37      };
  38    }
  39  
  40    function _defineProperties(target, props) {
  41      for (var i = 0; i < props.length; i++) {
  42        var descriptor = props[i];
  43        descriptor.enumerable = descriptor.enumerable || false;
  44        descriptor.configurable = true;
  45        if ("value" in descriptor) descriptor.writable = true;
  46        Object.defineProperty(target, descriptor.key, descriptor);
  47      }
  48    }
  49  
  50    function _createClass(Constructor, protoProps, staticProps) {
  51      if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  52      if (staticProps) _defineProperties(Constructor, staticProps);
  53      Object.defineProperty(Constructor, "prototype", {
  54        writable: false
  55      });
  56      return Constructor;
  57    }
  58  
  59    function _inheritsLoose(subClass, superClass) {
  60      subClass.prototype = Object.create(superClass.prototype);
  61      subClass.prototype.constructor = subClass;
  62  
  63      _setPrototypeOf(subClass, superClass);
  64    }
  65  
  66    function _getPrototypeOf(o) {
  67      _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
  68        return o.__proto__ || Object.getPrototypeOf(o);
  69      };
  70      return _getPrototypeOf(o);
  71    }
  72  
  73    function _setPrototypeOf(o, p) {
  74      _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
  75        o.__proto__ = p;
  76        return o;
  77      };
  78  
  79      return _setPrototypeOf(o, p);
  80    }
  81  
  82    function _isNativeReflectConstruct() {
  83      if (typeof Reflect === "undefined" || !Reflect.construct) return false;
  84      if (Reflect.construct.sham) return false;
  85      if (typeof Proxy === "function") return true;
  86  
  87      try {
  88        Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
  89        return true;
  90      } catch (e) {
  91        return false;
  92      }
  93    }
  94  
  95    function _construct(Parent, args, Class) {
  96      if (_isNativeReflectConstruct()) {
  97        _construct = Reflect.construct;
  98      } else {
  99        _construct = function _construct(Parent, args, Class) {
 100          var a = [null];
 101          a.push.apply(a, args);
 102          var Constructor = Function.bind.apply(Parent, a);
 103          var instance = new Constructor();
 104          if (Class) _setPrototypeOf(instance, Class.prototype);
 105          return instance;
 106        };
 107      }
 108  
 109      return _construct.apply(null, arguments);
 110    }
 111  
 112    function _isNativeFunction(fn) {
 113      return Function.toString.call(fn).indexOf("[native code]") !== -1;
 114    }
 115  
 116    function _wrapNativeSuper(Class) {
 117      var _cache = typeof Map === "function" ? new Map() : undefined;
 118  
 119      _wrapNativeSuper = function _wrapNativeSuper(Class) {
 120        if (Class === null || !_isNativeFunction(Class)) return Class;
 121  
 122        if (typeof Class !== "function") {
 123          throw new TypeError("Super expression must either be null or a function");
 124        }
 125  
 126        if (typeof _cache !== "undefined") {
 127          if (_cache.has(Class)) return _cache.get(Class);
 128  
 129          _cache.set(Class, Wrapper);
 130        }
 131  
 132        function Wrapper() {
 133          return _construct(Class, arguments, _getPrototypeOf(this).constructor);
 134        }
 135  
 136        Wrapper.prototype = Object.create(Class.prototype, {
 137          constructor: {
 138            value: Wrapper,
 139            enumerable: false,
 140            writable: true,
 141            configurable: true
 142          }
 143        });
 144        return _setPrototypeOf(Wrapper, Class);
 145      };
 146  
 147      return _wrapNativeSuper(Class);
 148    }
 149  
 150    function _assertThisInitialized(self) {
 151      if (self === void 0) {
 152        throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
 153      }
 154  
 155      return self;
 156    }
 157  
 158    /**
 159     * @copyright  (C) 2018 Open Source Matters, Inc. <https://www.joomla.org>
 160     * @license    GNU General Public License version 2 or later; see LICENSE.txt
 161     */
 162    if (!Joomla) {
 163      throw new Error('Joomla API is not properly initiated');
 164    }
 165    /**
 166     * Extract the extensions
 167     *
 168     * @param {*} path
 169     * @returns {string}
 170     */
 171  
 172  
 173    var getExtension = function getExtension(path) {
 174      var parts = path.split(/[#]/);
 175  
 176      if (parts.length > 1) {
 177        return parts[1].split(/[?]/)[0].split('.').pop().trim();
 178      }
 179  
 180      return path.split(/[#?]/)[0].split('.').pop().trim();
 181    };
 182  
 183    var JoomlaFieldMedia = /*#__PURE__*/function (_HTMLElement) {
 184      _inheritsLoose(JoomlaFieldMedia, _HTMLElement);
 185  
 186      function JoomlaFieldMedia() {
 187        var _this;
 188  
 189        _this = _HTMLElement.call(this) || this;
 190        _this.onSelected = _this.onSelected.bind(_assertThisInitialized(_this));
 191        _this.show = _this.show.bind(_assertThisInitialized(_this));
 192        _this.clearValue = _this.clearValue.bind(_assertThisInitialized(_this));
 193        _this.modalClose = _this.modalClose.bind(_assertThisInitialized(_this));
 194        _this.setValue = _this.setValue.bind(_assertThisInitialized(_this));
 195        _this.updatePreview = _this.updatePreview.bind(_assertThisInitialized(_this));
 196        _this.validateValue = _this.validateValue.bind(_assertThisInitialized(_this));
 197        _this.markValid = _this.markValid.bind(_assertThisInitialized(_this));
 198        _this.markInvalid = _this.markInvalid.bind(_assertThisInitialized(_this));
 199        return _this;
 200      }
 201  
 202      var _proto = JoomlaFieldMedia.prototype;
 203  
 204      // attributeChangedCallback(attr, oldValue, newValue) {}
 205      _proto.connectedCallback = function connectedCallback() {
 206        this.button = this.querySelector(this.buttonSelect);
 207        this.inputElement = this.querySelector(this.input);
 208        this.buttonClearEl = this.querySelector(this.buttonClear);
 209        this.modalElement = this.querySelector('.joomla-modal');
 210        this.buttonSaveSelectedElement = this.querySelector(this.buttonSaveSelected);
 211        this.previewElement = this.querySelector('.field-media-preview');
 212  
 213        if (!this.button || !this.inputElement || !this.buttonClearEl || !this.modalElement || !this.buttonSaveSelectedElement) {
 214          throw new Error('Misconfiguaration...');
 215        }
 216  
 217        this.button.addEventListener('click', this.show); // Bootstrap modal init
 218  
 219        if (this.modalElement && window.bootstrap && window.bootstrap.Modal && !window.bootstrap.Modal.getInstance(this.modalElement)) {
 220          Joomla.initialiseModal(this.modalElement, {
 221            isJoomla: true
 222          });
 223        }
 224  
 225        if (this.buttonClearEl) {
 226          this.buttonClearEl.addEventListener('click', this.clearValue);
 227        }
 228  
 229        this.supportedExtensions = Joomla.getOptions('media-picker', {});
 230  
 231        if (!Object.keys(this.supportedExtensions).length) {
 232          throw new Error('Joomla API is not properly initiated');
 233        }
 234  
 235        this.updatePreview();
 236        this.inputElement.removeAttribute('readonly');
 237        this.inputElement.addEventListener('change', this.validateValue);
 238      };
 239  
 240      _proto.disconnectedCallback = function disconnectedCallback() {
 241        if (this.button) {
 242          this.button.removeEventListener('click', this.show);
 243        }
 244  
 245        if (this.buttonClearEl) {
 246          this.buttonClearEl.removeEventListener('click', this.clearValue);
 247        }
 248  
 249        if (this.inputElement) {
 250          this.inputElement.removeEventListener('change', this.validateValue);
 251        }
 252      };
 253  
 254      _proto.onSelected = function onSelected(event) {
 255        event.preventDefault();
 256        event.stopPropagation();
 257        this.modalClose();
 258        return false;
 259      };
 260  
 261      _proto.show = function show() {
 262        this.modalElement.open();
 263        Joomla.selectedMediaFile = {};
 264        this.buttonSaveSelectedElement.addEventListener('click', this.onSelected);
 265      };
 266  
 267      _proto.modalClose = /*#__PURE__*/function () {
 268        var _modalClose = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
 269          return regeneratorRuntime.wrap(function _callee$(_context) {
 270            while (1) {
 271              switch (_context.prev = _context.next) {
 272                case 0:
 273                  _context.prev = 0;
 274                  _context.next = 3;
 275                  return Joomla.getMedia(Joomla.selectedMediaFile, this.inputElement, this);
 276  
 277                case 3:
 278                  _context.next = 8;
 279                  break;
 280  
 281                case 5:
 282                  _context.prev = 5;
 283                  _context.t0 = _context["catch"](0);
 284                  Joomla.renderMessages({
 285                    error: [Joomla.Text._('JLIB_APPLICATION_ERROR_SERVER')]
 286                  });
 287  
 288                case 8:
 289                  Joomla.selectedMediaFile = {};
 290                  Joomla.Modal.getCurrent().close();
 291  
 292                case 10:
 293                case "end":
 294                  return _context.stop();
 295              }
 296            }
 297          }, _callee, this, [[0, 5]]);
 298        }));
 299  
 300        function modalClose() {
 301          return _modalClose.apply(this, arguments);
 302        }
 303  
 304        return modalClose;
 305      }();
 306  
 307      _proto.setValue = function setValue(value) {
 308        this.inputElement.value = value;
 309        this.validatedUrl = value;
 310        this.updatePreview(); // trigger change event both on the input and on the custom element
 311  
 312        this.inputElement.dispatchEvent(new Event('change'));
 313        this.dispatchEvent(new CustomEvent('change', {
 314          detail: {
 315            value: value
 316          },
 317          bubbles: true
 318        }));
 319      };
 320  
 321      _proto.validateValue = function validateValue(event) {
 322        var _this2 = this;
 323  
 324        var value = event.target.value;
 325        if (this.validatedUrl === value || value === '') return;
 326  
 327        if (/^(http(s)?:\/\/).+$/.test(value)) {
 328          try {
 329            fetch(value).then(function (response) {
 330              if (response.status === 200) {
 331                _this2.validatedUrl = value;
 332  
 333                _this2.markValid();
 334              } else {
 335                _this2.validatedUrl = value;
 336  
 337                _this2.markInvalid();
 338              }
 339            });
 340          } catch (err) {
 341            this.validatedUrl = value;
 342            this.markInvalid();
 343          }
 344        } else {
 345          if (/^\//.test(value)) {
 346            value = value.substring(1);
 347          }
 348  
 349          var hashedUrl = value.split('#');
 350          var urlParts = hashedUrl[0].split('/');
 351          var rest = urlParts.slice(1);
 352          fetch(Joomla.getOptions('system.paths').rootFull + "/" + value).then(function (response) {
 353            return response.blob();
 354          }).then(function (blob) {
 355            if (blob.type.includes('image')) {
 356              var img = new Image();
 357              img.src = URL.createObjectURL(blob);
 358  
 359              img.onload = function () {
 360                _this2.inputElement.value = urlParts[0] + "/" + rest.join('/') + "#joomlaImage://local-" + urlParts[0] + "/" + rest.join('/') + "?width=" + img.width + "&height=" + img.height;
 361                _this2.validatedUrl = urlParts[0] + "/" + rest.join('/') + "#joomlaImage://local-" + urlParts[0] + "/" + rest.join('/') + "?width=" + img.width + "&height=" + img.height;
 362  
 363                _this2.markValid();
 364              };
 365            } else if (blob.type.includes('audio')) {
 366              _this2.inputElement.value = value;
 367              _this2.validatedUrl = value;
 368  
 369              _this2.markValid();
 370            } else if (blob.type.includes('video')) {
 371              _this2.inputElement.value = value;
 372              _this2.validatedUrl = value;
 373  
 374              _this2.markValid();
 375            } else if (blob.type.includes('application/pdf')) {
 376              _this2.inputElement.value = value;
 377              _this2.validatedUrl = value;
 378  
 379              _this2.markValid();
 380            } else {
 381              _this2.validatedUrl = value;
 382  
 383              _this2.markInvalid();
 384            }
 385          }).catch(function () {
 386            _this2.setValue(value);
 387  
 388            _this2.validatedUrl = value;
 389  
 390            _this2.markInvalid();
 391          });
 392        }
 393      };
 394  
 395      _proto.markValid = function markValid() {
 396        this.inputElement.removeAttribute('required');
 397        this.inputElement.removeAttribute('pattern');
 398  
 399        if (document.formvalidator) {
 400          document.formvalidator.validate(this.inputElement);
 401        }
 402      };
 403  
 404      _proto.markInvalid = function markInvalid() {
 405        this.inputElement.setAttribute('required', '');
 406        this.inputElement.setAttribute('pattern', '/^(http://INVALID/).+$/');
 407  
 408        if (document.formvalidator) {
 409          document.formvalidator.validate(this.inputElement);
 410        }
 411      };
 412  
 413      _proto.clearValue = function clearValue() {
 414        this.setValue('');
 415        this.validatedUrl = '';
 416        this.inputElement.removeAttribute('required');
 417        this.inputElement.removeAttribute('pattern');
 418  
 419        if (document.formvalidator) {
 420          document.formvalidator.validate(this.inputElement);
 421        }
 422      };
 423  
 424      _proto.updatePreview = function updatePreview() {
 425        var _this3 = this;
 426  
 427        if (['true', 'static'].indexOf(this.preview) === -1 || this.preview === 'false' || !this.previewElement) {
 428          return;
 429        } // Reset preview
 430  
 431  
 432        if (this.preview) {
 433          var value = this.inputElement.value;
 434          var supportedExtensions = this.supportedExtensions;
 435  
 436          if (!value) {
 437            this.buttonClearEl.style.display = 'none';
 438            this.previewElement.innerHTML = Joomla.sanitizeHtml('<span class="field-media-preview-icon"></span>');
 439          } else {
 440            var type;
 441            this.buttonClearEl.style.display = '';
 442            this.previewElement.innerHTML = '';
 443            var ext = getExtension(value);
 444            if (supportedExtensions.images.includes(ext)) type = 'images';
 445            if (supportedExtensions.audios.includes(ext)) type = 'audios';
 446            if (supportedExtensions.videos.includes(ext)) type = 'videos';
 447            if (supportedExtensions.documents.includes(ext)) type = 'documents';
 448            var previewElement;
 449            var mediaType = {
 450              images: function images() {
 451                if (supportedExtensions.images.includes(ext)) {
 452                  previewElement = new Image();
 453                  previewElement.src = /http/.test(value) ? value : Joomla.getOptions('system.paths').rootFull + value;
 454                  previewElement.setAttribute('alt', '');
 455                }
 456              },
 457              audios: function audios() {
 458                if (supportedExtensions.audios.includes(ext)) {
 459                  previewElement = document.createElement('audio');
 460                  previewElement.src = /http/.test(value) ? value : Joomla.getOptions('system.paths').rootFull + value;
 461                  previewElement.setAttribute('controls', '');
 462                }
 463              },
 464              videos: function videos() {
 465                if (supportedExtensions.videos.includes(ext)) {
 466                  previewElement = document.createElement('video');
 467                  var previewElementSource = document.createElement('source');
 468                  previewElementSource.src = /http/.test(value) ? value : Joomla.getOptions('system.paths').rootFull + value;
 469                  previewElementSource.type = "video/" + ext;
 470                  previewElement.setAttribute('controls', '');
 471                  previewElement.setAttribute('width', _this3.previewWidth);
 472                  previewElement.setAttribute('height', _this3.previewHeight);
 473                  previewElement.appendChild(previewElementSource);
 474                }
 475              },
 476              documents: function documents() {
 477                if (supportedExtensions.documents.includes(ext)) {
 478                  previewElement = document.createElement('object');
 479                  previewElement.data = /http/.test(value) ? value : Joomla.getOptions('system.paths').rootFull + value;
 480                  previewElement.type = "application/" + ext;
 481                  previewElement.setAttribute('width', _this3.previewWidth);
 482                  previewElement.setAttribute('height', _this3.previewHeight);
 483                }
 484              }
 485            }; // @todo more checks
 486  
 487            if (this.givenType && ['images', 'audios', 'videos', 'documents'].includes(this.givenType)) {
 488              mediaType[this.givenType]();
 489            } else if (type && ['images', 'audios', 'videos', 'documents'].includes(type)) {
 490              mediaType[type]();
 491            } else {
 492              return;
 493            }
 494  
 495            this.previewElement.style.width = this.previewWidth;
 496            this.previewElement.appendChild(previewElement);
 497          }
 498        }
 499      };
 500  
 501      _createClass(JoomlaFieldMedia, [{
 502        key: "type",
 503        get: function get() {
 504          return this.getAttribute('type');
 505        },
 506        set: function set(value) {
 507          this.setAttribute('type', value);
 508        }
 509      }, {
 510        key: "basePath",
 511        get: function get() {
 512          return this.getAttribute('base-path');
 513        },
 514        set: function set(value) {
 515          this.setAttribute('base-path', value);
 516        }
 517      }, {
 518        key: "rootFolder",
 519        get: function get() {
 520          return this.getAttribute('root-folder');
 521        },
 522        set: function set(value) {
 523          this.setAttribute('root-folder', value);
 524        }
 525      }, {
 526        key: "url",
 527        get: function get() {
 528          return this.getAttribute('url');
 529        },
 530        set: function set(value) {
 531          this.setAttribute('url', value);
 532        }
 533      }, {
 534        key: "modalContainer",
 535        get: function get() {
 536          return this.getAttribute('modal-container');
 537        },
 538        set: function set(value) {
 539          this.setAttribute('modal-container', value);
 540        }
 541      }, {
 542        key: "input",
 543        get: function get() {
 544          return this.getAttribute('input');
 545        },
 546        set: function set(value) {
 547          this.setAttribute('input', value);
 548        }
 549      }, {
 550        key: "buttonSelect",
 551        get: function get() {
 552          return this.getAttribute('button-select');
 553        },
 554        set: function set(value) {
 555          this.setAttribute('button-select', value);
 556        }
 557      }, {
 558        key: "buttonClear",
 559        get: function get() {
 560          return this.getAttribute('button-clear');
 561        },
 562        set: function set(value) {
 563          this.setAttribute('button-clear', value);
 564        }
 565      }, {
 566        key: "buttonSaveSelected",
 567        get: function get() {
 568          return this.getAttribute('button-save-selected');
 569        },
 570        set: function set(value) {
 571          this.setAttribute('button-save-selected', value);
 572        }
 573      }, {
 574        key: "modalWidth",
 575        get: function get() {
 576          return parseInt(this.getAttribute('modal-width'), 10);
 577        },
 578        set: function set(value) {
 579          this.setAttribute('modal-width', value);
 580        }
 581      }, {
 582        key: "modalHeight",
 583        get: function get() {
 584          return parseInt(this.getAttribute('modal-height'), 10);
 585        },
 586        set: function set(value) {
 587          this.setAttribute('modal-height', value);
 588        }
 589      }, {
 590        key: "previewWidth",
 591        get: function get() {
 592          return parseInt(this.getAttribute('preview-width'), 10);
 593        },
 594        set: function set(value) {
 595          this.setAttribute('preview-width', value);
 596        }
 597      }, {
 598        key: "previewHeight",
 599        get: function get() {
 600          return parseInt(this.getAttribute('preview-height'), 10);
 601        },
 602        set: function set(value) {
 603          this.setAttribute('preview-height', value);
 604        }
 605      }, {
 606        key: "preview",
 607        get: function get() {
 608          return this.getAttribute('preview');
 609        },
 610        set: function set(value) {
 611          this.setAttribute('preview', value);
 612        }
 613      }, {
 614        key: "previewContainer",
 615        get: function get() {
 616          return this.getAttribute('preview-container');
 617        }
 618      }], [{
 619        key: "observedAttributes",
 620        get: function get() {
 621          return ['type', 'base-path', 'root-folder', 'url', 'modal-container', 'modal-width', 'modal-height', 'input', 'button-select', 'button-clear', 'button-save-selected', 'preview', 'preview-width', 'preview-height'];
 622        }
 623      }]);
 624  
 625      return JoomlaFieldMedia;
 626    }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 627  
 628    customElements.define('joomla-field-media', JoomlaFieldMedia);
 629  
 630  })();