app.js

javascript:(()=>{var e={fontSize:60,speed:500,colorObj:{h1:"#E1341E",h2:"#E1341E",h3:"#E1341E",h4:"#E1341E",h5:"#E1341E",h6:"#E1341E",p:"#175ddc"},wordPosition:0,tagPosition:0,intervalId:null,lock:!1,previousWord:null},t=document.createElement("div");t.style.display="flex",t.style.flexWrap="wrap",t.style.alignContent="center",t.style.justifyContent="center",t.style.flex="1",t.style.fontSize="60px",t.style.font="georgia";var n=document.createElement("div");n.style.position="relative",n.style.display="flex",n.style.justifyContent="flex-end",n.style.fontFamily="georgia",n.innerHTML="MadeCurious.";var o=document.createElement("div");o.setAttribute("id","modal"),o.style.position="fixed",o.style.top="50%",o.style.left="50%",o.style.minWidth="600px",o.style.maxWidth="100%",o.style.height="400px",o.style.transform="translate(-50%, -50%)",o.style.background="white",o.style.padding="20px",o.style.border="2px solid black",o.style.zIndex="999999",o.style.display="flex",o.style.flexDirection="column",o.style.opacity="0",o.style.transition="opacity 0.2s linear",o.appendChild(t),o.appendChild(n);var l=document.createElement("div");l.setAttribute("id","legend"),l.style.position="fixed",l.style.bottom="20px",l.style.right="20px",l.style.minWidth="200px",l.style.maxWidth="100%",l.style.background="white",l.style.padding="20px",l.style.border="2px solid black",l.style.zIndex="999999",l.style.display="flex",l.style.flexDirection="column",l.style.opacity="0",l.style.transition="opacity 0.2s linear",legendContent='\n        <p class="toggle" style="text-align:right; margin:0">Hide Modal</p>\n        <h6 style="margin-top: 0; margin-bottom:10px">Venetian Legend</h6>\n        <p style="max-width: 350px">Hold the <b>Alt</b> key (on mac <b>⌥</b>) and any of the keys below to change settings</p>\n        <ul style="padding-left:0; list-style-type: none; font-family: sans-serif">\n            <li style="display:flex; justify-content:space-between;"><span>Increase <b>+</b></span> <span>Decrease <b>-</b></span></li>\n            <li style="display:flex; justify-content:space-between;"><span>Faster <b><</b> </span> <span>Slower  <b>></b></span></li>\n            <li style="display:flex; justify-content:space-between;"><span>Forward (10 words)  <b>M</b></span><span>Rewind (10 words) <b>N</b></span></li>\n            <li>Cancel <b>Q</b></li>\n        </ul>',l.innerHTML=legendContent,toggle=l.querySelector(".toggle"),toggle.onclick=function e(t){modalLegend=document.getElementById("legend"),"Show Legend"===t.target.textContent?(modalLegend.style.padding="10px",modalLegend.innerHTML=legendContent):(modalLegend.style.padding="5px",modalLegend.innerHTML='<p style="text-align:right; margin:0" class="toggle">Show Legend</p>');toggle=modalLegend.querySelector(".toggle"),toggle.onclick=e};var a=Object.keys(e.colorObj).join(","),i=document.querySelectorAll(a);displayNextWord=function(){e.wordPosition<r.length?(t.innerHTML=r[e.wordPosition].word,t.style.color=e.colorObj["".concat(r[e.wordPosition].tag.toLowerCase())],e.colorObj["".concat(r[e.wordPosition].tag)],e.previousWord&&(r[e.wordPosition].tagPosition,e.previousWord.tagPosition),e.previousWord=r[e.wordPosition],e.wordPosition++):clearInterval(e.intervalId)},createModal=function(){document.body.appendChild(o),document.body.appendChild(l),setTimeout((function(){o.style.opacity=l.style.opacity="1"}),100)};for(var r=[],s=function(t){var n=i[t].tagName;for(i[t].addEventListener("mouseover",(function(n){return function(t,n){t.altKey&&(n.style.backgroundColor=e.colorObj["".concat(n.tagName.toLowerCase())],n.style.color="white",n.style.transition="background-color 0.2s linear")}(n,i[t])})),i[t].addEventListener("click",(function(n){return function(t,n){if(t.altKey){document.getElementById("modal")||createModal(),p(),console.log(n.tagName),n.style.backgroundColor=e.colorObj["".concat(n.tagName.toLowerCase())],n.style.color="white",n.style.transition="background-color 0.2s linear",e.intervalId&&clearInterval(e.intervalId);for(var o=0;o<i.length;o++)console.log(i[o].tagName,t.target.tagName),i[o].textContent===t.target.textContent&&i[o].tagName===n.tagName&&(console.log(t.target.textContent,i[o].textContent,o),e.tagPosition=o);e.wordPosition=r.findIndex((function(t){return t.tagPosition===e.tagPosition})),e.intervalId=setInterval(displayNextWord,e.speed)}}(n,i[t])})),i[t].addEventListener("mouseout",(function(e){return function(e,t){e.altKey&&(t.style.backgroundColor=t.style.color="")}(e,i[t])})),c=i[t].textContent,c=i[t].textContent.replace(/(?:\r\n|\r|\n)/g," "),y=c.split(" "),g=0;g<y.length;g++)r.push({word:y[g],tag:n,tagPosition:t})},d=0;d<i.length;d++){var c,y,g;s(d)}var p=function(){for(var e=0;e<i.length;e++)i[e].style.backgroundColor=null,i[e].style.color=null,i[e].style.transition=null};handleFontSizeChange=function(n){e.fontSize="+"===n?e.fontSize+10:e.fontSize-10,t.style.fontSize="".concat(e.fontSize,"px")},handleSpeedChange=function(t){e.speed="+"===t?e.speed+50:e.speed-50,clearInterval(e.intervalId),e.intervalId=setInterval(displayNextWord,e.speed)},handleWordScrubChange=function(n){e.lock||(e.lock=!0,clearInterval(e.intervalId),o.style.backgroundColor="red",t.style.color="white",t.style.fontSize=3*e.fontSize,t.innerHTML="".concat(Math.round(e.wordPosition/r.length*100),"%"),setTimeout((function(){o.style.backgroundColor="white",e.wordPosition="+"===n?e.wordPosition+5:e.wordPosition-5,e.intervalId=setInterval(displayNextWord,e.speed),e.lock=!1}),500))},handleCancel=function(){modalElement=document.getElementById("modal"),e.elementSelected=!1,modalElement&&(modalElement.remove(),clearInterval(e.intervalId))},document.addEventListener("keypress",(function(e){if(e.altKey)switch(e.code){case"Equal":handleFontSizeChange("+");break;case"Esc":handleClose("+");break;case"Minus":handleFontSizeChange("-");break;case"Period":handleSpeedChange("-");break;case"Comma":handleSpeedChange("+");break;case"KeyQ":handleCancel("KeyQ");break;case"KeyG":handleWordScrubChange("-");break;case"KeyH":handleWordScrubChange("+");break;default:return}}))})();