diff --git a/.gitignore b/.gitignore index a2a1041..8caeb70 100644 --- a/.gitignore +++ b/.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.* - diff --git a/example/example.js b/example/example.js index dfce206..4022998 100644 --- a/example/example.js +++ b/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'; } } }]); diff --git a/package.json b/package.json index 995211d..0d2e0af 100644 --- a/package.json +++ b/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", diff --git a/src/example.js b/src/example.js index 1aa2083..db6ed48 100644 --- a/src/example.js +++ b/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) }) diff --git a/src/masonry.js b/src/masonry.js index 2f198f8..fdb5664 100644 --- a/src/masonry.js +++ b/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() } /**