-
Notifications
You must be signed in to change notification settings - Fork 0
/
HypeReactiveContent.min.js
25 lines (25 loc) · 11.1 KB
/
HypeReactiveContent.min.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
/*
Hype Reactive Content 1.4.1
copyright (c) 2024 Max Ziebell, (https://maxziebell.de). MIT-license
*/
'use strict';!1==="HypeReactiveContent"in window&&(window.HypeReactiveContent=function(){function g(a){return a?t[a]:t}function y(a,d){return a?a+"."+d:d}function z(a,d,e){e=e||"";return null==a||a[A]?a:new Proxy(a,{get:function(c,h,b){if("_key"===h)return e;if(h===A)return!0;c=Reflect.get(c,h,b);return"object"===typeof c?z(c,d,y(e,h)):c},set:function(c,h,b,f){const k=Reflect.set(c,h,b,f);d(h,b,c,f);return k}})}function C(a){if(!a[A])return a;const d={};for(const e in a)if(a.hasOwnProperty(e)){const c=
a[e];d[e]="object"===typeof c?C(c):c}return d}function B(a){return function(){if(!a.timeout){var d=arguments;a.timeout=requestAnimationFrame(function(){a.apply(this,d);a.timeout=null}.bind(this))}}}function r(a,d,e,c){if(e){if("object"!==typeof e)return null}else{if(void 0===e)return null;e=d.customData}c=c||{};if(!1!=="HypeActionEvents"in window)return d.triggerAction(a,{element:c.element,event:{type:c.type},scope:e});try{let h=new Proxy(Object.assign({element:c.element,$elm:c.element},d),{set(b,
f,k,n){return Reflect.get(b,f,n)?Reflect.set(b,f,k,n):Reflect.set(e,f,k)},get(b,f,k){return(b=Reflect.get(b,f,k))?b:Reflect.get(e,f)},has(b,f,k){return b.hasOwnProperty(f)||window[f]?Reflect.has(b,f,k):!0}});return(new Function("$context","with($context){ "+a+"}"))(h)}catch(h){g("debug")||-1!=window.location.href.indexOf("127.0.0.1:")&&-1!=window.location.href.indexOf("/preview/")?console.error("%c"+(c.errorMsg||"HypeReactiveContent Error")+"%c"+(c.errorMsg?"":" version "+HypeReactiveContent.version)+
"\n\n%c"+a+(c.omitError?"":"%c\n\n"+h+"\n\n"),"font-size:12px; font-weight:bold","font-size:8px","min-height:40px;display: inline-block; padding: 10px; background-color: rgba(255,255,255,0.25); border: 1px solid lightgray; border-radius: 4px; font-family:Monospace; font-size:12px","font-size:11px",c.element?c.element:""):console.error(h)}}function D(a,d,e){return e?r("return "+e,a,null,{element:d,type:"HypeReactiveScope"}):null}function E(a,d){let e=d.closest("[data-scope]");return e?D(a,d,e.getAttribute("data-scope")):
null}function v(a,d,e){const c=g("scopeSymbol"),h=c.length;let b=null;a=a.trim();a.startsWith(c)?(a=a.slice(h),b=E(d,e)):a.includes(c)&&(b=a.slice(0,a.indexOf(c)),b=D(d,e,b),a=a.slice(a.indexOf(c)+h));return{value:a,scope:b}}function G(a,d,e){return a.replace(/{{\s*([^{}\s]+)\s*}}/g,function(c,h){c=v(h,d,e);c=r("return "+c.value,d,c.scope,{element:e,type:"HypeReactiveTemplate"});return void 0!==c?c:""})}function H(a){let d=document.getElementById(a.currentSceneId()),e=q.get(a)||new Map;d.querySelectorAll("[data-content-template]").forEach(function(c){const h=
c.getAttribute("data-content-template"),b=c.innerHTML;h&&!e.has(h)?e.set(h,b):h||e.has(c)||e.set(c,b)});q.set(a,e)}function I(a){w.set(a,a.customData||{});Object.defineProperty(a,"customData",{get:function(){return w.get(a)},set:function(d){d=z(d,a.refreshReactiveContentDebounced);w.set(a,d);g("debounceCustomDataUpdate")?a.refreshReactiveContentDebounced():a.refreshReactiveContent()}})}function J(a,d,e){!1==="HypeActionEvents"in window&&(d=e.customBehaviorName,"#"!=d.charAt(0)&&/[;=()]/.test(d)&&
r(d,a,a.customData))}const F=-1!=window.location.href.indexOf("/Hype/Scratch/HypeScratch."),w=new WeakMap;let t={scopeSymbol:"\u21e2",visibilitySymbol:"\ud83d\udc41\ufe0f",effectSymbol:"\u26a1\ufe0f",templateSymbol:"\ud83d\udcdd",debounceCustomDataUpdate:!0,visibilityMode:"auto",debug:!1};F&&(t=Object.assign(t,{highlightReactiveContent:!0,highlightVisibilityData:!0,highlightVisibilityArea:!0,highlightActionData:!0,highlightScopeData:!0,highlightTemplateData:!0}));let A=Symbol("isProxy");const q=new WeakMap;
!1==="HYPE_eventListeners"in window&&(window.HYPE_eventListeners=[]);window.HYPE_eventListeners.push({type:"HypeDocumentLoad",callback:function(a,d,e){function c(b,f,k,n,l){(n=b.closest("["+k+"-action]"))&&r(n.getAttribute(k+"-action"),a,null,{element:b,type:f});if((n=b.closest("["+k+"-behavior]"))&&!h[n.id]){h[n.id]=!0;let m=n.getAttribute(k+"-behavior");B(function(){a.triggerCustomBehaviorNamed(m)})()}}let h={};a.refreshReactiveContent=function(b,f,k,n){void 0===b||void 0===f||/[;=()]/.test(f)||
a.triggerCustomBehaviorNamed(y(n._key,b)+" equals "+("string"===typeof f?'"'+f+'"':f));void 0!==b&&(g("customDataUpdate")&&g("customDataUpdate")(b,f,k,n),a.customDataUpdate&&a.customDataUpdate(b,f,k,n),a.triggerCustomBehaviorNamed("customData was changed"),a.triggerCustomBehaviorNamed(y(n._key,b)+" was updated"));f=document.getElementById(a.currentSceneId());h={};f.querySelectorAll("[data-visibility], [data-content], [data-effect], [data-content-template]").forEach(function(l){var m=l.getAttribute("data-content"),
p=l.getAttribute("data-visibility"),u=l.getAttribute("data-effect"),x=l.hasAttribute("data-content-template");p&&(p=v(p,a,l),p=r("return "+p.value,a,p.scope,{element:l,type:"HypeReactiveVisibility"}),"none"==l.style.display&&(l.style.display="block"),p=p?"visible":"hidden",p!==l.style.visibility&&(l.style.visibility=p,b&&c(l,"HypeReactiveVisibilityChanged","data-visibility-changed",!0,!0)));u&&(u=v(u,a,l),r(u.value,a,u.scope,{element:l,type:"HypeReactiveEffect"}));m?(m=v(m,a,l),m=r("return "+m.value,
a,m.scope,{element:l,type:"HypeReactiveContent"}),m=void 0!==m?m:"",m!==l.innerHTML&&(l.innerHTML=m,b&&c(l,"HypeReactiveContentChanged","data-content-changed",!0,!0))):x&&(m=l.getAttribute("data-content-template"),x=q.get(a)||new Map,(m=m?x.get(m):x.get(l))?(m=G(m,a,l),m!==l.innerHTML&&(l.innerHTML=m,b&&c(l,"HypeReactiveTemplateChanged","data-content-template-changed",!0,!0))):l.innerHTML="")});!1!=="HypeDataMagic"in window&&HypeDataMagic.getDefault("refreshOnCustomData")&&a.refresh()};a.refreshReactiveContentDebounced=
B(a.refreshReactiveContent);a.resolveClosestScope=function(b){return E(a,b)};a.enableReactiveCustomData=function(b){const f=w.get(a)||{};a.customData=Object.assign(f,b||{})};a.setContentTemplateByName=function(b,f,k=!0){let n=q.get(a)||new Map;n.set(b,f);q.set(a,n);k&&a.refreshReactiveContentDebounced()};a.setContentTemplates=function(b,f=!0){if(b&&"object"===typeof b){for(let k in b)b.hasOwnProperty(k)&&a.setContentTemplateByName(k,b[k],!1);f&&a.refreshReactiveContentDebounced()}};a.flushContentTemplateByName=
function(b,f=!0){const k=q.get(a);k&&b&&(k.delete(b),q.set(a,k),f&&a.refreshReactiveContentDebounced())};a.flushContentTemplates=function(b=!0){const f=q.get(a);f&&(f.clear(),q.set(a,f),b&&a.refreshReactiveContentDebounced())};I(a);a.enableReactiveCustomData(g("customData")||{});a.functions().HypeReactiveContent&&a.functions().HypeReactiveContent(a,d,e)}});window.HYPE_eventListeners.push({type:"HypeScenePrepareForDisplay",callback:function(a,d,e){H(a);a.refreshReactiveContent()}});!1==="HypeActionEvents"in
window&&window.HYPE_eventListeners.push({type:"HypeTriggerCustomBehavior",callback:J});F?window.addEventListener("DOMContentLoaded",function(a){g("highlightReactiveContent")&&(a=["[data-scope] [data-content*="+g("scopeSymbol")+"],[data-scope] [data-effect*="+g("scopeSymbol")+"],[data-scope] [data-visibility*="+g("scopeSymbol")+"]{--data-reactive-color: #ffcccc}","[data-content], [data-effect], [data-visibility], [data-content-template]{--data-reactive-color: #f8d54f}"],document.documentElement.style.setProperty("--data-reactive-color",
"#f8d54f"),g("highlightActionData")&&(a=a.concat(["[data-content]{outline:1px dashed var(--data-reactive-color);position:relative}","[data-content]::before{content:attr(data-content);font-family:Helvetica,Arial;line-height:11px;font-size:9px;font-weight:normal;padding:2px 5px;white-space:nowrap;max-height:16px;color:#000;text-align:center;background-color:var(--data-reactive-color);position:absolute;top:-15px;left:-1px;border-top-right-radius:.2rem;border-top-left-radius:.2rem;}","[data-effect]::before{content:'"+
g("effectSymbol")+" ' attr(data-effect);font-family:Helvetica,Arial;line-height:11px;font-size:9px;font-weight:normal;padding:2px 5px;white-space:nowrap;max-height:16px;color:#000;text-align:center;background-color:var(--data-reactive-color);position:absolute;top:-15px;left:-1px;border-top-right-radius:.2rem;border-top-left-radius:.2rem;}","[data-content][data-effect]::before{content: attr(data-content) ' "+g("effectSymbol")+" ' attr(data-effect)}"])),g("highlightTemplateData")&&(a=a.concat(["[data-content-template]{outline:1px dashed var(--data-reactive-color);position:relative}",
"[data-content-template]::before{content:'"+g("templateSymbol")+" ' attr(data-content-template);font-family:Helvetica,Arial;line-height:11px;font-size:9px;font-weight:normal;padding:2px 5px;white-space:nowrap;max-height:16px;color:#000;text-align:center;background-color:var(--data-reactive-color);position:absolute;top:-15px;left:-1px;border-top-right-radius:.2rem;border-top-left-radius:.2rem;}"])),g("highlightVisibilityData")&&(a=a.concat(["[data-visibility]::before{content:'"+g("visibilitySymbol")+
" ' attr(data-visibility);font-family:Helvetica,Arial;line-height:11px;font-size:9px;font-weight:normal;padding:2px 5px;white-space:nowrap;max-height:16px;color:#000;text-align:center;background-color:var(--data-reactive-color);position:absolute;top:-15px;left:-1px;border-top-right-radius:.2rem;border-top-left-radius:.2rem;}"])),g("highlightScopeData")&&(a=a.concat(["[data-scope]{--data-reactive-color:#ffcccc; outline:1px dashed var(--data-reactive-color);}","[data-scope]::after{content:attr(data-scope);font-family:Helvetica,Arial;line-height:11px;font-size:9px;font-weight:normal;padding:2px 5px;white-space:nowrap;max-height:16px;color:#000;text-align:center;background-color:var(--data-reactive-color);position:absolute;bottom:-15px;left:-1px;border-bottom-right-radius:.2rem;border-bottom-left-radius:.2rem}"])),
g("highlightActionData")&&g("highlightVisibilityData")&&(a=a.concat(["[data-content][data-visibility]:not([data-effect])::before{content: attr(data-content) ' "+g("visibilitySymbol")+" ' attr(data-visibility)}","[data-effect][data-visibility]:not([data-content])::before{content: ' "+g("effectSymbol")+" ' attr(data-effect) ' "+g("visibilitySymbol")+" ' attr(data-visibility)}","[data-content][data-effect][data-visibility]::before{content: attr(data-content) ' "+g("effectSymbol")+" ' attr(data-effect) ' "+
g("visibilitySymbol")+" ' attr(data-visibility)}"])),g("highlightVisibilityArea")&&(a=a.concat(["[data-visibility]:not([data-scope])::after {content:'';position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image:repeating-linear-gradient(45deg,transparent,transparent 10px,var(--data-reactive-color) 10px,var(--data-reactive-color) 20px);opacity: .1;}"])),a.forEach(d=>document.styleSheets[0].insertRule(d,0)))}):window.addEventListener("DOMContentLoaded",function(a){a=[];switch(g("visibilityMode")){case "auto":a.push('[data-visibility][style*="visibility: hidden"] [data-visibility] { visibility: hidden !important; }');
break;case "manual":a.push('[style*="visibility: hidden"] .inheritVisibility { visibility: hidden !important; }','.propagateVisibility[data-visibility][style*="visibility: hidden"] [data-visibility] { visibility: hidden !important; }')}a.forEach(d=>document.styleSheets[0].insertRule(d,0))});return{version:"1.4.1",setDefault:function(a,d){"object"==typeof a?t=a:t[a]=d},getDefault:g,enableReactiveObject:z,disableReactiveObject:C,debounceByRequestFrame:B}}());