commit
2c0f923188
@ -0,0 +1,120 @@
|
||||
# ---> Node
|
||||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
lerna-debug.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# Diagnostic reports (https://nodejs.org/api/report.html)
|
||||
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
*.pid.lock
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
*.lcov
|
||||
|
||||
# nyc test coverage
|
||||
.nyc_output
|
||||
|
||||
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Bower dependency directory (https://bower.io/)
|
||||
bower_components
|
||||
|
||||
# node-waf configuration
|
||||
.lock-wscript
|
||||
|
||||
# Compiled binary addons (https://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directories
|
||||
node_modules/
|
||||
jspm_packages/
|
||||
|
||||
# Snowpack dependency directory (https://snowpack.dev/)
|
||||
web_modules/
|
||||
|
||||
# TypeScript cache
|
||||
*.tsbuildinfo
|
||||
|
||||
# Optional npm cache directory
|
||||
.npm
|
||||
|
||||
# Optional eslint cache
|
||||
.eslintcache
|
||||
|
||||
# Microbundle cache
|
||||
.rpt2_cache/
|
||||
.rts2_cache_cjs/
|
||||
.rts2_cache_es/
|
||||
.rts2_cache_umd/
|
||||
|
||||
# Optional REPL history
|
||||
.node_repl_history
|
||||
|
||||
# Output of 'npm pack'
|
||||
*.tgz
|
||||
|
||||
# Yarn Integrity file
|
||||
.yarn-integrity
|
||||
|
||||
# dotenv environment variables file
|
||||
.env
|
||||
.env.test
|
||||
.env.production
|
||||
|
||||
# parcel-bundler cache (https://parceljs.org/)
|
||||
.cache
|
||||
.parcel-cache
|
||||
|
||||
# Next.js build output
|
||||
.next
|
||||
out
|
||||
|
||||
# Nuxt.js build / generate output
|
||||
.nuxt
|
||||
dist
|
||||
|
||||
# Gatsby files
|
||||
.cache/
|
||||
# Comment in the public line in if your project uses Gatsby and not Next.js
|
||||
# https://nextjs.org/blog/next-9-1#public-directory-support
|
||||
# public
|
||||
|
||||
# vuepress build output
|
||||
.vuepress/dist
|
||||
|
||||
# Serverless directories
|
||||
.serverless/
|
||||
|
||||
# FuseBox cache
|
||||
.fusebox/
|
||||
|
||||
# DynamoDB Local files
|
||||
.dynamodb/
|
||||
|
||||
# TernJS port file
|
||||
.tern-port
|
||||
|
||||
# Stores VSCode versions used for testing VSCode extensions
|
||||
.vscode-test
|
||||
|
||||
# yarn v2
|
||||
.yarn/cache
|
||||
.yarn/unplugged
|
||||
.yarn/build-state.yml
|
||||
.yarn/install-state.gz
|
||||
.pnp.*
|
||||
|
||||
@ -0,0 +1,9 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) <year> <copyright holders>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
@ -0,0 +1,49 @@
|
||||
# Tiny Components - Masonry
|
||||
|
||||
Proof of Concept!
|
||||
|
||||
Using Styles for UI from [Plain-UI](https://plain-ui.com)
|
||||
|
||||
Source: [https://gitea.node001.net/tiny-components/masonry](https://gitea.node001.net/tiny-components/masonry)
|
||||
Mirror: [https://github.com/node001-net/tiny-components-masonry](https://github.com/node001-net/tiny-components-masonry)
|
||||
|
||||
|
||||
|
||||
## Installation
|
||||
|
||||
Setup this registry in your project .npmrc file:
|
||||
|
||||
```
|
||||
@tiny-components:registry=https://gitea.node001.net/api/packages/tiny-components/npm/
|
||||
```
|
||||
|
||||
Install with npm or yarn
|
||||
|
||||
```
|
||||
npm i --save @tiny-components/masonry
|
||||
yarn add @tiny-components/masonry
|
||||
```
|
||||
|
||||
## Using
|
||||
|
||||
```
|
||||
import Masonry from './masonry.js'
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
const masonry = new Masonry()
|
||||
})
|
||||
```
|
||||
|
||||
Markup,
|
||||
|
||||
```
|
||||
<div class="tiny-masonry">
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>1</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>2</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>3</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>4</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>5</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>6</span></div></div>
|
||||
...
|
||||
</div>
|
||||
```
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 151 KiB |
|
After Width: | Height: | Size: 28 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,430 @@
|
||||
/******/ (() => { // 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); }
|
||||
|
||||
var Masonry = /*#__PURE__*/function () {
|
||||
function Masonry() {
|
||||
var _this = this;
|
||||
_classCallCheck(this, Masonry);
|
||||
this.elements = document.querySelectorAll('.tiny-masonry__item-inner');
|
||||
this.container = document.querySelector('.tiny-masonry');
|
||||
this.calculate();
|
||||
window.addEventListener('resize', (0,throttle_debounce__WEBPACK_IMPORTED_MODULE_0__.throttle)(300, function () {
|
||||
_this.calculate();
|
||||
}), 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';
|
||||
}
|
||||
for (var _i = 0; _i < this.elements.length; _i++) {
|
||||
if (this.elements[_i + this.columns]) {
|
||||
var offset = 0;
|
||||
|
||||
// if style was already
|
||||
if (this.elements[_i] && this.elements[_i].parentElement.style.marginTop) {
|
||||
offset += parseInt(this.elements[_i].parentElement.style.marginTop);
|
||||
}
|
||||
|
||||
// setting
|
||||
this.elements[_i + this.columns].parentElement.style.marginTop = this.elements[_i].offsetHeight + parseInt(offset) + 'px';
|
||||
}
|
||||
}
|
||||
}
|
||||
}]);
|
||||
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__);
|
||||
/******/
|
||||
/******/ })()
|
||||
;
|
||||
@ -0,0 +1,55 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Tiny Components | Masonry</title>
|
||||
<link rel="icon" href="data:,">
|
||||
<link href="/example.css" rel="stylesheet" type="text/css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<header class="header">
|
||||
<div class="bar">
|
||||
<div class="bar__start">
|
||||
<h1 class="m-top-4 m-bottom-4 h4">
|
||||
@tiny-components/datepicker
|
||||
</h1>
|
||||
</div>
|
||||
<div class="bar__main justify-end">
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
|
||||
Gitea
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-gitea"></use>
|
||||
</svg>
|
||||
</a>
|
||||
<a class="button button--small m-left-sm-3 m-bottom-0" href="https://gitea.node001.net/tiny-components/slider" rel="noopener" target="_blank">
|
||||
Github
|
||||
<svg class="m-left-3 icon fill-text" aria-hidden="true">
|
||||
<use xlink:href="/symbol-defs.svg#icon-github"></use>
|
||||
</svg>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="tiny-masonry">
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>1</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>2</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>3</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>4</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>5</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>6</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>7</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>8</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>9</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>10</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>11</span></div></div>
|
||||
<div class="tiny-masonry__item"><div class="tiny-masonry__item-inner"><img src="/demo.jpg" loading="lazy" /><span>12</span></div></div>
|
||||
</div>
|
||||
<script defer src="/example.js"></script>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@ -0,0 +1,14 @@
|
||||
{
|
||||
"/spritemap.js": "/spritemap.js",
|
||||
"/symbol-defs.svg": "/symbol-defs.svg",
|
||||
"/example.js": "/example.js",
|
||||
"/.css": "/.css",
|
||||
"/IBMPlexMono-Bold.eot": "/IBMPlexMono-Bold.eot",
|
||||
"/IBMPlexMono-Bold.ttf": "/IBMPlexMono-Bold.ttf",
|
||||
"/IBMPlexMono-Bold.woff": "/IBMPlexMono-Bold.woff",
|
||||
"/IBMPlexMono-Bold.woff2": "/IBMPlexMono-Bold.woff2",
|
||||
"/IBMPlexMono.eot": "/IBMPlexMono.eot",
|
||||
"/IBMPlexMono.ttf": "/IBMPlexMono.ttf",
|
||||
"/IBMPlexMono.woff": "/IBMPlexMono.woff",
|
||||
"/IBMPlexMono.woff2": "/IBMPlexMono.woff2"
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
(self["webpackChunk_tiny_components_masonry"] = self["webpackChunk_tiny_components_masonry"] || []).push([["spritemap"],{
|
||||
|
||||
/***/ "?c20d":
|
||||
/*!******************************!*\
|
||||
!*** spritemap-dummy-module ***!
|
||||
\******************************/
|
||||
/***/ (() => {
|
||||
|
||||
|
||||
|
||||
/***/ })
|
||||
|
||||
}]);
|
||||
|
After Width: | Height: | Size: 69 KiB |
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,22 @@
|
||||
{
|
||||
"name": "@tiny-components/masonry",
|
||||
"version": "0.1.0",
|
||||
"description": "Masonry for Desktop and Mobile",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@gitea.node001.net:tiny-components/masonry.git"
|
||||
},
|
||||
"author": "Björn Hase",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@tiny-components/plain-ui": "^0.6.0",
|
||||
"throttle-debounce": "^5.0.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"laravel-mix": "^6.0.49",
|
||||
"laravel-mix-purgecss": "^6.0.0",
|
||||
"sass": "^1.62.1",
|
||||
"sass-loader": "^12.6.0",
|
||||
"svg-spritemap-webpack-plugin": "^4.5.0"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,5 @@
|
||||
import Masonry from './masonry.js'
|
||||
|
||||
document.addEventListener("DOMContentLoaded", (event) => {
|
||||
const masonry = new Masonry()
|
||||
})
|
||||
@ -0,0 +1,45 @@
|
||||
@import
|
||||
'../node_modules/@tiny-components/plain-ui/src/scss/plain-ui',
|
||||
'styles';
|
||||
|
||||
.tiny-masonry__item {
|
||||
line-height: 0;
|
||||
|
||||
span {
|
||||
margin: 1em;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 1em 0.5em;
|
||||
background: black;
|
||||
color: white;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-inner {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:nth-child(3n+1) {
|
||||
img {
|
||||
height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n+2) {
|
||||
img {
|
||||
height: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3n) {
|
||||
img {
|
||||
height: 400px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 967 B |
@ -0,0 +1,64 @@
|
||||
import { throttle, debounce } from 'throttle-debounce'
|
||||
|
||||
/**
|
||||
* Tiny Masonry
|
||||
*
|
||||
* @author Björn Hase
|
||||
* @license http://opensource.org/licenses/MIT The MIT License
|
||||
* @link https://gitea.node001.net/tiny-components/masonry
|
||||
*
|
||||
*/
|
||||
|
||||
class Masonry {
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
constructor() {
|
||||
|
||||
// getting elements
|
||||
this.elements = document.querySelectorAll('.tiny-masonry__item-inner')
|
||||
this.container = document.querySelector('.tiny-masonry')
|
||||
|
||||
this.calculate()
|
||||
|
||||
window.addEventListener('resize', throttle(300, () => {
|
||||
this.calculate()
|
||||
}), false)
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
*
|
||||
*/
|
||||
calculate() {
|
||||
|
||||
// getting number of columns
|
||||
this.columns = Math.ceil(this.container.offsetWidth / this.elements[0].parentElement.offsetWidth) - 1
|
||||
|
||||
// reset margin-top
|
||||
for (let i = 0; i < this.elements.length; i++) {
|
||||
this.elements[i].parentElement.style.marginTop = '0px'
|
||||
}
|
||||
|
||||
for (let i = 0; i < this.elements.length; i++) {
|
||||
|
||||
// adding each parent element in column
|
||||
if (this.elements[i + this.columns]) {
|
||||
|
||||
let offset = 0
|
||||
|
||||
// if style was already setup adding to offset
|
||||
if (this.elements[i] && this.elements[i].parentElement.style.marginTop) {
|
||||
offset += parseInt(this.elements[i].parentElement.style.marginTop)
|
||||
}
|
||||
|
||||
// setting margin top
|
||||
this.elements[i + this.columns].parentElement.style.marginTop = this.elements[i].offsetHeight + parseInt(offset) + 'px'
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Masonry
|
||||
@ -0,0 +1,6 @@
|
||||
.tiny-masonry {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
|
||||
grid-auto-rows: 0;
|
||||
grid-gap: 20px;
|
||||
}
|
||||
@ -0,0 +1,84 @@
|
||||
const mix = require('laravel-mix')
|
||||
const path = require('path')
|
||||
|
||||
require('laravel-mix-purgecss')
|
||||
|
||||
// plugins
|
||||
const SvgSpritemapPlugin = require('svg-spritemap-webpack-plugin')
|
||||
|
||||
/*
|
||||
|--------------------------------------------------------------------------
|
||||
| Mix Asset Management
|
||||
|--------------------------------------------------------------------------
|
||||
|
|
||||
| Mix provides a clean, fluent API for defining some Webpack build steps
|
||||
| for your Laravel applications. By default, we are compiling the CSS
|
||||
| file for the application as well as bundling up all the JS files.
|
||||
|
|
||||
*/
|
||||
|
||||
|
||||
mix.webpackConfig({
|
||||
module: {
|
||||
rules: [{
|
||||
test: /\.riot$/,
|
||||
use: [{
|
||||
loader: '@riotjs/webpack-loader',
|
||||
options: {
|
||||
hot: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
]},
|
||||
plugins: [
|
||||
new SvgSpritemapPlugin([
|
||||
'node_modules/@tiny-components/plain-ui/src/icons/mono-icons/svg/*.svg',
|
||||
'src/icons/brands/*.svg'
|
||||
], {
|
||||
output: {
|
||||
filename: 'symbol-defs.svg',
|
||||
chunk: {
|
||||
keep: true
|
||||
},
|
||||
svgo: {
|
||||
plugins: [{
|
||||
name: 'convertStyleToAttrs',
|
||||
active: true
|
||||
},{
|
||||
name: 'removeStyleElement',
|
||||
active: true
|
||||
}, {
|
||||
name: 'removeAttrs',
|
||||
params: {
|
||||
attrs: 'fill'
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
sprite: {
|
||||
prefix: 'icon-'
|
||||
}
|
||||
})
|
||||
]
|
||||
})
|
||||
|
||||
mix
|
||||
.setPublicPath('./example')
|
||||
.js('src/example.js', 'example')
|
||||
.sass('src/example.scss', 'example')
|
||||
.purgeCss({
|
||||
extend: {
|
||||
content: [
|
||||
path.join(__dirname, 'src/**.riot'),
|
||||
path.join(__dirname, 'src/**.js'),
|
||||
path.join(__dirname, 'example/index.html')
|
||||
]
|
||||
}
|
||||
})
|
||||
.options({
|
||||
terser: {
|
||||
extractComments: false,
|
||||
},
|
||||
processCssUrls: false
|
||||
})
|
||||
.copyDirectory('node_modules/@tiny-components/plain-ui/src/fonts/IBM*', 'example')
|
||||
Loading…
Reference in new issue