forked from react-grid-layout/react-grid-layout
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Auto-generate examples from template rather than edit them individually.
- Loading branch information
Showing
12 changed files
with
203 additions
and
72 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,28 +1,23 @@ | ||
| <!-- | ||
| Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. | ||
| --> | ||
| <html> | ||
| <head> | ||
| <script src="http://localhost:4002/dist/commons.js"></script> | ||
| <script src="http://localhost:4002/dist/3-messy.bundle.js"></script> | ||
| <title>RGL Example 3 - Messy</title> | ||
| <script src="http://localhost:4002/dist/commons.js"></script> | ||
| <script src="http://localhost:4002/dist/3-messy.bundle.js"></script> | ||
| <title>RGL Example 3 - Messy</title> | ||
| </head> | ||
| <body> | ||
| <h3>React-Grid-Layout Demo 3 - Messy Layout</h3> | ||
| <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 | ||
| <a href="https://github.com/STRML/react-grid-layout/blob/master/test/TestLayout.jsx#L37">source of this demo</a>, | ||
| where elements are placed randomly in the layout. | ||
| </p> | ||
|
|
||
| <ul> | ||
| <h3>React-Grid-Layout Demo 3 - Messy</h3> | ||
| <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> | ||
| <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/3-messy.jsx">View this example's source</a></li> | ||
| <li><a href="4-grid-property.html">View the next example: "Grid Item Properties"</a></li> | ||
| </ul> | ||
|
|
||
| <li><a href="4-grid-property.html">View the next example: "Grid Item Properties"</a></li> | ||
| </ul> | ||
| <div id="content"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,21 @@ | ||
| <!-- | ||
| Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and vars.js. | ||
| --> | ||
| <html> | ||
| <head> | ||
| <script src="http://localhost:4002/dist/commons.js"></script> | ||
| <script src="http://localhost:4002/dist/7-localstorage.bundle.js"></script> | ||
| <title>RGL Example 8 - Responsive w/LocalStorage</title> | ||
| <script src="http://localhost:4002/dist/8-localstorage-responsive.bundle.js"></script> | ||
| <title>RGL Example 8 - Responsive with LocalStorage</title> | ||
| </head> | ||
| <body> | ||
| <h3>React-Grid-Layout Demo 8 - Responsive w/LocalStorage</h3> | ||
| <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> | ||
|
|
||
| <ul> | ||
| <h3>React-Grid-Layout Demo 8 - Responsive with LocalStorage</h3> | ||
| <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> | ||
| <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/8-localstorage-responsive.jsx">View this example's source</a></li> | ||
| <!-- <li><a href="2-no-dragging.html">View the next example</a></li> --> | ||
| </ul> | ||
|
|
||
| </ul> | ||
| <div id="content"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| 'use strict'; | ||
| var fs = require('fs'); | ||
| var ejs = require('ejs'); | ||
| var data = require('./vars'); | ||
| var tpl = fs.readFileSync(__dirname + '/template.ejs').toString(); | ||
|
|
||
| var base = 'http://localhost:4002'; | ||
| var banner = 'Do not edit this file! It is generated by `generate.js` in this folder, from `template.ejs` and ' + | ||
| 'vars.js.'; | ||
|
|
||
| data.forEach(function(datum, i) { | ||
| datum.base = base; | ||
| datum.index = i; | ||
| datum.banner = banner; | ||
| datum.next = data[i + 1]; | ||
| var html = ejs.render(tpl, datum); | ||
| fs.writeFileSync(__dirname + '/' + i + '-' + datum.source + '.html', html); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| <!-- | ||
| <%= banner %> | ||
| --> | ||
| <html> | ||
| <head> | ||
| <script src="<%= base %>/dist/commons.js"></script> | ||
| <script src="<%= base %>/dist/<%= index %>-<%= source %>.bundle.js"></script> | ||
| <title>RGL Example <%= index %> - <%= title %></title> | ||
| </head> | ||
| <body> | ||
| <h3>React-Grid-Layout Demo <%= index %> - <%= title %></h3> | ||
| <% for(var i = 0; i < paragraphs.length; i++) { -%> | ||
| <p><%- paragraphs[i] %></p> | ||
| <% } -%> | ||
| <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/<%= index %>-<%= source %>.jsx">View this example's source</a></li> | ||
| <% if (next) { %> | ||
| <li><a href="<%= index + 1 %>-<%= next.source %>.html">View the next example: "<%= next.title %>"</a></li> | ||
| <% } -%> | ||
| </ul> | ||
| <div id="content"></div> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| 'use strict'; | ||
|
|
||
| module.exports = [ | ||
| { | ||
| title: 'Showcase', | ||
| source: 'showcase', | ||
| paragraphs: [ | ||
| 'Try dragging the elements around.', | ||
| 'React-Grid-Layout is the only grid layout system for React. It features auto-packing, resizable widgets, ' + | ||
| 'a fluid layout, and separate layouts per responsive breakpoint.', | ||
| 'Resize the window to try it out!' | ||
| ] | ||
| }, | ||
| { | ||
| title: 'Basic', | ||
| source: 'basic', | ||
| paragraphs: [ | ||
| 'Try dragging the elements around.', | ||
| 'This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.' | ||
| ] | ||
| }, | ||
| { | ||
| title: 'No Dragging', | ||
| source: 'no-dragging', | ||
| paragraphs: [ | ||
| 'This particular example has dragging and resizing turned off.' | ||
| ] | ||
| }, | ||
| { | ||
| title: 'Messy', | ||
| source: 'messy', | ||
| paragraphs: [ | ||
| 'This demo shows what happens when elements are placed randomly all over the layout.', | ||
| '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.', | ||
| '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.' | ||
| ] | ||
| }, | ||
| { | ||
| title: 'Grid Item Properties', | ||
| source: 'grid-property', | ||
| paragraphs: [ | ||
| 'This demo uses a layout assigned on the grid items themselves as the <code>_grid</code> property.', | ||
| ] | ||
| }, | ||
| { | ||
| title: 'Static Elements', | ||
| source: 'static-elements', | ||
| paragraphs: [ | ||
| 'This demo sets an item to <code>static</code>. Static elements cannot be moved or resized. Other elements ' + | ||
| 'move themselves around a static element.' | ||
| ] | ||
| }, | ||
| { | ||
| title: 'Dynamic Add/Remove', | ||
| source: 'dynamic-add-remove', | ||
| paragraphs: [ | ||
| 'This demo shows what happens when items are dynamically added and removed.', | ||
| 'You can remove an item by clicking its "x", and add a new one with the button.' | ||
| ] | ||
| }, | ||
| { | ||
| title: 'LocalStorage', | ||
| source: 'localstorage', | ||
| paragraphs: [ | ||
| 'This simple demo synchronizes to localStorage.', | ||
| 'Try moving and resizing elements, then reloading.' | ||
| ] | ||
| }, | ||
| { | ||
| title: 'Responsive with LocalStorage', | ||
| source: 'localstorage-responsive', | ||
| paragraphs: [ | ||
| 'This simple demo synchronizes to localStorage for each responsive breakpoint.', | ||
| 'Try moving and resizing elements, changing window width, moving some more, and refreshing.', | ||
| '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.' | ||
| ] | ||
| }, | ||
| ]; |