react-editable-photo-grid 2.3.5 → 2.3.7
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 +1 -1
- package/src/PhotoGrid.tsx +6 -2
- package/src/styles.css +5 -6
package/dist/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(()=>{var e={365:(e,n,t)=>{"use strict";t.d(n,{A:()=>l});var o=t(601),r=t.n(o),i=t(314),a=t.n(i)()(r());a.push([e.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_overlay {\n cursor: pointer;\n}\n\n.photogrid--photo_overlay, .photogrid__gallery_item__overlay, .custom__gallery__photo__overlay {\n text-align: center;\n min-height: 0;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.6);\n padding: 0.5rem;\n z-index: 200;\n}\n\n.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4, .custom__gallery__photo__overlay h4 {\n pointer-events: none;\n margin: 25% 0 0 0;\n font-size: 20px;\n font-weight: 600;\n padding: 0;\n}\n\n.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p, , .custom__gallery__photo__overlay p {\n pointer-events: none;\n font-size: 16px;\n margin: 7px 0 0 0;\n padding: 0;\n}\n\n.photogrid--photo__column > .photo__details {\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n text-align: center;\n}\n\n.photogrid--photo__column > .photo__details > .photo__position {\n display: inline-block;\n background: rgba(0, 0, 0, 0.65);\n color: white;\n padding: 0.1rem;\n}\n\n.photogrid--photo__column > .photo__details > .photo__details__desc {\n list-style-type: none;\n display: block;\n margin: 0;\n padding: 0;\n width: 100%;\n}\n\n.photogrid--photo__column > .photo__details > .photo__details__desc > li {\n display: block;\n}\n\n.photogrid--photo__column > .photo__details > .photo__details__desc > li + li {\n margin-top: 7px;\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 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 z-index: 500;\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: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:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,i){"string"==typeof e&&(e=[[null,e,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<e.length;s++){var u=[].concat(e[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)),n.push(u))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},181:(e,n,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,_=Math.max,d=Math.min,h=function(){return u.Date.now()};function m(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==p.call(e)}(e))return NaN;if(m(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=m(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var t=i.test(e);return t||a.test(e)?l(e.slice(2),t?2:8):r.test(e)?NaN:+e}e.exports=function(e,n,t){var o,r,i,a,l,c,s=0,u=!1,p=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(n){var t=o,i=r;return o=r=void 0,s=n,a=e.apply(i,t)}function v(e){var t=e-c;return void 0===c||t>=n||t<0||p&&e-s>=i}function w(){var e=h();if(v(e))return b(e);l=setTimeout(w,function(e){var t=n-(e-c);return p?d(t,i-(e-s)):t}(e))}function b(e){return l=void 0,f&&o?y(e):(o=r=void 0,a)}function x(){var e=h(),t=v(e);if(o=arguments,r=this,c=e,t){if(void 0===l)return function(e){return s=e,l=setTimeout(w,n),u?y(e):a}(c);if(p)return l=setTimeout(w,n),y(c)}return void 0===l&&(l=setTimeout(w,n)),a}return n=g(n)||0,m(t)&&(u=!!t.leading,i=(p="maxWait"in t)?_(g(t.maxWait)||0,n):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:e=>{"use strict";var n=[];function t(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function o(e,o){for(var i={},a=[],l=0;l<e.length;l++){var c=e[l],s=o.base?c[0]+o.base:c[0],u=i[s]||0,p="".concat(s," ").concat(u);i[s]=u+1;var _=t(p),d={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==_)n[_].references++,n[_].updater(d);else{var h=r(d,o);o.byIndex=l,n.splice(l,0,{identifier:p,updater:h,references:1})}a.push(p)}return a}function r(e,n){var t=n.domAPI(n);return t.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,r){var i=o(e=e||[],r=r||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var l=t(i[a]);n[l].references--}for(var c=o(e,r),s=0;s<i.length;s++){var u=t(i[s]);0===n[u].references&&(n[u].updater(),n.splice(u,1))}i=c}}},659:e=>{"use strict";var n={};e.exports=function(e,t){var o=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);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:e=>{"use strict";e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},56:(e,n,t)=>{"use strict";e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},825:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,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))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},113:e=>{"use strict";e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function t(o){var r=n[o];if(void 0!==r)return r.exports;var i=n[o]={id:o,exports:{}};return e[o](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nc=void 0;var o={};(()=>{"use strict";t.r(o),t.d(o,{Checkbox:()=>G,PhotoGrid:()=>H,PhotoItem:()=>e.PhotoItem,PhotoRows:()=>e.PhotoRows,imgSrcProperty:()=>B,sortPhotosIntoRows:()=>l});var e={};t.r(e),t.d(e,{B:()=>B});const n=require("react");var r=t.n(n),i=function(){return i=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},i.apply(this,arguments)},a=function(e){return null!=e.name&&""!==e.name||null!=e.description&&""!==e.description},l=function(e){for(var n={},t=0,o=e;t<o.length;t++){var r=o[t],i=r.row;n[i]||(n[i]=[]),n[i].push(r)}return n},c=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},s=function(e){return e.sort((function(e,n){return Math.floor(e.column)-Math.floor(n.column)}))},u=function(e,n){var t=e.find((function(e){return e.id===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that id");return t},p=function(e,n){var t=e.find((function(e){return e.column===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that column");return t},_=function(e,n){return e.filter((function(e){return e.column!==n}))},d=function(e,n,t){return void 0===e&&(e=[]),n.column=t,e.push(n),e},h=function(e,n,t){var o=n.column,r=t.column;return e=_(e,o),e=_(e,r),e=d(e,n,r),d(e,t,o)},m=function(e){return"string"==typeof e&&(e=parseInt(e)),e},g=function(e){var n=e.currentTarget,t=n.dataset.id,o=n.dataset.row;if(!t||!o)throw new TypeError("id or row key missing from photo control");return{id:t,rowKey:parseInt(o)}},f=function(e,n,t){for(var o=n;o<=t;o++){var r=p(e,o);e=_(e,o),e=d(e,r,r.column-1)}return e},y=function(e,n){return null==e[n]&&Object.entries(e).map((function(t){var o=t[0],r=t[1],i=parseInt(o);i>n&&(delete e[i],e[i-1]=r)})),e},v=function(e,n,t,o,r){return delete e[r],delete e[t],e[r]=n,e[t]=o,e},w=t(72),b=t.n(w),x=t(825),k=t.n(x),E=t(659),S=t.n(E),C=t(56),K=t.n(C),T=t(540),A=t.n(T),N=t(113),P=t.n(N),M=t(365),I={};I.styleTagTransform=P(),I.setAttributes=K(),I.insert=S().bind(null,"head"),I.domAPI=k(),I.insertStyleElement=A(),b()(M.A,I),M.A&&M.A.locals&&M.A.locals;const j=function(e){return r().createElement("ul",{className:"photogrid--row__controls"},m(e.rowKey)>1&&r().createElement("li",null,r().createElement("button",{className:"row__control move__row__up",onClick:e.moveRowUp,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount&&r().createElement("li",null,r().createElement("button",{className:"row__control move__row__down",onClick:e.moveRowDown,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})))},z=function(e){return r().createElement("ul",{className:"photogrid--photo__controls"},e.photo.column>1&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__left",onClick:e.movePhotoLeft,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.left:"←"}})),m(e.rowKey)>1&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__up",onClick:e.movePhotoUp,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount||m(e.rowKey)===e.rowCount&&e.photoCount>1?r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__down",onClick:e.movePhotoDown,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})):null,e.photo.column<e.photoCount&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__right",onClick:e.movePhotoRight,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.right:"→"}})))};var R=t(181),D=t.n(R);const O=function(e){var t=e.photos,o=e.imageSrcPrefix,i=e.imageSrcProperty,l=(e.onGallerySwipe,e.activeKey),c=e.setActiveKey,s=e.buttonArrows,u=(0,n.useState)(!1),p=u[0],_=u[1],d=(0,n.useRef)(null),h=(0,n.useRef)([]),m=(0,n.useState)(!1),g=(m[0],m[1]),f=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},y=(0,n.useCallback)(D()((function(e){g(!1);var n=h.current[e],t=d.current;if(n&&t){var o=n.getBoundingClientRect(),r=t.getBoundingClientRect(),i=o.left-r.left+t.scrollLeft;t.scrollTo({left:i,behavior:"smooth"})}g(!0)}),100),[]),v=function(e){return e.preventDefault(),!1};return(0,n.useEffect)((function(){l>-1&&!1===p&&(_(!0),y(l))}),[l]),(0,n.useEffect)((function(){h.current.forEach((function(e,n){if(e){var t=e.getAttribute("data-src");t&&(e.src=t)}}))}),[t]),r().createElement("div",{className:"".concat(p?"block":"hidden"," photogrid__gallery")},r().createElement("div",{className:"photogrid__gallery__hide"},r().createElement("button",{onClick:function(){_(!1),c(-1)},type:"button"},"×")),r().createElement("div",{className:"photogrid__prev"},r().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=d.current&&d.current.scrollBy({top:0,left:-1,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:s?s.prev:"←"}})),r().createElement("div",{ref:d,className:"photogrid__gallery_scrollcontainer",onScroll:function(e){}},t.length&&t.map((function(e,n){return r().createElement("div",{key:"".concat(n),className:"photogrid__gallery_item"},r().createElement("img",{ref:function(e){return h.current[n]=e},"data-index":n,"data-src":"".concat(o).concat(f(e,i)),alt:"gallery item",onContextMenu:v}),!0===a(e)&&r().createElement("div",{className:"photogrid__gallery_item__overlay"},null!=e.name&&""!==e.name&&r().createElement("h4",null,e.name),null!=e.description&&""!==e.description&&r().createElement("p",null,e.description)))}))),r().createElement("div",{className:"photogrid__next"},r().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=d.current&&d.current.scrollBy({top:0,left:800,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:s?s.next:"→"}})))},L=function(e){var t=(0,n.useState)(null),o=t[0],i=t[1],l=(0,n.useState)(!1),s=l[0],u=l[1],p=function(n){var t=e.imageSrcProperty;return c(n,t)},_=function(){if(e.onGallerySwipe){var n=e.activeKey,t=e.photos[n];t&&e.onGallerySwipe(t)}},d=function(n){39===n.keyCode?e.activeKey<e.photos.length-1&&e.setActiveKey(e.activeKey+1):37===n.keyCode&&e.activeKey>0&&e.setActiveKey(e.activeKey-1),_()},h=function(){return!1};return(0,n.useEffect)((function(){return e.activeKey>-1&&!1===s&&u(!0),document.addEventListener("keydown",d),function(){document.removeEventListener("keydown",d)}}),[e.activeKey]),r().createElement("div",{className:"custom__gallery",style:{display:!0===s?"block":"none"},onTouchStart:function(e){var n=e.touches[0].clientX;i(n)},onTouchMove:function(n){if(null!==o){var t=n.touches[0].clientX,r=o-t;r>5&&e.activeKey<e.photos.length-1&&e.setActiveKey(e.activeKey+1),r<-5&&e.activeKey>0&&e.setActiveKey(e.activeKey-1),_(),i(null)}}},r().createElement("div",{className:"clearfix"},r().createElement("button",{className:"close__gallery",onClick:function(){u(!1),e.setActiveKey(-1)},type:"button"},"×")),r().createElement("div",{className:"custom__gallery__container"},e.activeKey>0&&r().createElement("button",{onClick:function(n){n.preventDefault(),e.activeKey>0&&(e.setActiveKey(e.activeKey-1),_())},className:"previous__item",dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.prev:"←"}}),r().createElement("div",{className:"custom__gallery__images"},e.photos.length&&e.photos.map((function(n,t){return r().createElement("div",{key:"".concat(t),className:e.activeKey==t?"custom__gallery__item active":"custom__gallery__item"},r().createElement("img",{src:(o=t,i=e.activeKey,l=[i],i>0&&l.push(i-1),i<e.photos.length-1&&l.push(i+1),l.includes(o)?"".concat(e.imageSrcPrefix).concat(p(n)):""),alt:"gallery item",onContextMenu:h}),!0===a(n)&&r().createElement("div",{className:"custom__gallery__photo__overlay"},null!=n.name&&""!==n.name&&r().createElement("h4",null,n.name),null!=n.description&&""!==n.description&&r().createElement("p",null,n.description)));var o,i,l}))),e.activeKey<e.photos.length-1&&r().createElement("button",{onClick:function(n){n.preventDefault(),e.activeKey<e.photos.length-1&&(e.setActiveKey(e.activeKey+1),_())},className:"next__item",dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.next:"→"}})))},H=function(e){var t=(0,n.useState)(-1),o=t[0],l=t[1],m=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=r-1,p=[];null!=a[c]&&(p=s(a[c]));var h=u(l,o),m=h.column+1,v=l.length;l=_(l,h.column),delete a[r],l.length&&(f(l,m,v),a[r]=l),p=d(p,h,p.length+1),delete a[c],a[c]=p,a=y(a,r),n.updateRows(a),n.increaseChanges()}(n,e)},w=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=r+1,h=u(l,o),m=h.column+1,v=l.length;l=_(l,h.column),delete a[r],l.length&&(l=f(l,m,v));var w=null;null==a[c]?(h.column=1,w=[h]):(w=function(e,n){for(var t=n;t>0;t--){var o=p(e,t);e=_(e,t),e=d(e,o,o.column+1)}return e}(w=s(a[c]),w.length),w=d(w,h,1),delete a[c]),a[c]=w,l.length&&(a[r]=l),a=y(a,r),n.updateRows(a),n.increaseChanges()}(n,e)},b=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=u(l,o);if(1!==c.column){var _=p(l,c.column-1);l=h(l,_,c),delete a[r],a[r]=l,n.updateRows(a),n.increaseChanges()}}(n,e)},x=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=u(l,o);if(c.column!==l.length){var _=p(l,c.column+1);l=h(l,c,_),delete a[r],a[r]=l,n.updateRows(a),n.increaseChanges()}}(n,e)},k=function(n){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),r=o-1,a=i({},n.rows),l=s(a[o]);if(null==a[r])delete a[o],a[r]=l;else{var c=s(a[r]);a=v(a,l,o,c,r)}n.updateRows(a),n.increaseChanges()}(n,e)},E=function(n){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),r=o+1,a=i({},n.rows),l=s(a[o]);if(!a[r])throw new TypeError("There is no next row!");var c=s(a[r]);a=v(a,l,o,c,r),n.updateRows(a),n.increaseChanges()}(n,e)},S=function(n){var t=e.imageSrcProperty;return c(n,t)},C=function(n){var t,o=n.currentTarget.dataset.id;if(!o)throw new TypeError("Photo id missing");if(e.onPhotoClick&&e.onPhotoClick(n),e.useGallery){var r=(t=o,e.photos.findIndex((function(e){return e.id&&e.id==t})));r>-1&&l(r)}},K=function(e){return e.preventDefault(),!1},T=function(e){e.preventDefault();var n=e.currentTarget.previousSibling;n instanceof HTMLImageElement&&n.click()};return 0===Object.keys(e.rows).length?null:r().createElement("div",null,e.useGallery&&"scroll"===e.galleryType?r().createElement(O,{photos:e.photos,activeKey:o,setActiveKey:l,imageSrcPrefix:e.imageSrcPrefix,imageSrcProperty:e.gallerySrcProperty?e.gallerySrcProperty:"image_path",buttonArrows:e.galleryButtonArrows,onGallerySwipe:e.onGallerySwipe}):r().createElement(L,{photos:e.photos,activeKey:o,setActiveKey:l,imageSrcPrefix:e.imageSrcPrefix,imageSrcProperty:e.gallerySrcProperty?e.gallerySrcProperty:"image_path",buttonArrows:e.galleryButtonArrows,onGallerySwipe:e.onGallerySwipe}),r().createElement("div",{className:"photogrid"},Object.entries(e.rows).map((function(t,o){return t[1].length&&r().createElement("div",{key:"row-"+o,className:e.isEditing?"photogrid--photo__row editing":"photogrid--photo__row"},r().createElement(r().Fragment,null,e.isEditing&&r().createElement(j,{rowKey:t[0],moveRowUp:k,moveRowDown:E,rowCount:Object.keys(e.rows).length,buttonArrows:e.buttonArrows}),s(t[1]).map((function(i,l){return r().createElement("div",{key:"photo-"+o+l,className:"photogrid--photo__column"},r().createElement("img",{width:i.width,height:i.height,"data-id":i.id,src:"".concat(e.imageSrcPrefix).concat(S(i)),alt:i.thumbnail_path,onClick:C,className:e.useGallery?"cursor-pointer":"cursor-default",onContextMenu:K}),!e.isEditing&&!0===a(i)&&r().createElement("div",{className:"photogrid--photo_overlay",onClick:T},null!=i.name&&""!==i.name&&r().createElement("h4",null,i.name),null!=i.description&&""!==i.description&&r().createElement("p",null,i.description)),e.isEditing&&r().createElement(r().Fragment,null,r().createElement("div",{className:"photo__details"},r().createElement("p",{className:"photo__position"},"R: ",t[0]," | C: ",i.column),!0===a(i)&&r().createElement("ul",{className:"photo__details__desc"},r().createElement("li",null,"Name: ",i.name?i.name:"-"),r().createElement("li",null,"Description: ",i.description?i.description:""))),e.photoMenu?(0,n.cloneElement)(e.photoMenu,{photo:i}):null,r().createElement(z,{rowKey:t[0],photo:i,movePhotoDown:w,movePhotoLeft:b,movePhotoUp:m,movePhotoRight:x,rowCount:Object.keys(e.rows).length,photoCount:t[1].length,buttonArrows:e.buttonArrows})))}))))}))))},G=function(e){return r().createElement("div",{className:e.checked?"photogrid--checkbox active":"photogrid--checkbox",onClick:function(n){n.preventDefault(),e.checked?e.onClick(e.value,!1):e.onClick(e.value,!0)}})};var B;!function(e){e.id="id",e.thumbnail_path="thumbnail_path",e.image_path="image_path"}(B||(B={}))})(),module.exports=o})();
|
|
1
|
+
(()=>{var e={365:(e,n,t)=>{"use strict";t.d(n,{A:()=>l});var o=t(601),r=t.n(o),i=t(314),a=t.n(i)()(r());a.push([e.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: 50;\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_overlay {\n cursor: pointer;\n}\n\n.photogrid--photo_overlay, .photogrid__gallery_item__overlay, .custom__gallery__photo__overlay {\n text-align: center;\n min-height: 0;\n display: none;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: rgba(255, 255, 255, 0.6);\n padding: 0.5rem;\n z-index: 200;\n}\n\n.photogrid--photo_overlay h4, .photogrid__gallery_item__overlay h4, .custom__gallery__photo__overlay h4 {\n pointer-events: none;\n margin: 25% 0 0 0;\n font-size: 20px;\n font-weight: 600;\n padding: 0;\n}\n\n.photogrid--photo_overlay p, .photogrid__gallery_item__overlay p, , .custom__gallery__photo__overlay p {\n pointer-events: none;\n font-size: 16px;\n margin: 7px 0 0 0;\n padding: 0;\n}\n\n.photogrid--photo__column > .photo__details {\n width: 100%;\n position: absolute;\n top: 0;\n left: 0;\n z-index: 20;\n text-align: center;\n}\n\n.photogrid--photo__column > .photo__details > .photo__position {\n display: inline-block;\n background: rgba(0, 0, 0, 0.65);\n color: white;\n padding: 0.1rem;\n}\n\n.photogrid--photo__column > .photo__details > .photo__details__desc {\n list-style-type: none;\n display: block;\n margin: 7px 0 0 0;\n padding: 0;\n width: 100%;\n background: rgba(0, 0, 0, 0.6);\n color: white;\n font-size: 13px;\n}\n\n.photogrid--photo__column > .photo__details > .photo__details__desc > li {\n display: block;\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 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 z-index: 500;\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: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:e=>{"use strict";e.exports=function(e){var n=[];return n.toString=function(){return this.map((function(n){var t="",o=void 0!==n[5];return n[4]&&(t+="@supports (".concat(n[4],") {")),n[2]&&(t+="@media ".concat(n[2]," {")),o&&(t+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),t+=e(n),o&&(t+="}"),n[2]&&(t+="}"),n[4]&&(t+="}"),t})).join("")},n.i=function(e,t,o,r,i){"string"==typeof e&&(e=[[null,e,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<e.length;s++){var u=[].concat(e[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)),n.push(u))}},n}},601:e=>{"use strict";e.exports=function(e){return e[1]}},181:(e,n,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,_=Math.max,d=Math.min,h=function(){return u.Date.now()};function m(e){var n=typeof e;return!!e&&("object"==n||"function"==n)}function g(e){if("number"==typeof e)return e;if(function(e){return"symbol"==typeof e||function(e){return!!e&&"object"==typeof e}(e)&&"[object Symbol]"==p.call(e)}(e))return NaN;if(m(e)){var n="function"==typeof e.valueOf?e.valueOf():e;e=m(n)?n+"":n}if("string"!=typeof e)return 0===e?e:+e;e=e.replace(o,"");var t=i.test(e);return t||a.test(e)?l(e.slice(2),t?2:8):r.test(e)?NaN:+e}e.exports=function(e,n,t){var o,r,i,a,l,c,s=0,u=!1,p=!1,f=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(n){var t=o,i=r;return o=r=void 0,s=n,a=e.apply(i,t)}function v(e){var t=e-c;return void 0===c||t>=n||t<0||p&&e-s>=i}function w(){var e=h();if(v(e))return b(e);l=setTimeout(w,function(e){var t=n-(e-c);return p?d(t,i-(e-s)):t}(e))}function b(e){return l=void 0,f&&o?y(e):(o=r=void 0,a)}function x(){var e=h(),t=v(e);if(o=arguments,r=this,c=e,t){if(void 0===l)return function(e){return s=e,l=setTimeout(w,n),u?y(e):a}(c);if(p)return l=setTimeout(w,n),y(c)}return void 0===l&&(l=setTimeout(w,n)),a}return n=g(n)||0,m(t)&&(u=!!t.leading,i=(p="maxWait"in t)?_(g(t.maxWait)||0,n):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:e=>{"use strict";var n=[];function t(e){for(var t=-1,o=0;o<n.length;o++)if(n[o].identifier===e){t=o;break}return t}function o(e,o){for(var i={},a=[],l=0;l<e.length;l++){var c=e[l],s=o.base?c[0]+o.base:c[0],u=i[s]||0,p="".concat(s," ").concat(u);i[s]=u+1;var _=t(p),d={css:c[1],media:c[2],sourceMap:c[3],supports:c[4],layer:c[5]};if(-1!==_)n[_].references++,n[_].updater(d);else{var h=r(d,o);o.byIndex=l,n.splice(l,0,{identifier:p,updater:h,references:1})}a.push(p)}return a}function r(e,n){var t=n.domAPI(n);return t.update(e),function(n){if(n){if(n.css===e.css&&n.media===e.media&&n.sourceMap===e.sourceMap&&n.supports===e.supports&&n.layer===e.layer)return;t.update(e=n)}else t.remove()}}e.exports=function(e,r){var i=o(e=e||[],r=r||{});return function(e){e=e||[];for(var a=0;a<i.length;a++){var l=t(i[a]);n[l].references--}for(var c=o(e,r),s=0;s<i.length;s++){var u=t(i[s]);0===n[u].references&&(n[u].updater(),n.splice(u,1))}i=c}}},659:e=>{"use strict";var n={};e.exports=function(e,t){var o=function(e){if(void 0===n[e]){var t=document.querySelector(e);if(window.HTMLIFrameElement&&t instanceof window.HTMLIFrameElement)try{t=t.contentDocument.head}catch(e){t=null}n[e]=t}return n[e]}(e);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:e=>{"use strict";e.exports=function(e){var n=document.createElement("style");return e.setAttributes(n,e.attributes),e.insert(n,e.options),n}},56:(e,n,t)=>{"use strict";e.exports=function(e){var n=t.nc;n&&e.setAttribute("nonce",n)}},825:e=>{"use strict";e.exports=function(e){if("undefined"==typeof document)return{update:function(){},remove:function(){}};var n=e.insertStyleElement(e);return{update:function(t){!function(e,n,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))))," */")),n.styleTagTransform(o,e,n.options)}(n,e,t)},remove:function(){!function(e){if(null===e.parentNode)return!1;e.parentNode.removeChild(e)}(n)}}}},113:e=>{"use strict";e.exports=function(e,n){if(n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}}},n={};function t(o){var r=n[o];if(void 0!==r)return r.exports;var i=n[o]={id:o,exports:{}};return e[o](i,i.exports,t),i.exports}t.n=e=>{var n=e&&e.__esModule?()=>e.default:()=>e;return t.d(n,{a:n}),n},t.d=(e,n)=>{for(var o in n)t.o(n,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:n[o]})},t.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),t.o=(e,n)=>Object.prototype.hasOwnProperty.call(e,n),t.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},t.nc=void 0;var o={};(()=>{"use strict";t.r(o),t.d(o,{Checkbox:()=>G,PhotoGrid:()=>H,PhotoItem:()=>e.PhotoItem,PhotoRows:()=>e.PhotoRows,imgSrcProperty:()=>B,sortPhotosIntoRows:()=>l});var e={};t.r(e),t.d(e,{B:()=>B});const n=require("react");var r=t.n(n),i=function(){return i=Object.assign||function(e){for(var n,t=1,o=arguments.length;t<o;t++)for(var r in n=arguments[t])Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r]);return e},i.apply(this,arguments)},a=function(e){return null!=e.name&&""!==e.name||null!=e.description&&""!==e.description},l=function(e){for(var n={},t=0,o=e;t<o.length;t++){var r=o[t],i=r.row;n[i]||(n[i]=[]),n[i].push(r)}return n},c=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},s=function(e){return e.sort((function(e,n){return Math.floor(e.column)-Math.floor(n.column)}))},u=function(e,n){var t=e.find((function(e){return e.id===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that id");return t},p=function(e,n){var t=e.find((function(e){return e.column===n}));if(void 0===t)throw new TypeError("No photo was found in this row for that column");return t},_=function(e,n){return e.filter((function(e){return e.column!==n}))},d=function(e,n,t){return void 0===e&&(e=[]),n.column=t,e.push(n),e},h=function(e,n,t){var o=n.column,r=t.column;return e=_(e,o),e=_(e,r),e=d(e,n,r),d(e,t,o)},m=function(e){return"string"==typeof e&&(e=parseInt(e)),e},g=function(e){var n=e.currentTarget,t=n.dataset.id,o=n.dataset.row;if(!t||!o)throw new TypeError("id or row key missing from photo control");return{id:t,rowKey:parseInt(o)}},f=function(e,n,t){for(var o=n;o<=t;o++){var r=p(e,o);e=_(e,o),e=d(e,r,r.column-1)}return e},y=function(e,n){return null==e[n]&&Object.entries(e).map((function(t){var o=t[0],r=t[1],i=parseInt(o);i>n&&(delete e[i],e[i-1]=r)})),e},v=function(e,n,t,o,r){return delete e[r],delete e[t],e[r]=n,e[t]=o,e},w=t(72),b=t.n(w),x=t(825),k=t.n(x),E=t(659),S=t.n(E),C=t(56),K=t.n(C),T=t(540),A=t.n(T),N=t(113),P=t.n(N),M=t(365),I={};I.styleTagTransform=P(),I.setAttributes=K(),I.insert=S().bind(null,"head"),I.domAPI=k(),I.insertStyleElement=A(),b()(M.A,I),M.A&&M.A.locals&&M.A.locals;const j=function(e){return r().createElement("ul",{className:"photogrid--row__controls"},m(e.rowKey)>1&&r().createElement("li",null,r().createElement("button",{className:"row__control move__row__up",onClick:e.moveRowUp,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount&&r().createElement("li",null,r().createElement("button",{className:"row__control move__row__down",onClick:e.moveRowDown,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})))},z=function(e){return r().createElement("ul",{className:"photogrid--photo__controls"},e.photo.column>1&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__left",onClick:e.movePhotoLeft,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.left:"←"}})),m(e.rowKey)>1&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__up",onClick:e.movePhotoUp,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.up:"↑"}})),m(e.rowKey)<e.rowCount||m(e.rowKey)===e.rowCount&&e.photoCount>1?r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__down",onClick:e.movePhotoDown,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.down:"↓"}})):null,e.photo.column<e.photoCount&&r().createElement("li",null,r().createElement("button",{type:"button",className:"photo__control move__photo__right",onClick:e.movePhotoRight,"data-id":e.photo.id,"data-row":e.rowKey,dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.right:"→"}})))};var R=t(181),O=t.n(R);const D=function(e){var t=e.photos,o=e.imageSrcPrefix,i=e.imageSrcProperty,l=(e.onGallerySwipe,e.activeKey),c=e.setActiveKey,s=e.buttonArrows,u=(0,n.useState)(!1),p=u[0],_=u[1],d=(0,n.useRef)(null),h=(0,n.useRef)([]),m=(0,n.useState)(!1),g=(m[0],m[1]),f=function(e,n){switch(n){case"id":return e.id;case"thumbnail_path":return e.thumbnail_path;case"image_path":return e.image_path}return e.image_path},y=(0,n.useCallback)(O()((function(e){g(!1);var n=h.current[e],t=d.current;if(n&&t){var o=n.getBoundingClientRect(),r=t.getBoundingClientRect(),i=o.left-r.left+t.scrollLeft;t.scrollTo({left:i,behavior:"smooth"})}g(!0)}),100),[]),v=function(e){return e.preventDefault(),!1};return(0,n.useEffect)((function(){l>-1&&!1===p&&(_(!0),y(l))}),[l]),(0,n.useEffect)((function(){h.current.forEach((function(e,n){if(e){var t=e.getAttribute("data-src");t&&(e.src=t)}}))}),[t]),r().createElement("div",{className:"".concat(p?"block":"hidden"," photogrid__gallery")},r().createElement("div",{className:"photogrid__gallery__hide"},r().createElement("button",{onClick:function(){_(!1),c(-1)},type:"button"},"×")),r().createElement("div",{className:"photogrid__prev"},r().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=d.current&&d.current.scrollBy({top:0,left:-1,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:s?s.prev:"←"}})),r().createElement("div",{ref:d,className:"photogrid__gallery_scrollcontainer",onScroll:function(e){}},t.length&&t.map((function(e,n){return r().createElement("div",{key:"".concat(n),className:"photogrid__gallery_item"},r().createElement("img",{ref:function(e){return h.current[n]=e},"data-index":n,"data-src":"".concat(o).concat(f(e,i)),alt:"gallery item",onContextMenu:v}),!0===a(e)&&r().createElement("div",{className:"photogrid__gallery_item__overlay"},null!=e.name&&""!==e.name&&r().createElement("h4",null,e.name),null!=e.description&&""!==e.description&&r().createElement("p",null,e.description)))}))),r().createElement("div",{className:"photogrid__next"},r().createElement("button",{type:"button",onClick:function(e){e.preventDefault(),null!=d.current&&d.current.scrollBy({top:0,left:800,behavior:"smooth"})},dangerouslySetInnerHTML:{__html:s?s.next:"→"}})))},L=function(e){var t=(0,n.useState)(null),o=t[0],i=t[1],l=(0,n.useState)(!1),s=l[0],u=l[1],p=function(n){var t=e.imageSrcProperty;return c(n,t)},_=function(){if(e.onGallerySwipe){var n=e.activeKey,t=e.photos[n];t&&e.onGallerySwipe(t)}},d=function(n){39===n.keyCode?e.activeKey<e.photos.length-1&&e.setActiveKey(e.activeKey+1):37===n.keyCode&&e.activeKey>0&&e.setActiveKey(e.activeKey-1),_()},h=function(){return!1};return(0,n.useEffect)((function(){return e.activeKey>-1&&!1===s&&u(!0),document.addEventListener("keydown",d),function(){document.removeEventListener("keydown",d)}}),[e.activeKey]),r().createElement("div",{className:"custom__gallery",style:{display:!0===s?"block":"none"},onTouchStart:function(e){var n=e.touches[0].clientX;i(n)},onTouchMove:function(n){if(null!==o){var t=n.touches[0].clientX,r=o-t;r>5&&e.activeKey<e.photos.length-1&&e.setActiveKey(e.activeKey+1),r<-5&&e.activeKey>0&&e.setActiveKey(e.activeKey-1),_(),i(null)}}},r().createElement("div",{className:"clearfix"},r().createElement("button",{className:"close__gallery",onClick:function(){u(!1),e.setActiveKey(-1)},type:"button"},"×")),r().createElement("div",{className:"custom__gallery__container"},e.activeKey>0&&r().createElement("button",{onClick:function(n){n.preventDefault(),e.activeKey>0&&(e.setActiveKey(e.activeKey-1),_())},className:"previous__item",dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.prev:"←"}}),r().createElement("div",{className:"custom__gallery__images"},e.photos.length&&e.photos.map((function(n,t){return r().createElement("div",{key:"".concat(t),className:e.activeKey==t?"custom__gallery__item active":"custom__gallery__item"},r().createElement("img",{src:(o=t,i=e.activeKey,l=[i],i>0&&l.push(i-1),i<e.photos.length-1&&l.push(i+1),l.includes(o)?"".concat(e.imageSrcPrefix).concat(p(n)):""),alt:"gallery item",onContextMenu:h}),!0===a(n)&&r().createElement("div",{className:"custom__gallery__photo__overlay"},null!=n.name&&""!==n.name&&r().createElement("h4",null,n.name),null!=n.description&&""!==n.description&&r().createElement("p",null,n.description)));var o,i,l}))),e.activeKey<e.photos.length-1&&r().createElement("button",{onClick:function(n){n.preventDefault(),e.activeKey<e.photos.length-1&&(e.setActiveKey(e.activeKey+1),_())},className:"next__item",dangerouslySetInnerHTML:{__html:e.buttonArrows?e.buttonArrows.next:"→"}})))},H=function(e){var t=(0,n.useState)(-1),o=t[0],l=t[1],m=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=r-1,p=[];null!=a[c]&&(p=s(a[c]));var h=u(l,o),m=h.column+1,v=l.length;l=_(l,h.column),delete a[r],l.length&&(f(l,m,v),a[r]=l),p=d(p,h,p.length+1),delete a[c],a[c]=p,a=y(a,r),n.updateRows(a),n.increaseChanges()}(n,e)},w=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=r+1,h=u(l,o),m=h.column+1,v=l.length;l=_(l,h.column),delete a[r],l.length&&(l=f(l,m,v));var w=null;null==a[c]?(h.column=1,w=[h]):(w=function(e,n){for(var t=n;t>0;t--){var o=p(e,t);e=_(e,t),e=d(e,o,o.column+1)}return e}(w=s(a[c]),w.length),w=d(w,h,1),delete a[c]),a[c]=w,l.length&&(a[r]=l),a=y(a,r),n.updateRows(a),n.increaseChanges()}(n,e)},b=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=u(l,o);if(1!==c.column){var _=p(l,c.column-1);l=h(l,_,c),delete a[r],a[r]=l,n.updateRows(a),n.increaseChanges()}}(n,e)},x=function(n){!function(e,n){e.preventDefault();var t=g(e),o=t.id,r=t.rowKey,a=i({},n.rows),l=s(a[r]),c=u(l,o);if(c.column!==l.length){var _=p(l,c.column+1);l=h(l,c,_),delete a[r],a[r]=l,n.updateRows(a),n.increaseChanges()}}(n,e)},k=function(n){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),r=o-1,a=i({},n.rows),l=s(a[o]);if(null==a[r])delete a[o],a[r]=l;else{var c=s(a[r]);a=v(a,l,o,c,r)}n.updateRows(a),n.increaseChanges()}(n,e)},E=function(n){!function(e,n){e.preventDefault();var t=e.currentTarget.dataset.row;if(!t)throw new TypeError("row missing from row control");var o=parseInt(t),r=o+1,a=i({},n.rows),l=s(a[o]);if(!a[r])throw new TypeError("There is no next row!");var c=s(a[r]);a=v(a,l,o,c,r),n.updateRows(a),n.increaseChanges()}(n,e)},S=function(n){var t=e.imageSrcProperty;return c(n,t)},C=function(n){var t,o=n.currentTarget.dataset.id;if(!o)throw new TypeError("Photo id missing");if(e.onPhotoClick&&e.onPhotoClick(n),e.useGallery){var r=(t=o,e.photos.findIndex((function(e){return e.id&&e.id==t})));r>-1&&l(r)}},K=function(e){return e.preventDefault(),!1},T=function(e){e.preventDefault();var n=e.currentTarget.previousSibling;n instanceof HTMLImageElement&&n.click()};return 0===Object.keys(e.rows).length?null:r().createElement("div",null,e.useGallery&&"scroll"===e.galleryType?r().createElement(D,{photos:e.photos,activeKey:o,setActiveKey:l,imageSrcPrefix:e.imageSrcPrefix,imageSrcProperty:e.gallerySrcProperty?e.gallerySrcProperty:"image_path",buttonArrows:e.galleryButtonArrows,onGallerySwipe:e.onGallerySwipe}):r().createElement(L,{photos:e.photos,activeKey:o,setActiveKey:l,imageSrcPrefix:e.imageSrcPrefix,imageSrcProperty:e.gallerySrcProperty?e.gallerySrcProperty:"image_path",buttonArrows:e.galleryButtonArrows,onGallerySwipe:e.onGallerySwipe}),r().createElement("div",{className:"photogrid"},Object.entries(e.rows).map((function(t,o){return t[1].length&&r().createElement("div",{key:"row-"+o,className:e.isEditing?"photogrid--photo__row editing":"photogrid--photo__row"},r().createElement(r().Fragment,null,e.isEditing&&r().createElement(j,{rowKey:t[0],moveRowUp:k,moveRowDown:E,rowCount:Object.keys(e.rows).length,buttonArrows:e.buttonArrows}),s(t[1]).map((function(i,l){return r().createElement("div",{key:"photo-"+o+l,className:"photogrid--photo__column"},r().createElement("img",{width:i.width,height:i.height,"data-id":i.id,src:"".concat(e.imageSrcPrefix).concat(S(i)),alt:i.thumbnail_path,onClick:C,className:e.useGallery?"cursor-pointer":"cursor-default",onContextMenu:K}),!e.isEditing&&!0===a(i)&&r().createElement("div",{className:"photogrid--photo_overlay",onClick:T},null!=i.name&&""!==i.name&&r().createElement("h4",null,i.name),null!=i.description&&""!==i.description&&r().createElement("p",null,i.description)),e.isEditing&&r().createElement(r().Fragment,null,r().createElement("div",{className:"photo__details"},r().createElement("p",{className:"photo__position"},"R: ",t[0]," | C: ",i.column),!0===a(i)&&r().createElement("ul",{className:"photo__details__desc"},i.name?r().createElement("li",null,i.name?i.name:"-"):null,i.description?r().createElement("li",null,i.description?i.description:"-"):null)),e.photoMenu?(0,n.cloneElement)(e.photoMenu,{photo:i}):null,r().createElement(z,{rowKey:t[0],photo:i,movePhotoDown:w,movePhotoLeft:b,movePhotoUp:m,movePhotoRight:x,rowCount:Object.keys(e.rows).length,photoCount:t[1].length,buttonArrows:e.buttonArrows})))}))))}))))},G=function(e){return r().createElement("div",{className:e.checked?"photogrid--checkbox active":"photogrid--checkbox",onClick:function(n){n.preventDefault(),e.checked?e.onClick(e.value,!1):e.onClick(e.value,!0)}})};var B;!function(e){e.id="id",e.thumbnail_path="thumbnail_path",e.image_path="image_path"}(B||(B={}))})(),module.exports=o})();
|
package/package.json
CHANGED
package/src/PhotoGrid.tsx
CHANGED
|
@@ -152,8 +152,12 @@ const PhotoGrid = (props: PhotoGridProps) => {
|
|
|
152
152
|
<p className="photo__position">R: {row[0]} | C: {photo.column}</p>
|
|
153
153
|
{photoHasDetails(photo) === true && (
|
|
154
154
|
<ul className="photo__details__desc">
|
|
155
|
-
|
|
156
|
-
|
|
155
|
+
{photo.name ?
|
|
156
|
+
<li>{photo.name ? photo.name : '-'}</li>
|
|
157
|
+
: null}
|
|
158
|
+
{photo.description ?
|
|
159
|
+
<li>{photo.description ? photo.description : '-'}</li>
|
|
160
|
+
: null}
|
|
157
161
|
</ul>
|
|
158
162
|
)}
|
|
159
163
|
</div>
|
package/src/styles.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
position: absolute;
|
|
8
8
|
top: 10px;
|
|
9
9
|
left: 10px;
|
|
10
|
-
z-index:
|
|
10
|
+
z-index: 50;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
13
|
.photogrid--checkbox.active {
|
|
@@ -135,19 +135,18 @@
|
|
|
135
135
|
.photogrid--photo__column > .photo__details > .photo__details__desc {
|
|
136
136
|
list-style-type: none;
|
|
137
137
|
display: block;
|
|
138
|
-
margin: 0;
|
|
138
|
+
margin: 7px 0 0 0;
|
|
139
139
|
padding: 0;
|
|
140
140
|
width: 100%;
|
|
141
|
+
background: rgba(0, 0, 0, 0.6);
|
|
142
|
+
color: white;
|
|
143
|
+
font-size: 13px;
|
|
141
144
|
}
|
|
142
145
|
|
|
143
146
|
.photogrid--photo__column > .photo__details > .photo__details__desc > li {
|
|
144
147
|
display: block;
|
|
145
148
|
}
|
|
146
149
|
|
|
147
|
-
.photogrid--photo__column > .photo__details > .photo__details__desc > li + li {
|
|
148
|
-
margin-top: 7px;
|
|
149
|
-
}
|
|
150
|
-
|
|
151
150
|
.photogrid--photo__column > img {
|
|
152
151
|
display: block;
|
|
153
152
|
max-width: 100%;
|