@silexlabs/grapesjs-filter-styles/dist/index.js

Grapesjs Filter Styles

/*! @silexlabs/grapesjs-filter-styles - 1.1.0 */
!function(e,t){'object'==typeof exports&&'object'==typeof module?module.exports=t():'function'==typeof define&&define.amd?define([],t):'object'==typeof exports?exports["@silexlabs/grapesjs-filter-styles"]=t():e["@silexlabs/grapesjs-filter-styles"]=t()}('undefined'!=typeof globalThis?globalThis:'undefined'!=typeof window?window:this,(()=>(()=>{"use strict";var e={d:(t,n)=>{for(var o in n)e.o(n,o)&&!e.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(e,'__esModule',{value:!0})}},t={};e.r(t),e.d(t,{default:()=>n});const n=function(e){let t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.on('load',(()=>{const n={placeholder:'Search...',appendTo:null,appendBefore:null,...t},r=e.Config.selectorManager.pStylePrefix,i=`${r}filter-styles`,s=document.createElement('div');s.innerHTML=`\n      <style>\n        #${i}-btn {\n          position: absolute;\n          right: 0;\n          border: none;\n          padding: 5px;\n          margin: 5px;\n          line-height: 1;\n          border-radius: 50%;\n          width: 25px;\n          height: 25px;\n          border: 1px solid;\n          z-index: 1;\n          display: flex;\n          justify-content: center;\n          align-items: center;\n          transition: opacity .15s ease;\n          cursor: pointer;\n          opacity: .75;\n        }\n        .empty #${i}-btn {\n          cursor: initial;\n          opacity: .25;\n        }\n      </style>\n\n      <button\n        id="${i}-btn"\n        class="gjs-field gjs-sm-properties gjs-two-color"\n        >X</button>\n      <input id="${i}" type="text" class="gjs-field gjs-sm-properties gjs-two-color" placeholder="${n.placeholder}" />\n    `;const p=e.getContainer().querySelector(`.${r}clm-tags`),l='string'==typeof n.appendBefore?document.querySelector(n.appendBefore):n.appendBefore,c='string'==typeof n.appendTo?document.querySelector(n.appendTo):n.appendTo,d=l?l.parentElement:c??p.parentElement.parentElement;d.insertBefore(s,l??p.parentElement.parentElement.lastElementChild);const f=d.querySelector(`#${i}`);f.onkeyup=()=>a(e,f,d);d.querySelector(`#${i}-btn`).onclick=()=>{f.value='',a(e,f,d)},e.on('component:selected component:styleUpdate style:target',(()=>{o(e),setTimeout((()=>a(e,f,d)))}))}))};function o(e){l(e).forEach((e=>{!function(e){const t=r.get(e);t?.sector.setOpen(t?.initial),r.delete(e)}(e),e.getProperties().forEach((e=>{!function(e){const t=s.get(e);t?.property.set('visible',t?.initial),s.delete(e)}(e)}))}))}const r=new WeakMap;function i(e,t){r.has(e)||r.set(e,{sector:e,initial:e.isOpen()}),e.setOpen(t)}const s=new WeakMap;function p(e,t){s.has(e)||s.set(e,{property:e,initial:e.get('visible')}),e.set('visible',t)}function l(e){return e.StyleManager.getSectors().toArray().filter((e=>e.isVisible()))}function a(e,t,n){if(t.value){n.classList.remove('empty');const o=function(e){return l(e).flatMap((e=>e.getProperties().flatMap((t=>'composite'===t.getType()?t.properties.map((n=>({sector:e,property:t,subprop:n}))):{sector:e,property:t})))).map((e=>{let{sector:t,property:n,subprop:o}=e;return{searchable:`\n        ${t.get('name')}\n        ${n.get('name')}\n        ${n.get('options')?.map((e=>e.id)).join(', ')??''}\n        ${o?.get('name')??''}\n        ${o?.get('options')?.map((e=>e.id)).join(', ')??''}\n      `,sector:t,property:n}}))}(e).filter((e=>e.searchable.toLowerCase().includes(t.value.toLowerCase())));l(e).forEach((e=>{i(e,!1),e.getProperties().forEach((e=>p(e,!1)))})),o.forEach((e=>{i(e.sector,!0),p(e.property,!0)}))}else n.classList.add('empty'),o(e)}return t})()));
//# sourceMappingURL=index.js.map