diff --git a/README.md b/README.md index dabd63b..7d6c9a2 100644 --- 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/) diff --git a/TODO.md b/TODO.md index 415e277..a35149d 100644 --- 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 diff --git a/static/app.js b/static/app.js index 4d35938..20a7ebc 100644 --- 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); + } } } diff --git a/static/client.css b/static/client.css index 112b339..af0de7f 100644 --- 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); } \ No newline at end of file diff --git a/static/components/about.js b/static/components/about.js index fca785e..6ff95c3 100644 --- a/static/components/about.js +++ b/static/components/about.js @@ -28,6 +28,8 @@ app.addComponent('aboutModal', (store) => { return new Reef("#aboutModal", {
 ui framework » reef
+  pin zoom » lightgallery.js +
 boards icon » squares by Andrejs Kirma from the Noun Project
 pin icon » pinned by Gregor Cresnar from the Noun Project diff --git a/static/components/addpin.js b/static/components/addpin.js index b4743e1..fd16e92 100644 --- 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, { diff --git a/static/components/brickwall.js b/static/components/brickwall.js index b9cf2d8..8e7c1be 100644 --- 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*/`
- - + +
`}; diff --git a/static/components/editboard.js b/static/components/editboard.js index a74cf0a..b238be7 100644 --- 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); } diff --git a/static/components/editpin.js b/static/components/editpin.js index 696b514..e60fc0f 100644 --- 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 += ``; } - 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*/`
@@ -126,13 +123,7 @@ app.addComponent('editPinModal', (store) => { return new Reef("#editPinModal", {
`; - } - - if ( data.editPinModal.pin ){ - console.log(getThumbnailImagePath(data.editPinModal.pin.id)); - } - - + } return /*html*/`
diff --git a/static/components/pinzoom.js b/static/components/pinzoom.js index 74ab11f..2360d36 100644 --- 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 = ``; - } +// let siteLink = ''; +// if ( data.pinZoomModal.pin && data.pinZoomModal.pin.siteUrl ){ +// siteLink = ``; +// } - let pinZoomDescription = ''; - if ( data.pinZoomModal.pin && data.pinZoomModal.pin.description && data.pinZoomModal.pin.description.length > 0 ){ - pinZoomDescription = ` -
${data.pinZoomModal.pin.description}
+// let pinZoomDescription = ''; +// if ( data.pinZoomModal.pin && data.pinZoomModal.pin.description && data.pinZoomModal.pin.description.length > 0 ){ +// pinZoomDescription = ` +//
${data.pinZoomModal.pin.description}
-
-
-   -
-
- ${data.pinZoomModal.pin.description} -
-
- `; - } +//
+//
+//   +//
+//
+// ${data.pinZoomModal.pin.description} +//
+//
+// `; +// } - 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*/` -
-
-
-

- -

-
- - ${siteLink} - - +// return /*html*/` +//
+//
+//
+//

+// +//

+//
+// +// ${siteLink} +// +// - ${pinZoomDescription} +// ${pinZoomDescription} -
-
-
-
-
-
-
- `; - } +//
+//
+//
+//
+//
+//
+//
+// `; +// } -}); }); \ No newline at end of file +// }); }); \ No newline at end of file diff --git a/static/index.html b/static/index.html index 3af4307..79f802f 100644 --- a/static/index.html +++ b/static/index.html @@ -17,11 +17,15 @@ + +
+
+ @@ -31,7 +35,7 @@ - + diff --git a/static/lightgallery/css/lightgallery.min.css b/static/lightgallery/css/lightgallery.min.css new file mode 100644 index 0000000..104d68f --- /dev/null +++ b/static/lightgallery/css/lightgallery.min.css @@ -0,0 +1 @@ +@font-face{font-family:lg;src:url(../fonts/lg.ttf?22t19m) format("truetype"),url(../fonts/lg.woff?22t19m) format("woff"),url(../fonts/lg.svg?22t19m#lg) format("svg");font-weight:400;font-style:normal;font-display:block}.lg-icon{font-family:lg!important;speak:never;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.lg-actions .lg-next,.lg-actions .lg-prev{border-radius:2px;color:#999;cursor:pointer;display:block;font-size:22px;margin-top:-10px;padding:8px 10px 9px;position:absolute;top:50%;z-index:1080;outline:0;border:none;background-color:transparent}.lg-actions .lg-next.disabled,.lg-actions .lg-prev.disabled{pointer-events:none;opacity:.5}.lg-actions .lg-next:hover,.lg-actions .lg-prev:hover{color:#FFF}.lg-actions .lg-next{right:20px}.lg-actions .lg-next:before{content:"\e095"}.lg-actions .lg-prev{left:20px}.lg-actions .lg-prev:after{content:"\e094"}@-webkit-keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@-moz-keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@-ms-keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@keyframes lg-right-end{0%,100%{left:0}50%{left:-30px}}@-webkit-keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}@-moz-keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}@-ms-keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}@keyframes lg-left-end{0%,100%{left:0}50%{left:30px}}.lg-outer.lg-right-end .lg-object{-webkit-animation:lg-right-end .3s;-o-animation:lg-right-end .3s;animation:lg-right-end .3s;position:relative}.lg-outer.lg-left-end .lg-object{-webkit-animation:lg-left-end .3s;-o-animation:lg-left-end .3s;animation:lg-left-end .3s;position:relative}.lg-toolbar{z-index:1082;left:0;position:absolute;top:0;width:100%;background-color:rgba(0,0,0,.45)}.lg-toolbar .lg-icon{color:#999;cursor:pointer;float:right;font-size:24px;height:47px;line-height:27px;padding:10px 0;text-align:center;width:50px;text-decoration:none!important;outline:0;background:0 0;border:none;box-shadow:none;-webkit-transition:color .2s linear;-o-transition:color .2s linear;transition:color .2s linear}.lg-toolbar .lg-icon:hover{color:#FFF}.lg-toolbar .lg-close:after{content:"\e070"}.lg-toolbar .lg-download:after{content:"\e0f2"}.lg-sub-html{background-color:rgba(0,0,0,.45);bottom:0;color:#EEE;font-size:16px;left:0;padding:10px 40px;position:fixed;right:0;text-align:center;z-index:1080}.lg-sub-html h4{margin:0;font-size:13px;font-weight:700}.lg-sub-html p{font-size:12px;margin:5px 0 0}#lg-counter{color:#999;display:inline-block;font-size:16px;padding-left:20px;padding-top:12px;vertical-align:middle}.lg-next,.lg-prev,.lg-toolbar{opacity:1;-webkit-transition:-webkit-transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear;-moz-transition:-moz-transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear;-o-transition:-o-transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear;transition:transform .35s cubic-bezier(0,0,.25,1) 0s,opacity .35s cubic-bezier(0,0,.25,1) 0s,color .2s linear}.lg-hide-items .lg-prev{opacity:0;-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}.lg-hide-items .lg-next{opacity:0;-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}.lg-hide-items .lg-toolbar{opacity:0;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-object{-webkit-transform:scale3d(.5,.5,.5);transform:scale3d(.5,.5,.5);opacity:0;-webkit-transition:-webkit-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-moz-transition:-moz-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-o-transition:-o-transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;transition:transform 250ms cubic-bezier(0,0,.25,1) 0s,opacity 250ms cubic-bezier(0,0,.25,1)!important;-webkit-transform-origin:50% 50%;-moz-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%}body:not(.lg-from-hash) .lg-outer.lg-start-zoom .lg-item.lg-complete .lg-object{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);opacity:1}.lg-outer .lg-thumb-outer{background-color:#0D0A0A;bottom:0;position:absolute;width:100%;z-index:1080;max-height:350px;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);-webkit-transition:-webkit-transform .25s cubic-bezier(0,0,.25,1) 0s;-moz-transition:-moz-transform .25s cubic-bezier(0,0,.25,1) 0s;-o-transition:-o-transform .25s cubic-bezier(0,0,.25,1) 0s;transition:transform .25s cubic-bezier(0,0,.25,1) 0s}.lg-outer .lg-thumb-outer.lg-grab .lg-thumb-item{cursor:-webkit-grab;cursor:-moz-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.lg-outer .lg-thumb-outer.lg-grabbing .lg-thumb-item{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing}.lg-outer .lg-thumb-outer.lg-dragging .lg-thumb{-webkit-transition-duration:0s!important;transition-duration:0s!important}.lg-outer.lg-thumb-open .lg-thumb-outer{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.lg-outer .lg-thumb{padding:10px 0;height:100%;margin-bottom:-5px}.lg-outer .lg-thumb-item{cursor:pointer;float:left;overflow:hidden;height:100%;border:2px solid #FFF;border-radius:4px;margin-bottom:5px}@media (min-width:1025px){.lg-outer .lg-thumb-item{-webkit-transition:border-color .25s ease;-o-transition:border-color .25s ease;transition:border-color .25s ease}}.lg-outer .lg-thumb-item.active,.lg-outer .lg-thumb-item:hover{border-color:#a90707}.lg-outer .lg-thumb-item img{width:100%;height:100%;object-fit:cover}.lg-outer.lg-has-thumb .lg-item{padding-bottom:120px}.lg-outer.lg-can-toggle .lg-item{padding-bottom:0}.lg-outer.lg-pull-caption-up .lg-sub-html{-webkit-transition:bottom .25s ease;-o-transition:bottom .25s ease;transition:bottom .25s ease}.lg-outer.lg-pull-caption-up.lg-thumb-open .lg-sub-html{bottom:100px}.lg-outer .lg-toggle-thumb{background-color:#0D0A0A;border-radius:2px 2px 0 0;color:#999;cursor:pointer;font-size:24px;height:39px;line-height:27px;padding:5px 0;position:absolute;right:20px;text-align:center;top:-39px;width:50px;outline:0;border:none}.lg-outer .lg-toggle-thumb:after{content:"\e1ff"}.lg-outer .lg-toggle-thumb:hover{color:#FFF}.lg-outer .lg-video-cont{display:inline-block;vertical-align:middle;max-width:1140px;max-height:100%;width:100%;padding:0 5px}.lg-outer .lg-video{width:100%;height:0;padding-bottom:56.25%;overflow:hidden;position:relative}.lg-outer .lg-video .lg-object{display:inline-block;position:absolute;top:0;left:0;width:100%!important;height:100%!important}.lg-outer .lg-video .lg-video-play{width:84px;height:59px;position:absolute;left:50%;top:50%;margin-left:-42px;margin-top:-30px;z-index:1080;cursor:pointer}.lg-outer .lg-has-vimeo .lg-video-play{background:url(../img/vimeo-play.png) no-repeat}.lg-outer .lg-has-vimeo:hover .lg-video-play{background:url(../img/vimeo-play.png) 0 -58px no-repeat}.lg-outer .lg-has-html5 .lg-video-play{background:url(../img/video-play.png) no-repeat;height:64px;margin-left:-32px;margin-top:-32px;width:64px;opacity:.8}.lg-outer .lg-has-html5:hover .lg-video-play{opacity:1}.lg-outer .lg-has-youtube .lg-video-play{background:url(../img/youtube-play.png) no-repeat}.lg-outer .lg-has-youtube:hover .lg-video-play{background:url(../img/youtube-play.png) 0 -60px no-repeat}.lg-outer .lg-video-object{width:100%!important;height:100%!important;position:absolute;top:0;left:0}.lg-outer .lg-has-video .lg-video-object{visibility:hidden}.lg-outer .lg-has-video.lg-video-playing .lg-object,.lg-outer .lg-has-video.lg-video-playing .lg-video-play{display:none}.lg-outer .lg-has-video.lg-video-playing .lg-video-object{visibility:visible}.lg-progress-bar{background-color:#333;height:5px;left:0;position:absolute;top:0;width:100%;z-index:1083;opacity:0;-webkit-transition:opacity 80ms ease 0s;-moz-transition:opacity 80ms ease 0s;-o-transition:opacity 80ms ease 0s;transition:opacity 80ms ease 0s}.lg-progress-bar .lg-progress{background-color:#a90707;height:5px;width:0}.lg-progress-bar.lg-start .lg-progress{width:100%}.lg-show-autoplay .lg-progress-bar{opacity:1}.lg-autoplay-button:after{content:"\e01d"}.lg-show-autoplay .lg-autoplay-button:after{content:"\e01a"}.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-image,.lg-outer.lg-css3.lg-zoom-dragging .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transition-duration:0s;transition-duration:0s}.lg-outer.lg-use-transition-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.25,1) 0s;-moz-transition:-moz-transform .3s cubic-bezier(0,0,.25,1) 0s;-o-transition:-o-transform .3s cubic-bezier(0,0,.25,1) 0s;transition:transform .3s cubic-bezier(0,0,.25,1) 0s}.lg-outer.lg-use-left-for-zoom .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s;-moz-transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s;-o-transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s;transition:left .3s cubic-bezier(0,0,.25,1) 0s,top .3s cubic-bezier(0,0,.25,1) 0s}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-img-wrap{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.lg-outer .lg-item.lg-complete.lg-zoomable .lg-image{-webkit-transform:scale3d(1,1,1);transform:scale3d(1,1,1);-webkit-transition:-webkit-transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;-moz-transition:-moz-transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;-o-transition:-o-transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;transition:transform .3s cubic-bezier(0,0,.25,1) 0s,opacity .15s!important;-webkit-transform-origin:0 0;-moz-transform-origin:0 0;-ms-transform-origin:0 0;transform-origin:0 0;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}#lg-zoom-in:after{content:"\e311"}#lg-actual-size{font-size:20px}#lg-actual-size:after{content:"\e033"}#lg-zoom-out{opacity:.5;pointer-events:none}#lg-zoom-out:after{content:"\e312"}.lg-zoomed #lg-zoom-out{opacity:1;pointer-events:auto}.lg-outer .lg-pager-outer{bottom:60px;left:0;position:absolute;right:0;text-align:center;z-index:1080;height:10px}.lg-outer .lg-pager-outer.lg-pager-hover .lg-pager-cont{overflow:visible}.lg-outer .lg-pager-cont{cursor:pointer;display:inline-block;overflow:hidden;position:relative;vertical-align:top;margin:0 5px}.lg-outer .lg-pager-cont:hover .lg-pager-thumb-cont{opacity:1;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}.lg-outer .lg-pager-cont.lg-pager-active .lg-pager{box-shadow:0 0 0 2px #fff inset}.lg-outer .lg-pager-thumb-cont{background-color:#fff;color:#FFF;bottom:100%;height:83px;left:0;margin-bottom:20px;margin-left:-60px;opacity:0;padding:5px;position:absolute;width:120px;border-radius:3px;-webkit-transition:opacity .15s ease 0s,-webkit-transform .15s ease 0s;-moz-transition:opacity .15s ease 0s,-moz-transform .15s ease 0s;-o-transition:opacity .15s ease 0s,-o-transform .15s ease 0s;transition:opacity .15s ease 0s,transform .15s ease 0s;-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}.lg-outer .lg-pager-thumb-cont img{width:100%;height:100%}.lg-outer .lg-pager{background-color:rgba(255,255,255,.5);border-radius:50%;box-shadow:0 0 0 8px rgba(255,255,255,.7) inset;display:block;height:12px;-webkit-transition:box-shadow .3s ease 0s;-o-transition:box-shadow .3s ease 0s;transition:box-shadow .3s ease 0s;width:12px}.lg-outer .lg-pager:focus,.lg-outer .lg-pager:hover{box-shadow:0 0 0 8px #fff inset}.lg-outer .lg-caret{border-left:10px solid transparent;border-right:10px solid transparent;border-top:10px dashed;bottom:-10px;display:inline-block;height:0;left:50%;margin-left:-5px;position:absolute;vertical-align:middle;width:0}.lg-fullscreen:after{content:"\e20c"}.lg-fullscreen-on .lg-fullscreen:after{content:"\e20d"}.lg-outer #lg-dropdown-overlay{background-color:rgba(0,0,0,.25);bottom:0;cursor:default;left:0;position:fixed;right:0;top:0;z-index:1081;opacity:0;visibility:hidden;-webkit-transition:visibility 0s linear .18s,opacity .18s linear 0s;-o-transition:visibility 0s linear .18s,opacity .18s linear 0s;transition:visibility 0s linear .18s,opacity .18s linear 0s}.lg-outer.lg-dropdown-active #lg-dropdown-overlay,.lg-outer.lg-dropdown-active .lg-dropdown{-webkit-transition-delay:0s;transition-delay:0s;-moz-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1;visibility:visible}.lg-outer.lg-dropdown-active #lg-share{color:#FFF}.lg-outer .lg-dropdown{background-color:#fff;border-radius:2px;font-size:14px;list-style-type:none;margin:0;padding:10px 0;position:absolute;right:0;text-align:left;top:50px;opacity:0;visibility:hidden;-moz-transform:translate3d(0,5px,0);-o-transform:translate3d(0,5px,0);-ms-transform:translate3d(0,5px,0);-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0);-webkit-transition:-webkit-transform .18s linear 0s,visibility 0s linear .5s,opacity .18s linear 0s;-moz-transition:-moz-transform .18s linear 0s,visibility 0s linear .5s,opacity .18s linear 0s;-o-transition:-o-transform .18s linear 0s,visibility 0s linear .5s,opacity .18s linear 0s;transition:transform .18s linear 0s,visibility 0s linear .5s,opacity .18s linear 0s}.lg-outer .lg-dropdown:after{content:"";display:block;height:0;width:0;position:absolute;border:8px solid transparent;border-bottom-color:#FFF;right:16px;top:-16px}.lg-outer .lg-dropdown>li:last-child{margin-bottom:0}.lg-outer .lg-dropdown>li:hover .lg-icon,.lg-outer .lg-dropdown>li:hover a{color:#333}.lg-outer .lg-dropdown a{color:#333;display:block;white-space:pre;padding:4px 12px;font-family:"Open Sans","Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px}.lg-outer .lg-dropdown a:hover{background-color:rgba(0,0,0,.07)}.lg-outer .lg-dropdown .lg-dropdown-text{display:inline-block;line-height:1;margin-top:-3px;vertical-align:middle}.lg-outer .lg-dropdown .lg-icon{color:#333;display:inline-block;float:none;font-size:20px;height:auto;line-height:1;margin-right:8px;padding:0;vertical-align:middle;width:auto}.lg-outer,.lg-outer .lg,.lg-outer .lg-inner{height:100%;width:100%}.lg-outer #lg-share{position:relative}.lg-outer #lg-share:after{content:"\e80d"}.lg-outer #lg-share-facebook .lg-icon{color:#3b5998}.lg-outer #lg-share-facebook .lg-icon:after{content:"\e904"}.lg-outer #lg-share-twitter .lg-icon{color:#00aced}.lg-outer #lg-share-twitter .lg-icon:after{content:"\e907"}.lg-outer #lg-share-googleplus .lg-icon{color:#dd4b39}.lg-outer #lg-share-googleplus .lg-icon:after{content:"\e905"}.lg-outer #lg-share-pinterest .lg-icon{color:#cb2027}.lg-outer #lg-share-pinterest .lg-icon:after{content:"\e906"}.lg-outer .lg-img-rotate{position:absolute;padding:0 5px;left:0;right:0;top:0;bottom:0;-webkit-transition:-webkit-transform .3s cubic-bezier(.32,0,.67,0) 0s;-moz-transition:-moz-transform .3s cubic-bezier(.32,0,.67,0) 0s;-o-transition:-o-transform .3s cubic-bezier(.32,0,.67,0) 0s;transition:transform .3s cubic-bezier(.32,0,.67,0) 0s}.lg-rotate-left:after{content:"\e900"}.lg-rotate-right:after{content:"\e901"}.lg-icon.lg-flip-hor,.lg-icon.lg-flip-ver{font-size:26px}.lg-flip-hor:after{content:"\e902"}.lg-flip-ver:after{content:"\e903"}.lg-group:after,.lg-group:before{display:table;content:"";line-height:0}.lg-group:after{clear:both}.lg-outer{position:fixed;top:0;left:0;z-index:1050;opacity:0;outline:0;-webkit-transition:opacity .15s ease 0s;-o-transition:opacity .15s ease 0s;transition:opacity .15s ease 0s}.lg-outer *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.lg-outer.lg-visible{opacity:1}.lg-outer.lg-css3 .lg-item.lg-current,.lg-outer.lg-css3 .lg-item.lg-next-slide,.lg-outer.lg-css3 .lg-item.lg-prev-slide{-webkit-transition-duration:inherit!important;transition-duration:inherit!important;-webkit-transition-timing-function:inherit!important;transition-timing-function:inherit!important}.lg-outer.lg-css3.lg-dragging .lg-item.lg-current,.lg-outer.lg-css3.lg-dragging .lg-item.lg-next-slide,.lg-outer.lg-css3.lg-dragging .lg-item.lg-prev-slide{-webkit-transition-duration:0s!important;transition-duration:0s!important;opacity:1}.lg-outer.lg-grab img.lg-object{cursor:-webkit-grab;cursor:-moz-grab;cursor:-o-grab;cursor:-ms-grab;cursor:grab}.lg-outer.lg-grabbing img.lg-object{cursor:move;cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:-o-grabbing;cursor:-ms-grabbing;cursor:grabbing}.lg-outer .lg{position:relative;overflow:hidden;margin-left:auto;margin-right:auto;max-width:100%;max-height:100%}.lg-outer .lg-inner{position:absolute;left:0;top:0;white-space:nowrap}.lg-outer .lg-item{background:url(../img/loading.gif) center center no-repeat;display:none!important}.lg-outer.lg-css .lg-current,.lg-outer.lg-css3 .lg-current,.lg-outer.lg-css3 .lg-next-slide,.lg-outer.lg-css3 .lg-prev-slide{display:inline-block!important}.lg-outer .lg-img-wrap,.lg-outer .lg-item{display:inline-block;text-align:center;position:absolute;width:100%;height:100%}.lg-outer .lg-img-wrap:before,.lg-outer .lg-item:before{content:"";display:inline-block;height:50%;width:1px;margin-right:-1px}.lg-outer .lg-img-wrap{position:absolute;padding:0 5px;left:0;right:0;top:0;bottom:0}.lg-outer .lg-item.lg-complete{background-image:none}.lg-outer .lg-item.lg-current{z-index:1060}.lg-outer .lg-image{display:inline-block;vertical-align:middle;max-width:100%;max-height:100%;width:auto!important;height:auto!important}.lg-outer.lg-show-after-load .lg-item .lg-object,.lg-outer.lg-show-after-load .lg-item .lg-video-play{opacity:0;-webkit-transition:opacity .15s ease 0s;-o-transition:opacity .15s ease 0s;transition:opacity .15s ease 0s}.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-object,.lg-outer.lg-show-after-load .lg-item.lg-complete .lg-video-play{opacity:1}.lg-outer .lg-empty-html,.lg-outer.lg-hide-download #lg-download{display:none}.lg-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;z-index:1040;background-color:#000;opacity:0;-webkit-transition:opacity .15s ease 0s;-o-transition:opacity .15s ease 0s;transition:opacity .15s ease 0s}.lg-backdrop.in{opacity:1}.lg-css3.lg-no-trans .lg-current,.lg-css3.lg-no-trans .lg-next-slide,.lg-css3.lg-no-trans .lg-prev-slide{-webkit-transition:none 0s ease 0s!important;-moz-transition:none 0s ease 0s!important;-o-transition:none 0s ease 0s!important;transition:none 0s ease 0s!important}.lg-css3.lg-use-css3 .lg-item,.lg-css3.lg-use-left .lg-item{-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;backface-visibility:hidden}.lg-css3.lg-fade .lg-item{opacity:0}.lg-css3.lg-fade .lg-item.lg-current{opacity:1}.lg-css3.lg-fade .lg-item.lg-current,.lg-css3.lg-fade .lg-item.lg-next-slide,.lg-css3.lg-fade .lg-item.lg-prev-slide{-webkit-transition:opacity .1s ease 0s;-moz-transition:opacity .1s ease 0s;-o-transition:opacity .1s ease 0s;transition:opacity .1s ease 0s}.lg-css3.lg-slide.lg-use-css3 .lg-item{opacity:0}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);opacity:1}.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-current,.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-next-slide,.lg-css3.lg-slide.lg-use-css3 .lg-item.lg-prev-slide{-webkit-transition:-webkit-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-moz-transition:-moz-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-o-transition:-o-transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;transition:transform 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s}.lg-css3.lg-slide.lg-use-left .lg-item{opacity:0;position:absolute;left:0}.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide{left:-100%}.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide{left:100%}.lg-css3.lg-slide.lg-use-left .lg-item.lg-current{left:0;opacity:1}.lg-css3.lg-slide.lg-use-left .lg-item.lg-current,.lg-css3.lg-slide.lg-use-left .lg-item.lg-next-slide,.lg-css3.lg-slide.lg-use-left .lg-item.lg-prev-slide{-webkit-transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-moz-transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;-o-transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s;transition:left 1s cubic-bezier(0,0,.25,1) 0s,opacity .1s ease 0s} \ No newline at end of file diff --git a/static/lightgallery/fonts/lg.svg b/static/lightgallery/fonts/lg.svg new file mode 100644 index 0000000..6fffe1b --- /dev/null +++ b/static/lightgallery/fonts/lg.svg @@ -0,0 +1,51 @@ + + + + + + +{ + "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" +} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/lightgallery/fonts/lg.ttf b/static/lightgallery/fonts/lg.ttf new file mode 100644 index 0000000..213afec Binary files /dev/null and b/static/lightgallery/fonts/lg.ttf differ diff --git a/static/lightgallery/fonts/lg.woff b/static/lightgallery/fonts/lg.woff new file mode 100644 index 0000000..27a2b8e Binary files /dev/null and b/static/lightgallery/fonts/lg.woff differ diff --git a/static/lightgallery/img/loading.gif b/static/lightgallery/img/loading.gif new file mode 100644 index 0000000..d3bbc80 Binary files /dev/null and b/static/lightgallery/img/loading.gif differ diff --git a/static/lightgallery/img/video-play.png b/static/lightgallery/img/video-play.png new file mode 100644 index 0000000..4893540 Binary files /dev/null and b/static/lightgallery/img/video-play.png differ diff --git a/static/lightgallery/img/vimeo-play.png b/static/lightgallery/img/vimeo-play.png new file mode 100644 index 0000000..ef7d245 Binary files /dev/null and b/static/lightgallery/img/vimeo-play.png differ diff --git a/static/lightgallery/img/youtube-play.png b/static/lightgallery/img/youtube-play.png new file mode 100644 index 0000000..dfebb91 Binary files /dev/null and b/static/lightgallery/img/youtube-play.png differ diff --git a/static/lightgallery/js/lightgallery-custom.js b/static/lightgallery/js/lightgallery-custom.js new file mode 100644 index 0000000..67bc2d0 --- /dev/null +++ b/static/lightgallery/js/lightgallery-custom.js @@ -0,0 +1,1649 @@ +/**! + * lightgallery.js | 1.4.0 | October 13th 2020 + * http://sachinchoolur.github.io/lightgallery.js/ + * Copyright (c) 2016 Sachin N; + * + * Customized for tinypin 2021 + * + * @license GPLv3 + */(function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Lightgallery = f()}})(function(){var define,module,exports;return (function(){function r(e,n,t){function o(i,f){if(!n[i]){if(!e[i]){var c="function"==typeof require&&require;if(!f&&c)return c(i,!0);if(u)return u(i,!0);var a=new Error("Cannot find module '"+i+"'");throw a.code="MODULE_NOT_FOUND",a}var p=n[i]={exports:{}};e[i][0].call(p.exports,function(r){var n=e[i][1][r];return o(n||r)},p,p.exports,r,e,n,t)}return n[i].exports}for(var u="function"==typeof require&&require,i=0;i 2 && arguments[2] !== undefined ? arguments[2] : null; + + if (!el) { + return; + } + + var customEvent = new CustomEvent(event, { + detail: detail + }); + el.dispatchEvent(customEvent); + }, + + Listener: { + uid: 0 + }, + on: function on(el, events, fn) { + var _this = this; + + if (!el) { + return; + } + + events.split(' ').forEach(function (event) { + var _id = _this.getAttribute(el, 'lg-event-uid') || ''; + utils.Listener.uid++; + _id += '&' + utils.Listener.uid; + _this.setAttribute(el, 'lg-event-uid', _id); + utils.Listener[event + utils.Listener.uid] = fn; + el.addEventListener(event.split('.')[0], fn, false); + }); + }, + + off: function off(el, event) { + if (!el) { + return; + } + + var _id = this.getAttribute(el, 'lg-event-uid'); + if (_id) { + _id = _id.split('&'); + for (var i = 0; i < _id.length; i++) { + if (_id[i]) { + var _event = event + _id[i]; + if (_event.substring(0, 1) === '.') { + for (var key in utils.Listener) { + if (utils.Listener.hasOwnProperty(key)) { + if (key.split('.').indexOf(_event.split('.')[1]) > -1) { + el.removeEventListener(key.split('.')[0], utils.Listener[key]); + this.setAttribute(el, 'lg-event-uid', this.getAttribute(el, 'lg-event-uid').replace('&' + _id[i], '')); + delete utils.Listener[key]; + } + } + } + } else { + el.removeEventListener(_event.split('.')[0], utils.Listener[_event]); + this.setAttribute(el, 'lg-event-uid', this.getAttribute(el, 'lg-event-uid').replace('&' + _id[i], '')); + delete utils.Listener[_event]; + } + } + } + } + }, + + param: function param(obj) { + return Object.keys(obj).map(function (k) { + return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]); + }).join('&'); + } + }; + + exports.default = utils; + }); + + },{}],2:[function(require,module,exports){ + (function (global, factory) { + if (typeof define === "function" && define.amd) { + define(['./lg-utils'], factory); + } else if (typeof exports !== "undefined") { + factory(require('./lg-utils')); + } else { + var mod = { + exports: {} + }; + factory(global.lgUtils); + global.lightgallery = mod.exports; + } + })(this, function (_lgUtils) { + 'use strict'; + + var _lgUtils2 = _interopRequireDefault(_lgUtils); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { + default: obj + }; + } + + var _extends = Object.assign || function (target) { + for (var i = 1; i < arguments.length; i++) { + var source = arguments[i]; + + for (var key in source) { + if (Object.prototype.hasOwnProperty.call(source, key)) { + target[key] = source[key]; + } + } + } + + return target; + }; + + /** Polyfill the CustomEvent() constructor functionality in Internet Explorer 9 and higher */ + (function () { + + if (typeof window.CustomEvent === 'function') { + return false; + } + + function CustomEvent(event, params) { + params = params || { + bubbles: false, + cancelable: false, + detail: undefined + }; + var evt = document.createEvent('CustomEvent'); + evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail); + return evt; + } + + CustomEvent.prototype = window.Event.prototype; + + window.CustomEvent = CustomEvent; + })(); + + window.utils = _lgUtils2.default; + window.lgData = { + uid: 0 + }; + + window.lgModules = {}; + var defaults = { + + mode: 'lg-slide', + + // Ex : 'ease' + cssEasing: 'ease', + + //'for jquery animation' + easing: 'linear', + speed: 600, + height: '100%', + width: '100%', + addClass: '', + startClass: 'lg-start-zoom', + backdropDuration: 150, + + // Set 0, if u don't want to hide the controls + hideBarsDelay: 6000, + + useLeft: false, + + // aria-labelledby attribute fot gallery + ariaLabelledby: '', + + //aria-describedby attribute for gallery + ariaDescribedby: '', + + closable: true, + loop: true, + escKey: true, + keyPress: true, + controls: true, + slideEndAnimatoin: true, + hideControlOnEnd: false, + mousewheel: false, + + getCaptionFromTitleOrAlt: true, + + // .lg-item || '.lg-sub-html' + appendSubHtmlTo: '.lg-sub-html', + + subHtmlSelectorRelative: false, + + /** + * @desc number of preload slides + * will exicute only after the current slide is fully loaded. + * + * @ex you clicked on 4th image and if preload = 1 then 3rd slide and 5th + * slide will be loaded in the background after the 4th slide is fully loaded.. + * if preload is 2 then 2nd 3rd 5th 6th slides will be preloaded.. ... ... + * + */ + preload: 1, + showAfterLoad: true, + selector: '', + selectWithin: '', + nextHtml: '', + prevHtml: '', + + // 0, 1 + index: false, + + iframeMaxWidth: '100%', + + download: true, + counter: true, + appendCounterTo: '.lg-toolbar', + + swipeThreshold: 50, + enableSwipe: true, + enableDrag: true, + + dynamic: false, + dynamicEl: [], + galleryId: 1, + supportLegacyBrowser: true + }; + + function Plugin(element, options) { + + // Current lightGallery element + this.el = element; + + // lightGallery settings + this.s = _extends({}, defaults, options); + + // When using dynamic mode, ensure dynamicEl is an array + if (this.s.dynamic && this.s.dynamicEl !== 'undefined' && this.s.dynamicEl.constructor === Array && !this.s.dynamicEl.length) { + throw 'When using dynamic mode, you must also define dynamicEl as an Array.'; + } + + // lightGallery modules + this.modules = {}; + + // false when lightgallery complete first slide; + this.lGalleryOn = false; + + this.lgBusy = false; + + // Timeout function for hiding controls; + this.hideBartimeout = false; + + // To determine browser supports for touch events; + this.isTouch = 'ontouchstart' in document.documentElement; + + // Disable hideControlOnEnd if sildeEndAnimation is true + if (this.s.slideEndAnimatoin) { + this.s.hideControlOnEnd = false; + } + + this.items = []; + + // Gallery items + if (this.s.dynamic) { + this.items = this.s.dynamicEl; + } else { + if (this.s.selector === 'this') { + this.items.push(this.el); + } else if (this.s.selector !== '') { + if (this.s.selectWithin) { + this.items = document.querySelector(this.s.selectWithin).querySelectorAll(this.s.selector); + } else { + this.items = this.el.querySelectorAll(this.s.selector); + } + } else { + this.items = this.el.children; + } + } + + // .lg-item + + this.___slide = ''; + + // .lg-outer + this.outer = ''; + + this.init(); + + return this; + } + + Plugin.prototype.init = function () { + + var _this = this; + + // s.preload should not be more than $item.length + if (_this.s.preload > _this.items.length) { + _this.s.preload = _this.items.length; + } + + // if dynamic option is enabled execute immediately + var _hash = window.location.hash; + if (_hash.indexOf('lg=' + this.s.galleryId) > 0) { + + _this.index = parseInt(_hash.split('&slide=')[1], 10); + + _lgUtils2.default.addClass(document.body, 'lg-from-hash'); + if (!_lgUtils2.default.hasClass(document.body, 'lg-on')) { + _lgUtils2.default.addClass(document.body, 'lg-on'); + setTimeout(function () { + _this.build(_this.index); + }); + } + } + + if (_this.s.dynamic) { + + _lgUtils2.default.trigger(this.el, 'onBeforeOpen'); + + _this.index = _this.s.index || 0; + + // prevent accidental double execution + if (!_lgUtils2.default.hasClass(document.body, 'lg-on')) { + _lgUtils2.default.addClass(document.body, 'lg-on'); + setTimeout(function () { + _this.build(_this.index); + }); + } + } else { + + for (var i = 0; i < _this.items.length; i++) { + + /*jshint loopfunc: true */ + (function (index) { + + // Using different namespace for click because click event should not unbind if selector is same object('this') + _lgUtils2.default.on(_this.items[index], 'click.lgcustom', function (e) { + + e.preventDefault(); + + _lgUtils2.default.trigger(_this.el, 'onBeforeOpen'); + + _this.index = _this.s.index || index; + + if (!_lgUtils2.default.hasClass(document.body, 'lg-on')) { + _this.build(_this.index); + _lgUtils2.default.addClass(document.body, 'lg-on'); + } + }); + })(i); + } + } + }; + + Plugin.prototype.build = function (index) { + + var _this = this; + + _this.structure(); + + for (var key in window.lgModules) { + _this.modules[key] = new window.lgModules[key](_this.el); + } + + // initiate slide function + _this.slide(index, false, false); + + if (_this.s.keyPress) { + _this.keyPress(); + } + + // tinypin - go ahead and enable drag/swipe/mouse if only one item, we have looping turned off + //if (_this.items.length > 1) { + + _this.arrow(); + + setTimeout(function () { + _this.enableDrag(); + _this.enableSwipe(); + }, 50); + + if (_this.s.mousewheel) { + _this.mousewheel(); + } + //} + + _this.counter(); + + _this.closeGallery(); + + _lgUtils2.default.trigger(_this.el, 'onAfterOpen'); + + // Hide controllers if mouse doesn't move for some period + if (_this.s.hideBarsDelay > 0) { + + // Hide controls if user doesn't use mouse or touch after opening gallery + var initialHideBarTimeout = setTimeout(function () { + _lgUtils2.default.addClass(_this.outer, 'lg-hide-items'); + }, _this.s.hideBarsDelay); + _lgUtils2.default.on(_this.outer, 'mousemove.lg click.lg touchstart.lg', function () { + + // Cancel initalHideBarTimout if user uses mouse or touch events + // Before it fires + clearTimeout(initialHideBarTimeout); + + _lgUtils2.default.removeClass(_this.outer, 'lg-hide-items'); + + + clearTimeout(_this.hideBartimeout); + + // Timeout will be cleared on each slide movement also + _this.hideBartimeout = setTimeout(function () { + _lgUtils2.default.addClass(_this.outer, 'lg-hide-items'); + }, _this.s.hideBarsDelay); + }); + } + }; + + Plugin.prototype.structure = function () { + var list = ''; + var controls = ''; + var i = 0; + var subHtmlCont = ''; + var template; + var _this = this; + + document.body.insertAdjacentHTML('beforeend', '
'); + _lgUtils2.default.setVendor(document.querySelector('.lg-backdrop'), 'TransitionDuration', this.s.backdropDuration + 'ms'); + + // Create gallery items + for (i = 0; i < this.items.length; i++) { + list += '
'; + } + + // Create controlls + // tinypin - treat it the same + // if (this.s.controls && this.items.length > 1) { + controls = '
' + '' + '' + '
'; + // } + + if (this.s.appendSubHtmlTo === '.lg-sub-html') { + subHtmlCont = '
'; + } + + var ariaLabelledby = this.s.ariaLabelledby ? 'aria-labelledby="' + this.s.ariaLabelledby + '"' : ''; + var ariaDescribedby = this.s.ariaDescribedby ? 'aria-describedby="' + this.s.ariaDescribedby + '"' : ''; + + template = ''; + + document.body.insertAdjacentHTML('beforeend', template); + this.outer = document.querySelector('.lg-outer'); + this.outer.focus(); + this.___slide = this.outer.querySelectorAll('.lg-item'); + + if (this.s.useLeft) { + _lgUtils2.default.addClass(this.outer, 'lg-use-left'); + + // Set mode lg-slide if use left is true; + this.s.mode = 'lg-slide'; + } else { + _lgUtils2.default.addClass(this.outer, 'lg-use-css3'); + } + + // For fixed height gallery + _this.setTop(); + _lgUtils2.default.on(window, 'resize.lg orientationchange.lg', function () { + setTimeout(function () { + _this.setTop(); + }, 100); + }); + + // add class lg-current to remove initial transition + _lgUtils2.default.addClass(this.___slide[this.index], 'lg-current'); + + // add Class for css support and transition mode + if (this.doCss()) { + _lgUtils2.default.addClass(this.outer, 'lg-css3'); + } else { + _lgUtils2.default.addClass(this.outer, 'lg-css'); + + // Set speed 0 because no animation will happen if browser doesn't support css3 + this.s.speed = 0; + } + + _lgUtils2.default.addClass(this.outer, this.s.mode); + + // tinypin - treat it the same with 1 item + // if (this.s.enableDrag && this.items.length > 1) { + _lgUtils2.default.addClass(this.outer, 'lg-grab'); + // } + + if (this.s.showAfterLoad) { + _lgUtils2.default.addClass(this.outer, 'lg-show-after-load'); + } + + if (this.doCss()) { + var inner = this.outer.querySelector('.lg-inner'); + _lgUtils2.default.setVendor(inner, 'TransitionTimingFunction', this.s.cssEasing); + _lgUtils2.default.setVendor(inner, 'TransitionDuration', this.s.speed + 'ms'); + } + + setTimeout(function () { + _lgUtils2.default.addClass(document.querySelector('.lg-backdrop'), 'in'); + }); + + setTimeout(function () { + _lgUtils2.default.addClass(_this.outer, 'lg-visible'); + }, this.s.backdropDuration); + + + // tinypin -- add controls + this.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', ''); + + if (this.s.download) { + this.outer.querySelector('.lg-toolbar').insertAdjacentHTML('beforeend', ''); + } + + // Store the current scroll top value to scroll back after closing the gallery.. + this.prevScrollTop = document.documentElement.scrollTop || document.body.scrollTop; + }; + + // For fixed height gallery + Plugin.prototype.setTop = function () { + if (this.s.height !== '100%') { + var wH = window.innerHeight; + var top = (wH - parseInt(this.s.height, 10)) / 2; + var lGallery = this.outer.querySelector('.lg'); + if (wH >= parseInt(this.s.height, 10)) { + lGallery.style.top = top + 'px'; + } else { + lGallery.style.top = '0px'; + } + } + }; + + // Find css3 support + Plugin.prototype.doCss = function () { + // check for css animation support + var support = function support() { + var transition = ['transition', 'MozTransition', 'WebkitTransition', 'OTransition', 'msTransition', 'KhtmlTransition']; + var root = document.documentElement; + var i = 0; + for (i = 0; i < transition.length; i++) { + if (transition[i] in root.style) { + return true; + } + } + }; + + if (support()) { + return true; + } + + return false; + }; + + /** + * @desc Check the given src is video + * @param {String} src + * @return {Object} video type + * Ex:{ youtube : ["//www.youtube.com/watch?v=c0asJgSyxcY", "c0asJgSyxcY"] } + */ + Plugin.prototype.isVideo = function (src, index) { + + var html; + if (this.s.dynamic) { + html = this.s.dynamicEl[index].html; + } else { + html = this.items[index].getAttribute('data-html'); + } + + if (!src && html) { + return { + html5: true + }; + } + + var youtube = src.match(/\/\/(?:www\.)?youtu(?:\.be|be\.com|be-nocookie\.com)\/(?:watch\?v=|embed\/)?([a-z0-9\-\_\%]+)/i); + var vimeo = src.match(/\/\/(?:www\.)?vimeo.com\/([0-9a-z\-_]+)/i); + var dailymotion = src.match(/\/\/(?:www\.)?dai.ly\/([0-9a-z\-_]+)/i); + var vk = src.match(/\/\/(?:www\.)?(?:vk\.com|vkontakte\.ru)\/(?:video_ext\.php\?)(.*)/i); + + if (youtube) { + return { + youtube: youtube + }; + } else if (vimeo) { + return { + vimeo: vimeo + }; + } else if (dailymotion) { + return { + dailymotion: dailymotion + }; + } else if (vk) { + return { + vk: vk + }; + } + }; + + /** + * @desc Create image counter + * Ex: 1/10 + */ + Plugin.prototype.counter = function () { + if (this.s.counter) { + this.outer.querySelector(this.s.appendCounterTo).insertAdjacentHTML('beforeend', '
' + (parseInt(this.index, 10) + 1) + ' / ' + this.items.length + '
'); + } + }; + + /** + * @desc add sub-html into the slide + * @param {Number} index - index of the slide + */ + Plugin.prototype.addHtml = function (index) { + var subHtml = null; + var currentEle; + if (this.s.dynamic) { + subHtml = this.s.dynamicEl[index].subHtml; + } else { + currentEle = this.items[index]; + subHtml = currentEle.getAttribute('data-sub-html'); + if (this.s.getCaptionFromTitleOrAlt && !subHtml) { + subHtml = currentEle.getAttribute('title'); + if (subHtml && currentEle.querySelector('img')) { + subHtml = currentEle.querySelector('img').getAttribute('alt'); + } + } + } + + if (typeof subHtml !== 'undefined' && subHtml !== null) { + + // get first letter of subhtml + // if first letter starts with . or # get the html form the jQuery object + var fL = subHtml.substring(0, 1); + if (fL === '.' || fL === '#') { + if (this.s.subHtmlSelectorRelative && !this.s.dynamic) { + subHtml = currentEle.querySelector(subHtml).innerHTML; + } else { + subHtml = document.querySelector(subHtml).innerHTML; + } + } + } else { + subHtml = ''; + } + + if (this.s.appendSubHtmlTo === '.lg-sub-html') { + this.outer.querySelector(this.s.appendSubHtmlTo).innerHTML = subHtml; + } else { + this.___slide[index].insertAdjacentHTML('beforeend', subHtml); + } + + // Add lg-empty-html class if title doesn't exist + if (typeof subHtml !== 'undefined' && subHtml !== null) { + if (subHtml === '') { + _lgUtils2.default.addClass(this.outer.querySelector(this.s.appendSubHtmlTo), 'lg-empty-html'); + } else { + _lgUtils2.default.removeClass(this.outer.querySelector(this.s.appendSubHtmlTo), 'lg-empty-html'); + } + } + + _lgUtils2.default.trigger(this.el, 'onAfterAppendSubHtml', { + index: index + }); + }; + + /** + * @desc Preload slides + * @param {Number} index - index of the slide + */ + Plugin.prototype.preload = function (index) { + var i = 1; + var j = 1; + for (i = 1; i <= this.s.preload; i++) { + if (i >= this.items.length - index) { + break; + } + + this.loadContent(index + i, false, 0); + } + + for (j = 1; j <= this.s.preload; j++) { + if (index - j < 0) { + break; + } + + this.loadContent(index - j, false, 0); + } + }; + + /** + * @desc Load slide content into slide. + * @param {Number} index - index of the slide. + * @param {Boolean} rec - if true call loadcontent() function again. + * @param {Boolean} delay - delay for adding complete class. it is 0 except first time. + */ + Plugin.prototype.loadContent = function (index, rec, delay) { + + var _this = this; + var _hasPoster = false; + var _img; + var _src; + var _poster; + var _srcset; + var _sizes; + var _html; + var _alt; + var getResponsiveSrc = function getResponsiveSrc(srcItms) { + var rsWidth = []; + var rsSrc = []; + for (var i = 0; i < srcItms.length; i++) { + var __src = srcItms[i].split(' '); + + // Manage empty space + if (__src[0] === '') { + __src.splice(0, 1); + } + + rsSrc.push(__src[0]); + rsWidth.push(__src[1]); + } + + var wWidth = window.innerWidth; + for (var j = 0; j < rsWidth.length; j++) { + if (parseInt(rsWidth[j], 10) > wWidth) { + _src = rsSrc[j]; + break; + } + } + }; + + if (_this.s.dynamic) { + + if (_this.s.dynamicEl[index].poster) { + _hasPoster = true; + _poster = _this.s.dynamicEl[index].poster; + } + + _html = _this.s.dynamicEl[index].html; + _src = _this.s.dynamicEl[index].src; + _alt = _this.s.dynamicEl[index].alt; + + if (_this.s.dynamicEl[index].responsive) { + var srcDyItms = _this.s.dynamicEl[index].responsive.split(','); + getResponsiveSrc(srcDyItms); + } + + _srcset = _this.s.dynamicEl[index].srcset; + _sizes = _this.s.dynamicEl[index].sizes; + } else { + + if (_this.items[index].getAttribute('data-poster')) { + _hasPoster = true; + _poster = _this.items[index].getAttribute('data-poster'); + } + + _html = _this.items[index].getAttribute('data-html'); + _src = _this.items[index].getAttribute('href') || _this.items[index].getAttribute('data-src'); + _alt = _this.items[index].getAttribute('title'); + + if (_this.items[index].querySelector('img')) { + _alt = _alt || _this.items[index].querySelector('img').getAttribute('alt'); + } + + if (_this.items[index].getAttribute('data-responsive')) { + var srcItms = _this.items[index].getAttribute('data-responsive').split(','); + getResponsiveSrc(srcItms); + } + + _srcset = _this.items[index].getAttribute('data-srcset'); + _sizes = _this.items[index].getAttribute('data-sizes'); + } + + //if (_src || _srcset || _sizes || _poster) { + + var iframe = false; + if (_this.s.dynamic) { + if (_this.s.dynamicEl[index].iframe) { + iframe = true; + } + } else { + if (_this.items[index].getAttribute('data-iframe') === 'true') { + iframe = true; + } + } + + var _isVideo = _this.isVideo(_src, index); + if (!_lgUtils2.default.hasClass(_this.___slide[index], 'lg-loaded')) { + if (iframe) { + _this.___slide[index].insertAdjacentHTML('afterbegin', '
'); + } else if (_hasPoster) { + var videoClass = ''; + if (_isVideo && _isVideo.youtube) { + videoClass = 'lg-has-youtube'; + } else if (_isVideo && _isVideo.vimeo) { + videoClass = 'lg-has-vimeo'; + } else { + videoClass = 'lg-has-html5'; + } + + _this.___slide[index].insertAdjacentHTML('beforeend', '
'); + } else if (_isVideo) { + _this.___slide[index].insertAdjacentHTML('beforeend', '
'); + _lgUtils2.default.trigger(_this.el, 'hasVideo', { + index: index, + src: _src, + html: _html + }); + } else { + _alt = _alt ? 'alt="' + _alt + '"' : ''; + _this.___slide[index].insertAdjacentHTML('beforeend', '
'); + } + + _lgUtils2.default.trigger(_this.el, 'onAferAppendSlide', { + index: index + }); + + _img = _this.___slide[index].querySelector('.lg-object'); + if (_sizes) { + _img.setAttribute('sizes', _sizes); + } + + if (_srcset) { + _img.setAttribute('srcset', _srcset); + + if (this.s.supportLegacyBrowser) { + try { + picturefill({ + elements: [_img[0]] + }); + } catch (e) { + console.warn('If you want srcset to be supported for older browsers, ' + 'please include picturefil javascript library in your document.'); + } + } + } + + if (this.s.appendSubHtmlTo !== '.lg-sub-html') { + _this.addHtml(index); + } + + _lgUtils2.default.addClass(_this.___slide[index], 'lg-loaded'); + } + + _lgUtils2.default.on(_this.___slide[index].querySelector('.lg-object'), 'load.lg error.lg', function () { + + // For first time add some delay for displaying the start animation. + var _speed = 0; + + // Do not change the delay value because it is required for zoom plugin. + // If gallery opened from direct url (hash) speed value should be 0 + if (delay && !_lgUtils2.default.hasClass(document.body, 'lg-from-hash')) { + _speed = delay; + } + + setTimeout(function () { + _lgUtils2.default.addClass(_this.___slide[index], 'lg-complete'); + + _lgUtils2.default.trigger(_this.el, 'onSlideItemLoad', { + index: index, + delay: delay || 0 + }); + }, _speed); + }); + + // @todo check load state for html5 videos + if (_isVideo && _isVideo.html5 && !_hasPoster) { + _lgUtils2.default.addClass(_this.___slide[index], 'lg-complete'); + } + + if (rec === true) { + if (!_lgUtils2.default.hasClass(_this.___slide[index], 'lg-complete')) { + _lgUtils2.default.on(_this.___slide[index].querySelector('.lg-object'), 'load.lg error.lg', function () { + _this.preload(index); + }); + } else { + _this.preload(index); + } + } + + //} + }; + + /** + * @desc slide function for lightgallery + ** Slide() gets call on start + ** ** Set lg.on true once slide() function gets called. + ** Call loadContent() on slide() function inside setTimeout + ** ** On first slide we do not want any animation like slide of fade + ** ** So on first slide( if lg.on if false that is first slide) loadContent() should start loading immediately + ** ** Else loadContent() should wait for the transition to complete. + ** ** So set timeout s.speed + 50 + <=> ** loadContent() will load slide content in to the particular slide + ** ** It has recursion (rec) parameter. if rec === true loadContent() will call preload() function. + ** ** preload will execute only when the previous slide is fully loaded (images iframe) + ** ** avoid simultaneous image load + <=> ** Preload() will check for s.preload value and call loadContent() again accoring to preload value + ** loadContent() <====> Preload(); + + * @param {Number} index - index of the slide + * @param {Boolean} fromTouch - true if slide function called via touch event or mouse drag + * @param {Boolean} fromThumb - true if slide function called via thumbnail click + */ + Plugin.prototype.slide = function (index, fromTouch, fromThumb) { + + var _prevIndex = 0; + for (var i = 0; i < this.___slide.length; i++) { + if (_lgUtils2.default.hasClass(this.___slide[i], 'lg-current')) { + _prevIndex = i; + break; + } + } + + var _this = this; + + // Prevent if multiple call + // Required for hsh plugin + if (_this.lGalleryOn && _prevIndex === index) { + return; + } + + var _length = this.___slide.length; + var _time = _this.lGalleryOn ? this.s.speed : 0; + var _next = false; + var _prev = false; + + if (!_this.lgBusy) { + + if (this.s.download) { + var _src; + if (_this.s.dynamic) { + _src = _this.s.dynamicEl[index].downloadUrl !== false && (_this.s.dynamicEl[index].downloadUrl || _this.s.dynamicEl[index].src); + } else { + _src = _this.items[index].getAttribute('data-download-url') !== 'false' && (_this.items[index].getAttribute('data-download-url') || _this.items[index].getAttribute('href') || _this.items[index].getAttribute('data-src')); + } + + if (_src) { + document.getElementById('lg-download').setAttribute('href', _src); + _lgUtils2.default.removeClass(_this.outer, 'lg-hide-download'); + } else { + _lgUtils2.default.addClass(_this.outer, 'lg-hide-download'); + } + } + + + // tinypin + let siteUrlEl = document.getElementById('lg-siteUrl'); + if ( _this.s.dynamicEl[index].siteUrl ){ + siteUrlEl.setAttribute('href', _this.s.dynamicEl[index].siteUrl); + siteUrlEl.classList.remove("lg-control-hide"); + } else { + siteUrlEl.classList.add("lg-control-hide"); + } + + _lgUtils2.default.trigger(_this.el, 'onBeforeSlide', { + prevIndex: _prevIndex, + index: index, + fromTouch: fromTouch, + fromThumb: fromThumb + }); + + _this.lgBusy = true; + + clearTimeout(_this.hideBartimeout); + + // Add title if this.s.appendSubHtmlTo === lg-sub-html + if (this.s.appendSubHtmlTo === '.lg-sub-html') { + + // wait for slide animation to complete + setTimeout(function () { + _this.addHtml(index); + }, _time); + } + + this.arrowDisable(index); + + if (!fromTouch) { + + // remove all transitions + _lgUtils2.default.addClass(_this.outer, 'lg-no-trans'); + + for (var j = 0; j < this.___slide.length; j++) { + _lgUtils2.default.removeClass(this.___slide[j], 'lg-prev-slide'); + _lgUtils2.default.removeClass(this.___slide[j], 'lg-next-slide'); + } + + if (index < _prevIndex) { + _prev = true; + if (index === 0 && _prevIndex === _length - 1 && !fromThumb) { + // tinypin - don't flip (loop) + // _prev = false; + // _next = true; + } + } else if (index > _prevIndex) { + _next = true; + if (index === _length - 1 && _prevIndex === 0 && !fromThumb) { + // tinypin - don't flip (loop) + // _prev = true; + // _next = false; + } + } + + if (_prev) { + //prevslide + _lgUtils2.default.addClass(this.___slide[index], 'lg-prev-slide'); + _lgUtils2.default.addClass(this.___slide[_prevIndex], 'lg-next-slide'); + } else if (_next) { + // next slide + _lgUtils2.default.addClass(this.___slide[index], 'lg-next-slide'); + _lgUtils2.default.addClass(this.___slide[_prevIndex], 'lg-prev-slide'); + } + + // give 50 ms for browser to add/remove class + setTimeout(function () { + _lgUtils2.default.removeClass(_this.outer.querySelector('.lg-current'), 'lg-current'); + + //_this.$slide.eq(_prevIndex).removeClass('lg-current'); + _lgUtils2.default.addClass(_this.___slide[index], 'lg-current'); + + // reset all transitions + _lgUtils2.default.removeClass(_this.outer, 'lg-no-trans'); + }, 50); + } else { + + var touchPrev = index - 1; + var touchNext = index + 1; + + // tinypin - we aren't looping + // if (index === 0 && _prevIndex === _length - 1) { + // // next slide + // touchNext = 0; + // touchPrev = _length - 1; + // } else if (index === _length - 1 && _prevIndex === 0) { + // // prev slide + // touchNext = 0; + // touchPrev = _length - 1; + // } + + _lgUtils2.default.removeClass(_this.outer.querySelector('.lg-prev-slide'), 'lg-prev-slide'); + _lgUtils2.default.removeClass(_this.outer.querySelector('.lg-current'), 'lg-current'); + _lgUtils2.default.removeClass(_this.outer.querySelector('.lg-next-slide'), 'lg-next-slide'); + _lgUtils2.default.addClass(_this.___slide[touchPrev], 'lg-prev-slide'); + _lgUtils2.default.addClass(_this.___slide[touchNext], 'lg-next-slide'); + _lgUtils2.default.addClass(_this.___slide[index], 'lg-current'); + } + + if (_this.lGalleryOn) { + setTimeout(function () { + _this.loadContent(index, true, 0); + }, this.s.speed + 50); + + setTimeout(function () { + _this.lgBusy = false; + _lgUtils2.default.trigger(_this.el, 'onAfterSlide', { + prevIndex: _prevIndex, + index: index, + fromTouch: fromTouch, + fromThumb: fromThumb + }); + }, this.s.speed); + } else { + _this.loadContent(index, true, _this.s.backdropDuration); + + _this.lgBusy = false; + _lgUtils2.default.trigger(_this.el, 'onAfterSlide', { + prevIndex: _prevIndex, + index: index, + fromTouch: fromTouch, + fromThumb: fromThumb + }); + } + + _this.lGalleryOn = true; + + if (this.s.counter) { + if (document.getElementById('lg-counter-current')) { + document.getElementById('lg-counter-current').innerHTML = index + 1; + } + } + + + } + }; + + /** + * @desc Go to next slide + * @param {Boolean} fromTouch - true if slide function called via touch event + */ + Plugin.prototype.goToNextSlide = function (fromTouch) { + var _this = this; + if (!_this.lgBusy) { + if (_this.index + 1 < _this.___slide.length) { + _this.index++; + _lgUtils2.default.trigger(_this.el, 'onBeforeNextSlide', { + index: _this.index + }); + _this.slide(_this.index, fromTouch, false); + } else { + if (_this.s.loop) { + _this.index = 0; + _lgUtils2.default.trigger(_this.el, 'onBeforeNextSlide', { + index: _this.index + }); + _this.slide(_this.index, fromTouch, false); + } else if (_this.s.slideEndAnimatoin) { + _lgUtils2.default.addClass(_this.outer, 'lg-right-end'); + setTimeout(function () { + _lgUtils2.default.removeClass(_this.outer, 'lg-right-end'); + }, 400); + } + } + } + }; + + /** + * @desc Go to previous slide + * @param {Boolean} fromTouch - true if slide function called via touch event + */ + Plugin.prototype.goToPrevSlide = function (fromTouch) { + var _this = this; + if (!_this.lgBusy) { + if (_this.index > 0) { + _this.index--; + _lgUtils2.default.trigger(_this.el, 'onBeforePrevSlide', { + index: _this.index, + fromTouch: fromTouch + }); + _this.slide(_this.index, fromTouch, false); + } else { + if (_this.s.loop) { + _this.index = _this.items.length - 1; + _lgUtils2.default.trigger(_this.el, 'onBeforePrevSlide', { + index: _this.index, + fromTouch: fromTouch + }); + _this.slide(_this.index, fromTouch, false); + } else if (_this.s.slideEndAnimatoin) { + _lgUtils2.default.addClass(_this.outer, 'lg-left-end'); + setTimeout(function () { + _lgUtils2.default.removeClass(_this.outer, 'lg-left-end'); + }, 400); + } + } + } + }; + + Plugin.prototype.keyPress = function () { + var _this = this; + if (this.items.length > 1) { + _lgUtils2.default.on(window, 'keyup.lg', function (e) { + if (_this.items.length > 1) { + if (e.keyCode === 37) { + e.preventDefault(); + _this.goToPrevSlide(); + } + + if (e.keyCode === 39) { + e.preventDefault(); + _this.goToNextSlide(); + } + } + }); + } + + _lgUtils2.default.on(window, 'keydown.lg', function (e) { + if (_this.s.escKey === true && e.keyCode === 27) { + e.preventDefault(); + if (!_lgUtils2.default.hasClass(_this.outer, 'lg-thumb-open')) { + _this.destroy(); + } else { + _lgUtils2.default.removeClass(_this.outer, 'lg-thumb-open'); + } + } + }); + }; + + Plugin.prototype.arrow = function () { + var _this = this; + _lgUtils2.default.on(this.outer.querySelector('.lg-prev'), 'click.lg', function () { + _this.goToPrevSlide(); + }); + + _lgUtils2.default.on(this.outer.querySelector('.lg-next'), 'click.lg', function () { + _this.goToNextSlide(); + }); + }; + + Plugin.prototype.arrowDisable = function (index) { + + + // Disable arrows if s.hideControlOnEnd is true + if (!this.s.loop && this.s.hideControlOnEnd) { + + var next = this.outer.querySelector('.lg-next'); + var prev = this.outer.querySelector('.lg-prev'); + + if (index + 1 < this.___slide.length) { + next.removeAttribute('disabled'); + _lgUtils2.default.removeClass(next, 'disabled'); + } else { + if ( next ){ + next.setAttribute('disabled', 'disabled'); + _lgUtils2.default.addClass(next, 'disabled'); + } + } + + if (index > 0) { + prev.removeAttribute('disabled'); + _lgUtils2.default.removeClass(prev, 'disabled'); + } else { + if ( prev ){ + prev.setAttribute('disabled', 'disabled'); + _lgUtils2.default.addClass(prev, 'disabled'); + } + } + } + }; + + Plugin.prototype.setTranslate = function (el, xValue, yValue) { + // jQuery supports Automatic CSS prefixing since jQuery 1.8.0 + if (this.s.useLeft) { + el.style.left = xValue; + } else { + _lgUtils2.default.setVendor(el, 'Transform', 'translate3d(' + xValue + 'px, ' + yValue + 'px, 0px)'); + } + }; + + Plugin.prototype.touchMove = function (startCoords, endCoords) { + + var distance = endCoords - startCoords; + + if (Math.abs(distance) > 15) { + // reset opacity and transition duration + _lgUtils2.default.addClass(this.outer, 'lg-dragging'); + + // move current slide + this.setTranslate(this.___slide[this.index], distance, 0); + + // move next and prev slide with current slide + this.setTranslate(document.querySelector('.lg-prev-slide'), -this.___slide[this.index].clientWidth + distance, 0); + this.setTranslate(document.querySelector('.lg-next-slide'), this.___slide[this.index].clientWidth + distance, 0); + } + }; + + Plugin.prototype.touchEnd = function (distance) { + var _this = this; + + // keep slide animation for any mode while dragg/swipe + if (_this.s.mode !== 'lg-slide') { + _lgUtils2.default.addClass(_this.outer, 'lg-slide'); + } + + for (var i = 0; i < this.___slide.length; i++) { + if (!_lgUtils2.default.hasClass(this.___slide[i], 'lg-current') && !_lgUtils2.default.hasClass(this.___slide[i], 'lg-prev-slide') && !_lgUtils2.default.hasClass(this.___slide[i], 'lg-next-slide')) { + this.___slide[i].style.opacity = '0'; + } + } + + // set transition duration + setTimeout(function () { + _lgUtils2.default.removeClass(_this.outer, 'lg-dragging'); + if (distance < 0 && Math.abs(distance) > _this.s.swipeThreshold) { + _this.goToNextSlide(true); + } else if (distance > 0 && Math.abs(distance) > _this.s.swipeThreshold) { + _this.goToPrevSlide(true); + } else if (Math.abs(distance) < 5) { + + // Trigger click if distance is less than 5 pix + _lgUtils2.default.trigger(_this.el, 'onSlideClick'); + } + + for (var i = 0; i < _this.___slide.length; i++) { + _this.___slide[i].removeAttribute('style'); + } + }); + + // remove slide class once drag/swipe is completed if mode is not slide + setTimeout(function () { + if (!_lgUtils2.default.hasClass(_this.outer, 'lg-dragging') && _this.s.mode !== 'lg-slide') { + _lgUtils2.default.removeClass(_this.outer, 'lg-slide'); + } + }, _this.s.speed + 100); + }; + + Plugin.prototype.enableSwipe = function () { + var _this = this; + var startCoords = 0; + var endCoords = 0; + var isMoved = false; + + if (_this.s.enableSwipe && _this.isTouch && _this.doCss()) { + + for (var i = 0; i < _this.___slide.length; i++) { + /*jshint loopfunc: true */ + _lgUtils2.default.on(_this.___slide[i], 'touchstart.lg', function (e) { + if (!_lgUtils2.default.hasClass(_this.outer, 'lg-zoomed') && !_this.lgBusy) { + e.preventDefault(); + _this.manageSwipeClass(); + startCoords = e.targetTouches[0].pageX; + } + }); + } + + for (var j = 0; j < _this.___slide.length; j++) { + /*jshint loopfunc: true */ + _lgUtils2.default.on(_this.___slide[j], 'touchmove.lg', function (e) { + if (!_lgUtils2.default.hasClass(_this.outer, 'lg-zoomed')) { + e.preventDefault(); + endCoords = e.targetTouches[0].pageX; + _this.touchMove(startCoords, endCoords); + isMoved = true; + } + }); + } + + for (var k = 0; k < _this.___slide.length; k++) { + /*jshint loopfunc: true */ + _lgUtils2.default.on(_this.___slide[k], 'touchend.lg', function () { + if (!_lgUtils2.default.hasClass(_this.outer, 'lg-zoomed')) { + if (isMoved) { + isMoved = false; + _this.touchEnd(endCoords - startCoords); + } else { + _lgUtils2.default.trigger(_this.el, 'onSlideClick'); + } + } + }); + } + } + }; + + Plugin.prototype.enableDrag = function () { + var _this = this; + var startCoords = 0; + var endCoords = 0; + var isDraging = false; + var isMoved = false; + if (_this.s.enableDrag && !_this.isTouch && _this.doCss()) { + for (var i = 0; i < _this.___slide.length; i++) { + /*jshint loopfunc: true */ + _lgUtils2.default.on(_this.___slide[i], 'mousedown.lg', function (e) { + // execute only on .lg-object + if (!_lgUtils2.default.hasClass(_this.outer, 'lg-zoomed')) { + if (_lgUtils2.default.hasClass(e.target, 'lg-object') || _lgUtils2.default.hasClass(e.target, 'lg-video-play')) { + e.preventDefault(); + + if (!_this.lgBusy) { + _this.manageSwipeClass(); + startCoords = e.pageX; + isDraging = true; + + // ** Fix for webkit cursor issue https://code.google.com/p/chromium/issues/detail?id=26723 + _this.outer.scrollLeft += 1; + _this.outer.scrollLeft -= 1; + + // * + + _lgUtils2.default.removeClass(_this.outer, 'lg-grab'); + _lgUtils2.default.addClass(_this.outer, 'lg-grabbing'); + + _lgUtils2.default.trigger(_this.el, 'onDragstart'); + } + } + } + }); + } + + _lgUtils2.default.on(window, 'mousemove.lg', function (e) { + if (isDraging) { + isMoved = true; + endCoords = e.pageX; + _this.touchMove(startCoords, endCoords); + _lgUtils2.default.trigger(_this.el, 'onDragmove'); + } + }); + + _lgUtils2.default.on(window, 'mouseup.lg', function (e) { + if (isMoved) { + isMoved = false; + _this.touchEnd(endCoords - startCoords); + _lgUtils2.default.trigger(_this.el, 'onDragend'); + } else if (_lgUtils2.default.hasClass(e.target, 'lg-object') || _lgUtils2.default.hasClass(e.target, 'lg-video-play')) { + _lgUtils2.default.trigger(_this.el, 'onSlideClick'); + } + + // Prevent execution on click + if (isDraging) { + isDraging = false; + _lgUtils2.default.removeClass(_this.outer, 'lg-grabbing'); + _lgUtils2.default.addClass(_this.outer, 'lg-grab'); + } + }); + } + }; + + Plugin.prototype.manageSwipeClass = function () { + var touchNext = this.index + 1; + var touchPrev = this.index - 1; + var length = this.___slide.length; + if (this.s.loop) { + if (this.index === 0) { + touchPrev = length - 1; + } else if (this.index === length - 1) { + touchNext = 0; + } + } + + for (var i = 0; i < this.___slide.length; i++) { + _lgUtils2.default.removeClass(this.___slide[i], 'lg-next-slide'); + _lgUtils2.default.removeClass(this.___slide[i], 'lg-prev-slide'); + } + + if (touchPrev > -1) { + _lgUtils2.default.addClass(this.___slide[touchPrev], 'lg-prev-slide'); + } + + _lgUtils2.default.addClass(this.___slide[touchNext], 'lg-next-slide'); + }; + + Plugin.prototype.mousewheel = function () { + var _this = this; + _lgUtils2.default.on(_this.outer, 'mousewheel.lg', function (e) { + + if (!e.deltaY) { + return; + } + + if (e.deltaY > 0) { + _this.goToPrevSlide(); + } else { + _this.goToNextSlide(); + } + + e.preventDefault(); + }); + }; + + Plugin.prototype.closeGallery = function () { + + var _this = this; + var mousedown = false; + _lgUtils2.default.on(this.outer.querySelector('.lg-close'), 'click.lg', function () { + _this.destroy(); + }); + + if (_this.s.closable) { + + // If you drag the slide and release outside gallery gets close on chrome + // for preventing this check mousedown and mouseup happened on .lg-item or lg-outer + _lgUtils2.default.on(_this.outer, 'mousedown.lg', function (e) { + + if (_lgUtils2.default.hasClass(e.target, 'lg-outer') || _lgUtils2.default.hasClass(e.target, 'lg-item') || _lgUtils2.default.hasClass(e.target, 'lg-img-wrap')) { + mousedown = true; + } else { + mousedown = false; + } + }); + + _lgUtils2.default.on(_this.outer, 'mouseup.lg', function (e) { + + if (_lgUtils2.default.hasClass(e.target, 'lg-outer') || _lgUtils2.default.hasClass(e.target, 'lg-item') || _lgUtils2.default.hasClass(e.target, 'lg-img-wrap') && mousedown) { + if (!_lgUtils2.default.hasClass(_this.outer, 'lg-dragging')) { + _this.destroy(); + } + } + }); + } + }; + + Plugin.prototype.destroy = function (d) { + + var _this = this; + + if (!d) { + _lgUtils2.default.trigger(_this.el, 'onBeforeClose'); + } + + document.body.scrollTop = _this.prevScrollTop; + document.documentElement.scrollTop = _this.prevScrollTop; + + /** + * if d is false or undefined destroy will only close the gallery + * plugins instance remains with the element + * + * if d is true destroy will completely remove the plugin + */ + + if (d) { + if (!_this.s.dynamic) { + // only when not using dynamic mode is $items a jquery collection + + for (var i = 0; i < this.items.length; i++) { + _lgUtils2.default.off(this.items[i], '.lg'); + _lgUtils2.default.off(this.items[i], '.lgcustom'); + } + } + + var lguid = _this.el.getAttribute('lg-uid'); + delete window.lgData[lguid]; + _this.el.removeAttribute('lg-uid'); + } + + // Unbind all events added by lightGallery + _lgUtils2.default.off(this.el, '.lgtm'); + + // Distroy all lightGallery modules + for (var key in window.lgModules) { + if (_this.modules[key]) { + _this.modules[key].destroy(d); + } + } + + this.lGalleryOn = false; + + clearTimeout(_this.hideBartimeout); + this.hideBartimeout = false; + _lgUtils2.default.off(window, '.lg'); + _lgUtils2.default.removeClass(document.body, 'lg-on'); + _lgUtils2.default.removeClass(document.body, 'lg-from-hash'); + + if (_this.outer) { + _lgUtils2.default.removeClass(_this.outer, 'lg-visible'); + } + + _lgUtils2.default.removeClass(document.querySelector('.lg-backdrop'), 'in'); + setTimeout(function () { + try { + if (_this.outer) { + _this.outer.parentNode.removeChild(_this.outer); + } + + if (document.querySelector('.lg-backdrop')) { + document.querySelector('.lg-backdrop').parentNode.removeChild(document.querySelector('.lg-backdrop')); + } + + if (!d) { + _lgUtils2.default.trigger(_this.el, 'onCloseAfter'); + } + _this.el.focus(); + } catch (err) {} + }, _this.s.backdropDuration + 50); + }; + + window.lightGallery = function (el, options) { + if (!el) { + return; + } + + try { + if (!el.getAttribute('lg-uid')) { + var uid = 'lg' + window.lgData.uid++; + window.lgData[uid] = new Plugin(el, options); + el.setAttribute('lg-uid', uid); + } else { + window.lgData[el.getAttribute('lg-uid')].init(); + } + } catch (err) { + console.error('lightGallery has not initiated properly', err); + } + }; + }); + + },{"./lg-utils":1}]},{},[2])(2) + }); \ No newline at end of file diff --git a/static/reef-databind.js b/static/reef-databind.js index 8c68643..9a36032 100644 --- 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)); } } diff --git a/static/utils.js b/static/utils.js index 86df23d..147bdbc 100644 --- a/static/utils.js +++ b/static/utils.js @@ -30,4 +30,32 @@ function parseQueryString(qs){ } } return obj; -} \ No newline at end of file +} + +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)]; +}