masonry-simple 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +25 -5
- package/dist/index.js +3 -2
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +3 -2
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/index.js +13 -2
package/README.md
CHANGED
|
@@ -7,12 +7,22 @@
|
|
|
7
7
|
[](https://github.com/ux-ui-pro/masonry-simple)
|
|
8
8
|
[](https://www.npmjs.org/package/masonry-simple)
|
|
9
9
|
|
|
10
|
-
<sup><a href="https://bundlephobia.com/package/masonry-simple">
|
|
10
|
+
<sup><a href="https://bundlephobia.com/package/masonry-simple">1kB gzipped</a></sup>
|
|
11
11
|
<h3><a href="https://codepen.io/ux-ui/pen/poxGEqX">Demo</a></h3>
|
|
12
12
|
|
|
13
13
|
</div>
|
|
14
14
|
<br>
|
|
15
15
|
|
|
16
|
+
### Installation
|
|
17
|
+
```javascript
|
|
18
|
+
$ yarn add masonry-simple
|
|
19
|
+
```
|
|
20
|
+
<sup>or</sup>
|
|
21
|
+
```javascript
|
|
22
|
+
$ npm i masonry-simple
|
|
23
|
+
```
|
|
24
|
+
<br>
|
|
25
|
+
|
|
16
26
|
### Import
|
|
17
27
|
```javascript
|
|
18
28
|
import MasonrySimple from 'masonry-simple'
|
|
@@ -21,14 +31,17 @@ import MasonrySimple from 'masonry-simple'
|
|
|
21
31
|
|
|
22
32
|
### Usage
|
|
23
33
|
```javascript
|
|
24
|
-
|
|
34
|
+
new MasonrySimple({
|
|
35
|
+
container: '.masonry',
|
|
36
|
+
debounce: 200
|
|
37
|
+
})
|
|
25
38
|
```
|
|
26
39
|
```HTML
|
|
27
|
-
<div class="
|
|
28
|
-
<div class="
|
|
40
|
+
<div class="masonry">
|
|
41
|
+
<div class="masonry__item">
|
|
29
42
|
...
|
|
30
43
|
</div>
|
|
31
|
-
<div class="
|
|
44
|
+
<div class="masonry__item">
|
|
32
45
|
...
|
|
33
46
|
</div>
|
|
34
47
|
...
|
|
@@ -36,5 +49,12 @@ const masonry = new MasonrySimple('.grid')
|
|
|
36
49
|
```
|
|
37
50
|
<br>
|
|
38
51
|
|
|
52
|
+
### Settings
|
|
53
|
+
| Arg | Default | Description |
|
|
54
|
+
| --- | --- | --- |
|
|
55
|
+
| `container` | `'.masonry'` | The HTML class of the element inside which the grid elements will be located. |
|
|
56
|
+
| `debounce` | `200` | Sets the delay when resizing the browser window. `0` — disables the delay and allows the grid to rebuild faster. |
|
|
57
|
+
<br>
|
|
58
|
+
|
|
39
59
|
### License
|
|
40
60
|
<sup>masonry-simple is released under MIT license</sup>
|
package/dist/index.js
CHANGED
|
@@ -9,7 +9,8 @@ $parcel$defineInteropFlag(module.exports);
|
|
|
9
9
|
|
|
10
10
|
$parcel$export(module.exports, "default", () => $4fa36e821943b400$export$2e2bcd8739ae039);
|
|
11
11
|
class $4fa36e821943b400$export$2e2bcd8739ae039 {
|
|
12
|
-
constructor(
|
|
12
|
+
constructor(options = {}){
|
|
13
|
+
const { container: container = ".masonry" , debounce: debounce = 200 } = options;
|
|
13
14
|
this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
14
15
|
this.gridItems = [
|
|
15
16
|
...this.grid.children
|
|
@@ -23,7 +24,7 @@ class $4fa36e821943b400$export$2e2bcd8739ae039 {
|
|
|
23
24
|
this.resizeObserver.unobserve(this.grid);
|
|
24
25
|
});
|
|
25
26
|
this.grid.style.contain = "layout";
|
|
26
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this),
|
|
27
|
+
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), debounce);
|
|
27
28
|
}
|
|
28
29
|
resizeItem(item) {
|
|
29
30
|
const rowHeight = 1;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAe;IACd,YAAY,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aACL,YAAY,uBACZ,WAAW,MACX,GAAG;QAEJ,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG;eAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;SAAC;QAExC,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM;YAC9C,IAAI,CAAC,cAAc;QACpB;QAEA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QAErC,OAAO,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QAE7C,OAAO,gBAAgB,CAAC,gBAAgB,IAAM;YAC7C,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACxC;QAEA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG;QAE1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,GAAG;IACrE;IAEA,WAAW,IAAI,EAAE;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SAAS,OAAO,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC;QAC5E,MAAM,UAAU,KAAK,IAAI,CAAC,AAAC,CAAA,KAAK,YAAY,GAAG,MAAK,IAAM,CAAA,YAAY,MAAK;QAE3E,KAAK,KAAK,CAAC,UAAU,GAAG,UAAU;IACnC;IAEA,iBAAiB;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAE7B,OAAO,qBAAqB,CAAC,IAAM;YAClC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC;QAChD;IACD;IAEA,SAAS,IAAI,EAAE,IAAI,EAAE;QACpB,IAAI;QAEJ,OAAO,SAAS,iBAAiB,GAAG,IAAI,EAAE;YACzC,MAAM,QAAQ,IAAM;gBACnB,aAAa;gBACb,QAAQ;YACT;YACA,aAAa;YACb,UAAU,WAAW,OAAO;QAC7B;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst {\r\n\t\t\tcontainer = '.masonry',\r\n\t\t\tdebounce = 200\r\n\t\t} = options\r\n\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = [...this.grid.children]\r\n\r\n\t\tthis.resizeObserver = new ResizeObserver(() => {\r\n\t\t\tthis.resizeAllItems()\r\n\t\t})\r\n\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\twindow.onload = this.resizeAllItems.bind(this)\r\n\r\n\t\twindow.addEventListener('beforeunload', () => {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t})\r\n\r\n\t\tthis.grid.style.contain = 'layout'\r\n\r\n\t\tthis.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), debounce)\r\n\t}\r\n\r\n\tresizeItem(item) {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'))\r\n\t\tconst rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap))\r\n\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach(item => this.resizeItem(item))\r\n\t\tthis.grid.style.alignItems = 'stretch'\r\n\r\n\t\twindow.requestAnimationFrame(() => {\r\n\t\t\tthis.gridItems.forEach(item => this.resizeItem(item))\r\n\t\t})\r\n\t}\r\n\r\n\tdebounce(func, wait) {\r\n\t\tlet timeout\r\n\r\n\t\treturn function executedFunction(...args) {\r\n\t\t\tconst later = () => {\r\n\t\t\t\tclearTimeout(timeout)\r\n\t\t\t\tfunc(...args)\r\n\t\t\t}\r\n\t\t\tclearTimeout(timeout)\r\n\t\t\ttimeout = setTimeout(later, wait)\r\n\t\t}\r\n\t}\r\n}"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
|
|
2
|
-
constructor(
|
|
2
|
+
constructor(options = {}){
|
|
3
|
+
const { container: container = ".masonry" , debounce: debounce = 200 } = options;
|
|
3
4
|
this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
4
5
|
this.gridItems = [
|
|
5
6
|
...this.grid.children
|
|
@@ -13,7 +14,7 @@ class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
|
|
|
13
14
|
this.resizeObserver.unobserve(this.grid);
|
|
14
15
|
});
|
|
15
16
|
this.grid.style.contain = "layout";
|
|
16
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this),
|
|
17
|
+
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), debounce);
|
|
17
18
|
}
|
|
18
19
|
resizeItem(item) {
|
|
19
20
|
const rowHeight = 1;
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAe;IACd,YAAY,
|
|
1
|
+
{"mappings":"AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aACL,YAAY,uBACZ,WAAW,MACX,GAAG;QAEJ,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG;eAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;SAAC;QAExC,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM;YAC9C,IAAI,CAAC,cAAc;QACpB;QAEA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QAErC,OAAO,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QAE7C,OAAO,gBAAgB,CAAC,gBAAgB,IAAM;YAC7C,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;QACxC;QAEA,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG;QAE1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI,GAAG;IACrE;IAEA,WAAW,IAAI,EAAE;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SAAS,OAAO,gBAAgB,CAAC,IAAI,CAAC,IAAI,EAAE,gBAAgB,CAAC;QAC5E,MAAM,UAAU,KAAK,IAAI,CAAC,AAAC,CAAA,KAAK,YAAY,GAAG,MAAK,IAAM,CAAA,YAAY,MAAK;QAE3E,KAAK,KAAK,CAAC,UAAU,GAAG,UAAU;IACnC;IAEA,iBAAiB;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAC7B,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC;QAC/C,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,GAAG;QAE7B,OAAO,qBAAqB,CAAC,IAAM;YAClC,IAAI,CAAC,SAAS,CAAC,OAAO,CAAC,CAAA,OAAQ,IAAI,CAAC,UAAU,CAAC;QAChD;IACD;IAEA,SAAS,IAAI,EAAE,IAAI,EAAE;QACpB,IAAI;QAEJ,OAAO,SAAS,iBAAiB,GAAG,IAAI,EAAE;YACzC,MAAM,QAAQ,IAAM;gBACnB,aAAa;gBACb,QAAQ;YACT;YACA,aAAa;YACb,UAAU,WAAW,OAAO;QAC7B;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst {\r\n\t\t\tcontainer = '.masonry',\r\n\t\t\tdebounce = 200\r\n\t\t} = options\r\n\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = [...this.grid.children]\r\n\r\n\t\tthis.resizeObserver = new ResizeObserver(() => {\r\n\t\t\tthis.resizeAllItems()\r\n\t\t})\r\n\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\twindow.onload = this.resizeAllItems.bind(this)\r\n\r\n\t\twindow.addEventListener('beforeunload', () => {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t})\r\n\r\n\t\tthis.grid.style.contain = 'layout'\r\n\r\n\t\tthis.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), debounce)\r\n\t}\r\n\r\n\tresizeItem(item) {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'))\r\n\t\tconst rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap))\r\n\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach(item => this.resizeItem(item))\r\n\t\tthis.grid.style.alignItems = 'stretch'\r\n\r\n\t\twindow.requestAnimationFrame(() => {\r\n\t\t\tthis.gridItems.forEach(item => this.resizeItem(item))\r\n\t\t})\r\n\t}\r\n\r\n\tdebounce(func, wait) {\r\n\t\tlet timeout\r\n\r\n\t\treturn function executedFunction(...args) {\r\n\t\t\tconst later = () => {\r\n\t\t\t\tclearTimeout(timeout)\r\n\t\t\t\tfunc(...args)\r\n\t\t\t}\r\n\t\t\tclearTimeout(timeout)\r\n\t\t\ttimeout = setTimeout(later, wait)\r\n\t\t}\r\n\t}\r\n}"],"names":[],"version":3,"file":"index.module.js.map"}
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -1,26 +1,35 @@
|
|
|
1
1
|
export default class MasonrySimple {
|
|
2
|
-
constructor(
|
|
2
|
+
constructor(options = {}) {
|
|
3
|
+
const {
|
|
4
|
+
container = '.masonry',
|
|
5
|
+
debounce = 200
|
|
6
|
+
} = options
|
|
7
|
+
|
|
3
8
|
this.grid = container instanceof HTMLElement ? container : document.querySelector(container)
|
|
4
9
|
this.gridItems = [...this.grid.children]
|
|
10
|
+
|
|
5
11
|
this.resizeObserver = new ResizeObserver(() => {
|
|
6
12
|
this.resizeAllItems()
|
|
7
13
|
})
|
|
14
|
+
|
|
8
15
|
this.resizeObserver.observe(this.grid)
|
|
9
16
|
|
|
10
17
|
window.onload = this.resizeAllItems.bind(this)
|
|
18
|
+
|
|
11
19
|
window.addEventListener('beforeunload', () => {
|
|
12
20
|
this.resizeObserver.unobserve(this.grid)
|
|
13
21
|
})
|
|
14
22
|
|
|
15
23
|
this.grid.style.contain = 'layout'
|
|
16
24
|
|
|
17
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this),
|
|
25
|
+
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), debounce)
|
|
18
26
|
}
|
|
19
27
|
|
|
20
28
|
resizeItem(item) {
|
|
21
29
|
const rowHeight = 1
|
|
22
30
|
const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'))
|
|
23
31
|
const rowSpan = Math.ceil((item.clientHeight + rowGap) / (rowHeight + rowGap))
|
|
32
|
+
|
|
24
33
|
item.style.gridRowEnd = 'span ' + rowSpan
|
|
25
34
|
}
|
|
26
35
|
|
|
@@ -28,6 +37,7 @@ export default class MasonrySimple {
|
|
|
28
37
|
this.grid.style.alignItems = 'start'
|
|
29
38
|
this.gridItems.forEach(item => this.resizeItem(item))
|
|
30
39
|
this.grid.style.alignItems = 'stretch'
|
|
40
|
+
|
|
31
41
|
window.requestAnimationFrame(() => {
|
|
32
42
|
this.gridItems.forEach(item => this.resizeItem(item))
|
|
33
43
|
})
|
|
@@ -35,6 +45,7 @@ export default class MasonrySimple {
|
|
|
35
45
|
|
|
36
46
|
debounce(func, wait) {
|
|
37
47
|
let timeout
|
|
48
|
+
|
|
38
49
|
return function executedFunction(...args) {
|
|
39
50
|
const later = () => {
|
|
40
51
|
clearTimeout(timeout)
|