respect for author annotations

README.md

@@ -1,6 +1,6 @@
 # CSS Grid Annotator
 
-Automatically annotate CSS Grid items, so they are correctly positioned in IE11.
+Automatically annotate [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) items with row and column positions, so they are correctly positioned in IE11.
 
 ![Demo: before, after](demo.gif)
 
@@ -14,7 +14,8 @@ Please check back under the releases tab for recent releases.
 - The script is only applied when IE11 is found.
 - The script does checks only for the prefixed grid property `-ms-grid`.
 - The script currently only supports `grid-template-columns`. This script does not work if there is only grid-template-rows specified.
-- If there are more items/children than specified in the template columns, new rows will be created.
+- 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`).
 
 ## TODO

css_grid_annotator.js

@@ -26,17 +26,19 @@ function cssGridAnnotate() {
     var elements = parentElement.querySelectorAll("*");
     for (var i = 0; i < elements.length; i++) {
       var elm = elements[i];
-      if (isGridContainer(elm)) {
-        annotateElement(elm);
+      if (isGridContainer(elm) && !containsAnnotations(elm)) { // we only check grid container, but we ignore the ones with pre-defined annotations
+        annotateContainer(elm);
       }
     }
   }
 
-  // Based on the grid-template-columns style attribute, it annotates the children with grid-column and grid-row.
-  function annotateElement(elm) {
-    var colCount = getTemplateColCount(elm);
+  // it annotates the children with grid-column and grid-row, based on the grid-template-columns style attribute.
+  function annotateContainer(container) {
+    // determine columns
+    var colCount = getTemplateColCount(container);
     if (!colCount) { return; }
-    var children = elm.children;
+    // annotate children
+    var children = container.children;
     for (var i = 0, visibleIndex = 0; i < children.length; i++) { // i: which child do currently address?, visibleIndex: how many children were visible up until now? these two only differ if there are hidden elements
       var child = children[i];
       if (isHiddenElemeent(child)) { continue; }
@@ -55,6 +57,19 @@ function cssGridAnnotate() {
     return (elm.type === "hidden") || (window.getComputedStyle(elm).getPropertyValue("display") === "none");
   }
 
+  // returns true if any of the direct children has CSS_COL or CSS_ROW in their computed style.
+  function containsAnnotations(elm) {
+    var children = elm.children;
+    for (var i = 0; i < children.length; i++) {
+      var child = children[i];
+      var styles = window.getComputedStyle(child);
+      if (styles.getPropertyValue(CSS_COL) != "1" || styles.getPropertyValue(CSS_ROW) != "1") { // IE will automatically determine hat all elements are at (1, 1)
+        return true;
+      }
+    }
+    return false;
+  }
+
   // returns the number of elements in a computed grid-template-columns attribute.
   // We do not need to consider functions such as repeat or minmax, because they are not supported by IE11 anyway (so either the autoprefixer resolves them or the style definition is broken for IE11 anyway).
   function getTemplateColCount(elm) {

index.html

@@ -19,6 +19,11 @@
     .hidden {
       display: none;
     }
+
+    .item1 { -ms-grid-column: 1; -ms-grid-row: 1; }
+    .item2 { -ms-grid-column: 2; -ms-grid-row: 1; }
+    .item3 { -ms-grid-column: 1; -ms-grid-row: 2; }
+    .item4 { -ms-grid-column: 2; -ms-grid-row: 2; }
   </style>
 </head>
 
@@ -46,12 +51,14 @@ <h2>Hidden markup is not considered</h2>
    </div>
 
   <h2>If any element has specific positions annotated, we leave it alone</h2>
+
+  You should see the elements in the right order (left->right, top->bottom).
+
   <div class="container">
-    <div class="elm">Lorem A</div>
-    <div class="elm">Ipsum B</div>
-    <div class="elm">Dolor C</div>
-    <div class="elm">Sit D</div>
-    <div class="elm">Amet E</div>
+    <div class="elm item4">4</div>
+    <div class="elm item2">2</div>
+    <div class="elm item1">1</div>
+    <div class="elm item3">3</div>
    </div>