Added README and dist

README.md

@@ -1,24 +1,31 @@
-# New Project
-
-> ✨ Bootstrapped with Create Snowpack App (CSA).
-
-## Available Scripts
-
-### npm start
-
-Runs the app in the development mode.
-Open http://localhost:8080 to view it in the browser.
-
-The page will reload if you make edits.
-You will also see any lint errors in the console.
-
-### npm run build
-
-Builds a static copy of your site to the `build/` folder.
-Your app is ready to be deployed!
-
-**For the best production performance:** Add a build bundler plugin like "@snowpack/plugin-webpack" or "@snowpack/plugin-parcel" to your `snowpack.config.json` config file.
-
-### Q: What about Eject?
-
-No eject needed! Snowpack guarantees zero lock-in, and CSA strives for the same.
+# Split View
+
+Split View is a web component for comparing two images. To use it include `/dist/split-view.js` in a page and then use `<split-view>[...]</split-view>` to use the component. It's best used with `<picture>` elements.
+
+Give the two elements to be compared attributes of `slot="top"` and `slot="bottom"`.
+
+```
+<split-view>
+  <picture slot="top">
+    <img src="https://source.unsplash.com/600x400/?day" />
+  </picture>
+  <picture slot="bottom">
+    <img src="https://source.unsplash.com/600x400/?night" />
+  </picture>
+</split-view>
+```
+
+Split View also supports an optional `mode`. This option determines how the top and bottom layers are blended.
+
+```
+<split-view mode="screen">
+  <picture slot="top">
+    <img src="https://source.unsplash.com/600x400/?day" />
+  </picture>
+  <picture slot="bottom">
+    <img src="https://source.unsplash.com/600x400/?night" />
+  </picture>
+</split-view>
+```
+
+Options are the same as CSS's `mix-blend-mode`.

dist/split-view.js

@@ -0,0 +1,50 @@
+let tmpl=document.createElement("template");tmpl.innerHTML=`
+  <style>
+    :host {
+      display: block;
+    }
+    :host([hidden]) { display: none }
+    .split {
+      position: relative;
+      height: 100%;
+      display: grid;
+      align-items: center;
+      --split: 100;
+    }
+    .top,
+    .bottom {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+    .bottom {
+      background-color: red;
+    }
+    .top {
+      z-index: 2;
+      right: calc(8px + (((100% - 16px) / 100) * var(--split)));
+      overflow: hidden;
+      border-right: 1px solid white;
+    }
+    input {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      margin: 0;
+      padding: 0;
+      z-index: 3;
+      background-color: transparent;
+      -webkit-appearance: none;
+    }
+    input[type="range"]:focus {
+      outline: none;
+    }    
+  </style>
+  <div class="split" id="split">
+    <div class="bottom" id="bottom"><slot name="bottom"></slot></div>
+    <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);