masonry-simple 1.4.2 → 1.5.0
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 +15 -9
- package/dist/index.js +17 -9
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +17 -9
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/index.js +40 -16
package/README.md
CHANGED
|
@@ -7,8 +7,8 @@
|
|
|
7
7
|
[](https://github.com/ux-ui-pro/masonry-simple)
|
|
8
8
|
[](https://www.npmjs.org/package/masonry-simple)
|
|
9
9
|
|
|
10
|
-
<sup>
|
|
11
|
-
<h3><a href="https://
|
|
10
|
+
<sup>600B gzipped</sup>
|
|
11
|
+
<h3><a href="https://l6nln6.csb.app/">Demo</a></h3>
|
|
12
12
|
|
|
13
13
|
</div>
|
|
14
14
|
<br>
|
|
@@ -27,9 +27,7 @@ import MasonrySimple from 'masonry-simple'
|
|
|
27
27
|
|
|
28
28
|
### Usage
|
|
29
29
|
```javascript
|
|
30
|
-
const
|
|
31
|
-
|
|
32
|
-
masonry.options({
|
|
30
|
+
const masonrySimple = new MasonrySimple({
|
|
33
31
|
container: '.masonry'
|
|
34
32
|
})
|
|
35
33
|
```
|
|
@@ -44,12 +42,20 @@ masonry.options({
|
|
|
44
42
|
...
|
|
45
43
|
</div>
|
|
46
44
|
```
|
|
45
|
+
```SCSS
|
|
46
|
+
.masonry {
|
|
47
|
+
display: grid;
|
|
48
|
+
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
49
|
+
grid-auto-flow: dense;
|
|
50
|
+
grid-gap: 10px;
|
|
51
|
+
}
|
|
52
|
+
```
|
|
47
53
|
<br>
|
|
48
54
|
|
|
49
|
-
###
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
55
|
+
### Destroy
|
|
56
|
+
```javascript
|
|
57
|
+
masonrySimple.destroy()
|
|
58
|
+
```
|
|
53
59
|
<br>
|
|
54
60
|
|
|
55
61
|
### License
|
package/dist/index.js
CHANGED
|
@@ -9,16 +9,15 @@ $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" } = options;
|
|
13
14
|
this.grid = null;
|
|
14
15
|
this.gridItems = [];
|
|
15
16
|
this.resizeObserver = null;
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
const { container: container = ".masonry" } = options;
|
|
19
|
-
this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
17
|
+
this.container = container;
|
|
18
|
+
this.grid = this.container instanceof HTMLElement ? this.container : document.querySelector(this.container);
|
|
20
19
|
if (!this.grid) return;
|
|
21
|
-
this.gridItems = Array.from(this.grid.children);
|
|
20
|
+
this.gridItems = this.grid.children.length ? Array.from(this.grid.children) : [];
|
|
22
21
|
this.grid.style.contain = "layout";
|
|
23
22
|
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
|
|
24
23
|
this.resizeObserver.observe(this.grid);
|
|
@@ -30,11 +29,20 @@ class $4fa36e821943b400$export$2e2bcd8739ae039 {
|
|
|
30
29
|
}
|
|
31
30
|
resizeAllItems() {
|
|
32
31
|
const rowHeight = 1;
|
|
33
|
-
const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"));
|
|
32
|
+
const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"), 10);
|
|
34
33
|
this.grid.style.alignItems = "start";
|
|
35
34
|
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
36
|
-
|
|
37
|
-
|
|
35
|
+
}
|
|
36
|
+
destroy() {
|
|
37
|
+
if (this.resizeObserver) {
|
|
38
|
+
this.resizeObserver.unobserve(this.grid);
|
|
39
|
+
this.resizeObserver = null;
|
|
40
|
+
}
|
|
41
|
+
this.grid.style.contain = "";
|
|
42
|
+
this.grid.style.alignItems = "";
|
|
43
|
+
this.gridItems.forEach((item)=>{
|
|
44
|
+
item.style.gridRowEnd = "";
|
|
45
|
+
});
|
|
38
46
|
}
|
|
39
47
|
}
|
|
40
48
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAe;IACd,
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aAAE,YAAY,YAAY,GAAG;QAEnC,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,OACJ,IAAI,CAAC,qBAAqB,cACvB,IAAI,CAAC,YACL,SAAS,cAAc,IAAI,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,SAAS,SACjC,MAAM,KAAK,IAAI,CAAC,KAAK,YACrB,EAAE;QACL,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eACzB,IAAI,CAAC,eAAe,KAAK,IAAI;QAE9B,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QAEjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KACpB,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAGlD,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SACd,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB,iBACpD;QAGD,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OACvB,IAAI,CAAC,WAAW,MAAM,WAAW;IAEnC;IAEA,UAAU;QACT,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACvB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACvB,KAAK,MAAM,aAAa;QACzB;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst { container = '.masonry' } = options\r\n\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t\tthis.container = container\r\n\t\tthis.grid =\r\n\t\t\tthis.container instanceof HTMLElement\r\n\t\t\t\t? this.container\r\n\t\t\t\t: document.querySelector(this.container)\r\n\r\n\t\tif (!this.grid) return\r\n\r\n\t\tthis.gridItems = this.grid.children.length\r\n\t\t\t? Array.from(this.grid.children)\r\n\t\t\t: []\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(\r\n\t\t\tthis.resizeAllItems.bind(this)\r\n\t\t)\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil(\r\n\t\t\t(item.clientHeight + rowGap) / (rowHeight + rowGap)\r\n\t\t)\r\n\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(\r\n\t\t\twindow.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),\r\n\t\t\t10\r\n\t\t)\r\n\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach((item) =>\r\n\t\t\tthis.resizeItem(item, rowHeight, rowGap)\r\n\t\t)\r\n\t}\r\n\r\n\tdestroy() {\r\n\t\tif (this.resizeObserver) {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t\tthis.resizeObserver = null\r\n\t\t}\r\n\r\n\t\tthis.grid.style.contain = ''\r\n\t\tthis.grid.style.alignItems = ''\r\n\t\tthis.gridItems.forEach((item) => {\r\n\t\t\titem.style.gridRowEnd = ''\r\n\t\t})\r\n\t}\r\n}"],"names":[],"version":3,"file":"index.js.map"}
|
package/dist/index.module.js
CHANGED
|
@@ -1,14 +1,13 @@
|
|
|
1
1
|
class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
|
|
2
|
-
constructor(){
|
|
2
|
+
constructor(options = {}){
|
|
3
|
+
const { container: container = ".masonry" } = options;
|
|
3
4
|
this.grid = null;
|
|
4
5
|
this.gridItems = [];
|
|
5
6
|
this.resizeObserver = null;
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
const { container: container = ".masonry" } = options;
|
|
9
|
-
this.grid = container instanceof HTMLElement ? container : document.querySelector(container);
|
|
7
|
+
this.container = container;
|
|
8
|
+
this.grid = this.container instanceof HTMLElement ? this.container : document.querySelector(this.container);
|
|
10
9
|
if (!this.grid) return;
|
|
11
|
-
this.gridItems = Array.from(this.grid.children);
|
|
10
|
+
this.gridItems = this.grid.children.length ? Array.from(this.grid.children) : [];
|
|
12
11
|
this.grid.style.contain = "layout";
|
|
13
12
|
this.resizeObserver = new ResizeObserver(this.resizeAllItems.bind(this));
|
|
14
13
|
this.resizeObserver.observe(this.grid);
|
|
@@ -20,11 +19,20 @@ class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
|
|
|
20
19
|
}
|
|
21
20
|
resizeAllItems() {
|
|
22
21
|
const rowHeight = 1;
|
|
23
|
-
const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"));
|
|
22
|
+
const rowGap = parseInt(window.getComputedStyle(this.grid).getPropertyValue("grid-row-gap"), 10);
|
|
24
23
|
this.grid.style.alignItems = "start";
|
|
25
24
|
this.gridItems.forEach((item)=>this.resizeItem(item, rowHeight, rowGap));
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
}
|
|
26
|
+
destroy() {
|
|
27
|
+
if (this.resizeObserver) {
|
|
28
|
+
this.resizeObserver.unobserve(this.grid);
|
|
29
|
+
this.resizeObserver = null;
|
|
30
|
+
}
|
|
31
|
+
this.grid.style.contain = "";
|
|
32
|
+
this.grid.style.alignItems = "";
|
|
33
|
+
this.gridItems.forEach((item)=>{
|
|
34
|
+
item.style.gridRowEnd = "";
|
|
35
|
+
});
|
|
28
36
|
}
|
|
29
37
|
}
|
|
30
38
|
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAe;IACd,
|
|
1
|
+
{"mappings":"AAAe;IACd,YAAY,UAAU,CAAC,CAAC,CAAE;QACzB,MAAM,aAAE,YAAY,YAAY,GAAG;QAEnC,IAAI,CAAC,OAAO;QACZ,IAAI,CAAC,YAAY,EAAE;QACnB,IAAI,CAAC,iBAAiB;QACtB,IAAI,CAAC,YAAY;QACjB,IAAI,CAAC,OACJ,IAAI,CAAC,qBAAqB,cACvB,IAAI,CAAC,YACL,SAAS,cAAc,IAAI,CAAC;QAEhC,IAAI,CAAC,IAAI,CAAC,MAAM;QAEhB,IAAI,CAAC,YAAY,IAAI,CAAC,KAAK,SAAS,SACjC,MAAM,KAAK,IAAI,CAAC,KAAK,YACrB,EAAE;QACL,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,iBAAiB,IAAI,eACzB,IAAI,CAAC,eAAe,KAAK,IAAI;QAE9B,IAAI,CAAC,eAAe,QAAQ,IAAI,CAAC;QAEjC,IAAI,CAAC;IACN;IAEA,WAAW,IAAI,EAAE,SAAS,EAAE,MAAM,EAAE;QACnC,MAAM,UAAU,KAAK,KACpB,AAAC,CAAA,KAAK,eAAe,MAAK,IAAM,CAAA,YAAY,MAAK;QAGlD,KAAK,MAAM,aAAa,UAAU;IACnC;IAEA,iBAAiB;QAChB,MAAM,YAAY;QAClB,MAAM,SAAS,SACd,OAAO,iBAAiB,IAAI,CAAC,MAAM,iBAAiB,iBACpD;QAGD,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC,OACvB,IAAI,CAAC,WAAW,MAAM,WAAW;IAEnC;IAEA,UAAU;QACT,IAAI,IAAI,CAAC,gBAAgB;YACxB,IAAI,CAAC,eAAe,UAAU,IAAI,CAAC;YACnC,IAAI,CAAC,iBAAiB;QACvB;QAEA,IAAI,CAAC,KAAK,MAAM,UAAU;QAC1B,IAAI,CAAC,KAAK,MAAM,aAAa;QAC7B,IAAI,CAAC,UAAU,QAAQ,CAAC;YACvB,KAAK,MAAM,aAAa;QACzB;IACD;AACD","sources":["src/index.js"],"sourcesContent":["export default class MasonrySimple {\r\n\tconstructor(options = {}) {\r\n\t\tconst { container = '.masonry' } = options\r\n\r\n\t\tthis.grid = null\r\n\t\tthis.gridItems = []\r\n\t\tthis.resizeObserver = null\r\n\t\tthis.container = container\r\n\t\tthis.grid =\r\n\t\t\tthis.container instanceof HTMLElement\r\n\t\t\t\t? this.container\r\n\t\t\t\t: document.querySelector(this.container)\r\n\r\n\t\tif (!this.grid) return\r\n\r\n\t\tthis.gridItems = this.grid.children.length\r\n\t\t\t? Array.from(this.grid.children)\r\n\t\t\t: []\r\n\t\tthis.grid.style.contain = 'layout'\r\n\t\tthis.resizeObserver = new ResizeObserver(\r\n\t\t\tthis.resizeAllItems.bind(this)\r\n\t\t)\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\tthis.resizeAllItems()\r\n\t}\r\n\r\n\tresizeItem(item, rowHeight, rowGap) {\r\n\t\tconst rowSpan = Math.ceil(\r\n\t\t\t(item.clientHeight + rowGap) / (rowHeight + rowGap)\r\n\t\t)\r\n\r\n\t\titem.style.gridRowEnd = 'span ' + rowSpan\r\n\t}\r\n\r\n\tresizeAllItems() {\r\n\t\tconst rowHeight = 1\r\n\t\tconst rowGap = parseInt(\r\n\t\t\twindow.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),\r\n\t\t\t10\r\n\t\t)\r\n\r\n\t\tthis.grid.style.alignItems = 'start'\r\n\t\tthis.gridItems.forEach((item) =>\r\n\t\t\tthis.resizeItem(item, rowHeight, rowGap)\r\n\t\t)\r\n\t}\r\n\r\n\tdestroy() {\r\n\t\tif (this.resizeObserver) {\r\n\t\t\tthis.resizeObserver.unobserve(this.grid)\r\n\t\t\tthis.resizeObserver = null\r\n\t\t}\r\n\r\n\t\tthis.grid.style.contain = ''\r\n\t\tthis.grid.style.alignItems = ''\r\n\t\tthis.gridItems.forEach((item) => {\r\n\t\t\titem.style.gridRowEnd = ''\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,37 +1,61 @@
|
|
|
1
1
|
export default class MasonrySimple {
|
|
2
|
-
constructor() {
|
|
2
|
+
constructor(options = {}) {
|
|
3
|
+
const { container = '.masonry' } = options
|
|
4
|
+
|
|
3
5
|
this.grid = null
|
|
4
6
|
this.gridItems = []
|
|
5
7
|
this.resizeObserver = null
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
} = options
|
|
12
|
-
|
|
13
|
-
this.grid = container instanceof HTMLElement ? container : document.querySelector(container)
|
|
8
|
+
this.container = container
|
|
9
|
+
this.grid =
|
|
10
|
+
this.container instanceof HTMLElement
|
|
11
|
+
? this.container
|
|
12
|
+
: document.querySelector(this.container)
|
|
14
13
|
|
|
15
14
|
if (!this.grid) return
|
|
16
15
|
|
|
17
|
-
this.gridItems =
|
|
16
|
+
this.gridItems = this.grid.children.length
|
|
17
|
+
? Array.from(this.grid.children)
|
|
18
|
+
: []
|
|
18
19
|
this.grid.style.contain = 'layout'
|
|
19
|
-
this.resizeObserver = new ResizeObserver(
|
|
20
|
+
this.resizeObserver = new ResizeObserver(
|
|
21
|
+
this.resizeAllItems.bind(this)
|
|
22
|
+
)
|
|
20
23
|
this.resizeObserver.observe(this.grid)
|
|
24
|
+
|
|
21
25
|
this.resizeAllItems()
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
resizeItem(item, rowHeight, rowGap) {
|
|
25
|
-
const rowSpan = Math.ceil(
|
|
29
|
+
const rowSpan = Math.ceil(
|
|
30
|
+
(item.clientHeight + rowGap) / (rowHeight + rowGap)
|
|
31
|
+
)
|
|
32
|
+
|
|
26
33
|
item.style.gridRowEnd = 'span ' + rowSpan
|
|
27
34
|
}
|
|
28
35
|
|
|
29
36
|
resizeAllItems() {
|
|
30
37
|
const rowHeight = 1
|
|
31
|
-
const rowGap = parseInt(
|
|
38
|
+
const rowGap = parseInt(
|
|
39
|
+
window.getComputedStyle(this.grid).getPropertyValue('grid-row-gap'),
|
|
40
|
+
10
|
|
41
|
+
)
|
|
42
|
+
|
|
32
43
|
this.grid.style.alignItems = 'start'
|
|
33
|
-
this.gridItems.forEach(item =>
|
|
34
|
-
|
|
35
|
-
|
|
44
|
+
this.gridItems.forEach((item) =>
|
|
45
|
+
this.resizeItem(item, rowHeight, rowGap)
|
|
46
|
+
)
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
destroy() {
|
|
50
|
+
if (this.resizeObserver) {
|
|
51
|
+
this.resizeObserver.unobserve(this.grid)
|
|
52
|
+
this.resizeObserver = null
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
this.grid.style.contain = ''
|
|
56
|
+
this.grid.style.alignItems = ''
|
|
57
|
+
this.gridItems.forEach((item) => {
|
|
58
|
+
item.style.gridRowEnd = ''
|
|
59
|
+
})
|
|
36
60
|
}
|
|
37
61
|
}
|