diff options
| author | dan <[email protected]> | 2023-06-18 23:02:27 -0400 |
|---|---|---|
| committer | dan <[email protected]> | 2023-06-18 23:02:27 -0400 |
| commit | f2eb91e6f19b511b600db377f6e0e14899028db1 (patch) | |
| tree | b8797e4d0ac52e8eb55db500c8076bdd2950a2e8 /demo.js | |
| parent | 1747e69763341abf1111d56e41919a68f9102791 (diff) | |
| download | photo-album-gen-f2eb91e6f19b511b600db377f6e0e14899028db1.tar.gz photo-album-gen-f2eb91e6f19b511b600db377f6e0e14899028db1.tar.bz2 photo-album-gen-f2eb91e6f19b511b600db377f6e0e14899028db1.zip | |
feat: images pop out into modal on-click
Diffstat (limited to 'demo.js')
| -rw-r--r-- | demo.js | 94 |
1 files changed, 78 insertions, 16 deletions
@@ -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); |