masonry-simple 0.0.1 → 0.0.2
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 +10 -0
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/index.module.js +1 -1
- package/dist/index.module.js.map +1 -1
- package/package.json +1 -1
- package/src/index.js +1 -1
package/README.md
CHANGED
|
@@ -13,6 +13,16 @@
|
|
|
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'
|
package/dist/index.js
CHANGED
|
@@ -23,7 +23,7 @@ class $4fa36e821943b400$export$2e2bcd8739ae039 {
|
|
|
23
23
|
this.resizeObserver.unobserve(this.grid);
|
|
24
24
|
});
|
|
25
25
|
this.grid.style.contain = "layout";
|
|
26
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this),
|
|
26
|
+
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), 10);
|
|
27
27
|
}
|
|
28
28
|
resizeItem(item) {
|
|
29
29
|
const rowHeight = 1;
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";;;;;;;;;;AAAe;IACd,YAAY,SAAS,CAAE;QACtB,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG;eAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;SAAC;QACxC,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM;YAC9C,IAAI,CAAC,cAAc;QACpB;QACA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QAErC,OAAO,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QAC7C,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;QAC3E,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;QAC7B,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;QACJ,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(container) {\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = [...this.grid.children]\r\n\t\tthis.resizeObserver = new ResizeObserver(() => {\r\n\t\t\tthis.resizeAllItems()\r\n\t\t})\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\twindow.onload = this.resizeAllItems.bind(this)\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),
|
|
1
|
+
{"mappings":";;;;;;;;;;AAAe;IACd,YAAY,SAAS,CAAE;QACtB,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG;eAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;SAAC;QACxC,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM;YAC9C,IAAI,CAAC,cAAc;QACpB;QACA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QAErC,OAAO,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QAC7C,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;QAC3E,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;QAC7B,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;QACJ,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(container) {\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = [...this.grid.children]\r\n\t\tthis.resizeObserver = new ResizeObserver(() => {\r\n\t\t\tthis.resizeAllItems()\r\n\t\t})\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\twindow.onload = this.resizeAllItems.bind(this)\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), 10)\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\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\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\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
|
@@ -13,7 +13,7 @@ class $cf838c15c8b009ba$export$2e2bcd8739ae039 {
|
|
|
13
13
|
this.resizeObserver.unobserve(this.grid);
|
|
14
14
|
});
|
|
15
15
|
this.grid.style.contain = "layout";
|
|
16
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this),
|
|
16
|
+
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), 10);
|
|
17
17
|
}
|
|
18
18
|
resizeItem(item) {
|
|
19
19
|
const rowHeight = 1;
|
package/dist/index.module.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"AAAe;IACd,YAAY,SAAS,CAAE;QACtB,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG;eAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;SAAC;QACxC,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM;YAC9C,IAAI,CAAC,cAAc;QACpB;QACA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QAErC,OAAO,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QAC7C,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;QAC3E,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;QAC7B,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;QACJ,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(container) {\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = [...this.grid.children]\r\n\t\tthis.resizeObserver = new ResizeObserver(() => {\r\n\t\t\tthis.resizeAllItems()\r\n\t\t})\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\twindow.onload = this.resizeAllItems.bind(this)\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),
|
|
1
|
+
{"mappings":"AAAe;IACd,YAAY,SAAS,CAAE;QACtB,IAAI,CAAC,IAAI,GAAG,qBAAqB,cAAc,YAAY,SAAS,aAAa,CAAC,UAAU;QAC5F,IAAI,CAAC,SAAS,GAAG;eAAI,IAAI,CAAC,IAAI,CAAC,QAAQ;SAAC;QACxC,IAAI,CAAC,cAAc,GAAG,IAAI,eAAe,IAAM;YAC9C,IAAI,CAAC,cAAc;QACpB;QACA,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;QAErC,OAAO,MAAM,GAAG,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,IAAI;QAC7C,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;QAC3E,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;QAC7B,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;QACJ,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(container) {\r\n\t\tthis.grid = container instanceof HTMLElement ? container : document.querySelector(container)\r\n\t\tthis.gridItems = [...this.grid.children]\r\n\t\tthis.resizeObserver = new ResizeObserver(() => {\r\n\t\t\tthis.resizeAllItems()\r\n\t\t})\r\n\t\tthis.resizeObserver.observe(this.grid)\r\n\r\n\t\twindow.onload = this.resizeAllItems.bind(this)\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), 10)\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\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\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\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
|
@@ -14,7 +14,7 @@ export default class MasonrySimple {
|
|
|
14
14
|
|
|
15
15
|
this.grid.style.contain = 'layout'
|
|
16
16
|
|
|
17
|
-
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this),
|
|
17
|
+
this.resizeAllItems = this.debounce(this.resizeAllItems.bind(this), 10)
|
|
18
18
|
}
|
|
19
19
|
|
|
20
20
|
resizeItem(item) {
|