From 6575862f4475a1a205dbad96e96a44d458a38436 Mon Sep 17 00:00:00 2001 From: Samuel Reed Date: Thu, 10 Oct 2019 09:18:16 -0400 Subject: [PATCH] chore(examples): add CONTENT_BASE env and ignore examples examples/ will be re-added in gh-pages --- .gitignore | 5 +++++ Makefile | 7 +++++-- examples/0-showcase.html | 24 ------------------------ examples/1-basic.html | 24 ------------------------ examples/10-dynamic-min-max-wh.html | 24 ------------------------ examples/11-no-vertical-compact.html | 23 ----------------------- examples/12-prevent-collision.html | 23 ----------------------- examples/13-error-case.html | 23 ----------------------- examples/14-toolbox.html | 23 ----------------------- examples/15-drag-from-outside.html | 23 ----------------------- examples/2-no-dragging.html | 23 ----------------------- examples/3-messy.html | 25 ------------------------- examples/4-grid-property.html | 23 ----------------------- examples/5-static-elements.html | 23 ----------------------- examples/6-dynamic-add-remove.html | 25 ------------------------- examples/7-localstorage.html | 24 ------------------------ examples/8-localstorage-responsive.html | 25 ------------------------- examples/9-min-max-wh.html | 25 ------------------------- examples/generate.js | 19 +++++++++++-------- examples/template.ejs | 4 ++-- webpack-examples.config.js | 2 +- 21 files changed, 24 insertions(+), 393 deletions(-) delete mode 100644 examples/0-showcase.html delete mode 100644 examples/1-basic.html delete mode 100644 examples/10-dynamic-min-max-wh.html delete mode 100644 examples/11-no-vertical-compact.html delete mode 100644 examples/12-prevent-collision.html delete mode 100644 examples/13-error-case.html delete mode 100644 examples/14-toolbox.html delete mode 100644 examples/15-drag-from-outside.html delete mode 100644 examples/2-no-dragging.html delete mode 100644 examples/3-messy.html delete mode 100644 examples/4-grid-property.html delete mode 100644 examples/5-static-elements.html delete mode 100644 examples/6-dynamic-add-remove.html delete mode 100644 examples/7-localstorage.html delete mode 100644 examples/8-localstorage-responsive.html delete mode 100644 examples/9-min-max-wh.html diff --git a/.gitignore b/.gitignore index a22a09030..6744c7898 100644 --- a/.gitignore +++ b/.gitignore @@ -5,3 +5,8 @@ dist/* npm-debug.log build/ .idea +# Ignore built example files +examples/*.html +examples/*.js +!examples/generate.js +!examples/vars.js diff --git a/Makefile b/Makefile index 1ec7663de..c7742a032 100644 --- a/Makefile +++ b/Makefile @@ -32,12 +32,15 @@ dist/%.min.js: $(LIB) $(BIN) build-js: @$(BIN)/babel --out-dir $(BUILD) $(LIB) +# Will build for use on github pages. Full url of page is +# https://strml.github.io/react-grid-layout/examples/0-showcase.html +# so the CONTENT_BASE should adapt. build-example: @$(BIN)/webpack --config webpack-examples.config.js - node ./examples/generate.js + env CONTENT_BASE="/react-grid-layout/examples/" node ./examples/generate.js view-example: - node ./examples/generate.js + env CONTENT_BASE="/examples/" node ./examples/generate.js @$(BIN)/webpack-dev-server --config webpack-examples.config.js --progress --colors # FIXME flow is usually global diff --git a/examples/0-showcase.html b/examples/0-showcase.html deleted file mode 100644 index 6011e476a..000000000 --- a/examples/0-showcase.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - RGL Example 0 - Showcase - - -

React-Grid-Layout Demo 0 - Showcase

- -

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.

-

Try it out! Drag some boxes around, resize them, and resize the window to see the responsive breakpoints.

-
- - diff --git a/examples/1-basic.html b/examples/1-basic.html deleted file mode 100644 index 37d5ae8be..000000000 --- a/examples/1-basic.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - RGL Example 1 - Basic - - -

React-Grid-Layout Demo 1 - Basic

- -

Try dragging the elements around.

-

This is a basic, non-responsive layout with dragging and resizing. Usage is very simple.

-
- - diff --git a/examples/10-dynamic-min-max-wh.html b/examples/10-dynamic-min-max-wh.html deleted file mode 100644 index 65549afe9..000000000 --- a/examples/10-dynamic-min-max-wh.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - RGL Example 10 - Dynamic Minimum and Maximum Width/Height - - -

React-Grid-Layout Demo 10 - Dynamic Minimum and Maximum Width/Height

- -

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.

-

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.

-
- - diff --git a/examples/11-no-vertical-compact.html b/examples/11-no-vertical-compact.html deleted file mode 100644 index 7a1653b67..000000000 --- a/examples/11-no-vertical-compact.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 11 - No Vertical Compacting (Free Movement) - - -

React-Grid-Layout Demo 11 - No Vertical Compacting (Free Movement)

- -

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.

-
- - diff --git a/examples/12-prevent-collision.html b/examples/12-prevent-collision.html deleted file mode 100644 index 7167ef16a..000000000 --- a/examples/12-prevent-collision.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 12 - Prevent Collision - - -

React-Grid-Layout Demo 12 - Prevent Collision

- -

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`.

-
- - diff --git a/examples/13-error-case.html b/examples/13-error-case.html deleted file mode 100644 index 7a276c747..000000000 --- a/examples/13-error-case.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 13 - Error Case - - -

React-Grid-Layout Demo 13 - Error Case

- -

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.

-
- - diff --git a/examples/14-toolbox.html b/examples/14-toolbox.html deleted file mode 100644 index a0b135135..000000000 --- a/examples/14-toolbox.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 14 - Toolbox - - -

React-Grid-Layout Demo 14 - Toolbox

- -

This demonstrates how to implement a toolbox to add and remove widgets.

-
- - diff --git a/examples/15-drag-from-outside.html b/examples/15-drag-from-outside.html deleted file mode 100644 index 95bc2d262..000000000 --- a/examples/15-drag-from-outside.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 15 - Drag From Outside - - -

React-Grid-Layout Demo 15 - Drag From Outside

- -

This demo shows what happens when an item is added from outside of the grid.

-

Once you drop the item within the grid you'll get its coordinates/properties and can perform actions with it accordingly.

-
- - diff --git a/examples/2-no-dragging.html b/examples/2-no-dragging.html deleted file mode 100644 index b8a913757..000000000 --- a/examples/2-no-dragging.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 2 - No Dragging - - -

React-Grid-Layout Demo 2 - No Dragging

- -

This particular example has dragging and resizing turned off.

-
- - diff --git a/examples/3-messy.html b/examples/3-messy.html deleted file mode 100644 index 349b7ad2f..000000000 --- a/examples/3-messy.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - RGL Example 3 - Messy - - -

React-Grid-Layout Demo 3 - Messy

- -

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.

-
- - diff --git a/examples/4-grid-property.html b/examples/4-grid-property.html deleted file mode 100644 index 44e38e8ee..000000000 --- a/examples/4-grid-property.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 4 - Grid Item Properties - - -

React-Grid-Layout Demo 4 - Grid Item Properties

- -

This demo uses a layout assigned on the grid items themselves as the data-grid property.

-
- - diff --git a/examples/5-static-elements.html b/examples/5-static-elements.html deleted file mode 100644 index 3171038d4..000000000 --- a/examples/5-static-elements.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - - RGL Example 5 - Static Elements - - -

React-Grid-Layout Demo 5 - Static Elements

- -

This demo sets an item to static. Static elements cannot be moved or resized. Other elements move themselves around a static element.

-
- - diff --git a/examples/6-dynamic-add-remove.html b/examples/6-dynamic-add-remove.html deleted file mode 100644 index 1fb003f81..000000000 --- a/examples/6-dynamic-add-remove.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - RGL Example 6 - Dynamic Add/Remove - - -

React-Grid-Layout Demo 6 - Dynamic Add/Remove

- -

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.

-

To further illustration RGL's capacities, this particular example is responsive. Trying resizing the window.

-
- - diff --git a/examples/7-localstorage.html b/examples/7-localstorage.html deleted file mode 100644 index d7888624d..000000000 --- a/examples/7-localstorage.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - RGL Example 7 - LocalStorage - - -

React-Grid-Layout Demo 7 - LocalStorage

- -

This simple demo synchronizes to localStorage.

-

Try moving and resizing elements, then reloading.

-
- - diff --git a/examples/8-localstorage-responsive.html b/examples/8-localstorage-responsive.html deleted file mode 100644 index 7d97b34db..000000000 --- a/examples/8-localstorage-responsive.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - RGL Example 8 - Responsive with LocalStorage - - -

React-Grid-Layout Demo 8 - Responsive with LocalStorage

- -

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 onLayoutChange callback calls back with a hash of breakpoints to layouts, which is then synchronized to localStorage.

-
- - diff --git a/examples/9-min-max-wh.html b/examples/9-min-max-wh.html deleted file mode 100644 index 92a469da8..000000000 --- a/examples/9-min-max-wh.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - RGL Example 9 - Minimum and Maximum Width/Height - - -

React-Grid-Layout Demo 9 - Minimum and Maximum Width/Height

- -

You can set min and max dimensions on a grid item by using the `minW`, `maxW`, `minH`, and `maxH` properties.

-

In this demo, the min and max dimensions are generated automatically. Try resizing the items below.

-

If your mins and maxes collide: for example min > max, or the initial dimensions are out of range, an error will be thrown.

-
- - diff --git a/examples/generate.js b/examples/generate.js index 363f3c3eb..96fe55cb6 100644 --- a/examples/generate.js +++ b/examples/generate.js @@ -1,20 +1,23 @@ "use strict"; -var fs = require("fs"); -var ejs = require("ejs"); -var data = require("./vars"); -var tpl = fs.readFileSync(__dirname + "/template.ejs").toString(); +const fs = require("fs"); +const ejs = require("ejs"); +const data = require("./vars"); +const tpl = fs.readFileSync(__dirname + "/template.ejs").toString(); -var base = "http://localhost:4002"; -var banner = +const base = process.env.CONTENT_BASE; +if (typeof base !== "string") { + throw new Error("env CONTENT_BASE is required to be set."); +} +const 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.base = base.replace(/\/$/, ""); // trim trailing slash datum.index = i; datum.banner = banner; datum.previous = data[i - 1]; datum.next = data[i + 1]; - var html = ejs.render(tpl, datum); + const html = ejs.render(tpl, datum); fs.writeFileSync(__dirname + "/" + i + "-" + datum.source + ".html", html); }); diff --git a/examples/template.ejs b/examples/template.ejs index c68c24fd9..f47fa0af5 100644 --- a/examples/template.ejs +++ b/examples/template.ejs @@ -5,8 +5,8 @@ - - + + RGL Example <%= index %> - <%= title %> diff --git a/webpack-examples.config.js b/webpack-examples.config.js index a49569198..08960d077 100644 --- a/webpack-examples.config.js +++ b/webpack-examples.config.js @@ -21,7 +21,7 @@ module.exports = { } }, output: { - path: __dirname + "/dist", + path: __dirname + "/examples", filename: "[name].js", sourceMapFilename: "[file].map" },