Add option to specify grid-auto-flow property in auto-placement demo

mrego · mrego · commit 37411779d1d3 · 2015-01-22T11:56:05.000+01:00
diff --git a/autoplacement.html b/autoplacement.html
@@ -51,6 +51,11 @@
         #new {
             padding-left: 25px;
         }
+
+        .grid div {
+            width: 100%;
+            height: 100%;
+        }
     </style>
     <script>
         function randomColor() {
@@ -92,14 +97,30 @@
 
             addGridItem();
         }
+
+        function updateGridAutoFlow() {
+            var grid = document.getElementById("grid");
+            var flow = document.getElementById("flow");
+
+            grid.style.webkitGridAutoFlow = flow.value;
+            grid.style.gridAutoFlow = flow.value;
+        }
     </script>
 </head>
 <body>
     <div id="grid" class="grid">
     </div>
     <div style="clear: both;"></div>
     <div id="new">
-        <h2>CSS Grid Layout Auto-placement Algorithm</h2>
+        <h2>CSS Grid Layout: <a href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">Grid Item Placement Algorithm</a></h2>
+        <p>Property <a href="http://dev.w3.org/csswg/css-grid/#grid-auto-flow-property"><code>grid-auto-flow</code></a> is
+        <select id="flow" onchange="updateGridAutoFlow();">
+            <option value="row" selected>row</option>
+            <option value="column">column</option>
+            <option value="row dense">row dense</option>
+            <option value="column dense">column dense</option>
+        </select>
+        </p>
         <p>New grid item at
         row
         <select id="row">
@@ -130,7 +151,6 @@ <h2>CSS Grid Layout Auto-placement Algorithm</h2>
         </p>
         <button onClick="addGridItem();">Add</button>
         <button onClick="addRandomGridItem();">Add random</button>
-        <p><a href="http://www.w3.org/TR/css-grid-1/#auto-placement">Spec</a></p>
     </div>
     <table id="table">
         <tr>
diff --git a/index.html b/index.html
@@ -235,9 +235,9 @@ <h4 class="list-group-item-heading">Auto-placement Algorithm</h4>
                                     <a href="autoplacement.html" class="label label-primary">example</a>
                                     <a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/autoplacement.html" class="label label-success">html</a>
                                     <a href="https://github.com/Igalia/css-grid-layout/blob/gh-pages/autoplacement.png" class="label label-info">screenshot</a>
-                                    <a href="http://www.w3.org/TR/css-grid-1/#auto-placement" class="label label-warning">spec</a>
+                                    <a href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo" class="label label-warning">spec</a>
                                 </p>
-                                <p>Auto-placement algorithm demo. Allow to new add grid items in different positions in order to check how the algorithm works.</p>
+                                <p>Auto-placement algorithm demo. Allow to new add grid items in different positions in order to check how the algorithm works. Also, includes the possibitly to change between the different <code>grid-auto-flow</code> property values.</p>
                             </li>
                         </ul>
                     </div>
