@ -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' ;
}
}
} ] ) ;
