`}else f=""}d.srcdoc=f;I(a.g,b,!0)}catch(k){console.error(k)}}}}function S(a,b,c,d){const e=document.createElement("div");e.className="cl c-"+b;e.textContent=c;e.dataset.stamp=d;a.appendChild(e)}class Q{constructor(a){this.g=a}} function E(a,b){const c=H(a.g,b);var d=document.getElementById(b);if(d&&c&&(d=d.querySelector(".sc-wrap")||d.querySelector(".sf-wrap"))){d.innerHTML="";var e=J(a.g,b);e.html.length&&(d.innerHTML=e.html.join("\n"));if(e.css.length){const g=document.createElement("style");g.textContent=e.css.join("\n");d.appendChild(g)}if(e.js.length)try{const g=c.name;(new Function("el","MDRun",e.js.join("\n")))(d,{"goto":f=>N(a.g,f),send:(f,k,h)=>O(a.g,f,k,h),recv:(f,k)=>{var h=a.g,l=g||b;h.l.has(l)||h.l.set(l,new Map); h.l.get(l).set(f,k)},show:f=>L(a.g,f),hide:f=>M(a.g,f)})}catch(g){console.error(g)}I(a.g,b,!0)}}class R{constructor(a){this.g=a}}window.MDRun=new P;function T(a){a.c.forEach(b=>b.classList.toggle("a"))}function U(a){a.c.forEach(b=>b.classList.remove("a"))}function V(a){const b=document.getElementById(a.getAttribute("data-target")),c=b.classList.contains("csd");a.classList.toggle("csd");b.classList.toggle("csd");a.querySelector(".csp").textContent=c?"-":"+";b.querySelectorAll("video").forEach(d=>{c?d.dataset.auto&&d.play():d.pause()})} class W{constructor(){const a=document.querySelector(".b");this.c=[document.querySelector(".h"),document.querySelector(".m"),a];a.addEventListener("click",()=>T(this));document.querySelectorAll(".cbc .chd").forEach(b=>b.addEventListener("click",c=>{if(c=c.target.closest(".chd")){var d=document.getElementById(c.getAttribute("data-target"));c.classList.toggle("cld");d.classList.toggle("cld");c.querySelector(".ctg").textContent=d.classList.contains("cld")?"+":"-"}}));document.querySelectorAll(".csh").forEach(b=> b.addEventListener("click",c=>{(c=c.target.closest(".csh"))&&V(c)}));window.addEventListener("pageshow",b=>{b.persisted&&U(this)})}}window.addEventListener("DOMContentLoaded",()=>new W);}).call(this);

Nico Pr

Nico Pr

JSpek

Vanilla JavaScript Spek

Features#

  • Client side only
  • No data sent to server
  • Browse or drop files
  • Multiple instances
  • Spectrum zoom & pan
  • Sync zoom & pan
  • Export view to PNG
  • Installable web app
  • Lightweight 13KB JS + 4KB CSS

DEMO

CODE