Merge pull request #32 from tomik23:onResize

OnResize new callback function

.eslintrc.js

@@ -7,18 +7,9 @@ module.exports = {
   extends: ['eslint:recommended', 'prettier'],
   plugins: ['prettier'],
   rules: {
-    'prettier/prettier': [
-      'warn',
-      {
-        semi: true,
-        singleQuote: true,
-        tabWidth: 2,
-        endOfLine: 'auto',
-        printWidth: 80,
-      },
-    ],
+    'prettier/prettier': 'error',
     'comma-dangle': ['error', 'only-multiline'],
     'linebreak-style': ['error', 'windows'],
     'no-param-reassign': [2, { props: false }],
-  }
+  },
 };

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "endOfLine": "auto",
+  "printWidth": 80
+}

CHANGELOG.md

@@ -1,51 +1,79 @@
+## v1.0.13 (2021-06-17)
+
+### Added
+
+- callback function `onResize`
+
+### Changed
+
+- callback function, name change from `onCleared` to `onClose` and `onLoaded` to `onOpen`
+
 ## v1.0.12 (2021-06-13)
+
 ### Changed
+
 - fix: scrollTop not always work [#28](https://github.com/tomik23/zooom.js/issues/28)
 
 ## v1.0.11 (2021-04-16)
+
 ### Added
+
 - New example - leading color
 
 ## v1.0.10 (2021-03-30)
+
 ### Added
+
 - Create a separate photo with styles for each click, fixed problem when photo is in overflow element
 
 ### Changed
+
 - fix: Fixed problem when photo is in overflow element
 - Removal of style from main photo
 - Replaced node-sass to sass
 - The browserslist extension
 - Remove interface ImageParameters
 
 ## v1.0.9 (2020-11-20)
+
 ### Added
+
 - UMD file
 - Renaming a variable
 - Banner from rollup.js
 
 ### Changed
+
 - Removed banner plugin
 
 ## v1.0.8 (2020-09-09)
+
 ### Added
+
 - New photos for example
 - Adding vertical photos
 - Example figure with picture
 
 ### Changed
+
 - Removed padding
 - Converted to typescript
 
 ## v1.0.7 (2020-09-07)
+
 ### Changed
+
 - Lightbox animation not always appearing [#15](https://github.com/tomik23/zooom.js/issues/15)
 
 ## v1.0.6 (2020-09-06)
+
 ### Added
+
 - Debounce to resize window
 - Two helpers functions `onLoaded`, `onCleared`
 - Changelog.md
 
 ### Changed
+
 - Change fade(in/out) from js to css
-- Separate style
+- Separate style

README.md

@@ -17,25 +17,31 @@
 See the demo - [example](https://tomik23.github.io/zooom.js/)
 
 ## How to add to page
+
 1. Just download the library from the `docs/zoom.min.js` and add it to head.
+
 ```html
 <script src="./zooom.min.js"></script>
 ```
+
 2. For each photo you want to grow, add a class in our example it's `img-zoom`
+
 ```html
-<img class="img-zoom" src="./images/image.jpg">
+<img class="img-zoom" src="./images/image.jpg" />
 ```
+
 3. Now all you have to do is call our library, this is the simplest example. Below you will find a description of how to configure the library more.
+
 ```html
 <script>
-  window.addEventListener('DOMContentLoaded', function() {
+  window.addEventListener('DOMContentLoaded', function () {
     new Zooom('img-zoom');
   });
 </script>
 ```
 
-
 ## Clone the repo and install dependencies
+
 ```bash
 git clone https://github.com/tomik23/zooom.js.git
 cd zooom
@@ -45,6 +51,7 @@ npm i
 ```
 
 ## Watch/Build the app
+
 Watch the app, just call:
 
 ```bash
@@ -63,95 +70,123 @@ npm run prod
 
 ## Configuration of the plugin
 
-props | type | default | require | description
----- | :-------: | :-------: | :--------: | -----------
-zIndex | Number | `1` |  | Option to control layer positions
-animationTime | Number | `300` | | Animation speed in milliseconds
-in / out | String | `zoom-in / zoom-out` |  | The cursor property specifies the mouse cursor to be displayed when pointing over an element
-color | String | `#fff` |  | Overlay layer color, hex only
-opacity | Number | `100` |  | Overlay layer opacity, number must be an integer, maximum number 100
-onLoaded | Function |  |  | A helper function with which we can, for example, add text from the caption to the photo to show when zooming in on the photo. In the function we have access to the image element
-onCleared | Function |  |  | A function that runs when the photo is closed. It can be combined with the function `onLoaded` see example. As in the previous `onLoaded` function, here we have access to the image element
+| props         |   type   |       default        | require | description                                                                                                                                                                              |
+| ------------- | :------: | :------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| zIndex        |  Number  |         `1`          |         | Option to control layer positions                                                                                                                                                        |
+| animationTime |  Number  |        `300`         |         | Animation speed in milliseconds                                                                                                                                                          |
+| in / out      |  String  | `zoom-in / zoom-out` |         | The cursor property specifies the mouse cursor to be displayed when pointing over an element                                                                                             |
+| color         |  String  |        `#fff`        |         | Overlay layer color, hex only                                                                                                                                                            |
+| opacity       |  Number  |        `100`         |         | Overlay layer opacity, number must be an integer, maximum number 100                                                                                                                     |
+| onResize      | Function |                      |         | A function that can be used to block clicking on an image. See example below - How to prevent zoom-in/out images                                                                         |
+| onOpen        | Function |                      |         | A helper function with which we can, for example, add text from the caption to the photo to show when zooming in on the photo. In the function we have access to the image element       |
+| onClose       | Function |                      |         | A function that runs when the photo is closed. It can be combined with the function `onOpen` see example. As in the previous `onOpen` function, here we have access to the image element |
+
+## Minimal configuration
+
+```javascript
+new Zooom('img-zoom');
+```
 
 ## Sample configuration
+
 ```javascript
 new Zooom('img-zoom', {
   zIndex: 9,
-  
+
   // animation time in number
   animationTime: 300,
-  
+
   // cursor type
   cursor: {
     in: 'zoom-in',
-    out: 'zoom-out'
+    out: 'zoom-out',
   },
 
   overlay: {
-
     // hex or color-name
     color: '#fff',
-  
+
     // [10, 20, 34, ..., 100] maximum number 100
     opacity: 80,
   },
 
   // callback function
   // see usage example docs/index.html
-  onLoaded: function(element) {},
-  onCleared: function(element) {}
+  onResize: function () {},
+  onOpen: function (element) {},
+  onClose: function (element) {},
 });
 ```
 
-## Minimal configuration
-```javascript
-new Zooom('img-zoom');
-```
-
 ## How to use Zooom with Bootstrap Carousel
+
 See an [example](https://codepen.io/Tomik23/full/VwPmLqX)
+
 ```javascript
 new Zooom('img-zoom', {
   zIndex: 9,
-  
+
   // animation time in number
   animationTime: 300,
-  
+
   // cursor type
   cursor: {
     in: 'zoom-in',
-    out: 'zoom-out'
+    out: 'zoom-out',
   },
   overlay: {
-
     // hex or color-name
     color: '#fff',
-    
+
     // [10, 20, 34, ..., 100] maximum number 100
     opacity: 80,
   },
 
   // callback function
   // see usage example docs/index.html
-  onLoaded: function(element) {
-
+  onOpen: function (element) {
     // we stop automatic scrolling when we do zoom images
     $('.carousel').carousel('pause');
   },
-
-  onCleared: function(element) {
-
+
+  onClose: function (element) {
     // we restart the carousels after closing the photo
     $('.carousel').carousel('cycle');
-  }
+  },
+});
+```
+
+## How to prevent zoom-in/out images
+
+Below is an example showing how to block a click when the browser width is less than 600px
+Of course, here is an example with the width of the window, but nothing prevents you from using it in a different way. The most important thing is to return the logical value - `true/false`. Each `reduction/reduction` of the window reads this variable and blocks the click.
+
+```javascript
+new Zooom('img-zoom', {
+  onResize: function () {
+    // we set the page width from which it will
+    // be possible to click on the image
+    let responsiveMin = 600;
+
+    // we check the width of the browser window
+    const windowWidth =
+      window.innerWidth ||
+      document.documentElement.clientWidth ||
+      document.body.clientWidth;
+
+    // we return the boolean value 'true/false'
+    // the value 'true' blocks clicking the image
+    return windowWidth < responsiveMin ? true : false;
+  },
 });
 ```
 
 ## Browsers support
 
 | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/vivaldi/vivaldi_48x48.png" alt="Vivaldi" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br/>Vivaldi |
-| --------- | --------- | --------- | --------- | --------- |
-| IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions| last 2 versions
+| --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| IE11, Edge                                                                                                                                                                                                      | last 2 versions                                                                                                                                                                                                   | last 2 versions                                                                                                                                                                                               | last 2 versions                                                                                                                                                                                           | last 2 versions                                                                                                                                                                                                   |
 
 ## License
-This project is available under the [MIT](https://opensource.org/licenses/mit-license.php) license.
+
+This project is available under the [MIT](https://opensource.org/licenses/mit-license.php) license.

docs/index.html

@@ -150,18 +150,33 @@ <h2>The leading color from the photo</h2>
       window.addEventListener('DOMContentLoaded', function () {
         new Zooom('img-zoom', {
           zIndex: 9,
-          animationTime: 300, // animation time in number
+
+          // animation time in number
+          animationTime: 300,
+
           cursor: {
             in: 'zoom-in',
             out: 'zoom-out'
           },
+
           overlay: {
             // hex or color-name
             color: '#fff',
             // [10, 20, 34, ..., 100] maximum number 100
             opacity: 80,
           },
-          onLoaded: function (element) {
+
+          onResize: function () {
+            let responsiveMin = 600;
+            const windowWidth =
+              window.innerWidth ||
+              document.documentElement.clientWidth ||
+              document.body.clientWidth;
+
+            return windowWidth < responsiveMin ? true : false;
+          },
+
+          onOpening: function (element) {
             const nextSibling = element.nextElementSibling ? element.nextElementSibling : element.parentNode.nextElementSibling;
             if (nextSibling && nextSibling.classList.contains('description')) {
               const textContent = nextSibling.innerHTML;
@@ -181,7 +196,8 @@ <h2>The leading color from the photo</h2>
               }
             }
           },
-          onCleared: function (element) {
+
+          onClosed: function (element) {
             const descriptionText = document.getElementById('description');
             if (descriptionText) {
               descriptionText.classList.remove('animation-on');