149 lines
32 KiB
JavaScript
149 lines
32 KiB
JavaScript
|
(()=>{"use strict";const e=m(),t=[`https://app.tildacdn.${e}/tfront/plugins/colorpicker/t-colorpicker.min.js`,`https://app.tildacdn.${e}/tfront/plugins/colorpicker/t-colorpicker.min.css`],n=[`https://app.tildacdn.${e}/tfront/plugins/tooltip/t-tooltip.min.js`,`https://app.tildacdn.${e}/tfront/plugins/tooltip/t-tooltip.min.css`],i=[`https://app.tildacdn.${e}/tfront/plugins/previewbox/t-previewbox.min.js`,`https://app.tildacdn.${e}/tfront/plugins/previewbox/t-previewbox.min.css`],s=[`https://app.tildacdn.${e}/tfront/plugins/sortable-lite/t-sortable-lite.min.js`,`https://app.tildacdn.${e}/tfront/plugins/sortable-lite/t-sortable-lite.min.css`],o={position:"bottom",closeDelay:0,maxWidth:200,zIndex:999999999},a={position:"top",type:"info",closeDelay:0,maxWidth:250,zIndex:999999999};var l=function(e,t,n,i){var s;t[0]=0;for(var o=1;o<t.length;o++){var a=t[o++],r=t[o]?(t[0]|=a?1:2,n[t[o++]]):t[++o];3===a?i[0]=r:4===a?i[1]=Object.assign(i[1]||{},r):5===a?(i[1]=i[1]||{})[t[++o]]=r:6===a?i[1][t[++o]]+=r+"":a?(s=e.apply(r,l(e,r,n,["",null])),i.push(s),r[0]?t[0]|=2:(t[o-2]=0,t[o]=s)):i.push(r)}return i},r=new Map;const c=function(e){var t=r.get(this);return t||(t=new Map,r.set(this,t)),(t=l(this,t.get(e)||(t.set(e,t=function(e){for(var t,n,i=1,s="",o="",a=[0],l=function(e){1===i&&(e||(s=s.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?a.push(0,e,s):3===i&&(e||s)?(a.push(3,e,s),i=2):2===i&&"..."===s&&e?a.push(4,e,0):2===i&&s&&!e?a.push(5,0,!0,s):i>=5&&((s||!e&&5===i)&&(a.push(i,0,s,n),i=6),e&&(a.push(i,e,0,n),i=6)),s=""},r=0;r<e.length;r++){r&&(1===i&&l(),l(r));for(var c=0;c<e[r].length;c++)t=e[r][c],1===i?"<"===t?(l(),a=[a],i=3):s+=t:4===i?"--"===s&&">"===t?(i=1,s=""):s=t+s[0]:o?t===o?o="":s+=t:'"'===t||"'"===t?o=t:">"===t?(l(),i=1):i&&("="===t?(i=5,n=s,s=""):"/"===t&&(i<5||">"===e[r][c+1])?(l(),3===i&&(a=a[0]),i=a,(a=a[0]).push(2,0,i),i=0):" "===t||"\t"===t||"\n"===t||"\r"===t?(l(),i=2):s+=t),3===i&&"!--"===s&&(i=4,a=a[0])}return l(),a}(e)),t),arguments,[])).length>1?t:t[0]}.bind((function(e,t){this[0]=3;for(var i=arguments.length,s=new Array(i>2?i-2:0),l=2;l<i;l++)s[l-2]=arguments[l];if("function"==typeof e){const n=t?.bindTo;n&&delete t.bindTo;const i=new e(t).render(),o=i.querySelector("[children-container]")||i;if(o.append(...s.flat()),o.removeAttribute("children-container"),Array.isArray(n)){const[e,t]=n;e&&"object"==typeof e&&["string","number"].includes(typeof t)&&(e[t]=i)}return i}if("string"==typeof e){const i=document.createElement(e);return t&&Object.entries(t).forEach((e=>{let[t,s]=e;if(t.startsWith("on"))Array.isArray(s)?s.forEach((e=>i.addEventListener(t.substring(2).toLowerCase(),e))):"function"==typeof s&&i.addEventListener(t.substring(2).toLowerCase(),s);else if("className"===t&&"string"==typeof s)i.classList.add(...s.split(" "));else if("tooltip"===t&&"string"==typeof s)l=i,r=s,d(n).then((()=>{if(!window.Tooltip)return;const e=new window.Tooltip({...o,target:l,content:{title:r}});l.updateTooltipContent=e.updateContent.bind(e)}));else if("infoTooltip"===t&&s&&"object"==typeof s)!function(e,t){d(n).then((()=>{if(!window.Tooltip)return;const n=new window.Tooltip({...a,target:e,content:t});e.updateTooltipContent=n.updateContent.bind(n)}))}(i,s);else if("bindTo"===t){if(Array.isArray(s)){const[e,t]=s;e&&"object"==typeof e&&["string","number"].includes(typeof t)&&(e[t]=i)}}else"testid"===t||("string"==typeof s||"number"==typeof s?i.setAttribute(t,s.toString()):"boolean"==typeof s&&s?i.setAttribute(t,""):s&&(i[t]=s));var l,r})),i.append(...s.flat()),i}if(e instanceof Element)return e;throw new Error("Неверный тип для создания элемента")}));function h(){const e=[];return{on:t=>{e.push(t)},trigger:function(){for(var t=arguments.length,n=new Array(t),i=0;i<t;i++)n[i]=arguments[i];e.forEach((e=>e(...n)))}}}function p(e,t,n){return Math.max(e,Math.min(t,n))}function d(e){const t=(Array.isArray(e)?e:[e]).map((e=>{const t=e.split("."),n=t.pop()?.toLowerCase(),i=window.ver?"?v="+window.ver:"";return"js"===n||"css"===n?function(e,t){return new Promise(((n,i)=>{const s="style"===t,o=s?"link":"script",a=s?"href":"
|
||
|
|
<option
|
||
|
|
value=${e.value}
|
||
|
|
selected=${e.value===this.props.value}
|
||
|
|
disabled=${!!e.disabled}
|
||
|
|
>
|
||
|
|
${e.label}
|
||
|
|
</option>
|
||
|
|
`));return this.element=c`
|
||
|
|
<select
|
||
|
|
className="tsp-panel__select"
|
||
|
|
onChange=${[N(this,C,I).bind(this),this.props.changeHandler]}
|
||
|
|
></select>
|
||
|
|
`,this.element.append(...e),N(this,C,I).call(this),this.element}set value(e){this.element.value=e,N(this,C,I).call(this)}}function I(){const e=this.element.selectedOptions[0],t=document.createElement("div");t.classList.add("tsp-select-helper"),t.innerText=e.innerText,document.body.appendChild(t),this.element.style.width=`${t.offsetWidth}px`,t.remove()}function D(e,t){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.add(e)}function W(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}var P=new WeakSet;class z{constructor(e){D(this,P),this.props=e,this.props.updateTrigger.on(W(this,P,j).bind(this))}render(){return this.element=c`
|
||
|
|
<div className="tsp-preview">
|
||
|
|
<div className="tsp-preview__box" bindTo=${[this,"previewBox"]}></div>
|
||
|
|
</div>
|
||
|
|
`,W(this,P,j).call(this),this.element}}function j(){const e=k(this.props.settings);this.previewBox.style.boxShadow=e}function H(e,t){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.add(e)}function A(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}var B=new WeakSet,O=new WeakSet,M=new WeakSet,F=new WeakSet,R=new WeakSet,K=new WeakSet;class X{constructor(e){H(this,K),H(this,R),H(this,F),H(this,M),H(this,O),H(this,B),e="[object Object]"===Object.prototype.toString.call(e)?e:{},this.props={label:E(e.label||"",e.lang),min:isNaN(e.min)?null:e.min,max:isNaN(e.max)?null:e.max,units:"string"==typeof e.units?e.units:"",factor:e.factor&&!isNaN(e.factor)?e.factor:null,placeholder:"string"==typeof e.placeholder?e.placeholder:"",isColor:!!e.isColor,isNumber:!!e.isNumber,isSingleLine:!!e.isSingleLine,value:e.value,name:e.name||"",inputHandler:"function"==typeof e.inputHandler?e.inputHandler:function(){},blurHandler:"function"==typeof e.blurHandler?e.blurHandler:function(){},isCopyButton:!!e.isCopyButton,isSelectOnFocus:!!e.isSelectOnFocus,colorPickers:e.colorPickers||[],theme:e.theme,lang:e.lang,zIndex:e.zIndex}}render(){const{isColor:e,isSingleLine:t,inputHandler:n,label:i,name:s,isCopyButton:o,lang:a}=this.props;return this.element=c`
|
||
|
|
<label className="tsp-panel__input-label${t?" tsp-panel__input-label_line":""}">
|
||
|
|
<span className="tsp-panel__input-span">${i}</span>
|
||
|
|
<input
|
||
|
|
type="text"
|
||
|
|
className="tsp-panel__input"
|
||
|
|
placeholder=${this.props.placeholder}
|
||
|
|
onFocus=${A(this,O,q).bind(this)}
|
||
|
|
onBlur=${[A(this,M,Y).bind(this),this.props.blurHandler]}
|
||
|
|
onKeydown=${A(this,F,G).bind(this)}
|
||
|
|
name=${s}
|
||
|
|
onInput=${e?void 0:n}
|
||
|
|
onColorchange=${e?n:void 0}
|
||
|
|
bindTo=${[this,"input"]}
|
||
|
|
/>
|
||
|
|
<button
|
||
|
|
className="tsp-panel__input-btn${o?"":" tsp-panel__input-btn_hidden"}"
|
||
|
|
type="button"
|
||
|
|
tooltip=${E("copy",a)}
|
||
|
|
onClick=${A(this,K,J).bind(this)}
|
||
|
|
bindTo=${[this,"copyButton"]}
|
||
|
|
></button>
|
||
|
|
</label>
|
||
|
|
`,e?A(this,B,U).call(this):this.value=this.props.value,this.element}set value(e){if(null===e)return void(this.input.value="");e=String(e);const{units:t,isNumber:n,isColor:i,factor:s}=this.props;if(n){s&&(e*=s);e=A(this,R,Z).call(this,e)+t}i&&this.colorpicker?this.colorpicker.color=e:this.input.value=e}get value(){const{value:e}=this.input,{isNumber:t,isColor:n,factor:i}=this.props;if(!e&&!n)return null;if(t){let t=A(this,R,Z).call(this,e);return i&&(t/=i),t}if(n){if(!this.colorpicker||!this.colorpicker.color)return null;const e=this.colorpicker.color;return"#"+window.TColorPicker.hslToHEX(e)}return e}}function U(){const{theme:e,lang:n,zIndex:i}=this.props;d(t).then((()=>{this.colorpicker=new window.TColorPicker(this.input,{...b,theme:e,lang:n,panelZIndex:i+1}),this.colorpicker.init(),this.props.colorPickers.push(this.colorpicker),this.value=this.props.value})).catch((()=>{throw new Error("Error loading colorpicker")}))}function q(){const{isNumber:e,units:t,isSelectOnFocus:n}=this.props;n&&this.input.select();const{value:i}=this.input;if(!e||!t||!i)return;const s=parseInt(i,10)||0;this.input.value=s}function Y(){const{isNumber:e,units:t}=this.props,{value:n}=this.input;if(!e||!n)return;const i=A(this,R,Z).call(this,n);this.input.value=i+(t||"")}function G(e){const{isNumber:t}=this.props;if(!t||!["ArrowUp","ArrowDown"].includes(e.key))return;e.preventDefault();const n=parseInt(this.input.value,10)||0,i="ArrowUp"===e.key?n+1:n-1,s=A(this,R,Z).call(this,i);this.input.value=s,this.input.dispatchEvent(new Event("input"))}function Z(e){const{min:t,max:n,isNumber:i}=this.props;if(!i)return;let s=parseInt(e,10)||0;return null!==t&&(s=Math.max(t,s)),null!==n&&(s=Math.min(n,s)),s}function J(){const{value:e}=this.input;navigator.clipboard.writeText(e),this.copyButton.classList.add("tsp-panel__input-btn_done"),window.clearTimeout(this.copyButton.copyTimeout),this.copyButton.copyTimeout=window.setTimeout((()=>{this.copyButton.classList.remove("tsp-panel__input-btn_done")}),1e3)}function Q(e,t){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.add(e)}function V(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}var ee=new WeakSet;class te{constructor(e){Q(this,ee),this.props=e,this.inputs=[]}render(){const{isExpanded:e,isDeleted:t}=this.props.settings,{lang:n,zIndex:i}=this.props;if(t){const e=p(0,(Date.now()-this.props.settings.deleteTimestamp)/1e3/3,1),t=Math.round(3*(1-e));this.element=c`
|
||
|
|
<div className="tsp-panel__layer">
|
||
|
|
<div
|
||
|
|
className="tsp-panel__layer-header tsp-panel__layer-header_deleted tsp-panel__section"
|
||
|
|
style=${`--time-shift:${e}; --delete-delay:3s;`}
|
||
|
|
>
|
||
|
|
<span className="tsp-panel__layer-deleted-span">${E("layer_deleted",n)}</span>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="tsp-panel__layer-deleted-button"
|
||
|
|
onClick=${this.props.restoreHandler}
|
||
|
|
>
|
||
|
|
<svg className="tsp-panel__layer-deleted-circle" viewBox="0 0 14 14">
|
||
|
|
<circle r="6" cx="7" cy="7"></circle>
|
||
|
|
</svg>
|
||
|
|
<span className="tsp-panel__layer-deleted-counter" bindTo=${[this,"counterElement"]}>
|
||
|
|
${t}
|
||
|
|
</span>
|
||
|
|
${E("restore",n)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;const i=window.setInterval((()=>{const e=p(0,(Date.now()-this.props.settings.deleteTimestamp)/1e3/3,1),t=Math.round(3*(1-e));this.counterElement.innerText=t,t||window.clearInterval(i)}),50);return this.element}const s=$.map((e=>{const t=_[e];t.value=this.props.settings[e];const s=new X({...t,name:e,inputHandler:V(this,ee,ne).bind(this),colorPickers:this.props.colorPickers,theme:this.props.theme,lang:n,zIndex:i});return this.inputs.push(s),s.render()}));return this.element=c`
|
||
|
|
<div className="tsp-panel__layer${e?" tsp-panel__layer_expanded":""}">
|
||
|
|
<div className="tsp-panel__layer-header tsp-panel__section">
|
||
|
|
<div className="tsp-panel__layer-handle"></div>
|
||
|
|
<button type="button" className="tsp-panel__layer-button" onClick=${this.props.expandHandler}>
|
||
|
|
${E("layer",n)} ${this.props.settings.order}
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="tsp-panel__layer-delete"
|
||
|
|
onClick=${this.props.deleteHandler}
|
||
|
|
tooltip=${E("delete_layer",n)}
|
||
|
|
></button>
|
||
|
|
</div>
|
||
|
|
<div className="tsp-panel__layer-inputs tsp-panel__section">${s}</div>
|
||
|
|
</div>
|
||
|
|
`,this.element}}function ne(e){const{name:t}=e.target,n=this.inputs.find((e=>{let{input:n}=e;return n.name===t}));if(!n)return;const i=n.value;this.props.settings[t]=i,this.props.updateTrigger&&this.props.updateTrigger.trigger()}function ie(e,t){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.add(e)}function se(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}var oe=new WeakSet,ae=new WeakSet,le=new WeakSet,re=new WeakSet,ce=new WeakSet,he=new WeakSet,pe=new WeakSet,de=new WeakSet;class ue{constructor(e){ie(this,de),ie(this,pe),ie(this,he),ie(this,ce),ie(this,re),ie(this,le),ie(this,ae),ie(this,oe),this.props=e}render(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.props.colorPickers.forEach((e=>e.destroy())),this.props.colorPickers.splice(0);const{settings:t,theme:n,lang:i,zIndex:s}=this.props;return t.forEach(((o,a)=>{o.order=a+1,e&&1!==t.length||(o.isExpanded=a===t.length-1),o.element=c`
|
||
|
|
<${te}
|
||
|
|
settings=${o}
|
||
|
|
updateTrigger=${this.props.updateTrigger}
|
||
|
|
deleteHandler=${se(this,re,fe).bind(this)}
|
||
|
|
restoreHandler=${se(this,he,ye).bind(this)}
|
||
|
|
expandHandler=${se(this,pe,ve).bind(this)}
|
||
|
|
colorPickers=${this.props.colorPickers}
|
||
|
|
theme=${n}
|
||
|
|
lang=${i}
|
||
|
|
zIndex=${s}
|
||
|
|
/>
|
||
|
|
`})),this.element=c`
|
||
|
|
<div className="tsp-panel__layers${1===t.length?" tsp-panel__layers_single":""}">
|
||
|
|
${t.map((e=>{let{element:t}=e;return t}))}
|
||
|
|
<div className="tsp-panel__section tsp-panel__layers-btn-wrapper">
|
||
|
|
<button type="button" className="tsp-panel__layers-btn" onClick=${se(this,le,we).bind(this)}>
|
||
|
|
${E("add_layer",i)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`,se(this,oe,me).call(this),this.element}update(){let e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1?arguments[1]:void 0,n=arguments.length>2?arguments[2]:void 0;this.sortable&&this.sortable.destroy();const i=this.element,{scrollTop:s}=i;this.render(e),i.replaceWith(this.element),this.element.scrollTo(0,e?s:this.element.scrollHeight),n||this.props.updateTrigger.trigger(t)}}function me(){const{theme:e}=this.props;this.props.settings.length<=1||("dark"===e&&(y.dragImage.className="tsp-panel__drag-image_dark"),d(s).then((()=>{this.sortable=new window.TSortableLite(this.element,{...y,onDrop:se(this,ae,ge).bind(this)}).init()})))}function ge(e){const{prevEl:t,nextEl:n}=e.relativeTargets,i=e.draggingElement,{settings:s}=this.props;if(!t&&!n||!i)return;const o=!!t,a=s.find((e=>{let{element:t}=e;return t===i})),l=s.find((e=>{let{element:i}=e;return i===(o?t:n)}));if(!a||!l)return;const r=s.indexOf(a);s.splice(r,1);const c=s.indexOf(l);s.splice(o?c+1:c,0,a),this.update(!0)}function we(){const{settings:e}=this.props,t={...e[e.length-1]||se(this,de,_e).call(this)};Object.keys(t).forEach((e=>{$.includes(e)||delete t[e],"x"!==e&&"y"!==e||!t[e]||(t[e]*=-1)})),e.push(t),this.update()}function fe(e){const{settings:t}=this.props,n=e.target.closest(".tsp-panel__layer"),i=t.find((e=>{let{element:t}=e;return t===n}));i.isDeleted=!0,i.deleteTimestamp=Date.now(),i.deleteTimeout=window.setTimeout(se(this,ce,be).bind(this,i),3e3),this.update(!0)}function be(e){const{settings:t}=this.props,n=t.indexOf(e);-1!==n&&(t.splice(n,1),t.length||t.push(se(this,de,_e).call(this)),this.update(!0,!1,!0))}function ye(e){const{settings:t}=this.props,n=e.target.closest(".tsp-panel__layer"),i=t.find((e=>{let{element:t}=e;return t===n}));window.clearTimeout(i.deleteTimeout),delete i.deleteTimeout,delete i.isDeleted,delete i.deleteTimestamp,this.update(!0)}function ve(e){const{settings:t}=this.props,n=e.target.closest(".tsp-panel__layer"),i=n.classList.contains("tsp-panel__layer_expanded"),s=t.find((e=>{let{element:t}=e;return t===n}));if(i)s.isExpanded=!1,n.classList.remove("tsp-panel__layer_expanded");else{const e=t.find((e=>{let{isExpanded:t}=e;return t}));e&&(e.isExpanded=!1,e.element.classList.remove("tsp-panel__layer_expanded")),s.isExpanded=!0,n.classList.add("tsp-panel__layer_expanded")}}function _e(){const e={};return $.forEach((t=>e[t]=null)),e}function $e(e,t){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.add(e)}function xe(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}var ke=new WeakSet,Ee=new WeakSet,Te=new WeakSet,Se=new WeakSet,Ne=new WeakSet,Ce=new WeakSet,Le=new WeakSet;class Ie{constructor(e){$e(this,Le),$e(this,Ce),$e(this,Ne),$e(this,Se),$e(this,Te),$e(this,Ee),$e(this,ke),e="[object Object]"===Object.prototype.toString.call(e)?e:{},this.settings=e.settings,this.initialShadow=k(this.settings),this.closeHandler="function"==typeof e.closeHandler?e.closeHandler:function(){},this.relatedElement=e.relatedElement,this.editButton=e.editButton,this.shadowChangeTrigger=e.shadowChangeTrigger,this.colorPickers=[],this.theme=e.theme,this.altNoLabel=e.altNoLabel,this.lang=e.lang,this.zIndex=e.zIndex,this.handleDocClick=this.handleDocClick.bind(this),this.handleDocKeyDown=this.handleDocKeyDown.bind(this),this.handleDocPointerDown=this.handleDocPointerDown.bind(this),this.handleTransitionEnd=this.handleTransitionEnd.bind(this),this.updateTrigger=h(),this.updateTrigger.on(xe(this,Se,ze).bind(this))}render(){const{lang:e,zIndex:t}=this;this.cssInput=new X({label:"css",isSingleLine:!0,value:k(this.settings),blurHandler:xe(this,Ne,je).bind(this),inputHandler:xe(this,Ne,je).bind(this),isCopyButton:!0,isSelectOnFocus:!0,lang:e}),this.layersCollection=new ue({settings:this.settings,updateTrigger:this.updateTrigger,colorPickers:this.colorPickers,theme:this.theme,lang:this.lang,zIndex:this.zIndex});const n=f.map((t=>{let n="";t.custom?n="custom":t.empty||(n=k(t));return{value:n,label:E("none"===t.label&&thi
|
||
|
|
<div
|
||
|
|
className="tsp-panel tsp-panel_hidden${"dark"===this.theme?" tsp-panel_dark":""}"
|
||
|
|
style=${`z-index:${t};`}
|
||
|
|
>
|
||
|
|
<div className="tsp-panel__section tsp-panel__header">
|
||
|
|
${this.select.render()}
|
||
|
|
<button className="tsp-panel__header-btn" onClick=${xe(this,Ee,We).bind(this)}></button>
|
||
|
|
</div>
|
||
|
|
<${z} updateTrigger=${this.updateTrigger} settings=${this.settings} />
|
||
|
|
${this.layersCollection.render()}
|
||
|
|
<div className="tsp-panel__section tsp-panel__footer">${this.cssInput.render()}</div>
|
||
|
|
</div>
|
||
|
|
`,u(this.element),xe(this,ke,De).call(this),this.element}handleTransitionEnd(){this.element.remove(),this.element.removeEventListener("transitionend",this.handleTransitionEnd)}handleDocClick(e){const t=this.colorPickers.some((e=>e&&e.panelState));this.element.contains(e.target)||e.target.closest("#confirm-dialog")||this.editButton.contains(e.target)||t||this.isPointerDownOnPanel?this.isPointerDownOnPanel=!1:xe(this,Ee,We).call(this)}handleDocKeyDown(e){const t=this.colorPickers.some((e=>e&&e.panelState));"Escape"!==e.key||t||document.querySelector("#confirm-dialog")||xe(this,Ee,We).call(this)}handleDocPointerDown(e){this.isPointerDownOnPanel=this.element.contains(e.target)}}function De(){document.body.contains(this.element)||(xe(this,Te,Pe).call(this),document.addEventListener("click",this.handleDocClick),document.addEventListener("keydown",this.handleDocKeyDown),document.addEventListener("pointerdown",this.handleDocPointerDown),window.setTimeout((()=>{this.element.classList.remove("tsp-panel_hidden")}),0))}function We(){document.body.contains(this.element)&&(document.removeEventListener("click",this.handleDocClick),document.removeEventListener("keydown",this.handleDocKeyDown),document.removeEventListener("pointerdown",this.handleDocPointerDown),this.layersCollection.sortable&&this.layersCollection.sortable.destroy(),this.closeHandler(),this.element.addEventListener("transitionend",this.handleTransitionEnd),this.element.classList.add("tsp-panel_hidden"))}function Pe(){if(!(this.relatedElement instanceof Element))return;const{top:e,height:t,left:n,width:i}=this.relatedElement.getBoundingClientRect(),{clientWidth:s,clientHeight:o}=document.documentElement,a=-200,l=o-e-t-a-5>=550,r=s-n-i-10-5>=225,c=n-10-5>=225;let h="0px",p="0px";r||!l&&!r&&!c?(h=`${n+i+10}px`,p=`${e+a}px`):l?(h=`${n}px`,p=`${e+t+a}px`):c&&(h=`calc(${n-10}px - 100%)`,p=`${e+a}px`),this.element.style.setProperty("--pos-x",h),this.element.style.setProperty("--pos-y",p)}function ze(e){const t=k(this.settings);e||(this.cssInput.value=t);const n=[...this.select.element.options].find((e=>{let{value:n}=e;return n===t}));this.select.value=n?n.value:"custom",this.shadowChangeTrigger.trigger(t)}function je(e){const{value:t}=this.cssInput;xe(this,Le,Ae).call(this,t,"input"===e.type)}function He(){const{value:e}=this.select.element;xe(this,Le,Ae).call(this,e)}async function Ae(e){let t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];const n=E("invalid_shadow",this.lang),i=await T(e,n);this.settings.splice(0,this.settings.length),this.settings.push(...i),this.layersCollection.update(!1,t,!0),this.updateTrigger.trigger(t)}class Be extends CustomEvent{constructor(e){super("paneltoggle"),this.isOpen=e}}function Oe(e,t){!function(e,t){if(t.has(e))throw new TypeError("Cannot initialize the same private elements twice on an object")}(e,t),t.add(e)}function Me(e,t,n){if(!t.has(e))throw new TypeError("attempted to get private field on non-instance");return n}var Fe=new WeakSet,Re=new WeakSet,Ke=new WeakSet,Xe=new WeakSet,Ue=new WeakSet,qe=new WeakSet,Ye=new WeakSet,Ge=new WeakSet,Ze=new WeakSet,Je=new WeakSet;function Qe(){this.select=Me(this,Re,Ve).call(this);const{theme:e,lang:t}=this.config;this.container=c`
|
||
|
|
<div className="tsp${"dark"===e?" tsp_dark":""}">
|
||
|
|
${this.select}
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
className="tsp__edit"
|
||
|
|
onClick=${Me(this,Ge,ot).bind(this)}
|
||
|
|
bindTo=${[this,"editButton"]}
|
||
|
|
>
|
||
|
|
${E("edit",t)}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
`,this.noActionLayer=c`
|
||
|
|
<div className="tsp__noaction"></div>
|
||
|
|
`,this.input.after(this.container),this.input.type="hidden",this.container.append(this.input),Me(this,Ue,nt).call(this)}function Ve(){const e=c`
|
||
|
|
<select className="tsp__select" onInteraction=${Me(this,qe,it).bind(this)}></select>
|
||
|
|
`,t=Me(this,Ke,et).call(this);return e.append(...t),e}function et(){const e=this.input.value,t=f.map((e=>k(e))).some((t=>t===e)),{altNoLabel:n,lang:i}=this.config;return t||(this.previousInitialShadow=e),f.map((s=>{let o="";s.custom?o="custom":s.empty||(o=k(s));const a=E("none"===s.label&&n?"default":s.label,i);return c`
|
||
|
|
<option
|
||
|
|
value=${o}
|
||
|
|
data-img=${s.img}
|
||
|
|
selected=${o===e||s.custom&&!t}
|
||
|
|
>
|
||
|
|
${s.custom&&this.previousInitialShadow?this.previousInitialShadow:a}
|
||
|
|
</option>
|
||
|
|
`}))}function tt(){this.select.innerHTML="";const e=Me(this,Ke,et).call(this);this.select.append(...e),this.previewBox&&this.previewBox.update()}function nt(){const{theme:e,height:t}=this.config;d(i).then((()=>{this.previewBox=new window.TPreviewbox(this.select,{theme:e,height:t})})).catch((()=>{throw new Error("Fail to load previewbox")}))}function it(){const e=this.select.value;this.input.value="custom"===e?this.previousInitialShadow:e,this.input.dispatchEvent(new Event("change")),Me(this,Xe,tt).call(this),"custom"===e&&Me(this,Ye,st).call(this,this.previousInitialShadow)}async function st(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";if(this.isPanelRendered)return;const{theme:t,lang:n}=this.config,i=E("invalid_shadow",n),s=await T(e,i),{altNoLabel:o,zIndex:a}=this.config;document.body.append(c`
|
||
|
|
<${Ie}
|
||
|
|
settings=${s}
|
||
|
|
relatedElement=${this.container.querySelector(".tprev")||this.container}
|
||
|
|
closeHandler=${Me(this,Ze,at).bind(this)}
|
||
|
|
shadowChangeTrigger=${this.shadowChangeTrigger}
|
||
|
|
editButton=${this.editButton}
|
||
|
|
theme=${t}
|
||
|
|
altNoLabel=${o}
|
||
|
|
lang=${n}
|
||
|
|
zIndex=${a}
|
||
|
|
/>
|
||
|
|
`),this.isPanelRendered=!0,document.body.append(this.noActionLayer),this.input.dispatchEvent(new Be(!0))}function ot(){Me(this,Ye,st).call(this,this.input.value)}function at(){this.isPanelRendered=!1,this.noActionLayer.remove(),this.input.dispatchEvent(new Be(!1))}function lt(e){this.input.value=e,this.input.dispatchEvent(new Event("change")),Me(this,Xe,tt).call(this)}window.TShadowPicker=class{constructor(e,t){if(Oe(this,Je),Oe(this,Ze),Oe(this,Ge),Oe(this,Ye),Oe(this,qe),Oe(this,Ue),Oe(this,Xe),Oe(this,Ke),Oe(this,Re),Oe(this,Fe),!(e instanceof HTMLInputElement))throw new TypeError("Input must be an instance of HTMLInputElement");t="[object Object]"===Object.prototype.toString.call(t)?t:{};let n="EN";const i=Object.keys(g);i.includes(t.lang)?n=t.lang:i.includes(window.lang)&&(n=window.lang),this.config={shadowChangeDelay:!isNaN(t.shadowChangeDelay)&&t.shadowChangeDelay>=0?t.shadowChangeDelay:50,theme:["light","dark"].includes(t.theme)?t.theme:"light",height:!isNaN(t.height)&&t.height>0?t.height:40,altNoLabel:!!t.altNoLabel,zIndex:isNaN(t.zIndex)?9998:t.zIndex,lang:n},this.input=e,this.isPanelRendered=!1,this.previousInitialShadow="",this.shadowChangeTrigger=h(),this.shadowChangeTrigger.on(function(e,t){let n=null;return function(){for(var i=arguments.length,s=new Array(i),o=0;o<i;o++)s[o]=arguments[o];n||(n=window.setTimeout((()=>{e(...s),n&&(window.clearTimeout(n),n=null)}),t))}}(Me(this,Je,lt).bind(this),this.config.shadowChangeDelay)),Me(this,Fe,Qe).call(this)}}})();
|