ianmcnally · February 24, 2019 11:21 · Oct 19, 2017 · Oct 19, 2017 · Oct 19, 2017 · Oct 19, 2017
diff --git a/_x-display.css → x-display.css b/_x-display.css → x-display.css
diff --git a/_display.css → _x-display.css b/_display.css → _x-display.css
diff --git a/display.css → _display.css b/display.css → _display.css
diff --git a/grid-auto-placement-polyfill.js b/grid-auto-placement-polyfill.js
@@ -46,7 +46,13 @@ const runPolyfill = () => {
   toArray(grids).forEach(placeItemsOnGrid)
 }
 
-// covers dynamic and static pages, at the cost of multiple DOM traversals
-window.addEventListener('popstate', runPolyfill)
-document.addEventListener('DOMContentLoaded', runPolyfill)
-document.body.addEventListener('DOMSubtreeModified', runPolyfill)
+const supportsGrid = typeof CSS !== 'undefined' &&
+  typeof CSS.supports !== 'undefined' &&
+  CSS.supports('display', 'grid')
+
+if (!supportsGrid) {
+  // covers dynamic and static pages, at the cost of multiple DOM traversals
+  window.addEventListener('popstate', runPolyfill)
+  document.addEventListener('DOMContentLoaded', runPolyfill)
+  document.body.addEventListener('DOMSubtreeModified', runPolyfill)
+}
diff --git a/grid-rows.css → grid-template-rows.css b/grid-rows.css → grid-template-rows.css
diff --git a/grid-rows.css b/grid-rows.css
@@ -0,0 +1,4 @@
+.auto {
+  -ms-grid-rows: auto;
+  grid-template-rows: auto;
+}
diff --git a/display.css b/display.css
@@ -0,0 +1,4 @@
+.grid {
+  display: -ms-grid;
+  display: grid;
+}
diff --git a/grid-template-columns.css b/grid-template-columns.css
@@ -0,0 +1,4 @@
+.of12 {
+  -ms-grid-columns: (1fr)[12];
+  grid-template-columns: repeat(12, 1fr);
+}
diff --git a/grid-auto-placement-polyfill.js b/grid-auto-placement-polyfill.js
@@ -1,4 +1,5 @@
-import { columns, display, gridSpans, margin } from 'design-system-styles'
+import { columns, display, gridSpans, margin } from './css-modules-styles'
+
 const COLUMNS = 12
 
 const toArray = arrayLike => Array.prototype.slice.call(arrayLike)

diff --git a/grid-auto-placement-polyfill.js b/grid-auto-placement-polyfill.js
@@ -45,8 +45,7 @@ const runPolyfill = () => {
   toArray(grids).forEach(placeItemsOnGrid)
 }
 
-setTimeout(runPolyfill, 10000)
-
+// covers dynamic and static pages, at the cost of multiple DOM traversals
 window.addEventListener('popstate', runPolyfill)
 document.addEventListener('DOMContentLoaded', runPolyfill)
 document.body.addEventListener('DOMSubtreeModified', runPolyfill)
diff --git a/grid-auto-placement-polyfill.js b/grid-auto-placement-polyfill.js
@@ -0,0 +1,52 @@
+import { columns, display, gridSpans, margin } from 'design-system-styles'
+const COLUMNS = 12
+
+const toArray = arrayLike => Array.prototype.slice.call(arrayLike)
+
+const placeItemsOnGrid = grid => {
+  const withGutters = grid.classList.contains(columns.withGutters)
+  let currentColumnSpansInRow = 0
+  let currentRow = 1
+  let currentColumn = 1
+
+  toArray(grid.children).forEach(row => {
+    let columnSpan
+
+    for (let i = 0; i <= COLUMNS; i++) {
+      if (row.classList.contains(gridSpans[`column${i}`])) {
+        columnSpan = i
+        break
+      }
+    }
+    const wouldNextSpansExceedColumnCount =
+      currentColumnSpansInRow + Number(columnSpan) > COLUMNS
+
+    if (wouldNextSpansExceedColumnCount) {
+      currentRow += 1
+      currentColumnSpansInRow = 0
+      currentColumn = 1
+    }
+
+    currentColumnSpansInRow = currentColumnSpansInRow + Number(columnSpan)
+
+    row.style['-ms-grid-column-span'] = columnSpan
+    row.style['-ms-grid-column'] = currentColumn
+    row.style['-ms-grid-row'] = currentRow
+    if (withGutters) {
+      row.classList.add(margin.leftOne)
+    }
+
+    currentColumn += columnSpan
+  })
+}
+
+const runPolyfill = () => {
+  const grids = document.getElementsByClassName(display.grid)
+  toArray(grids).forEach(placeItemsOnGrid)
+}
+
+setTimeout(runPolyfill, 10000)
+
+window.addEventListener('popstate', runPolyfill)
+document.addEventListener('DOMContentLoaded', runPolyfill)
+document.body.addEventListener('DOMSubtreeModified', runPolyfill)
No results found