fix(examples): fix typo 16-drag-from-outside -> 15-drag-from-outside

- fix typo - fix markup
react-grid-layout · Sep 12, 2019 · e504017 · e504017
1 parent 56eb5c8
commit e504017
Show file tree

Hide file tree

Showing 18 changed files with 82 additions and 81 deletions.
diff --git a/examples/0-showcase.html b/examples/0-showcase.html
@@ -16,9 +16,9 @@ <h3>React-Grid-Layout Demo 0 - Showcase</h3>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/0-showcase.jsx">View this example's source</a></li>
 
       <li><a href="1-basic.html"><b>⇢ </b>View the next example: "Basic"</a></li>
-        </ul>
-           <p>React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.</p>
-           <p>Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.</p>
-        <div id="content"></div>
+    </ul>
+    <p>React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.</p>
+    <p>Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/1-basic.html b/examples/1-basic.html
@@ -18,9 +18,9 @@ <h3>React-Grid-Layout Demo 1 - Basic</h3>
       <li><a href="0-showcase.html"><b>⇠</b> View the previous example: "Showcase"</a></li>
 
       <li><a href="2-no-dragging.html"><b>⇢ </b>View the next example: "No Dragging"</a></li>
-        </ul>
-           <p>Try dragging the elements around.</p>
-           <p>This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.</p>
-        <div id="content"></div>
+    </ul>
+    <p>Try dragging the elements around.</p>
+    <p>This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/10-dynamic-min-max-wh.html b/examples/10-dynamic-min-max-wh.html
@@ -18,9 +18,9 @@ <h3>React-Grid-Layout Demo 10 - Dynamic Minimum and Maximum Width/Height</h3>
       <li><a href="9-min-max-wh.html"><b>⇠</b> View the previous example: "Minimum and Maximum Width/Height"</a></li>
 
       <li><a href="11-no-vertical-compact.html"><b>⇢ </b>View the next example: "No Vertical Compacting (Free Movement)"</a></li>
-        </ul>
-           <p>Your application may have more complex rules for determining an element's mins and maxes. This demo demonstrates how to use the `onResize` handler to accomplish this.</p>
-           <p>In this grid, all elements are allowed a max width of 2 if the height < 3, and a min width of 2 if the height >= 3.</p>
-        <div id="content"></div>
+    </ul>
+    <p>Your application may have more complex rules for determining an element's mins and maxes. This demo demonstrates how to use the `onResize` handler to accomplish this.</p>
+    <p>In this grid, all elements are allowed a max width of 2 if the height < 3, and a min width of 2 if the height >= 3.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/11-no-vertical-compact.html b/examples/11-no-vertical-compact.html
@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 11 - No Vertical Compacting (Free Movement)</h3>
       <li><a href="10-dynamic-min-max-wh.html"><b>⇠</b> View the previous example: "Dynamic Minimum and Maximum Width/Height"</a></li>
 
       <li><a href="12-prevent-collision.html"><b>⇢ </b>View the next example: "Prevent Collision"</a></li>
-        </ul>
-           <p>You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.</p>
-        <div id="content"></div>
+    </ul>
+    <p>You may want to turn off vertical compacting so items can be placed anywhere in the grid. Set the property `verticalCompact` to `false` to achieve this effect.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/12-prevent-collision.html b/examples/12-prevent-collision.html
@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 12 - Prevent Collision</h3>
       <li><a href="11-no-vertical-compact.html"><b>⇠</b> View the previous example: "No Vertical Compacting (Free Movement)"</a></li>
 
       <li><a href="13-error-case.html"><b>⇢ </b>View the next example: "Error Case"</a></li>
-        </ul>
-           <p>You may want to turn off rearrangement so items don't move arround when dragging. Set the property `preventCollision` to `true` to achieve this effect. It's particularly useful with `verticalCompact` set to `false`.</p>
-        <div id="content"></div>
+    </ul>
+    <p>You may want to turn off rearrangement so items don't move arround when dragging. Set the property `preventCollision` to `true` to achieve this effect. It's particularly useful with `verticalCompact` set to `false`.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/13-error-case.html b/examples/13-error-case.html
@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 13 - Error Case</h3>
       <li><a href="12-prevent-collision.html"><b>⇠</b> View the previous example: "Prevent Collision"</a></li>
 
       <li><a href="14-toolbox.html"><b>⇢ </b>View the next example: "Toolbox"</a></li>
-        </ul>
-           <p>This is an extra test case for a collision bug fixed in November 2017. When you drag 1 over 2, it should not move over 3.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This is an extra test case for a collision bug fixed in November 2017. When you drag 1 over 2, it should not move over 3.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/14-toolbox.html b/examples/14-toolbox.html
@@ -16,8 +16,9 @@ <h3>React-Grid-Layout Demo 14 - Toolbox</h3>
       <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/14-toolbox.jsx">View this example's source</a></li>
 
       <li><a href="13-error-case.html"><b>⇠</b> View the previous example: "Error Case"</a></li>
-            </ul>
-           <p>This demonstrates how to implement a toolbox to add and remove widgets.</p>
-        <div id="content"></div>
+      <li><a href="15-drag-from-outside.html"><b>⇢ </b>View the next example: "Drag From Outside"</a></li>
+    </ul>
+    <p>This demonstrates how to implement a toolbox to add and remove widgets.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/15-drag-from-outside.html b/examples/15-drag-from-outside.html
@@ -0,0 +1,24 @@
+<!--
+  Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js.
+-->
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script src="http://localhost:4002/dist/commons.js"></script>
+    <script src="http://localhost:4002/dist/15-drag-from-outside.bundle.js"></script>
+    <title>RGL Example 15 - Drag From Outside</title>
+  </head>
+  <body>
+    <h3>React-Grid-Layout Demo 15 - Drag From Outside</h3>
+    <ul>
+      <li><a href="https://github.com/STRML/react-grid-layout">View project on GitHub</a></li>
+      <li><a href="https://github.com/STRML/react-grid-layout/blob/master/test/examples/15-drag-from-outside.jsx">View this example's source</a></li>
+
+      <li><a href="1-basic.html"><b>⇢ </b>View the next example: "Basic"</a></li>
+    </ul>
+    <p>React-Grid-Layout is a grid layout system for React. It features auto-packing, draggable and resizable widgets, static widgets, a fluid layout, and separate layouts per responsive breakpoint.</p>
+    <p>Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.</p>
+    <div id="content"></div>
+  </body>
+</html>
diff --git a/examples/16-drag-from-outside.html b/examples/16-drag-from-outside.html
diff --git a/examples/2-no-dragging.html b/examples/2-no-dragging.html
@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 2 - No Dragging</h3>
       <li><a href="1-basic.html"><b>⇠</b> View the previous example: "Basic"</a></li>
 
       <li><a href="3-messy.html"><b>⇢ </b>View the next example: "Messy"</a></li>
-        </ul>
-           <p>This particular example has dragging and resizing turned off.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This particular example has dragging and resizing turned off.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/3-messy.html b/examples/3-messy.html
@@ -18,10 +18,10 @@ <h3>React-Grid-Layout Demo 3 - Messy</h3>
       <li><a href="2-no-dragging.html"><b>⇠</b> View the previous example: "No Dragging"</a></li>
 
       <li><a href="4-grid-property.html"><b>⇢ </b>View the next example: "Grid Item Properties"</a></li>
-        </ul>
-           <p>This demo shows what happens when elements are placed randomly all over the layout.</p>
-           <p>RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done in the vertical dimension. If objects all have the same width, they will be packed efficiently.</p>
-           <p>If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, out of bounds, etc), they will be automatically corrected on startup. See the source of this demo, where elements are placed randomly in the layout.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This demo shows what happens when elements are placed randomly all over the layout.</p>
+    <p>RGL does not auto-pack in the same fashion as other projects, such as jQuery Masonry. Packing is only done in the vertical dimension. If objects all have the same width, they will be packed efficiently.</p>
+    <p>If a layout is fed to RGL that has items with incorrect dimensions (width too big, overlapping other elements, out of bounds, etc), they will be automatically corrected on startup. See the source of this demo, where elements are placed randomly in the layout.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/4-grid-property.html b/examples/4-grid-property.html
@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 4 - Grid Item Properties</h3>
       <li><a href="3-messy.html"><b>⇠</b> View the previous example: "Messy"</a></li>
 
       <li><a href="5-static-elements.html"><b>⇢ </b>View the next example: "Static Elements"</a></li>
-        </ul>
-           <p>This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This demo uses a layout assigned on the grid items themselves as the <code>data-grid</code> property.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/5-static-elements.html b/examples/5-static-elements.html
@@ -18,8 +18,8 @@ <h3>React-Grid-Layout Demo 5 - Static Elements</h3>
       <li><a href="4-grid-property.html"><b>⇠</b> View the previous example: "Grid Item Properties"</a></li>
 
       <li><a href="6-dynamic-add-remove.html"><b>⇢ </b>View the next example: "Dynamic Add/Remove"</a></li>
-        </ul>
-           <p>This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements move themselves around a static element.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements move themselves around a static element.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/6-dynamic-add-remove.html b/examples/6-dynamic-add-remove.html
@@ -18,10 +18,10 @@ <h3>React-Grid-Layout Demo 6 - Dynamic Add/Remove</h3>
       <li><a href="5-static-elements.html"><b>⇠</b> View the previous example: "Static Elements"</a></li>
 
       <li><a href="7-localstorage.html"><b>⇢ </b>View the next example: "LocalStorage"</a></li>
-        </ul>
-           <p>This demo shows what happens when items are dynamically added and removed.</p>
-           <p>You can remove an item by clicking its "x", and add a new one with the button.</p>
-           <p>To further illustration RGL's capacities, this particular example is responsive. Trying resizing the window.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This demo shows what happens when items are dynamically added and removed.</p>
+    <p>You can remove an item by clicking its "x", and add a new one with the button.</p>
+    <p>To further illustration RGL's capacities, this particular example is responsive. Trying resizing the window.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/7-localstorage.html b/examples/7-localstorage.html
@@ -18,9 +18,9 @@ <h3>React-Grid-Layout Demo 7 - LocalStorage</h3>
       <li><a href="6-dynamic-add-remove.html"><b>⇠</b> View the previous example: "Dynamic Add/Remove"</a></li>
 
       <li><a href="8-localstorage-responsive.html"><b>⇢ </b>View the next example: "Responsive with LocalStorage"</a></li>
-        </ul>
-           <p>This simple demo synchronizes to localStorage.</p>
-           <p>Try moving and resizing elements, then reloading.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This simple demo synchronizes to localStorage.</p>
+    <p>Try moving and resizing elements, then reloading.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/8-localstorage-responsive.html b/examples/8-localstorage-responsive.html
@@ -18,10 +18,10 @@ <h3>React-Grid-Layout Demo 8 - Responsive with LocalStorage</h3>
       <li><a href="7-localstorage.html"><b>⇠</b> View the previous example: "LocalStorage"</a></li>
 
       <li><a href="9-min-max-wh.html"><b>⇢ </b>View the next example: "Minimum and Maximum Width/Height"</a></li>
-        </ul>
-           <p>This simple demo synchronizes to localStorage for each responsive breakpoint.</p>
-           <p>Try moving and resizing elements, changing window width, moving some more, and refreshing.</p>
-           <p>Each breakpoint has a separate layout. The <code>onLayoutChange</code> callback calls back with a hash of breakpoints to layouts, which is then synchronized to localStorage.</p>
-        <div id="content"></div>
+    </ul>
+    <p>This simple demo synchronizes to localStorage for each responsive breakpoint.</p>
+    <p>Try moving and resizing elements, changing window width, moving some more, and refreshing.</p>
+    <p>Each breakpoint has a separate layout. The <code>onLayoutChange</code> callback calls back with a hash of breakpoints to layouts, which is then synchronized to localStorage.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/examples/9-min-max-wh.html b/examples/9-min-max-wh.html
@@ -18,10 +18,10 @@ <h3>React-Grid-Layout Demo 9 - Minimum and Maximum Width/Height</h3>
       <li><a href="8-localstorage-responsive.html"><b>⇠</b> View the previous example: "Responsive with LocalStorage"</a></li>
 
       <li><a href="10-dynamic-min-max-wh.html"><b>⇢ </b>View the next example: "Dynamic Minimum and Maximum Width/Height"</a></li>
-        </ul>
-           <p>You can set min and max dimensions on a grid item by using the `minW`, `maxW`, `minH`, and `maxH` properties.</p>
-           <p>In this demo, the min and max dimensions are generated automatically. Try resizing the items below.</p>
-           <p>If your mins and maxes collide: for example min > max, or the initial dimensions are out of range, an error will be thrown.</p>
-        <div id="content"></div>
+    </ul>
+    <p>You can set min and max dimensions on a grid item by using the `minW`, `maxW`, `minH`, and `maxH` properties.</p>
+    <p>In this demo, the min and max dimensions are generated automatically. Try resizing the items below.</p>
+    <p>If your mins and maxes collide: for example min > max, or the initial dimensions are out of range, an error will be thrown.</p>
+    <div id="content"></div>
   </body>
 </html>
diff --git a/test/examples/16-drag-from-outside.jsx → test/examples/15-drag-from-outside.jsx b/test/examples/16-drag-from-outside.jsx → test/examples/15-drag-from-outside.jsx