react-editable-photo-grid 3.0.4 → 3.0.5

package/dist/index.js

@@ -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,\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:()=>G,PhotoGrid:()=>H,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=function(n){return n.preventDefault(),!1},w=t(72),b=t.n(w),x=t(825),k=t.n(x),E=t(659),S=t.n(E),A=t(56),C=t.n(A),K=t(540),T=t.n(K),N=t(113),P=t.n(N),M=t(365),I={};I.styleTagTransform=P(),I.setAttributes=C(),I.insert=S().bind(null,"head"),I.domAPI=k(),I.insertStyleElement=T(),b()(M.A,I),M.A&&M.A.locals&&M.A.locals;const j=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:"&#8593"}})),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:"&#8595"}})))},z=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:"&#8592"}})),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:"&#8593"}})),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:"&#8595"}})):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:"&#8594"}})))};var O=t(181),R=t.n(O);const L=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)(R()((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=(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(y,{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)}))}}),[y]),(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:"&#8592"}})),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:v}),!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:"&#8594"}})))},D=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()};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:"&#8592"}}),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:v}),!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:"&#8594"}})))},H=function(t){var o=(0,n.useState)(-1),a=o[0],h=o[1],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]),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)},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]),_=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)},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(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)},k=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)},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(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)},S=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)},A=function(n){var e=t.imageSrcProperty;return l(n,e)},C=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(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(D,{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(j,{rowKey:o[0],moveRowUp:E,moveRowDown:S,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(A(a)),alt:a.thumbnail_path,onClick:C,className:t.useGallery?"cursor-pointer":"cursor-default",onContextMenu:v}),!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(z,{rowKey:o[0],photo:a,movePhotoDown:b,movePhotoLeft:x,movePhotoUp:w,movePhotoRight:k,rowCount:Object.keys(t.rows).length,photoCount:o[1].length,buttonArrows:t.buttonArrows})):t.photoActions?(0,n.cloneElement)(t.photoActions,{photo:a}):null)}))))}))))},G=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})();
+(()=>{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:()=>G,PhotoGrid:()=>H,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=function(n){return n.preventDefault(),!1},w=t(72),b=t.n(w),x=t(825),k=t.n(x),E=t(659),S=t.n(E),A=t(56),C=t.n(A),K=t(540),T=t.n(K),N=t(113),P=t.n(N),M=t(365),I={};I.styleTagTransform=P(),I.setAttributes=C(),I.insert=S().bind(null,"head"),I.domAPI=k(),I.insertStyleElement=T(),b()(M.A,I),M.A&&M.A.locals&&M.A.locals;const j=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:"&#8593"}})),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:"&#8595"}})))},z=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:"&#8592"}})),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:"&#8593"}})),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:"&#8595"}})):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:"&#8594"}})))};var O=t(181),R=t.n(O);const L=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)(R()((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=(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(y,{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)}))}}),[y]),(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:"&#8592"}})),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:n.alt_text||"gallery item",onContextMenu:v}),!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:"&#8594"}})))},D=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()};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:"&#8592"}}),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:n.alt_text||"gallery item",onContextMenu:v}),!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:"&#8594"}})))},H=function(t){var o=(0,n.useState)(-1),a=o[0],h=o[1],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]),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)},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]),_=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)},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(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)},k=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)},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(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)},S=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)},A=function(n){var e=t.imageSrcProperty;return l(n,e)},C=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(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(D,{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(j,{rowKey:o[0],moveRowUp:E,moveRowDown:S,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(A(a)),alt:a.alt_text||a.thumbnail_path,onClick:C,className:t.useGallery?"cursor-pointer":"cursor-default",onContextMenu:v}),!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(z,{rowKey:o[0],photo:a,movePhotoDown:b,movePhotoLeft:x,movePhotoUp:w,movePhotoRight:k,rowCount:Object.keys(t.rows).length,photoCount:o[1].length,buttonArrows:t.buttonArrows})):t.photoActions?(0,n.cloneElement)(t.photoActions,{photo:a}):null)}))))}))))},G=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

@@ -1,6 +1,6 @@
 {
   "name": "react-editable-photo-grid",
-  "version": "3.0.4",
+  "version": "3.0.5",
   "description": "An editable photo grid built with React and Typescript",
   "main": "dist/index.js",
   "files": [

package/src/PhotoGrid.tsx

@@ -115,7 +115,7 @@ const PhotoGrid = (props: PhotoGridProps) => {
                     height={photo.height}
                     data-id={photo.id}
                     src={`${props.imageSrcPrefix}${getSrcProperty(photo)}`}
-                    alt={photo.thumbnail_path}
+                    alt={photo.alt_text || photo.thumbnail_path}
                     onClick={onPhotoClick}
                     className={props.useGallery ? "cursor-pointer" : 'cursor-default'}
                     onContextMenu={disableRightClick}

package/src/components/NonScrollGallery.tsx

@@ -153,7 +153,7 @@ const NonScrollGallery = (props: GalleryProps) => {
               <div key={`${i}`} className={props.activeKey == i ? "custom__gallery__item active" : "custom__gallery__item"}>
                 <img
                   src={shouldRenderImage(i) ? `${props.imageSrcPrefix}${getSrcProperty(photo)}` : ''}
-                  alt="gallery item"
+                  alt={photo.alt_text || 'gallery item'}
                   onContextMenu={disableRightClick}
                 />
                 {photoHasDetails(photo) === true && (

package/src/components/ScrollGallery.tsx

@@ -176,7 +176,7 @@ const ScrollGallery: React.FC<Props> = ({ photos, imageSrcPrefix, imageSrcProper
                 ref={el => imgRefs.current[i] = el}
                 data-index={i}
                 data-src={`${imageSrcPrefix}${getImageSrcProperty(photo, imageSrcProperty)}`}
-                alt="gallery item"
+                alt={photo.alt_text || 'gallery item'}
                 onContextMenu={disableRightClick}
               />
               {photoHasDetails(photo) === true && (

package/src/types.ts

@@ -27,6 +27,7 @@ export interface PhotoItem {
   height: number;
   name?: string;
   description?: string;
+  alt_text?: string;
 }
 
 export enum imgSrcProperty {
@@ -39,6 +40,14 @@ export type PhotoRows = {
   [key: number]: PhotoItem[];
 }
 
+export type GalleryProps = {
+  enable: boolean;
+  version: string;
+  srcAttribute: string;
+  arrowIcons: ButtonArrows
+}
+
+
 export type PhotoGridProps = {
   photos: PhotoItem[];
   rows: PhotoRows;
@@ -48,7 +57,7 @@ export type PhotoGridProps = {
   imageSrcPrefix: string;
   imageSrcProperty: imgSrcProperty;
   photoMenu: ReactElement | undefined;
-  photoActions: ReactElement| undefined;
+  photoActions: ReactElement | undefined;
   galleryType: string;
   useGallery?: boolean;
   gallerySrcProperty?: imgSrcProperty;