[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    /**
 115     * Based on:
 116     * Very simple jQuery Color Picker
 117     * Copyright (C) 2012 Tanguy Krotoff
 118     * Licensed under the MIT license
 119     *
 120     * ADAPTED BY: Dimitris Grammatikogiannis
 121     *
 122     * MIT License
 123     *
 124     * Permission is hereby granted, free of charge, to any person obtaining
 125     * a copy of this software and associated documentation files (the
 126     * "Software"), to deal in the Software without restriction, including
 127     * without limitation the rights to use, copy, modify, merge, publish,
 128     * distribute, sublicense, and/or sell copies of the Software, and to
 129     * permit persons to whom the Software is furnished to do so, subject to
 130     * the following conditions:
 131     *
 132     * The above copyright notice and this permission notice shall be
 133     * included in all copies or substantial portions of the Software.
 134     *
 135     * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 136     * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
 137     * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 138     * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
 139     * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
 140     * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
 141     * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 142     */
 143    (function (customElements) {
 144      var KEYCODE = {
 145        TAB: 9,
 146        ESC: 27
 147      };
 148      var colorNames = {
 149        aliceblue: '#f0f8ff',
 150        antiquewhite: '#faebd7',
 151        aqua: '#00ffff',
 152        aquamarine: '#7fffd4',
 153        azure: '#f0ffff',
 154        beige: '#f5f5dc',
 155        bisque: '#ffe4c4',
 156        black: '#000000',
 157        blanchedalmond: '#ffebcd',
 158        blue: '#0000ff',
 159        blueviolet: '#8a2be2',
 160        brown: '#a52a2a',
 161        burlywood: '#deb887',
 162        cadetblue: '#5f9ea0',
 163        chartreuse: '#7fff00',
 164        chocolate: '#d2691e',
 165        coral: '#ff7f50',
 166        cornflowerblue: '#6495ed',
 167        cornsilk: '#fff8dc',
 168        crimson: '#dc143c',
 169        cyan: '#00ffff',
 170        darkblue: '#00008b',
 171        darkcyan: '#008b8b',
 172        darkgoldenrod: '#b8860b',
 173        darkgray: '#a9a9a9',
 174        darkgreen: '#006400',
 175        darkgrey: '#a9a9a9',
 176        darkkhaki: '#bdb76b',
 177        darkmagenta: '#8b008b',
 178        darkolivegreen: '#556b2f',
 179        darkorange: '#ff8c00',
 180        darkorchid: '#9932cc',
 181        darkred: '#8b0000',
 182        darksalmon: '#e9967a',
 183        darkseagreen: '#8fbc8f',
 184        darkslateblue: '#483d8b',
 185        darkslategray: '#2f4f4f',
 186        darkslategrey: '#2f4f4f',
 187        darkturquoise: '#00ced1',
 188        darkviolet: '#9400d3',
 189        deeppink: '#ff1493',
 190        deepskyblue: '#00bfff',
 191        dimgray: '#696969',
 192        dimgrey: '#696969',
 193        dodgerblue: '#1e90ff',
 194        firebrick: '#b22222',
 195        floralwhite: '#fffaf0',
 196        forestgreen: '#228b22',
 197        fuchsia: '#ff00ff',
 198        gainsboro: '#dcdcdc',
 199        ghostwhite: '#f8f8ff',
 200        gold: '#ffd700',
 201        goldenrod: '#daa520',
 202        gray: '#808080',
 203        green: '#008000',
 204        greenyellow: '#adff2f',
 205        grey: '#808080',
 206        honeydew: '#f0fff0',
 207        hotpink: '#ff69b4',
 208        indianred: '#cd5c5c',
 209        indigo: '#4b0082',
 210        ivory: '#fffff0',
 211        khaki: '#f0e68c',
 212        lavender: '#e6e6fa',
 213        lavenderblush: '#fff0f5',
 214        lawngreen: '#7cfc00',
 215        lemonchiffon: '#fffacd',
 216        lightblue: '#add8e6',
 217        lightcoral: '#f08080',
 218        lightcyan: '#e0ffff',
 219        lightgoldenrodyellow: '#fafad2',
 220        lightgray: '#d3d3d3',
 221        lightgreen: '#90ee90',
 222        lightgrey: '#d3d3d3',
 223        lightpink: '#ffb6c1',
 224        lightsalmon: '#ffa07a',
 225        lightseagreen: '#20b2aa',
 226        lightskyblue: '#87cefa',
 227        lightslategray: '#778899',
 228        lightslategrey: '#778899',
 229        lightsteelblue: '#b0c4de',
 230        lightyellow: '#ffffe0',
 231        lime: '#00ff00',
 232        limegreen: '#32cd32',
 233        linen: '#faf0e6',
 234        magenta: '#ff00ff',
 235        maroon: '#800000',
 236        mediumaquamarine: '#66cdaa',
 237        mediumblue: '#0000cd',
 238        mediumorchid: '#ba55d3',
 239        mediumpurple: '#9370db',
 240        mediumseagreen: '#3cb371',
 241        mediumslateblue: '#7b68ee',
 242        mediumspringgreen: '#00fa9a',
 243        mediumturquoise: '#48d1cc',
 244        mediumvioletred: '#c71585',
 245        midnightblue: '#191970',
 246        mintcream: '#f5fffa',
 247        mistyrose: '#ffe4e1',
 248        moccasin: '#ffe4b5',
 249        navajowhite: '#ffdead',
 250        navy: '#000080',
 251        oldlace: '#fdf5e6',
 252        olive: '#808000',
 253        olivedrab: '#6b8e23',
 254        orange: '#ffa500',
 255        orangered: '#ff4500',
 256        orchid: '#da70d6',
 257        palegoldenrod: '#eee8aa',
 258        palegreen: '#98fb98',
 259        paleturquoise: '#afeeee',
 260        palevioletred: '#db7093',
 261        papayawhip: '#ffefd5',
 262        peachpuff: '#ffdab9',
 263        peru: '#cd853f',
 264        pink: '#ffc0cb',
 265        plum: '#dda0dd',
 266        powderblue: '#b0e0e6',
 267        purple: '#800080',
 268        red: '#ff0000',
 269        rosybrown: '#bc8f8f',
 270        royalblue: '#4169e1',
 271        saddlebrown: '#8b4513',
 272        salmon: '#fa8072',
 273        sandybrown: '#f4a460',
 274        seagreen: '#2e8b57',
 275        seashell: '#fff5ee',
 276        sienna: '#a0522d',
 277        silver: '#c0c0c0',
 278        skyblue: '#87ceeb',
 279        slateblue: '#6a5acd',
 280        slategray: '#708090',
 281        slategrey: '#708090',
 282        snow: '#fffafa',
 283        springgreen: '#00ff7f',
 284        steelblue: '#4682b4',
 285        tan: '#d2b48c',
 286        teal: '#008080',
 287        thistle: '#d8bfd8',
 288        tomato: '#ff6347',
 289        turquoise: '#40e0d0',
 290        violet: '#ee82ee',
 291        wheat: '#f5deb3',
 292        white: '#ffffff',
 293        whitesmoke: '#f5f5f5',
 294        yellow: '#ffff00',
 295        yellowgreen: '#9acd32'
 296      };
 297  
 298      var JoomlaFieldSimpleColor = /*#__PURE__*/function (_HTMLElement) {
 299        _inheritsLoose(JoomlaFieldSimpleColor, _HTMLElement);
 300  
 301        function JoomlaFieldSimpleColor() {
 302          var _this;
 303  
 304          _this = _HTMLElement.call(this) || this; // Define some variables
 305  
 306          _this.select = '';
 307          _this.options = [];
 308          _this.icon = '';
 309          _this.panel = '';
 310          _this.buttons = [];
 311          _this.focusableElements = null;
 312          _this.focusableSelectors = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
 313          return _this;
 314        }
 315  
 316        var _proto = JoomlaFieldSimpleColor.prototype;
 317  
 318        _proto.connectedCallback = function connectedCallback() {
 319          var _this2 = this;
 320  
 321          this.select = this.querySelector('select');
 322  
 323          if (!this.select) {
 324            throw new Error('Simple color field requires a select element');
 325          }
 326  
 327          this.options = [].slice.call(this.select.querySelectorAll('option'));
 328          this.select.classList.add('hidden'); // Build the pop up
 329  
 330          this.options.forEach(function (option) {
 331            var color = option.value;
 332            var clss = 'swatch';
 333  
 334            if (color === 'none') {
 335              clss += ' nocolor';
 336              color = 'transparent';
 337            }
 338  
 339            if (option.selected) {
 340              clss += ' active';
 341            }
 342  
 343            var el = document.createElement('button');
 344            el.setAttribute('class', clss);
 345            el.style.backgroundColor = color;
 346            el.setAttribute('type', 'button');
 347            var a11yColor = color === 'transparent' ? _this2.textTransp : _this2.getColorName(color);
 348            el.innerHTML = Joomla.sanitizeHtml("<span class=\"visually-hidden\">" + a11yColor + "</span>");
 349  
 350            _this2.buttons.push(el);
 351          }); // Add a close button
 352  
 353          var close = document.createElement('button');
 354          close.setAttribute('class', 'btn-close');
 355          close.setAttribute('type', 'button');
 356          close.innerHTML = Joomla.sanitizeHtml(this.textClose);
 357          this.buttons.push(close);
 358          var color = this.select.value;
 359          var clss = '';
 360  
 361          if (color === 'none') {
 362            clss += ' nocolor';
 363            color = 'transparent';
 364          }
 365  
 366          this.icon = document.createElement('button');
 367  
 368          if (clss) {
 369            this.icon.setAttribute('class', clss);
 370          }
 371  
 372          var uniqueId = "simple-color-" + Math.random().toString(36).substr(2, 10);
 373          this.icon.setAttribute('type', 'button');
 374          this.icon.setAttribute('tabindex', '0');
 375          this.icon.style.backgroundColor = color;
 376          this.icon.innerHTML = Joomla.sanitizeHtml("<span class=\"visually-hidden\">" + this.textSelect + "</span>");
 377          this.icon.id = uniqueId;
 378          this.select.insertAdjacentElement('beforebegin', this.icon);
 379          this.icon.addEventListener('click', this.show.bind(this));
 380          this.panel = document.createElement('div');
 381          this.panel.classList.add('simplecolors-panel');
 382          this.panel.setAttribute('aria-labelledby', uniqueId);
 383          this.hide = this.hide.bind(this);
 384          this.colorSelect = this.colorSelect.bind(this);
 385          this.buttons.forEach(function (el) {
 386            if (el.classList.contains('btn-close')) {
 387              el.addEventListener('click', _this2.hide);
 388            } else {
 389              el.addEventListener('click', _this2.colorSelect);
 390            }
 391  
 392            _this2.panel.insertAdjacentElement('beforeend', el);
 393          });
 394          this.appendChild(this.panel);
 395          this.focusableElements = [].slice.call(this.panel.querySelectorAll(this.focusableSelectors.join()));
 396          this.keys = this.keys.bind(this);
 397          this.hide = this.hide.bind(this);
 398          this.mousedown = this.mousedown.bind(this);
 399        };
 400  
 401        // Show the panel
 402        _proto.show = function show() {
 403          document.addEventListener('mousedown', this.hide);
 404          this.addEventListener('keydown', this.keys);
 405          this.panel.addEventListener('mousedown', this.mousedown);
 406          this.panel.setAttribute('data-open', '');
 407          var focused = this.panel.querySelector('button');
 408  
 409          if (focused) {
 410            focused.focus();
 411          }
 412        } // Hide panel
 413        ;
 414  
 415        _proto.hide = function hide() {
 416          document.removeEventListener('mousedown', this.hide, false);
 417          this.removeEventListener('keydown', this.keys);
 418  
 419          if (this.panel.hasAttribute('data-open')) {
 420            this.panel.removeAttribute('data-open');
 421          }
 422  
 423          this.icon.focus();
 424        };
 425  
 426        _proto.colorSelect = function colorSelect(e) {
 427          var color = '';
 428          var bgcolor = '';
 429          var clss = '';
 430  
 431          if (e.target.classList.contains('nocolor')) {
 432            color = 'none';
 433            bgcolor = 'transparent';
 434            clss = 'nocolor';
 435          } else {
 436            color = this.rgb2hex(e.target.style.backgroundColor);
 437            bgcolor = color;
 438          } // Reset the active class
 439  
 440  
 441          this.buttons.forEach(function (el) {
 442            if (el.classList.contains('active')) {
 443              el.classList.remove('active');
 444            }
 445          }); // Add the active class to the selected button
 446  
 447          e.target.classList.add('active');
 448          this.icon.classList.remove('nocolor');
 449          this.icon.setAttribute('class', clss);
 450          this.icon.style.backgroundColor = bgcolor; // trigger change event both on the select and on the custom element
 451  
 452          this.select.dispatchEvent(new Event('change'));
 453          this.dispatchEvent(new CustomEvent('change', {
 454            detail: {
 455              value: color
 456            },
 457            bubbles: true
 458          })); // Hide the panel
 459  
 460          this.hide(); // Change select value
 461  
 462          this.options.forEach(function (el) {
 463            if (el.selected) {
 464              el.removeAttribute('selected');
 465            }
 466  
 467            if (el.value === bgcolor) {
 468              el.setAttribute('selected', '');
 469            }
 470          });
 471        };
 472  
 473        _proto.keys = function keys(e) {
 474          if (e.keyCode === KEYCODE.ESC) {
 475            this.hide();
 476          }
 477  
 478          if (e.keyCode === KEYCODE.TAB) {
 479            // Get the index of the current active element
 480            var focusedIndex = this.focusableElements.indexOf(document.activeElement); // If first element is focused and shiftkey is in use, focus last item within modal
 481  
 482            if (e.shiftKey && (focusedIndex === 0 || focusedIndex === -1)) {
 483              this.focusableElements[this.focusableElements.length - 1].focus();
 484              e.preventDefault();
 485            } // If last element is focused and shiftkey is not in use, focus first item within modal
 486  
 487  
 488            if (!e.shiftKey && focusedIndex === this.focusableElements.length - 1) {
 489              this.focusableElements[0].focus();
 490              e.preventDefault();
 491            }
 492          }
 493        } // Prevents the mousedown event from "eating" the click event.
 494        // eslint-disable-next-line class-methods-use-this
 495        ;
 496  
 497        _proto.mousedown = function mousedown(e) {
 498          e.stopPropagation();
 499          e.preventDefault();
 500        };
 501  
 502        _proto.getColorName = function getColorName(value) {
 503          // Expand any short code
 504          var newValue = value;
 505  
 506          if (value.length === 4) {
 507            var tmpValue = value.split('');
 508            newValue = tmpValue[0] + tmpValue[1] + tmpValue[1] + tmpValue[2] + tmpValue[2] + tmpValue[3] + tmpValue[3];
 509          } // eslint-disable-next-line no-restricted-syntax
 510  
 511  
 512          for (var color in colorNames) {
 513            // eslint-disable-next-line no-prototype-builtins
 514            if (colorNames.hasOwnProperty(color) && newValue.toLowerCase() === colorNames[color]) {
 515              return color;
 516            }
 517          }
 518  
 519          return this.textColor + " " + value.replace('#', '').split('').join(', ');
 520        }
 521        /**
 522         * Converts a RGB color to its hexadecimal value.
 523         * See http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-$
 524         */
 525        // eslint-disable-next-line class-methods-use-this
 526        ;
 527  
 528        _proto.rgb2hex = function rgb2hex(rgb) {
 529          var hex = function hex(x) {
 530            return ("0" + parseInt(x, 10).toString(16)).slice(-2);
 531          };
 532  
 533          var matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 534          return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3]);
 535        };
 536  
 537        _createClass(JoomlaFieldSimpleColor, [{
 538          key: "textSelect",
 539          get: function get() {
 540            return this.getAttribute('text-select');
 541          }
 542        }, {
 543          key: "textColor",
 544          get: function get() {
 545            return this.getAttribute('text-color');
 546          }
 547        }, {
 548          key: "textClose",
 549          get: function get() {
 550            return this.getAttribute('text-close');
 551          }
 552        }, {
 553          key: "textTransp",
 554          get: function get() {
 555            return this.getAttribute('text-transparent');
 556          }
 557        }], [{
 558          key: "observedAttributes",
 559          get: function get() {
 560            return ['text-select', 'text-color', 'text-close', 'text-transparent'];
 561          }
 562        }]);
 563  
 564        return JoomlaFieldSimpleColor;
 565      }( /*#__PURE__*/_wrapNativeSuper(HTMLElement));
 566  
 567      customElements.define('joomla-field-simple-color', JoomlaFieldSimpleColor);
 568    })(customElements);
 569  
 570  })();