@ -35,35 +35,81 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
function _toPropertyKey ( arg ) { var key = _toPrimitive ( arg , "string" ) ; return _typeof ( key ) === "symbol" ? key : String ( key ) ; }
function _toPrimitive ( input , hint ) { if ( _typeof ( input ) !== "object" || input === null ) return input ; var prim = input [ Symbol . toPrimitive ] ; if ( prim !== undefined ) { var res = prim . call ( input , hint || "default" ) ; if ( _typeof ( res ) !== "object" ) return res ; throw new TypeError ( "@@toPrimitive must return a primitive value." ) ; } return ( hint === "string" ? String : Number ) ( input ) ; }
/ * *
* Tiny Masonry
*
* @ author Björn Hase
* @ license http : //opensource.org/licenses/MIT The MIT License
* @ link https : //gitea.node001.net/tiny-components/masonry
*
* /
var Masonry = /*#__PURE__*/ function ( ) {
/ * *
*
*
* /
function Masonry ( ) {
var _this = this ;
_classCallCheck ( this , Masonry ) ;
// getting elements
this . elements = document . querySelectorAll ( '.tiny-masonry__item-inner' ) ;
this . container = document . querySelector ( '.tiny-masonry' ) ;
// getting gap for calculate from grid
this . gap = parseInt ( getComputedStyle ( this . container , 'gap' ) . getPropertyValue ( 'grid-gap' ) . split ( ' ' ) [ 0 ] ) ;
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 ) ;
}
/ * *
*
*
* /
_createClass ( Masonry , [ {
key : "calculate" ,
value : function calculate ( ) {
this . columns = Math . ceil ( this . container . offsetWidth / this . elements [ 0 ] . parentElement . offsetWidth ) - 1 ;
for ( var i = 0 ; i < this . elements . length ; i ++ ) {
this . elements [ i ] . parentElement . style . marginTop = '0px' ;
var onlyVisible = arguments . length > 0 && arguments [ 0 ] !== undefined ? arguments [ 0 ] : false ;
// getting number of columns
if ( ! onlyVisible ) {
this . columns = Math . ceil ( this . container . offsetWidth / this . elements [ 0 ] . parentElement . offsetWidth ) - 1 ;
if ( this . columns === 0 ) {
this . columns = 1 ;
}
}
for ( var _i = 0 ; _i < this . elements . length ; _i ++ ) {
if ( this . elements [ _i + this . columns ] ) {
var offset = 0 ;
for ( var i = 0 ; i < this . elements . length ; i ++ ) {
var marginTop = 0 ;
// if style was already
if ( this . elements [ _i ] && this . elements [ _i ] . parentElement . style . marginTop ) {
offset += parseInt ( this . elements [ _i ] . parentElement . style . marginTop ) ;
}
// getting row
var row = Math . round ( i / this . columns ) + 1 ;
// setting
this . elements [ _i + this . columns ] . parentElement . style . marginTop = this . elements [ _i ] . offsetHeight + parseInt ( offset ) + 'px' ;
// reset margin-top for the first columns
if ( i < this . columns ) {
this . elements [ i ] . parentElement . dataset . offsetMarginTop = 0 ;
}
// check for parent element and getting marginTop
if ( this . elements [ i - this . columns ] && ! onlyVisible ) {
if ( this . elements [ i - this . columns ] . parentElement . dataset . offsetMarginTop ) {
marginTop += parseInt ( this . elements [ i - this . columns ] . parentElement . dataset . offsetMarginTop ) ;
}
marginTop += this . elements [ i - this . columns ] . offsetHeight ;
} else {
marginTop = this . elements [ i ] . parentElement . dataset . offsetMarginTop ;
}
if ( ! onlyVisible ) {
this . elements [ i ] . parentElement . dataset . offsetMarginTop = marginTop ;
}
if ( window . pageYOffset <= marginTop + this . elements [ i ] . offsetHeight + this . gap * row && window . pageYOffset + window . innerHeight + this . gap * row >= marginTop ) {
this . elements [ i ] . parentElement . style . marginTop = marginTop + 'px' ;
this . elements [ i ] . parentElement . style . visibility = 'visible' ;
} else {
this . elements [ i ] . parentElement . style . visibility = 'hidden' ;
}
}
}
