update docs and demo page

motine · Apr 8, 2019 · c86782e · c86782e
1 parent 597ea01
commit c86782e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 16 deletions.
diff --git a/README.md b/README.md
@@ -4,16 +4,16 @@ Automatically annotate CSS Grid items, so they are correctly positioned in IE11.
 
 ![Demo: before, after](demo.gif)
 
-The script only checks IE11.
 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`.
 
 Please check back under the releases tab for recent releases.
 
 ## Gotchas
 
+- 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` (no template rows yet).
+- 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.
 
 ## TODO

diff --git a/css_grid_annotator.js b/css_grid_annotator.js
@@ -1,18 +1,12 @@
+// CSS Grid Annotator for IE 11
+//
+// Author: Tom Rothe
+// URL: https://github.com/motine/css_grid_annotator
+//
+// Please see notes in README.md.
+// NOTE: This annotation is quite expensive (only for IE11), because check every element on the page for its display type.
+//       Furthermore, for each grid container we look through all style definitions.
 /* eslint-disable */
-
-// // NOTE: Unfortunately, we can not move this script to its own file because somehow the transpiling does not work then anymore.
-// //
-// // Only applied when IE11 is found.
-// // Annotates the children of elements that have display-type grid.
-// // Based on the grid-template-columns style attribute, it annotates the children with grid-column and grid-row.
-// // NOTE: This script does not work if there is only grid-template-rows specified, it needs grid-template-rows-columns.
-// // NOTE: This annotation is quite expensive (only for IE11), because check every element on the page for its display type. Furthermore, for each grid container we look through all style definitions.
-// class GridItemAnnotator {
-//   /* eslint-disable lines-between-class-members, no-console */
-
-
-// }
-
 function cssGridAnnotate() {
   // check if we have IE11
   const agent = navigator.userAgent;
@@ -38,6 +32,7 @@ function cssGridAnnotate() {
     }
   }
 
+  // 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);
     if (!colCount) { return; }

diff --git a/index.html b/index.html
@@ -15,10 +15,16 @@
       margin: 10px;
       padding: 10px;
     }
+
+    .hidden {
+      display: none;
+    }
   </style>
 </head>
 
 <body>
+  <h1>Examples</h1>
+  <h2>Overflowing items are added to new rows</h2>
   <div class="container">
     <div class="elm">Lorem A</div>
     <div class="elm">Ipsum B</div>
@@ -27,6 +33,15 @@
     <div class="elm">Amet E</div>
    </div>
 
+  <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>
+
+
 <script type="text/javascript" src="css_grid_annotator.js"></script>
 </body>
 </html>