replaced pinzoom.js with lightgallery.js overlay for improved zoom view

2026-07-17 16:34:46 +00:00 · 2021-01-26 20:17:43 -06:00 · 2021-01-26 20:17:43 -06:00 · acc3f0b732
commit acc3f0b732
parent 7c72cbea5a
22 changed files with 2062 additions and 164 deletions
--- a/README.md
+++ b/README.md
@ -51,6 +51,7 @@ There is trivial security on the web pages to allow for multiple user support.

 - css framework > [bulma.io](https://www.bulma.io)
 - js framework > [reef](https://reefjs.com)
+- pin zoom > [lightgallery.js](https://sachinchoolur.github.io/lightgallery.js/)
 - boards icon > [squares by Andrejs Kirma from the Noun Project](https://thenounproject.com/term/squares/1160031/)
 - pin icon > [pinned by Gregor Cresnar from the Noun Project](https://thenounproject.com/term/pinned/1560993/)
 - web icon > [website by Supriadi Sihotang from the Noun Project](https://thenounproject.com/term/website/2868662/)
--- a/TODO.md
+++ b/TODO.md
@ -11,5 +11,5 @@
    - sqlite3 may need to be compiled, but seems to happen automatically (albeit slow)
 - support receiving data urls
 - support uploading images
- left/right arrow links on pinzoom
-
+- ~~left/right arrow links on pinzoom~~ (replaced with lightgallery)
+- enable drag up/down to close lightgallery
--- a/static/app.js
+++ b/static/app.js
@ -46,7 +46,6 @@ app.addSetter('load.user', async (data) => {
 });

 app.addSetter("hash.update", (data) => {
-    console.log("hash update");
    data.hash = parseQueryString(window.location.hash.substr(1));
    
    if ( data.hash.board ){
@ -148,8 +147,7 @@ document.addEventListener('click', (el) => {
    // we always want to close the menu on click.  if we clicked an item,
    // that will still trigger below
    let burger = el.target.closest('.navbar-burger');
-    console.log("the burger is: ", burger);
-    if ( !burger ){
+    if ( !burger && store.data.menuOpen ){
        store.do('navbar.closeMenu');
    }
    
@ -162,6 +160,14 @@ document.addEventListener('click', (el) => {
            } catch (err){
                console.error(`Error invoking ${action}:`, err);
            }
+        } 
+    } else {
+        let targetx = el.target.closest('[data-onclick-x]'); // onclick-x attempts to invoke a function on window instead of a setter.  this is useful to bypass re-rendering
+        if ( targetx ){
+            let actionx = targetx.getAttribute('data-onclick-x');
+            if ( actionx ){
+                window[actionx](targetx);
+            }
        }
    }
    
--- a/static/client.css
+++ b/static/client.css
@ -293,4 +293,87 @@
 .navbar-item span, .navbar-item img{
    line-height: 24px;
    vertical-align: middle;
+}
+
+.modal-background {
+    background-color:#000;
+    opacity: 0.9;
+}
+
+/* lightgallery customizations */
+.lg-actions .lg-next.disabled, .lg-actions .lg-prev.disabled {
+    opacity: 0;
+}
+
+.lg-outer .lg-image {
+    width: 90%!important;
+    height: 90%!important;
+    object-fit: contain;
+}
+
+.supports-touch .lg-prev, .supports-touch .lg-next{
+    display: none;
+}
+
+.lg-backdrop.in {
+    opacity: 0.9;
+}
+
+#lg-edit {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+NTE8L3RpdGxlPjxwYXRoIGQ9Ik04NC44NTAxMiw1MFY4MS43NDUxMkExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw3MS41OTUyNCw5NUgxOC4yNTQ5MUExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw1LDgxLjc0NTEyVjI4LjQwNTI4QTEzLjI3MDEyLDEzLjI3MDEyLDAsMCwxLDE4LjI1NDkxLDE1LjE1MDRINTBhMi41LDIuNSwwLDAsMSwwLDVIMTguMjU0OTFBOC4yNjQyMyw4LjI2NDIzLDAsMCwwLDEwLDI4LjQwNTI4VjgxLjc0NTEyQTguMjY0MjQsOC4yNjQyNCwwLDAsMCwxOC4yNTQ5MSw5MEg3MS41OTUyNGE4LjI2NDIzLDguMjY0MjMsMCwwLDAsOC4yNTQ4OC04LjI1NDg5VjUwYTIuNSwyLjUsMCwwLDEsNSwwWk04OS4xNDg0Niw2LjIzNzkyYTQuMjI2NjEsNC4yMjY2MSwwLDAsMC01Ljk3NzI5LDBsLTMzLjk2MjksMzMuOTYzTDU5Ljc5OTE2LDUwLjc5MTc2bDMzLjk2Mjg5LTMzLjk2M2E0LjIyNjUzLDQuMjI2NTMsMCwwLDAsMC01Ljk3NzIzWk00My42MjM4LDU4LjMxMjg3bDEzLjAwOTQtNC4zNTUxNkw0Ni4wNDIyNiw0My4zNjY4M2wtNC4zNTUxLDEzLjAwOTRBMS41MzAwNSwxLjUzMDA1LDAsMCwwLDQzLjYyMzgsNTguMzEyODdaIj48L3BhdGg+PC9zdmc+");
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    background-position: 17px 13px;
+    opacity: 0.7;
+    transition: opacity 0.2s linear;
+}
+
+#lg-edit:hover {
+    opacity: 1;
+}
+
+#lg-siteUrl {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4bWxuczp4b2RtPSJodHRwOi8vd3d3LmNvcmVsLmNvbS9jb3JlbGRyYXcvb2RtLzIwMDMiIHhtbDpzcGFjZT0icHJlc2VydmUiIHZlcnNpb249IjEuMSIgc3R5bGU9InNoYXBlLXJlbmRlcmluZzpnZW9tZXRyaWNQcmVjaXNpb247dGV4dC1yZW5kZXJpbmc6Z2VvbWV0cmljUHJlY2lzaW9uO2ltYWdlLXJlbmRlcmluZzpvcHRpbWl6ZVF1YWxpdHk7IiB2aWV3Qm94PSIwIDAgMzIwIDMxOS45OSIgeD0iMHB4IiB5PSIwcHgiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIj48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPgogICAKICAgIC5maWwwIHtmaWxsOiNGRkZGRkY7ZmlsbC1ydWxlOm5vbnplcm99CiAgIAogIDwvc3R5bGU+PC9kZWZzPjxnPjxwYXRoIGNsYXNzPSJmaWwwIiBkPSJNMTYwIDI4My4zM2MzNC4wNiwwIDY0LjksLTEzLjgxIDg3LjIxLC0zNi4xMiAyMi4zMSwtMjIuMzEgMzYuMTIsLTUzLjE2IDM2LjEyLC04Ny4yMSAwLC0zNC4wNiAtMTMuODEsLTY0Ljg5IC0zNi4xMiwtODcuMjEgLTIyLjMxLC0yMi4zMSAtNTMuMTYsLTM2LjEzIC04Ny4yMSwtMzYuMTMgLTM0LjA2LDAgLTY0LjksMTMuODEgLTg3LjIxLDM2LjEzIC0yMi4zMSwyMi4zMSAtMzYuMTMsNTMuMTUgLTM2LjEzLDg3LjIxIDAsMzQuMDYgMTMuODEsNjQuOSAzNi4xMyw4Ny4yMSAyMi4zMSwyMi4zMSA1My4xNSwzNi4xMiA4Ny4yMSwzNi4xMnptMTAxLjM1IC0yMS45OGMtMjUuOTQsMjUuOTMgLTYxLjc4LDQxLjk4IC0xMDEuMzUsNDEuOTggLTM5LjU4LDAgLTc1LjQyLC0xNi4wNSAtMTAxLjM1LC00MS45OCAtMjUuOTQsLTI1Ljk0IC00MS45OCwtNjEuNzggLTQxLjk4LC0xMDEuMzUgMCwtMzkuNTggMTYuMDUsLTc1LjQyIDQxLjk4LC0xMDEuMzUgMjUuOTMsLTI1Ljk0IDYxLjc3LC00MS45OCAxMDEuMzUsLTQxLjk4IDM5LjU4LDAgNzUuNDIsMTYuMDUgMTAxLjM1LDQxLjk4IDI1LjkzLDI1LjkzIDQxLjk4LDYxLjc3IDQxLjk4LDEwMS4zNSAwLDM5LjU4IC0xNi4wNSw3NS40MiAtNDEuOTgsMTAxLjM1eiI+PC9wYXRoPjxwYXRoIGNsYXNzPSJmaWwwIiBkPSJNMjYuNjYgMTY5Ljg2Yy01LjUsMCAtOS45NiwtNC40NiAtOS45NiwtOS45NiAwLC01LjUgNC40NiwtOS45NiA5Ljk2LC05Ljk2bDI2Ni42NyAtMS4wNGM1LjUsMCA5Ljk2LDQuNDYgOS45Niw5Ljk2IDAsNS41IC00LjQ2LDkuOTYgLTkuOTYsOS45NmwtMjY2LjY3IDEuMDR6Ij48L3BhdGg+PHBhdGggY2xhc3M9ImZpbDAiIGQ9Ik0xNDkuNTIgMjYuNjZjMCwtNS41IDQuNDYsLTkuOTYgOS45NiwtOS45NiA1LjUsMCA5Ljk2LDQuNDYgOS45Niw5Ljk2bDEuMDQgMjY2LjY3YzAsNS41IC00LjQ2LDkuOTYgLTkuOTYsOS45NiAtNS41LDAgLTkuOTYsLTQuNDYgLTkuOTYsLTkuOTZsLTEuMDQgLTI2Ni42N3oiPjwvcGF0aD48cGF0aCBjbGFzcz0iZmlsMCIgZD0iTTE2MCAyODMuMzNjMTQuMzIsMCAyNy44OSwtMTIuODEgMzguMjQsLTMzLjUxIDExLjM5LC0yMi43NyAxOC40MywtNTQuNTIgMTguNDMsLTg5LjgzIDAsLTM1LjMxIC03LjA1LC02Ny4wNiAtMTguNDMsLTg5LjgzIC0xMC4zNSwtMjAuNyAtMjMuOTEsLTMzLjUxIC0zOC4yNCwtMzMuNTEgLTE0LjMyLDAgLTI3Ljg5LDEyLjgxIC0zOC4yNCwzMy41MSAtMTEuMzksMjIuNzcgLTE4LjQzLDU0LjUyIC0xOC40Myw4OS44MyAwLDM1LjMxIDcuMDUsNjcuMDYgMTguNDMsODkuODMgMTAuMzUsMjAuNyAyMy45MSwzMy41MSAzOC4yNCwzMy41MXptNTYuMDUgLTI0LjZjLTEzLjc3LDI3LjU2IC0zMy41NSw0NC42IC01Ni4wNSw0NC42IC0yMi41LDAgLTQyLjI4LC0xNy4wNSAtNTYuMDUsLTQ0LjYgLTEyLjc0LC0yNS40NyAtMjAuNjIsLTYwLjQxIC0yMC42MiwtOTguNzMgMCwtMzguMzMgNy44OCwtNzMuMjYgMjAuNjIsLTk4LjczIDEzLjc3LC0yNy41NiAzMy41NSwtNDQuNiA1Ni4wNSwtNDQuNiAyMi41LDAgNDIuMjgsMTcuMDUgNTYuMDUsNDQuNiAxMi43NCwyNS40NyAyMC42Miw2MC40MSAyMC42Miw5OC43MyAwLDM4LjMzIC03Ljg4LDczLjI2IC0yMC42Miw5OC43M3oiPjwvcGF0aD48cGF0aCBjbGFzcz0iZmlsMCIgZD0iTTQ1LjcgMTA0LjA0Yy01LjUsMC4wMiAtOS45OCwtNC40MiAtMTAsLTkuOTIgLTAuMDIsLTUuNSA0LjQyLC05Ljk4IDkuOTIsLTEwbDIyOC42OCAtMS4wNGM1LjUsLTAuMDIgOS45OCw0LjQyIDEwLDkuOTIgMC4wMiw1LjUgLTQuNDIsOS45OCAtOS45MiwxMGwtMjI4LjY4IDEuMDR6Ij48L3BhdGg+PHBhdGggY2xhc3M9ImZpbDAiIGQ9Ik00NS43IDIzNy40MmMtNS41LDAuMDIgLTkuOTgsLTQuNDIgLTEwLC05LjkyIC0wLjAyLC01LjUgNC40MiwtOS45OCA5LjkyLC0xMGwyMjguNjggLTEuMDRjNS41LC0wLjAyIDkuOTgsNC40MiAxMCw5LjkyIDAuMDIsNS41IC00LjQyLDkuOTggLTkuOTIsMTBsLTIyOC42OCAxLjA0eiI+PC9wYXRoPjwvZz48L3N2Zz4=");
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    background-position: 16px 14px;
+    opacity: 0.7;
+    transition: opacity 0.2s linear;
+}
+
+#lg-siteUrl:hover {
+    opacity: 1;
+}
+
+#lg-deletePin {
+    background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+dHJhc2g8L3RpdGxlPjxwYXRoIGQ9Ik05MC42OSwxMi4yMlYxOGEyLjkxLDIuOTEsMCwwLDEtMi45MSwyLjkxSDEyLjIyQTIuOTEsMi45MSwwLDAsMSw5LjMxLDE4VjEyLjIyYTIuOTEsMi45MSwwLDAsMSwyLjkxLTIuOTFIMzRsMS43MS0zLjRBNC43Miw0LjcyLDAsMCwxLDM5LjU5LDMuNUg2MC4zOGE0Ljc4LDQuNzgsMCwwLDEsMy45LDIuNDFMNjYsOS4zMWgyMS44QTIuOTEsMi45MSwwLDAsMSw5MC42OSwxMi4yMlpNMTUuMTMsMjYuNzVIODQuODh2NjFhOC43Miw4LjcyLDAsMCwxLTguNzIsOC43MkgyMy44NGE4LjcyLDguNzIsMCwwLDEtOC43Mi04LjcyWk0yOS42Niw4MmEyLjkxLDIuOTEsMCwwLDAsNS44MSwwVjQxLjI4YTIuOTEsMi45MSwwLDAsMC01LjgxLDBabTE3LjQ0LDBhMi45MSwyLjkxLDAsMCwwLDUuODEsMFY0MS4yOGEyLjkxLDIuOTEsMCwwLDAtNS44MSwwWm0xNy40NCwwYTIuOTEsMi45MSwwLDAsMCw1LjgxLDBWNDEuMjhhMi45MSwyLjkxLDAsMCwwLTUuODEsMFoiPjwvcGF0aD48L3N2Zz4=");
+    background-repeat: no-repeat;
+    background-size: 20px 20px;
+    background-position: 16px 14px;
+    opacity: 0.7;
+    transition: opacity 0.2s linear;
+}
+
+#lg-deletePin:hover{
+    opacity: 1;
+}
+
+.lg-control-hide {
+    display: none;
+}
+
+
+.lg-sub-html {
+    opacity: 1;
+    transition: .35s cubic-bezier(0,0,.25,1) 0s, opacity .35s cubic-bezier(0,0,.25,1) 0s, color .2s linear;
+}
+
+.lg-touch-hide-items .lg-sub-html{
+    opacity: 0;
+    transform: translate3d(0,10px,0);
+}
+
+.lg-touch-hide-items .lg-toolbar {
+    opacity: 0;
+    transform: translate3d(0,-10px,0);
 }
--- a/static/components/about.js
+++ b/static/components/about.js
@ -28,6 +28,8 @@ app.addComponent('aboutModal', (store) => { return new Reef("#aboutModal", {
                        <br />
                        &nbsp;ui framework &raquo; <a href="https://reefjs.com">reef</a>
                        <br />
+                        &nbsp;pin zoom &raquo; <a href="https://sachinchoolur.github.io/lightgallery.js/">lightgallery.js</a>
+                        <br />
                        &nbsp;boards icon &raquo; <a href="https://thenounproject.com/term/squares/1160031/">squares by Andrejs Kirma from the Noun Project</a>
                        <br />
                        &nbsp;pin icon &raquo; <a href="https://thenounproject.com/term/pinned/1560993/">pinned by Gregor Cresnar from the Noun Project</a>
--- a/static/components/addpin.js
+++ b/static/components/addpin.js
@ -24,7 +24,6 @@ app.addSetter('addPinModal.close', (data) => {
 });

 app.addSetter('addPinModal.updatePreview', (data) => {
-    console.log("update preview");
    if ( data.addPinModal.imageUrl.startsWith("http") ){
        ( async() => {
            let res = await fetch(data.addPinModal.imageUrl, {
--- a/static/components/brickwall.js
+++ b/static/components/brickwall.js
@ -3,6 +3,119 @@ app.addSetter('brickwall.toggleHiddenBoards', (data) => {
    window.localStorage.showHiddenBoards = data.showHiddenBoards;
 });

+app.addSetter("brickwall.editPin", (data) => {
+
+    let index = getLightGalleryIndex();
+    
+
+    data.editPinModal.pin = store.data.board.pins[index];
+    
+    store.do('editPinModal.open');
+
+    closeLightGallery();
+});
+
+app.addSetter("brickwall.deletePin", async (data) => {
+    if ( !confirm("Are you sure you want to delete this pin?" ) ){
+        return;
+    }
+
+    store.do('loader.show');
+
+    let index = getLightGalleryIndex();
+
+    let pinId = data.board.pins[index].id;
+
+    data.board.pins.splice(index,1);
+
+    // store.do("pinZoomModal.close");
+    closeLightGallery();
+
+    let res = await fetch(`api/pins/${pinId}`, {
+        method: 'DELETE'
+    });
+
+    if ( res.status == 200 ){
+        console.log(`deleted pin#${pinId}`);
+    } else {
+        console.error(`error deleting pin#${pinId}`);
+    }
+
+    store.do('loader.hide');
+});
+
+var supportsTouch = 'ontouchstart' in window;
+if ( supportsTouch ){
+    document.body.classList.add("supports-touch");
+}
+let lightgalleryElement = document.getElementById("lightgallery");
+let lightgalleryOpen = false;
+
+function openLightGallery(pinId){
+
+    let data = store.data;
+
+    let elements = [];
+    let index = 0;
+    
+    for ( let i = 0; i < data.board.pins.length; ++i ){
+        elements.push({
+            src: getOriginalImagePath(data.board.pins[i].id),
+            subHtml: data.board.pins[i].description,
+            siteUrl: data.board.pins[i].siteUrl
+        });
+        if ( data.board.pins[i].id == pinId ){
+            index = i;
+        }
+    }
+
+    let options = {
+        speed: 333,
+        loop: false,
+        hideControlOnEnd: true,
+        preload: 3,
+        slideEndAnimatoin: false,
+        dynamic: true,
+        dynamicEl: elements,
+        index: index,
+        download: false,
+        startClass: '', // disable zoom
+        backdropDuration: 0 // disable animate in
+    };
+
+    lightGallery(lightgalleryElement, options );    
+    lightgalleryOpen = true;
+}
+
+function closeLightGallery(){
+    lightgalleryOpen = false;
+    let uid = lightgalleryElement.getAttribute("lg-uid");
+    window.lgData[uid].destroy();
+}
+
+function getLightGalleryIndex(){
+    let uid = lightgalleryElement.getAttribute("lg-uid");
+    return window.lgData[uid].index;
+}
+
+document.getElementById("lightgallery").addEventListener("onCloseAfter", () => {
+
+    let uid = lightgalleryElement.getAttribute("lg-uid");
+    if ( uid ){
+        window.lgData[uid].destroy(true);
+    }
+
+});
+
+document.getElementById("lightgallery").addEventListener("onSlideClick", () => {
+    let lgOuter = document.querySelector(".lg-outer");
+    if ( lgOuter.classList.contains("lg-touch-hide-items") ){
+        lgOuter.classList.remove("lg-touch-hide-items");
+    } else {
+        lgOuter.classList.add("lg-touch-hide-items");
+    }
+});
+
 app.addComponent('brickwall', (store) => { return new Reef('#brickwall', {

    store: store,
@ -82,8 +195,8 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', {
        function createBrickForPin(board, pin){
            return  { height: pin.thumbnailHeight, template: /*html*/`
            <div class="brick" >
-                <a data-pinid="${pin.id}" data-onclick="pinZoomModal.open">
-                    <img class="thumb" src="${getThumbnailImagePath(pin.id)}" width="${pin.thumbnailWidth}" height="${pin.thumbnailHeight}" />
+                <a data-pinid="${pin.id}" onclick="openLightGallery(${pin.id})" >
+                    <img class="thumb" src="${getThumbnailImagePath(pin.id)}" width="${pin.thumbnailWidth}" height="${pin.thumbnailHeight}"/>
                </a>
            </div>
            `};
--- a/static/components/editboard.js
+++ b/static/components/editboard.js
@ -62,7 +62,6 @@ app.addSetter('editBoardModal.delete', async (data) => {


    let idx = getBoardIndexById(boardId);
-    console.log(idx);
    if ( idx >= 0 ){
        data.boards.splice(idx, 1);
    }
--- a/static/components/editpin.js
+++ b/static/components/editpin.js
@ -5,9 +5,13 @@ app.addSetter('editPinModal.open', (data) => {
 app.addSetter('editPinModal.close', (data) => {
    data.editPinModal.active = false;

+    let pinId = data.editPinModal.pin.id;
+
    data.editPinModal.pin = null;
    data.editPinModal.newBoardName = null;
    data.editPinModal.saveInProgress = false;
+
+    openLightGallery(pinId);
 });

 app.addGetter('editPinModal.isValid', (data) => {
@ -88,8 +92,6 @@ app.addSetter("editPinModal.save", async (data) => {
        data.board.pins[idx].boardId = boardId;
        data.board.pins[idx].siteUrl = pin.siteUrl;
        data.board.pins[idx].description = pin.description;
-        
-        console.log(data.board.pins[idx]);

        store.do("editPinModal.close");
    } else {
@ -111,13 +113,8 @@ app.addComponent('editPinModal', (store) => { return new Reef("#editPinModal", {
            options += `<option value="${data.boards[i].id}">${data.boards[i].name}</option>`;
        }

-        console.log("render", data);
-
-        console.log("set new board field");
        let newBoardField = '';
        if ( data.editPinModal.pin && data.editPinModal.pin.boardId == "new" ){
-        // if ( true ) {
-            console.log("is new");
            newBoardField = /*html*/`
            <div class="field">
                <label class="label">Board Name</label>
@ -126,13 +123,7 @@ app.addComponent('editPinModal', (store) => { return new Reef("#editPinModal", {
                </div>
            </div>
            `;
-        }
-
-        if ( data.editPinModal.pin ){
-        console.log(getThumbnailImagePath(data.editPinModal.pin.id));
-        }
-
-        
+        }        

        return /*html*/`
        <div class="modal ${data.editPinModal.active ? 'is-active' : ''}">
--- a/static/components/pinzoom.js
+++ b/static/components/pinzoom.js
@ -1,176 +1,148 @@
-function getBoardIndexById(id){
-    let idx = -1;
-    for ( let i = 0; i < store.data.boards.length; ++i ){
-        if ( store.data.boards[i].id == id ){
-            idx = i;
-        }
-    }
-    return idx;
-}
+// no longer used, to be deleted

-function getBoardById(id){
-    return store.data.boards[getBoardIndexById(id)];
-}
-
-function getPinIndexById(id){
-    let idx = -1;
-    for ( let i = 0; i < store.data.board.pins.length; ++i ){
-        if ( store.data.board.pins[i].id == id ){
-            idx = i;
-        }
-    }
-    return idx;
-}
-
-function getPinById(id){
-    return store.data.board.pins[getPinIndexById(id)];
-}
-
-
-app.addSetter('pinZoomModal.open', (data, el) => {
+// app.addSetter('pinZoomModal.open', (data, el) => {
        
-    let pinId = el.getAttribute("data-pinid");
+//     let pinId = el.getAttribute("data-pinid");

-    if( pinId ){
-        let idx = getPinIndexById(pinId);
+//     if( pinId ){
+//         let idx = getPinIndexById(pinId);

-        data.pinZoomModal.pin = data.board.pins[idx];
-        data.pinZoomModal.active = true;
-    }
+//         data.pinZoomModal.pin = data.board.pins[idx];
+//         data.pinZoomModal.active = true;
+//     }
    
-});
+// });

-app.addSetter('pinZoomModal.close', (data) => {
-    data.pinZoomModal.active = false;
-    data.pinZoomModal.pinId = null;
-    data.pinZoomModal.fullDescriptionOpen = false;
-});
+// app.addSetter('pinZoomModal.close', (data) => {
+//     data.pinZoomModal.active = false;
+//     data.pinZoomModal.pinId = null;
+//     data.pinZoomModal.fullDescriptionOpen = false;
+// });


-app.addSetter('pinZoomModal.moveLeft', (data) => {
+// app.addSetter('pinZoomModal.moveLeft', (data) => {

-    let idx = getPinIndexById(data.pinZoomModal.pin.id);
+//     let idx = getPinIndexById(data.pinZoomModal.pin.id);
    
-    if ( idx > 0 ){
-        data.pinZoomModal.pin = data.board.pins[idx-1];
-    }
+//     if ( idx > 0 ){
+//         data.pinZoomModal.pin = data.board.pins[idx-1];
+//     }

-});
+// });

-app.addSetter('pinZoomModal.moveRight', (data) => {
+// app.addSetter('pinZoomModal.moveRight', (data) => {

-    let idx = getPinIndexById(data.pinZoomModal.pin.id);
+//     let idx = getPinIndexById(data.pinZoomModal.pin.id);
    
-    if ( idx >= 0 && (idx < data.board.pins.length-1) ){
-        data.pinZoomModal.pin = data.board.pins[idx+1];
-    }
-});
+//     if ( idx >= 0 && (idx < data.board.pins.length-1) ){
+//         data.pinZoomModal.pin = data.board.pins[idx+1];
+//     }
+// });

-app.addSetter('pinZoomModal.showFullDescription', (data) => {
-    data.pinZoomModal.fullDescriptionOpen = true;
-});
+// app.addSetter('pinZoomModal.showFullDescription', (data) => {
+//     data.pinZoomModal.fullDescriptionOpen = true;
+// });

-app.addSetter('pinZoomModal.hideFullDescription', (data) => {
-    data.pinZoomModal.fullDescriptionOpen = false;
-});
+// app.addSetter('pinZoomModal.hideFullDescription', (data) => {
+//     data.pinZoomModal.fullDescriptionOpen = false;
+// });

-app.addSetter('pinZoomModal.deletePin', async (data) => {
-    if ( !confirm("Are you sure you want to delete this pin?" ) ){
-        return;
-    }
+// app.addSetter('pinZoomModal.deletePin', async (data) => {
+//     if ( !confirm("Are you sure you want to delete this pin?" ) ){
+//         return;
+//     }

-    store.do('loader.show');
+//     store.do('loader.show');

-    let pinId = data.pinZoomModal.pin.id;
+//     let pinId = data.pinZoomModal.pin.id;

-    let idx = getPinIndexById(pinId);
-    if ( idx >= 0 ){
-        data.board.pins.splice(idx,1);
-    }
+//     let idx = getPinIndexById(pinId);
+//     if ( idx >= 0 ){
+//         data.board.pins.splice(idx,1);
+//     }

-    store.do("pinZoomModal.close");
+//     store.do("pinZoomModal.close");

-    let res = await fetch(`api/pins/${pinId}`, {
-        method: 'DELETE'
-    });
+//     let res = await fetch(`api/pins/${pinId}`, {
+//         method: 'DELETE'
+//     });

-    if ( res.status == 200 ){
-        console.log(`deleted pin#${pinId}`);
-    } else {
-        console.error(`error deleting pin#${pinId}`);
-    }
+//     if ( res.status == 200 ){
+//         console.log(`deleted pin#${pinId}`);
+//     } else {
+//         console.error(`error deleting pin#${pinId}`);
+//     }

-    store.do('loader.hide');
-});
+//     store.do('loader.hide');
+// });

-app.addSetter('pinZoomModal.editPin', (data) => {
+// app.addSetter('pinZoomModal.editPin', (data) => {

-    // intentially read from store so we get an immutable copy
-    data.editPinModal.pin = store.data.pinZoomModal.pin;
+//     // intentially read from store so we get an immutable copy
+//     data.editPinModal.pin = store.data.pinZoomModal.pin;
    
-    console.log(data.editPinModal.pin);
-    store.do('editPinModal.open');
+//     store.do('editPinModal.open');

-});
+// });

-app.addComponent('pinZoomModal', (store) => { return new Reef("#pinZoomModal", {
-    store: store,
-    template: (data) => {
+// app.addComponent('pinZoomModal', (store) => { return new Reef("#pinZoomModal", {
+//     store: store,
+//     template: (data) => {

-        let siteLink = '';
-        if ( data.pinZoomModal.pin && data.pinZoomModal.pin.siteUrl ){
-            siteLink = `<a class="pinZoomModal-site-link" href="${data.pinZoomModal.pin.siteUrl}"></a>`;
-        }
+//         let siteLink = '';
+//         if ( data.pinZoomModal.pin && data.pinZoomModal.pin.siteUrl ){
+//             siteLink = `<a class="pinZoomModal-site-link" href="${data.pinZoomModal.pin.siteUrl}"></a>`;
+//         }

-        let pinZoomDescription = '';
-        if ( data.pinZoomModal.pin && data.pinZoomModal.pin.description && data.pinZoomModal.pin.description.length > 0 ){
-            pinZoomDescription = `
-            <div class="pinZoomModal-description" data-onclick="pinZoomModal.showFullDescription">${data.pinZoomModal.pin.description}</div>
+//         let pinZoomDescription = '';
+//         if ( data.pinZoomModal.pin && data.pinZoomModal.pin.description && data.pinZoomModal.pin.description.length > 0 ){
+//             pinZoomDescription = `
+//             <div class="pinZoomModal-description" data-onclick="pinZoomModal.showFullDescription">${data.pinZoomModal.pin.description}</div>
                
-            <div class="pinZoomModal-full-description ${data.pinZoomModal.fullDescriptionOpen ? 'pinZoomModal-full-description-open' : ''}">
-                <div>
-                    <a class="pinZoomModal-hide-full-description" data-onclick="pinZoomModal.hideFullDescription">&nbsp;</a>
-                </div>
-                <div class="content">
-                    ${data.pinZoomModal.pin.description}
-                </div>
-            </div>
-            `;
-        }
+//             <div class="pinZoomModal-full-description ${data.pinZoomModal.fullDescriptionOpen ? 'pinZoomModal-full-description-open' : ''}">
+//                 <div>
+//                     <a class="pinZoomModal-hide-full-description" data-onclick="pinZoomModal.hideFullDescription">&nbsp;</a>
+//                 </div>
+//                 <div class="content">
+//                     ${data.pinZoomModal.pin.description}
+//                 </div>
+//             </div>
+//             `;
+//         }

-        let isFirst = true;
-        let isLast = true;
+//         let isFirst = true;
+//         let isLast = true;

-        if ( data.pinZoomModal.pin && data.board ){
-            let idx = getPinIndexById(data.pinZoomModal.pin.id);
-            isFirst = idx == 0;
-            isLast = idx == (data.board.pins.length - 1);
-        }
+//         if ( data.pinZoomModal.pin && data.board ){
+//             let idx = getPinIndexById(data.pinZoomModal.pin.id);
+//             isFirst = idx == 0;
+//             isLast = idx == (data.board.pins.length - 1);
+//         }


-        return /*html*/`
-            <div class="modal ${data.pinZoomModal.active ? 'is-active' : ''}">
-                <div class="modal-background" data-onclick="pinZoomModal.close"></div>
-                <div class="modal-content">
-                    <p>
-                        <img src="${data.pinZoomModal.active ? getOriginalImagePath(data.pinZoomModal.pin.id) : ''}" />
-                    </p>                   
-                </div>
-                <button class="modal-close is-large" aria-label="close" data-onclick="pinZoomModal.close"></button>
-                ${siteLink}
-                <a class="pinZoomModal-edit" data-onclick="pinZoomModal.editPin"></a>
-                <a class="pinZoomModal-delete" data-onclick="pinZoomModal.deletePin"></a>
+//         return /*html*/`
+//             <div class="modal ${data.pinZoomModal.active ? 'is-active' : ''}">
+//                 <div class="modal-background" data-onclick="pinZoomModal.close"></div>
+//                 <div class="modal-content">
+//                     <p>
+//                         <img src="${data.pinZoomModal.active ? getOriginalImagePath(data.pinZoomModal.pin.id) : ''}" />
+//                     </p>                   
+//                 </div>
+//                 <button class="modal-close is-large" aria-label="close" data-onclick="pinZoomModal.close"></button>
+//                 ${siteLink}
+//                 <a class="pinZoomModal-edit" data-onclick="pinZoomModal.editPin"></a>
+//                 <a class="pinZoomModal-delete" data-onclick="pinZoomModal.deletePin"></a>
                
-                ${pinZoomDescription}
+//                 ${pinZoomDescription}
                
-                <div data-onclick="pinZoomModal.moveLeft" id="pinZoomModal-moveLeft" style="${isFirst ? 'display: none;' : '' }">
-                    <div style=""></div>
-                </div>
-                <div data-onclick="pinZoomModal.moveRight" id="pinZoomModal-moveRight" style="${isLast ? 'display: none;' : '' }">
-                    <div style=""></div>
-                </div>
-            </div>
-        `;
-    }
+//                 <div data-onclick="pinZoomModal.moveLeft" id="pinZoomModal-moveLeft" style="${isFirst ? 'display: none;' : '' }">
+//                     <div style=""></div>
+//                 </div>
+//                 <div data-onclick="pinZoomModal.moveRight" id="pinZoomModal-moveRight" style="${isLast ? 'display: none;' : '' }">
+//                     <div style=""></div>
+//                 </div>
+//             </div>
+//         `;
+//     }
    
-}); });
+// }); });
--- a/static/index.html
+++ b/static/index.html
@ -17,11 +17,15 @@
        <meta name="theme-color" content="#ffffff">

        <link rel="stylesheet" href="pub/bulma-custom.css" />
+        <link rel="stylesheet" href="lightgallery/css/lightgallery.min.css" />
        <link rel="stylesheet" href="client.css" />               
+        <script src="lightgallery/js/lightgallery-custom.js"></script>
    </head>
    <body>
        <div id="app"></div>

+        <div id="lightgallery"></div>
+
        <script src="reef.min.js"></script>
  
        <script src="reef-bootstrap.js"></script>
@ -31,7 +35,7 @@

        <script src="components/navbar.js"></script>
        <script src="components/brickwall.js"></script>
-        <script src="components/pinzoom.js"></script>
+        <!-- <script src="components/pinzoom.js"></script> -->
        <script src="components/addpin.js"></script>
        <script src="components/editboard.js"></script>
        <script src="components/editpin.js"></script>
--- a/static/lightgallery/css/lightgallery.min.css
+++ b/static/lightgallery/css/lightgallery.min.css
--- a/static/lightgallery/fonts/lg.svg
+++ b/static/lightgallery/fonts/lg.svg
@ -0,0 +1,51 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg">
+<metadata>
+<json>
+<![CDATA[
+{
+	"fontFamily": "lg",
+	"majorVersion": 1,
+	"minorVersion": 0,
+	"fontURL": "https://github.com/sachinchoolur/lightGallery",
+	"copyright": "sachin",
+	"license": "MLT",
+	"licenseURL": "http://opensource.org/licenses/MIT",
+	"description": "Font generated by IcoMoon.",
+	"version": "Version 1.0",
+	"fontId": "lg",
+	"psName": "lg",
+	"subFamily": "Regular",
+	"fullName": "lg"
+}
+]]>
+</json>
+</metadata>
+<defs>
+<font id="lg" horiz-adv-x="1024">
+<font-face units-per-em="1024" ascent="960" descent="-64" />
+<missing-glyph horiz-adv-x="1024" />
+<glyph unicode="&#x20;" horiz-adv-x="512" d="" />
+<glyph unicode="&#xe01a;" glyph-name="pause_circle_outline" data-tags="pause_circle_outline" d="M554 256.667v340h86v-340h-86zM512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM384 256.667v340h86v-340h-86z" />
+<glyph unicode="&#xe01d;" glyph-name="play_circle_outline" data-tags="play_circle_outline" d="M512 84.667q140 0 241 101t101 241-101 241-241 101-241-101-101-241 101-241 241-101zM512 852.667q176 0 301-125t125-301-125-301-301-125-301 125-125 301 125 301 301 125zM426 234.667v384l256-192z" />
+<glyph unicode="&#xe033;" glyph-name="stack-2" data-tags="stack-2" d="M384 853.334h426.667q53 0 90.5-37.5t37.5-90.5v-426.667q0-53-37.5-90.5t-90.5-37.5h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 53 37.5 90.5t90.5 37.5zM170.667 675.334v-547.333q0-17.667 12.5-30.167t30.167-12.5h547.333q-13.333-37.667-46.333-61.5t-74.333-23.833h-426.667q-53 0-90.5 37.5t-37.5 90.5v426.667q0 41.333 23.833 74.333t61.5 46.333zM810.667 768h-426.667q-17.667 0-30.167-12.5t-12.5-30.167v-426.667q0-17.667 12.5-30.167t30.167-12.5h426.667q17.667 0 30.167 12.5t12.5 30.167v426.667q0 17.667-12.5 30.167t-30.167 12.5z" />
+<glyph unicode="&#xe070;" glyph-name="clear" data-tags="clear" d="M810 664.667l-238-238 238-238-60-60-238 238-238-238-60 60 238 238-238 238 60 60 238-238 238 238z" />
+<glyph unicode="&#xe094;" glyph-name="arrow-left" data-tags="arrow-left" d="M426.667 768q17.667 0 30.167-12.5t12.5-30.167q0-18-12.667-30.333l-225.667-225.667h665q17.667 0 30.167-12.5t12.5-30.167-12.5-30.167-30.167-12.5h-665l225.667-225.667q12.667-12.333 12.667-30.333 0-17.667-12.5-30.167t-30.167-12.5q-18 0-30.333 12.333l-298.667 298.667q-12.333 13-12.333 30.333t12.333 30.333l298.667 298.667q12.667 12.333 30.333 12.333z" />
+<glyph unicode="&#xe095;" glyph-name="arrow-right" data-tags="arrow-right" d="M597.333 768q18 0 30.333-12.333l298.667-298.667q12.333-12.333 12.333-30.333t-12.333-30.333l-298.667-298.667q-12.333-12.333-30.333-12.333-18.333 0-30.5 12.167t-12.167 30.5q0 18 12.333 30.333l226 225.667h-665q-17.667 0-30.167 12.5t-12.5 30.167 12.5 30.167 30.167 12.5h665l-226 225.667q-12.333 12.333-12.333 30.333 0 18.333 12.167 30.5t30.5 12.167z" />
+<glyph unicode="&#xe0f2;" glyph-name="vertical_align_bottom" data-tags="vertical_align_bottom" d="M170 128.667h684v-86h-684v86zM682 384.667l-170-172-170 172h128v426h84v-426h128z" />
+<glyph unicode="&#xe1ff;" glyph-name="apps" data-tags="apps" d="M682 84.667v172h172v-172h-172zM682 340.667v172h172v-172h-172zM426 596.667v172h172v-172h-172zM682 768.667h172v-172h-172v172zM426 340.667v172h172v-172h-172zM170 340.667v172h172v-172h-172zM170 84.667v172h172v-172h-172zM426 84.667v172h172v-172h-172zM170 596.667v172h172v-172h-172z" />
+<glyph unicode="&#xe20c;" glyph-name="fullscreen" data-tags="fullscreen" d="M598 724.667h212v-212h-84v128h-128v84zM726 212.667v128h84v-212h-212v84h128zM214 512.667v212h212v-84h-128v-128h-84zM298 340.667v-128h128v-84h-212v212h84z" />
+<glyph unicode="&#xe20d;" glyph-name="fullscreen_exit" data-tags="fullscreen_exit" d="M682 596.667h128v-84h-212v212h84v-128zM598 128.667v212h212v-84h-128v-128h-84zM342 596.667v128h84v-212h-212v84h128zM214 256.667v84h212v-212h-84v128h-128z" />
+<glyph unicode="&#xe311;" glyph-name="zoom_in" data-tags="zoom_in" d="M512 512.667h-86v-86h-42v86h-86v42h86v86h42v-86h86v-42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe312;" glyph-name="zoom_out" data-tags="zoom_out" d="M298 554.667h214v-42h-214v42zM406 340.667q80 0 136 56t56 136-56 136-136 56-136-56-56-136 56-136 136-56zM662 340.667l212-212-64-64-212 212v34l-12 12q-76-66-180-66-116 0-197 80t-81 196 81 197 197 81 196-81 80-197q0-104-66-180l12-12h34z" />
+<glyph unicode="&#xe80d;" glyph-name="share" data-tags="share" d="M768 252.667c68 0 124-56 124-124s-56-126-124-126-124 58-124 126c0 10 0 20 2 28l-302 176c-24-22-54-34-88-34-70 0-128 58-128 128s58 128 128 128c34 0 64-12 88-34l300 174c-2 10-4 20-4 30 0 70 58 128 128 128s128-58 128-128-58-128-128-128c-34 0-64 14-88 36l-300-176c2-10 4-20 4-30s-2-20-4-30l304-176c22 20 52 32 84 32z" />
+<glyph unicode="&#xe900;" glyph-name="rotate_left" data-tags="rotate_left" d="M554 764.667q126-16 213-112t87-226-87-226-213-112v86q92 16 153 87t61 165-61 165-153 87v-166l-194 190 194 194v-132zM302 156.667l62 62q46-34 106-44v-86q-96 12-168 68zM260 384.667q10-58 42-106l-60-60q-56 74-68 166h86zM304 574.667q-36-52-44-106h-86q12 90 70 166z" />
+<glyph unicode="&#xe901;" glyph-name="rotate_right" data-tags="rotate_right" d="M720 278.667q34 46 44 106h86q-12-92-68-166zM554 174.667q60 10 106 44l62-62q-72-56-168-68v86zM850 468.667h-86q-10 60-44 106l62 60q58-72 68-166zM664 702.667l-194-190v166q-92-16-153-87t-61-165 61-165 153-87v-86q-126 16-213 112t-87 226 87 226 213 112v132z" />
+<glyph unicode="&#xe902;" glyph-name="swap_horiz" data-tags="swap_horiz" d="M896 554.667l-170-170v128h-300v84h300v128zM298 468.667v-128h300v-84h-300v-128l-170 170z" />
+<glyph unicode="&#xe903;" glyph-name="swap_vert" data-tags="swap_vert" d="M384 810.667l170-170h-128v-300h-84v300h-128zM682 212.667h128l-170-170-170 170h128v300h84v-300z" />
+<glyph unicode="&#xe904;" glyph-name="facebook-with-circle" data-tags="facebook-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM628.429 612.659h-73.882c-8.755 0-18.483-11.52-18.483-26.829v-53.35h92.416l-13.978-76.083h-78.438v-228.403h-87.194v228.403h-79.104v76.083h79.104v44.749c0 64.205 44.544 116.378 105.677 116.378h73.882v-80.947z" />
+<glyph unicode="&#xe905;" glyph-name="google-with-circle" data-tags="google+-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM483.686 249.805c-30.874-15.002-64.102-16.589-76.954-16.589-2.458 0-3.84 0-3.84 0s-1.178 0-2.765 0c-20.070 0-119.962 4.608-119.962 95.59 0 89.395 108.8 96.41 142.131 96.41h0.87c-19.251 25.702-15.258 51.61-15.258 51.61-1.69-0.102-4.147-0.205-7.168-0.205-12.544 0-36.762 1.997-57.549 15.411-25.498 16.384-38.4 44.288-38.4 82.893 0 109.107 119.142 113.51 120.32 113.613h118.989v-2.611c0-13.312-23.91-15.923-40.192-18.125-5.53-0.819-16.64-1.894-19.763-3.482 30.157-16.128 35.021-41.421 35.021-79.104 0-42.906-16.794-65.587-34.611-81.51-11.059-9.882-19.712-17.613-19.712-28.006 0-10.189 11.878-20.582 25.702-32.717 22.579-19.917 53.555-47.002 53.555-92.723 0-47.258-20.326-81.050-60.416-100.454zM742.4 460.8h-76.8v-76.8h-51.2v76.8h-76.8v51.2h76.8v76.8h51.2v-76.8h76.8v-51.2zM421.018 401.92c-2.662 0-5.325-0.102-8.038-0.307-22.733-1.69-43.725-10.189-58.88-24.013-15.053-13.619-22.733-30.822-21.658-48.179 2.304-36.403 41.37-57.702 88.832-54.323 46.694 3.379 77.824 30.31 75.571 66.714-2.15 34.202-31.898 60.109-75.827 60.109zM465.766 599.808c-12.39 43.52-32.358 56.422-63.386 56.422-3.328 0-6.707-0.512-9.933-1.382-13.466-3.84-24.166-15.053-30.106-31.744-6.093-16.896-6.451-34.509-1.229-54.579 9.472-35.891 34.97-61.901 60.672-61.901 3.379 0 6.758 0.41 9.933 1.382 28.109 7.885 45.722 50.79 34.048 91.802z" />
+<glyph unicode="&#xe906;" glyph-name="pinterest-with-circle" data-tags="pinterest-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM545.638 344.32c-31.539 2.406-44.749 18.022-69.427 32.973-13.568-71.219-30.157-139.52-79.309-175.206-15.206 107.725 22.221 188.518 39.629 274.381-29.645 49.92 3.533 150.323 66.099 125.645 76.954-30.515-66.662-185.6 29.747-205.005 100.659-20.173 141.773 174.694 79.36 237.978-90.214 91.494-262.502 2.099-241.306-128.87 5.12-32 38.246-41.728 13.21-85.914-57.702 12.8-74.957 58.317-72.704 118.989 3.533 99.328 89.242 168.909 175.155 178.483 108.698 12.083 210.688-39.885 224.819-142.182 15.821-115.405-49.101-240.282-165.274-231.27z" />
+<glyph unicode="&#xe907;" glyph-name="twitter-with-circle" data-tags="twitter-with-circle" d="M512 952.32c-271.462 0-491.52-220.058-491.52-491.52s220.058-491.52 491.52-491.52 491.52 220.058 491.52 491.52-220.058 491.52-491.52 491.52zM711.936 549.683c0.205-4.198 0.256-8.397 0.256-12.493 0-128-97.331-275.507-275.405-275.507-54.682 0-105.574 15.974-148.378 43.52 7.526-0.922 15.258-1.28 23.091-1.28 45.363 0 87.091 15.411 120.218 41.421-42.342 0.819-78.080 28.774-90.419 67.174 5.888-1.075 11.93-1.69 18.176-1.69 8.806 0 17.408 1.178 25.498 3.379-44.288 8.909-77.67 48.026-77.67 94.925v1.178c13.056-7.219 28.006-11.622 43.878-12.134-26.010 17.408-43.059 47.002-43.059 80.64 0 17.715 4.762 34.406 13.107 48.691 47.77-58.573 119.040-97.075 199.526-101.222-1.69 7.117-2.509 14.49-2.509 22.118 0 53.402 43.315 96.819 96.819 96.819 27.802 0 52.992-11.776 70.656-30.618 22.067 4.403 42.752 12.39 61.44 23.501-7.219-22.579-22.528-41.574-42.547-53.606 19.61 2.406 38.246 7.578 55.603 15.309-12.954-19.405-29.389-36.506-48.282-50.125z" />
+</font></defs></svg>
--- a/static/lightgallery/fonts/lg.ttf
+++ b/static/lightgallery/fonts/lg.ttf
--- a/static/lightgallery/fonts/lg.woff
+++ b/static/lightgallery/fonts/lg.woff
--- a/static/lightgallery/img/loading.gif
+++ b/static/lightgallery/img/loading.gif
--- a/static/lightgallery/img/video-play.png
+++ b/static/lightgallery/img/video-play.png
--- a/static/lightgallery/img/vimeo-play.png
+++ b/static/lightgallery/img/vimeo-play.png
--- a/static/lightgallery/img/youtube-play.png
+++ b/static/lightgallery/img/youtube-play.png
--- a/static/lightgallery/js/lightgallery-custom.js
+++ b/static/lightgallery/js/lightgallery-custom.js
--- a/static/reef-databind.js
+++ b/static/reef-databind.js
@ -2,7 +2,7 @@
 // to the 'store'. 

 app.addSetter('databind.onInput', (data, bindPath, value) => {
-    console.log(`binding ${bindPath} to ${value}`);
+    // console.log(`binding ${bindPath} to ${value}`);
    put(data, bindPath, value);

    /*!
@ -175,7 +175,6 @@ Reef.databind = function(reef){
                let options = target.querySelectorAll("option");
                for ( let i = 0; i < options.length; ++i ){
                    if ( options[i].selected ){
-                        console.log(options[i].value);
                        val.push(parseString(options[i].value));
                    }
                }
--- a/static/utils.js
+++ b/static/utils.js
@ -30,4 +30,32 @@ function parseQueryString(qs){
        }
    }
    return obj;
-}
+}
+
+function getBoardIndexById(id){
+    let idx = -1;
+    for ( let i = 0; i < store.data.boards.length; ++i ){
+        if ( store.data.boards[i].id == id ){
+            idx = i;
+        }
+    }
+    return idx;
+}
+
+function getBoardById(id){
+    return store.data.boards[getBoardIndexById(id)];
+}
+
+function getPinIndexById(id){
+    let idx = -1;
+    for ( let i = 0; i < store.data.board.pins.length; ++i ){
+        if ( store.data.board.pins[i].id == id ){
+            idx = i;
+        }
+    }
+    return idx;
+}
+
+function getPinById(id){
+    return store.data.board.pins[getPinIndexById(id)];
+}