react-editable-photo-grid 3.0.0 → 3.0.3

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