masonry-simple 3.0.0 → 3.0.1

package/.swcrc

@@ -0,0 +1,9 @@
+{
+  "minify": true,
+  "jsc": {
+    "minify": {
+      "compress": true,
+      "mangle": true
+    }
+  }
+}

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2023 ux-ui.pro
+Copyright (c) 2024 ux-ui.pro
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -1,22 +1,36 @@
-<div align="center">
 <br>
+<div align="center">
 
-<h1>masonry-simple</h1>
+# masonry-simple
+The MasonrySimple class is designed to create a masonry layout of elements on a page. Vue friendly.
 
 [![npm](https://img.shields.io/npm/v/masonry-simple.svg?colorB=brightgreen)](https://www.npmjs.com/package/masonry-simple)
 [![GitHub package version](https://img.shields.io/github/package-json/v/ux-ui-pro/masonry-simple.svg)](https://github.com/ux-ui-pro/masonry-simple)
 [![NPM Downloads](https://img.shields.io/npm/dm/masonry-simple.svg?style=flat)](https://www.npmjs.org/package/masonry-simple)
 
 <sup>600B gzipped</sup>
-<p align="center"><a href="https://l6nln6.csb.app/">codesandbox</a> / <a href="https://codepen.io/ux-ui/pen/poxGEqX">codepen</a></p>
+
+<a href="https://l6nln6.csb.app/">codesandbox</a> / <a href="https://codepen.io/ux-ui/pen/poxGEqX">codepen</a>
+
+<br>
+
+![kitten.gif](kitten.gif)
+
+Thank you for your interest in masonry-simple! I'm glad to see it's being used.<br>If you'd like to support it, it would be great if you could leave a [star on GitHub](https://github.com/ux-ui-pro/masonry-simple).
 
 </div>
+
 <br>
 
 ### Installation
-```
+<sub>**Recommended**</sub>
+```console
 $ yarn add masonry-simple
 ```
+<sub>**Not recommended**<br>Import the [masonry-simple.min.js](https://github.com/ux-ui-pro/masonry-simple/blob/master/dist/masonry-simple.min.js) file using the `<script>` tag. You can [download it here](https://github.com/ux-ui-pro/masonry-simple/releases/latest). In this connection method, no initialisation is required and it is mandatory to specify the `.masonry' class for the html container.</sub>
+```html
+<script src="path-to-the-file/masonry-simple.min.js"></script>
+```
 <br>
 
 ### Import
@@ -26,6 +40,9 @@ import MasonrySimple from 'masonry-simple';
 <br>
 
 ### Usage
+
+<sub>The container can be specified in the following formats: a string value representing the class or id of an element in the DOM, such as '.masonry' or '#masonry'. A Vue reactive reference that contains a DOM element.</sub>
+
 ```javascript
 const masonry = new MasonrySimple({
   container: '.masonry',

package/dist/masonry-simple.min.js

@@ -0,0 +1 @@
+function e(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}var t=function(){var t;function n(){var t,i,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};!function(e,t){if(!(e instanceof t))throw TypeError("Cannot call a class as a function")}(this,n),e(this,"container",null),e(this,"gridItems",[]),e(this,"rowHeight",1),e(this,"rowGap",0),e(this,"resizeTimeout",null),e(this,"resizeObserver",new ResizeObserver(this.handleResize.bind(this))),t=r.container,this.container=(null!=(i=HTMLElement)&&"undefined"!=typeof Symbol&&i[Symbol.hasInstance]?!!i[Symbol.hasInstance](t):t instanceof i)?r.container:document.querySelector(r.container||".masonry")}return t=[{key:"handleResize",value:function(){var e=this;this.resizeTimeout&&window.cancelAnimationFrame(this.resizeTimeout),this.resizeTimeout=window.requestAnimationFrame(function(){e.resizeAllItems()})}},{key:"resizeAllItems",value:function(){var e=this;this.container.style.alignItems="start",this.gridItems.forEach(function(t){var n=Math.ceil((t.clientHeight+e.rowGap)/(e.rowHeight+e.rowGap));t.style.gridRowEnd="span ".concat(n)})}},{key:"init",value:function(){if(this.container){var e=getComputedStyle(this.container).rowGap;this.gridItems=Array.from(this.container.children),this.container.style.contain="layout",this.rowGap=parseInt(e,10),this.resizeObserver.observe(this.container),this.resizeAllItems()}}},{key:"destroy",value:function(){this.resizeObserver.unobserve(this.container),this.container.style.contain="",this.container.style.alignItems="",this.gridItems.forEach(function(e){e.style.gridRowEnd=""})}}],function(e,t){for(var n=0;n<t.length;n++){var i=t[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(e,i.key,i)}}(n.prototype,t),n}();document.addEventListener("DOMContentLoaded",function(){new t().init()});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "masonry-simple",
-  "version": "3.0.0",
+  "version": "3.0.1",
   "description": "Responsive masonry grid",
   "author": "ux-ui.pro",
   "license": "MIT",
@@ -22,10 +22,11 @@
     }
   },
   "scripts": {
-    "clean": "rm -rf dist .parcel-cache",
-    "build": "yarn clean && parcel build",
     "lint:js": "eslint --ext .js",
-    "lintfix": "yarn lint:js --fix"
+    "lintfix": "yarn lint:js --fix",
+    "clean": "rm -rf dist .parcel-cache",
+    "minify": "swc src/masonry-simple.js -o dist/masonry-simple.min.js --config-file .swcrc",
+    "build": "yarn clean && yarn minify && parcel build"
   },
   "devDependencies": {
     "eslint": "^7.32.0 || ^8.56.0",
@@ -37,6 +38,7 @@
     "layout",
     "grid",
     "gallery",
-    "images"
+    "images",
+    "vue"
   ]
 }

package/src/masonry-simple.js

@@ -0,0 +1,63 @@
+class MasonrySimple {
+  container = null;
+  gridItems = [];
+  rowHeight = 1;
+  rowGap = 0;
+  resizeTimeout = null;
+  resizeObserver = new ResizeObserver(this.handleResize.bind(this));
+
+  constructor(options = {}) {
+    this.container =
+      options.container instanceof HTMLElement
+        ? options.container
+        : document.querySelector(options.container || '.masonry');
+  }
+
+  handleResize() {
+    if (this.resizeTimeout) {
+      window.cancelAnimationFrame(this.resizeTimeout);
+    }
+
+    this.resizeTimeout = window.requestAnimationFrame(() => {
+      this.resizeAllItems();
+    });
+  }
+
+  resizeAllItems() {
+    this.container.style.alignItems = 'start';
+    this.gridItems.forEach((item) => {
+      const rowSpan = Math.ceil(
+        (item.clientHeight + this.rowGap) / (this.rowHeight + this.rowGap)
+      );
+
+      item.style.gridRowEnd = `span ${rowSpan}`;
+    });
+  }
+
+  init() {
+    if (!this.container) return;
+
+    const { rowGap } = getComputedStyle(this.container);
+
+    this.gridItems = Array.from(this.container.children);
+    this.container.style.contain = 'layout';
+    this.rowGap = parseInt(rowGap, 10);
+    this.resizeObserver.observe(this.container);
+    this.resizeAllItems();
+  }
+
+  destroy() {
+    this.resizeObserver.unobserve(this.container);
+    this.container.style.contain = '';
+    this.container.style.alignItems = '';
+    this.gridItems.forEach((item) => {
+      item.style.gridRowEnd = '';
+    });
+  }
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  const masonry = new MasonrySimple();
+
+  masonry.init();
+});