diff --git a/HypeReactiveContent.min.js b/HypeReactiveContent.min.js index 242d228..8ceb195 100644 --- a/HypeReactiveContent.min.js +++ b/HypeReactiveContent.min.js @@ -1,20 +1,20 @@ /* - Hype Reactive Content 1.2.2 + Hype Reactive Content 1.3.0 copyright (c) 2022 Max Ziebell, (https://maxziebell.de). MIT-license */ -!1==="HypeReactiveContent"in window&&(window.HypeReactiveContent=function(){function g(a){return a?_default[a]:_default}function t(a,c){return a?a+"."+c:c}function u(a,c,d){d=d||"";return null==a||a[v]?a:new Proxy(a,{get:function(e,k,b){if("_key"===k)return d;if(k===v)return!0;e=Reflect.get(e,k,b);return"object"===typeof e?u(e,c,t(d,k)):e},set:function(e,k,b,f){var l=Reflect.set(e,k,b,f);c(k,b,e,f);return l}})}function y(a){if(!a[v])return a;var c={},d;for(d in a)if(a.hasOwnProperty(d)){var e=a[d]; -c[d]="object"===typeof e?y(e):e}return c}function w(a){return function(){if(!a.timeout){var c=arguments;a.timeout=requestAnimationFrame(function(){a.apply(this,c);a.timeout=null}.bind(this))}}}function q(a,c,d,e){if(d){if("object"!==typeof d)return null}else{if(void 0===d)return null;d=c.customData}e=e||{};if(!1!=="HypeActionEvents"in window)return c.triggerAction(a,{element:e.element,event:{type:e.type},scope:d});try{var k=new Proxy(Object.assign({element:e.element,$elm:e.element},c),{set:function(b, -f,l,m){return Reflect.get(b,f,m)?Reflect.set(b,f,l,m):Reflect.set(d,f,l)},get:function(b,f,l){return(b=Reflect.get(b,f,l))?b:Reflect.get(d,f)},has:function(b,f,l){return b.hasOwnProperty(f)||window[f]?Reflect.has(b,f,l):!0}});return(new Function("$context","with($context){ "+a+"}"))(k)}catch(b){console.error(b)}}function z(a,c,d){return d?q("return "+d,a,null,{element:c,type:"HypeReactiveScope"}):null}function A(a,c){var d=c.closest("[data-scope]");return d?z(a,c,d.getAttribute("data-scope")):null} -function x(a,c,d){var e=g("scopeSymbol"),k=e.length,b=null;a=a.trim();a.startsWith(e)?(a=a.slice(k),b=A(c,d)):a.includes(e)&&(b=a.slice(0,a.indexOf(e)),b=z(c,d,b),a=a.slice(a.indexOf(e)+k));return{value:a,scope:b}}function C(a,c,d){!1==="HypeActionEvents"in window&&(c=d.customBehaviorName,"#"!=c.charAt(0)&&/[;=()]/.test(c)&&q(c,a,a.customData))}var B=-1!=window.location.href.indexOf("/Hype/Scratch/HypeScratch.");_default={scopeSymbol:"\u21e2",visibilitySymbol:"\ud83d\udc41\ufe0f",effectSymbol:"\u26a1\ufe0f"}; -B&&(_default=Object.assign(_default,{highlightReactiveContent:!0,highlightVisibilityData:!0,highlightVisibilityArea:!0,highlightActionData:!0,highlightScopeData:!0}));var v=Symbol("isProxy");!1==="HYPE_eventListeners"in window&&(window.HYPE_eventListeners=[]);window.HYPE_eventListeners.push({type:"HypeDocumentLoad",callback:function(a,c,d){function e(b,f,l,m,h){(m=b.closest("["+l+"-action]"))&&q(m.getAttribute(l+"-action"),a,null,{element:b,type:f});if((m=b.closest("["+l+"-behavior]"))&&!k[m.id]){k[m.id]= -!0;var h=m.getAttribute(l+"-behavior");w(function(){a.triggerCustomBehaviorNamed(h)})()}}var k={};a.refreshReactiveContent=function(b,f,l,m){void 0===b||void 0===f||/[;=()]/.test(f)||a.triggerCustomBehaviorNamed(t(m._key,b)+" equals "+("string"===typeof f?'"'+f+'"':f));void 0!==b&&(g("customDataUpdate")&&g("customDataUpdate")(b,f,l,m),a.customDataUpdate&&a.customDataUpdate(b,f,l,m),a.triggerCustomBehaviorNamed("customData was changed"),a.triggerCustomBehaviorNamed(t(m._key,b)+" was updated"));f=document.getElementById(a.currentSceneId()); -k={};f.querySelectorAll("[data-visibility], [data-content], [data-effect]").forEach(function(h){var n=h.getAttribute("data-content"),p=h.getAttribute("data-visibility"),r=h.getAttribute("data-effect");p&&(p=x(p,a,h),p=q("return "+p.value,a,p.scope,{element:h,type:"HypeReactiveVisibility"}),"none"==h.style.display&&(h.style.display="block"),p=p?"visible":"hidden",p!==h.style.visibility&&(h.style.visibility=p,b&&e(h,"HypeReactiveVisibiltyChanged","data-visibility-changed",!0,!0)));r&&(r=x(r,a,h),q(r.value, -a,r.scope,{element:h,type:"HypeReactiveEffect"}));n&&(n=x(n,a,h),n=q("return "+n.value,a,n.scope,{element:h,type:"HypeReactiveContent"}),n=void 0!==n?n:"",n!==h.innerHTML&&(h.innerHTML=n,b&&e(h,"HypeReactiveContentChanged","data-content-changed",!0,!0)))});!1!=="HypeDataMagic"in window&&HypeDataMagic.getDefault("refreshOnCustomData")&&a.refresh()};a.refreshReactiveContentDebounced=w(a.refreshReactiveContent);a.resolveClosestScope=function(b){return A(a,b)};a.enableReactiveCustomData=function(b){a.customData= -Object.assign(a.customData,b||{});a.customData=u(a.customData,a.refreshReactiveContentDebounced)};a.enableReactiveCustomData(g("customData")||{});a.functions().HypeReactiveContent&&a.functions().HypeReactiveContent(a,c,d)}});window.HYPE_eventListeners.push({type:"HypeScenePrepareForDisplay",callback:function(a,c,d){a.refreshReactiveContentDebounced()}});!1==="HypeActionEvents"in window&&window.HYPE_eventListeners.push({type:"HypeTriggerCustomBehavior",callback:C});B&&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-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("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(function(c){return document.styleSheets[0].insertRule(c,0)}))});return{version:"1.2.2",setDefault:function(a,c){"object"==typeof a?_default=a: -_default[a]=c},getDefault:g,enableReactiveObject:u,disableReactiveObject:y,debounceByRequestFrame:w}}()); +!1==="HypeReactiveContent"in window&&(window.HypeReactiveContent=function(){function g(a){return a?_default[a]:_default}function u(a,c){return a?a+"."+c:c}function v(a,c,d){d=d||"";return null==a||a[w]?a:new Proxy(a,{get:function(e,k,b){if("_key"===k)return d;if(k===w)return!0;e=Reflect.get(e,k,b);return"object"===typeof e?v(e,c,u(d,k)):e},set:function(e,k,b,f){var l=Reflect.set(e,k,b,f);c(k,b,e,f);return l}})}function z(a){if(!a[w])return a;var c={},d;for(d in a)if(a.hasOwnProperty(d)){var e=a[d]; +c[d]="object"===typeof e?z(e):e}return c}function x(a){return function(){if(!a.timeout){var c=arguments;a.timeout=requestAnimationFrame(function(){a.apply(this,c);a.timeout=null}.bind(this))}}}function q(a,c,d,e){if(d){if("object"!==typeof d)return null}else{if(void 0===d)return null;d=c.customData}e=e||{};if(!1!=="HypeActionEvents"in window)return c.triggerAction(a,{element:e.element,event:{type:e.type},scope:d});try{var k=new Proxy(Object.assign({element:e.element,$elm:e.element},c),{set:function(b, +f,l,m){return Reflect.get(b,f,m)?Reflect.set(b,f,l,m):Reflect.set(d,f,l)},get:function(b,f,l){return(b=Reflect.get(b,f,l))?b:Reflect.get(d,f)},has:function(b,f,l){return b.hasOwnProperty(f)||window[f]?Reflect.has(b,f,l):!0}});return(new Function("$context","with($context){ "+a+"}"))(k)}catch(b){console.error(b)}}function A(a,c,d){return d?q("return "+d,a,null,{element:c,type:"HypeReactiveScope"}):null}function B(a,c){var d=c.closest("[data-scope]");return d?A(a,c,d.getAttribute("data-scope")):null} +function y(a,c,d){var e=g("scopeSymbol"),k=e.length,b=null;a=a.trim();a.startsWith(e)?(a=a.slice(k),b=B(c,d)):a.includes(e)&&(b=a.slice(0,a.indexOf(e)),b=A(c,d,b),a=a.slice(a.indexOf(e)+k));return{value:a,scope:b}}function D(a){t.set(a,a.customData||{});Object.defineProperty(a,"customData",{get:function(){return t.get(a)},set:function(c){c=v(c,a.refreshReactiveContentDebounced);t.set(a,c);g("debounceCustomDataUpdate")?a.refreshReactiveContentDebounced():a.refreshReactiveContent()}})}function E(a, +c,d){!1==="HypeActionEvents"in window&&(c=d.customBehaviorName,"#"!=c.charAt(0)&&/[;=()]/.test(c)&&q(c,a,a.customData))}var C=-1!=window.location.href.indexOf("/Hype/Scratch/HypeScratch."),t=new WeakMap;_default={scopeSymbol:"\u21e2",visibilitySymbol:"\ud83d\udc41\ufe0f",effectSymbol:"\u26a1\ufe0f",debounceCustomDataUpdate:!0};C&&(_default=Object.assign(_default,{highlightReactiveContent:!0,highlightVisibilityData:!0,highlightVisibilityArea:!0,highlightActionData:!0,highlightScopeData:!0}));var w= +Symbol("isProxy");!1==="HYPE_eventListeners"in window&&(window.HYPE_eventListeners=[]);window.HYPE_eventListeners.push({type:"HypeDocumentLoad",callback:function(a,c,d){function e(b,f,l,m,h){(m=b.closest("["+l+"-action]"))&&q(m.getAttribute(l+"-action"),a,null,{element:b,type:f});if((m=b.closest("["+l+"-behavior]"))&&!k[m.id]){k[m.id]=!0;var h=m.getAttribute(l+"-behavior");x(function(){a.triggerCustomBehaviorNamed(h)})()}}var k={};a.refreshReactiveContent=function(b,f,l,m){void 0===b||void 0===f|| +/[;=()]/.test(f)||a.triggerCustomBehaviorNamed(u(m._key,b)+" equals "+("string"===typeof f?'"'+f+'"':f));void 0!==b&&(g("customDataUpdate")&&g("customDataUpdate")(b,f,l,m),a.customDataUpdate&&a.customDataUpdate(b,f,l,m),a.triggerCustomBehaviorNamed("customData was changed"),a.triggerCustomBehaviorNamed(u(m._key,b)+" was updated"));f=document.getElementById(a.currentSceneId());k={};f.querySelectorAll("[data-visibility], [data-content], [data-effect]").forEach(function(h){var n=h.getAttribute("data-content"), +p=h.getAttribute("data-visibility"),r=h.getAttribute("data-effect");p&&(p=y(p,a,h),p=q("return "+p.value,a,p.scope,{element:h,type:"HypeReactiveVisibility"}),"none"==h.style.display&&(h.style.display="block"),p=p?"visible":"hidden",p!==h.style.visibility&&(h.style.visibility=p,b&&e(h,"HypeReactiveVisibiltyChanged","data-visibility-changed",!0,!0)));r&&(r=y(r,a,h),q(r.value,a,r.scope,{element:h,type:"HypeReactiveEffect"}));n&&(n=y(n,a,h),n=q("return "+n.value,a,n.scope,{element:h,type:"HypeReactiveContent"}), +n=void 0!==n?n:"",n!==h.innerHTML&&(h.innerHTML=n,b&&e(h,"HypeReactiveContentChanged","data-content-changed",!0,!0)))});!1!=="HypeDataMagic"in window&&HypeDataMagic.getDefault("refreshOnCustomData")&&a.refresh()};a.refreshReactiveContentDebounced=x(a.refreshReactiveContent);a.resolveClosestScope=function(b){return B(a,b)};a.enableReactiveCustomData=function(b){var f=t.get(a)||{};a.customData=Object.assign(f,b||{})};D(a);a.enableReactiveCustomData(g("customData")||{});a.functions().HypeReactiveContent&& +a.functions().HypeReactiveContent(a,c,d)}});window.HYPE_eventListeners.push({type:"HypeScenePrepareForDisplay",callback:function(a,c,d){a.refreshReactiveContentDebounced()}});!1==="HypeActionEvents"in window&&window.HYPE_eventListeners.push({type:"HypeTriggerCustomBehavior",callback:E});C&&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-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("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(function(c){return document.styleSheets[0].insertRule(c,0)}))});return{version:"1.3.0",setDefault:function(a,c){"object"==typeof a?_default=a:_default[a]=c},getDefault:g,enableReactiveObject:v,disableReactiveObject:z,debounceByRequestFrame:x}}());