diff --git a/static/app.js b/static/app.js index 4d35938..bfaa194 100644 --- a/static/app.js +++ b/static/app.js @@ -60,6 +60,20 @@ app.addSetter("hash.update", (data) => { } }); +app.addSetter("photoswipe.close", (data) => { + closePhotoSwipe(); +}); + +app.addSetter("photoswipe.openLink", (data) => { + let siteUrl = photoSwipeGallery.currItem.siteUrl; + console.log("siteUrl=", siteUrl); + + if ( siteUrl ){ + window.open(siteUrl); + } +}); + + let store = new Reef.Store({ data: { hash: { @@ -145,11 +159,16 @@ for (const [name, f] of Object.entries(app.getComponents())) { document.addEventListener('click', (el) => { + let ps = el.target.closest('[data-photoswipe'); + if ( ps ){ + openPhotoSwipe(ps); + return; + } + // 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 && !isPhotoSwipeOpen ){ store.do('navbar.closeMenu'); } @@ -213,6 +232,10 @@ window.addEventListener('resize', (evt) => { store.do("render"); }); +document.addEventListener('render', () => { + console.log("render"); +}); + Reef.databind(appComponent); store.do('load.user'); diff --git a/static/client.css b/static/client.css index 112b339..3c84c8b 100644 --- a/static/client.css +++ b/static/client.css @@ -1,3 +1,11 @@ +body { + background-color: black; +} + +#app { + background-color: white; +} + .brickwall { display: flex; } @@ -293,4 +301,27 @@ .navbar-item span, .navbar-item img{ line-height: 24px; vertical-align: middle; -} \ No newline at end of file +} + +#pswp__button--edit { + background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9JzMwMHB4JyB3aWR0aD0nMzAwcHgnICBmaWxsPSIjRkZGRkZGIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGRhdGEtbmFtZT0iTGF5ZXIgMSIgdmlld0JveD0iMCAwIDEwMCAxMDAiIHg9IjBweCIgeT0iMHB4Ij48dGl0bGU+NTE8L3RpdGxlPjxwYXRoIGQ9Ik04NC44NTAxMiw1MFY4MS43NDUxMkExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw3MS41OTUyNCw5NUgxOC4yNTQ5MUExMy4yNzAxMiwxMy4yNzAxMiwwLDAsMSw1LDgxLjc0NTEyVjI4LjQwNTI4QTEzLjI3MDEyLDEzLjI3MDEyLDAsMCwxLDE4LjI1NDkxLDE1LjE1MDRINTBhMi41LDIuNSwwLDAsMSwwLDVIMTguMjU0OTFBOC4yNjQyMyw4LjI2NDIzLDAsMCwwLDEwLDI4LjQwNTI4VjgxLjc0NTEyQTguMjY0MjQsOC4yNjQyNCwwLDAsMCwxOC4yNTQ5MSw5MEg3MS41OTUyNGE4LjI2NDIzLDguMjY0MjMsMCwwLDAsOC4yNTQ4OC04LjI1NDg5VjUwYTIuNSwyLjUsMCwwLDEsNSwwWk04OS4xNDg0Niw2LjIzNzkyYTQuMjI2NjEsNC4yMjY2MSwwLDAsMC01Ljk3NzI5LDBsLTMzLjk2MjksMzMuOTYzTDU5Ljc5OTE2LDUwLjc5MTc2bDMzLjk2Mjg5LTMzLjk2M2E0LjIyNjUzLDQuMjI2NTMsMCwwLDAsMC01Ljk3NzIzWk00My42MjM4LDU4LjMxMjg3bDEzLjAwOTQtNC4zNTUxNkw0Ni4wNDIyNiw0My4zNjY4M2wtNC4zNTUxLDEzLjAwOTRBMS41MzAwNSwxLjUzMDA1LDAsMCwwLDQzLjYyMzgsNTguMzEyODdaIj48L3BhdGg+PC9zdmc+"); + background-repeat: no-repeat; + background-size: 20px 20px; + background-position: 13px 11px; +} + +#pswp__button--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: 12px 12px; +} + +.pswp__siteUrl--empty{ + display: none; +} + +.pswp__caption__center { + text-align: center; + max-width: 1200px; +} diff --git a/static/components/about.js b/static/components/about.js index fca785e..9ff7295 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
+  zoom viewer » photoswipe +
 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/brickwall.js b/static/components/brickwall.js index b9cf2d8..e0ccd39 100644 --- a/static/components/brickwall.js +++ b/static/components/brickwall.js @@ -3,6 +3,14 @@ app.addSetter('brickwall.toggleHiddenBoards', (data) => { window.localStorage.showHiddenBoards = data.showHiddenBoards; }); +app.addSetter('brickwall.zoom', (data, el) => { + let pinId = el.getAttribute('data-pinid'); + openPhotoSwipe({ + pinId: pinId, + element: el + }); +}); + app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { store: store, @@ -82,7 +90,7 @@ app.addComponent('brickwall', (store) => { return new Reef('#brickwall', { function createBrickForPin(board, pin){ return { height: pin.thumbnailHeight, template: /*html*/`
- +
diff --git a/static/components/editpin.js b/static/components/editpin.js index 696b514..3163f70 100644 --- a/static/components/editpin.js +++ b/static/components/editpin.js @@ -1,13 +1,20 @@ app.addSetter('editPinModal.open', (data) => { + let pinId = photoSwipeGallery.currItem.pinId; + closePhotoSwipe(); + data.editPinModal.pin = getPinById(pinId); data.editPinModal.active = true; }); 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; + + openPhotoSwipe(pinId); }); app.addGetter('editPinModal.isValid', (data) => { @@ -111,9 +118,6 @@ 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 ) { diff --git a/static/components/pinzoom.js b/static/components/pinzoom.js index cf1823c..8234f94 100644 --- a/static/components/pinzoom.js +++ b/static/components/pinzoom.js @@ -31,12 +31,93 @@ app.addSetter('pinZoomModal.open', (data, el) => { 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; + // } + + + let pswpElement = document.getElementById("pswp"); + + var items = []; + for ( let i = 0; i < data.board.pins.length; ++i ){ + items.push({ + src: getThumbnailImagePath(data.board.pins[i].id), + w: data.board.pins[i].originalWidth, + h: data.board.pins[i].originalHeight + }); } + + let options = { + index: getPinIndexById(pinId), + loop: false, + bgOpacity: 0.85, + getThumbBoundsFn: function(index) { + // See Options->getThumbBoundsFn section of docs for more info + var thumbnail = el, + pageYScroll = window.pageYOffset || document.documentElement.scrollTop, + rect = thumbnail.getBoundingClientRect(); + + return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; + }, + }; + + let gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); + + // var realViewportWidth, + // useLargeImages = false, + // firstResize = true, + // imageSrcWillChange; + + // gallery.listen('beforeResize', function() { + + // var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1; + // dpiRatio = Math.min(dpiRatio, 2.5); + // realViewportWidth = gallery.viewportSize.x * dpiRatio; + + + // if(realViewportWidth >= 1200 || (!gallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) { + // if(!useLargeImages) { + // useLargeImages = true; + // imageSrcWillChange = true; + // } + + // } else { + // if(useLargeImages) { + // useLargeImages = false; + // imageSrcWillChange = true; + // } + // } + + // if(imageSrcWillChange && !firstResize) { + // gallery.invalidateCurrItems(); + // } + + // if(firstResize) { + // firstResize = false; + // } + + // imageSrcWillChange = false; + + // }); + + // gallery.listen('gettingData', function(index, item) { + // // if( useLargeImages ) { + // // item.src = item.o.src; + // // item.w = item.o.w; + // // item.h = item.o.h; + // // } else { + // // item.src = item.m.src; + // // item.w = item.m.w; + // // item.h = item.m.h; + // // } + // }); + + + gallery.init(); + }); diff --git a/static/index.html b/static/index.html index 3af4307..ca1a7d7 100644 --- a/static/index.html +++ b/static/index.html @@ -17,11 +17,80 @@ - + + + +
+ + + + @@ -38,6 +107,11 @@ + + + + + \ No newline at end of file diff --git a/static/photoswipe/default-skin/default-skin.css b/static/photoswipe/default-skin/default-skin.css new file mode 100644 index 0000000..3aeaf3a --- /dev/null +++ b/static/photoswipe/default-skin/default-skin.css @@ -0,0 +1,482 @@ +/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */ +/* + + Contents: + + 1. Buttons + 2. Share modal and links + 3. Index indicator ("1 of X" counter) + 4. Caption + 5. Loading indicator + 6. Additional styles (root element, top bar, idle state, hidden state, etc.) + +*/ +/* + + 1. Buttons + + */ +/* + + + + + + + + + + +
+
+
+
+
+
+
+ + + + + + +
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/static/utils.js b/static/utils.js index 86df23d..cb8ab7e 100644 --- a/static/utils.js +++ b/static/utils.js @@ -30,4 +30,124 @@ function parseQueryString(qs){ } } return obj; -} \ No newline at end of file +} + +let photoSwipeGallery = null; +let isPhotoSwipeOpen = false; + +function closePhotoSwipe(){ + photoSwipeGallery.close(); + setTimeout( () => { + isPhotoSwipeOpen = false; + }, 10); +} + +function openPhotoSwipe(pinId){ + isPhotoSwipeOpen = true; + + let data = store.data; + + let pswpElement = document.getElementById("pswp"); + + var items = []; + for ( let i = 0; i < data.board.pins.length; ++i ){ + items.push({ + msrc: getThumbnailImagePath(data.board.pins[i].id), + src: getThumbnailImagePath(data.board.pins[i].id), + w: data.board.pins[i].originalWidth, + h: data.board.pins[i].originalHeight, + title: data.board.pins[i].description, + pinId: data.board.pins[i].id, + siteUrl: data.board.pins[i].siteUrl, + originalImage: { + src: getOriginalImagePath(data.board.pins[i].id), + w: data.board.pins[i].originalWidth, + h: data.board.pins[i].originalHeight + }, + mediumImage: { + src: getThumbnailImagePath(data.board.pins[i].id), + w: data.board.pins[i].originalWidth, + h: data.board.pins[i].originalHeight + } + }); + } + + let options = { + showAnimationDuration: 0, + hideAnimationDuration: 0, + clickToCloseNonZoomable: false, + closeOnScroll: false, + pinchToClose: false, + shareEl: false, + shareButtons: [], + index: getPinIndexById(pinId), + loop: false, + bgOpacity: 0.85, + + history: false + }; + + // if we want the zoom open animations + // options.getThumbBoundsFn: isThumbnailClick ? function(index) { + // // See Options->getThumbBoundsFn section of docs for more info + // var thumbnail = el, + // pageYScroll = window.pageYOffset || document.documentElement.scrollTop, + // rect = thumbnail.getBoundingClientRect(); + + // return {x:rect.left, y:rect.top + pageYScroll, w:rect.width}; + // } : null, + + photoSwipeGallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); + + let realViewportWidth, + useLargeImages = false, + firstResize = true, + imageSrcWillChange; + + photoSwipeGallery.listen('beforeResize', function() { + + var dpiRatio = window.devicePixelRatio ? window.devicePixelRatio : 1; + dpiRatio = Math.min(dpiRatio, 2.5); + realViewportWidth = photoSwipeGallery.viewportSize.x * dpiRatio; + + + if(realViewportWidth >= 1200 || (!photoSwipeGallery.likelyTouchDevice && realViewportWidth > 800) || screen.width > 1200 ) { + if(!useLargeImages) { + useLargeImages = true; + imageSrcWillChange = true; + } + + } else { + if(useLargeImages) { + useLargeImages = false; + imageSrcWillChange = true; + } + } + + if(imageSrcWillChange && !firstResize) { + photoSwipeGallery.invalidateCurrItems(); + } + + if(firstResize) { + firstResize = false; + } + + imageSrcWillChange = false; + + }); + + photoSwipeGallery.listen('gettingData', function(index, item) { + if( useLargeImages ) { + item.src = item.originalImage.src; + item.w = item.originalImage.w; + item.h = item.originalImage.h; + } else { + item.src = item.mediumImage.src; + item.w = item.mediumImage.w; + item.h = item.mediumImage.h; + } + }); + + + photoSwipeGallery.init(); +}