89 lines
16 KiB
JavaScript
89 lines
16 KiB
JavaScript
import e from"@reach/observe-rect";var t=class e{static CSS_VAR_Z_INDEX=`--directus-visual-editing--overlay--z-index`;static CSS_VAR_BORDER_SPACING=`--directus-visual-editing--rect--border-spacing`;static CSS_VAR_BORDER_WIDTH=`--directus-visual-editing--rect--border-width`;static CSS_VAR_BORDER_COLOR=`--directus-visual-editing--rect--border-color`;static CSS_VAR_BORDER_RADIUS=`--directus-visual-editing--rect--border-radius`;static CSS_VAR_HOVER_OPACITY=`--directus-visual-editing--rect-hover--opacity`;static CSS_VAR_HIGHLIGHT_OPACITY=`--directus-visual-editing--rect-highlight--opacity`;static CSS_VAR_ACTIONS_GAP=`--directus-visual-editing--actions--gap`;static CSS_VAR_BUTTON_WIDTH=`--directus-visual-editing--edit-btn--width`;static CSS_VAR_BUTTON_HEIGHT=`--directus-visual-editing--edit-btn--height`;static CSS_VAR_BUTTON_RADIUS=`--directus-visual-editing--edit-btn--radius`;static CSS_VAR_EDIT_BUTTON_BG_COLOR=`--directus-visual-editing--edit-btn--bg-color`;static CSS_VAR_EDIT_BUTTON_ICON_BG_IMAGE=`--directus-visual-editing--edit-btn--icon-bg-image`;static CSS_VAR_EDIT_BUTTON_ICON_BG_SIZE=`--directus-visual-editing--edit-btn--icon-bg-size`;static CSS_VAR_AI_BUTTON_BG_COLOR=`--directus-visual-editing--ai-btn--bg-color`;static CSS_VAR_AI_BUTTON_ICON_BG_IMAGE=`--directus-visual-editing--ai-btn--icon-bg-image`;static CSS_VAR_AI_BUTTON_ICON_BG_SIZE=`--directus-visual-editing--ai-btn--icon-bg-size`;static ICON_EDIT=`url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px" fill="%23ffffff"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M14.06 9.02l.92.92L5.92 19H5v-.92l9.06-9.06M17.66 3c-.25 0-.51.1-.7.29l-1.83 1.83 3.75 3.75 1.83-1.83c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.2-.2-.45-.29-.71-.29zm-3.6 3.19L3 17.25V21h3.75L17.81 9.94l-3.75-3.75z"/></svg>')`;static ICON_AI=`url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 0 24 24" width="24px"><path fill="%23ffffff" d="M10 14.175L11 12l2.175-1L11 10l-1-2.175L9 10l-2.175 1L9 12l1 2.175ZM10 19l-2.5-5.5L2 11l5.5-2.5L10 3l2.5 5.5L18 11l-5.5 2.5L10 19Zm8 2l-1.25-2.75L14 17l2.75-1.25L18 13l1.25 2.75L22 17l-2.75 1.25L18 21Zm-8-10Z"/></svg>')`;static OVERLAY_ID=`directus-visual-editing`;static STYLE_ID=`directus-visual-editing-style`;static CONTAINER_RECT_CLASS_NAME=`directus-visual-editing-overlay`;static RECT_CLASS_NAME=`directus-visual-editing-rect`;static RECT_HIGHLIGHT_CLASS_NAME=`directus-visual-editing-rect-highlight`;static RECT_HIGHLIGHT_ACTIVE_CLASS_NAME=`directus-visual-editing-rect-highlight-active`;static RECT_PARENT_HOVER_CLASS_NAME=`directus-visual-editing-rect-parent-hover`;static RECT_HOVER_CLASS_NAME=`directus-visual-editing-rect-hover`;static RECT_INNER_CLASS_NAME=`directus-visual-editing-rect-inner`;static RECT_BUTTON_CLASS_NAME=`directus-visual-editing-button`;static RECT_EDIT_BUTTON_CLASS_NAME=`directus-visual-editing-edit-button`;static RECT_AI_BUTTON_CLASS_NAME=`directus-visual-editing-ai-button`;static getGlobalOverlay(){let t=document.getElementById(e.OVERLAY_ID);if(t)return t;let n=document.createElement(`div`);return n.id=e.OVERLAY_ID,document.body.insertAdjacentElement(`afterend`,n),n}static addStyles(){if(document.getElementById(e.STYLE_ID))return;let t=document.createElement(`style`);t.id=e.STYLE_ID;let n=`var(${e.CSS_VAR_BUTTON_WIDTH}, 28px)`,r=`var(${e.CSS_VAR_EDIT_BUTTON_BG_COLOR}, #6644ff)`,i=`var(${e.CSS_VAR_AI_BUTTON_BG_COLOR}, ${r})`,a=`#2e3C43 25%`,o=`var(${e.CSS_VAR_BORDER_SPACING}, 9px)`,s=`var(${e.CSS_VAR_BORDER_WIDTH}, 2px)`;t.appendChild(document.createTextNode(`
|
|
#${e.OVERLAY_ID} {
|
|
display: contents;
|
|
}
|
|
.${e.CONTAINER_RECT_CLASS_NAME} {
|
|
pointer-events: none;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
z-index: var(${e.CSS_VAR_Z_INDEX}, 999999999);
|
|
}
|
|
.${e.RECT_CLASS_NAME} {
|
|
position: absolute;
|
|
}
|
|
.${e.RECT_INNER_CLASS_NAME} {
|
|
position: absolute;
|
|
box-sizing: border-box;
|
|
top: calc(-1 * ${o});
|
|
left: calc(-1 * ${o});
|
|
right: calc(-1 * ${o});
|
|
bottom: calc(-1 * ${o});
|
|
border: ${s} solid var(${e.CSS_VAR_BORDER_COLOR}, #6644ff);
|
|
border-radius: var(${e.CSS_VAR_BORDER_RADIUS}, 6px);
|
|
opacity: 0;
|
|
}
|
|
.${e.RECT_CLASS_NAME}.${e.RECT_HOVER_CLASS_NAME} .${e.RECT_INNER_CLASS_NAME} {
|
|
--hover-opacity: var(${e.CSS_VAR_HOVER_OPACITY}, 0.333);
|
|
opacity: var(--hover-opacity);
|
|
}
|
|
.${e.RECT_CLASS_NAME}.${e.RECT_PARENT_HOVER_CLASS_NAME} .${e.RECT_INNER_CLASS_NAME} {
|
|
opacity: calc(var(--hover-opacity) / 3);
|
|
}
|
|
.${e.RECT_HIGHLIGHT_CLASS_NAME} {
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
}
|
|
.${e.RECT_HIGHLIGHT_CLASS_NAME} .${e.RECT_INNER_CLASS_NAME} {
|
|
opacity: var(${e.CSS_VAR_HIGHLIGHT_OPACITY}, 0.333);
|
|
}
|
|
.${e.RECT_BUTTON_CLASS_NAME}:visited,
|
|
.${e.RECT_BUTTON_CLASS_NAME}:active,
|
|
.${e.RECT_BUTTON_CLASS_NAME}:hover,
|
|
.${e.RECT_BUTTON_CLASS_NAME}:focus,
|
|
.${e.RECT_BUTTON_CLASS_NAME} {
|
|
all: initial;
|
|
pointer-events: all;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: calc(-1 * ${o} + ${s} / 2);
|
|
transform: translate(-50%, -50%);
|
|
width: ${n};
|
|
height: var(${e.CSS_VAR_BUTTON_HEIGHT}, 28px);
|
|
border-radius: var(${e.CSS_VAR_BUTTON_RADIUS}, 50%);
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
opacity: 0;
|
|
}
|
|
.${e.RECT_BUTTON_CLASS_NAME}.${e.RECT_EDIT_BUTTON_CLASS_NAME} {
|
|
left: calc(-1 * ${o} + ${s} / 2);
|
|
background-color: ${r};
|
|
background-image: var(${e.CSS_VAR_EDIT_BUTTON_ICON_BG_IMAGE}, ${e.ICON_EDIT});
|
|
background-size: var(${e.CSS_VAR_EDIT_BUTTON_ICON_BG_SIZE}, 66.6%);
|
|
}
|
|
.${e.RECT_BUTTON_CLASS_NAME}.${e.RECT_AI_BUTTON_CLASS_NAME} {
|
|
left: calc(-1 * ${o} + ${s} / 2 + ${n} + var(${e.CSS_VAR_ACTIONS_GAP}, 4px));
|
|
background-color: ${i};
|
|
background-image: var(${e.CSS_VAR_AI_BUTTON_ICON_BG_IMAGE}, ${e.ICON_AI});
|
|
background-size: var(${e.CSS_VAR_AI_BUTTON_ICON_BG_SIZE}, 66.6%);
|
|
}
|
|
.${e.RECT_CLASS_NAME}.${e.RECT_HOVER_CLASS_NAME}:not(.${e.RECT_PARENT_HOVER_CLASS_NAME}) .${e.RECT_BUTTON_CLASS_NAME},
|
|
.${e.RECT_HIGHLIGHT_ACTIVE_CLASS_NAME} .${e.RECT_INNER_CLASS_NAME},
|
|
.${e.RECT_HIGHLIGHT_CLASS_NAME}:hover .${e.RECT_BUTTON_CLASS_NAME},
|
|
.${e.RECT_BUTTON_CLASS_NAME}:hover,
|
|
.${e.RECT_BUTTON_CLASS_NAME}:hover ~ .${e.RECT_INNER_CLASS_NAME},
|
|
.${e.RECT_HIGHLIGHT_CLASS_NAME}:hover .${e.RECT_INNER_CLASS_NAME},
|
|
.${e.RECT_CLASS_NAME}:has(.${e.RECT_BUTTON_CLASS_NAME}:hover) .${e.RECT_BUTTON_CLASS_NAME} {
|
|
opacity: 1;
|
|
}
|
|
.${e.RECT_BUTTON_CLASS_NAME}.${e.RECT_EDIT_BUTTON_CLASS_NAME}:hover {
|
|
background-color: color-mix(in srgb, ${r}, ${a});
|
|
}
|
|
.${e.RECT_BUTTON_CLASS_NAME}.${e.RECT_AI_BUTTON_CLASS_NAME}:hover {
|
|
background-color: color-mix(in srgb, ${i}, ${a});
|
|
}
|
|
`)),document.head.appendChild(t)}},n=class{hasNoDimensions=!1;element;container;editButton;aiButton;constructor(){this.container=this.createContainer(),this.element=this.createElement(),this.editButton=this.createEditButton(),this.aiButton=new a().isAiEnabled()?this.createAiButton():null,this.createRectElement(),t.getGlobalOverlay().appendChild(this.container),i.highlightOverlayElements&&this.toggleHighlight(!0),this.element.addEventListener(`click`,()=>this.editButton.click())}createContainer(){let e=document.createElement(`div`);return e.classList.add(t.CONTAINER_RECT_CLASS_NAME),e}createElement(){let e=document.createElement(`div`);return e.classList.add(t.RECT_CLASS_NAME),this.container.appendChild(e),e}createRectElement(){let e=document.createElement(`div`);e.classList.add(t.RECT_INNER_CLASS_NAME),this.element.appendChild(e)}createEditButton(){let e=document.createElement(`button`);return e.type=`button`,e.classList.add(t.RECT_BUTTON_CLASS_NAME),e.classList.add(t.RECT_EDIT_BUTTON_CLASS_NAME),this.element.appendChild(e),e}createAiButton(){let e=document.createElement(`button`);return e.type=`button`,e.classList.add(t.RECT_BUTTON_CLASS_NAME),e.classList.add(t.RECT_AI_BUTTON_CLASS_NAME),this.element.appendChild(e),e}updateRect(e){let t=e.width!==0&&e.height!==0;if(!this.hasNoDimensions&&!t){this.hasNoDimensions=!0,this.disable();return}this.hasNoDimensions&&t&&(this.hasNoDimensions=!1,this.enable()),this.element.style.width=`${e.width}px`,this.element.style.height=`${e.height}px`,this.element.style.transform=`translate(${e.left}px,${e.top}px)`}setCustomClass(e){e!==void 0&&/^[a-zA-Z_][\w-]*$/.test(e)&&this.container.classList.add(e)}toggleHover(e){this.element.classList.toggle(t.RECT_HOVER_CLASS_NAME,e)}toggleParentHover(e){this.element.classList.toggle(t.RECT_PARENT_HOVER_CLASS_NAME,e)}toggleHighlight(e){this.element.classList.toggle(t.RECT_HIGHLIGHT_CLASS_NAME,e)}toggleHighlightActive(e){this.element.classList.toggle(t.RECT_HIGHLIGHT_ACTIVE_CLASS_NAME,e)}disable(){this.element.style.display=`none`}enable(){this.element.style.removeProperty(`display`)}remove(){this.container.remove()}},r=class t{static DATASET=`directus`;static DATA_ATTRIBUTE_VALID_KEYS=[`collection`,`item`,`fields`,`mode`];optionsWritable=!0;element;key;editConfig;rectObserver;overlayElement;rect;hover=!1;disabled=!1;onSaved=void 0;boundMouseenter;boundMouseleave;constructor(r){this.element=r,this.boundMouseenter=this.onMouseenter.bind(this),this.boundMouseleave=this.onMouseleave.bind(this),this.element.addEventListener(`mouseenter`,this.boundMouseenter),this.element.addEventListener(`mouseleave`,this.boundMouseleave),this.key=crypto.randomUUID(),this.editConfig=t.editAttrToObject(this.element.dataset[t.DATASET]),this.rect=this.element.getBoundingClientRect(),this.overlayElement=new n,this.overlayElement.updateRect(this.rect),this.overlayElement.editButton.addEventListener(`click`,this.onClickEdit.bind(this)),this.overlayElement.aiButton?.addEventListener(`click`,this.onClickAddToContext.bind(this)),this.rectObserver=e(this.element,this.onObserveRect.bind(this)),this.rectObserver.observe()}static query(e){return e?(Array.isArray(e)?e:[e]).filter(e=>e instanceof HTMLElement).flatMap(e=>e.dataset[t.DATASET]===void 0?Array.from(e.querySelectorAll(`[data-${t.DATASET}]`)):e).filter(e=>e!==null):Array.from(document.querySelectorAll(`[data-${t.DATASET}]`))}static objectToEditAttr(e){let n=[];for(let[r,i]of Object.entries(e))t.validEditConfigKey(r)&&(r===`fields`&&Array.isArray(i)?n.push(`${r}:${i.join(`,`)}`):n.push(`${r}:${i}`));return n.join(`;`)}static editAttrToObject(e){let n=e.split(`;`),r={};return n.forEach(e=>{let n=e.split(`:`);if(n[0]===void 0||n?.[1]===void 0)return;let i=n[0].trim();if(!t.validEditConfigKey(i))return;let a=n[1];if(i===`fields`){r.fields=a.split(`,`).map(e=>e.trim());return}r[i]=a.trim()}),r}static validEditConfigKey(e){return t.DATA_ATTRIBUTE_VALID_KEYS.includes(e)}applyOptions({customClass:e,onSaved:t},n=!1){this.optionsWritable&&(n&&(this.optionsWritable=!1),this.overlayElement.setCustomClass(e),t!==void 0&&(this.onSaved=t))}removeHoverListener(){this.element.removeEventListener(`mouseenter`,this.boundMouseenter),this.element.removeEventListener(`mouseleave`,this.boundMouseleave)}onClickEdit(){new a().send(`edit`,{key:this.key,editConfig:this.editConfig,rect:this.rect})}onClickAddToContext(e){e.stopPropagation(),new a().send(`addToContext`,{key:this.key,editConfig:this.editConfig,rect:this.rect})}onMouseenter(e){this.toggleItemHover(!0,e)}onMouseleave(e){this.toggleItemHover(!1,e)}toggleItemHover(e,t){this.element!==t.currentTarget||this.hover===e||(this.hover=e,this.setParentsHover(),this.overlayElement.toggleHover(e))}setParentsHover(){let e=i.getHoveredItems();e.forEach(t=>{let n=e.filter(e=>e.element!==t.element).some(e=>t.element.contains(e.element));t.overlayElement.toggleParentHover(n)})}onObserveRect(e){this.disabled||(this.rect=e,this.overlayElement.updateRect(e))}},i=class e{static items=[];static highlightOverlayElements=!1;static highlightedKey=null;static getItem(t){return e.items.find(e=>e.element===t)}static getItemByKey(t){return e.items.find(e=>e.key===t)}static getItemByEditConfig(t,n,r){return e.items.find(e=>{if(e.editConfig.collection!==t||String(e.editConfig.item)!==String(n))return!1;let i=e.editConfig.fields??[],a=r??[];return i.length===a.length?i.every(e=>a.includes(e)):!1})}static getHoveredItems(){return e.items.filter(e=>e.hover)}static addItem(t){e.items.push(t)}static enableItems(t){(t??e.items).forEach(e=>{e.disabled=!1,e.rectObserver.observe(),e.overlayElement.enable()})}static disableItems(t){let n=t??e.items.filter(e=>!e.disabled);return n.forEach(e=>{e.disabled=!0,e.hover=!1,e.rectObserver.unobserve(),e.overlayElement.disable()}),[...n]}static removeItems(t){let n=t??e.items;n.forEach(e=>{e.rectObserver.unobserve(),e.overlayElement.remove(),e.removeHoverListener()}),e.items=e.items.filter(e=>!n.includes(e))}static highlightItems(t){this.highlightOverlayElements!==t&&(this.highlightOverlayElements=t,e.items.forEach(e=>{e.overlayElement.toggleHighlight(t)}))}static highlightElement(t){if(this.highlightedKey!==null&&e.getItemByKey(this.highlightedKey)?.overlayElement.toggleHighlightActive(!1),t===null){this.highlightedKey=null;return}let n;n=`key`in t?e.getItemByKey(t.key):e.getItemByEditConfig(t.collection,t.item,t.fields),n?(this.highlightedKey=n.key,n.overlayElement.toggleHighlightActive(!0)):this.highlightedKey=null}},a=class e{static SINGLETON;static ERROR_PARENT_NOT_FOUND=`Error sending message to Directus in parent frame:`;origin=null;confirmed=!1;aiEnabled=!1;constructor(){if(e.SINGLETON)return e.SINGLETON;e.SINGLETON=this,window?.addEventListener(`message`,this.receive.bind(this))}connect(e){return this.origin=e,this.send(`connect`)}send(t,n){try{if(!this.origin)throw Error();return window.parent.postMessage({action:t,data:n},this.origin),!0}catch(t){return console.error(e.ERROR_PARENT_NOT_FOUND,t),!1}}sameOrigin(e,t){try{return e===new URL(t).origin}catch{return!1}}receive(e){if(!this.origin||!this.sameOrigin(e.origin,this.origin))return;let{action:t,data:n}=e.data;t===`confirm`&&this.receiveConfirmAction(n),t===`showEditableElements`&&this.receiveShowEditableElements(n),t===`saved`&&this.receiveSaved(n),t===`highlightElement`&&this.receiveHighlightElement(n)}receiveConfirmAction(e){this.confirmed=!0,this.aiEnabled=!!e?.aiEnabled}isAiEnabled(){return this.aiEnabled}receiveConfirm(){let e=0;return new Promise(t=>{let n=()=>{if(e>=10)return t(!1);e++,this.confirmed?t(!0):setTimeout(n,100)};n()})}receiveShowEditableElements(e){let t=!!e;i.highlightItems(t)}receiveSaved(e){let{key:t=``,collection:n=``,item:r=null,payload:a={}}=e,o=i.getItemByKey(t);if(o&&n&&typeof o.onSaved==`function`){o.onSaved({collection:n,item:r,payload:a});return}window.location.reload()}receiveHighlightElement(e){if(!e||typeof e!=`object`){i.highlightElement(null);return}let{key:t,collection:n,item:r,fields:a}=e;t===null?i.highlightElement(null):n&&r!==void 0?i.highlightElement(a?{collection:n,item:r,fields:a}:{collection:n,item:r}):typeof t==`string`&&i.highlightElement({key:t})}},o=class e{static navigationInitialized=!1;static onNavigation(t){if(e.navigationInitialized)return;let n=``,r=``,i,a=e=>{clearTimeout(i),i=setTimeout(e,100)},o=()=>{let e=window.location.href,i=document.title,s=n!==e||r!==i;s&&(a(()=>t({url:e,title:i})),n=e,r=i),setTimeout(o,s?50:200)};o(),e.navigationInitialized=!0}};async function s({directusUrl:e,elements:n=void 0,customClass:s=void 0,onSaved:c=void 0}){let l=new a;if(!l.connect(e)||!await l.receiveConfirm())return;o.onNavigation(e=>l.send(`navigation`,e)),t.addStyles();let u=r.query(n),d=[];return u.forEach(e=>{let t=i.getItem(e),a=t??new r(e);a.applyOptions({customClass:s,onSaved:c},!!n),d.push(a),t||i.addItem(a)}),{remove(){i.removeItems(d)},enable(){i.enableItems(d)},disable(){i.disableItems(d)}}}function c(){i.removeItems()}function l(){let e=i.disableItems();return{enable(){i.enableItems(e)}}}function u(e){return r.objectToEditAttr(e)}export{s as apply,l as disable,c as remove,u as setAttr};
|
|
//# sourceMappingURL=index.js.map
|