react-editable-photo-grid 3.0.1 → 3.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1 -1
- package/package.json +2 -2
- package/src/styles.css +117 -95
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var n={365:(n,e,t)=>{"use strict";t.d(e,{A:()=>l});var o=t(601),r=t.n(o),i=t(314),a=t.n(i)()(r());a.push([n.id,".photogrid--checkbox {\n background: white;\n border: 2px solid white;\n cursor: pointer;\n width: 18px;\n height: 18px;\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 10;\n}\n\n.photogrid--checkbox.active {\n background: #333;\n}\n\n.photogrid {\n padding: 0 0.125rem;\n}\n\n.photogrid--row__controls {\n display: block;\n position: absolute;\n left: 0.25rem;\n top: 50%;\n transform: translateY(-50%);\n z-index: 20;\n}\n\n.photogrid--row__controls > li {\n display: block;\n}\n\n.photogrid--photo__controls {\n display: block;\n width: 100%;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0.5rem;\n text-align: center;\n}\n\n.photogrid--photo__controls > li {\n display: inline-block;\n}\n\n.photogrid--photo__controls > li + li {\n margin-left: 0.25rem;\n}\n\n.photogrid--row__controls > li + li {\n margin-top: 0.25rem;\n}\n\n.photogrid--photo__controls .photo__control, .photogrid--row__controls .row__control {\n width: 36px;\n height: 36px;\n display: block;\n background: #ddd;\n color: #333;\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.photogrid--photo__row {\n display: block;\n background: transparent;\n min-height: 0;\n position: relative;\n z-index: 10;\n padding: 0;\n}\n\n.photogrid--photo__row.editing {\n padding-left: 2.75rem;\n}\n\n.photogrid--photo__column {\n position: relative;\n vertical-align: middle;\n display: block;\n margin: 0.125rem;\n}\n\n.photogrid--photo__actions {\n display: none;\n position: absolute;\n z-index: 20;\n bottom: 4px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.photogrid--photo__column:hover .photogrid--photo__actions {\n display: flex;\n}\n\n.photogrid--photo_overlay, .photogrid__gallery_item__overlay {\n min-height: 0;\n display: none;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: rgba(0, 0, 0, 0.4);\n color: white;\n padding: 0.5rem;\n z-index: 200;\n}\n\n.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n padding: 0;\n}\n\n.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p {\n margin: 7px 0 0 0;\n padding: 0;\n font-size: 12px;\n}\n\n.photogrid--photo__column > .photo__position {\n position: absolute;\n top: 0;\n z-index: 20;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0, 0, 0, 0.65);\n color: white;\n padding: 0.1rem;\n}\n\n.photogrid--photo__column > img {\n display: block;\n max-width: 100%;\n max-height: 750px;\n height: auto;\n margin: 0;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.custom__gallery {\n display: block;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: 0;\n margin: 0 auto;\n width: 100%;\n height: 100vh;\n z-index: 9000;\n background: black;\n}\n\n.custom__gallery .custom__gallery__container {\n vertical-align: middle;\n display: block;\n height: 100%;\n margin: 0 auto;\n position: relative;\n}\n\n.custom__gallery .custom__gallery__container .previous__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n left: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .previous__item > * {\n pointer-events: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images {\n height: 100vh;\n text-align: center;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {\n position: relative;\n height: 100vh;\n display: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {\n display: block;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n display: block;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n max-width: 100%;\n height: auto;\n width: 100%;\n margin: 0 auto;\n line-height: 1;\n vertical-align: middle;\n outline: 0;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {\n color: white;\n margin-top: 12px;\n}\n\n.custom__gallery .custom__gallery__container .next__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n right: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .next__item > * {\n pointer-events: none;\n}\n\n.custom__gallery .close__gallery {\n position: absolute;\n z-index: 9999;\n right: 0;\n background: none;\n color: white;\n border: none;\n font-size: 3rem;\n float: right;\n font-weight: 300;\n width: 73px;\n height: 73px;\n overflow: hidden;\n text-decoration: none;\n}\n\n.custom__gallery .close__gallery:active, .custom__gallery .close__gallery:focus {\n text-decoration: none;\n}\n\n\n.photogrid__gallery {\n width: 100%;\n text-align: center;\n overflow: hidden;\n position: fixed;\n height: 100vh;\n left: 0;\n top: 0;\n background-color: black;\n z-index: 400;\n margin: 0 auto;\n}\n\n.photogrid__gallery_scrollcontainer {\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n height: 100vh;\n margin: 0 auto;\n width: 100%;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.photogrid__gallery_item {\n width: 100%;\n height: 100vh;\n scroll-snap-align: start;\n transform-origin: center;\n transform: scale(1);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n\n.photogrid__gallery_item +.photogrid__gallery_item {\n margin-left: 1rem;\n}\n\n.photogrid__gallery_item > img {\n width: 100%;\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0 auto;\n}\n\n.photogrid__gallery__hide {\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n padding-right: 0.5rem;\n}\n\n.photogrid__gallery__hide > button {\n color: white;\n font-weight: 300;\n width: 73px;\n height: 73px;\n font-size: 3rem;\n background: none;\n border: none;\n}\n\n.photogrid__prev, .photogrid__next {\n display: none;\n width: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: white;\n z-index: 401;\n font-size: 2rem;\n}\n\n.photogrid__prev > button > *, .photogrid__next > button > * {\n pointer-events: none;\n}\n\n.photogrid__prev {\n left: 1.25rem;\n}\n\n.photogrid__next {\n right: 1.25rem;\n}\n\n@media only screen and (min-width: 768px) {\n .custom__gallery .custom__gallery__container .previous__item, .custom__gallery .custom__gallery__container .next__item {\n display: inline-block;\n }\n\n .photogrid--photo__row {\n display: flex;\n flex: 1 1 auto;\n }\n\n .photogrid--photo__column > img {\n display: inline-block;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n .photogrid__prev, .photogrid__next {\n display: block;\n }\n}\n\n\n@media only screen and (min-width: 1280px) {\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover + .custom__gallery__photo__overlay {\n display: block;\n }\n .photogrid--photo__column img:hover + .photogrid--photo_overlay {\n display: block;\n }\n .photogrid__gallery_item > img:hover .photogrid__gallery_item__overlay {\n display: block;\n }\n .photogrid__gallery_scrollcontainer {\n width: 91.6%;\n }\n}\n\n@media only screen and (min-width: 1400px) {\n .custom__gallery .custom__gallery__container {\n width: 92%;\n }\n\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n max-width: 100%;\n height: 100%;\n width: auto;\n }\n}\n\n@media only screen and (min-width: 1536px) {\n .photogrid__gallery_scrollcontainer {\n width: 75%;\n }\n}\n",""]);const l=a},314:n=>{"use strict";n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t="",o=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),o&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=n(e),o&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(n,t,o,r,i){"string"==typeof n&&(n=[[null,n,void 0]]);var a={};if(o)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(a[c]=!0)}for(var s=0;s<n.length;s++){var u=[].concat(n[s]);o&&a[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),t&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=t):u[2]=t),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),e.push(u))}},e}},601:n=>{"use strict";n.exports=function(n){return n[1]}},181:(n,e,t)=>{var o=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,a=/^0o[0-7]+$/i,l=parseInt,c="object"==typeof t.g&&t.g&&t.g.Object===Object&&t.g,s="object"==typeof self&&self&&self.Object===Object&&self,u=c||s||Function("return this")(),p=Object.prototype.toString,d=Math.max,_=Math.min,h=function(){return u.Date.now()};function m(n){var e=typeof n;return!!n&&("object"==e||"function"==e)}function g(n){if("number"==typeof n)return n;if(function(n){return"symbol"==typeof n||function(n){return!!n&&"object"==typeof n}(n)&&"[object Symbol]"==p.call(n)}(n))return NaN;if(m(n)){var e="function"==typeof n.valueOf?n.valueOf():n;n=m(e)?e+"":e}if("string"!=typeof n)return 0===n?n:+n;n=n.replace(o,"");var t=i.test(n);return t||a.test(n)?l(n.slice(2),t?2:8):r.test(n)?NaN:+n}n.exports=function(n,e,t){var o,r,i,a,l,c,s=0,u=!1,p=!1,f=!0;if("function"!=typeof n)throw new TypeError("Expected a function");function y(e){var t=o,i=r;return o=r=void 0,s=e,a=n.apply(i,t)}function v(n){var t=n-c;return void 0===c||t>=e||t<0||p&&n-s>=i}function w(){var n=h();if(v(n))return b(n);l=setTimeout(w,function(n){var t=e-(n-c);return p?_(t,i-(n-s)):t}(n))}function b(n){return l=void 0,f&&o?y(n):(o=r=void 0,a)}function x(){var n=h(),t=v(n);if(o=arguments,r=this,c=n,t){if(void 0===l)return function(n){return s=n,l=setTimeout(w,e),u?y(n):a}(c);if(p)return l=setTimeout(w,e),y(c)}return void 0===l&&(l=setTimeout(w,e)),a}return e=g(e)||0,m(t)&&(u=!!t.leading,i=(p="maxWait"in t)?d(g(t.maxWait)||0,e):i,f="trailing"in t?!!t.trailing:f),x.cancel=function(){void 0!==l&&clearTimeout(l),s=0,o=c=r=l=void 0},x.flush=function(){return void 0===l?a:b(h())},x}},72:n=>{"use strict";var e=[];function t(n){for(var t=-1,o=0;o<e.length;o++)if(e[o].identifier===n){t=o;break}return t}function o(n,o){for(var i={},a=[],l=0;l<n.length;l++){var c=n[l],s=o.base?c[0]+o.base:c[0],u=i[s]||0,p="".concat(s," ").concat(u);i[s]=u+1;var d=t(p),_={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==d)e[d].references++,e[d].updater(_);else{var h=r(_,o);o.byIndex=l,e.splice(l,0,{identifier:p,updater:h,references:1})}a.push(p)}return a}function r(n,e){var t=e.domAPI(e);return t.update(n),function(e){if(e){if(e.css===n.css&&e.media===n.media&&e.sourceMap===n.sourceMap&&e.supports===n.supports&&e.layer===n.layer)return;t.update(n=e)}else t.remove()}}n.exports=function(n,r){var i=o(n=n||[],r=r||{});return function(n){n=n||[];for(var a=0;a<i.length;a++){var l=t(i[a]);e[l].references--}for(var c=o(n,r),s=0;s<i.length;s++){var u=t(i[s]);0===e[u].references&&(e[u].updater(),e.splice(u,1))}i=c}}},659:n=>{"use strict";var e={};n.exports=function(n,t){var o=function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}e[n]=t}return e[n]}(n);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},540:n=>{"use strict";n.exports=function(n){var e=document.createElement("style");return n.setAttributes(e,n.attributes),n.insert(e,n.options),e}},56:(n,e,t)=>{"use strict";n.exports=function(n){var e=t.nc;e&&n.setAttribute("nonce",e)}},825:n=>{"use strict";n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=n.insertStyleElement(n);return{update:function(t){!function(n,e,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleTagTransform(o,n,e.options)}(e,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)}}}},113:n=>{"use strict";n.exports=function(n,e){if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}},e={};function t(o){var r=e[o];if(void 0!==r)return r.exports;var i=e[o]={id:o,exports:{}};return n[o](i,i.exports,t),i.exports}t.n=n=>{var e=n&&n.__esModule?()=>n.default:()=>n;return t.d(e,{a:e}),e},t.d=(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),t.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.nc=void 0;var o={};(()=>{"use strict";t.r(o),t.d(o,{Checkbox:()=>H,PhotoGrid:()=>D,sortPhotosIntoRows:()=>a});const n=require("react");var e=t.n(n),r=function(){return r=Object.assign||function(n){for(var e,t=1,o=arguments.length;t<o;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},r.apply(this,arguments)},i=function(n){return null!=n.name&&""!==n.name||null!=n.description&&""!==n.description},a=function(n){for(var e={},t=0,o=n;t<o.length;t++){var r=o[t],i=r.row;e[i]||(e[i]=[]),e[i].push(r)}return e},l=function(n,e){switch(e){case"id":return n.id;case"thumbnail_path":return n.thumbnail_path;case"image_path":return n.image_path}return n.image_path},c=function(n){return n.sort((function(n,e){return Math.floor(n.column)-Math.floor(e.column)}))},s=function(n,e){var t=n.find((function(n){return n.id===e}));if(void 0===t)throw new TypeError("No photo was found in this row for that id");return t},u=function(n,e){var t=n.find((function(n){return n.column===e}));if(void 0===t)throw new TypeError("No photo was found in this row for that column");return t},p=function(n,e){return n.filter((function(n){return n.column!==e}))},d=function(n,e,t){return void 0===n&&(n=[]),e.column=t,n.push(e),n},_=function(n,e,t){var o=e.column,r=t.column;return n=p(n,o),n=p(n,r),n=d(n,e,r),d(n,t,o)},h=function(n){return"string"==typeof n&&(n=parseInt(n)),n},m=function(n){var e=n.currentTarget,t=e.dataset.id,o=e.dataset.row;if(!t||!o)throw new TypeError("id or row key missing from photo control");return{id:t,rowKey:parseInt(o)}},g=function(n,e,t){for(var o=e;o<=t;o++){var r=u(n,o);n=p(n,o),n=d(n,r,r.column-1)}return n},f=function(n,e){return null==n[e]&&Object.entries(n).map((function(t){var o=t[0],r=t[1],i=parseInt(o);i>e&&(delete n[i],n[i-1]=r)})),n},y=function(n,e,t,o,r){return delete n[r],delete n[t],n[r]=e,n[t]=o,n},v=t(72),w=t.n(v),b=t(825),x=t.n(b),k=t(659),E=t.n(k),S=t(56),A=t.n(S),C=t(540),K=t.n(C),T=t(113),N=t.n(T),P=t(365),M={};M.styleTagTransform=N(),M.setAttributes=A(),M.insert=E().bind(null,"head"),M.domAPI=x(),M.insertStyleElement=K(),w()(P.A,M),P.A&&P.A.locals&&P.A.locals;const I=function(n){return e().createElement("ul",{className:"photogrid--row__controls"},h(n.rowKey)>1&&e().createElement("li",null,e().createElement("button",{className:"row__control move__row__up",onClick:n.moveRowUp,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.up:"↑"}})),h(n.rowKey)<n.rowCount&&e().createElement("li",null,e().createElement("button",{className:"row__control move__row__down",onClick:n.moveRowDown,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.down:"↓"}})))},j=function(n){return e().createElement("ul",{className:"photogrid--photo__controls"},n.photo.column>1&&e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__left",onClick:n.movePhotoLeft,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.left:"←"}})),h(n.rowKey)>1&&e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__up",onClick:n.movePhotoUp,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.up:"↑"}})),h(n.rowKey)<n.rowCount||h(n.rowKey)===n.rowCount&&n.photoCount>1?e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__down",onClick:n.movePhotoDown,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.down:"↓"}})):null,n.photo.column<n.photoCount&&e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__right",onClick:n.movePhotoRight,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.right:"→"}})))};var z=t(181),O=t.n(z);const R=function(t){var o=t.photos,r=t.imageSrcPrefix,a=t.imageSrcProperty,l=t.onGallerySwipe,c=t.activeKey,s=t.setActiveKey,u=t.buttonArrows,p=(0,n.useState)(!1),d=p[0],_=p[1],h=(0,n.useRef)(null),m=(0,n.useRef)([]),g=function(n,e){switch(e){case"id":return n.id;case"thumbnail_path":return n.thumbnail_path;case"image_path":return n.image_path}return n.image_path},f=(0,n.useCallback)(O()((function(n){var e=m.current[n],t=h.current;if(e&&t){var o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=o.left-r.left+t.scrollLeft;t.scrollLeft=i}}),50),[]),y=function(n){return n.preventDefault(),!1},v=(0,n.useCallback)((function(n){n.forEach((function(n){if(n.isIntersecting){var e=n.target,t=e.getAttribute("data-src"),r=e.getAttribute("data-index");if(t&&(e.src=t),r){var i=m.current[parseInt(r)-1],a=m.current[parseInt(r)+1];if(i&&!i.src){var u=i.getAttribute("data-src");u&&(i.src=u)}if(a&&!a.src){var p=a.getAttribute("data-src");p&&(a.src=p)}s(parseInt(r)),function(){if(l){var n=o[c];n&&l(n)}}()}}}))}),[]);return(0,n.useEffect)((function(){var n=new IntersectionObserver(v,{root:null,rootMargin:"0px",threshold:.1});return m.current.forEach((function(e){e&&n.observe(e)})),function(){m.current.forEach((function(e){e&&n.unobserve(e)}))}}),[v]),(0,n.useEffect)((function(){c>-1&&!1===d&&(_(!0),f(c))}),[c]),e().createElement("div",{className:"".concat(d?"block":"hidden"," photogrid__gallery")},e().createElement("div",{className:"photogrid__gallery__hide"},e().createElement("button",{onClick:function(){_(!1),s(-1)},type:"button"},"×")),e().createElement("div",{className:"photogrid__prev"},e().createElement("button",{type:"button",onClick:function(n){n.preventDefault(),null!=h.current&&h.current.scrollBy({top:0,left:-1,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:u?u.prev:"←"}})),e().createElement("div",{ref:h,className:"photogrid__gallery_scrollcontainer"},o.length&&o.map((function(n,t){return e().createElement("div",{key:"".concat(t),className:"photogrid__gallery_item"},e().createElement("img",{ref:function(n){return m.current[t]=n},"data-index":t,"data-src":"".concat(r).concat(g(n,a)),alt:"gallery item",onContextMenu:y}),!0===i(n)&&e().createElement("div",{className:"photogrid__gallery_item__overlay"},null!=n.name&&""!==n.name&&e().createElement("h4",null,n.name),null!=n.description&&""!==n.description&&e().createElement("p",null,n.description)))}))),e().createElement("div",{className:"photogrid__next"},e().createElement("button",{type:"button",onClick:function(n){n.preventDefault(),null!=h.current&&h.current.scrollBy({top:0,left:800,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:u?u.next:"→"}})))},L=function(t){var o=(0,n.useState)(null),r=o[0],a=o[1],c=(0,n.useState)(!1),s=c[0],u=c[1],p=function(n){var e=t.imageSrcProperty;return l(n,e)},d=function(){if(t.onGallerySwipe){var n=t.activeKey,e=t.photos[n];e&&t.onGallerySwipe(e)}},_=function(n){39===n.keyCode?t.activeKey<t.photos.length-1&&t.setActiveKey(t.activeKey+1):37===n.keyCode&&t.activeKey>0&&t.setActiveKey(t.activeKey-1),d()},h=function(){return!1};return(0,n.useEffect)((function(){return t.activeKey>-1&&!1===s&&u(!0),document.addEventListener("keydown",_),function(){document.removeEventListener("keydown",_)}}),[t.activeKey]),e().createElement("div",{className:"custom__gallery",style:{display:!0===s?"block":"none"},onTouchStart:function(n){var e=n.touches[0].clientX;a(e)},onTouchMove:function(n){if(null!==r){var e=n.touches[0].clientX,o=r-e;o>5&&t.activeKey<t.photos.length-1&&t.setActiveKey(t.activeKey+1),o<-5&&t.activeKey>0&&t.setActiveKey(t.activeKey-1),d(),a(null)}}},e().createElement("div",{className:"clearfix"},e().createElement("button",{className:"close__gallery",onClick:function(){u(!1),t.setActiveKey(-1)},type:"button"},"×")),e().createElement("div",{className:"custom__gallery__container"},t.activeKey>0&&e().createElement("button",{onClick:function(n){n.preventDefault(),t.activeKey>0&&(t.setActiveKey(t.activeKey-1),d())},className:"previous__item",dangerouslySetInnerHTML:{__html:t.buttonArrows?t.buttonArrows.prev:"←"}}),e().createElement("div",{className:"custom__gallery__images"},t.photos.length&&t.photos.map((function(n,o){return e().createElement("div",{key:"".concat(o),className:t.activeKey==o?"custom__gallery__item active":"custom__gallery__item"},e().createElement("img",{src:(r=o,a=t.activeKey,l=[a],a>0&&l.push(a-1),a<t.photos.length-1&&l.push(a+1),l.includes(r)?"".concat(t.imageSrcPrefix).concat(p(n)):""),alt:"gallery item",onContextMenu:h}),!0===i(n)&&e().createElement("div",{className:"custom__gallery__photo__overlay"},null!=n.name&&""!==n.name&&e().createElement("h4",null,n.name),null!=n.description&&""!==n.description&&e().createElement("p",null,n.description)));var r,a,l}))),t.activeKey<t.photos.length-1&&e().createElement("button",{onClick:function(n){n.preventDefault(),t.activeKey<t.photos.length-1&&(t.setActiveKey(t.activeKey+1),d())},className:"next__item",dangerouslySetInnerHTML:{__html:t.buttonArrows?t.buttonArrows.next:"→"}})))},D=function(t){var o=(0,n.useState)(-1),a=o[0],h=o[1],v=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),u=i-1,_=[];null!=a[u]&&(_=c(a[u]));var h=s(l,o),y=h.column+1,v=l.length;l=p(l,h.column),delete a[i],l.length&&(g(l,y,v),a[i]=l),_=d(_,h,_.length+1),delete a[u],a[u]=_,a=f(a,i),e.updateRows(a),e.increaseChanges()}(n,t)},w=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),_=i+1,h=s(l,o),y=h.column+1,v=l.length;l=p(l,h.column),delete a[i],l.length&&(l=g(l,y,v));var w=null;null==a[_]?(h.column=1,w=[h]):(w=function(n,e){for(var t=e;t>0;t--){var o=u(n,t);n=p(n,t),n=d(n,o,o.column+1)}return n}(w=c(a[_]),w.length),w=d(w,h,1),delete a[_]),a[_]=w,l.length&&(a[i]=l),a=f(a,i),e.updateRows(a),e.increaseChanges()}(n,t)},b=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),p=s(l,o);if(1!==p.column){var d=u(l,p.column-1);l=_(l,d,p),delete a[i],a[i]=l,e.updateRows(a),e.increaseChanges()}}(n,t)},x=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),p=s(l,o);if(p.column!==l.length){var d=u(l,p.column+1);l=_(l,p,d),delete a[i],a[i]=l,e.updateRows(a),e.increaseChanges()}}(n,t)},k=function(n){!function(n,e){n.preventDefault();var t=n.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),i=o-1,a=r({},e.rows),l=c(a[o]);if(null==a[i])delete a[o],a[i]=l;else{var s=c(a[i]);a=y(a,l,o,s,i)}e.updateRows(a),e.increaseChanges()}(n,t)},E=function(n){!function(n,e){n.preventDefault();var t=n.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),i=o+1,a=r({},e.rows),l=c(a[o]);if(!a[i])throw new TypeError("There is no next row!");var s=c(a[i]);a=y(a,l,o,s,i),e.updateRows(a),e.increaseChanges()}(n,t)},S=function(n){var e=t.imageSrcProperty;return l(n,e)},A=function(n){var e,o=n.currentTarget.dataset.id;if(!o)throw new TypeError("Photo id missing");if(t.onPhotoClick&&t.onPhotoClick(n),t.useGallery){var r=(e=o,t.photos.findIndex((function(n){return n.id&&n.id==e})));r>-1&&h(r)}};return 0===Object.keys(t.rows).length?null:e().createElement("div",null,t.useGallery&&"scroll"===t.galleryType?e().createElement(R,{photos:t.photos,activeKey:a,setActiveKey:h,imageSrcPrefix:t.imageSrcPrefix,imageSrcProperty:t.gallerySrcProperty?t.gallerySrcProperty:"image_path",buttonArrows:t.galleryButtonArrows,onGallerySwipe:t.onGallerySwipe}):e().createElement(L,{photos:t.photos,activeKey:a,setActiveKey:h,imageSrcPrefix:t.imageSrcPrefix,imageSrcProperty:t.gallerySrcProperty?t.gallerySrcProperty:"image_path",buttonArrows:t.galleryButtonArrows,onGallerySwipe:t.onGallerySwipe}),e().createElement("div",{className:"photogrid"},Object.entries(t.rows).map((function(o,r){return o[1].length&&e().createElement("div",{key:"row-"+r,className:t.isEditing?"photogrid--photo__row editing":"photogrid--photo__row"},e().createElement(e().Fragment,null,t.isEditing&&e().createElement(I,{rowKey:o[0],moveRowUp:k,moveRowDown:E,rowCount:Object.keys(t.rows).length,buttonArrows:t.buttonArrows}),c(o[1]).map((function(a,l){return e().createElement("div",{key:"photo-"+r+l,className:"photogrid--photo__column"},e().createElement("img",{width:a.width,height:a.height,"data-id":a.id,src:"".concat(t.imageSrcPrefix).concat(S(a)),alt:a.thumbnail_path,onClick:A,className:t.useGallery?"cursor-pointer":"cursor-default"}),!t.isEditing&&!0===i(a)&&e().createElement("div",{className:"photogrid--photo_overlay"},null!=a.name&&""!==a.name&&e().createElement("h4",null,a.name),null!=a.description&&""!==a.description&&e().createElement("p",null,a.description)),t.isEditing?e().createElement(e().Fragment,null,e().createElement("p",{className:"photo__position"},"R: ",o[0]," | C: ",a.column),t.photoMenu?(0,n.cloneElement)(t.photoMenu,{photo:a}):null,e().createElement(j,{rowKey:o[0],photo:a,movePhotoDown:w,movePhotoLeft:b,movePhotoUp:v,movePhotoRight:x,rowCount:Object.keys(t.rows).length,photoCount:o[1].length,buttonArrows:t.buttonArrows})):t.photoActions?(0,n.cloneElement)(t.photoActions,{photo:a}):null)}))))}))))},H=function(n){return e().createElement("div",{className:n.checked?"photogrid--checkbox active":"photogrid--checkbox",onClick:function(e){e.preventDefault(),n.checked?n.onClick(n.value,!1):n.onClick(n.value,!0)}})}})(),module.exports=o})();
|
|
1
|
+
(()=>{var n={365:(n,e,t)=>{"use strict";t.d(e,{A:()=>l});var o=t(601),r=t.n(o),i=t(314),a=t.n(i)()(r());a.push([n.id,".photogrid--checkbox {\n background: white;\n border: 2px solid white;\n cursor: pointer;\n width: 18px;\n height: 18px;\n position: absolute;\n top: 10px;\n left: 10px;\n z-index: 10;\n}\n\n.photogrid--checkbox.active {\n background: #333;\n}\n\n.photogrid {\n padding: 0 0.125rem;\n}\n\n.photogrid--row__controls {\n display: block;\n position: absolute;\n left: 0.25rem;\n top: 50%;\n transform: translateY(-50%);\n z-index: 20;\n}\n\n.photogrid--row__controls>li {\n display: block;\n}\n\n.photogrid--photo__controls {\n display: block;\n width: 100%;\n position: absolute;\n left: 50%;\n transform: translateX(-50%);\n bottom: 0.5rem;\n text-align: center;\n}\n\n.photogrid--photo__controls>li {\n display: inline-block;\n}\n\n.photogrid--photo__controls>li+li {\n margin-left: 0.25rem;\n}\n\n.photogrid--row__controls>li+li {\n margin-top: 0.25rem;\n}\n\n.photogrid--photo__controls .photo__control,\n.photogrid--row__controls .row__control {\n width: 36px;\n height: 36px;\n display: block;\n background: #ddd;\n color: #333;\n font-size: 1.5rem;\n line-height: 2rem;\n}\n\n.photogrid--photo__row {\n display: block;\n background: transparent;\n min-height: 0;\n position: relative;\n z-index: 10;\n padding: 0;\n}\n\n.photogrid--photo__row.editing {\n padding-left: 2.75rem;\n}\n\n.photogrid--photo__column {\n position: relative;\n vertical-align: middle;\n display: block;\n margin: 0.125rem;\n}\n\n.photogrid--photo__actions {\n display: none;\n position: absolute;\n z-index: 20;\n bottom: 4px;\n left: 50%;\n transform: translateX(-50%);\n}\n\n.photogrid--photo__column:hover .photogrid--photo__actions {\n display: flex;\n}\n\n.photogrid--photo_overlay,\n.photogrid__gallery_item__overlay {\n min-height: 0;\n display: none;\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n background: rgba(0, 0, 0, 0.4);\n color: white;\n padding: 0.5rem;\n z-index: 200;\n}\n\n.photogrid--photo_overlay h4,\n.photogrid__gallery_item__overlay h4 {\n font-size: 14px;\n font-weight: 600;\n margin: 0;\n padding: 0;\n}\n\n.photogrid--photo_overlay p,\n.photogrid__gallery_item__overlay p {\n margin: 7px 0 0 0;\n padding: 0;\n font-size: 12px;\n}\n\n.photogrid--photo__column>.photo__position {\n position: absolute;\n top: 0;\n z-index: 20;\n left: 50%;\n transform: translateX(-50%);\n background: rgba(0, 0, 0, 0.65);\n color: white;\n padding: 0.1rem;\n}\n\n.photogrid--photo__column>img {\n display: block;\n max-width: 100%;\n max-height: 750px;\n height: auto;\n margin: 0;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n\n.custom__gallery {\n display: block;\n overflow: hidden;\n position: fixed;\n left: 0;\n top: 0;\n margin: 0 auto;\n width: 100%;\n height: 100vh;\n z-index: 9000;\n background: black;\n}\n\n.custom__gallery .custom__gallery__container {\n vertical-align: middle;\n display: block;\n height: 100%;\n margin: 0 auto;\n position: relative;\n}\n\n.custom__gallery .custom__gallery__container .previous__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n left: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .previous__item>* {\n pointer-events: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images {\n height: 100vh;\n text-align: center;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {\n position: relative;\n height: 100vh;\n display: none;\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -moz-user-select: none;\n user-select: none;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {\n display: block;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n display: block;\n position: relative;\n top: 50%;\n transform: translateY(-50%);\n max-width: 100%;\n height: auto;\n width: 100%;\n margin: 0 auto;\n line-height: 1;\n vertical-align: middle;\n outline: 0;\n}\n\n.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {\n color: white;\n margin-top: 12px;\n}\n\n.custom__gallery .custom__gallery__container .next__item {\n display: none;\n height: 50px;\n width: 50px;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n background: none;\n border: none;\n color: white;\n font-size: 2rem;\n right: 50px;\n cursor: pointer;\n z-index: 9001;\n}\n\n.custom__gallery .custom__gallery__container .next__item>* {\n pointer-events: none;\n}\n\n.custom__gallery .close__gallery {\n position: absolute;\n z-index: 9999;\n right: 0;\n background: none;\n color: white;\n border: none;\n font-size: 3rem;\n float: right;\n font-weight: 300;\n width: 73px;\n height: 73px;\n overflow: hidden;\n text-decoration: none;\n}\n\n.custom__gallery .close__gallery:active,\n.custom__gallery .close__gallery:focus {\n text-decoration: none;\n}\n\n\n.photogrid__gallery {\n width: 100%;\n text-align: center;\n overflow: hidden;\n position: fixed;\n height: 100vh;\n left: 0;\n top: 0;\n background-color: black;\n z-index: 400;\n margin: 0 auto;\n}\n\n.photogrid__gallery_scrollcontainer {\n display: flex;\n overflow-x: auto;\n overflow-y: hidden;\n scroll-snap-type: x mandatory;\n scroll-behavior: smooth;\n -webkit-overflow-scrolling: touch;\n height: 100vh;\n margin: 0 auto;\n width: 100%;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar {\n width: 10px;\n height: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-thumb {\n background: #ddd;\n border-radius: 10px;\n}\n\n.photogrid__gallery_scrollcontainer::-webkit-scrollbar-track {\n background: transparent;\n}\n\n.photogrid__gallery_item {\n width: 100%;\n height: 100vh;\n scroll-snap-align: start;\n transform-origin: center;\n transform: scale(1);\n position: relative;\n display: flex;\n justify-content: center;\n align-items: center;\n flex-shrink: 0;\n}\n\n.photogrid__gallery_item+.photogrid__gallery_item {\n margin-left: 1rem;\n}\n\n.photogrid__gallery_item>img {\n width: 100%;\n max-width: 100%;\n height: auto;\n display: block;\n margin: 0 auto;\n}\n\n.photogrid__gallery__hide {\n text-align: right;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n padding-right: 0.5rem;\n}\n\n.photogrid__gallery__hide>button {\n color: white;\n font-weight: 300;\n width: 73px;\n height: 73px;\n font-size: 3rem;\n background: none;\n border: none;\n}\n\n.photogrid__prev,\n.photogrid__next {\n display: none;\n width: auto;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n color: white;\n z-index: 401;\n font-size: 2rem;\n}\n\n.photogrid__prev>button>*,\n.photogrid__next>button>* {\n pointer-events: none;\n}\n\n.photogrid__prev {\n left: 1.25rem;\n}\n\n.photogrid__next {\n right: 1.25rem;\n}\n\n@media only screen and (min-width: 768px) {\n\n .custom__gallery .custom__gallery__container .previous__item,\n .custom__gallery .custom__gallery__container .next__item {\n display: inline-block;\n }\n\n .photogrid--photo__row {\n display: flex;\n flex: 1 1 auto;\n }\n\n .photogrid--photo__column:first-child {\n margin-left: 0;\n }\n\n .photogrid--photo__column:last-child {\n margin-right: 0;\n }\n\n .photogrid--photo__column>img {\n display: inline-block;\n }\n}\n\n@media only screen and (min-width: 1024px) {\n\n .photogrid__prev,\n .photogrid__next {\n display: block;\n }\n}\n\n\n@media only screen and (min-width: 1280px) {\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover+.custom__gallery__photo__overlay {\n display: block;\n }\n\n .photogrid--photo__column img:hover+.photogrid--photo_overlay {\n display: block;\n }\n\n .photogrid__gallery_item>img:hover .photogrid__gallery_item__overlay {\n display: block;\n }\n\n .photogrid__gallery_scrollcontainer {\n width: 91.6%;\n }\n}\n\n@media only screen and (min-width: 1400px) {\n .custom__gallery .custom__gallery__container {\n width: 92%;\n }\n\n .custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {\n max-width: 100%;\n height: 100%;\n width: auto;\n }\n}\n\n@media only screen and (min-width: 1536px) {\n .photogrid__gallery_scrollcontainer {\n width: 75%;\n }\n}",""]);const l=a},314:n=>{"use strict";n.exports=function(n){var e=[];return e.toString=function(){return this.map((function(e){var t="",o=void 0!==e[5];return e[4]&&(t+="@supports (".concat(e[4],") {")),e[2]&&(t+="@media ".concat(e[2]," {")),o&&(t+="@layer".concat(e[5].length>0?" ".concat(e[5]):""," {")),t+=n(e),o&&(t+="}"),e[2]&&(t+="}"),e[4]&&(t+="}"),t})).join("")},e.i=function(n,t,o,r,i){"string"==typeof n&&(n=[[null,n,void 0]]);var a={};if(o)for(var l=0;l<this.length;l++){var c=this[l][0];null!=c&&(a[c]=!0)}for(var s=0;s<n.length;s++){var u=[].concat(n[s]);o&&a[u[0]]||(void 0!==i&&(void 0===u[5]||(u[1]="@layer".concat(u[5].length>0?" ".concat(u[5]):""," {").concat(u[1],"}")),u[5]=i),t&&(u[2]?(u[1]="@media ".concat(u[2]," {").concat(u[1],"}"),u[2]=t):u[2]=t),r&&(u[4]?(u[1]="@supports (".concat(u[4],") {").concat(u[1],"}"),u[4]=r):u[4]="".concat(r)),e.push(u))}},e}},601:n=>{"use strict";n.exports=function(n){return n[1]}},181:(n,e,t)=>{var o=/^\s+|\s+$/g,r=/^[-+]0x[0-9a-f]+$/i,i=/^0b[01]+$/i,a=/^0o[0-7]+$/i,l=parseInt,c="object"==typeof t.g&&t.g&&t.g.Object===Object&&t.g,s="object"==typeof self&&self&&self.Object===Object&&self,u=c||s||Function("return this")(),p=Object.prototype.toString,d=Math.max,_=Math.min,h=function(){return u.Date.now()};function m(n){var e=typeof n;return!!n&&("object"==e||"function"==e)}function g(n){if("number"==typeof n)return n;if(function(n){return"symbol"==typeof n||function(n){return!!n&&"object"==typeof n}(n)&&"[object Symbol]"==p.call(n)}(n))return NaN;if(m(n)){var e="function"==typeof n.valueOf?n.valueOf():n;n=m(e)?e+"":e}if("string"!=typeof n)return 0===n?n:+n;n=n.replace(o,"");var t=i.test(n);return t||a.test(n)?l(n.slice(2),t?2:8):r.test(n)?NaN:+n}n.exports=function(n,e,t){var o,r,i,a,l,c,s=0,u=!1,p=!1,f=!0;if("function"!=typeof n)throw new TypeError("Expected a function");function y(e){var t=o,i=r;return o=r=void 0,s=e,a=n.apply(i,t)}function v(n){var t=n-c;return void 0===c||t>=e||t<0||p&&n-s>=i}function w(){var n=h();if(v(n))return b(n);l=setTimeout(w,function(n){var t=e-(n-c);return p?_(t,i-(n-s)):t}(n))}function b(n){return l=void 0,f&&o?y(n):(o=r=void 0,a)}function x(){var n=h(),t=v(n);if(o=arguments,r=this,c=n,t){if(void 0===l)return function(n){return s=n,l=setTimeout(w,e),u?y(n):a}(c);if(p)return l=setTimeout(w,e),y(c)}return void 0===l&&(l=setTimeout(w,e)),a}return e=g(e)||0,m(t)&&(u=!!t.leading,i=(p="maxWait"in t)?d(g(t.maxWait)||0,e):i,f="trailing"in t?!!t.trailing:f),x.cancel=function(){void 0!==l&&clearTimeout(l),s=0,o=c=r=l=void 0},x.flush=function(){return void 0===l?a:b(h())},x}},72:n=>{"use strict";var e=[];function t(n){for(var t=-1,o=0;o<e.length;o++)if(e[o].identifier===n){t=o;break}return t}function o(n,o){for(var i={},a=[],l=0;l<n.length;l++){var c=n[l],s=o.base?c[0]+o.base:c[0],u=i[s]||0,p="".concat(s," ").concat(u);i[s]=u+1;var d=t(p),_={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==d)e[d].references++,e[d].updater(_);else{var h=r(_,o);o.byIndex=l,e.splice(l,0,{identifier:p,updater:h,references:1})}a.push(p)}return a}function r(n,e){var t=e.domAPI(e);return t.update(n),function(e){if(e){if(e.css===n.css&&e.media===n.media&&e.sourceMap===n.sourceMap&&e.supports===n.supports&&e.layer===n.layer)return;t.update(n=e)}else t.remove()}}n.exports=function(n,r){var i=o(n=n||[],r=r||{});return function(n){n=n||[];for(var a=0;a<i.length;a++){var l=t(i[a]);e[l].references--}for(var c=o(n,r),s=0;s<i.length;s++){var u=t(i[s]);0===e[u].references&&(e[u].updater(),e.splice(u,1))}i=c}}},659:n=>{"use strict";var e={};n.exports=function(n,t){var o=function(n){if(void 0===e[n]){var t=document.querySelector(n);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(n){t=null}e[n]=t}return e[n]}(n);if(!o)throw new Error("Couldn't find a style target. This probably means that the value for the 'insert' parameter is invalid.");o.appendChild(t)}},540:n=>{"use strict";n.exports=function(n){var e=document.createElement("style");return n.setAttributes(e,n.attributes),n.insert(e,n.options),e}},56:(n,e,t)=>{"use strict";n.exports=function(n){var e=t.nc;e&&n.setAttribute("nonce",e)}},825:n=>{"use strict";n.exports=function(n){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var e=n.insertStyleElement(n);return{update:function(t){!function(n,e,t){var o="";t.supports&&(o+="@supports (".concat(t.supports,") {")),t.media&&(o+="@media ".concat(t.media," {"));var r=void 0!==t.layer;r&&(o+="@layer".concat(t.layer.length>0?" ".concat(t.layer):""," {")),o+=t.css,r&&(o+="}"),t.media&&(o+="}"),t.supports&&(o+="}");var i=t.sourceMap;i&&"undefined"!=typeof btoa&&(o+="\n/*# sourceMappingURL=data:application/json;base64,".concat(btoa(unescape(encodeURIComponent(JSON.stringify(i))))," */")),e.styleTagTransform(o,n,e.options)}(e,n,t)},remove:function(){!function(n){if(null===n.parentNode)return!1;n.parentNode.removeChild(n)}(e)}}}},113:n=>{"use strict";n.exports=function(n,e){if(e.styleSheet)e.styleSheet.cssText=n;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(n))}}}},e={};function t(o){var r=e[o];if(void 0!==r)return r.exports;var i=e[o]={id:o,exports:{}};return n[o](i,i.exports,t),i.exports}t.n=n=>{var e=n&&n.__esModule?()=>n.default:()=>n;return t.d(e,{a:e}),e},t.d=(n,e)=>{for(var o in e)t.o(e,o)&&!t.o(n,o)&&Object.defineProperty(n,o,{enumerable:!0,get:e[o]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(n){if("object"==typeof window)return window}}(),t.o=(n,e)=>Object.prototype.hasOwnProperty.call(n,e),t.r=n=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(n,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(n,"__esModule",{value:!0})},t.nc=void 0;var o={};(()=>{"use strict";t.r(o),t.d(o,{Checkbox:()=>H,PhotoGrid:()=>D,sortPhotosIntoRows:()=>a});const n=require("react");var e=t.n(n),r=function(){return r=Object.assign||function(n){for(var e,t=1,o=arguments.length;t<o;t++)for(var r in e=arguments[t])Object.prototype.hasOwnProperty.call(e,r)&&(n[r]=e[r]);return n},r.apply(this,arguments)},i=function(n){return null!=n.name&&""!==n.name||null!=n.description&&""!==n.description},a=function(n){for(var e={},t=0,o=n;t<o.length;t++){var r=o[t],i=r.row;e[i]||(e[i]=[]),e[i].push(r)}return e},l=function(n,e){switch(e){case"id":return n.id;case"thumbnail_path":return n.thumbnail_path;case"image_path":return n.image_path}return n.image_path},c=function(n){return n.sort((function(n,e){return Math.floor(n.column)-Math.floor(e.column)}))},s=function(n,e){var t=n.find((function(n){return n.id===e}));if(void 0===t)throw new TypeError("No photo was found in this row for that id");return t},u=function(n,e){var t=n.find((function(n){return n.column===e}));if(void 0===t)throw new TypeError("No photo was found in this row for that column");return t},p=function(n,e){return n.filter((function(n){return n.column!==e}))},d=function(n,e,t){return void 0===n&&(n=[]),e.column=t,n.push(e),n},_=function(n,e,t){var o=e.column,r=t.column;return n=p(n,o),n=p(n,r),n=d(n,e,r),d(n,t,o)},h=function(n){return"string"==typeof n&&(n=parseInt(n)),n},m=function(n){var e=n.currentTarget,t=e.dataset.id,o=e.dataset.row;if(!t||!o)throw new TypeError("id or row key missing from photo control");return{id:t,rowKey:parseInt(o)}},g=function(n,e,t){for(var o=e;o<=t;o++){var r=u(n,o);n=p(n,o),n=d(n,r,r.column-1)}return n},f=function(n,e){return null==n[e]&&Object.entries(n).map((function(t){var o=t[0],r=t[1],i=parseInt(o);i>e&&(delete n[i],n[i-1]=r)})),n},y=function(n,e,t,o,r){return delete n[r],delete n[t],n[r]=e,n[t]=o,n},v=t(72),w=t.n(v),b=t(825),x=t.n(b),k=t(659),E=t.n(k),S=t(56),A=t.n(S),C=t(540),K=t.n(C),T=t(113),N=t.n(T),P=t(365),M={};M.styleTagTransform=N(),M.setAttributes=A(),M.insert=E().bind(null,"head"),M.domAPI=x(),M.insertStyleElement=K(),w()(P.A,M),P.A&&P.A.locals&&P.A.locals;const I=function(n){return e().createElement("ul",{className:"photogrid--row__controls"},h(n.rowKey)>1&&e().createElement("li",null,e().createElement("button",{className:"row__control move__row__up",onClick:n.moveRowUp,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.up:"↑"}})),h(n.rowKey)<n.rowCount&&e().createElement("li",null,e().createElement("button",{className:"row__control move__row__down",onClick:n.moveRowDown,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.down:"↓"}})))},j=function(n){return e().createElement("ul",{className:"photogrid--photo__controls"},n.photo.column>1&&e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__left",onClick:n.movePhotoLeft,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.left:"←"}})),h(n.rowKey)>1&&e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__up",onClick:n.movePhotoUp,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.up:"↑"}})),h(n.rowKey)<n.rowCount||h(n.rowKey)===n.rowCount&&n.photoCount>1?e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__down",onClick:n.movePhotoDown,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.down:"↓"}})):null,n.photo.column<n.photoCount&&e().createElement("li",null,e().createElement("button",{type:"button",className:"photo__control move__photo__right",onClick:n.movePhotoRight,"data-id":n.photo.id,"data-row":n.rowKey,dangerouslySetInnerHTML:{__html:n.buttonArrows?n.buttonArrows.right:"→"}})))};var z=t(181),O=t.n(z);const R=function(t){var o=t.photos,r=t.imageSrcPrefix,a=t.imageSrcProperty,l=t.onGallerySwipe,c=t.activeKey,s=t.setActiveKey,u=t.buttonArrows,p=(0,n.useState)(!1),d=p[0],_=p[1],h=(0,n.useRef)(null),m=(0,n.useRef)([]),g=function(n,e){switch(e){case"id":return n.id;case"thumbnail_path":return n.thumbnail_path;case"image_path":return n.image_path}return n.image_path},f=(0,n.useCallback)(O()((function(n){var e=m.current[n],t=h.current;if(e&&t){var o=e.getBoundingClientRect(),r=t.getBoundingClientRect(),i=o.left-r.left+t.scrollLeft;t.scrollLeft=i}}),50),[]),y=function(n){return n.preventDefault(),!1},v=(0,n.useCallback)((function(n){n.forEach((function(n){if(n.isIntersecting){var e=n.target,t=e.getAttribute("data-src"),r=e.getAttribute("data-index");if(t&&(e.src=t),r){var i=m.current[parseInt(r)-1],a=m.current[parseInt(r)+1];if(i&&!i.src){var u=i.getAttribute("data-src");u&&(i.src=u)}if(a&&!a.src){var p=a.getAttribute("data-src");p&&(a.src=p)}s(parseInt(r)),function(){if(l){var n=o[c];n&&l(n)}}()}}}))}),[]);return(0,n.useEffect)((function(){var n=new IntersectionObserver(v,{root:null,rootMargin:"0px",threshold:.1});return m.current.forEach((function(e){e&&n.observe(e)})),function(){m.current.forEach((function(e){e&&n.unobserve(e)}))}}),[v]),(0,n.useEffect)((function(){c>-1&&!1===d&&(_(!0),f(c))}),[c]),e().createElement("div",{className:"".concat(d?"block":"hidden"," photogrid__gallery")},e().createElement("div",{className:"photogrid__gallery__hide"},e().createElement("button",{onClick:function(){_(!1),s(-1)},type:"button"},"×")),e().createElement("div",{className:"photogrid__prev"},e().createElement("button",{type:"button",onClick:function(n){n.preventDefault(),null!=h.current&&h.current.scrollBy({top:0,left:-1,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:u?u.prev:"←"}})),e().createElement("div",{ref:h,className:"photogrid__gallery_scrollcontainer"},o.length&&o.map((function(n,t){return e().createElement("div",{key:"".concat(t),className:"photogrid__gallery_item"},e().createElement("img",{ref:function(n){return m.current[t]=n},"data-index":t,"data-src":"".concat(r).concat(g(n,a)),alt:"gallery item",onContextMenu:y}),!0===i(n)&&e().createElement("div",{className:"photogrid__gallery_item__overlay"},null!=n.name&&""!==n.name&&e().createElement("h4",null,n.name),null!=n.description&&""!==n.description&&e().createElement("p",null,n.description)))}))),e().createElement("div",{className:"photogrid__next"},e().createElement("button",{type:"button",onClick:function(n){n.preventDefault(),null!=h.current&&h.current.scrollBy({top:0,left:800,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:u?u.next:"→"}})))},L=function(t){var o=(0,n.useState)(null),r=o[0],a=o[1],c=(0,n.useState)(!1),s=c[0],u=c[1],p=function(n){var e=t.imageSrcProperty;return l(n,e)},d=function(){if(t.onGallerySwipe){var n=t.activeKey,e=t.photos[n];e&&t.onGallerySwipe(e)}},_=function(n){39===n.keyCode?t.activeKey<t.photos.length-1&&t.setActiveKey(t.activeKey+1):37===n.keyCode&&t.activeKey>0&&t.setActiveKey(t.activeKey-1),d()},h=function(){return!1};return(0,n.useEffect)((function(){return t.activeKey>-1&&!1===s&&u(!0),document.addEventListener("keydown",_),function(){document.removeEventListener("keydown",_)}}),[t.activeKey]),e().createElement("div",{className:"custom__gallery",style:{display:!0===s?"block":"none"},onTouchStart:function(n){var e=n.touches[0].clientX;a(e)},onTouchMove:function(n){if(null!==r){var e=n.touches[0].clientX,o=r-e;o>5&&t.activeKey<t.photos.length-1&&t.setActiveKey(t.activeKey+1),o<-5&&t.activeKey>0&&t.setActiveKey(t.activeKey-1),d(),a(null)}}},e().createElement("div",{className:"clearfix"},e().createElement("button",{className:"close__gallery",onClick:function(){u(!1),t.setActiveKey(-1)},type:"button"},"×")),e().createElement("div",{className:"custom__gallery__container"},t.activeKey>0&&e().createElement("button",{onClick:function(n){n.preventDefault(),t.activeKey>0&&(t.setActiveKey(t.activeKey-1),d())},className:"previous__item",dangerouslySetInnerHTML:{__html:t.buttonArrows?t.buttonArrows.prev:"←"}}),e().createElement("div",{className:"custom__gallery__images"},t.photos.length&&t.photos.map((function(n,o){return e().createElement("div",{key:"".concat(o),className:t.activeKey==o?"custom__gallery__item active":"custom__gallery__item"},e().createElement("img",{src:(r=o,a=t.activeKey,l=[a],a>0&&l.push(a-1),a<t.photos.length-1&&l.push(a+1),l.includes(r)?"".concat(t.imageSrcPrefix).concat(p(n)):""),alt:"gallery item",onContextMenu:h}),!0===i(n)&&e().createElement("div",{className:"custom__gallery__photo__overlay"},null!=n.name&&""!==n.name&&e().createElement("h4",null,n.name),null!=n.description&&""!==n.description&&e().createElement("p",null,n.description)));var r,a,l}))),t.activeKey<t.photos.length-1&&e().createElement("button",{onClick:function(n){n.preventDefault(),t.activeKey<t.photos.length-1&&(t.setActiveKey(t.activeKey+1),d())},className:"next__item",dangerouslySetInnerHTML:{__html:t.buttonArrows?t.buttonArrows.next:"→"}})))},D=function(t){var o=(0,n.useState)(-1),a=o[0],h=o[1],v=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),u=i-1,_=[];null!=a[u]&&(_=c(a[u]));var h=s(l,o),y=h.column+1,v=l.length;l=p(l,h.column),delete a[i],l.length&&(g(l,y,v),a[i]=l),_=d(_,h,_.length+1),delete a[u],a[u]=_,a=f(a,i),e.updateRows(a),e.increaseChanges()}(n,t)},w=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),_=i+1,h=s(l,o),y=h.column+1,v=l.length;l=p(l,h.column),delete a[i],l.length&&(l=g(l,y,v));var w=null;null==a[_]?(h.column=1,w=[h]):(w=function(n,e){for(var t=e;t>0;t--){var o=u(n,t);n=p(n,t),n=d(n,o,o.column+1)}return n}(w=c(a[_]),w.length),w=d(w,h,1),delete a[_]),a[_]=w,l.length&&(a[i]=l),a=f(a,i),e.updateRows(a),e.increaseChanges()}(n,t)},b=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),p=s(l,o);if(1!==p.column){var d=u(l,p.column-1);l=_(l,d,p),delete a[i],a[i]=l,e.updateRows(a),e.increaseChanges()}}(n,t)},x=function(n){!function(n,e){n.preventDefault();var t=m(n),o=t.id,i=t.rowKey,a=r({},e.rows),l=c(a[i]),p=s(l,o);if(p.column!==l.length){var d=u(l,p.column+1);l=_(l,p,d),delete a[i],a[i]=l,e.updateRows(a),e.increaseChanges()}}(n,t)},k=function(n){!function(n,e){n.preventDefault();var t=n.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),i=o-1,a=r({},e.rows),l=c(a[o]);if(null==a[i])delete a[o],a[i]=l;else{var s=c(a[i]);a=y(a,l,o,s,i)}e.updateRows(a),e.increaseChanges()}(n,t)},E=function(n){!function(n,e){n.preventDefault();var t=n.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),i=o+1,a=r({},e.rows),l=c(a[o]);if(!a[i])throw new TypeError("There is no next row!");var s=c(a[i]);a=y(a,l,o,s,i),e.updateRows(a),e.increaseChanges()}(n,t)},S=function(n){var e=t.imageSrcProperty;return l(n,e)},A=function(n){var e,o=n.currentTarget.dataset.id;if(!o)throw new TypeError("Photo id missing");if(t.onPhotoClick&&t.onPhotoClick(n),t.useGallery){var r=(e=o,t.photos.findIndex((function(n){return n.id&&n.id==e})));r>-1&&h(r)}};return 0===Object.keys(t.rows).length?null:e().createElement("div",null,t.useGallery&&"scroll"===t.galleryType?e().createElement(R,{photos:t.photos,activeKey:a,setActiveKey:h,imageSrcPrefix:t.imageSrcPrefix,imageSrcProperty:t.gallerySrcProperty?t.gallerySrcProperty:"image_path",buttonArrows:t.galleryButtonArrows,onGallerySwipe:t.onGallerySwipe}):e().createElement(L,{photos:t.photos,activeKey:a,setActiveKey:h,imageSrcPrefix:t.imageSrcPrefix,imageSrcProperty:t.gallerySrcProperty?t.gallerySrcProperty:"image_path",buttonArrows:t.galleryButtonArrows,onGallerySwipe:t.onGallerySwipe}),e().createElement("div",{className:"photogrid"},Object.entries(t.rows).map((function(o,r){return o[1].length&&e().createElement("div",{key:"row-"+r,className:t.isEditing?"photogrid--photo__row editing":"photogrid--photo__row"},e().createElement(e().Fragment,null,t.isEditing&&e().createElement(I,{rowKey:o[0],moveRowUp:k,moveRowDown:E,rowCount:Object.keys(t.rows).length,buttonArrows:t.buttonArrows}),c(o[1]).map((function(a,l){return e().createElement("div",{key:"photo-"+r+l,className:"photogrid--photo__column"},e().createElement("img",{width:a.width,height:a.height,"data-id":a.id,src:"".concat(t.imageSrcPrefix).concat(S(a)),alt:a.thumbnail_path,onClick:A,className:t.useGallery?"cursor-pointer":"cursor-default"}),!t.isEditing&&!0===i(a)&&e().createElement("div",{className:"photogrid--photo_overlay"},null!=a.name&&""!==a.name&&e().createElement("h4",null,a.name),null!=a.description&&""!==a.description&&e().createElement("p",null,a.description)),t.isEditing?e().createElement(e().Fragment,null,e().createElement("p",{className:"photo__position"},"R: ",o[0]," | C: ",a.column),t.photoMenu?(0,n.cloneElement)(t.photoMenu,{photo:a}):null,e().createElement(j,{rowKey:o[0],photo:a,movePhotoDown:w,movePhotoLeft:b,movePhotoUp:v,movePhotoRight:x,rowCount:Object.keys(t.rows).length,photoCount:o[1].length,buttonArrows:t.buttonArrows})):t.photoActions?(0,n.cloneElement)(t.photoActions,{photo:a}):null)}))))}))))},H=function(n){return e().createElement("div",{className:n.checked?"photogrid--checkbox active":"photogrid--checkbox",onClick:function(e){e.preventDefault(),n.checked?n.onClick(n.value,!1):n.onClick(n.value,!0)}})}})(),module.exports=o})();
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-editable-photo-grid",
|
|
3
|
-
"version": "3.0.
|
|
3
|
+
"version": "3.0.3",
|
|
4
4
|
"description": "An editable photo grid built with React and Typescript",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"files": [
|
|
@@ -51,4 +51,4 @@
|
|
|
51
51
|
"react": "^17.0.0 || ^18.0.0",
|
|
52
52
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
53
53
|
}
|
|
54
|
-
}
|
|
54
|
+
}
|
package/src/styles.css
CHANGED
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
z-index: 20;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
.photogrid--row__controls
|
|
30
|
+
.photogrid--row__controls>li {
|
|
31
31
|
display: block;
|
|
32
32
|
}
|
|
33
33
|
|
|
@@ -41,19 +41,20 @@
|
|
|
41
41
|
text-align: center;
|
|
42
42
|
}
|
|
43
43
|
|
|
44
|
-
.photogrid--photo__controls
|
|
44
|
+
.photogrid--photo__controls>li {
|
|
45
45
|
display: inline-block;
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
.photogrid--photo__controls
|
|
48
|
+
.photogrid--photo__controls>li+li {
|
|
49
49
|
margin-left: 0.25rem;
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
.photogrid--row__controls
|
|
52
|
+
.photogrid--row__controls>li+li {
|
|
53
53
|
margin-top: 0.25rem;
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
-
.photogrid--photo__controls .photo__control,
|
|
56
|
+
.photogrid--photo__controls .photo__control,
|
|
57
|
+
.photogrid--row__controls .row__control {
|
|
57
58
|
width: 36px;
|
|
58
59
|
height: 36px;
|
|
59
60
|
display: block;
|
|
@@ -96,7 +97,8 @@
|
|
|
96
97
|
display: flex;
|
|
97
98
|
}
|
|
98
99
|
|
|
99
|
-
.photogrid--photo_overlay,
|
|
100
|
+
.photogrid--photo_overlay,
|
|
101
|
+
.photogrid__gallery_item__overlay {
|
|
100
102
|
min-height: 0;
|
|
101
103
|
display: none;
|
|
102
104
|
position: absolute;
|
|
@@ -109,20 +111,22 @@
|
|
|
109
111
|
z-index: 200;
|
|
110
112
|
}
|
|
111
113
|
|
|
112
|
-
.photogrid--photo_overlay h4,
|
|
114
|
+
.photogrid--photo_overlay h4,
|
|
115
|
+
.photogrid__gallery_item__overlay h4 {
|
|
113
116
|
font-size: 14px;
|
|
114
117
|
font-weight: 600;
|
|
115
118
|
margin: 0;
|
|
116
119
|
padding: 0;
|
|
117
120
|
}
|
|
118
121
|
|
|
119
|
-
.photogrid--photo_overlay p,
|
|
122
|
+
.photogrid--photo_overlay p,
|
|
123
|
+
.photogrid__gallery_item__overlay p {
|
|
120
124
|
margin: 7px 0 0 0;
|
|
121
125
|
padding: 0;
|
|
122
126
|
font-size: 12px;
|
|
123
127
|
}
|
|
124
128
|
|
|
125
|
-
.photogrid--photo__column
|
|
129
|
+
.photogrid--photo__column>.photo__position {
|
|
126
130
|
position: absolute;
|
|
127
131
|
top: 0;
|
|
128
132
|
z-index: 20;
|
|
@@ -133,7 +137,7 @@
|
|
|
133
137
|
padding: 0.1rem;
|
|
134
138
|
}
|
|
135
139
|
|
|
136
|
-
.photogrid--photo__column
|
|
140
|
+
.photogrid--photo__column>img {
|
|
137
141
|
display: block;
|
|
138
142
|
max-width: 100%;
|
|
139
143
|
max-height: 750px;
|
|
@@ -161,109 +165,110 @@
|
|
|
161
165
|
}
|
|
162
166
|
|
|
163
167
|
.custom__gallery .custom__gallery__container {
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
168
|
+
vertical-align: middle;
|
|
169
|
+
display: block;
|
|
170
|
+
height: 100%;
|
|
171
|
+
margin: 0 auto;
|
|
172
|
+
position: relative;
|
|
169
173
|
}
|
|
170
174
|
|
|
171
175
|
.custom__gallery .custom__gallery__container .previous__item {
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
176
|
+
display: none;
|
|
177
|
+
height: 50px;
|
|
178
|
+
width: 50px;
|
|
179
|
+
position: absolute;
|
|
180
|
+
top: 50%;
|
|
181
|
+
transform: translateY(-50%);
|
|
182
|
+
background: none;
|
|
183
|
+
border: none;
|
|
184
|
+
color: white;
|
|
185
|
+
font-size: 2rem;
|
|
186
|
+
left: 50px;
|
|
187
|
+
cursor: pointer;
|
|
188
|
+
z-index: 9001;
|
|
185
189
|
}
|
|
186
190
|
|
|
187
|
-
.custom__gallery .custom__gallery__container .previous__item
|
|
188
|
-
|
|
191
|
+
.custom__gallery .custom__gallery__container .previous__item>* {
|
|
192
|
+
pointer-events: none;
|
|
189
193
|
}
|
|
190
194
|
|
|
191
195
|
.custom__gallery .custom__gallery__container .custom__gallery__images {
|
|
192
|
-
|
|
193
|
-
|
|
196
|
+
height: 100vh;
|
|
197
|
+
text-align: center;
|
|
194
198
|
}
|
|
195
199
|
|
|
196
200
|
.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
201
|
+
position: relative;
|
|
202
|
+
height: 100vh;
|
|
203
|
+
display: none;
|
|
204
|
+
-webkit-touch-callout: none;
|
|
205
|
+
-webkit-user-select: none;
|
|
206
|
+
-moz-user-select: none;
|
|
207
|
+
user-select: none;
|
|
204
208
|
}
|
|
205
209
|
|
|
206
210
|
.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item.active {
|
|
207
|
-
|
|
211
|
+
display: block;
|
|
208
212
|
}
|
|
209
213
|
|
|
210
214
|
.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img {
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
215
|
+
display: block;
|
|
216
|
+
position: relative;
|
|
217
|
+
top: 50%;
|
|
218
|
+
transform: translateY(-50%);
|
|
219
|
+
max-width: 100%;
|
|
220
|
+
height: auto;
|
|
221
|
+
width: 100%;
|
|
222
|
+
margin: 0 auto;
|
|
223
|
+
line-height: 1;
|
|
224
|
+
vertical-align: middle;
|
|
225
|
+
outline: 0;
|
|
222
226
|
}
|
|
223
227
|
|
|
224
228
|
.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item p {
|
|
225
|
-
|
|
226
|
-
|
|
229
|
+
color: white;
|
|
230
|
+
margin-top: 12px;
|
|
227
231
|
}
|
|
228
232
|
|
|
229
233
|
.custom__gallery .custom__gallery__container .next__item {
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
234
|
+
display: none;
|
|
235
|
+
height: 50px;
|
|
236
|
+
width: 50px;
|
|
237
|
+
position: absolute;
|
|
238
|
+
top: 50%;
|
|
239
|
+
transform: translateY(-50%);
|
|
240
|
+
background: none;
|
|
241
|
+
border: none;
|
|
242
|
+
color: white;
|
|
243
|
+
font-size: 2rem;
|
|
244
|
+
right: 50px;
|
|
245
|
+
cursor: pointer;
|
|
246
|
+
z-index: 9001;
|
|
243
247
|
}
|
|
244
248
|
|
|
245
|
-
.custom__gallery .custom__gallery__container .next__item
|
|
246
|
-
|
|
249
|
+
.custom__gallery .custom__gallery__container .next__item>* {
|
|
250
|
+
pointer-events: none;
|
|
247
251
|
}
|
|
248
252
|
|
|
249
253
|
.custom__gallery .close__gallery {
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
254
|
+
position: absolute;
|
|
255
|
+
z-index: 9999;
|
|
256
|
+
right: 0;
|
|
257
|
+
background: none;
|
|
258
|
+
color: white;
|
|
259
|
+
border: none;
|
|
260
|
+
font-size: 3rem;
|
|
261
|
+
float: right;
|
|
262
|
+
font-weight: 300;
|
|
263
|
+
width: 73px;
|
|
264
|
+
height: 73px;
|
|
265
|
+
overflow: hidden;
|
|
266
|
+
text-decoration: none;
|
|
263
267
|
}
|
|
264
268
|
|
|
265
|
-
.custom__gallery .close__gallery:active,
|
|
266
|
-
|
|
269
|
+
.custom__gallery .close__gallery:active,
|
|
270
|
+
.custom__gallery .close__gallery:focus {
|
|
271
|
+
text-decoration: none;
|
|
267
272
|
}
|
|
268
273
|
|
|
269
274
|
|
|
@@ -319,11 +324,11 @@
|
|
|
319
324
|
flex-shrink: 0;
|
|
320
325
|
}
|
|
321
326
|
|
|
322
|
-
.photogrid__gallery_item
|
|
327
|
+
.photogrid__gallery_item+.photogrid__gallery_item {
|
|
323
328
|
margin-left: 1rem;
|
|
324
329
|
}
|
|
325
330
|
|
|
326
|
-
.photogrid__gallery_item
|
|
331
|
+
.photogrid__gallery_item>img {
|
|
327
332
|
width: 100%;
|
|
328
333
|
max-width: 100%;
|
|
329
334
|
height: auto;
|
|
@@ -340,7 +345,7 @@
|
|
|
340
345
|
padding-right: 0.5rem;
|
|
341
346
|
}
|
|
342
347
|
|
|
343
|
-
.photogrid__gallery__hide
|
|
348
|
+
.photogrid__gallery__hide>button {
|
|
344
349
|
color: white;
|
|
345
350
|
font-weight: 300;
|
|
346
351
|
width: 73px;
|
|
@@ -350,7 +355,8 @@
|
|
|
350
355
|
border: none;
|
|
351
356
|
}
|
|
352
357
|
|
|
353
|
-
.photogrid__prev,
|
|
358
|
+
.photogrid__prev,
|
|
359
|
+
.photogrid__next {
|
|
354
360
|
display: none;
|
|
355
361
|
width: auto;
|
|
356
362
|
position: absolute;
|
|
@@ -361,7 +367,8 @@
|
|
|
361
367
|
font-size: 2rem;
|
|
362
368
|
}
|
|
363
369
|
|
|
364
|
-
.photogrid__prev
|
|
370
|
+
.photogrid__prev>button>*,
|
|
371
|
+
.photogrid__next>button>* {
|
|
365
372
|
pointer-events: none;
|
|
366
373
|
}
|
|
367
374
|
|
|
@@ -374,7 +381,9 @@
|
|
|
374
381
|
}
|
|
375
382
|
|
|
376
383
|
@media only screen and (min-width: 768px) {
|
|
377
|
-
|
|
384
|
+
|
|
385
|
+
.custom__gallery .custom__gallery__container .previous__item,
|
|
386
|
+
.custom__gallery .custom__gallery__container .next__item {
|
|
378
387
|
display: inline-block;
|
|
379
388
|
}
|
|
380
389
|
|
|
@@ -383,28 +392,41 @@
|
|
|
383
392
|
flex: 1 1 auto;
|
|
384
393
|
}
|
|
385
394
|
|
|
386
|
-
.photogrid--photo__column
|
|
395
|
+
.photogrid--photo__column:first-child {
|
|
396
|
+
margin-left: 0;
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.photogrid--photo__column:last-child {
|
|
400
|
+
margin-right: 0;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.photogrid--photo__column>img {
|
|
387
404
|
display: inline-block;
|
|
388
405
|
}
|
|
389
406
|
}
|
|
390
407
|
|
|
391
408
|
@media only screen and (min-width: 1024px) {
|
|
392
|
-
|
|
409
|
+
|
|
410
|
+
.photogrid__prev,
|
|
411
|
+
.photogrid__next {
|
|
393
412
|
display: block;
|
|
394
413
|
}
|
|
395
414
|
}
|
|
396
415
|
|
|
397
416
|
|
|
398
417
|
@media only screen and (min-width: 1280px) {
|
|
399
|
-
.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover
|
|
418
|
+
.custom__gallery .custom__gallery__container .custom__gallery__images .custom__gallery__item img:hover+.custom__gallery__photo__overlay {
|
|
400
419
|
display: block;
|
|
401
420
|
}
|
|
402
|
-
|
|
421
|
+
|
|
422
|
+
.photogrid--photo__column img:hover+.photogrid--photo_overlay {
|
|
403
423
|
display: block;
|
|
404
424
|
}
|
|
405
|
-
|
|
425
|
+
|
|
426
|
+
.photogrid__gallery_item>img:hover .photogrid__gallery_item__overlay {
|
|
406
427
|
display: block;
|
|
407
428
|
}
|
|
429
|
+
|
|
408
430
|
.photogrid__gallery_scrollcontainer {
|
|
409
431
|
width: 91.6%;
|
|
410
432
|
}
|
|
@@ -426,4 +448,4 @@
|
|
|
426
448
|
.photogrid__gallery_scrollcontainer {
|
|
427
449
|
width: 75%;
|
|
428
450
|
}
|
|
429
|
-
}
|
|
451
|
+
}
|