Diffstat (limited to 'internal/glightbox/html_renderer.go')
| -rw-r--r-- | internal/glightbox/html_renderer.go | 77 |
1 files changed, 39 insertions, 38 deletions
diff --git a/internal/glightbox/html_renderer.go b/internal/glightbox/html_renderer.go index ac34880..a9d066d 100644 --- a/internal/glightbox/html_renderer.go +++ b/internal/glightbox/html_renderer.go @@ -68,8 +68,7 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, var elements []string for i, img := range gallery.Images { - fullImageUrl := gallery.Namespace + img.URL - imageUrlSegments := strings.Split(fullImageUrl, ".") + imageUrlSegments := strings.Split(img.URL, ".") imageUrlWithoutExt := strings.Join(imageUrlSegments[:len(imageUrlSegments)-1], ".") imageUrlParts := strings.Split(imageUrlWithoutExt, "/") imageNameParts := strings.Split(imageUrlParts[len(imageUrlParts)-1], "-") @@ -111,19 +110,19 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, anchorlessCaptionHTML := r.anchorMatchRe.ReplaceAll(captionHTML, []byte("<span class=\"linklike\" $1 $3>$4</span>")) elements = append(elements, fmt.Sprintf(` - <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox grid-item %s grid-item-%s p-1" - data-gallery="gallery" data-title="%s" %s> + <a href="https://f003.backblazeb2.com/file/sayana-photos/full/%s" class="glightbox-%s grid-item %s grid-item-%s p-1" + data-gallery="gallery-%s" data-title="%s" %s> <picture> - <source media="(width < 800px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" /> - <source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" /> - <source media="(width < 3200px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" /> - <source media="(width < 4000px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" /> - <source media="(width >= 4000px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" /> - <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" /> + <source media="(width < 640px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-320p/%s.webp" /> + <source media="(width < 1120px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-560p/%s.webp" /> + <source media="(width < 1600px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" /> + <source media="(width < 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1200p/%s.webp" /> + <source media="(width >= 2400px)" srcset="https://f003.backblazeb2.com/file/sayana-photos/webp-1600p/%s.webp" /> + <img src="https://f003.backblazeb2.com/file/sayana-photos/webp-800p/%s.webp" /> </picture> <span class="grid-tooltip-text"><p>%s</p></span> <span class="grid-item-index">%d</span> - </a>`, fullImageUrl, strings.Join(tagClassList, " "), galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1)) + </a>`, img.URL, galleryID, strings.Join(tagClassList, " "), galleryID, galleryID, dayDate.Format("2006-01-02 15:04:05 -07:00"), dataDescriptionAttribute, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, imageUrlWithoutExt, anchorlessCaptionHTML, i+1)) if glightboxDescId != "" { elements = append(elements, fmt.Sprintf(` @@ -133,43 +132,45 @@ func (r *GLightboxHTMLRenderer) renderGLightbox(w util.BufWriter, source []byte, } } - w.WriteString(strings.ReplaceAll(` -<div class="items-center flex flex-col"> - <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%%] ml-auto mr-auto"> - <div class="grid masonry-grid-{id}"> - <div class="grid-sizer grid-sizer-{id}"></div> - `+strings.Join(elements, "\n")+` + w.WriteString(fmt.Sprintf(` +<div class="justify-content-center display-block m-1"> + <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto"> + <div class="grid masonry-grid-%s mx-auto"> + <div class="grid-sizer grid-sizer-%s"></div> + %s </div> - <hr class="border-t-3 border-dotted border-main-hard mt-1 mb-2 w-[80%%] ml-auto mr-auto"> -</div> + <hr class="border-t-3 border-dotted border-main-dark mt-1 mb-2 w-[80%%] ml-auto mr-auto"> +</div>`, galleryID, galleryID, strings.Join(elements, "\n"))) + w.WriteString(fmt.Sprintf(` <script> - var pckry_{id} = new Packery('.masonry-grid-{id}', { - itemSelector: '.grid-item-{id}', - columnWidth: '.grid-sizer-{id}', - percentPosition: false + var lightbox_%s = GLightbox({ + selector: '.glightbox-%s' }); - var imgLoad_{id}_timer; - var imgLoad_{id} = imagesLoaded('.masonry-grid-{id}'); + var msnry_%s = new Masonry('.masonry-grid-%s', { + itemSelector: '.grid-item-%s', + columnWidth: '.grid-sizer-%s', + percentPosition: true, + horizontalOrder: true + }); - function initMasonryLayout_{id}(tm) { - clearTimeout(imgLoad_{id}_timer); - imgLoad_{id}_timer = setTimeout(() => pckry_{id}.layout(), 100); - } + var imgLoad_%s_timer; + var imgLoad_%s = imagesLoaded('.masonry-grid-%s'); - imgLoad_{id}.on('progress', initMasonryLayout_{id}); + function initMasonryLayout_%s() { + clearTimeout(imgLoad_%s_timer); + imgLoad_%s_timer = setTimeout(() => msnry_%s.layout(), 500); + } - window.addEventListener('resize', initMasonryLayout_{id}); + imgLoad_%s.on('progress', initMasonryLayout_%s); document.addEventListener('popout', (e) => { - window.removeEventListener('resize', initMasonryLayout_{id}); - imgLoad_{id}.off('progress', initMasonryLayout_{id}); - initMasonryLayout_{id} = null; - imgLoad_{id} = null; - }, {once: true}); -</script> -`, "{id}", galleryID)) + imgLoad_%s.off('progress', initMasonryLayout_%s); + initMasonryLayout_%s = null; + imgLoad_%s = null; + }); +</script>`, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID, galleryID)) } return ast.WalkContinue, nil |