check dynamic content

README.md

@@ -5,7 +5,7 @@ Automatically annotate [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/C
 ![Demo: before, after](demo.gif)
 
 It looks through all elements on the page and checks if the `display` property equals `-ms-grid`.
-If so it will annotate each visible child with explicit `-ms-grid-column` / `-ms-grid-row`.
+If so it will annotate each visible child with explicit `-ms-grid-column` / `-ms-grid-row` based on `-ms-grid-columns` (`-ms-grid-rows` are ignored).
 
 Please check back under the releases tab for recent releases.
 
@@ -17,7 +17,9 @@ Please check back under the releases tab for recent releases.
 - If there are more items/children specified than columns in the the template, new rows will be created.
 - If there any of the children is annotated with an explicit `-ms-grid-column` or `-ms-grid-row`, the whole container will be skipped.
 - Hidden elements are skipped (`type="hidden"` or `display: none`).
+- The script also annotates containers which are dynamically inserted via JavaScript. But, items are only annotated if a grid container is inserted, inserting individual items stay un-annotated.
 
-## TODO
+## More to do
 
-- Make sure it also works when we add new elements via Javascript.
+- Consider columns
+- Annotate items if they are dynamically added individually.

css_grid_annotator.js

@@ -48,6 +48,10 @@ function cssGridAnnotate() {
     }
   }
 
+  function handleInsert(ev) {
+    annotateAll(ev.target.parentElement);
+  }
+
   function isGridContainer(elm) {
     const styles = window.getComputedStyle(elm);
     return styles.display === CSS_DISPLAY_GRID;
@@ -80,6 +84,7 @@ function cssGridAnnotate() {
   }
 
   annotateAll(document.body);
+  window.addEventListener("DOMNodeInserted", handleInsert, false);
 }
 
 window.addEventListener("load", cssGridAnnotate);

index.html

@@ -61,6 +61,17 @@ <h2>If any element has specific positions annotated, we leave it alone</h2>
     <div class="elm item3">3</div>
    </div>
 
+  <h2>Annotate dynamic content</h2>
+  Only works for whole containers...
+  <script type="text/javascript">
+    /* eslint-disable */
+    function appendGrid() {
+      var demoContainer = document.querySelector("#dyndemo1");
+      demoContainer.innerHTML = '<div class="container"><div class="elm">Lorem A</div><div class="elm">Ipsum B</div></div>';
+    }
+  </script>
+  <button onclick="appendGrid()">add a grid</button>
+  <div id="dyndemo1"></div>
 
 <script type="text/javascript" src="css_grid_annotator.js"></script>
 </body>