Added readme.md. Changed default columns value.

zaxovaiko · Jun 17, 2018 · 1bcea82 · 1bcea82
1 parent 953e8ae
commit 1bcea82
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 32 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,16 @@
+# Stratum.js — Masonry Grid Library
+
+### Table of contents
+
+ - [Future updates](https://github.com/zaxoavoki/stratum#future-updates)
+ - [Copyright and license](https://github.com/zaxoavoki/stratum#copyright-and-license)
+
+### Future updates
+
+ - Add padding and margin gap between columns;
+ - Remove [jQuery](https://jquery.com/) from production version of the file;
+ - Add older browsers' supports;
+ - Add this package to the [npm](https://www.npmjs.com/) catalog;
+
+### Copyright and license
+Code and documentation copyright 2018. Code released under the [ISC License](https://en.wikipedia.org/wiki/ISC_license).
diff --git a/demo/index.html b/demo/index.html
@@ -8,7 +8,7 @@
     <!-- Bootstrap CSS -->
     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
 
-    <title>Hello, world!</title>
+    <title>Bootstrap 4 Grid Demo</title>
 </head>
 <body>
 
@@ -86,11 +86,8 @@ <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
     </div>
 </div>
 
-<!-- Optional JavaScript -->
-<!-- jQuery first, then Popper.js, then Bootstrap JS -->
-<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
-<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
+<!-- Include stratum.js -->
 <script src="../dist/stratum.js"></script>
+
 </body>
 </html>
diff --git a/dist/stratum.js b/dist/stratum.js
@@ -89,44 +89,50 @@
 /***/ (function(module, exports, __webpack_require__) {
 
 
-let $ = __webpack_require__(1);      // Require jQuery
+let $ = __webpack_require__(1); // Import jQuery
 
 $(document).ready(function () {
 
-    let cols = 3;                   // Count of the columns
-    let grid = $('[data-grid]');    // Get all grids
+    let grid = $('[data-grid]');     // Get all grids
+    let columns = grid.data('grid'); // Count of the columns
+
+    // Set default value if user does not set count of the columns
+    if (columns === undefined || !columns) {
+        columns = 3;
+    }
 
     grid.css({
         position: 'relative'
     });
 
-    let items = [];                 // Array with item's height and width
-    let top = 0,                    // Initial values
-        left = -100 / cols;         // Left and top positions
+    let items = [];            // Array with item's height and width
+    let top = 0,               // Initial values
+        left = -100 / columns; // Left and top positions
 
     //
     // Main cycle: there we will check current coordinates
     grid.children().each(function (i) {
 
-        i % cols === 0 ? left = 0 : left += 100 / cols; // Set left position for every nth block
+        i % columns === 0 ? left = 0 : left += 100 / columns; // Set left position for every nth block
 
+        // Set width and left position the first
         $(this).css({
             position : 'absolute',
-            width : 100 / cols + '%',
+            width : 100 / columns + '%',
             left: left + '%'
         });
 
-        items.push($(this).outerHeight(true));              // Save height value in main array to check top positions
+        items.push($(this).outerHeight(true)); // Save height value in main array to check top positions
 
         // Set top position
-        if (items[i - cols] === undefined) {
+        if (items[i - columns] === undefined) {
             top = 0;
         } else {
             let itemNumber = i;
             top = 0;
-            while (itemNumber >= cols) {
-                top += items[itemNumber - cols];
-                itemNumber -= cols;
+            while (itemNumber >= columns) {
+                top += items[itemNumber - columns];
+                itemNumber -= columns;
             }
         }
 

diff --git a/src/index.js b/src/index.js
@@ -1,43 +1,48 @@
 
-let $ = require("jquery");          // Require jQuery
+let $ = require("jquery"); // Import jQuery
 
 $(document).ready(function () {
 
-    let cols = 3;                   // Count of the columns
-    let grid = $('[data-grid]');    // Get all grids
+    let grid = $('[data-grid]');     // Get all grids
+    let columns = grid.data('grid'); // Count of the columns
+
+    // Set default value if user does not set count of the columns
+    if (columns === undefined || !columns) {
+        columns = 3;
+    }
 
     grid.css({
         position: 'relative'
     });
 
-    let items = [];                 // Array with item's height and width
-    let top = 0,                    // Initial values
-        left = -100 / cols;         // Left and top positions
+    let items = [];            // Array with item's height and width
+    let top = 0,               // Initial values
+        left = -100 / columns; // Left and top positions
 
     //
     // Main cycle: there we will check current coordinates
     grid.children().each(function (i) {
 
-        i % cols === 0 ? left = 0 : left += 100 / cols; // Set left position for every nth block
+        i % columns === 0 ? left = 0 : left += 100 / columns; // Set left position for every nth block
 
         // Set width and left position the first
         $(this).css({
             position : 'absolute',
-            width : 100 / cols + '%',
+            width : 100 / columns + '%',
             left: left + '%'
         });
 
-        items.push($(this).outerHeight(true));              // Save height value in main array to check top positions
+        items.push($(this).outerHeight(true)); // Save height value in main array to check top positions
 
         // Set top position
-        if (items[i - cols] === undefined) {
+        if (items[i - columns] === undefined) {
             top = 0;
         } else {
             let itemNumber = i;
             top = 0;
-            while (itemNumber >= cols) {
-                top += items[itemNumber - cols];
-                itemNumber -= cols;
+            while (itemNumber >= columns) {
+                top += items[itemNumber - columns];
+                itemNumber -= columns;
             }
         }