Added starting point option with default to 50

onion2k · Sep 27, 2020 · 20beaae · 20beaae
1 parent 9fa38d6
commit 20beaae
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 7 deletions.
diff --git a/dist/split-view.js b/dist/split-view.js
@@ -24,7 +24,7 @@ let tmpl=document.createElement("template");tmpl.innerHTML=`
     }
     .top {
       z-index: 2;
-      right: calc(8px + (((100% - 16px) / 100) * var(--split)));
+      right: calc(8px + (((100% - 16px) / 100) * (100 - var(--split))));
       overflow: hidden;
       border-right: 1px solid white;
     }
@@ -47,4 +47,4 @@ let tmpl=document.createElement("template");tmpl.innerHTML=`
     <div class="top" id="top"><slot name="top"></slot></div>
     <input type="range" min=0 max=100 value=0 id="slider" />
   </div>
-`;class SplitView extends HTMLElement{constructor(){super();let t=this.attachShadow({mode:"open"});t.appendChild(tmpl.content.cloneNode(!0))}connectedCallback(){const t=this.shadowRoot.getElementById("slider"),o=this.shadowRoot.getElementById("split");t.addEventListener("input",s=>{const e=+s.target.value;console.log(e),o.style.setProperty("--split",100-e)});const i=this.shadowRoot.getElementById("top");i.style.mixBlendMode=this.getAttribute("mode")||"normal"}}window.customElements.define("split-view",SplitView);
+`;class SplitView extends HTMLElement{constructor(){super();let t=this.attachShadow({mode:"open"});t.appendChild(tmpl.content.cloneNode(!0))}connectedCallback(){const t=this.shadowRoot.getElementById("slider"),e=this.shadowRoot.getElementById("split"),s=this.shadowRoot.getElementById("top"),o=this.getAttribute("start")||50,n=this.getAttribute("mode")||"normal";t.addEventListener("input",l=>{const i=+l.target.value;console.log(i),e.style.setProperty("--split",i)}),e.style.setProperty("--split",o),t.value=o,s.style.mixBlendMode=n}}window.customElements.define("split-view",SplitView);
diff --git a/public/index.html b/public/index.html
@@ -14,7 +14,7 @@
 
     <h1>Split View</h1>
 
-    <split-view>
+    <split-view mode="normal" start=25>
       <picture slot="top">
         <img src="https://source.unsplash.com/600x400/?day" />
       </picture>

diff --git a/src/index.js b/src/index.js
@@ -25,7 +25,7 @@ tmpl.innerHTML = `
     }
     .top {
       z-index: 2;
-      right: calc(8px + (((100% - 16px) / 100) * var(--split)));
+      right: calc(8px + (((100% - 16px) / 100) * (100 - var(--split))));
       overflow: hidden;
       border-right: 1px solid white;
     }
@@ -50,22 +50,46 @@ tmpl.innerHTML = `
   </div>
 `;
 class SplitView extends HTMLElement {
+
+  /**
+   * Split View is an image comparison component
+   * 
+   * <split-view>
+   *   <picture slot="top">[...]</picture>
+   *   <picture slot="bottom">[...]</picture>
+   * </split-view>
+   * 
+   * Options are;
+   * 
+   * start (number) The point where the comparison line should start (0 = left, 1000 = right)
+   * mode (string) A CSS mix-blend-mode to use for comparison
+   */
+
   constructor() {
     super();
     let shadowRoot = this.attachShadow({mode: 'open'});
     shadowRoot.appendChild(tmpl.content.cloneNode(true));
   }
+
   connectedCallback() {
     const slider = this.shadowRoot.getElementById("slider");
     const splitter = this.shadowRoot.getElementById("split");
+    const top = this.shadowRoot.getElementById("top");
+
+    const start = this.getAttribute("start") || 50;
+    const mode = this.getAttribute("mode") || "normal";
+
     slider.addEventListener("input", (event) => {
       const split = +event.target.value;
       console.log(split)
-      splitter.style.setProperty("--split", 100 - split);
+      splitter.style.setProperty("--split", split);
     });
 
-    const top = this.shadowRoot.getElementById("top");
-    top.style.mixBlendMode = this.getAttribute("mode") || "normal";
+    splitter.style.setProperty("--split", start);
+    slider.value = start;
+
+    top.style.mixBlendMode = mode;
   }
+
 }
 window.customElements.define('split-view', SplitView);