detect-grid - npm Package Compare versions

Comparing version 0.1.0 to 1.0.0

dist/index.js

@@ -1,2 +0,2 @@
-function t(t,o){var r=void 0===o?{}:o,n=r.selector,c=void 0===n?null:n,f=r.side,i=void 0===f?"offsetTop":f,l=c?t.querySelectorAll(c):t.children,u=[].concat(l).filter(e),a={};return u.forEach(function(t){var e=Math.round(t[i]);(a[e]||(a[e]=[])).push(t)}),Object.keys(a).map(Number).sort(function(t,e){return t-e}).map(function(t){return a[t]})}function e(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}exports.default=t,exports.markGrid=function(e){var o=t(e);o.forEach(function(t,e){t.forEach(function(r,n){var c,f;c=r,f={row:e,"first-row":0===e,"last-row":e===o.length-1,col:n,"first-col":0===n,"last-col":n===t.length-1,"single-col":1===t.length},Object.keys(f).forEach(function(t){c.setAttribute("data-"+t,f[t])})})})};
+function t(t,e){var o=(void 0===e?{}:e).selector,n=void 0===o?null:o,f=n?t.querySelectorAll(n):t.children,u=Array.from(f).filter(r),c={};return u.forEach(function(t){var r=Math.round(t.offsetTop),e=Math.round(t.offsetLeft);c[r]=c[r]||{},c[r][e]=c[r][e]||[],c[r][e].push(t)}),Object.keys(c).map(Number).sort(function(t,r){return t-r}).map(function(t){var r=c[t];return Object.keys(r).map(Number).sort(function(t,r){return t-r}).map(function(t){return r[t]}).flat()})}function r(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}exports.default=t,exports.detectGrid=t,exports.markGrid=function(r,e){void 0===e&&(e={});var o=t(r,e);o.forEach(function(t,r){t.forEach(function(e,n){var f,u;f=e,u={row:r+1,"first-row":0===r,"last-row":r===o.length-1,col:n+1,"first-col":0===n,"last-col":n===t.length-1,"single-col":1===t.length},Object.keys(u).forEach(function(t){var r=u[t];null===r||!1===r?f.removeAttribute("data-"+t):f.setAttribute("data-"+t,!0===r?"":r)})})})};
 //# sourceMappingURL=index.js.map

dist/index.modern.js

@@ -1,2 +0,2 @@
-function t(t,{selector:e=null,side:r="offsetTop"}={}){const l=[...e?t.querySelectorAll(e):t.children].filter(o),c={};return l.forEach(t=>{const e=Math.round(t[r]);(c[e]||(c[e]=[])).push(t)}),Object.keys(c).map(Number).sort((t,e)=>t-e).map(t=>c[t])}function e(e){const o=t(e);o.forEach((t,e)=>{t.forEach((r,l)=>{var c,n;c=r,n={row:e,"first-row":0===e,"last-row":e===o.length-1,col:l,"first-col":0===l,"last-col":l===t.length-1,"single-col":1===t.length},Object.keys(n).forEach(t=>{c.setAttribute("data-"+t,n[t])})})})}function o(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}export default t;export{e as markGrid};
+function t(t,{selector:e=null}={}){const o=e?t.querySelectorAll(e):t.children,n=Array.from(o).filter(r),l={};return n.forEach(t=>{const e=Math.round(t.offsetTop),r=Math.round(t.offsetLeft);l[e]=l[e]||{},l[e][r]=l[e][r]||[],l[e][r].push(t)}),Object.keys(l).map(Number).sort((t,e)=>t-e).map(t=>{const e=l[t];return Object.keys(e).map(Number).sort((t,e)=>t-e).map(t=>e[t]).flat()})}function e(e,r={}){const o=t(e,r);o.forEach((t,e)=>{t.forEach((r,n)=>{var l,c;l=r,c={row:e+1,"first-row":0===e,"last-row":e===o.length-1,col:n+1,"first-col":0===n,"last-col":n===t.length-1,"single-col":1===t.length},Object.keys(c).forEach(t=>{const e=c[t];null===e||!1===e?l.removeAttribute("data-"+t):l.setAttribute("data-"+t,!0===e?"":e)})})})}function r(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}export default t;export{t as detectGrid,e as markGrid};
 //# sourceMappingURL=index.modern.js.map

dist/index.module.js

@@ -1,2 +0,2 @@
-function t(t,e){var n=void 0===e?{}:e,r=n.selector,c=void 0===r?null:r,f=n.side,i=void 0===f?"offsetTop":f,l=c?t.querySelectorAll(c):t.children,u=[].concat(l).filter(o),a={};return u.forEach(function(t){var e=Math.round(t[i]);(a[e]||(a[e]=[])).push(t)}),Object.keys(a).map(Number).sort(function(t,e){return t-e}).map(function(t){return a[t]})}function e(e){var o=t(e);o.forEach(function(t,e){t.forEach(function(n,r){var c,f;c=n,f={row:e,"first-row":0===e,"last-row":e===o.length-1,col:r,"first-col":0===r,"last-col":r===t.length-1,"single-col":1===t.length},Object.keys(f).forEach(function(t){c.setAttribute("data-"+t,f[t])})})})}function o(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}export default t;export{e as markGrid};
+function t(t,r){var o=(void 0===r?{}:r).selector,n=void 0===o?null:o,f=n?t.querySelectorAll(n):t.children,u=Array.from(f).filter(e),c={};return u.forEach(function(t){var r=Math.round(t.offsetTop),e=Math.round(t.offsetLeft);c[r]=c[r]||{},c[r][e]=c[r][e]||[],c[r][e].push(t)}),Object.keys(c).map(Number).sort(function(t,r){return t-r}).map(function(t){var r=c[t];return Object.keys(r).map(Number).sort(function(t,r){return t-r}).map(function(t){return r[t]}).flat()})}function r(r,e){void 0===e&&(e={});var o=t(r,e);o.forEach(function(t,r){t.forEach(function(e,n){var f,u;f=e,u={row:r+1,"first-row":0===r,"last-row":r===o.length-1,col:n+1,"first-col":0===n,"last-col":n===t.length-1,"single-col":1===t.length},Object.keys(u).forEach(function(t){var r=u[t];null===r||!1===r?f.removeAttribute("data-"+t):f.setAttribute("data-"+t,!0===r?"":r)})})})}function e(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}export default t;export{t as detectGrid,r as markGrid};
 //# sourceMappingURL=index.module.js.map

dist/index.umd.js

@@ -1,2 +0,2 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).detectGrid={})}(this,function(t){function e(t,e){var o=void 0===e?{}:e,r=o.selector,f=void 0===r?null:r,i=o.side,c=void 0===i?"offsetTop":i,u=f?t.querySelectorAll(f):t.children,l=[].concat(u).filter(n),s={};return l.forEach(function(t){var e=Math.round(t[c]);(s[e]||(s[e]=[])).push(t)}),Object.keys(s).map(Number).sort(function(t,e){return t-e}).map(function(t){return s[t]})}function n(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}t.default=e,t.markGrid=function(t){var n=e(t);n.forEach(function(t,e){t.forEach(function(o,r){var f,i;f=o,i={row:e,"first-row":0===e,"last-row":e===n.length-1,col:r,"first-col":0===r,"last-col":r===t.length-1,"single-col":1===t.length},Object.keys(i).forEach(function(t){f.setAttribute("data-"+t,i[t])})})})}});
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t=t||self).detectGrid={})}(this,function(t){function e(t,e){var n=(void 0===e?{}:e).selector,o=void 0===n?null:n,f=o?t.querySelectorAll(o):t.children,i=Array.from(f).filter(r),u={};return i.forEach(function(t){var e=Math.round(t.offsetTop),r=Math.round(t.offsetLeft);u[e]=u[e]||{},u[e][r]=u[e][r]||[],u[e][r].push(t)}),Object.keys(u).map(Number).sort(function(t,e){return t-e}).map(function(t){var e=u[t];return Object.keys(e).map(Number).sort(function(t,e){return t-e}).map(function(t){return e[t]}).flat()})}function r(t){return!!(t.offsetWidth||t.offsetHeight||t.getClientRects().length)}t.default=e,t.detectGrid=e,t.markGrid=function(t,r){void 0===r&&(r={});var n=e(t,r);n.forEach(function(t,e){t.forEach(function(r,o){var f,i;f=r,i={row:e+1,"first-row":0===e,"last-row":e===n.length-1,col:o+1,"first-col":0===o,"last-col":o===t.length-1,"single-col":1===t.length},Object.keys(i).forEach(function(t){var e=i[t];null===e||!1===e?f.removeAttribute("data-"+t):f.setAttribute("data-"+t,!0===e?"":e)})})})}});
 //# sourceMappingURL=index.umd.js.map

package.json

 {
   "name": "detect-grid",
   "description": "Detect and mark grid cells for easy styling",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "author": "Philipp Daun <[e-mail]>",
@@ -14,3 +14,3 @@ "license": "MIT",
     "test": "npm run lint && npm run cover",
-    "test:only": "mocha --require esm --require jsdom-global/register test/*.js",
+    "test:only": "mocha --require esm --timeout 15000 test/*.js",
     "test:watch": "npm test -- --watch",
@@ -54,9 +54,10 @@ "cover": "nyc --check-coverage npm run test:only",
     "jsdom": "16.2.2",
-    "jsdom-global": "3.0.2",
     "microbundle": "^0.12.1",
     "mocha": "^8.0.1",
     "nyc": "^15.1.0",
+    "playwright": "^1.2.1",
     "prettier": "^2.0.5",
-    "rimraf": "^3.0.2"
+    "rimraf": "^3.0.2",
+    "serve": "^11.3.2"
   }
 }

README.md

@@ -29,3 +29,3 @@ # Detect Grid
 
-Returns an array of rows and columns for further processing.
+Returns an array of rows and columns for further processing. Indices are zero-based.
 
@@ -39,8 +39,5 @@ ```js
 
-rows.forEach((cols, row) => {
-  cols.forEach((cell, col) => {
-    console.log(
-      `Cell at row ${row} and col ${col}`,
-      cell.textContent
-    )
+rows.forEach((cols, rowIndex) => {
+  cols.forEach((cell, colIndex) => {
+    console.log(`Cell at row ${rowIndex} and col ${colIndex}`, cell.textContent)
   })
@@ -59,3 +56,3 @@ })
 
-markGrid(grid, { selector: '.col' })
+markGrid(grid, { selector: '.cell' })
 ```
@@ -68,8 +65,8 @@
   <div>
-    <div class="col"></div>
-    <div class="col"></div>
+    <div class="cell"></div>
+    <div class="cell"></div>
   </div>
   <div>
-    <div class="col"></div>
-    <div class="col"></div>
+    <div class="cell"></div>
+    <div class="cell"></div>
   </div>
@@ -81,15 +78,19 @@ </div>
 
+> :warning: While the `detectGrid` function returns zero-based arrays, the data
+   attributes added by `markGrid` start counting from `1` to keep compatibility
+   with CSS nth-child selectors.
+
 ```html
 <div class="grid">
   <div>
-    <div class="col" data-row="0" data-col="0" data-first-row data-first-col></div>
-    <div class="col" data-row="0" data-col="1" data-first-row data-last-col></div>
+    <div class="cell" data-row="1" data-col="1" data-first-row data-first-col></div>
+    <div class="cell" data-row="1" data-col="2" data-first-row data-last-col></div>
   </div>
   <div>
-    <div class="col" data-row="1" data-col="0" data-first-col></div>
-    <div class="col" data-row="1" data-col="1" data-last-col></div>
+    <div class="cell" data-row="2" data-col="1" data-first-col></div>
+    <div class="cell" data-row="2" data-col="2" data-last-col></div>
   </div>
   <div>
-    <div class="col" data-row="2" data-col="0" data-last-row data-first-col></div>
-    <div class="col" data-row="2" data-col="1" data-last-row data-last-col></div>
+    <div class="cell" data-row="2" data-col="1" data-last-row data-first-col></div>
+    <div class="cell" data-row="2" data-col="2" data-last-row data-last-col></div>
   </div>
@@ -96,0 +97,0 @@ </div>

src/index.js

 /**
  * Detect grid rows and cols from element offsets
  */
-export default function detectGrid(
-  element,
-  { selector = null, side = 'offsetTop' } = {}
-) {
+export function detectGrid(element, { selector = null } = {}) {
   const items = selector ? element.querySelectorAll(selector) : element.children
-  const visibleItems = [...items].filter(isVisible)
-  const cells = {}
+  const visibleItems = Array.from(items).filter(isVisible)
+  const rows = {}
 
-  visibleItems.forEach((w) => {
-    const offset = Math.round(w[side])
-    ;(cells[offset] || (cells[offset] = [])).push(w)
+  visibleItems.forEach((cell) => {
+    const top = Math.round(cell.offsetTop)
+    const left = Math.round(cell.offsetLeft)
+    rows[top] = rows[top] || {}
+    rows[top][left] = rows[top][left] || []
+    rows[top][left].push(cell)
   })
 
-  return Object.keys(cells)
+  return Object.keys(rows)
     .map(Number)
     .sort((a, b) => a - b)
-    .map((offset) => cells[offset])
+    .map((offset) => {
+      const cells = rows[offset]
+      return Object.keys(cells)
+        .map(Number)
+        .sort((a, b) => a - b)
+        .map((offset) => cells[offset])
+        .flat()
+    })
 }
@@ -26,4 +33,4 @@
  */
-export function markGrid(el) {
-  const rows = detectGrid(el)
+export function markGrid(el, options = {}) {
+  const rows = detectGrid(el, options)
 
@@ -33,6 +40,6 @@ rows.forEach((cols, rowIndex) => {
       setDataAttributes(cell, {
-        row: rowIndex,
+        row: rowIndex + 1,
         'first-row': rowIndex === 0,
         'last-row': rowIndex === rows.length - 1,
-        col: colIndex,
+        col: colIndex + 1,
         'first-col': colIndex === 0,
@@ -62,4 +69,13 @@ 'last-col': colIndex === cols.length - 1,
   Object.keys(data).forEach((attr) => {
-    element.setAttribute(`data-${attr}`, data[attr])
+    const val = data[attr]
+    if (val === null || val === false) {
+      element.removeAttribute(`data-${attr}`)
+    } else if (val === true) {
+      element.setAttribute(`data-${attr}`, '')
+    } else {
+      element.setAttribute(`data-${attr}`, val)
+    }
   })
 }
+
+export default detectGrid

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32673

increased by19.85%

Lines of code

92

increased by26.03%

Number of low quality alerts

0

decreased by-100%

Number of lines in readme file

98

increased by1.03%

Worsened metrics

Dev dependency count

15

increased by7.14%

No dependency changes