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

Grapesjs Filter Styles

/*! @silexlabs/grapesjs-filter-styles - 1.4.0 */
!function(e,n){'object'==typeof exports&&'object'==typeof module?module.exports=n():'function'==typeof define&&define.amd?define([],n):'object'==typeof exports?exports["@silexlabs/grapesjs-filter-styles"]=n():e["@silexlabs/grapesjs-filter-styles"]=n()}('undefined'!=typeof globalThis?globalThis:'undefined'!=typeof window?window:this,(()=>(()=>{"use strict";var e={d:(n,t)=>{for(var o in t)e.o(t,o)&&!e.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:t[o]})},o:(e,n)=>Object.prototype.hasOwnProperty.call(e,n),r:e=>{'undefined'!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:'Module'}),Object.defineProperty(e,'__esModule',{value:!0})}},n={};e.r(n),e.d(n,{default:()=>t});const t=function(e){let n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.on('load',(()=>{const t={placeholder:'Search...',appendTo:null,appendBefore:null,...n},r=e.Config.selectorManager.pStylePrefix,i=`${r}filter-styles`,s=document.createElement('div');s.innerHTML=`\n      <style>\n        #${i}-container {\n          position: relative;\n          display: flex;\n          align-items: center;\n          margin: 6px 5px;\n        }\n        #${i}-icon {\n          position: absolute;\n          left: 10px;\n          pointer-events: none;\n          opacity: 0.4;\n          display: flex;\n          align-items: center;\n        }\n        #${i} {\n          width: 100%;\n          border-radius: 9999px;\n          padding: 15px 12px 15px 30px;\n          font-size: 11px;\n          border: 1px solid var(--gjs-border-color, #262626);\n          background: var(--gjs-primary-darker, #111);\n          color: inherit;\n          outline: none;\n          transition: border-color 0.15s;\n        }\n        #${i}:focus {\n          border-color: var(--gjs-tertiary-color, #8873FE);\n        }\n        #${i}-btn, #${i}-modified-btn {\n          position: absolute;\n          border: none;\n          padding: 0;\n          background: transparent;\n          color: inherit;\n          cursor: pointer;\n          opacity: 0;\n          transition: opacity .15s ease;\n          font-size: 14px;\n          line-height: 1;\n          display: flex;\n          align-items: center;\n        }\n        #${i}-btn {\n          right: 10px;\n        }\n        #${i}-modified-btn {\n          right: 32px;\n        }\n        #${i}-modified-btn svg {\n          width: 14px;\n          height: 14px;\n          display: block;\n          pointer-events: none;\n        }\n        #${i}-container #${i}-modified-btn {\n          opacity: .4;\n        }\n        #${i}-container:not(.empty) #${i}-btn {\n          opacity: .5;\n        }\n        #${i}-btn:hover, #${i}-modified-btn:hover {\n          opacity: 1;\n        }\n        #${i}-modified-btn.active {\n          color: var(--gjs-tertiary-color, #8873FE);\n          opacity: 1;\n        }\n      </style>\n\n      <div id="${i}-container" class="empty">\n        <span id="${i}-icon">\n          <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>\n        </span>\n        <input id="${i}" type="text" placeholder="${t.placeholder}" />\n        <button id="${i}-modified-btn" title="Show modified only">\n          <svg fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n            <path d="M19 6h-14c-1.1 0-1.4.6-.6 1.4l4.2 4.2c.8.8 1.4 2.3 1.4 3.4v5l4-2v-3.5c0-.8.6-2.1 1.4-2.9l4.2-4.2c.8-.8.5-1.4-.6-1.4z"/>\n          </svg>\n        </button>\n        <button id="${i}-btn">&times;</button>\n      </div>\n    `;const a=e.getContainer().querySelector(`.${r}clm-tags`),l='string'==typeof t.appendBefore?document.querySelector(t.appendBefore):t.appendBefore,c='string'==typeof t.appendTo?document.querySelector(t.appendTo):t.appendTo,d=l?l.parentElement:c??a.parentElement.parentElement;d.insertBefore(s,l??a.parentElement.parentElement.lastElementChild);const f=d.querySelector(`#${i}-container`),y=d.querySelector(`#${i}`),u=d.querySelector(`#${i}-btn`),g=d.querySelector(`#${i}-modified-btn`);y.onkeyup=()=>{f.classList.toggle('empty',!y.value),p(e,y,f,g)},u.onclick=()=>{y.value='',f.classList.add('empty'),p(e,y,f,g)},g.onclick=()=>{g.classList.toggle('active'),p(e,y,f,g)},e.on('component:selected component:styleUpdate style:target',(()=>{o(e),setTimeout((()=>p(e,y,f,g)))}))}))};function o(e){l(e).forEach((e=>{!function(e){const n=r.get(e);n?.sector.setOpen(n?.initial),r.delete(e)}(e),e.getProperties().forEach((e=>{!function(e){const n=s.get(e);n?.property.set('visible',n?.initial),s.delete(e)}(e)}))}))}const r=new WeakMap;function i(e,n){r.has(e)||r.set(e,{sector:e,initial:e.isOpen()}),e.setOpen(n)}const s=new WeakMap;function a(e,n){s.has(e)||s.set(e,{property:e,initial:e.get('visible')}),e.set('visible',n)}function l(e){return e.StyleManager.getSectors().toArray().filter((e=>e.isVisible()))}function p(e,n,t,r){const s=r&&r.classList.contains('active');if(n.value||s){t.classList.remove('empty');const o=function(e){return l(e).flatMap((e=>e.getProperties().flatMap((n=>'composite'===n.getType()?n.properties.map((t=>({sector:e,property:n,subprop:t}))):{sector:e,property:n})))).map((e=>{let{sector:n,property:t,subprop:o}=e;return{searchable:`\n        ${n.get('name')}\n        ${t.get('name')}\n        ${t.get('options')?.map((e=>e.id)).join(', ')??''}\n        ${o?.get('name')??''}\n        ${o?.get('options')?.map((e=>e.id)).join(', ')??''}\n        `.replace(/\s+/g,' ').trim(),sector:n,property:t}}))}(e).filter((e=>{const t=e.searchable.toLowerCase().includes(n.value.trim().toLowerCase()),o=e.property.hasValue({noParent:!0});return s?t&&o:t}));l(e).forEach((e=>{i(e,!1),e.getProperties().forEach((e=>a(e,!1)))})),o.forEach((e=>{i(e.sector,!0),a(e.property,!0)}))}else t.classList.add('empty'),o(e)}return n})()));
//# sourceMappingURL=index.js.map