react-awesome-lightbox - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

build/index.js

@@ -1,1 +0,1 @@
-module.exports=function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports=require("react")},function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return b}));var o=n(0),r=n.n(o);function i(t){return(i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function a(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function u(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=m(t);if(e){var r=m(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return s(this,n)}}function s(t,e){return!e||"object"!==i(e)&&"function"!=typeof e?f(t):e}function f(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function m(t){return(m=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function d(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function p(t){var e=0,n=0;return t.touches&&t.touches.length?(e=t.touches[0].pageX,n=t.touches[0].pageY):(e=t.pageX,n=t.pageY),{x:e,y:n}}function v(t){return t.condition?r.a.createElement(r.a.Fragment,null,t.children):null}var b=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(s,t);var e,n,o,i=u(s);function s(){var t,e,n,o,r;a(this,s);for(var l=arguments.length,c=new Array(l),u=0;u<l;u++)c[u]=arguments[u];return d(f(r=i.call.apply(i,[this].concat(c))),"moving",!1),d(f(r),"initX",0),d(f(r),"initY",0),d(f(r),"lastX",0),d(f(r),"lastY",0),d(f(r),"state",{x:0,y:0,zoom:1,rotate:0,loading:!0,moving:!1,current:null!==(t=null===(e=r.props)||void 0===e?void 0:e.startIndex)&&void 0!==t?t:0,multi:!!(null===(n=r.props)||void 0===n||null===(o=n.images)||void 0===o?void 0:o.length)}),d(f(r),"createTransform",(function(t,e,n,o){return"translate3d(".concat(t,"px,").concat(e,"px,0px) scale(").concat(n,") rotate(").concat(o,"deg)")})),d(f(r),"stopSideEffect",(function(t){return t.stopPropagation()})),d(f(r),"getCurrentImage",(function(t,e){var n,o,r,i,a;return t.multi?null!==(o=null!==(r=null===(i=e.images[t.current])||void 0===i?void 0:i.url)&&void 0!==r?r:null===(a=e.images)||void 0===a?void 0:a[t.current])&&void 0!==o?o:"":null!==(n=e.image)&&void 0!==n?n:""})),d(f(r),"getCurrentTitle",(function(t,e){var n,o,r,i;return t.multi?null!==(o=null===(r=e.images)||void 0===r||null===(i=r[t.current])||void 0===i?void 0:i.title)&&void 0!==o?o:"":null!==(n=e.title)&&void 0!==n?n:""})),d(f(r),"navigateImage",(function(t,e){r.stopSideEffect(e);var n=0;switch(t){case"next":n=r.state.current+1;break;case"prev":n=r.state.current-1}n>=r.props.images.length?n=0:n<0&&(n=r.props.images.length-1),r.setState({current:n,x:0,y:0,zoom:1,rotate:0,loading:!0})})),d(f(r),"startMove",(function(t){if(r.state.zoom<=1)return!1;r.setState({moving:!0});var e=p(t);r.initX=e.x-r.lastX,r.initY=e.y-r.lastY})),d(f(r),"duringMove",(function(t){if(!r.state.moving)return!1;var e=p(t);r.lastX=e.x-r.initX,r.lastY=e.y-r.initY,r.setState({x:e.x-r.initX,y:e.y-r.initY})})),d(f(r),"endMove",(function(t){return r.setState({moving:!1})})),d(f(r),"applyZoom",(function(t){var e=r.props.zoomStep,n=void 0===e?.3:e;switch(t){case"in":r.setState({zoom:r.state.zoom+n});break;case"out":r.state.zoom>1?r.setState({zoom:r.state.zoom-n}):r.setState({x:0,y:0})}})),d(f(r),"applyRotate",(function(t){switch(t){case"cw":r.setState({rotate:r.state.rotate+90});break;case"acw":r.setState({rotate:r.state.rotate-90})}})),d(f(r),"reset",(function(t){r.stopSideEffect(t),r.setState({x:0,y:0,zoom:1,rotate:0})})),d(f(r),"exit",(function(t){if("function"==typeof r.props.onClose)return r.props.onClose(t);console.warn("No Exit function passed on props: onClose")})),d(f(r),"shouldShowReset",(function(){return r.state.x||r.state.y||1!==r.state.zoom||0!==r.state.rotate})),d(f(r),"canvasClick",(function(t){var e=r.props.clickOutsideToExit;if(void 0===e||e)return r.exit(t)})),d(f(r),"keyboardNavigation",(function(t){switch(t.key){case"ArrowLeft":r.navigateImage("prev",t);break;case"ArrowRight":r.navigateImage("next",t)}})),r}return e=s,(n=[{key:"componentDidMount",value:function(){document.body.classList.add("lb-open-lightbox");var t=this.props.keyboardNavigation,e=void 0===t||t;this.state.multi&&e&&document.addEventListener("keyup",this.keyboardNavigation)}},{key:"componentWillUnmount",value:function(){document.body.classList.remove("lb-open-lightbox");var t=this.props.keyboardNavigation,e=void 0===t||t;this.state.multi&&e&&document.removeEventListener("keyup",this.keyboardNavigation)}},{key:"render",value:function(){var t=this,e=this.getCurrentImage(this.state,this.props),n=this.getCurrentTitle(this.state,this.props),o=this.props,i=o.allowZoom,a=void 0===i||i,l=o.allowRotate,c=void 0===l||l,u=o.buttonAlign,s=void 0===u?"flex-end":u,f=o.showTitle,m=void 0===f||f,d=o.allowReset,p=void 0===d||d,b=this.state,g=b.x,y=b.y,h=b.zoom,x=b.rotate;return e?r.a.createElement("div",{className:"lb-container"},r.a.createElement("div",{className:"lb-header",style:{justifyContent:s}},r.a.createElement(v,{condition:m&&n},r.a.createElement("div",{className:"lb-title",style:{display:"center"===s?"none":"flex",order:"flex-start"===s?"1":"unset"}},r.a.createElement("span",{title:n,style:{textAlign:"flex-start"===s?"right":"left"}},n))),p&&this.shouldShowReset()?r.a.createElement("div",{title:"Reset",className:"lb-button lb-icon-reset lb-hide-mobile reload",onClick:this.reset}):null,r.a.createElement(v,{condition:this.state.multi},r.a.createElement("div",{title:"Previous",className:"lb-button lb-icon-arrow prev lb-hide-mobile",onClick:function(e){return t.navigateImage("prev",e)}}),r.a.createElement("div",{title:"Next",className:"lb-button lb-icon-arrow next lb-hide-mobile",onClick:function(e){return t.navigateImage("next",e)}})),r.a.createElement(v,{condition:a},r.a.createElement("div",{title:"Zoom In",className:"lb-button lb-icon-zoomin zoomin",onClick:function(){return t.applyZoom("in")}}),r.a.createElement("div",{title:"Zoom Out",className:"lb-button lb-icon-zoomout zoomout",onClick:function(){return t.applyZoom("out")}})),r.a.createElement(v,{condition:c},r.a.createElement("div",{title:"Rotate left",className:"lb-button lb-icon-rotate rotatel",onClick:function(){return t.applyRotate("acw")}}),r.a.createElement("div",{title:"Rotate right",className:"lb-button lb-icon-rotate rotater",onClick:function(){return t.applyRotate("cw")}})),r.a.createElement("div",{title:"Close",className:"lb-button lb-icon-close close",style:{order:"flex-start"===s?"-1":"unset"},onClick:function(e){return t.exit(e)}})),r.a.createElement("div",{className:"lb-canvas".concat(this.state.loading?" lb-loading":""),onClick:function(e){return t.canvasClick(e)}},r.a.createElement("img",{draggable:"false",style:{transform:this.createTransform(g,y,h,x),cursor:this.state.zoom>1?"grab":"unset",transition:this.state.moving?"none":"all 0.1s"},onMouseDown:function(e){return t.startMove(e)},onTouchStart:function(e){return t.startMove(e)},onMouseMove:function(e){return t.duringMove(e)},onTouchMove:function(e){return t.duringMove(e)},onMouseUp:function(e){return t.endMove(e)},onMouseLeave:function(e){return t.endMove(e)},onTouchEnd:function(e){return t.endMove(e)},onClick:function(e){return t.stopSideEffect(e)},onLoad:function(e){return t.setState({loading:!1})},className:"lb-img".concat(this.state.loading?" lb-loading":""),title:n,src:e,alt:n}),r.a.createElement(v,{condition:this.state.multi},r.a.createElement("div",{className:"mobile-controls lb-show-mobile"},r.a.createElement("div",{title:"Previous",className:"lb-button lb-icon-arrow prev",onClick:function(e){return t.navigateImage("prev",e)}}),p&&this.shouldShowReset()?r.a.createElement("div",{title:"Reset",className:"lb-button lb-icon-reset reload",onClick:this.reset}):null,r.a.createElement("div",{title:"Next",className:"lb-button lb-icon-arrow next",onClick:function(e){return t.navigateImage("next",e)}}))))):(console.warn("Not showing lightbox because no image(s) was supplied"),null)}}])&&l(e.prototype,n),o&&l(e,o),s}(r.a.Component)}]);
+module.exports=function(t){var e={};function n(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return t[o].call(r.exports,r,r.exports,n),r.l=!0,r.exports}return n.m=t,n.c=e,n.d=function(t,e,o){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:o})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var r in t)n.d(o,r,function(e){return t[e]}.bind(null,r));return o},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=1)}([function(t,e){t.exports=require("react")},function(t,e,n){"use strict";n.r(e),n.d(e,"default",(function(){return b}));var o=n(0),r=n.n(o);function a(t){return(a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(t)}function i(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")}function l(t,e){for(var n=0;n<e.length;n++){var o=e[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function c(t,e){return(c=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function s(t){var e=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],(function(){}))),!0}catch(t){return!1}}();return function(){var n,o=m(t);if(e){var r=m(this).constructor;n=Reflect.construct(o,arguments,r)}else n=o.apply(this,arguments);return u(this,n)}}function u(t,e){return!e||"object"!==a(e)&&"function"!=typeof e?f(t):e}function f(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}function m(t){return(m=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function d(t,e,n){return e in t?Object.defineProperty(t,e,{value:n,enumerable:!0,configurable:!0,writable:!0}):t[e]=n,t}function p(t){var e=0,n=0;return t.touches&&t.touches.length?(e=t.touches[0].pageX,n=t.touches[0].pageY):(e=t.pageX,n=t.pageY),{x:e,y:n}}function v(t){return t.condition?r.a.createElement(r.a.Fragment,null,t.children):null}var b=function(t){!function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&c(t,e)}(u,t);var e,n,o,a=s(u);function u(){var t,e,n,o,r;i(this,u);for(var l=arguments.length,c=new Array(l),s=0;s<l;s++)c[s]=arguments[s];return d(f(r=a.call.apply(a,[this].concat(c))),"initX",0),d(f(r),"initY",0),d(f(r),"lastX",0),d(f(r),"lastY",0),d(f(r),"state",{x:0,y:0,zoom:1,rotate:0,loading:!0,moving:!1,current:null!==(t=null===(e=r.props)||void 0===e?void 0:e.startIndex)&&void 0!==t?t:0,multi:!!(null===(n=r.props)||void 0===n||null===(o=n.images)||void 0===o?void 0:o.length)}),d(f(r),"createTransform",(function(t,e,n,o){return"translate3d(".concat(t,"px,").concat(e,"px,0px) scale(").concat(n,") rotate(").concat(o,"deg)")})),d(f(r),"stopSideEffect",(function(t){return t.stopPropagation()})),d(f(r),"getCurrentImage",(function(t,e){var n,o,r,a,i;return t.multi?null!==(o=null!==(r=null===(a=e.images[t.current])||void 0===a?void 0:a.url)&&void 0!==r?r:null===(i=e.images)||void 0===i?void 0:i[t.current])&&void 0!==o?o:"":null!==(n=e.image)&&void 0!==n?n:""})),d(f(r),"getCurrentTitle",(function(t,e){var n,o,r,a;return t.multi?null!==(o=null===(r=e.images)||void 0===r||null===(a=r[t.current])||void 0===a?void 0:a.title)&&void 0!==o?o:"":null!==(n=e.title)&&void 0!==n?n:""})),d(f(r),"navigateImage",(function(t,e){r.stopSideEffect(e);var n=0;switch(t){case"next":n=r.state.current+1;break;case"prev":n=r.state.current-1}n>=r.props.images.length?n=0:n<0&&(n=r.props.images.length-1),r.setState({current:n,x:0,y:0,zoom:1,rotate:0,loading:!0})})),d(f(r),"startMove",(function(t){if(r.state.zoom<=1)return!1;r.setState({moving:!0});var e=p(t);r.initX=e.x-r.lastX,r.initY=e.y-r.lastY})),d(f(r),"duringMove",(function(t){if(!r.state.moving)return!1;var e=p(t);r.lastX=e.x-r.initX,r.lastY=e.y-r.initY,r.setState({x:e.x-r.initX,y:e.y-r.initY})})),d(f(r),"endMove",(function(t){return r.setState({moving:!1})})),d(f(r),"applyZoom",(function(t){var e=r.props.zoomStep,n=void 0===e?.3:e;switch(t){case"in":r.setState({zoom:r.state.zoom+n});break;case"out":var o=r.state.zoom-n;if(o<1)break;1===o?r.setState({x:0,y:0,zoom:1}):r.setState({zoom:o});break;case"reset":r.setState({x:0,y:0,zoom:1})}})),d(f(r),"applyRotate",(function(t){switch(t){case"cw":r.setState({rotate:r.state.rotate+90});break;case"acw":r.setState({rotate:r.state.rotate-90})}})),d(f(r),"reset",(function(t){r.stopSideEffect(t),r.setState({x:0,y:0,zoom:1,rotate:0})})),d(f(r),"exit",(function(t){if("function"==typeof r.props.onClose)return r.props.onClose(t);console.warn("No Exit function passed on props: onClose")})),d(f(r),"shouldShowReset",(function(){return r.state.x||r.state.y||1!==r.state.zoom||0!==r.state.rotate})),d(f(r),"canvasClick",(function(t){var e=r.props.clickOutsideToExit;if(void 0===e||e)return r.exit(t)})),d(f(r),"keyboardNavigation",(function(t){var e=r.props.allowZoom,n=void 0===e||e,o=r.state,a=o.multi,i=o.x,l=o.y,c=o.zoom;switch(t.key){case"ArrowLeft":a&&1===c?r.navigateImage("prev",t):c>1&&r.setState({x:i-20});break;case"ArrowRight":a&&1===c?r.navigateImage("next",t):c>1&&r.setState({x:i+20});break;case"ArrowUp":c>1&&r.setState({y:l+20});break;case"ArrowDown":c>1&&r.setState({y:l-20});break;case"+":n&&r.applyZoom("in");break;case"-":n&&r.applyZoom("out")}})),r}return e=u,(n=[{key:"componentDidMount",value:function(){document.body.classList.add("lb-open-lightbox");var t=this.props.keyboardInteraction;(void 0===t||t)&&document.addEventListener("keyup",this.keyboardNavigation)}},{key:"componentWillUnmount",value:function(){document.body.classList.remove("lb-open-lightbox");var t=this.props.keyboardInteraction;(void 0===t||t)&&document.removeEventListener("keyup",this.keyboardNavigation)}},{key:"render",value:function(){var t=this,e=this.getCurrentImage(this.state,this.props),n=this.getCurrentTitle(this.state,this.props),o=this.props,a=o.allowZoom,i=void 0===a||a,l=o.allowRotate,c=void 0===l||l,s=o.buttonAlign,u=void 0===s?"flex-end":s,f=o.showTitle,m=void 0===f||f,d=o.allowReset,p=void 0===d||d,b=this.state,y=b.x,g=b.y,h=b.zoom,x=b.rotate;return e?r.a.createElement("div",{className:"lb-container"},r.a.createElement("div",{className:"lb-header",style:{justifyContent:u}},r.a.createElement(v,{condition:m&&n},r.a.createElement("div",{className:"lb-title",style:{display:"center"===u?"none":"flex",order:"flex-start"===u?"1":"unset"}},r.a.createElement("span",{title:n,style:{textAlign:"flex-start"===u?"right":"left"}},n))),p&&this.shouldShowReset()?r.a.createElement("div",{title:"Reset",className:"lb-button lb-icon-reset lb-hide-mobile reload",onClick:this.reset}):null,r.a.createElement(v,{condition:this.state.multi},r.a.createElement("div",{title:"Previous",className:"lb-button lb-icon-arrow prev lb-hide-mobile",onClick:function(e){return t.navigateImage("prev",e)}}),r.a.createElement("div",{title:"Next",className:"lb-button lb-icon-arrow next lb-hide-mobile",onClick:function(e){return t.navigateImage("next",e)}})),r.a.createElement(v,{condition:i},r.a.createElement("div",{title:"Zoom In",className:"lb-button lb-icon-zoomin zoomin",onClick:function(){return t.applyZoom("in")}}),r.a.createElement("div",{title:"Zoom Out",className:"lb-button lb-icon-zoomout zoomout ".concat(this.state.zoom<=1?"disabled":""),onClick:function(){return t.applyZoom("out")}})),r.a.createElement(v,{condition:c},r.a.createElement("div",{title:"Rotate left",className:"lb-button lb-icon-rotate rotatel",onClick:function(){return t.applyRotate("acw")}}),r.a.createElement("div",{title:"Rotate right",className:"lb-button lb-icon-rotate rotater",onClick:function(){return t.applyRotate("cw")}})),r.a.createElement("div",{title:"Close",className:"lb-button lb-icon-close close",style:{order:"flex-start"===u?"-1":"unset"},onClick:function(e){return t.exit(e)}})),r.a.createElement("div",{className:"lb-canvas".concat(this.state.loading?" lb-loading":""),onClick:function(e){return t.canvasClick(e)}},r.a.createElement("img",{draggable:"false",style:{transform:this.createTransform(y,g,h,x),cursor:this.state.zoom>1?"grab":"unset",transition:this.state.moving?"none":"all 0.1s"},onMouseDown:function(e){return t.startMove(e)},onTouchStart:function(e){return t.startMove(e)},onMouseMove:function(e){return t.duringMove(e)},onTouchMove:function(e){return t.duringMove(e)},onMouseUp:function(e){return t.endMove(e)},onMouseLeave:function(e){return t.endMove(e)},onTouchEnd:function(e){return t.endMove(e)},onClick:function(e){return t.stopSideEffect(e)},onLoad:function(e){return t.setState({loading:!1})},className:"lb-img".concat(this.state.loading?" lb-loading":""),title:n,src:e,alt:n}),r.a.createElement(v,{condition:this.state.multi},r.a.createElement("div",{className:"mobile-controls lb-show-mobile"},r.a.createElement("div",{title:"Previous",className:"lb-button lb-icon-arrow prev",onClick:function(e){return t.navigateImage("prev",e)}}),p&&this.shouldShowReset()?r.a.createElement("div",{title:"Reset",className:"lb-button lb-icon-reset reload",onClick:this.reset}):null,r.a.createElement("div",{title:"Next",className:"lb-button lb-icon-arrow next",onClick:function(e){return t.navigateImage("next",e)}}))))):(console.warn("Not showing lightbox because no image(s) was supplied"),null)}}])&&l(e.prototype,n),o&&l(e,o),u}(r.a.Component)}]);

package.json

 {
     "name": "react-awesome-lightbox",
-    "version": "1.4.0",
+    "version": "1.5.0",
     "description": "lightbox like image viewer for react with zoom, rotate. Single or multi image mode and touch support",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -11,9 +11,9 @@ # Lightbox-like Image viewer for React
 * Fully Responsive
-* Smooth transitions
+* Smooth tranformation
 * Single Image Mode
 * Multiple Image Mode
-* Zoom and move Support
+* Virtually unlimited zoom steps and move Support
 * Full 360 degree rotate support
 * Touch Support
-* Keyboard Navigation
+* Full keyboard support
 * Supports all major browsers
@@ -40,3 +40,3 @@
 ```
- #### or for multiple images: 
+#### or for multiple images: 
 
@@ -72,3 +72,11 @@ ```jsx
 |showTitle|true|Determines if title should be shown if available|
-|keyboardNavigation|true|Determine if images can be navigated <br> with left and right <br> keyboard keys|
+|keyboardInteraction|true|Determine if keyboard shortcuts will be allowed <br> with left and right <br> keyboard keys|
+
+
+### Keyboard Shortcut:
+
+* Arrow keys <kbd>←</kbd> , <kbd>→</kbd>, when zoomed out, will navigate between images in multi image mode.
+* When Zoomed in, <kbd>←</kbd>, <kbd>→</kbd>, <kbd>↑</kbd>, <kbd>↓</kbd> keys will move the image
+* <kbd>+</kbd> and <kbd>-</kbd> will zoom in and out the image is zoom is allowed.
+
 ### Styling
@@ -75,0 +83,0 @@ All the styles are in the `build/style.css` file. If you want to modify the CSS, download this file and customize it. then include the custom CSS file instead of the file from the package.

src/index.js

@@ -24,3 +24,2 @@ import React from "react";
 export default class Lightbox extends React.Component {
-    moving = false;
     initX  = 0;
@@ -90,5 +89,10 @@ initY  = 0;
             case "out":
-                if(this.state.zoom > 1) this.setState({zoom: this.state.zoom - zoomStep});
-                else this.setState({x:0,y:0});
+                let newZoom = this.state.zoom - zoomStep;
+                if(newZoom < 1) break;
+                else if(newZoom === 1) this.setState({x:0, y:0, zoom: 1});
+                else this.setState({zoom: newZoom});
                 break;
+            case "reset":
+                this.setState({x:0, y:0, zoom: 1});
+                break;
         }
@@ -120,9 +124,25 @@ }
     keyboardNavigation = e => {
+        let {allowZoom = true}  = this.props; 
+        let {multi, x, y, zoom} = this.state;
         switch(e.key){
             case "ArrowLeft":
-                this.navigateImage("prev", e);
+                if(multi && zoom === 1) this.navigateImage("prev", e);
+                else if(zoom > 1) this.setState({x: x - 20});
                 break;
             case "ArrowRight":
-                this.navigateImage("next", e);
+                if(multi && zoom === 1) this.navigateImage("next", e);
+                else if(zoom > 1) this.setState({x: x + 20});
                 break;
+            case "ArrowUp":
+                if(zoom > 1) this.setState({y: y + 20});
+                break;
+            case "ArrowDown":
+                if(zoom > 1) this.setState({y: y - 20});
+                break;
+            case "+":
+                if(allowZoom) this.applyZoom("in");
+                break;
+            case "-":
+                if(allowZoom) this.applyZoom("out");
+                break;
         }
@@ -132,9 +152,9 @@ }
         document.body.classList.add("lb-open-lightbox");
-        let {keyboardNavigation = true} = this.props;
-        this.state.multi && keyboardNavigation && document.addEventListener("keyup", this.keyboardNavigation);
+        let {keyboardInteraction = true} = this.props;
+        if(keyboardInteraction) document.addEventListener("keyup", this.keyboardNavigation);
     }
     componentWillUnmount(){
         document.body.classList.remove("lb-open-lightbox");
-        let {keyboardNavigation = true} = this.props;
-        this.state.multi && keyboardNavigation && document.removeEventListener("keyup", this.keyboardNavigation);
+        let {keyboardInteraction = true} = this.props;
+        if(keyboardInteraction) document.removeEventListener("keyup", this.keyboardNavigation);
     }
@@ -175,3 +195,5 @@ render(){
                         <div title="Zoom In" className="lb-button lb-icon-zoomin zoomin" onClick={()=>this.applyZoom("in")}></div>
-                        <div title="Zoom Out" className="lb-button lb-icon-zoomout zoomout" onClick={()=>this.applyZoom("out")}></div>
+                        <div title="Zoom Out" 
+                        className={`lb-button lb-icon-zoomout zoomout ${this.state.zoom<=1?"disabled":""}`}
+                        onClick={()=>this.applyZoom("out")}></div>
                     </Cond>
@@ -178,0 +200,0 @@ <Cond condition = {allowRotate}>

No alert changes

Improved metrics

Total package byte prevSize

48643

increased by3.66%

Lines of code

483

increased by5.92%

Number of lines in readme file

87

increased by10.13%

No dependency changes