Astro+Directus(Visual-Editing)+Snipcart Test-Stack
This commit is contained in:
commit
1459e99cb0
10119 files changed
+1499318
No files matched your search
Binary file not shown.
Binary file not shown.
Binary file not shown.
+1
@@ -0,0 +1 @@
|
||||
@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/fraunces-vietnamese-wght-normal.CnvboYUG.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/fraunces-latin-ext-wght-normal.Ca2vKHc0.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Fraunces Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/fraunces-latin-wght-normal.ukD16Tqj.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/public-sans-vietnamese-wght-normal.CtlIRbEm.woff2) format("woff2-variations");unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/public-sans-latin-ext-wght-normal.MQgHevqp.woff2) format("woff2-variations");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Public Sans Variable;font-style:normal;font-display:swap;font-weight:100 900;src:url(/_astro/public-sans-latin-wght-normal.DdeTHZLK.woff2) format("woff2-variations");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--paper:oklch(.985 .004 95);--sand:oklch(.96 .012 80);--ink:oklch(.27 .02 250);--slate:oklch(.52 .02 250);--petrol:oklch(.52 .07 215);--petrol-deep:oklch(.4 .07 220);--terra:oklch(.62 .13 45);--line:oklch(.88 .01 95);--serif:"Fraunces Variable",Georgia,serif;--sans:"Public Sans Variable",system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper)}.wrap{max-width:1080px;margin:0 auto;padding:0 28px}.sec{padding:64px 0}.kicker{font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;color:var(--terra)}.kicker:before{content:"_ "}h1{font-family:var(--serif);font-weight:560;font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.04;letter-spacing:-.01em;margin:.3em 0}h2{font-family:var(--serif);font-weight:560;font-size:clamp(1.5rem,3.2vw,2.2rem);margin:0 0 .4em}.lead{font-size:1.15rem;color:var(--slate);max-width:60ch;line-height:1.6}.intro{background:var(--sand);border-radius:16px;padding:36px}.grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:28px}@media(max-width:860px){.grid{grid-template-columns:repeat(2,1fr)}}.card{background:var(--paper);border:1px solid var(--line);border-radius:12px;overflow:hidden;display:flex;flex-direction:column}.card .ph{aspect-ratio:4/3;background:linear-gradient(135deg,var(--sand),oklch(.9 .03 215))}.card .bd{padding:14px 16px 18px}.card h3{font-family:var(--serif);font-weight:560;margin:0 0 .2em;font-size:1.05rem}.card .price{font-weight:700;color:var(--petrol-deep)}.card .buy{margin-top:10px;width:100%;border:0;background:var(--ink);color:var(--paper);padding:.6em;border-radius:7px;font-weight:600;cursor:pointer}.topbar{display:flex;justify-content:space-between;align-items:center;padding:18px 0;border-bottom:1px solid var(--line)}.brandmark{font-family:var(--serif);font-weight:600}.cart-sum{cursor:pointer;font-weight:600;color:var(--petrol-deep)}.note{margin-top:48px;padding:18px;border-left:3px solid var(--terra);background:var(--sand);border-radius:8px;font-size:.92rem;color:var(--slate)}
|
||||
@@ -0,0 +1,88 @@
|
||||
var m=["bottom","height","left","right","top","width"],R=function(e,t){return e===void 0&&(e={}),t===void 0&&(t={}),m.some(function(i){return e[i]!==t[i]})},_=new Map,v,N=function n(){var e=[];_.forEach(function(t,i){var r=i.getBoundingClientRect();R(r,t.rect)&&(t.rect=r,e.push(t))}),e.forEach(function(t){t.callbacks.forEach(function(i){return i(t.rect)})}),v=window.requestAnimationFrame(n)};function f(n,e){return{observe:function(){var i=_.size===0;_.has(n)?_.get(n).callbacks.push(e):_.set(n,{rect:void 0,hasRectChanged:!1,callbacks:[e]}),i&&N()},unobserve:function(){var i=_.get(n);if(i){var r=i.callbacks.indexOf(e);r>=0&&i.callbacks.splice(r,1),i.callbacks.length||_.delete(n),_.size||cancelAnimationFrame(v)}}}}var d=class s{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 e=document.getElementById(s.OVERLAY_ID);if(e)return e;let t=document.createElement("div");return t.id=s.OVERLAY_ID,document.body.insertAdjacentElement("afterend",t),t}static addStyles(){if(document.getElementById(s.STYLE_ID))return;let e=document.createElement("style");e.id=s.STYLE_ID;let t=`var(${s.CSS_VAR_BUTTON_WIDTH}, 28px)`,i=`var(${s.CSS_VAR_EDIT_BUTTON_BG_COLOR}, #6644ff)`,r=`var(${s.CSS_VAR_AI_BUTTON_BG_COLOR}, ${i})`,o="#2e3C43 25%",a=`var(${s.CSS_VAR_BORDER_SPACING}, 9px)`,l=`var(${s.CSS_VAR_BORDER_WIDTH}, 2px)`;e.appendChild(document.createTextNode(`
|
||||
#${s.OVERLAY_ID} {
|
||||
display: contents;
|
||||
}
|
||||
.${s.CONTAINER_RECT_CLASS_NAME} {
|
||||
pointer-events: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: var(${s.CSS_VAR_Z_INDEX}, 999999999);
|
||||
}
|
||||
.${s.RECT_CLASS_NAME} {
|
||||
position: absolute;
|
||||
}
|
||||
.${s.RECT_INNER_CLASS_NAME} {
|
||||
position: absolute;
|
||||
box-sizing: border-box;
|
||||
top: calc(-1 * ${a});
|
||||
left: calc(-1 * ${a});
|
||||
right: calc(-1 * ${a});
|
||||
bottom: calc(-1 * ${a});
|
||||
border: ${l} solid var(${s.CSS_VAR_BORDER_COLOR}, #6644ff);
|
||||
border-radius: var(${s.CSS_VAR_BORDER_RADIUS}, 6px);
|
||||
opacity: 0;
|
||||
}
|
||||
.${s.RECT_CLASS_NAME}.${s.RECT_HOVER_CLASS_NAME} .${s.RECT_INNER_CLASS_NAME} {
|
||||
--hover-opacity: var(${s.CSS_VAR_HOVER_OPACITY}, 0.333);
|
||||
opacity: var(--hover-opacity);
|
||||
}
|
||||
.${s.RECT_CLASS_NAME}.${s.RECT_PARENT_HOVER_CLASS_NAME} .${s.RECT_INNER_CLASS_NAME} {
|
||||
opacity: calc(var(--hover-opacity) / 3);
|
||||
}
|
||||
.${s.RECT_HIGHLIGHT_CLASS_NAME} {
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
}
|
||||
.${s.RECT_HIGHLIGHT_CLASS_NAME} .${s.RECT_INNER_CLASS_NAME} {
|
||||
opacity: var(${s.CSS_VAR_HIGHLIGHT_OPACITY}, 0.333);
|
||||
}
|
||||
.${s.RECT_BUTTON_CLASS_NAME}:visited,
|
||||
.${s.RECT_BUTTON_CLASS_NAME}:active,
|
||||
.${s.RECT_BUTTON_CLASS_NAME}:hover,
|
||||
.${s.RECT_BUTTON_CLASS_NAME}:focus,
|
||||
.${s.RECT_BUTTON_CLASS_NAME} {
|
||||
all: initial;
|
||||
pointer-events: all;
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: calc(-1 * ${a} + ${l} / 2);
|
||||
transform: translate(-50%, -50%);
|
||||
width: ${t};
|
||||
height: var(${s.CSS_VAR_BUTTON_HEIGHT}, 28px);
|
||||
border-radius: var(${s.CSS_VAR_BUTTON_RADIUS}, 50%);
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
opacity: 0;
|
||||
}
|
||||
.${s.RECT_BUTTON_CLASS_NAME}.${s.RECT_EDIT_BUTTON_CLASS_NAME} {
|
||||
left: calc(-1 * ${a} + ${l} / 2);
|
||||
background-color: ${i};
|
||||
background-image: var(${s.CSS_VAR_EDIT_BUTTON_ICON_BG_IMAGE}, ${s.ICON_EDIT});
|
||||
background-size: var(${s.CSS_VAR_EDIT_BUTTON_ICON_BG_SIZE}, 66.6%);
|
||||
}
|
||||
.${s.RECT_BUTTON_CLASS_NAME}.${s.RECT_AI_BUTTON_CLASS_NAME} {
|
||||
left: calc(-1 * ${a} + ${l} / 2 + ${t} + var(${s.CSS_VAR_ACTIONS_GAP}, 4px));
|
||||
background-color: ${r};
|
||||
background-image: var(${s.CSS_VAR_AI_BUTTON_ICON_BG_IMAGE}, ${s.ICON_AI});
|
||||
background-size: var(${s.CSS_VAR_AI_BUTTON_ICON_BG_SIZE}, 66.6%);
|
||||
}
|
||||
.${s.RECT_CLASS_NAME}.${s.RECT_HOVER_CLASS_NAME}:not(.${s.RECT_PARENT_HOVER_CLASS_NAME}) .${s.RECT_BUTTON_CLASS_NAME},
|
||||
.${s.RECT_HIGHLIGHT_ACTIVE_CLASS_NAME} .${s.RECT_INNER_CLASS_NAME},
|
||||
.${s.RECT_HIGHLIGHT_CLASS_NAME}:hover .${s.RECT_BUTTON_CLASS_NAME},
|
||||
.${s.RECT_BUTTON_CLASS_NAME}:hover,
|
||||
.${s.RECT_BUTTON_CLASS_NAME}:hover ~ .${s.RECT_INNER_CLASS_NAME},
|
||||
.${s.RECT_HIGHLIGHT_CLASS_NAME}:hover .${s.RECT_INNER_CLASS_NAME},
|
||||
.${s.RECT_CLASS_NAME}:has(.${s.RECT_BUTTON_CLASS_NAME}:hover) .${s.RECT_BUTTON_CLASS_NAME} {
|
||||
opacity: 1;
|
||||
}
|
||||
.${s.RECT_BUTTON_CLASS_NAME}.${s.RECT_EDIT_BUTTON_CLASS_NAME}:hover {
|
||||
background-color: color-mix(in srgb, ${i}, ${o});
|
||||
}
|
||||
.${s.RECT_BUTTON_CLASS_NAME}.${s.RECT_AI_BUTTON_CLASS_NAME}:hover {
|
||||
background-color: color-mix(in srgb, ${r}, ${o});
|
||||
}
|
||||
`)),document.head.appendChild(e)}},I=class{hasNoDimensions=!1;element;container;editButton;aiButton;constructor(){this.container=this.createContainer(),this.element=this.createElement(),this.editButton=this.createEditButton(),this.aiButton=new T().isAiEnabled()?this.createAiButton():null,this.createRectElement(),d.getGlobalOverlay().appendChild(this.container),E.highlightOverlayElements&&this.toggleHighlight(!0),this.element.addEventListener("click",()=>this.editButton.click())}createContainer(){let n=document.createElement("div");return n.classList.add(d.CONTAINER_RECT_CLASS_NAME),n}createElement(){let n=document.createElement("div");return n.classList.add(d.RECT_CLASS_NAME),this.container.appendChild(n),n}createRectElement(){let n=document.createElement("div");n.classList.add(d.RECT_INNER_CLASS_NAME),this.element.appendChild(n)}createEditButton(){let n=document.createElement("button");return n.type="button",n.classList.add(d.RECT_BUTTON_CLASS_NAME),n.classList.add(d.RECT_EDIT_BUTTON_CLASS_NAME),this.element.appendChild(n),n}createAiButton(){let n=document.createElement("button");return n.type="button",n.classList.add(d.RECT_BUTTON_CLASS_NAME),n.classList.add(d.RECT_AI_BUTTON_CLASS_NAME),this.element.appendChild(n),n}updateRect(n){let e=n.width!==0&&n.height!==0;if(!this.hasNoDimensions&&!e){this.hasNoDimensions=!0,this.disable();return}this.hasNoDimensions&&e&&(this.hasNoDimensions=!1,this.enable()),this.element.style.width=`${n.width}px`,this.element.style.height=`${n.height}px`,this.element.style.transform=`translate(${n.left}px,${n.top}px)`}setCustomClass(n){n!==void 0&&/^[a-zA-Z_][\w-]*$/.test(n)&&this.container.classList.add(n)}toggleHover(n){this.element.classList.toggle(d.RECT_HOVER_CLASS_NAME,n)}toggleParentHover(n){this.element.classList.toggle(d.RECT_PARENT_HOVER_CLASS_NAME,n)}toggleHighlight(n){this.element.classList.toggle(d.RECT_HIGHLIGHT_CLASS_NAME,n)}toggleHighlightActive(n){this.element.classList.toggle(d.RECT_HIGHLIGHT_ACTIVE_CLASS_NAME,n)}disable(){this.element.style.display="none"}enable(){this.element.style.removeProperty("display")}remove(){this.container.remove()}},g=class h{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(e){this.element=e,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=h.editAttrToObject(this.element.dataset[h.DATASET]),this.rect=this.element.getBoundingClientRect(),this.overlayElement=new I,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=f(this.element,this.onObserveRect.bind(this)),this.rectObserver.observe()}static query(e){return e?(Array.isArray(e)?e:[e]).filter(t=>t instanceof HTMLElement).flatMap(t=>t.dataset[h.DATASET]===void 0?Array.from(t.querySelectorAll(`[data-${h.DATASET}]`)):t).filter(t=>t!==null):Array.from(document.querySelectorAll(`[data-${h.DATASET}]`))}static objectToEditAttr(e){let t=[];for(let[i,r]of Object.entries(e))h.validEditConfigKey(i)&&(i==="fields"&&Array.isArray(r)?t.push(`${i}:${r.join(",")}`):t.push(`${i}:${r}`));return t.join(";")}static editAttrToObject(e){let t=e.split(";"),i={};return t.forEach(r=>{let o=r.split(":");if(o[0]===void 0||o?.[1]===void 0)return;let a=o[0].trim();if(!h.validEditConfigKey(a))return;let l=o[1];if(a==="fields"){i.fields=l.split(",").map(u=>u.trim());return}i[a]=l.trim()}),i}static validEditConfigKey(e){return h.DATA_ATTRIBUTE_VALID_KEYS.includes(e)}applyOptions({customClass:e,onSaved:t},i=!1){this.optionsWritable&&(i&&(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 T().send("edit",{key:this.key,editConfig:this.editConfig,rect:this.rect})}onClickAddToContext(e){e.stopPropagation(),new T().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=E.getHoveredItems();e.forEach(t=>{let i=e.filter(r=>r.element!==t.element).some(r=>t.element.contains(r.element));t.overlayElement.toggleParentHover(i)})}onObserveRect(e){this.disabled||(this.rect=e,this.overlayElement.updateRect(e))}},E=class c{static items=[];static
Line truncated
|
||||
@@ -0,0 +1 @@
|
||||
import"https://cdn.snipcart.com/themes/v3.7.1/default/snipcart.js";
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in new issue
Block a user