Permalink
Browse files

Support HTMLElement as container config

  • Loading branch information...
Kiyozz committed Dec 25, 2018
1 parent 4690556 commit 02c1767b07e8c01badaa0301b0f746acfb81e2d8
Showing with 86 additions and 159 deletions.
  1. +5 −5 README.md
  2. +7 −2 dist/magic-grid.cjs.js
  3. +7 −2 dist/magic-grid.esm.js
  4. +1 −1 dist/magic-grid.min.js
  5. +1 −1 index.d.ts
  6. +0 −146 package-lock.json
  7. +7 −2 src/index.js
  8. +58 −0 test/grid-htmlelement.html
@@ -78,7 +78,7 @@ magicGrid.listen();
If your container doesn't have any dynamically loaded content i.e., all its child elements are always in the DOM, you should initialize the grid this way:
```javascript
let magicGrid = new MagicGrid({
container: "#container", // Required. Can be class or id selector
container: "#container", // Required. Can be class, id selector or HTMLElement
static: true, // Required for static content
animate: true, // Optional
});
@@ -90,7 +90,7 @@ magicGrid.listen();
If the container relies on data from an api, or experiences a delay, for whatever reason, before it can render its content in the DOM, you need to let the grid know the number of items to expect:
```javascript
let magicGrid = new MagicGrid({
container: "#container", // Required. Can be class or id selector
container: "#container", // Required. Can be class, id selector or HTMLElement
items: 20, // For a grid with 20 items. Required for dynamic content
animate: true, // Optional
});
@@ -106,7 +106,7 @@ magicGrid.listen();
The MagicGrid constructor. Initializes the grid with a configuration object.
```javascript
let magicGrid = new MagicGrid({
container: "#container", // Required. Class or id of the container.
container: "#container", // Required. Can be class or id of the container or HTMLElement object.
static: false, // Required for static content. Default: false.
items: 30, // Required for dynamic content. Initial number of items in the container.
gutter: 30, // Optional. Space between items. Default: 25(px)
@@ -122,7 +122,7 @@ let magicGrid = new MagicGrid({
Positions the items and listens for changes to the window size. All items are repositioned whenever the window is resized.
```javascript
let magicGrid = new MagicGrid({
container: "#container", // Required. Can be class or id selector
container: "#container", // Required. Can be class, id selector or HTMLElement
static: true, // Required for static content
animate: true, // Optional
});
@@ -137,7 +137,7 @@ This function is useful in cases where you have to manually trigger a reposition

```javascript
let magicGrid = new MagicGrid({
container: "#container", // Required. Can be class or id selector
container: "#container", // Required. Can be class, id selector or HTMLElement
items: 30, // Required for dynamic content.
animate: true, // Optional
});
@@ -56,8 +56,13 @@ var getMin = function (cols) {
var MagicGrid = function MagicGrid (config) {
checkParams(config);

this.containerClass = config.container;
this.container = document.querySelector(config.container);
if (config.container instanceof HTMLElement) {
this.container = config.container;
this.containerClass = config.container.className;
} else {
this.containerClass = config.container;
this.container = document.querySelector(config.container);
}
this.items = this.container.children;
this.static = config.static || false;
this.size = config.items;
@@ -54,8 +54,13 @@ var getMin = function (cols) {
var MagicGrid = function MagicGrid (config) {
checkParams(config);

this.containerClass = config.container;
this.container = document.querySelector(config.container);
if (config.container instanceof HTMLElement) {
this.container = config.container;
this.containerClass = config.container.className;
} else {
this.containerClass = config.container;
this.container = document.querySelector(config.container);
}
this.items = this.container.children;
this.static = config.static || false;
this.size = config.items;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -9,7 +9,7 @@
*/
export interface MagicGridProps{
containerClass?: string;
container?: string;
container?: string | HTMLElement;
static?: boolean;
items?: number;
gutter?: number;

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
@@ -22,8 +22,13 @@ class MagicGrid {
constructor (config) {
checkParams(config);

this.containerClass = config.container;
this.container = document.querySelector(config.container);
if (config.container instanceof HTMLElement) {
this.container = config.container;
this.containerClass = config.container.className;
} else {
this.containerClass = config.container;
this.container = document.querySelector(config.container);
}
this.items = this.container.children;
this.static = config.static || false;
this.size = config.items;
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">
<title>Magic Grid</title>

<style>
.container div {
width: 280px;
height: 500px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
border-radius: 8px;
}
.container .item1 { height: 200px; }
.container .item4 { height: 800px; }
.container .item6 { height: 600px; }
.container .item11 { height: 400px; }
</style>

</head>
<body>

<div class="container">
<div class="item1">1</div>
<div class="item2">2</div>
<div class="item3">3</div>
<div class="item4">4</div>
<div class="item5">5</div>
<div class="item6">6</div>
<div class="item7">7</div>
<div class="item8">8</div>
<div class="item9">9</div>
<div class="item10">10</div>
<div class="item11">11</div>
<div class="item12">12</div>
<div class="item13">13</div>
</div>

<script src="../dist/magic-grid.min.js"></script>
<script>
let magicGrid = new MagicGrid({
container: document.querySelector('.container'),
animate: true,
gutter: 30,
static: true,
useMin: true
});
magicGrid.listen();
</script>

</body>
</html>

0 comments on commit 02c1767

Please sign in to comment.