Add ability to select items via config

README.md

@@ -1,5 +1,6 @@
 [![MIT License](https://img.shields.io/npm/l/magic-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/magic-grid)
 [![Downloads](https://img.shields.io/npm/dt/magic-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/magic-grid)
+
 <!--[![Version](https://img.shields.io/npm/v/magic-grid.svg?style=for-the-badge)](https://www.npmjs.com/package/magic-grid)-->
 
 # Magic Grid [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Magic%20Grid%20-%20A%20simple,%20lightweight%20Javascript%20library%20for%20dynamic%20grid%20layouts.&url=https://github.com/e-oj/Magic-Grid&hashtags=MagicGrid,GridLayout,JS)
@@ -26,12 +27,13 @@ Check out <b>[CSS Grid AMA's issue #19](https://github.com/rachelandrew/cssgrid-
 
 ### Ports
 
-| Repo | Author |
-|:--------|:-------|
-| [Vue-Magic-Grid](https://github.com/imlinus/Vue-Magic-Grid) | [@imlinus](https://github.com/imlinus) |
-| [Magic-Grid-React](https://github.com/IniZio/Magic-Grid-React) | [@IniZio](https://github.com/IniZio) |
+| Repo                                                           | Author                                 |
+| :------------------------------------------------------------- | :------------------------------------- |
+| [Vue-Magic-Grid](https://github.com/imlinus/Vue-Magic-Grid)    | [@imlinus](https://github.com/imlinus) |
+| [Magic-Grid-React](https://github.com/IniZio/Magic-Grid-React) | [@IniZio](https://github.com/IniZio)   |
 
 ### Getting Started
+
 #### Step 1
 
 Get Magic Grid via NPM:
@@ -41,6 +43,7 @@ npm install magic-grid
 ```
 
 Or CDN
+
 ```html
 <script src="https://unpkg.com/magic-grid/dist/magic-grid.cjs.js"></script>
 
@@ -53,11 +56,12 @@ Or CDN
 Import Magic Grid:
 
 ```javascript
-import MagicGrid from "magic-grid"
+import MagicGrid from "magic-grid";
 
 // or
 let MagicGrid = require("magic-grid");
 ```
+
 <br>
 
 You can also pull Magic Grid directly into your html
@@ -80,8 +84,11 @@ magicGrid.listen();
 ```
 
 ### Usage
+
 #### Static content:
+
 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 a class, id, or an HTMLElement.
@@ -93,11 +100,13 @@ magicGrid.listen();
 ```
 
 #### Dynamic content:
+
 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 a class, id, or an HTMLElement.
-  items: 20, // For a grid with 20 items. Required for dynamic content.
+  size: 20, // For a grid with 20 items. Required for dynamic content.
   animate: true, // Optional.
 });
 
@@ -107,27 +116,32 @@ magicGrid.listen();
 ### API
 
 #### MagicGrid(config)
- > config (required): Configuration object
+
+> config (required): Configuration object
 
 The MagicGrid constructor. Initializes the grid with a configuration object.
+
 ```javascript
 let magicGrid = new MagicGrid({
   container: "#container", // Required. Can be a class, id, or an HTMLElement
   static: false, // Required for static content. Default: false.
-  items: 30, // Required for dynamic content. Initial number of items in the container.
+  size: 30, // Required for dynamic content. Initial number of items in the container.
+  items: nodes, // Optional. Useful if items are not direct descendants of container. Default: this.container.children
   gutter: 30, // Optional. Space between items. Default: 25(px).
   maxColumns: 5, // Optional. Maximum number of columns. Default: Infinite.
   useMin: true, // Optional. Prioritize shorter columns when positioning items? Default: false.
   useTransform: true, // Optional. Position items using CSS transform? Default: True.
   animate: true, // Optional. Animate item positioning? Default: false.
-  center: true, //Optional. Center the grid items? Default: true. 
+  center: true, //Optional. Center the grid items? Default: true.
 });
 ```
 
 ---
 
 #### .listen()
+
 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 a class, id, or an HTMLElement
@@ -141,12 +155,13 @@ magicGrid.listen();
 ---
 
 #### .positionItems()
+
 This function is useful in cases where you have to manually trigger a repositioning; for instance, if a new element is added to the container.
 
 ```javascript
 let magicGrid = new MagicGrid({
   container: "#container", // Required. Can be a class, id, or an HTMLElement
-  items: 30, // Required for dynamic content.
+  size: 30, // Required for dynamic content.
   animate: true, // Optional
 });
 

dist/magic-grid.cjs.js

@@ -214,7 +214,7 @@ var checkParams = function checkParams(config) {
     config.gutter = DEFAULT_GUTTER;
   }
   if (!config.container) error("container");
-  if (!config.items && !config["static"]) error("items or static");
+  if (!config.items && !config.static) error("items or static");
 };
 
 /**
@@ -253,6 +253,7 @@ var getMin = function getMin(cols) {
 };
 
 var POSITIONING_COMPLETE_EVENT = "positionComplete";
+var REPOSITIONING_DELAY = 200;
 
 var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
   /**
@@ -262,6 +263,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
    * @param config - configuration object
    */
   function MagicGrid(config) {
+    var _config$items;
     var _this;
     _classCallCheck(this, MagicGrid);
     _this = _callSuper(this, MagicGrid);
@@ -273,8 +275,9 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
       _this.containerClass = config.container;
       _this.container = document.querySelector(config.container);
     }
-    _this["static"] = config["static"] || false;
-    _this.size = config.items;
+    _this.static = config.static || false;
+    _this.size = config.size;
+    _this.items = (_config$items = config.items) !== null && _config$items !== void 0 ? _config$items : _this.container.children;
     _this.gutter = config.gutter;
     _this.maxColumns = config.maxColumns || false;
     _this.useMin = config.useMin || false;
@@ -298,7 +301,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
     value: function initStyles() {
       if (!this.ready()) return;
       this.container.style.position = "relative";
-      var items = this.items();
+      var items = this.items;
       for (var i = 0; i < items.length; i++) {
         if (this.styledItems.has(items[i])) continue;
         var style = items[i].style;
@@ -310,18 +313,6 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
       }
     }
 
-    /**
-     * Gets a collection of all items in a grid.
-     *
-     * @return {HTMLCollection}
-     * @private
-     */
-  }, {
-    key: "items",
-    value: function items() {
-      return this.container.children;
-    }
-
     /**
      * Calculates the width of a column.
      *
@@ -331,7 +322,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "colWidth",
     value: function colWidth() {
-      return this.items()[0].getBoundingClientRect().width + this.gutter;
+      return this.items[0].getBoundingClientRect().width + this.gutter;
     }
 
     /**
@@ -400,7 +391,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
         wSpace = _this$setup.wSpace;
       var maxHeight = 0;
       var colWidth = this.colWidth();
-      var items = this.items();
+      var items = this.items;
       wSpace = this.center ? Math.floor(wSpace / 2) : 0;
       this.initStyles();
       for (var i = 0; i < items.length; i++) {
@@ -434,8 +425,8 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "ready",
     value: function ready() {
-      if (this["static"]) return true;
-      return this.items().length >= this.size;
+      if (this.static) return true;
+      return this.items.length >= this.size;
     }
 
     /**
@@ -466,7 +457,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
       this.resizeObserver = new ResizeObserver(function () {
         setTimeout(function () {
           _this3.positionItems();
-        }, 200);
+        }, REPOSITIONING_DELAY);
       });
       this.resizeObserver.observe(this.container);
     }
@@ -484,7 +475,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
         window.addEventListener("resize", function () {
           setTimeout(function () {
             _this4.positionItems();
-          }, 200);
+          }, REPOSITIONING_DELAY);
         });
         this.observeContainerResize();
         this.positionItems();

dist/magic-grid.esm.js

@@ -212,7 +212,7 @@ var checkParams = function checkParams(config) {
     config.gutter = DEFAULT_GUTTER;
   }
   if (!config.container) error("container");
-  if (!config.items && !config["static"]) error("items or static");
+  if (!config.items && !config.static) error("items or static");
 };
 
 /**
@@ -251,6 +251,7 @@ var getMin = function getMin(cols) {
 };
 
 var POSITIONING_COMPLETE_EVENT = "positionComplete";
+var REPOSITIONING_DELAY = 200;
 
 var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
   /**
@@ -260,6 +261,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
    * @param config - configuration object
    */
   function MagicGrid(config) {
+    var _config$items;
     var _this;
     _classCallCheck(this, MagicGrid);
     _this = _callSuper(this, MagicGrid);
@@ -271,8 +273,9 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
       _this.containerClass = config.container;
       _this.container = document.querySelector(config.container);
     }
-    _this["static"] = config["static"] || false;
-    _this.size = config.items;
+    _this.static = config.static || false;
+    _this.size = config.size;
+    _this.items = (_config$items = config.items) !== null && _config$items !== void 0 ? _config$items : _this.container.children;
     _this.gutter = config.gutter;
     _this.maxColumns = config.maxColumns || false;
     _this.useMin = config.useMin || false;
@@ -296,7 +299,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
     value: function initStyles() {
       if (!this.ready()) return;
       this.container.style.position = "relative";
-      var items = this.items();
+      var items = this.items;
       for (var i = 0; i < items.length; i++) {
         if (this.styledItems.has(items[i])) continue;
         var style = items[i].style;
@@ -308,18 +311,6 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
       }
     }
 
-    /**
-     * Gets a collection of all items in a grid.
-     *
-     * @return {HTMLCollection}
-     * @private
-     */
-  }, {
-    key: "items",
-    value: function items() {
-      return this.container.children;
-    }
-
     /**
      * Calculates the width of a column.
      *
@@ -329,7 +320,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "colWidth",
     value: function colWidth() {
-      return this.items()[0].getBoundingClientRect().width + this.gutter;
+      return this.items[0].getBoundingClientRect().width + this.gutter;
     }
 
     /**
@@ -398,7 +389,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
         wSpace = _this$setup.wSpace;
       var maxHeight = 0;
       var colWidth = this.colWidth();
-      var items = this.items();
+      var items = this.items;
       wSpace = this.center ? Math.floor(wSpace / 2) : 0;
       this.initStyles();
       for (var i = 0; i < items.length; i++) {
@@ -432,8 +423,8 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
   }, {
     key: "ready",
     value: function ready() {
-      if (this["static"]) return true;
-      return this.items().length >= this.size;
+      if (this.static) return true;
+      return this.items.length >= this.size;
     }
 
     /**
@@ -464,7 +455,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
       this.resizeObserver = new ResizeObserver(function () {
         setTimeout(function () {
           _this3.positionItems();
-        }, 200);
+        }, REPOSITIONING_DELAY);
       });
       this.resizeObserver.observe(this.container);
     }
@@ -482,7 +473,7 @@ var MagicGrid = /*#__PURE__*/function (_EventEmitter) {
         window.addEventListener("resize", function () {
           setTimeout(function () {
             _this4.positionItems();
-          }, 200);
+          }, REPOSITIONING_DELAY);
         });
         this.observeContainerResize();
         this.positionItems();