presi-slides 1.0.4 → 1.0.6

package/eleventy.config.js

@@ -1,4 +1,5 @@
 import { HtmlBasePlugin } from "@11ty/eleventy";
+import htex from "htex/eleventy";
 import slideTransform from "./src/11ty-transform.js";
 
 const output = process.env.STATIC || "static";
@@ -13,6 +14,7 @@ export default async function (eleventyConfig) {
   eleventyConfig.addPassthroughCopy("includes");
 
   eleventyConfig.addPlugin(HtmlBasePlugin);
+  eleventyConfig.addPlugin(htex, {});
 
   eleventyConfig.addTransform("slide", slideTransform);
 

package/includes/presi-slides.cjs

@@ -122,4 +122,4 @@ js: import "konva/skia-backend";
         transition: opacity 1s;
       }
     }
-  `;isPaint=!1;overlayMode=`pointer`;overlayColor=`red`;stage=null;constructor(){super(),ne(this).template(e.template).styles(e.styles)}static observedAttributes=[`active`,`overlay`];attributeChangedCallback(e,t,n){switch(e){case`overlay`:this.overlayMode=n,this.createOverlay();break;case`color`:this.overlayColor=n}}disconnectedCallback(){this.stage&&delete this.stage}createOverlay(){if(this.stage)return;let e=this.shadowRoot.getElementById(`overlay`);console.log(`Creating overlay if needed`,this.stage),this.stage=new ua.Stage({container:e,width:e?.clientWidth,height:e?.clientHeight}),this.layer=new ua.Layer,this.stage.add(this.layer),this.stage.on(`mousedown touchstart`,e=>{this.isPaint=!0;let t=this.stage.getPointerPosition();console.log(`touchstart`,t),this.lastLine=new ua.Line({stroke:this.overlayColor,strokeWidth:this.overlayMode===`eraser`?20:4,globalCompositeOperation:this.overlayMode===`brush`?`source-over`:`destination-out`,lineCap:`round`,lineJoin:`round`,points:[t.x,t.y,t.x,t.y]}),this.layer.add(this.lastLine)}),this.stage.on(`mouseup touchend`,()=>{this.isPaint=!1,console.log(`touchend`)}),this.stage.on(`mousemove touchmove`,e=>{if(!this.isPaint)return;e.evt.preventDefault();let t=this.stage.getPointerPosition(),n=this.lastLine.points().concat([t.x,t.y]);this.lastLine.points(n)})}},fa=.4,pa=.8,ma=class extends HTMLElement{VIEW_ELEMENT=`slide-view`;FOOTER_ELEMENT=`slide-footer`;controls=null;active=null;observer=new IntersectionObserver(e=>{let t=0,n=null;e.forEach(e=>{if(e.isIntersecting){let r=e.target;e.intersectionRatio<fa?r.removeAttribute(`active`):e.intersectionRatio>t&&(t=e.intersectionRatio,n=r)}}),n&&n!==this.active&&this.setActiveSlide(n)},{threshold:[0,fa,pa,1],delay:300});constructor(){super(),this.addEventListener(`slide:input`,e=>{let{slide:t}=e.detail,n=this.slide(t);this.setActiveSlide(n),this.jumpToSlide(n)}),this.addEventListener(`slide:overlay`,e=>{this.manageOverlay(e.detail)})}slide(e){return Array.from(this.querySelectorAll(this.VIEW_ELEMENT))[e-1]}connectedCallback(){let e=Array.from(this.querySelectorAll(this.VIEW_ELEMENT));this.controls=this.querySelector(this.FOOTER_ELEMENT),e.forEach(e=>this.observer.observe(e))}gotoSlide(e){console.log(`Going to slide`,e),e&&e.scrollIntoView({behavior:`smooth`,block:`center`,inline:`nearest`})}jumpToSlide(e){e&&e.scrollIntoView({block:`center`,inline:`nearest`})}setActiveSlide(e){if(this.active=e,this.active){this.active.setAttribute(`active`,`active`);let t=Array.from(this.querySelectorAll(this.VIEW_ELEMENT)).findIndex(t=>t===e);this.controls&&(this.controls.setAttribute(`slide`,t+1),this.controls.setAttribute(`overlay`,e.getAttribute(`overlay`)||`pointer`))}}manageOverlay(e){let{overlay:t}=e||{};console.log(`Overlay options`,e),this.active&&t&&this.active.setAttribute(`overlay`,t)}};function ha(){window.addEventListener(`resize`,ga),ga()}function ga(){let e=document.body,t=document.documentElement.clientWidth,n=document.documentElement.clientHeight;e.classList.add(`presentation-scaled`),e.style.setProperty(`--viewport-width`,t.toString()),e.style.setProperty(`--viewport-height`,n.toString()),console.log(`Rescaled`,t,n)}c({"slide-presi":ma,"slide-view":da,"slide-footer":T}),ha();
+  `;isPaint=!1;overlayMode=`pointer`;overlayColor=`red`;stage=null;constructor(){super(),ne(this).template(e.template).styles(e.styles),te.delegate(this,`.reveal`,{click:e=>{let t=e.target;if(t){let e=t.nextElementSibling;e&&e.classList.add(`reveal`),t.classList.remove(`reveal`)}}}),te.delegate(this,`.reveal ~ :not(.reveal)`,{click:e=>{let t=e.target;t&&t.classList.add(`reveal-one`)}})}static observedAttributes=[`active`,`overlay`];attributeChangedCallback(e,t,n){switch(e){case`overlay`:this.overlayMode=n,this.createOverlay();break;case`color`:this.overlayColor=n}}disconnectedCallback(){this.stage&&delete this.stage}createOverlay(){if(this.stage)return;let e=this.shadowRoot.getElementById(`overlay`);console.log(`Creating overlay if needed`,this.stage),this.stage=new ua.Stage({container:e,width:e?.clientWidth,height:e?.clientHeight}),this.layer=new ua.Layer,this.stage.add(this.layer),this.stage.on(`mousedown touchstart`,e=>{this.isPaint=!0;let t=this.stage.getPointerPosition();console.log(`touchstart`,t),this.lastLine=new ua.Line({stroke:this.overlayColor,strokeWidth:this.overlayMode===`eraser`?20:4,globalCompositeOperation:this.overlayMode===`brush`?`source-over`:`destination-out`,lineCap:`round`,lineJoin:`round`,points:[t.x,t.y,t.x,t.y]}),this.layer.add(this.lastLine)}),this.stage.on(`mouseup touchend`,()=>{this.isPaint=!1,console.log(`touchend`)}),this.stage.on(`mousemove touchmove`,e=>{if(!this.isPaint)return;e.evt.preventDefault();let t=this.stage.getPointerPosition(),n=this.lastLine.points().concat([t.x,t.y]);this.lastLine.points(n)})}},fa=.4,pa=.8,ma=new URLSearchParams(document.location.search),ha=class extends HTMLElement{VIEW_ELEMENT=`slide-view`;FOOTER_ELEMENT=`slide-footer`;controls=null;active=null;observer=new IntersectionObserver(e=>{let t=0,n=null;e.forEach(e=>{if(e.isIntersecting){let r=e.target;e.intersectionRatio<fa?r.removeAttribute(`active`):e.intersectionRatio>t&&(t=e.intersectionRatio,n=r)}}),n&&n!==this.active&&this.setActiveSlide(n)},{threshold:[0,fa,pa,1],delay:300});constructor(){super(),this.addEventListener(`slide:input`,e=>{let{slide:t}=e.detail,n=this.slide(t);this.setActiveSlide(n),this.jumpToSlide(n)}),this.addEventListener(`slide:overlay`,e=>{this.manageOverlay(e.detail)}),ma.get(`reveal`)&&this.classList.add(`reveal-all`)}slide(e){return Array.from(this.querySelectorAll(this.VIEW_ELEMENT))[e-1]}connectedCallback(){let e=Array.from(this.querySelectorAll(this.VIEW_ELEMENT));this.controls=this.querySelector(this.FOOTER_ELEMENT),e.forEach(e=>this.observer.observe(e))}gotoSlide(e){console.log(`Going to slide`,e),e&&e.scrollIntoView({behavior:`smooth`,block:`center`,inline:`nearest`})}jumpToSlide(e){e&&e.scrollIntoView({block:`center`,inline:`nearest`})}setActiveSlide(e){if(this.active=e,this.active){this.active.setAttribute(`active`,`active`);let t=Array.from(this.querySelectorAll(this.VIEW_ELEMENT)).findIndex(t=>t===e);this.controls&&(this.controls.setAttribute(`slide`,t+1),this.controls.setAttribute(`overlay`,e.getAttribute(`overlay`)||`pointer`))}}manageOverlay(e){let{overlay:t}=e||{};console.log(`Overlay options`,e),this.active&&t&&this.active.setAttribute(`overlay`,t)}};function ga(){window.addEventListener(`resize`,_a),_a()}function _a(){let e=document.body,t=document.documentElement.clientWidth,n=document.documentElement.clientHeight;e.classList.add(`presentation-scaled`),e.style.setProperty(`--viewport-width`,t.toString()),e.style.setProperty(`--viewport-height`,n.toString()),console.log(`Rescaled`,t,n)}c({"slide-presi":ha,"slide-view":da,"slide-footer":T}),ga();

package/includes/presi-slides.js

@@ -8427,7 +8427,16 @@ var ua = $n.Util._assign($n, {
 	overlayColor = "red";
 	stage = null;
 	constructor() {
-		super(), ne(this).template(e.template).styles(e.styles);
+		super(), ne(this).template(e.template).styles(e.styles), te.delegate(this, ".reveal", { click: (e) => {
+			let t = e.target;
+			if (t) {
+				let e = t.nextElementSibling;
+				e && e.classList.add("reveal"), t.classList.remove("reveal");
+			}
+		} }), te.delegate(this, ".reveal ~ :not(.reveal)", { click: (e) => {
+			let t = e.target;
+			t && t.classList.add("reveal-one");
+		} });
 	}
 	static observedAttributes = ["active", "overlay"];
 	attributeChangedCallback(e, t, n) {
@@ -8473,7 +8482,7 @@ var ua = $n.Util._assign($n, {
 			this.lastLine.points(n);
 		});
 	}
-}, fa = .4, pa = .8, ma = class extends HTMLElement {
+}, fa = .4, pa = .8, ma = new URLSearchParams(document.location.search), ha = class extends HTMLElement {
 	VIEW_ELEMENT = "slide-view";
 	FOOTER_ELEMENT = "slide-footer";
 	controls = null;
@@ -8501,7 +8510,7 @@ var ua = $n.Util._assign($n, {
 			this.setActiveSlide(n), this.jumpToSlide(n);
 		}), this.addEventListener("slide:overlay", (e) => {
 			this.manageOverlay(e.detail);
-		});
+		}), ma.get("reveal") && this.classList.add("reveal-all");
 	}
 	slide(e) {
 		return Array.from(this.querySelectorAll(this.VIEW_ELEMENT))[e - 1];
@@ -8537,16 +8546,16 @@ var ua = $n.Util._assign($n, {
 };
 //#endregion
 //#region src/slides.js
-function ha() {
-	window.addEventListener("resize", ga), ga();
-}
 function ga() {
+	window.addEventListener("resize", _a), _a();
+}
+function _a() {
 	let e = document.body, t = document.documentElement.clientWidth, n = document.documentElement.clientHeight;
 	e.classList.add("presentation-scaled"), e.style.setProperty("--viewport-width", t.toString()), e.style.setProperty("--viewport-height", n.toString()), console.log("Rescaled", t, n);
 }
 c({
-	"slide-presi": ma,
+	"slide-presi": ha,
 	"slide-view": da,
 	"slide-footer": T
-}), ha();
+}), ga();
 //#endregion