change behavior for gettings elements, smaller bugfix

.gitignore

@@ -7,6 +7,7 @@ yarn-debug.log*
 yarn-error.log*
 lerna-debug.log*
 .pnpm-debug.log*
+.npmrc
 
 # Diagnostic reports (https://nodejs.org/api/report.html)
 report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
@@ -117,4 +118,3 @@ dist
 .yarn/build-state.yml
 .yarn/install-state.gz
 .pnp.*
-

example/example.js

@@ -12,7 +12,9 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _masonry_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./masonry.js */ "./src/masonry.js");
 
 document.addEventListener("DOMContentLoaded", function (event) {
-  var masonry = new _masonry_js__WEBPACK_IMPORTED_MODULE_0__["default"]();
+  var container = document.querySelector('.tiny-masonry');
+  var elements = document.querySelectorAll('.tiny-masonry__item-inner');
+  var masonry = new _masonry_js__WEBPACK_IMPORTED_MODULE_0__["default"](container, elements);
 });
 
 /***/ }),
@@ -29,6 +31,12 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony export */ });
 /* harmony import */ var throttle_debounce__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! throttle-debounce */ "./node_modules/throttle-debounce/esm/index.js");
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
@@ -49,22 +57,38 @@ var Masonry = /*#__PURE__*/function () {
    *
    *
    */
-  function Masonry() {
+  function Masonry(container, elements) {
     var _this = this;
     _classCallCheck(this, Masonry);
+    this.height = 0;
+
     // getting elements 
-    this.elements = document.querySelectorAll('.tiny-masonry__item-inner');
-    this.container = document.querySelector('.tiny-masonry');
+    this.elements = elements;
+    this.container = container;
 
     // getting gap for calculate from grid 
     this.gap = parseInt(getComputedStyle(this.container, 'gap').getPropertyValue('grid-gap').split(' ')[0]);
-    this.calculate();
+
+    // adding loaded event 
+    this.elements.forEach(function (element) {
+      var img = element.querySelector('img');
+      if (img) {
+        if (img.completed) {
+          _this.calculate();
+        } else {
+          img.addEventListener('load', function () {
+            _this.calculate();
+          });
+        }
+      }
+    });
     window.addEventListener('resize', (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, function () {
       _this.calculate();
     }), false);
     window.addEventListener('scroll', (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, function () {
       _this.calculate(true);
     }), false);
+    this.calculate();
   }
 
   /**
@@ -82,6 +106,7 @@ var Masonry = /*#__PURE__*/function () {
           this.columns = 1;
         }
       }
+      this.height = [];
       for (var i = 0; i < this.elements.length; i++) {
         var marginTop = 0;
 
@@ -111,6 +136,15 @@ var Masonry = /*#__PURE__*/function () {
         } else {
           this.elements[i].parentElement.style.visibility = 'hidden';
         }
+
+        // add complete height for element
+        this.height.push(parseInt(marginTop) + parseInt(this.elements[i].offsetHeight) + this.gap * row);
+      }
+
+      // getting heighest height
+      this.height = Math.max.apply(Math, _toConsumableArray(this.height));
+      if (this.height > 0) {
+        this.container.style.height = this.height + 'px';
       }
     }
   }]);

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tiny-components/masonry",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Masonry for Desktop and Mobile",
   "repository": {
     "type": "git",

src/example.js

@@ -1,5 +1,8 @@
 import Masonry from './masonry.js'
 
 document.addEventListener("DOMContentLoaded", (event) => { 
-    const masonry = new Masonry()
+    const container = document.querySelector('.tiny-masonry')
+    const elements = document.querySelectorAll('.tiny-masonry__item-inner')
+
+    const masonry = new Masonry(container, elements)
 })

src/masonry.js

@@ -15,13 +15,13 @@ class Masonry {
      *
      *
      */
-    constructor() {
+    constructor(container, elements) {
 
         this.height = 0
 
         // getting elements 
-        this.elements = document.querySelectorAll('.tiny-masonry__item-inner')
-        this.container = document.querySelector('.tiny-masonry')
+        this.elements = elements
+        this.container = container
 
         // getting gap for calculate from grid 
         this.gap = parseInt(getComputedStyle(this.container, 'gap').getPropertyValue('grid-gap').split(' ')[0])
@@ -30,12 +30,14 @@ class Masonry {
         this.elements.forEach((element) => {
             const img = element.querySelector('img')
 
-            if (img.completed) {
-                this.calculate()
-            } else {
-                img.addEventListener('load', () => {
+            if (img) {
+                if (img.completed) {
                     this.calculate()
-                })
+                } else {
+                    img.addEventListener('load', () => {
+                        this.calculate()
+                    })
+                }
             }
         })
 
@@ -46,6 +48,8 @@ class Masonry {
         window.addEventListener('scroll', throttle(300, () => {
             this.calculate(true)
         }), false)
+
+        this.calculate()
     }
 
     /**