diff options
| -rw-r--r-- | client.html | 7 | ||||
| -rw-r--r-- | demo.js | 94 |
2 files changed, 84 insertions, 17 deletions
diff --git a/client.html b/client.html index 1138dab..0bcd335 100644 --- a/client.html +++ b/client.html @@ -6,9 +6,14 @@ </head> <body> <script type="text/javascript" src="demo.js"></script> + <label for="image">Add Images to Album</label> <input type="file" id="image" multiple accept="image" name="image" onchange="addimages()"/> - <button onclick="download()">Download</button> + <button onclick="download()">Download Photo Album</button> + <button onclick="reset()">Reset</button> + <hr/> + <h3><em>Album Preview</em></h3> <div id="preview"></div> </div> + <dialog id="modal"></dialog> </body> </html> @@ -14,14 +14,17 @@ const htmlOuter = inner => ` div.hanging-indent{margin-left: 1.5em; text-indent: -1.5em;} ul.task-list{list-style: none;} .display.math{display: block; text-align: center; margin: 0.5rem auto;} + ${albumStyle} </style> </head> <body> <div id='preview'> ${inner} </div> +<dialog id="modal"></dialog> <script> ${downloadImage.toString()} +${focusImage.toString()} </script> </body> </html> @@ -43,17 +46,21 @@ function download() { } function downloadImage(index) { - for (let i = 0; i < preview.childNodes.length; i++) { - const node = preview.childNodes[i]; - if(node.nodeName === 'IMG' && 0 === index--) { - const image = node; - const link = document.createElement('a'); - link.download = image.name; - link.href = image.src; - link.click(); - return; - } - } + const imageNodes = document.getElementsByClassName('image-preview'); + const image = imageNodes[index]; + const link = document.createElement('a'); + link.download = image.name; + link.href = image.src; + link.click(); +} + +function focusImage(index) { + const imageNodes = document.getElementsByClassName('image-preview'); + const image = imageNodes[index]; + modal.innerHTML=''; + modal.appendChild(image.cloneNode()); + modal.onclick= () => {modal.open=false}; + modal.open = true; } function addimages() { @@ -61,20 +68,72 @@ function addimages() { for (let i = 0; i < files.length; i++) { addimage(files[i]); } + image.files = []; +} + +const previewPrelude = '<h1></h1>' + +const albumStyle = ` +#modal { + border: none; + width: 100vw; + height: 100vh; + z-index: 2000; + position: fixed; + top: 0; +} +.image-outer-box { + margin: 1.666666%; + width: 30%; + float: left; +} +.image-inner-box { + cursor: pointer; + width: 100%; + position: relative; + padding-top: 100%; + background: black; +} +.image-preview { + max-height : 100%; + max-width : 100%; + position: absolute; + top: 50%; + left: 50%; + -ms-transform: translateY(-50%) translateX(-50%); + transform: translateY(-50%) translateX(-50%); +} +.image-inner-box button { + z-index: 1000; + position: relative; +} +`; + +function reset() { + images = []; + renderImages(); } function renderImages() { preview.innerHTML = ''; images.forEach((x, i) => { // const deleteButton = document.createElement('button'); + const downloadButton = document.createElement('button'); downloadButton.innerText = 'Save Image'; downloadButton.setAttribute('onclick', `downloadImage(${i})`); - x.style.maxHeight = '100%'; - x.style.maxWidth = '100%'; - x.style.paddingTop = '1em'; - preview.appendChild(x) - preview.appendChild(downloadButton); + + x.className = 'image-preview'; + + const imageInnerBox = document.createElement('div'); + imageInnerBox.className = 'image-inner-box'; + const imageOuterBox = document.createElement('div'); + imageOuterBox.className = 'image-outer-box'; + imageOuterBox.setAttribute('onclick', `focusImage(${i})`); + imageOuterBox.appendChild(imageInnerBox); + imageInnerBox.appendChild(x); + imageInnerBox.appendChild(downloadButton); + preview.appendChild(imageOuterBox); }); } @@ -89,3 +148,6 @@ function addimage(file) { } } +const styleSheet = document.createElement('style'); +styleSheet.innerText = albumStyle; +document.head.appendChild(styleSheet); |