芝麻web文件管理V1.00
编辑当前文件:/home2/sdektunc/.trash/media.9/system/js/fields/joomla-field-simple-color-es5.js
(function () { 'use strict'; function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; _setPrototypeOf(subClass, superClass); } function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } function _construct(Parent, args, Class) { if (_isNativeReflectConstruct()) { _construct = Reflect.construct; } else { _construct = function _construct(Parent, args, Class) { var a = [null]; a.push.apply(a, args); var Constructor = Function.bind.apply(Parent, a); var instance = new Constructor(); if (Class) _setPrototypeOf(instance, Class.prototype); return instance; }; } return _construct.apply(null, arguments); } function _isNativeFunction(fn) { return Function.toString.call(fn).indexOf("[native code]") !== -1; } function _wrapNativeSuper(Class) { var _cache = typeof Map === "function" ? new Map() : undefined; _wrapNativeSuper = function _wrapNativeSuper(Class) { if (Class === null || !_isNativeFunction(Class)) return Class; if (typeof Class !== "function") { throw new TypeError("Super expression must either be null or a function"); } if (typeof _cache !== "undefined") { if (_cache.has(Class)) return _cache.get(Class); _cache.set(Class, Wrapper); } function Wrapper() { return _construct(Class, arguments, _getPrototypeOf(this).constructor); } Wrapper.prototype = Object.create(Class.prototype, { constructor: { value: Wrapper, enumerable: false, writable: true, configurable: true } }); return _setPrototypeOf(Wrapper, Class); }; return _wrapNativeSuper(Class); } /** * Based on: * Very simple jQuery Color Picker * Copyright (C) 2012 Tanguy Krotoff * Licensed under the MIT license * * ADAPTED BY: Dimitris Grammatikogiannis * * MIT License * * Permission is hereby granted, free of charge, to any person obtaining * a copy of this software and associated documentation files (the * "Software"), to deal in the Software without restriction, including * without limitation the rights to use, copy, modify, merge, publish, * distribute, sublicense, and/or sell copies of the Software, and to * permit persons to whom the Software is furnished to do so, subject to * the following conditions: * * The above copyright notice and this permission notice shall be * included in all copies or substantial portions of the Software. * * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF * MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE * LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION * OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION * WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ (function (customElements) { var KEYCODE = { TAB: 9, ESC: 27 }; var colorNames = { aliceblue: '#f0f8ff', antiquewhite: '#faebd7', aqua: '#00ffff', aquamarine: '#7fffd4', azure: '#f0ffff', beige: '#f5f5dc', bisque: '#ffe4c4', black: '#000000', blanchedalmond: '#ffebcd', blue: '#0000ff', blueviolet: '#8a2be2', brown: '#a52a2a', burlywood: '#deb887', cadetblue: '#5f9ea0', chartreuse: '#7fff00', chocolate: '#d2691e', coral: '#ff7f50', cornflowerblue: '#6495ed', cornsilk: '#fff8dc', crimson: '#dc143c', cyan: '#00ffff', darkblue: '#00008b', darkcyan: '#008b8b', darkgoldenrod: '#b8860b', darkgray: '#a9a9a9', darkgreen: '#006400', darkgrey: '#a9a9a9', darkkhaki: '#bdb76b', darkmagenta: '#8b008b', darkolivegreen: '#556b2f', darkorange: '#ff8c00', darkorchid: '#9932cc', darkred: '#8b0000', darksalmon: '#e9967a', darkseagreen: '#8fbc8f', darkslateblue: '#483d8b', darkslategray: '#2f4f4f', darkslategrey: '#2f4f4f', darkturquoise: '#00ced1', darkviolet: '#9400d3', deeppink: '#ff1493', deepskyblue: '#00bfff', dimgray: '#696969', dimgrey: '#696969', dodgerblue: '#1e90ff', firebrick: '#b22222', floralwhite: '#fffaf0', forestgreen: '#228b22', fuchsia: '#ff00ff', gainsboro: '#dcdcdc', ghostwhite: '#f8f8ff', gold: '#ffd700', goldenrod: '#daa520', gray: '#808080', green: '#008000', greenyellow: '#adff2f', grey: '#808080', honeydew: '#f0fff0', hotpink: '#ff69b4', indianred: '#cd5c5c', indigo: '#4b0082', ivory: '#fffff0', khaki: '#f0e68c', lavender: '#e6e6fa', lavenderblush: '#fff0f5', lawngreen: '#7cfc00', lemonchiffon: '#fffacd', lightblue: '#add8e6', lightcoral: '#f08080', lightcyan: '#e0ffff', lightgoldenrodyellow: '#fafad2', lightgray: '#d3d3d3', lightgreen: '#90ee90', lightgrey: '#d3d3d3', lightpink: '#ffb6c1', lightsalmon: '#ffa07a', lightseagreen: '#20b2aa', lightskyblue: '#87cefa', lightslategray: '#778899', lightslategrey: '#778899', lightsteelblue: '#b0c4de', lightyellow: '#ffffe0', lime: '#00ff00', limegreen: '#32cd32', linen: '#faf0e6', magenta: '#ff00ff', maroon: '#800000', mediumaquamarine: '#66cdaa', mediumblue: '#0000cd', mediumorchid: '#ba55d3', mediumpurple: '#9370db', mediumseagreen: '#3cb371', mediumslateblue: '#7b68ee', mediumspringgreen: '#00fa9a', mediumturquoise: '#48d1cc', mediumvioletred: '#c71585', midnightblue: '#191970', mintcream: '#f5fffa', mistyrose: '#ffe4e1', moccasin: '#ffe4b5', navajowhite: '#ffdead', navy: '#000080', oldlace: '#fdf5e6', olive: '#808000', olivedrab: '#6b8e23', orange: '#ffa500', orangered: '#ff4500', orchid: '#da70d6', palegoldenrod: '#eee8aa', palegreen: '#98fb98', paleturquoise: '#afeeee', palevioletred: '#db7093', papayawhip: '#ffefd5', peachpuff: '#ffdab9', peru: '#cd853f', pink: '#ffc0cb', plum: '#dda0dd', powderblue: '#b0e0e6', purple: '#800080', red: '#ff0000', rosybrown: '#bc8f8f', royalblue: '#4169e1', saddlebrown: '#8b4513', salmon: '#fa8072', sandybrown: '#f4a460', seagreen: '#2e8b57', seashell: '#fff5ee', sienna: '#a0522d', silver: '#c0c0c0', skyblue: '#87ceeb', slateblue: '#6a5acd', slategray: '#708090', slategrey: '#708090', snow: '#fffafa', springgreen: '#00ff7f', steelblue: '#4682b4', tan: '#d2b48c', teal: '#008080', thistle: '#d8bfd8', tomato: '#ff6347', turquoise: '#40e0d0', violet: '#ee82ee', wheat: '#f5deb3', white: '#ffffff', whitesmoke: '#f5f5f5', yellow: '#ffff00', yellowgreen: '#9acd32' }; var JoomlaFieldSimpleColor = /*#__PURE__*/function (_HTMLElement) { _inheritsLoose(JoomlaFieldSimpleColor, _HTMLElement); function JoomlaFieldSimpleColor() { var _this; _this = _HTMLElement.call(this) || this; // Define some variables _this.select = ''; _this.options = []; _this.icon = ''; _this.panel = ''; _this.buttons = []; _this.focusableElements = null; _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^="-"])']; return _this; } var _proto = JoomlaFieldSimpleColor.prototype; _proto.connectedCallback = function connectedCallback() { var _this2 = this; this.select = this.querySelector('select'); if (!this.select) { throw new Error('Simple color field requires a select element'); } this.options = [].slice.call(this.select.querySelectorAll('option')); this.select.classList.add('hidden'); // Build the pop up this.options.forEach(function (option) { var color = option.value; var clss = 'swatch'; if (color === 'none') { clss += ' nocolor'; color = 'transparent'; } if (option.selected) { clss += ' active'; } var el = document.createElement('button'); el.setAttribute('class', clss); el.style.backgroundColor = color; el.setAttribute('type', 'button'); var a11yColor = color === 'transparent' ? _this2.textTransp : _this2.getColorName(color); el.innerHTML = Joomla.sanitizeHtml("
" + a11yColor + "
"); _this2.buttons.push(el); }); // Add a close button var close = document.createElement('button'); close.setAttribute('class', 'btn-close'); close.setAttribute('type', 'button'); close.innerHTML = Joomla.sanitizeHtml(this.textClose); this.buttons.push(close); var color = this.select.value; var clss = ''; if (color === 'none') { clss += ' nocolor'; color = 'transparent'; } this.icon = document.createElement('button'); if (clss) { this.icon.setAttribute('class', clss); } var uniqueId = "simple-color-" + Math.random().toString(36).substr(2, 10); this.icon.setAttribute('type', 'button'); this.icon.setAttribute('tabindex', '0'); this.icon.style.backgroundColor = color; this.icon.innerHTML = Joomla.sanitizeHtml("
" + this.textSelect + "
"); this.icon.id = uniqueId; this.select.insertAdjacentElement('beforebegin', this.icon); this.icon.addEventListener('click', this.show.bind(this)); this.panel = document.createElement('div'); this.panel.classList.add('simplecolors-panel'); this.panel.setAttribute('aria-labelledby', uniqueId); this.hide = this.hide.bind(this); this.colorSelect = this.colorSelect.bind(this); this.buttons.forEach(function (el) { if (el.classList.contains('btn-close')) { el.addEventListener('click', _this2.hide); } else { el.addEventListener('click', _this2.colorSelect); } _this2.panel.insertAdjacentElement('beforeend', el); }); this.appendChild(this.panel); this.focusableElements = [].slice.call(this.panel.querySelectorAll(this.focusableSelectors.join())); this.keys = this.keys.bind(this); this.hide = this.hide.bind(this); this.mousedown = this.mousedown.bind(this); }; // Show the panel _proto.show = function show() { document.addEventListener('mousedown', this.hide); this.addEventListener('keydown', this.keys); this.panel.addEventListener('mousedown', this.mousedown); this.panel.setAttribute('data-open', ''); var focused = this.panel.querySelector('button'); if (focused) { focused.focus(); } } // Hide panel ; _proto.hide = function hide() { document.removeEventListener('mousedown', this.hide, false); this.removeEventListener('keydown', this.keys); if (this.panel.hasAttribute('data-open')) { this.panel.removeAttribute('data-open'); } this.icon.focus(); }; _proto.colorSelect = function colorSelect(e) { var color = ''; var bgcolor = ''; var clss = ''; if (e.target.classList.contains('nocolor')) { color = 'none'; bgcolor = 'transparent'; clss = 'nocolor'; } else { color = this.rgb2hex(e.target.style.backgroundColor); bgcolor = color; } // Reset the active class this.buttons.forEach(function (el) { if (el.classList.contains('active')) { el.classList.remove('active'); } }); // Add the active class to the selected button e.target.classList.add('active'); this.icon.classList.remove('nocolor'); this.icon.setAttribute('class', clss); this.icon.style.backgroundColor = bgcolor; // trigger change event both on the select and on the custom element this.select.dispatchEvent(new Event('change')); this.dispatchEvent(new CustomEvent('change', { detail: { value: color }, bubbles: true })); // Hide the panel this.hide(); // Change select value this.options.forEach(function (el) { if (el.selected) { el.removeAttribute('selected'); } if (el.value === bgcolor) { el.setAttribute('selected', ''); } }); }; _proto.keys = function keys(e) { if (e.keyCode === KEYCODE.ESC) { this.hide(); } if (e.keyCode === KEYCODE.TAB) { // Get the index of the current active element var focusedIndex = this.focusableElements.indexOf(document.activeElement); // If first element is focused and shiftkey is in use, focus last item within modal if (e.shiftKey && (focusedIndex === 0 || focusedIndex === -1)) { this.focusableElements[this.focusableElements.length - 1].focus(); e.preventDefault(); } // If last element is focused and shiftkey is not in use, focus first item within modal if (!e.shiftKey && focusedIndex === this.focusableElements.length - 1) { this.focusableElements[0].focus(); e.preventDefault(); } } } // Prevents the mousedown event from "eating" the click event. // eslint-disable-next-line class-methods-use-this ; _proto.mousedown = function mousedown(e) { e.stopPropagation(); e.preventDefault(); }; _proto.getColorName = function getColorName(value) { // Expand any short code var newValue = value; if (value.length === 4) { var tmpValue = value.split(''); newValue = tmpValue[0] + tmpValue[1] + tmpValue[1] + tmpValue[2] + tmpValue[2] + tmpValue[3] + tmpValue[3]; } // eslint-disable-next-line no-restricted-syntax for (var color in colorNames) { // eslint-disable-next-line no-prototype-builtins if (colorNames.hasOwnProperty(color) && newValue.toLowerCase() === colorNames[color]) { return color; } } return this.textColor + " " + value.replace('#', '').split('').join(', '); } /** * Converts a RGB color to its hexadecimal value. * See http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-$ */ // eslint-disable-next-line class-methods-use-this ; _proto.rgb2hex = function rgb2hex(rgb) { var hex = function hex(x) { return ("0" + parseInt(x, 10).toString(16)).slice(-2); }; var matches = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); return "#" + hex(matches[1]) + hex(matches[2]) + hex(matches[3]); }; _createClass(JoomlaFieldSimpleColor, [{ key: "textSelect", get: function get() { return this.getAttribute('text-select'); } }, { key: "textColor", get: function get() { return this.getAttribute('text-color'); } }, { key: "textClose", get: function get() { return this.getAttribute('text-close'); } }, { key: "textTransp", get: function get() { return this.getAttribute('text-transparent'); } }], [{ key: "observedAttributes", get: function get() { return ['text-select', 'text-color', 'text-close', 'text-transparent']; } }]); return JoomlaFieldSimpleColor; }( /*#__PURE__*/_wrapNativeSuper(HTMLElement)); customElements.define('joomla-field-simple-color', JoomlaFieldSimpleColor); })(customElements); }());