├── LICENSE.txt
├── README.md
├── css_grid_annotator.js
├── demo.gif
└── index.html


/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2019 Tom Rothe
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # CSS Grid Annotator
 2 | 
 3 | [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) is great, but IE11 assumes that all items are in the first row and first column. Please check out this [blog post](http://tomrothe.de/posts/css_grid_and_ie11.html) by Valentina and me.
 4 | So, you have to add a lot of styles to explicitly position your grid items.
 5 | This script automatically adds the positioning attributes for IE11.
 6 | 
 7 | ![Demo: before, after](demo.gif)
 8 | 
 9 | It looks through all elements on the page and checks if the `display` property equals `-ms-grid`.
10 | 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).
11 | 
12 | Please check back under the releases tab for recent releases.
13 | 
14 | ## Gotchas
15 | 
16 | - The script is only applied when IE11 is found.
17 | - The script does checks only for the prefixed grid property `-ms-grid`.
18 | - The script currently only supports `grid-template-columns`. This script does not work if there is only grid-template-rows specified.
19 | - If there are more items/children specified than columns in the the template, new rows will be created.
20 | - If there any of the children is annotated with an explicit `-ms-grid-column` or `-ms-grid-row`, the whole container will be skipped.
21 | - Hidden elements are skipped (`type="hidden"` or `display: none`).
22 | - 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 unannotated.
23 | 
24 | ## More to do
25 | 
26 | - Consider template rows.
27 | - Annotate items if they are dynamically added individually.
28 | 
29 | ## Contribute
30 | 
31 | Please feel free to add issues, to contribute via pull requests or to reach out to [me](github@motine.de).
32 | 


--------------------------------------------------------------------------------
/css_grid_annotator.js:
--------------------------------------------------------------------------------
 1 | // CSS Grid Annotator for IE 11
 2 | //
 3 | // Version: 0.2.1
 4 | // Author: Tom Rothe
 5 | // URL: https://github.com/motine/css_grid_annotator
 6 | //
 7 | // Please see notes in README.md.
 8 | // NOTE: This annotation is quite expensive (only for IE11), because check every element on the page for its display type.
 9 | //       Furthermore, for each grid container we look through all style definitions.
10 | /* eslint-disable */
11 | function cssGridAnnotate() {
12 |   // check if we have IE11
13 |   var agent = navigator.userAgent;
14 |   var isIE11 = (agent.indexOf("Trident") >= 0) && (agent.indexOf("rv:11") >= 0);
15 |   if (!isIE11) {
16 |     return;
17 |   }
18 | 
19 |   var CSS_DISPLAY_GRID = "-ms-grid";
20 |   var CSS_TEMPLATE_COLS = "-ms-grid-columns";
21 |   var CSS_ROW = "-ms-grid-row";
22 |   var CSS_COL = "-ms-grid-column";
23 | 
24 |   function annotateAll(parentElement) {
25 |     // we have to go through every single element to check the computed style
26 |     // this is very performance heavy
27 |     var elements = parentElement.querySelectorAll("*");
28 |     var elementsLength = elements.length;
29 |     for (var i = 0; i < elementsLength; i++) {
30 |       var elm = elements[i];
31 |       if (isGridContainer(elm) && !containsAnnotations(elm)) { // we only check grid container, but we ignore the ones with pre-defined annotations
32 |         annotateContainer(elm);
33 |       }
34 |     }
35 |   }
36 | 
37 |   // it annotates the children with grid-column and grid-row, based on the grid-template-columns style attribute.
38 |   function annotateContainer(container) {
39 |     // determine columns
40 |     var colCount = getTemplateColCount(container);
41 |     if (!colCount) { return; }
42 |     // annotate children
43 |     var children = container.children;
44 |     var childrenLength = children.length;
45 |     for (var i = 0, visibleIndex = 0; i < childrenLength; 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
46 |       var child = children[i];
47 |       if (isHiddenElement(child)) { continue; }
48 |       child.style[CSS_COL] = (visibleIndex % colCount) + 1;
49 |       child.style[CSS_ROW] = Math.floor(visibleIndex / colCount) + 1;
50 |       visibleIndex++;
51 |     }
52 |   }
53 | 
54 |   function handleInsert(ev) {
55 |     if ((ev.target) && (ev.target.parentElement)) {
56 |       annotateAll(ev.target.parentElement);
57 |     }
58 |   }
59 | 
60 |   function isGridContainer(elm) {
61 |     var styles = window.getComputedStyle(elm);
62 |     return styles.display === CSS_DISPLAY_GRID;
63 |   }
64 | 
65 |   function isHiddenElement(elm) {
66 |     return (elm.type === "hidden") || (window.getComputedStyle(elm).getPropertyValue("display") === "none");
67 |   }
68 | 
69 |   // returns true if any of the direct children has CSS_COL or CSS_ROW in their computed style.
70 |   function containsAnnotations(elm) {
71 |     var children = elm.children;
72 |     var childrenLength = children.length;
73 |     for (var i = 0; i < childrenLength; i++) {
74 |       var child = children[i];
75 |       var styles = window.getComputedStyle(child);
76 |       if (styles.getPropertyValue(CSS_COL) != "1" || styles.getPropertyValue(CSS_ROW) != "1") { // IE will automatically determine that all elements are at (1, 1)
77 |         return true;
78 |       }
79 |     }
80 |     return false;
81 |   }
82 | 
83 |   // returns the number of elements in a computed grid-template-columns attribute.
84 |   // 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).
85 |   function getTemplateColCount(elm) {
86 |     var styles = window.getComputedStyle(elm);
87 |     var templateColumns = styles.getPropertyValue(CSS_TEMPLATE_COLS);
88 |     if (!templateColumns) { return; }
89 |     return templateColumns.split(" ").length;
90 |   }
91 | 
92 |   annotateAll(document.body);
93 |   window.addEventListener("DOMNodeInserted", handleInsert, false);
94 | }
95 | 
96 | window.addEventListener("load", cssGridAnnotate);
97 | 


--------------------------------------------------------------------------------
/demo.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/motine/css_grid_annotator/958bd29c2999701f85cb74744b2ea3b105d6129e/demo.gif


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Grid Annotator</title>
 5 |   <style type="text/css">
 6 |     .container {
 7 |       background-color: antiquewhite;
 8 |       display: grid;
 9 |       display: -ms-grid;
10 |       grid-template-columns: 1fr 1fr;
11 |       -ms-grid-columns: 1fr 1fr;
12 |     }
13 |     .elm {
14 |       background-color: rgba(0, 0, 255, 0.3);
15 |       margin: 10px;
16 |       padding: 10px;
17 |     }
18 | 
19 |     .hidden {
20 |       display: none;
21 |     }
22 | 
23 |     .item1 { grid-column: 1; grid-row: 1; -ms-grid-column: 1; -ms-grid-row: 1; }
24 |     .item2 { grid-column: 2; grid-row: 1; -ms-grid-column: 2; -ms-grid-row: 1; }
25 |     .item3 { grid-column: 1; grid-row: 2; -ms-grid-column: 1; -ms-grid-row: 2; }
26 |     .item4 { grid-column: 2; grid-row: 2; -ms-grid-column: 2; -ms-grid-row: 2; }
27 |   </style>
28 | </head>
29 | 
30 | <body>
31 |   <h1>Examples</h1>
32 |   <h2>Overflowing items are added to new rows</h2>
33 |   <div class="container">
34 |     <div class="elm">Lorem A</div>
35 |     <div class="elm">Ipsum B</div>
36 |     <div class="elm">Dolor C</div>
37 |     <div class="elm">Sit D</div>
38 |     <div class="elm">Amet E</div>
39 |    </div>
40 | 
41 |   <h2>Hidden markup is not considered</h2>
42 |   This should render as above, even though there is a hidden input and a hidden div in the container
43 |   <div class="container">
44 |     <input type="hidden">
45 |     <div class="elm">Lorem A</div>
46 |     <div class="elm">Ipsum B</div>
47 |     <div class="hidden">Dolor C</div>
48 |     <div class="elm">Dolor C</div>
49 |     <div class="elm">Sit D</div>
50 |     <div class="elm">Amet E</div>
51 |    </div>
52 | 
53 |   <h2>If any element has specific positions annotated, we leave it alone</h2>
54 | 
55 |   You should see the elements in the right order (left->right, top->bottom).
56 | 
57 |   <div class="container">
58 |     <div class="elm item4">4</div>
59 |     <div class="elm item2">2</div>
60 |     <div class="elm item1">1</div>
61 |     <div class="elm item3">3</div>
62 |    </div>
63 | 
64 |   <h2>Annotate dynamic content</h2>
65 |   Only works for whole containers...
66 |   <script type="text/javascript">
67 |     /* eslint-disable */
68 |     function appendGrid() {
69 |       var demoContainer = document.querySelector("#dyndemo1");
70 |       demoContainer.innerHTML = '<div class="container"><div class="elm">Lorem A</div><div class="elm">Ipsum B</div></div>';
71 |     }
72 |   </script>
73 |   <button onclick="appendGrid()">add a grid</button>
74 |   <div id="dyndemo1"></div>
75 | 
76 | <script type="text/javascript" src="css_grid_annotator.js"></script>
77 | </body>
78 | </html>


--------------------------------------------------------------------------------