You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
476 lines
20 KiB
476 lines
20 KiB
/******/ (() => { // webpackBootstrap
|
|
/******/ "use strict";
|
|
/******/ var __webpack_modules__ = ({
|
|
|
|
/***/ "./src/example.js":
|
|
/*!************************!*\
|
|
!*** ./src/example.js ***!
|
|
\************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__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"]();
|
|
});
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./src/masonry.js":
|
|
/*!************************!*\
|
|
!*** ./src/masonry.js ***!
|
|
\************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "default": () => (__WEBPACK_DEFAULT_EXPORT__)
|
|
/* 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 _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; }
|
|
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() {
|
|
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++) {
|
|
var marginTop = 0;
|
|
|
|
// getting row
|
|
var row = Math.round(i / this.columns) + 1;
|
|
|
|
// 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';
|
|
}
|
|
}
|
|
}
|
|
}]);
|
|
return Masonry;
|
|
}();
|
|
/* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = (Masonry);
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./src/example.scss":
|
|
/*!**************************!*\
|
|
!*** ./src/example.scss ***!
|
|
\**************************/
|
|
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
// extracted by mini-css-extract-plugin
|
|
|
|
|
|
/***/ }),
|
|
|
|
/***/ "./node_modules/throttle-debounce/esm/index.js":
|
|
/*!*****************************************************!*\
|
|
!*** ./node_modules/throttle-debounce/esm/index.js ***!
|
|
\*****************************************************/
|
|
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {
|
|
|
|
__webpack_require__.r(__webpack_exports__);
|
|
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
|
|
/* harmony export */ "debounce": () => (/* binding */ debounce),
|
|
/* harmony export */ "throttle": () => (/* binding */ throttle)
|
|
/* harmony export */ });
|
|
/* eslint-disable no-undefined,no-param-reassign,no-shadow */
|
|
|
|
/**
|
|
* Throttle execution of a function. Especially useful for rate limiting
|
|
* execution of handlers on events like resize and scroll.
|
|
*
|
|
* @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher)
|
|
* are most useful.
|
|
* @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through,
|
|
* as-is, to `callback` when the throttled-function is executed.
|
|
* @param {object} [options] - An object to configure options.
|
|
* @param {boolean} [options.noTrailing] - Optional, defaults to false. If noTrailing is true, callback will only execute every `delay` milliseconds
|
|
* while the throttled-function is being called. If noTrailing is false or unspecified, callback will be executed
|
|
* one final time after the last throttled-function call. (After the throttled-function has not been called for
|
|
* `delay` milliseconds, the internal counter is reset).
|
|
* @param {boolean} [options.noLeading] - Optional, defaults to false. If noLeading is false, the first throttled-function call will execute callback
|
|
* immediately. If noLeading is true, the first the callback execution will be skipped. It should be noted that
|
|
* callback will never executed if both noLeading = true and noTrailing = true.
|
|
* @param {boolean} [options.debounceMode] - If `debounceMode` is true (at begin), schedule `clear` to execute after `delay` ms. If `debounceMode` is
|
|
* false (at end), schedule `callback` to execute after `delay` ms.
|
|
*
|
|
* @returns {Function} A new, throttled, function.
|
|
*/
|
|
function throttle (delay, callback, options) {
|
|
var _ref = options || {},
|
|
_ref$noTrailing = _ref.noTrailing,
|
|
noTrailing = _ref$noTrailing === void 0 ? false : _ref$noTrailing,
|
|
_ref$noLeading = _ref.noLeading,
|
|
noLeading = _ref$noLeading === void 0 ? false : _ref$noLeading,
|
|
_ref$debounceMode = _ref.debounceMode,
|
|
debounceMode = _ref$debounceMode === void 0 ? undefined : _ref$debounceMode;
|
|
/*
|
|
* After wrapper has stopped being called, this timeout ensures that
|
|
* `callback` is executed at the proper times in `throttle` and `end`
|
|
* debounce modes.
|
|
*/
|
|
|
|
|
|
var timeoutID;
|
|
var cancelled = false; // Keep track of the last time `callback` was executed.
|
|
|
|
var lastExec = 0; // Function to clear existing timeout
|
|
|
|
function clearExistingTimeout() {
|
|
if (timeoutID) {
|
|
clearTimeout(timeoutID);
|
|
}
|
|
} // Function to cancel next exec
|
|
|
|
|
|
function cancel(options) {
|
|
var _ref2 = options || {},
|
|
_ref2$upcomingOnly = _ref2.upcomingOnly,
|
|
upcomingOnly = _ref2$upcomingOnly === void 0 ? false : _ref2$upcomingOnly;
|
|
|
|
clearExistingTimeout();
|
|
cancelled = !upcomingOnly;
|
|
}
|
|
/*
|
|
* The `wrapper` function encapsulates all of the throttling / debouncing
|
|
* functionality and when executed will limit the rate at which `callback`
|
|
* is executed.
|
|
*/
|
|
|
|
|
|
function wrapper() {
|
|
for (var _len = arguments.length, arguments_ = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
arguments_[_key] = arguments[_key];
|
|
}
|
|
|
|
var self = this;
|
|
var elapsed = Date.now() - lastExec;
|
|
|
|
if (cancelled) {
|
|
return;
|
|
} // Execute `callback` and update the `lastExec` timestamp.
|
|
|
|
|
|
function exec() {
|
|
lastExec = Date.now();
|
|
callback.apply(self, arguments_);
|
|
}
|
|
/*
|
|
* If `debounceMode` is true (at begin) this is used to clear the flag
|
|
* to allow future `callback` executions.
|
|
*/
|
|
|
|
|
|
function clear() {
|
|
timeoutID = undefined;
|
|
}
|
|
|
|
if (!noLeading && debounceMode && !timeoutID) {
|
|
/*
|
|
* Since `wrapper` is being called for the first time and
|
|
* `debounceMode` is true (at begin), execute `callback`
|
|
* and noLeading != true.
|
|
*/
|
|
exec();
|
|
}
|
|
|
|
clearExistingTimeout();
|
|
|
|
if (debounceMode === undefined && elapsed > delay) {
|
|
if (noLeading) {
|
|
/*
|
|
* In throttle mode with noLeading, if `delay` time has
|
|
* been exceeded, update `lastExec` and schedule `callback`
|
|
* to execute after `delay` ms.
|
|
*/
|
|
lastExec = Date.now();
|
|
|
|
if (!noTrailing) {
|
|
timeoutID = setTimeout(debounceMode ? clear : exec, delay);
|
|
}
|
|
} else {
|
|
/*
|
|
* In throttle mode without noLeading, if `delay` time has been exceeded, execute
|
|
* `callback`.
|
|
*/
|
|
exec();
|
|
}
|
|
} else if (noTrailing !== true) {
|
|
/*
|
|
* In trailing throttle mode, since `delay` time has not been
|
|
* exceeded, schedule `callback` to execute `delay` ms after most
|
|
* recent execution.
|
|
*
|
|
* If `debounceMode` is true (at begin), schedule `clear` to execute
|
|
* after `delay` ms.
|
|
*
|
|
* If `debounceMode` is false (at end), schedule `callback` to
|
|
* execute after `delay` ms.
|
|
*/
|
|
timeoutID = setTimeout(debounceMode ? clear : exec, debounceMode === undefined ? delay - elapsed : delay);
|
|
}
|
|
}
|
|
|
|
wrapper.cancel = cancel; // Return the wrapper function.
|
|
|
|
return wrapper;
|
|
}
|
|
|
|
/* eslint-disable no-undefined */
|
|
/**
|
|
* Debounce execution of a function. Debouncing, unlike throttling,
|
|
* guarantees that a function is only executed a single time, either at the
|
|
* very beginning of a series of calls, or at the very end.
|
|
*
|
|
* @param {number} delay - A zero-or-greater delay in milliseconds. For event callbacks, values around 100 or 250 (or even higher) are most useful.
|
|
* @param {Function} callback - A function to be executed after delay milliseconds. The `this` context and all arguments are passed through, as-is,
|
|
* to `callback` when the debounced-function is executed.
|
|
* @param {object} [options] - An object to configure options.
|
|
* @param {boolean} [options.atBegin] - Optional, defaults to false. If atBegin is false or unspecified, callback will only be executed `delay` milliseconds
|
|
* after the last debounced-function call. If atBegin is true, callback will be executed only at the first debounced-function call.
|
|
* (After the throttled-function has not been called for `delay` milliseconds, the internal counter is reset).
|
|
*
|
|
* @returns {Function} A new, debounced function.
|
|
*/
|
|
|
|
function debounce (delay, callback, options) {
|
|
var _ref = options || {},
|
|
_ref$atBegin = _ref.atBegin,
|
|
atBegin = _ref$atBegin === void 0 ? false : _ref$atBegin;
|
|
|
|
return throttle(delay, callback, {
|
|
debounceMode: atBegin !== false
|
|
});
|
|
}
|
|
|
|
|
|
//# sourceMappingURL=index.js.map
|
|
|
|
|
|
/***/ })
|
|
|
|
/******/ });
|
|
/************************************************************************/
|
|
/******/ // The module cache
|
|
/******/ var __webpack_module_cache__ = {};
|
|
/******/
|
|
/******/ // The require function
|
|
/******/ function __webpack_require__(moduleId) {
|
|
/******/ // Check if module is in cache
|
|
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
|
/******/ if (cachedModule !== undefined) {
|
|
/******/ return cachedModule.exports;
|
|
/******/ }
|
|
/******/ // Create a new module (and put it into the cache)
|
|
/******/ var module = __webpack_module_cache__[moduleId] = {
|
|
/******/ // no module.id needed
|
|
/******/ // no module.loaded needed
|
|
/******/ exports: {}
|
|
/******/ };
|
|
/******/
|
|
/******/ // Execute the module function
|
|
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
|
/******/
|
|
/******/ // Return the exports of the module
|
|
/******/ return module.exports;
|
|
/******/ }
|
|
/******/
|
|
/******/ // expose the modules object (__webpack_modules__)
|
|
/******/ __webpack_require__.m = __webpack_modules__;
|
|
/******/
|
|
/************************************************************************/
|
|
/******/ /* webpack/runtime/chunk loaded */
|
|
/******/ (() => {
|
|
/******/ var deferred = [];
|
|
/******/ __webpack_require__.O = (result, chunkIds, fn, priority) => {
|
|
/******/ if(chunkIds) {
|
|
/******/ priority = priority || 0;
|
|
/******/ for(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];
|
|
/******/ deferred[i] = [chunkIds, fn, priority];
|
|
/******/ return;
|
|
/******/ }
|
|
/******/ var notFulfilled = Infinity;
|
|
/******/ for (var i = 0; i < deferred.length; i++) {
|
|
/******/ var [chunkIds, fn, priority] = deferred[i];
|
|
/******/ var fulfilled = true;
|
|
/******/ for (var j = 0; j < chunkIds.length; j++) {
|
|
/******/ if ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every((key) => (__webpack_require__.O[key](chunkIds[j])))) {
|
|
/******/ chunkIds.splice(j--, 1);
|
|
/******/ } else {
|
|
/******/ fulfilled = false;
|
|
/******/ if(priority < notFulfilled) notFulfilled = priority;
|
|
/******/ }
|
|
/******/ }
|
|
/******/ if(fulfilled) {
|
|
/******/ deferred.splice(i--, 1)
|
|
/******/ var r = fn();
|
|
/******/ if (r !== undefined) result = r;
|
|
/******/ }
|
|
/******/ }
|
|
/******/ return result;
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/define property getters */
|
|
/******/ (() => {
|
|
/******/ // define getter functions for harmony exports
|
|
/******/ __webpack_require__.d = (exports, definition) => {
|
|
/******/ for(var key in definition) {
|
|
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
|
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
|
/******/ }
|
|
/******/ }
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
|
/******/ (() => {
|
|
/******/ __webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/make namespace object */
|
|
/******/ (() => {
|
|
/******/ // define __esModule on exports
|
|
/******/ __webpack_require__.r = (exports) => {
|
|
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
|
|
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
/******/ }
|
|
/******/ Object.defineProperty(exports, '__esModule', { value: true });
|
|
/******/ };
|
|
/******/ })();
|
|
/******/
|
|
/******/ /* webpack/runtime/jsonp chunk loading */
|
|
/******/ (() => {
|
|
/******/ // no baseURI
|
|
/******/
|
|
/******/ // object to store loaded and loading chunks
|
|
/******/ // undefined = chunk not loaded, null = chunk preloaded/prefetched
|
|
/******/ // [resolve, reject, Promise] = chunk loading, 0 = chunk loaded
|
|
/******/ var installedChunks = {
|
|
/******/ "/example": 0,
|
|
/******/ "example": 0
|
|
/******/ };
|
|
/******/
|
|
/******/ // no chunk on demand loading
|
|
/******/
|
|
/******/ // no prefetching
|
|
/******/
|
|
/******/ // no preloaded
|
|
/******/
|
|
/******/ // no HMR
|
|
/******/
|
|
/******/ // no HMR manifest
|
|
/******/
|
|
/******/ __webpack_require__.O.j = (chunkId) => (installedChunks[chunkId] === 0);
|
|
/******/
|
|
/******/ // install a JSONP callback for chunk loading
|
|
/******/ var webpackJsonpCallback = (parentChunkLoadingFunction, data) => {
|
|
/******/ var [chunkIds, moreModules, runtime] = data;
|
|
/******/ // add "moreModules" to the modules object,
|
|
/******/ // then flag all "chunkIds" as loaded and fire callback
|
|
/******/ var moduleId, chunkId, i = 0;
|
|
/******/ if(chunkIds.some((id) => (installedChunks[id] !== 0))) {
|
|
/******/ for(moduleId in moreModules) {
|
|
/******/ if(__webpack_require__.o(moreModules, moduleId)) {
|
|
/******/ __webpack_require__.m[moduleId] = moreModules[moduleId];
|
|
/******/ }
|
|
/******/ }
|
|
/******/ if(runtime) var result = runtime(__webpack_require__);
|
|
/******/ }
|
|
/******/ if(parentChunkLoadingFunction) parentChunkLoadingFunction(data);
|
|
/******/ for(;i < chunkIds.length; i++) {
|
|
/******/ chunkId = chunkIds[i];
|
|
/******/ if(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {
|
|
/******/ installedChunks[chunkId][0]();
|
|
/******/ }
|
|
/******/ installedChunks[chunkId] = 0;
|
|
/******/ }
|
|
/******/ return __webpack_require__.O(result);
|
|
/******/ }
|
|
/******/
|
|
/******/ var chunkLoadingGlobal = self["webpackChunk_tiny_components_masonry"] = self["webpackChunk_tiny_components_masonry"] || [];
|
|
/******/ chunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));
|
|
/******/ chunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));
|
|
/******/ })();
|
|
/******/
|
|
/************************************************************************/
|
|
/******/
|
|
/******/ // startup
|
|
/******/ // Load entry module and return exports
|
|
/******/ // This entry module depends on other loaded chunks and execution need to be delayed
|
|
/******/ __webpack_require__.O(undefined, ["example"], () => (__webpack_require__("./src/example.js")))
|
|
/******/ var __webpack_exports__ = __webpack_require__.O(undefined, ["example"], () => (__webpack_require__("./src/example.scss")))
|
|
/******/ __webpack_exports__ = __webpack_require__.O(__webpack_exports__);
|
|
/******/
|
|
/******/ })()
|
|
; |