├── pub
    ├── sample
    │   └── .keep
    ├── gh-ribbon.png
    ├── prodotype-logo-small.png
    ├── fontawesome
    │   ├── fonts
    │   │   ├── FontAwesome.otf
    │   │   ├── fontawesome-webfont.eot
    │   │   ├── fontawesome-webfont.ttf
    │   │   ├── fontawesome-webfont.woff
    │   │   └── fontawesome-webfont.woff2
    │   ├── less
    │   │   ├── screen-reader.less
    │   │   ├── fixed-width.less
    │   │   ├── larger.less
    │   │   ├── list.less
    │   │   ├── core.less
    │   │   ├── stacked.less
    │   │   ├── font-awesome.less
    │   │   ├── bordered-pulled.less
    │   │   ├── rotated-flipped.less
    │   │   ├── path.less
    │   │   ├── animated.less
    │   │   ├── mixins.less
    │   │   └── variables.less
    │   ├── scss
    │   │   ├── _fixed-width.scss
    │   │   ├── _screen-reader.scss
    │   │   ├── _larger.scss
    │   │   ├── _list.scss
    │   │   ├── _core.scss
    │   │   ├── font-awesome.scss
    │   │   ├── _stacked.scss
    │   │   ├── _bordered-pulled.scss
    │   │   ├── _rotated-flipped.scss
    │   │   ├── _path.scss
    │   │   ├── _animated.scss
    │   │   ├── _mixins.scss
    │   │   └── _variables.scss
    │   └── HELP-US-OUT.txt
    ├── demo-simple.html
    ├── index.html
    ├── demo-simple.js
    ├── demo.js
    └── demo.css
├── .npmignore
├── jest.config.js
├── screenshot.png
├── .gitignore
├── sample
    ├── jumbotron.ejs
    ├── list-group.ejs
    ├── dropdown.ejs
    ├── list-group.yml
    ├── card.ejs
    ├── dropdown.yml
    ├── form.ejs
    ├── jumbotron.yml
    ├── navbar.ejs
    ├── file.ejs
    ├── button.ejs
    ├── color.ejs
    ├── checkbox.ejs
    ├── navbar.yml
    ├── card.yml
    ├── text.ejs
    ├── date.ejs
    ├── number.ejs
    ├── unslider.ejs
    ├── form.yml
    ├── select.ejs
    ├── unslider.yml
    ├── _test-props-editor.ejs
    ├── color.yml
    ├── checkbox.yml
    ├── button.yml
    ├── file.yml
    ├── text.yml
    ├── number.yml
    ├── select.yml
    └── date.yml
├── src
    ├── MulitlineEditor.js
    ├── BooleanEditor.js
    ├── StringEditor.js
    ├── StringArrayEditor.js
    ├── ColorEditor.js
    ├── ObjectEditor.js
    ├── EnumEditor.js
    ├── ActionEditor.js
    ├── ComponentEditor.js
    ├── DataSourceEditor.js
    ├── ToggleEditor.js
    ├── LinkEditor.js
    ├── Renderer.js
    ├── PropEditorBase.js
    ├── NumberEditor.js
    ├── ObjectArrayEditor.js
    ├── FileEditor.js
    ├── Editor.spec.js
    ├── NumberEditor.spec.js
    ├── Editor.js
    └── Prodotype.js
├── .github
    └── workflows
    │   ├── npm-publish.yml
    │   └── test.yml
├── babel.config.js
├── bin
    └── prodotype
├── package.json
└── README.md


/pub/sample/.keep:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | .sublime*
2 | pub/**/*.ejs
3 | pub/**/*.json
4 | node_modules
5 | 


--------------------------------------------------------------------------------
/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   testEnvironment: 'jsdom',
3 | }
4 | 


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/screenshot.png


--------------------------------------------------------------------------------
/pub/gh-ribbon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/pub/gh-ribbon.png


--------------------------------------------------------------------------------
/pub/prodotype-logo-small.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/pub/prodotype-logo-small.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .sublime*
2 | pub/prodotype.js
3 | pub/ejs.min.js
4 | pub/**/*.ejs
5 | pub/**/*.json
6 | node_modules
7 | 


--------------------------------------------------------------------------------
/pub/fontawesome/fonts/FontAwesome.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/pub/fontawesome/fonts/FontAwesome.otf


--------------------------------------------------------------------------------
/pub/fontawesome/fonts/fontawesome-webfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/pub/fontawesome/fonts/fontawesome-webfont.eot


--------------------------------------------------------------------------------
/pub/fontawesome/fonts/fontawesome-webfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/pub/fontawesome/fonts/fontawesome-webfont.ttf


--------------------------------------------------------------------------------
/pub/fontawesome/fonts/fontawesome-webfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/pub/fontawesome/fonts/fontawesome-webfont.woff


--------------------------------------------------------------------------------
/pub/fontawesome/fonts/fontawesome-webfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/silexlabs/Prodotype/HEAD/pub/fontawesome/fonts/fontawesome-webfont.woff2


--------------------------------------------------------------------------------
/pub/fontawesome/less/screen-reader.less:
--------------------------------------------------------------------------------
1 | // Screen Readers
2 | // -------------------------
3 | 
4 | .sr-only { .sr-only(); }
5 | .sr-only-focusable { .sr-only-focusable(); }
6 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/fixed-width.less:
--------------------------------------------------------------------------------
1 | // Fixed Width Icons
2 | // -------------------------
3 | .@{fa-css-prefix}-fw {
4 |   width: (18em / 14);
5 |   text-align: center;
6 | }
7 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_fixed-width.scss:
--------------------------------------------------------------------------------
1 | // Fixed Width Icons
2 | // -------------------------
3 | .#{$fa-css-prefix}-fw {
4 |   width: (18em / 14);
5 |   text-align: center;
6 | }
7 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_screen-reader.scss:
--------------------------------------------------------------------------------
1 | // Screen Readers
2 | // -------------------------
3 | 
4 | .sr-only { @include sr-only(); }
5 | .sr-only-focusable { @include sr-only-focusable(); }
6 | 


--------------------------------------------------------------------------------
/pub/fontawesome/HELP-US-OUT.txt:
--------------------------------------------------------------------------------
1 | I hope you love Font Awesome. If you've found it useful, please do me a favor and check out my latest project,
2 | Fort Awesome (https://fortawesome.com). It makes it easy to put the perfect icons on your website. Choose from our awesome,
3 | comprehensive icon sets or copy and paste your own.
4 | 
5 | Please. Check it out.
6 | 
7 | -Dave Gandy
8 | 


--------------------------------------------------------------------------------
/sample/jumbotron.ejs:
--------------------------------------------------------------------------------
 1 | <div class="jumbotron"
 2 |   style="border: none;<% if(bgColor) { %> background-color: <%= bgColor %>;<% } %>"
 3 | >
 4 |   <% if(title) { %><h1><%= title %></h1><% } %>
 5 |   <% if(text) { %><p><%- text %></p><% } %>
 6 |   <% if(buttonLabel) { %><p><a class="btn btn-primary btn-lg"
 7 |     <% if(onclick) { %>onclick="<%= onclick %>"<% } %>
 8 |   ><%= buttonLabel %></a></p><% } %>
 9 | </div>
10 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/larger.less:
--------------------------------------------------------------------------------
 1 | // Icon Sizes
 2 | // -------------------------
 3 | 
 4 | /* makes the font 33% larger relative to the icon container */
 5 | .@{fa-css-prefix}-lg {
 6 |   font-size: (4em / 3);
 7 |   line-height: (3em / 4);
 8 |   vertical-align: -15%;
 9 | }
10 | .@{fa-css-prefix}-2x { font-size: 2em; }
11 | .@{fa-css-prefix}-3x { font-size: 3em; }
12 | .@{fa-css-prefix}-4x { font-size: 4em; }
13 | .@{fa-css-prefix}-5x { font-size: 5em; }
14 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_larger.scss:
--------------------------------------------------------------------------------
 1 | // Icon Sizes
 2 | // -------------------------
 3 | 
 4 | /* makes the font 33% larger relative to the icon container */
 5 | .#{$fa-css-prefix}-lg {
 6 |   font-size: (4em / 3);
 7 |   line-height: (3em / 4);
 8 |   vertical-align: -15%;
 9 | }
10 | .#{$fa-css-prefix}-2x { font-size: 2em; }
11 | .#{$fa-css-prefix}-3x { font-size: 3em; }
12 | .#{$fa-css-prefix}-4x { font-size: 4em; }
13 | .#{$fa-css-prefix}-5x { font-size: 5em; }
14 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/list.less:
--------------------------------------------------------------------------------
 1 | // List Icons
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-ul {
 5 |   padding-left: 0;
 6 |   margin-left: @fa-li-width;
 7 |   list-style-type: none;
 8 |   > li { position: relative; }
 9 | }
10 | .@{fa-css-prefix}-li {
11 |   position: absolute;
12 |   left: -@fa-li-width;
13 |   width: @fa-li-width;
14 |   top: (2em / 14);
15 |   text-align: center;
16 |   &.@{fa-css-prefix}-lg {
17 |     left: (-@fa-li-width + (4em / 14));
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_list.scss:
--------------------------------------------------------------------------------
 1 | // List Icons
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-ul {
 5 |   padding-left: 0;
 6 |   margin-left: $fa-li-width;
 7 |   list-style-type: none;
 8 |   > li { position: relative; }
 9 | }
10 | .#{$fa-css-prefix}-li {
11 |   position: absolute;
12 |   left: -$fa-li-width;
13 |   width: $fa-li-width;
14 |   top: (2em / 14);
15 |   text-align: center;
16 |   &.#{$fa-css-prefix}-lg {
17 |     left: -$fa-li-width + (4em / 14);
18 |   }
19 | }
20 | 


--------------------------------------------------------------------------------
/src/MulitlineEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class MultilineEditor extends React.Component {
 5 |   render() {
 6 |     return <PropEditorBase onChange={this.props.onChange} data={this.props.data}>
 7 |       <textarea
 8 |         value={ this.props.data.value || '' }
 9 |         onChange={(e) => this.props.onChange(e.target.value)}
10 |         rows={5}
11 |       />
12 |     </PropEditorBase>;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/src/BooleanEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class BooleanEditor extends React.Component {
 5 |   render() {
 6 |     return <PropEditorBase onChange={this.props.onChange} data={this.props.data}>
 7 |       <input
 8 |         type = "checkbox"
 9 |         checked={ this.props.data.value ? 'checked' : '' }
10 |         onChange={(e) => this.props.onChange(e.target.checked)}
11 |       />
12 |     </PropEditorBase>;
13 |   }
14 | }
15 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/core.less:
--------------------------------------------------------------------------------
 1 | // Base Class Definition
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix} {
 5 |   display: inline-block;
 6 |   font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
 7 |   font-size: inherit; // can't have font-size inherit on line above, so need to override
 8 |   text-rendering: auto; // optimizelegibility throws things off #1094
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_core.scss:
--------------------------------------------------------------------------------
 1 | // Base Class Definition
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix} {
 5 |   display: inline-block;
 6 |   font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
 7 |   font-size: inherit; // can't have font-size inherit on line above, so need to override
 8 |   text-rendering: auto; // optimizelegibility throws things off #1094
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 | 
12 | }
13 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/font-awesome.scss:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 4 |  */
 5 | 
 6 | @import "variables";
 7 | @import "mixins";
 8 | @import "path";
 9 | @import "core";
10 | @import "larger";
11 | @import "fixed-width";
12 | @import "list";
13 | @import "bordered-pulled";
14 | @import "animated";
15 | @import "rotated-flipped";
16 | @import "stacked";
17 | @import "icons";
18 | @import "screen-reader";
19 | 


--------------------------------------------------------------------------------
/.github/workflows/npm-publish.yml:
--------------------------------------------------------------------------------
 1 | name: Publish on npm
 2 | on:
 3 |   push:
 4 |     tags:
 5 |       - '*'
 6 | jobs:
 7 |   build:
 8 |     runs-on: ubuntu-latest
 9 |     steps:
10 |       - uses: actions/checkout@v2
11 |       # Setup .npmrc file to publish to npm
12 |       - uses: actions/setup-node@v1
13 |         with:
14 |           node-version: '12.x'
15 |           registry-url: 'https://registry.npmjs.org'
16 |       - run: npm install
17 |       - run: npm publish
18 |         env:
19 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
20 | 


--------------------------------------------------------------------------------
/src/StringEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class StringEditor extends React.Component {
 5 |   render() {
 6 |     return <PropEditorBase onChange={this.props.onChange} data={this.props.data}>
 7 |       <input
 8 |         value={ this.props.data.value || '' }
 9 |         onChange={(e) => this.props.onChange(e.target.value)}
10 |         readOnly={ this.props.data.readonly }
11 |         placeholder={ this.props.data.placeholder }
12 |       />
13 |     </PropEditorBase>;
14 |   }
15 | }
16 | 


--------------------------------------------------------------------------------
/pub/demo-simple.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Prodotype demo: editor</title>
 5 |   <script type="text/javascript" src="./ejs.min.js"></script>
 6 |   <script type="text/javascript" src="./prodotype.js"></script>
 7 |   <link rel="stylesheet" type="text/css" href="./demo.css">
 8 |   <link rel="stylesheet" type="text/css" href="./fontawesome/css/font-awesome.min.css">
 9 | </head>
10 | <body>
11 |   <div id="ui"></div>
12 |   <div id="stage"></div>
13 |   <script type="text/javascript" src="./demo-simple.js"></script>
14 | </body>
15 | </html>
16 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/stacked.less:
--------------------------------------------------------------------------------
 1 | // Stacked Icons
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-stack {
 5 |   position: relative;
 6 |   display: inline-block;
 7 |   width: 2em;
 8 |   height: 2em;
 9 |   line-height: 2em;
10 |   vertical-align: middle;
11 | }
12 | .@{fa-css-prefix}-stack-1x, .@{fa-css-prefix}-stack-2x {
13 |   position: absolute;
14 |   left: 0;
15 |   width: 100%;
16 |   text-align: center;
17 | }
18 | .@{fa-css-prefix}-stack-1x { line-height: inherit; }
19 | .@{fa-css-prefix}-stack-2x { font-size: 2em; }
20 | .@{fa-css-prefix}-inverse { color: @fa-inverse; }
21 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_stacked.scss:
--------------------------------------------------------------------------------
 1 | // Stacked Icons
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-stack {
 5 |   position: relative;
 6 |   display: inline-block;
 7 |   width: 2em;
 8 |   height: 2em;
 9 |   line-height: 2em;
10 |   vertical-align: middle;
11 | }
12 | .#{$fa-css-prefix}-stack-1x, .#{$fa-css-prefix}-stack-2x {
13 |   position: absolute;
14 |   left: 0;
15 |   width: 100%;
16 |   text-align: center;
17 | }
18 | .#{$fa-css-prefix}-stack-1x { line-height: inherit; }
19 | .#{$fa-css-prefix}-stack-2x { font-size: 2em; }
20 | .#{$fa-css-prefix}-inverse { color: $fa-inverse; }
21 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/font-awesome.less:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 3 |  *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 4 |  */
 5 | 
 6 | @import "variables.less";
 7 | @import "mixins.less";
 8 | @import "path.less";
 9 | @import "core.less";
10 | @import "larger.less";
11 | @import "fixed-width.less";
12 | @import "list.less";
13 | @import "bordered-pulled.less";
14 | @import "animated.less";
15 | @import "rotated-flipped.less";
16 | @import "stacked.less";
17 | @import "icons.less";
18 | @import "screen-reader.less";
19 | 


--------------------------------------------------------------------------------
/src/StringArrayEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class StringArrayEditor extends React.Component {
 5 |   render() {
 6 |     return <PropEditorBase onChange={this.props.onChange} data={this.props.data}>
 7 |       <textarea
 8 |         value={ (this.props.data.value || []).join('\n') }
 9 |         onChange={(e) => this.props.onChange(e.target.value.split('\n').map(row => {
10 |           try { return JSON.parse(row); } catch(e) { return row; };
11 |         }))}
12 |         rows={5}
13 |       />
14 |     </PropEditorBase>;
15 |   }
16 | }
17 | 


--------------------------------------------------------------------------------
/src/ColorEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class ColorEditor extends React.Component {
 5 |   render() {
 6 |     return <PropEditorBase data={this.props.data}>
 7 |       <input
 8 |         type="color"
 9 |         onChange={e => this.props.onChange(e.target.value)}
10 |         value={this.props.data.value}
11 |       />
12 |       <input
13 |         type="text"
14 |         onChange={e => this.props.onChange(e.target.value)}
15 |         value={this.props.data.value}
16 |         placeholder="#"
17 |       />
18 |     </PropEditorBase>;
19 |   }
20 | }
21 | 


--------------------------------------------------------------------------------
/src/ObjectEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Editor from './Editor'
 3 | import PropEditorBase from './PropEditorBase';
 4 | 
 5 | export default class ObjectEditor extends React.Component {
 6 |   render() {
 7 |     this.props.data.value = this.props.data.value || {};
 8 |     const editors = Editor.getSubEditors(this.props, this.props.data.props, this.props.data.value);
 9 |     return <PropEditorBase data={this.props.data}>
10 |       <div className="sub-editors-container">
11 |         <div className="sub-editors">
12 |           { editors }
13 |         </div>
14 |       </div>
15 |     </PropEditorBase>;
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (api) {
 2 |   api.cache(false)
 3 |   const env = process.env.BABEL_ENV || process.env.NODE_ENV || "development";
 4 |   const presets = [
 5 |     ["@babel/preset-env", {
 6 |         "useBuiltIns": "entry",
 7 |         corejs: "3.16",
 8 |       },
 9 |     ], [
10 |       "@babel/preset-react", {},
11 |     ],
12 |   ];
13 |   const plugins = [
14 |     "@babel/plugin-proposal-class-properties"
15 |   ];
16 |   return env === "development" ? {
17 |     sourceMaps: false,
18 |     presets,
19 |     plugins,
20 |   } : {
21 |     minified: true,
22 |     compact: true,
23 |     presets,
24 |     plugins,
25 |   };
26 | }
27 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yml:
--------------------------------------------------------------------------------
 1 | name: Run tests
 2 | 
 3 | on: [push]
 4 | 
 5 | jobs:
 6 |   build:
 7 | 
 8 |     runs-on: ${{ matrix.os }}
 9 | 
10 |     strategy:
11 |       matrix:
12 |         node-version: [10.x, 11.x]
13 |         # os: [macos-latest, windows-latest, ubuntu-latest]
14 |         os: [ubuntu-latest]
15 | 
16 |     steps:
17 |     - uses: actions/checkout@v2
18 |     - name: Use Node.js ${{ matrix.node-version }}
19 |       uses: actions/setup-node@v1
20 |       with:
21 |         node-version: ${{ matrix.node-version }}
22 |     - run: npm install
23 |     - run: npm run build
24 |     - run: npm test
25 |       env:
26 |         CI: true
27 |     - run: npm run lint
28 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/bordered-pulled.less:
--------------------------------------------------------------------------------
 1 | // Bordered & Pulled
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-border {
 5 |   padding: .2em .25em .15em;
 6 |   border: solid .08em @fa-border-color;
 7 |   border-radius: .1em;
 8 | }
 9 | 
10 | .@{fa-css-prefix}-pull-left { float: left; }
11 | .@{fa-css-prefix}-pull-right { float: right; }
12 | 
13 | .@{fa-css-prefix} {
14 |   &.@{fa-css-prefix}-pull-left { margin-right: .3em; }
15 |   &.@{fa-css-prefix}-pull-right { margin-left: .3em; }
16 | }
17 | 
18 | /* Deprecated as of 4.4.0 */
19 | .pull-right { float: right; }
20 | .pull-left { float: left; }
21 | 
22 | .@{fa-css-prefix} {
23 |   &.pull-left { margin-right: .3em; }
24 |   &.pull-right { margin-left: .3em; }
25 | }
26 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_bordered-pulled.scss:
--------------------------------------------------------------------------------
 1 | // Bordered & Pulled
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-border {
 5 |   padding: .2em .25em .15em;
 6 |   border: solid .08em $fa-border-color;
 7 |   border-radius: .1em;
 8 | }
 9 | 
10 | .#{$fa-css-prefix}-pull-left { float: left; }
11 | .#{$fa-css-prefix}-pull-right { float: right; }
12 | 
13 | .#{$fa-css-prefix} {
14 |   &.#{$fa-css-prefix}-pull-left { margin-right: .3em; }
15 |   &.#{$fa-css-prefix}-pull-right { margin-left: .3em; }
16 | }
17 | 
18 | /* Deprecated as of 4.4.0 */
19 | .pull-right { float: right; }
20 | .pull-left { float: left; }
21 | 
22 | .#{$fa-css-prefix} {
23 |   &.pull-left { margin-right: .3em; }
24 |   &.pull-right { margin-left: .3em; }
25 | }
26 | 


--------------------------------------------------------------------------------
/sample/list-group.ejs:
--------------------------------------------------------------------------------
 1 | <style type="text/css">
 2 |     .list-group {
 3 |       width: 100%;
 4 |       cursor: pointer;
 5 |     }
 6 | </style>
 7 | <ul class="list-group"
 8 |   <% if(onchange) { %>onclick="<%= onchange %>"<% } %>
 9 | >
10 |   <% for(var idx in items) { %>
11 |   <li class="list-group-item<% if(items[idx].active) { %> active<% } %>"
12 |     <% if(items[idx].onclick) { %>onclick="<%= items[idx].onclick %>"<% } %>
13 |   >
14 |     <% if(items[idx].badge) { %>
15 |     <span class="badge"><%= items[idx].badge %></span>
16 |     <% } %>
17 |     <% if(items[idx].text) { %>
18 |     <p href="#" class="list-group-item-text">
19 |       <%- items[idx].text %>
20 |     </p>
21 |     <% } %>
22 |   </li>
23 |   <% } %>
24 | </ul>
25 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/rotated-flipped.less:
--------------------------------------------------------------------------------
 1 | // Rotated & Flipped Icons
 2 | // -------------------------
 3 | 
 4 | .@{fa-css-prefix}-rotate-90  { .fa-icon-rotate(90deg, 1);  }
 5 | .@{fa-css-prefix}-rotate-180 { .fa-icon-rotate(180deg, 2); }
 6 | .@{fa-css-prefix}-rotate-270 { .fa-icon-rotate(270deg, 3); }
 7 | 
 8 | .@{fa-css-prefix}-flip-horizontal { .fa-icon-flip(-1, 1, 0); }
 9 | .@{fa-css-prefix}-flip-vertical   { .fa-icon-flip(1, -1, 2); }
10 | 
11 | // Hook for IE8-9
12 | // -------------------------
13 | 
14 | :root .@{fa-css-prefix}-rotate-90,
15 | :root .@{fa-css-prefix}-rotate-180,
16 | :root .@{fa-css-prefix}-rotate-270,
17 | :root .@{fa-css-prefix}-flip-horizontal,
18 | :root .@{fa-css-prefix}-flip-vertical {
19 |   filter: none;
20 | }
21 | 


--------------------------------------------------------------------------------
/src/EnumEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class EnumEditor extends React.Component {
 5 |   render() {
 6 |     let idx = 0;
 7 |     const options = this.props.data
 8 |       .type.map(name => <option
 9 |         key = { idx++ }
10 |         value = {  name  }
11 |       >{  name  }</option>);
12 |     return <PropEditorBase data = { this.props.data } >
13 |         <select
14 |           onChange={(e) => this.props.onChange(e.target.value)}
15 |           id = {  "InputValue" + (PropEditorBase.idx++) }
16 |           defaultValue = { this.props.data.value }
17 |           >
18 |           { options }
19 |         </select>
20 |     </PropEditorBase>;
21 |   }
22 | }
23 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_rotated-flipped.scss:
--------------------------------------------------------------------------------
 1 | // Rotated & Flipped Icons
 2 | // -------------------------
 3 | 
 4 | .#{$fa-css-prefix}-rotate-90  { @include fa-icon-rotate(90deg, 1);  }
 5 | .#{$fa-css-prefix}-rotate-180 { @include fa-icon-rotate(180deg, 2); }
 6 | .#{$fa-css-prefix}-rotate-270 { @include fa-icon-rotate(270deg, 3); }
 7 | 
 8 | .#{$fa-css-prefix}-flip-horizontal { @include fa-icon-flip(-1, 1, 0); }
 9 | .#{$fa-css-prefix}-flip-vertical   { @include fa-icon-flip(1, -1, 2); }
10 | 
11 | // Hook for IE8-9
12 | // -------------------------
13 | 
14 | :root .#{$fa-css-prefix}-rotate-90,
15 | :root .#{$fa-css-prefix}-rotate-180,
16 | :root .#{$fa-css-prefix}-rotate-270,
17 | :root .#{$fa-css-prefix}-flip-horizontal,
18 | :root .#{$fa-css-prefix}-flip-vertical {
19 |   filter: none;
20 | }
21 | 


--------------------------------------------------------------------------------
/sample/dropdown.ejs:
--------------------------------------------------------------------------------
 1 | <style type="text/css">
 2 |   #id_<%= uid %>:hover > .dropdown-menu {
 3 |     display: block;
 4 |     float: none;
 5 |     position: relative;
 6 |     cursor: pointer;
 7 |   }
 8 | </style>
 9 | <div id="id_<%= uid %>" class="prodotype-force-size dropdown">
10 |   <a  class="dropdown-toggle" data-toggle="dropdown" href="#">
11 |     <% if(text) { %>
12 |     <%- text %> <span class="caret"></span>
13 |     <% } %>&nbsp;
14 |   </a>
15 |   <ul class="dropdown-menu"
16 |     <% if(onchange) { %>onclick="<%= onchange %>"<% } %>
17 |   >
18 |   <% for(var idx in items) { %>
19 |     <% if(items[idx].text) { %>
20 |     <li><a href="<%- items[idx].link %>"><%- items[idx].text %></a></li>
21 |     <% } else { %>
22 |     <li class="divider"></li>
23 |     <% } %>
24 |   <% } %>
25 |   </ul>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/ActionEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | import AceEditor from 'react-ace';
 4 | 
 5 | export default class ActionEditor extends React.Component {
 6 |   render() {
 7 |     return <PropEditorBase onChange={this.props.onChange} data={this.props.data}>
 8 |       <AceEditor
 9 |         mode="javascript"
10 |         theme="github"
11 |         onChange={(value) => this.props.onChange(value)}
12 |         name={ "InputValue" + (PropEditorBase.idx++) }
13 |         value={ this.props.data.value || '' }
14 |         enableBasicAutocompletion={true}
15 |         enableSnippets={true}
16 |         enableLiveAutocompletion={true}
17 |         showGutter={true}
18 |         tabSize={2}
19 |         height="100px"
20 |         width="100%"
21 |       />
22 |     </PropEditorBase>;
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/path.less:
--------------------------------------------------------------------------------
 1 | /* FONT PATH
 2 |  * -------------------------- */
 3 | 
 4 | @font-face {
 5 |   font-family: 'FontAwesome';
 6 |   src: url('@{fa-font-path}/fontawesome-webfont.eot?v=@{fa-version}');
 7 |   src: url('@{fa-font-path}/fontawesome-webfont.eot?#iefix&v=@{fa-version}') format('embedded-opentype'),
 8 |     url('@{fa-font-path}/fontawesome-webfont.woff2?v=@{fa-version}') format('woff2'),
 9 |     url('@{fa-font-path}/fontawesome-webfont.woff?v=@{fa-version}') format('woff'),
10 |     url('@{fa-font-path}/fontawesome-webfont.ttf?v=@{fa-version}') format('truetype'),
11 |     url('@{fa-font-path}/fontawesome-webfont.svg?v=@{fa-version}#fontawesomeregular') format('svg');
12 |   // src: url('@{fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
13 |   font-weight: normal;
14 |   font-style: normal;
15 | }
16 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_path.scss:
--------------------------------------------------------------------------------
 1 | /* FONT PATH
 2 |  * -------------------------- */
 3 | 
 4 | @font-face {
 5 |   font-family: 'FontAwesome';
 6 |   src: url('#{$fa-font-path}/fontawesome-webfont.eot?v=#{$fa-version}');
 7 |   src: url('#{$fa-font-path}/fontawesome-webfont.eot?#iefix&v=#{$fa-version}') format('embedded-opentype'),
 8 |     url('#{$fa-font-path}/fontawesome-webfont.woff2?v=#{$fa-version}') format('woff2'),
 9 |     url('#{$fa-font-path}/fontawesome-webfont.woff?v=#{$fa-version}') format('woff'),
10 |     url('#{$fa-font-path}/fontawesome-webfont.ttf?v=#{$fa-version}') format('truetype'),
11 |     url('#{$fa-font-path}/fontawesome-webfont.svg?v=#{$fa-version}#fontawesomeregular') format('svg');
12 | //  src: url('#{$fa-font-path}/FontAwesome.otf') format('opentype'); // used when developing fonts
13 |   font-weight: normal;
14 |   font-style: normal;
15 | }
16 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/animated.less:
--------------------------------------------------------------------------------
 1 | // Animated Icons
 2 | // --------------------------
 3 | 
 4 | .@{fa-css-prefix}-spin {
 5 |   -webkit-animation: fa-spin 2s infinite linear;
 6 |           animation: fa-spin 2s infinite linear;
 7 | }
 8 | 
 9 | .@{fa-css-prefix}-pulse {
10 |   -webkit-animation: fa-spin 1s infinite steps(8);
11 |           animation: fa-spin 1s infinite steps(8);
12 | }
13 | 
14 | @-webkit-keyframes fa-spin {
15 |   0% {
16 |     -webkit-transform: rotate(0deg);
17 |             transform: rotate(0deg);
18 |   }
19 |   100% {
20 |     -webkit-transform: rotate(359deg);
21 |             transform: rotate(359deg);
22 |   }
23 | }
24 | 
25 | @keyframes fa-spin {
26 |   0% {
27 |     -webkit-transform: rotate(0deg);
28 |             transform: rotate(0deg);
29 |   }
30 |   100% {
31 |     -webkit-transform: rotate(359deg);
32 |             transform: rotate(359deg);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_animated.scss:
--------------------------------------------------------------------------------
 1 | // Spinning Icons
 2 | // --------------------------
 3 | 
 4 | .#{$fa-css-prefix}-spin {
 5 |   -webkit-animation: fa-spin 2s infinite linear;
 6 |           animation: fa-spin 2s infinite linear;
 7 | }
 8 | 
 9 | .#{$fa-css-prefix}-pulse {
10 |   -webkit-animation: fa-spin 1s infinite steps(8);
11 |           animation: fa-spin 1s infinite steps(8);
12 | }
13 | 
14 | @-webkit-keyframes fa-spin {
15 |   0% {
16 |     -webkit-transform: rotate(0deg);
17 |             transform: rotate(0deg);
18 |   }
19 |   100% {
20 |     -webkit-transform: rotate(359deg);
21 |             transform: rotate(359deg);
22 |   }
23 | }
24 | 
25 | @keyframes fa-spin {
26 |   0% {
27 |     -webkit-transform: rotate(0deg);
28 |             transform: rotate(0deg);
29 |   }
30 |   100% {
31 |     -webkit-transform: rotate(359deg);
32 |             transform: rotate(359deg);
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/sample/list-group.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: List group
 3 | description: This is a simple list.
 4 | doc: https://bootswatch.com/slate/
 5 | category: Slate CSS components
 6 | tags:
 7 | - list
 8 | - ui
 9 | - ux
10 | dependencies:
11 |   link:
12 |   - rel: stylesheet
13 |     href: https://bootswatch.com/slate/bootstrap.css
14 | props:
15 | - name: items
16 |   description: Items of the list
17 |   type:
18 |     - name: text
19 |       type: multiline
20 |       description: label of the item
21 |     - name: badge
22 |       type: string
23 |       description: text to display as a badge or notification
24 |     - name: active
25 |       type: boolean
26 |       description: is the item selected?
27 |     - name: onclick
28 |       type: action
29 |       description: Fires when the user selects this element
30 | - name: onchange
31 |   type: action
32 |   description: Fires when the selection changes
33 | 


--------------------------------------------------------------------------------
/sample/card.ejs:
--------------------------------------------------------------------------------
 1 | <!-- Wide card with share menu button -->
 2 | <style>
 3 | .card-<%= uid %>.mdl-card {
 4 |   width: auto;
 5 | }
 6 | .card-<%= uid %> > .mdl-card__title {
 7 |   color: <%= titleColor %>;
 8 |   height: <%= headerHeight %>px;
 9 |   background: <%= headerColor %> url('<% if(image && image.length) { %><%= image[0].url %><% } %>') center / cover;
10 | }
11 | </style>
12 | 
13 | <div class="card-<%= uid %> mdl-card mdl-shadow--2dp ">
14 |   <div class="mdl-card__title">
15 |     <h2 class="mdl-card__title-text"><%= title %></h2>
16 |   </div>
17 |   <div class="mdl-card__supporting-text"><%- text %></div>
18 |   <div class="mdl-card__actions mdl-card--border">
19 |     <a class="button mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect"
20 |       <% if(onclick) { %>onclick="<%= onclick %>"<% } %>
21 |     >
22 |       <%= buttonLabel %>
23 |     </a>
24 |   </div>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/src/ComponentEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class ComponentEditor extends React.Component {
 5 |   render() {
 6 |     let idx = 0;
 7 |     const options = this.props.dataSources.components ? this.props.dataSources.components.map(compData => {
 8 |       if(!this.props.data.accept || this.props.data.accept.includes(compData.templateName)) {
 9 |         return <option
10 |           key = { idx++ }
11 |           value = {  compData.name  }
12 |         >{  compData.displayName  }</option>
13 |       }
14 |       return null;
15 |     }) : [];
16 |     return <PropEditorBase data = { this.props.data } >
17 |         <select
18 |           onChange={(e) => this.props.onChange(e.target.value)}
19 |           value = { this.props.data.value }
20 |         >
21 |           { options }
22 |         </select>
23 |     </PropEditorBase>;
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/sample/dropdown.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Dropdown Menu
 3 | description: This is a dropdown menu.
 4 | doc: https://bootswatch.com/slate/
 5 | category: Slate CSS components
 6 | tags:
 7 | - list
 8 | - ui
 9 | - ux
10 | - dropdown
11 | dependencies:
12 |   link:
13 |   - rel: stylesheet
14 |     href: https://bootswatch.com/slate/bootstrap.css
15 | props:
16 | - name: text
17 |   type: multiline
18 |   description: label of the component
19 | - name: items
20 |   description: Items of the list
21 |   type:
22 |     - name: text
23 |       type: multiline
24 |       description: label of the item (leave empty to make a separator)
25 |     - name: onclick
26 |       type: action
27 |       description: Fires when the user selects this element
28 |     - name: link
29 |       type: string
30 |       default: '#'
31 |       description: URL to open when the user clicks the item.
32 | - name: onchange
33 |   type: action
34 |   description: Fires when the selection changes
35 | 


--------------------------------------------------------------------------------
/src/DataSourceEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | import * as objectPath from 'object-path';
 4 | 
 5 | export default class extends React.Component {
 6 |   render() {
 7 |     const dataSource = this.props.dataSources[this.props.data.dataSourceName];
 8 |     const root = dataSource ? objectPath.get(dataSource, this.props.data.dataRoot) : null;
 9 |     const options = root ? Object.keys(root).map(key => {
10 |       return <option
11 |         key = { key }
12 |         value = {  key  }
13 |         >{  root[key].displayName || key }</option>
14 |       return null;
15 |     }) : [];
16 |     return <PropEditorBase data = { this.props.data } >
17 |         <select
18 |           onChange={(e) => this.props.onChange(e.target.value)}
19 |           value = { this.props.data.value }
20 |         >
21 |           <option key="none" />
22 |           { options }
23 |         </select>
24 |     </PropEditorBase>;
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/sample/form.ejs:
--------------------------------------------------------------------------------
 1 | <form class="prodotype-force-size silex-element-content keep-content"
 2 |   <% if(action) { %>action="<%= action %>"<% } %>
 3 |   <% if(target) { %>target="<%= target %>"<% } %>
 4 |   <% if(autocomplete) { %>autocomplete="<%= autocomplete %>"<% } %>
 5 |   <% if(name) { %>id="<%= name %>" name="<%= name %>"<% } %>
 6 |   <% if(novalidate) { %>novalidate<% } %>
 7 |   <% if(autocapitalize) { %>autocapitalize="<%= autocapitalize %>"<% } %>
 8 |   <% if(onblur) { %>onblur="<%= onblur %>"<% } %>
 9 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
10 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
11 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
12 |   <% if(oninput) { %>oninput="<%= oninput %>"<% } %>
13 |   <% if(oninvalid) { %>oninvalid="<%= oninvalid %>"<% } %>
14 |   <% if(onreset) { %>onreset="<%= onreset %>"<% } %>
15 |   <% if(onselect) { %>onselect="<%= onselect %>"<% } %>
16 |   <% if(onsubmit) { %>onsubmit="<%= onsubmit %>"<% } %>
17 |   />
18 | 


--------------------------------------------------------------------------------
/sample/jumbotron.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Jumbotron
 3 | description: This is a hero unit for calling extra attention to featured content or information.
 4 | doc: https://bootswatch.com/slate/
 5 | category: Slate CSS components
 6 | tags:
 7 | - ui
 8 | - ux
 9 | dependencies:
10 |   link:
11 |   - rel: stylesheet
12 |     href: https://bootswatch.com/assets/css/custom.min.css
13 |   - rel: stylesheet
14 |     href: https://bootswatch.com/slate/bootstrap.css
15 | props:
16 | - name: title
17 |   type: string
18 |   default: Jumbotron
19 |   description: The title
20 | - name: text
21 |   type: multiline
22 |   default: This is a simple hero unit for calling extra attention to featured content or information.
23 |   description: The paragraph of text.
24 | - name: buttonLabel
25 |   type: string
26 |   default: Learn more
27 |   description: The label of the button.
28 | - name: onclick
29 |   type: action
30 |   description: Fires when the user clicks on the button
31 | - name: bgColor
32 |   type: color
33 |   description: "the container background color"
34 | 


--------------------------------------------------------------------------------
/sample/navbar.ejs:
--------------------------------------------------------------------------------
 1 | <nav class="navbar navbar-default">
 2 |   <div class="container-fluid">
 3 |     <div class="navbar-header">
 4 |       <a class="navbar-brand"
 5 |         <% if(onbrand) { %>onclick="<%= onbrand %>"<% } %>
 6 |       ><%- brand %></a>
 7 |     </div>
 8 | 
 9 |     <div class="collapse navbar-collapse">
10 |       <ul class="nav navbar-nav">
11 |         <% for(var idx in items) { %>
12 |         <li class="<% if(items[idx].active) { %> active<% } %>">
13 |           <a
14 |             <% if(items[idx].onclick) { %>onclick="<%= items[idx].onclick %>"<% } %>
15 |             <% if(items[idx].href) { %>href="<%= items[idx].href %>"<% } %>
16 |           ><%= items[idx].text %></a>
17 |         </li>
18 |         <% } %>
19 |       </ul>
20 |       <ul class="nav navbar-nav navbar-right">
21 |         <% for(var idx in links) { %>
22 |         <li>
23 |           <a
24 |             <% if(links[idx].onclick) { %>onclick="<%= links[idx].onclick %>"<% } %>
25 |             <% if(links[idx].href) { %>href="<%= links[idx].href %>"<% } %>
26 |           ><%= links[idx].text %></a>
27 |         </li>
28 |         <% } %>
29 |       </ul>
30 |     </div>
31 |   </div>
32 | </nav>
33 | 


--------------------------------------------------------------------------------
/pub/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 | <head>
 4 |   <title>Prodotype demo: editor</title>
 5 |   <script type="text/javascript" src="./ejs.min.js"></script>
 6 |   <script type="text/javascript" src="./prodotype.js"></script>
 7 |   <link rel="stylesheet" type="text/css" href="./demo.css">
 8 |   <link rel="stylesheet" type="text/css" href="./fontawesome/css/font-awesome.min.css">
 9 | </head>
10 | <body>
11 |   <div id="tools">
12 |     <article id="info">
13 |       <p>On this page:</p>
14 |       <ul>
15 |         <li>On the left the "Prodotype" editor</li>
16 |         <li>On the right, an app which uses the "Prodotype" editor to create components</li>
17 |       </ul>
18 |       <p>More info <a href="https://github.com/lexoyo/Prodotype">on github</a></p>
19 |     </article>
20 |     <select id="components"></select>
21 |     <p><input id="showPreview" type="checkbox"></input>Show Preview</p>
22 |     <div id="ui"></div>
23 |   </div>
24 |   <div id="stage"></div>
25 |   <script type="text/javascript" src="./demo.js"></script>
26 |   <a href="https://github.com/lexoyo/Prodotype"><img style="position: absolute; top: 0; right: 0; border: 0;" src="./gh-ribbon.png"></a>
27 | </body>
28 | </html>
29 | 


--------------------------------------------------------------------------------
/sample/file.ejs:
--------------------------------------------------------------------------------
 1 | <input class="prodotype-force-size" type="file"
 2 |   <% if(autofocus) { %>autofocus<% } %>
 3 |   <% if(disabled) { %>disabled<% } %>
 4 |   <% if(multiple) { %>multiple<% } %>
 5 |   <% if(required) { %>required<% } %>
 6 |   <% if(value) { %>value="<%= value %>"<% } %>
 7 |   <% if(accept) { %>accept="<%= accept %>"<% } %>
 8 |   <% if(form) { %>form="<%= form %>"<% } %>
 9 |   <% if(name) { %>name="<%= name %>"<% } %>
10 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
11 |   <% if(onclick) { %>onclick="<%= onclick %>"<% } %>
12 |   <% if(ondblclick) { %>ondblclick="<%= ondblclick %>"<% } %>
13 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
14 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
15 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
16 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
17 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
18 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
19 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
20 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
21 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
22 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
23 |   >
24 | 


--------------------------------------------------------------------------------
/sample/button.ejs:
--------------------------------------------------------------------------------
 1 | <button class="prodotype-force-size"
 2 |   <% if(autofocus) { %>autofocus<% } %>
 3 |   <% if(disabled) { %>disabled<% } %>
 4 |   <% if(form) { %>form="<%= form %>"<% } %>
 5 |   <% if(formaction) { %>formaction="<%= formaction %>"<% } %>
 6 |   <% if(formmethod) { %>formmethod="<%= formmethod %>"<% } %>
 7 |   <% if(formnovalidate) { %>formnovalidate<% } %>
 8 |   <% if(formtarget) { %>formtarget="<%= formtarget %>"<% } %>
 9 |   <% if(name) { %>name="<%= name %>"<% } %>
10 |   <% if(type) { %>type="<%= type %>"<% } %>
11 |   <% if(onclick) { %>onclick="<%= onclick %>"<% } %>
12 |   <% if(ondblclick) { %>ondblclick="<%= ondblclick %>"<% } %>
13 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
14 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
15 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
16 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
17 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
18 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
19 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
20 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
21 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
22 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
23 |  ><%= label %></button>
24 | 


--------------------------------------------------------------------------------
/src/ToggleEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class ToggleEditor extends React.Component {
 5 |   render() {
 6 |     let idx = 0;
 7 |     return <PropEditorBase data = { this.props.data } >
 8 |         <div
 9 |           onClick={(e) => {
10 |             e.preventDefault();// fix bug where a click on toggle button reloads Silex but works in the demo
11 |             const newValue = e.target.getAttribute('data-value');
12 |             if(newValue === this.props.data.value && !this.props.data.default) {
13 |               // untoggle current button, no more value
14 |               this.props.onChange();
15 |             }
16 |             else {
17 |               // activate the current button
18 |               this.props.onChange(newValue);
19 |             }
20 |           }}
21 |           id = {  "InputValue" + (PropEditorBase.idx++) }
22 |           >
23 |           {
24 |             this.props.data
25 |             .options.map(({value, description, imageUrl}) => <button
26 |               key = { idx++ }
27 |               data-value = { value }
28 |               data-selected = { this.props.data.value === value }
29 |               title = { description }
30 |               style = {{ backgroundImage: `url(${ imageUrl })` }}
31 |               className = "toggle-button"
32 |             ></button>)
33 |           }
34 |         </div>
35 |     </PropEditorBase>;
36 |   }
37 | }
38 | 


--------------------------------------------------------------------------------
/sample/color.ejs:
--------------------------------------------------------------------------------
 1 | <input class="prodotype-force-size" type="color"
 2 |   <% if(autofocus) { %>autofocus<% } %>
 3 |   <% if(disabled) { %>disabled<% } %>
 4 |   <% if(form) { %>form="<%= form %>"<% } %>
 5 |   <% if(name) { %>name="<%= name %>"<% } %>
 6 |   <% if(value) { %>value="<%= value %>"<% } %>
 7 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
 8 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
 9 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
10 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
11 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
12 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
13 |   <% if(onwheel) { %>onwheel="<%= onwheel %>"<% } %>
14 |   <% if(onblur) { %>onblur="<%= onblur %>"<% } %>
15 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
16 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
17 |   <% if(oninput) { %>oninput="<%= oninput %>"<% } %>
18 |   <% if(oninvalid) { %>oninvalid="<%= oninvalid %>"<% } %>
19 |   <% if(onreset) { %>onreset="<%= onreset %>"<% } %>
20 |   <% if(onsearch) { %>onsearch="<%= onsearch %>"<% } %>
21 |   <% if(onselect) { %>onselect="<%= onselect %>"<% } %>
22 |   <% if(onsubmit) { %>onsubmit="<%= onsubmit %>"<% } %>
23 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
24 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
25 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
26 | >
27 | 


--------------------------------------------------------------------------------
/sample/checkbox.ejs:
--------------------------------------------------------------------------------
 1 | <input class="prodotype-force-size"  type="<%= type %>"
 2 |   <% if(autofocus) { %>autofocus<% } %>
 3 |   <% if(disabled) { %>disabled<% } %>
 4 |   <% if(form) { %>form="<%= form %>"<% } %>
 5 |   <% if(name) { %>name="<%= name %>"<% } %>
 6 |   <% if(checked) { %>checked="<%= checked %>"<% } %>
 7 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
 8 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
 9 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
10 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
11 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
12 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
13 |   <% if(onwheel) { %>onwheel="<%= onwheel %>"<% } %>
14 |   <% if(onblur) { %>onblur="<%= onblur %>"<% } %>
15 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
16 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
17 |   <% if(oninput) { %>oninput="<%= oninput %>"<% } %>
18 |   <% if(oninvalid) { %>oninvalid="<%= oninvalid %>"<% } %>
19 |   <% if(onreset) { %>onreset="<%= onreset %>"<% } %>
20 |   <% if(onsearch) { %>onsearch="<%= onsearch %>"<% } %>
21 |   <% if(onselect) { %>onselect="<%= onselect %>"<% } %>
22 |   <% if(onsubmit) { %>onsubmit="<%= onsubmit %>"<% } %>
23 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
24 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
25 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
26 | >
27 | 


--------------------------------------------------------------------------------
/sample/navbar.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Navbar
 3 | description: This is a navigation bar.
 4 | doc: https://bootswatch.com/slate/
 5 | category: Slate CSS components
 6 | tags:
 7 | - list
 8 | - ui
 9 | - ux
10 | - navbar
11 | dependencies:
12 |   link:
13 |   - rel: stylesheet
14 |     href: https://bootswatch.com/slate/bootstrap.css
15 | props:
16 | - name: brand
17 |   expandable: true
18 |   description: Logo or brand name
19 |   type: multiline
20 |   default: Brand
21 | - name: items
22 |   description: Items of the menu
23 |   expandable: true
24 |   type:
25 |     - name: text
26 |       type: string
27 |       description: text of the item
28 |     - name: active
29 |       type: boolean
30 |       default: false
31 |       description: is the item selected?
32 |     - name: href
33 |       type: string
34 |       description: URL to open
35 |     - name: onclick
36 |       type: action
37 |       description: Fires when the user selects this element
38 | - name: links
39 |   hideTitle: true
40 |   description: Links of the menu
41 |   type:
42 |     - name: text
43 |       type: string
44 |       description: text of the item
45 |     - name: href
46 |       type: string
47 |       description: URL to open
48 |     - name: onclick
49 |       type: action
50 |       description: Fires when the user selects this element
51 | - name: onchange
52 |   type: action
53 |   description: Fires when the selection changes
54 | - name: onbrand
55 |   type: action
56 |   description: Click on the brand or logo
57 | 


--------------------------------------------------------------------------------
/src/LinkEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | /**
 5 |  * onChange will be called with the link data, e.g.
 6 |  * {
 7 |  *   "href": "http://lexoyo.me",
 8 |  *   "title": "this is for google",
 9 |  * }
10 |  * Also may contain target, rel, type, download
11 |  */
12 | export default class LinkEditor extends React.Component {
13 |   render() {
14 |     this.props.data.value = this.props.data.value || [];
15 |     return <PropEditorBase data={this.props.data}>
16 |       <div
17 |         onClick={e => {
18 |           if(this.props.onEditLink) this.props.onEditLink(e, this.props.data.value, obj => this.props.onChange(obj));
19 |           // here the e.preventDefault might have been called
20 |           // (case of custom link dialog)
21 |           if(!e.defaultPrevented) {
22 |             // here the e.preventDefault has not been called
23 |             // (case of default link dialog)
24 |             const href = prompt('Enter an url for the link', this.props.data.value.href);
25 |             if(href) {
26 |               this.props.onChange({
27 |                 href,
28 |               })
29 |             }
30 |             else {
31 |               this.props.onChange();
32 |             }
33 |           }
34 |         }}
35 |       >
36 |         <input readOnly placeholder='Url' type='url' value={ this.props.data.value.href ? this.props.data.value.href : '' } />
37 |         <input type="button" value="Edit Link" />
38 |       </div>
39 |     </PropEditorBase>;
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/sample/card.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Card Component
 3 | description: Wide card with share menu button.
 4 | doc: https://getmdl.io/components/#cards-section
 5 | category: Design Element
 6 | tags:
 7 | - material
 8 | - image
 9 | - custom
10 | dependencies:
11 |   script:
12 |   - src: https://code.getmdl.io/1.2.0/material.min.js
13 |     defer: ''
14 |   link:
15 |   - rel: stylesheet
16 |     href: https://fonts.googleapis.com/icon?family=Material+Icons
17 |   - rel: stylesheet
18 |     href: https://code.getmdl.io/1.2.0/material.indigo-pink.min.css
19 | props:
20 | - name: title
21 |   type: string
22 |   default: Welcome
23 |   description: 'The title of the card.'
24 | - name: titleColor
25 |   type: color
26 |   default: "#333333"
27 |   description: 'The title of the card.'
28 | - name: headerHeight
29 |   type: number
30 |   default: 176
31 |   description: 'The height of the header.'
32 | - name: headerColor
33 |   type: color
34 |   default: "#EEEEEE"
35 |   description: 'The background color of the header.'
36 | - name: text
37 |   type: multiline
38 |   default: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
39 |   description: 'The text of the card.'
40 | - name: buttonLabel
41 |   type: string
42 |   default: Get started
43 |   description: 'The label on the button.'
44 | - name: onclick
45 |   type: action
46 |   description: Javascript code executed when the button is clicked.
47 | - name: image
48 |   type: file
49 |   description: 'The image of the card.'
50 |   accept: 'image/*'
51 |   multiple: false
52 |   default:
53 | 


--------------------------------------------------------------------------------
/sample/text.ejs:
--------------------------------------------------------------------------------
 1 | <input class="prodotype-force-size"
 2 |   type="<%= type %>"
 3 |   <% if(autofocus) { %>autofocus<% } %>
 4 |   <% if(disabled) { %>disabled<% } %>
 5 |   <% if(readOnly) { %>readOnly<% } %>
 6 |   <% if(maxLength) { %>maxLength="<%= maxLength %>"<% } %>
 7 |   <% if(placeholder) { %>placeholder="<%= placeholder %>"<% } %>
 8 |   <% if(pattern) { %>pattern="<%= pattern %>"<% } %>
 9 |   <% if(form) { %>form="<%= form %>"<% } %>
10 |   <% if(name) { %>name="<%= name %>"<% } %>
11 |   <% if(value) { %>value="<%= value %>"<% } %>
12 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
13 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
14 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
15 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
16 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
17 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
18 |   <% if(onwheel) { %>onwheel="<%= onwheel %>"<% } %>
19 |   <% if(onblur) { %>onblur="<%= onblur %>"<% } %>
20 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
21 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
22 |   <% if(oninput) { %>oninput="<%= oninput %>"<% } %>
23 |   <% if(oninvalid) { %>oninvalid="<%= oninvalid %>"<% } %>
24 |   <% if(onreset) { %>onreset="<%= onreset %>"<% } %>
25 |   <% if(onsearch) { %>onsearch="<%= onsearch %>"<% } %>
26 |   <% if(onselect) { %>onselect="<%= onselect %>"<% } %>
27 |   <% if(onsubmit) { %>onsubmit="<%= onsubmit %>"<% } %>
28 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
29 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
30 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
31 | >
32 | 


--------------------------------------------------------------------------------
/sample/date.ejs:
--------------------------------------------------------------------------------
 1 | <input class="prodotype-force-size" type="<%= type %>"
 2 |   <% if(autocomplete) { %>autocomplete<% } %>
 3 |   <% if(autofocus) { %>autofocus<% } %>
 4 |   <% if(disabled) { %>disabled<% } %>
 5 |   <% if(readOnly) { %>readOnly<% } %>
 6 |   <% if(form) { %>form="<%= form %>"<% } %>
 7 |   <% if(max) { %>max="<%= max %>"<% } %>
 8 |   <% if(min) { %>min="<%= min %>"<% } %>
 9 |   <% if(name) { %>name="<%= name %>"<% } %>
10 |   <% if(readOnly) { %>readOnly<% } %>
11 |   <% if(required) { %>required<% } %>
12 |   <% if(step) { %>step="<%= step %>"<% } %>
13 |   <% if(value) { %>value="<%= value %>"<% } %>
14 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
15 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
16 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
17 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
18 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
19 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
20 |   <% if(onwheel) { %>onwheel="<%= onwheel %>"<% } %>
21 |   <% if(onblur) { %>onblur="<%= onblur %>"<% } %>
22 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
23 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
24 |   <% if(oninput) { %>oninput="<%= oninput %>"<% } %>
25 |   <% if(oninvalid) { %>oninvalid="<%= oninvalid %>"<% } %>
26 |   <% if(onreset) { %>onreset="<%= onreset %>"<% } %>
27 |   <% if(onsearch) { %>onsearch="<%= onsearch %>"<% } %>
28 |   <% if(onselect) { %>onselect="<%= onselect %>"<% } %>
29 |   <% if(onsubmit) { %>onsubmit="<%= onsubmit %>"<% } %>
30 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
31 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
32 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
33 | >
34 | 


--------------------------------------------------------------------------------
/sample/number.ejs:
--------------------------------------------------------------------------------
 1 | <input class="prodotype-force-size"
 2 |   type="<%= type %>"
 3 |   <% if(autocomplete) { %>autocomplete<% } %>
 4 |   <% if(autofocus) { %>autofocus<% } %>
 5 |   <% if(disabled) { %>disabled<% } %>
 6 |   <% if(readOnly) { %>readOnly<% } %>
 7 |   <% if(form) { %>form="<%= form %>"<% } %>
 8 |   <% if(max) { %>max="<%= max %>"<% } %>
 9 |   <% if(min) { %>min="<%= min %>"<% } %>
10 |   <% if(name) { %>name="<%= name %>"<% } %>
11 |   <% if(readOnly) { %>readOnly<% } %>
12 |   <% if(required) { %>required<% } %>
13 |   <% if(step) { %>step="<%= step %>"<% } %>
14 |   <% if(value) { %>value="<%= value %>"<% } %>
15 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
16 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
17 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
18 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
19 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
20 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
21 |   <% if(onwheel) { %>onwheel="<%= onwheel %>"<% } %>
22 |   <% if(onblur) { %>onblur="<%= onblur %>"<% } %>
23 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
24 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
25 |   <% if(oninput) { %>oninput="<%= oninput %>"<% } %>
26 |   <% if(oninvalid) { %>oninvalid="<%= oninvalid %>"<% } %>
27 |   <% if(onreset) { %>onreset="<%= onreset %>"<% } %>
28 |   <% if(onsearch) { %>onsearch="<%= onsearch %>"<% } %>
29 |   <% if(onselect) { %>onselect="<%= onselect %>"<% } %>
30 |   <% if(onsubmit) { %>onsubmit="<%= onsubmit %>"<% } %>
31 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
32 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
33 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
34 | >
35 | 


--------------------------------------------------------------------------------
/src/Renderer.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | export default class Renderer {
 4 |   constructor() {
 5 |     this.templates = {};
 6 |   }
 7 |   render(def, data, dataSources, templateName) {
 8 |     return new Promise((resolve, reject) => {
 9 |       let dataWithDefaults = loadDefaults(def.props, data);
10 |       if(this.templates[templateName]) {
11 |         this.doRender(dataWithDefaults, dataSources, this.templates[templateName], resolve, reject);
12 |       }
13 |       else {
14 |         var oReq = new XMLHttpRequest();
15 |         oReq.open("GET", `${ def.rootPath }/${ templateName }.ejs`);
16 |         oReq.send();
17 |         oReq.addEventListener("error", (e) => {
18 |           reject(e);
19 |         });
20 |         oReq.addEventListener("load", () => {
21 |           this.templates[templateName] = oReq.responseText;
22 |           this.doRender(dataWithDefaults, dataSources, this.templates[templateName], resolve, reject);
23 |         });
24 |       }
25 |     });
26 |   }
27 |   doRender(data, dataSources, template, resolve, reject) {
28 |     // uid
29 |     if(!data.uid) data.uid = Date.now() + '_' + Math.round(Math.random() * 1000);
30 |     try {
31 |       resolve(ejs.render(template, {
32 |         ...data,
33 |         dataSources,
34 |       }));
35 |     }
36 |     catch(e) {
37 |       console.error('could not render the template', e, data, template);
38 |       reject(e);
39 |     }
40 |   }
41 | }
42 | 
43 | function loadDefaults(props, data) {
44 |   return props.reduce((prev, cur) => {
45 |     if(typeof data[cur.name] === 'undefined')
46 |       prev[cur.name] = cur.default;
47 |     else if(Array.isArray(data[cur.name]) && Array.isArray(cur.type))
48 |       prev[cur.name] = data[cur.name].map((d) => {
49 |         return loadDefaults(cur.type, d);
50 |       });
51 |     else
52 |       prev[cur.name] = data[cur.name];
53 |     return prev;
54 |   }, {});
55 | }
56 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/mixins.less:
--------------------------------------------------------------------------------
 1 | // Mixins
 2 | // --------------------------
 3 | 
 4 | .fa-icon() {
 5 |   display: inline-block;
 6 |   font: normal normal normal @fa-font-size-base/@fa-line-height-base FontAwesome; // shortening font declaration
 7 |   font-size: inherit; // can't have font-size inherit on line above, so need to override
 8 |   text-rendering: auto; // optimizelegibility throws things off #1094
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 | 
12 | }
13 | 
14 | .fa-icon-rotate(@degrees, @rotation) {
15 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation})";
16 |   -webkit-transform: rotate(@degrees);
17 |       -ms-transform: rotate(@degrees);
18 |           transform: rotate(@degrees);
19 | }
20 | 
21 | .fa-icon-flip(@horiz, @vert, @rotation) {
22 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=@{rotation}, mirror=1)";
23 |   -webkit-transform: scale(@horiz, @vert);
24 |       -ms-transform: scale(@horiz, @vert);
25 |           transform: scale(@horiz, @vert);
26 | }
27 | 
28 | 
29 | // Only display content to screen readers. A la Bootstrap 4.
30 | //
31 | // See: http://a11yproject.com/posts/how-to-hide-content/
32 | 
33 | .sr-only() {
34 |   position: absolute;
35 |   width: 1px;
36 |   height: 1px;
37 |   padding: 0;
38 |   margin: -1px;
39 |   overflow: hidden;
40 |   clip: rect(0,0,0,0);
41 |   border: 0;
42 | }
43 | 
44 | // Use in conjunction with .sr-only to only display content when it's focused.
45 | //
46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
47 | //
48 | // Credit: HTML5 Boilerplate
49 | 
50 | .sr-only-focusable() {
51 |   &:active,
52 |   &:focus {
53 |     position: static;
54 |     width: auto;
55 |     height: auto;
56 |     margin: 0;
57 |     overflow: visible;
58 |     clip: auto;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/pub/demo-simple.js:
--------------------------------------------------------------------------------
 1 | var stage = document.getElementById('stage');
 2 | var ui = document.getElementById('ui');
 3 | var prodotype = new Prodotype(ui, './sample');
 4 | prodotype.ready(function(err) {
 5 |   // create a component in the stage div
 6 |   var templateName = 'card';
 7 |   var name = prodotype.createName(templateName, []);
 8 |   var data = {
 9 |     name: name
10 |   };
11 |   prodotype.decorate(templateName, data).then(html => stage.innerHTML = html);
12 |   // update dependencies for this component
13 |   var unused = prodotype.getUnusedDependencies(document.head.querySelectorAll('[data-dependency]'), [{templateName: templateName}]);
14 |   for(var idx=0; idx < unused.length; idx++) {
15 |     document.head.removeChild(unused[idx]);
16 |   }
17 |   // add missing dependencies (scripts and style sheets)
18 |   var missing = prodotype.getMissingDependencies(document.head, [{templateName: templateName}]);
19 |   for(var idx=0; idx < missing.length; idx++) {
20 |     var el = missing[idx];
21 |     el.setAttribute('data-dependency', '')
22 |     document.head.appendChild(el);
23 |   }
24 |   setTimeout(function() {
25 |     // displays tool boxes and edit the component
26 |     prodotype.edit(data, [{templateName:templateName}], templateName, {
27 |       onChange: function(newData, html) {
28 |         data = newData;
29 |         stage.innerHTML = html;
30 |       },
31 |       onBrowse: function(e, url, cbk) {
32 |         console.log('custom event called, do not prevent default for the demo, let the default editor handle it');
33 |         // e.preventDefault();
34 |         cbk(url);
35 |       },
36 |       onEditLink: function(e, linkData, cbk) {
37 |         console.log('custom event called, do not prevent default for the demo, let the default editor handle it');
38 |         // e.preventDefault();
39 |         cbk(linkData);
40 |       },  
41 |     });
42 |   }, 1000);
43 | });
44 | 
45 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_mixins.scss:
--------------------------------------------------------------------------------
 1 | // Mixins
 2 | // --------------------------
 3 | 
 4 | @mixin fa-icon() {
 5 |   display: inline-block;
 6 |   font: normal normal normal #{$fa-font-size-base}/#{$fa-line-height-base} FontAwesome; // shortening font declaration
 7 |   font-size: inherit; // can't have font-size inherit on line above, so need to override
 8 |   text-rendering: auto; // optimizelegibility throws things off #1094
 9 |   -webkit-font-smoothing: antialiased;
10 |   -moz-osx-font-smoothing: grayscale;
11 | 
12 | }
13 | 
14 | @mixin fa-icon-rotate($degrees, $rotation) {
15 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
16 |   -webkit-transform: rotate($degrees);
17 |       -ms-transform: rotate($degrees);
18 |           transform: rotate($degrees);
19 | }
20 | 
21 | @mixin fa-icon-flip($horiz, $vert, $rotation) {
22 |   -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation}, mirror=1)";
23 |   -webkit-transform: scale($horiz, $vert);
24 |       -ms-transform: scale($horiz, $vert);
25 |           transform: scale($horiz, $vert);
26 | }
27 | 
28 | 
29 | // Only display content to screen readers. A la Bootstrap 4.
30 | //
31 | // See: http://a11yproject.com/posts/how-to-hide-content/
32 | 
33 | @mixin sr-only {
34 |   position: absolute;
35 |   width: 1px;
36 |   height: 1px;
37 |   padding: 0;
38 |   margin: -1px;
39 |   overflow: hidden;
40 |   clip: rect(0,0,0,0);
41 |   border: 0;
42 | }
43 | 
44 | // Use in conjunction with .sr-only to only display content when it's focused.
45 | //
46 | // Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
47 | //
48 | // Credit: HTML5 Boilerplate
49 | 
50 | @mixin sr-only-focusable {
51 |   &:active,
52 |   &:focus {
53 |     position: static;
54 |     width: auto;
55 |     height: auto;
56 |     margin: 0;
57 |     overflow: visible;
58 |     clip: auto;
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/src/PropEditorBase.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | 
 3 | export default class PropEditorBase extends React.Component {
 4 |   static idx = 0;
 5 |   state = {
 6 |   }
 7 |   render() {
 8 |     if(this.props.data.expandable) {
 9 |       const expand = typeof this.state.expand === 'undefined' ? this.props.expand : this.state.expand || false;
10 |       return <div className={"prop-editor-base prop-editor-expandable " + (expand ? "prop-editor-expand " : " ") + (this.props.className ? this.props.className + " " : "") + (this.props.data.className ? this.props.data.className + " " : "") + ("prop_" + this.props.data.name + " ")}>
11 |         <label
12 |           className="prop-editor-name"
13 |           onClick={e => this.setState({expand:!expand})}
14 |         >
15 |           <span className={"fa fa-fw fa-inverse " + (expand ? "fa-caret-down" : "fa-caret-right")}></span>
16 |           { this.props.data.displayName || this.props.data.name }
17 |         </label>
18 |         { expand && this.props.data.description ? <p className="prop-editor-description">{this.props.data.description}</p> : "" }
19 |         <div className="prop-editor-container">
20 |           { expand ? this.props.children : "" }
21 |         </div>
22 |       </div>;
23 |     }
24 |     else {
25 |       return <div className={"prop-editor-base prop-editor-no-expandable " + (this.props.className ? this.props.className + " " : "") + (this.props.data.className ? this.props.data.className + " " : "") + ("prop_" + this.props.data.name + " ")}>
26 |         {
27 |           this.props.data.hideTitle ? '' :
28 |             <label
29 |               className="prop-editor-name"
30 |               title={this.props.data.description}
31 |             >
32 |               { this.props.data.displayName || this.props.data.name }
33 |             </label>
34 |         }
35 |         <div className="prop-editor-container">
36 |           { this.props.children }
37 |         </div>
38 |       </div>;
39 |     }
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/bin/prodotype:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | // this script loads all templates (yml files and optional ejs files)
 4 | // copies all ejs files in the dest folder
 5 | // and creates a json file for all the templates configs
 6 | 
 7 | // modules
 8 | var path = require('path');
 9 | var fs = require('fs');
10 | var yaml = require("js-yaml");
11 | 
12 | // get the paths from the script inputs
13 | var srcFolder = process.argv[2];
14 | var dstFolder = process.argv[3];
15 | var src = path.resolve(process.cwd(), srcFolder || 'sample');
16 | var dst = path.resolve(process.cwd(), dstFolder || 'pub/components');
17 | 
18 | console.log('Building', src, 'to', dst, 'in current dir:', process.cwd());
19 | 
20 | // start the process
21 | var allComponentsJson = {};
22 | fs.readdirSync(src).map(function (file) {
23 |   // full path (folder + file name)
24 |   return path.join(src, file);
25 | }).filter(function (file) {
26 |   // keep only .yml files
27 |   // and not folders
28 |   return fs.statSync(file).isFile()
29 |     && path.extname(file) === '.yml';
30 | }).forEach(function (file) {
31 |   // create dest folder
32 |   if(!fs.existsSync(dst)) {
33 |     fs.mkdirSync(dst);
34 |   }
35 | 
36 |   // paths
37 |   var name = path.basename(file, '.yml');
38 |   var ymlSrcFile = path.resolve(src, name + '.yml');
39 |   var ejsSrcFile = path.resolve(src, name + '.ejs');
40 |   var ejsDstFile = path.resolve(dst, name + '.ejs');
41 | 
42 |   console.log("Building template", name);
43 | 
44 |   // get the component's json definition
45 |   // out of the yml file
46 |   var json = yaml.load(fs.readFileSync(ymlSrcFile));
47 |   allComponentsJson[name] = json;
48 | 
49 |   // create the ejs template
50 |   if(fs.existsSync(ejsSrcFile)) {
51 |     fs.createReadStream(ejsSrcFile).pipe(fs.createWriteStream(ejsDstFile));
52 |   }
53 |   else {
54 |     fs.writeFileSync(ejsDstFile, '');
55 |   }
56 | });
57 | 
58 | // save the components json definitions
59 | console.log('writing', dst + '/components.json');
60 | fs.writeFileSync(dst + '/components.json', JSON.stringify(allComponentsJson));
61 | 


--------------------------------------------------------------------------------
/sample/unslider.ejs:
--------------------------------------------------------------------------------
 1 | <!-- preview -->
 2 | <!-- just the 1st image 100% size -->
 3 | <div class="prodotype-preview prodotype-force-size">
 4 |   <% if(slides && slides.length) { %>
 5 |     <div style="<% if(slides[0].bgColor) { %>background-color: <%= slides[0].bgColor %>; <% } %> <% if(slides[0].color) { %>color:<%= slides[0].color %>; <% } %><% if(slides[0].image && slides[0].image[0]) { %>background-image:url('<%= slides[0].image[0].url %>'); background-repeat: no-repeat; background-size: cover; background-position: 50%; <% } %> width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;">
 6 |       <p>~ Preview ~</p>
 7 |     </div>
 8 |   <% } %>
 9 | </div>
10 | <!-- runtime -->
11 | <!-- the whole slideshow -->
12 | <div class="prodotype-runtime" id="<%= uid %>">
13 |   <ul>
14 |   <% for(var idx in slides) { %>
15 |     <li style="<% if(slides[idx].bgColor) { %>background-color: <%= slides[idx].bgColor %>; <% } %> <% if(slides[idx].color) { %>color:<%= slides[idx].color %>; <% } %><% if(slides[idx].image && slides[idx].image[0]) { %>background-image:url('<%= slides[idx].image[0].url %>'); background-repeat: no-repeat; background-size: cover; background-position: 50%;<% } %>">
16 |       <% if(slides[idx].text) { %><%- slides[idx].text %><% } %>
17 |     </li>
18 |   <% } %>
19 |   </ul>
20 | </div>
21 | <script type="text/javascript">
22 |   (function() {
23 |     function initUnslider() {
24 |       var slider = $('#<%= uid %>').unslider({
25 |         "autoplay": <%= autoplay %>,
26 |         "speed": <%= speed %>,
27 |         "delay": <%= delay %>,
28 |         "index": <%= index %>,
29 |         "nav": <%= nav %>,
30 |         "arrows": <%= arrows %>,
31 |         "activeClass": "<%= activeClass %>"
32 |       }
33 |       //  Listen to slide changes
34 |       <% if(onchange) { %>
35 |       slider.on('unslider.change', function(event, index, slide) {
36 |         <%= onchange %>
37 |       });
38 |     <% } %>
39 |     }
40 |     initUnslider();
41 |   })();
42 |   // TODO: expose initUnslider and use it each time we refresh
43 | </script>
44 | 


--------------------------------------------------------------------------------
/src/NumberEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | export default class NumberEditor extends React.Component {
 5 |   getUnit(val, units) {
 6 |     if(Array.isArray(units)) {
 7 |       const res = units.reduce((prev, unit) => val !== '' && val.toString().endsWith(unit) ? unit : prev, null);
 8 |       if(res === null && units.includes('')) return '';
 9 |       else return res;
10 |     }
11 |     return '';
12 |   }
13 |   getUnitSelector(units, currentValue, currentUnit) {
14 |     if(Array.isArray(units)) {
15 |       const optional = {};
16 |       if(!isNaN(currentValue) && currentUnit !== null) {
17 |         optional.value = currentUnit;
18 |       }
19 |       return <select
20 |         ref={r => this.select = r}
21 |         className="unit-selector"
22 |         onChange={(e) => this.props.onChange(isNaN(currentValue) || currentValue === '0' ? '' : currentValue + e.target.value)}
23 |         { ...optional }
24 |         >
25 |         {
26 |           units.map((unit) => <option
27 |             value = { unit }
28 |             key = { unit || 'none' }
29 |           >{ unit }</option>)
30 |         }
31 |       </select>
32 |     }
33 |     return null;
34 |   }
35 |   render() {
36 |     const units = this.props.data.unit;
37 |     const value = this.props.data.value || '';
38 |     const currentValue = parseFloat(value);
39 |     const currentUnit = this.getUnit(value, units);
40 |     const unitSelector = this.getUnitSelector(units, currentValue, currentUnit);
41 |     return <PropEditorBase className="number-editor" onChange={this.props.onChange} data={this.props.data}>
42 |       <input
43 |         className="value"
44 |         type="number"
45 |         placeholder={ this.props.data.placeholder }
46 |         value={ isNaN(currentValue) ? '' : currentValue }
47 |         onChange={(e) => this.props.onChange(!this.select || e.target.value === '' || e.target.value === '0' ? e.target.value : e.target.value + this.select.value)}
48 |       />
49 |       { unitSelector }
50 |     </PropEditorBase>;
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/src/ObjectArrayEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import Editor from './Editor'
 3 | import PropEditorBase from './PropEditorBase';
 4 | 
 5 | export default class ObjectArrayEditor extends React.Component {
 6 |   render() {
 7 |     this.props.data.value = this.props.data.value || [];
 8 |     if(!this.props.data.value.map) {
 9 |       console.error('ObjectArrayEditor: the property needs to be an array but it is not (', typeof this.props.data.value, ')');
10 |       return null;
11 |     }
12 |     const editors = this.props.data.value.map((subData, idx) => {
13 |       const subEditors = Editor.getSubEditors(this.props, this.props.data.type, subData, this.props.data.value);
14 |       return <div
15 |         className="sub-editors-container"
16 |         key={idx}
17 |         >
18 |           <div className="sub-editors">
19 |             {subEditors}
20 |           </div>
21 |           <span
22 |             className="btn remove-btn fa fa-trash-o"
23 |             onClick={e => {
24 |               this.props.data.value.splice(idx, 1);
25 |               this.props.onChange(this.props.data.value);
26 |             }}
27 |           ></span>
28 |           <span
29 |             className="btn up-btn fa fa-angle-up"
30 |             onClick={e => {
31 |               this.props.data.value.splice(Math.max(0, idx - 1), 0, this.props.data.value.splice(idx, 1)[0]);
32 |               this.props.onChange(this.props.data.value);
33 |             }}
34 |           ></span>
35 |           <span
36 |             className="btn up-btn fa fa-angle-down"
37 |             onClick={e => {
38 |               this.props.data.value.splice(Math.min(this.props.data.value.length, idx + 1), 0, this.props.data.value.splice(idx, 1)[0]);
39 |               this.props.onChange(this.props.data.value);
40 |             }}
41 |           ></span>
42 |         </div>;
43 |     });
44 |     return <PropEditorBase data={this.props.data}>
45 |       { editors }
46 |       <div
47 |         className="btn add-btn fa fa-2x fa-plus-square-o"
48 |         onClick={e => this.props.onChange(this.props.data.value.concat([{}]))}
49 |       ></div>
50 |     </PropEditorBase>;
51 |   }
52 | }
53 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "prodotype",
 3 |   "version": "1.0.28",
 4 |   "description": "",
 5 |   "main": "index.js",
 6 |   "author": "lexoyo",
 7 |   "license": "MIT",
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "https://github.com/silexlabs/Prodotype.git"
11 |   },
12 |   "engines": {
13 |     "node": ">=8.16.3 <=15.x"
14 |   },
15 |   "scripts": {
16 |     "release": "",
17 |     "prepare": "run-s build:editor:debug cp-ejs",
18 |     "manualPrepublishOnly": "git clean -n && read -p \"Continue? (CTRL+C to abort)?\" && git clean -fd && npm run build:editor:release && npm run cp-ejs",
19 |     "build": "run-s build:editor:release cp-ejs build:templates",
20 |     "build:debug": "run-s build:editor:debug cp-ejs build:templates",
21 |     "watch": "nodemon --watch 'src' --exec 'npm run build'",
22 |     "watch:test": "nodemon --watch 'src' --exec 'npm run build:debug && npm test'",
23 |     "reload": "reload -v -b -d pub/ -p 8080",
24 |     "build:editor:release": "browserify src/Prodotype.js -o pub/prodotype.js -t [ babelify ]",
25 |     "build:editor:debug": "browserify src/Prodotype.js -o pub/prodotype.js -t [ babelify --sourceMap ] -d",
26 |     "cp-ejs": "cp `node_modules ejs`/ejs/ejs.min.js pub/ejs.min.js",
27 |     "build:templates": "bin/prodotype sample/ pub/sample",
28 |     "start": "http-server .",
29 |     "lint": "echo NO LINTER YET",
30 |     "test": "jest"
31 |   },
32 |   "bin": {
33 |     "prodotype": "bin/prodotype"
34 |   },
35 |   "dependencies": {
36 |     "ejs": "^3.1.6",
37 |     "js-yaml": "^4.1.0",
38 |     "node_modules-path": "*",
39 |     "object-path": "^0.11.5"
40 |   },
41 |   "devDependencies": {
42 |     "@babel/core": "^7.15.0",
43 |     "@babel/plugin-proposal-class-properties": "^7.14.5",
44 |     "@babel/preset-env": "^7.15.0",
45 |     "@babel/preset-react": "^7.14.5",
46 |     "babelify": "^10.0.0",
47 |     "brace": "^0.11.1",
48 |     "browserify": "^17.0.0",
49 |     "core-js": "^3.16.1",
50 |     "http-server": "^13.0.0",
51 |     "jest": "^27.0.6",
52 |     "nodemon": "^2.0.12",
53 |     "npm-run-all": "^4.1.5",
54 |     "react": "^17.0.2",
55 |     "react-ace": "^6.5.0",
56 |     "react-dom": "^17.0.2",
57 |     "react-test-renderer": "^17.0.2",
58 |     "reload": "^3.2.0"
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/sample/form.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Form component (<form> tag)
 3 | description: Used to send form data to a server.
 4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
 5 | category: Form Input
 6 | tags:
 7 | - form
 8 | - input
 9 | - dropdown
10 | dependencies:
11 | props:
12 | - name: action
13 |   type: string
14 |   description: 'The URI of a program that processes the form information.'
15 | - name: name
16 |   type: string
17 |   description: 'The name of the form (must be unique).'
18 | - name: target
19 |   type: string
20 |   description: 'Indicates where to display the response that is received after submitting the form. Possible values are: _self, _blank, _parent, _top, iframename.'
21 | - name: autocomplete
22 |   type:
23 |   - off
24 |   - on
25 |   description: 'Indicates whether input elements can by default have their values automatically completed by the browser.'
26 | - name: novalidate
27 |   type: boolean
28 |   description: 'Prevent the form to be validated when submitted.'
29 | - name: autocapitalize
30 |   type:
31 |   - none
32 |   - sentences
33 |   - words
34 |   - characters
35 |   - on
36 |   - off
37 |   description: 'This is a nonstandard attribute used by iOS Safari Mobile which controls whether and how the text value for textual form control descendants should be automatically capitalized as it is entered/edited by the user.'
38 | - name: onblur
39 |   type: action
40 |   description: 'Fires the moment that the element loses focus'
41 | - name: onchange
42 |   type: action
43 |   description: 'Fires the moment when the value of the element is changed'
44 | - name: oncontextmenu
45 |   type: action
46 |   description: 'Fires when a context menu is triggered'
47 | - name: onfocus
48 |   type: action
49 |   description: 'Fires the moment when the element gets focus'
50 | - name: oninput
51 |   type: action
52 |   description: 'Fires when an element gets user input'
53 | - name: oninvalid
54 |   type: action
55 |   description: 'Fires when an element is invalid'
56 | - name: onreset
57 |   type: action
58 |   description: 'Fires when the Reset button in a form is clicked'
59 | - name: onselect
60 |   type: action
61 |   description: 'Fires after some text has been selected in an element'
62 | - name: onsubmit
63 |   type: action
64 |   description: 'Fires when a form is submitted'
65 | 


--------------------------------------------------------------------------------
/sample/select.ejs:
--------------------------------------------------------------------------------
 1 | <select class="prodotype-force-size"
 2 |   <% if(autofocus) { %>autofocus<% } %>
 3 |   <% if(disabled) { %>disabled<% } %>
 4 |   <% if(multiple) { %>multiple<% } %>
 5 |   <% if(required) { %>required<% } %>
 6 |   <% if(form) { %>form="<%= form %>"<% } %>
 7 |   <% if(name) { %>name="<%= name %>"<% } %>
 8 |   <% if(size) { %>size="<%= size %>"<% } %>
 9 |   <% if(onchange) { %>onchange="<%= onchange %>"<% } %>
10 |   <% if(onmousedown) { %>onmousedown="<%= onmousedown %>"<% } %>
11 |   <% if(onmousemove) { %>onmousemove="<%= onmousemove %>"<% } %>
12 |   <% if(onmouseout) { %>onmouseout="<%= onmouseout %>"<% } %>
13 |   <% if(onmouseover) { %>onmouseover="<%= onmouseover %>"<% } %>
14 |   <% if(onmouseup) { %>onmouseup="<%= onmouseup %>"<% } %>
15 |   <% if(onwheel) { %>onwheel="<%= onwheel %>"<% } %>
16 |   <% if(onblur) { %>onblur="<%= onblur %>"<% } %>
17 |   <% if(oncontextmenu) { %>oncontextmenu="<%= oncontextmenu %>"<% } %>
18 |   <% if(onfocus) { %>onfocus="<%= onfocus %>"<% } %>
19 |   <% if(oninput) { %>oninput="<%= oninput %>"<% } %>
20 |   <% if(oninvalid) { %>oninvalid="<%= oninvalid %>"<% } %>
21 |   <% if(onreset) { %>onreset="<%= onreset %>"<% } %>
22 |   <% if(onsearch) { %>onsearch="<%= onsearch %>"<% } %>
23 |   <% if(onselect) { %>onselect="<%= onselect %>"<% } %>
24 |   <% if(onsubmit) { %>onsubmit="<%= onsubmit %>"<% } %>
25 |   <% if(onkeydown) { %>onkeydown="<%= onkeydown %>"<% } %>
26 |   <% if(onkeypres) { %>onkeypres="<%= onkeypres %>"<% } %>
27 |   <% if(onkeyup) { %>onkeyup="<%= onkeyup %>"<% } %>
28 |   >
29 |   <% for(var idx in data) { %>
30 |     <option
31 |     <% if(data[idx].disabled) { %>disabled<% } %>
32 |     <% if(data[idx].selected) { %>selected<% } %>
33 |     <% if(data[idx].label) {%>
34 |       label="<%= data[idx].label %>"
35 |       <% if(!data[idx].value) { %>value="<%= data[idx].label %>"<% } %>
36 |     <% } %>
37 |     <% if(data[idx].value) {%>
38 |       value="<%= data[idx].value %>"
39 |       <% if(!data[idx].label) { %>label="<%= data[idx].value %>"<% } %>
40 |     <% } %>
41 |     >
42 |       <% if(data[idx].label) { %>
43 |         <%= data[idx].label %>
44 |       <% } else if(data[idx].value) { %>
45 |         <%= data[idx].value %>
46 |       <% } else { %>
47 |         <%= data[idx] %>
48 |       <% } %>
49 |     </option>
50 |   <% } %>
51 | </select>
52 | 


--------------------------------------------------------------------------------
/sample/unslider.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Unslider slideshow
 3 | description: 'Display a series of texts and images.'
 4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 5 | category: Design Element
 6 | tags:
 7 | - form
 8 | - input
 9 | - dropdown
10 | - text
11 | dependencies:
12 |   script:
13 |   - src: https://code.jquery.com/jquery-2.1.4.min.js
14 |   - src: https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/js/unslider-min.js
15 |   link:
16 |   - rel: stylesheet
17 |     href:   https://cdnjs.cloudflare.com/ajax/libs/unslider/2.0.3/css/unslider.css
18 | props:
19 | - name: slides
20 |   description: images and texts
21 |   type:
22 |     - name: image
23 |       type: file
24 |       description: image of the slide
25 |     - name: text
26 |       type: multiline
27 |       description: text to display in the slide
28 |     - name: bgColor
29 |       type: color
30 |       description: "the slide's background color"
31 |     - name: color
32 |       type: color
33 |       description: color of the text
34 | - name: animation
35 |   default: 'horizontal'
36 |   description: How should Unslider animate each slide? Right now, there's three different animation types
37 |   type:
38 |   - horizontal
39 |   - vertical
40 |   - fade
41 | - name: autoplay
42 |   type: boolean
43 |   default: false
44 |   description: Should the slider move by itself or only be triggered manually?
45 | - name: speed
46 |   type: number
47 |   default: 750
48 |   description: How fast (in milliseconds) Unslider should animate between slides.
49 | - name: delay
50 |   type: number
51 |   default: 3000
52 |   description: If autoplay is set to true, how many milliseconds should pass between moving the slides?
53 | - name: index
54 |   type: number
55 |   default: 0
56 |   description: "If this is set to an integer, 'first' or 'last', it'll set the default slide to that position rather than the first slide."
57 | - name: nav
58 |   type: boolean
59 |   default: true
60 |   description: Do you want to generate an automatic clickable navigation for each slide in your slider?
61 | - name: arrows
62 |   type: boolean
63 |   default: true
64 |   description: Do you want to add left/right arrows to your slider?
65 | - name: activeClass
66 |   type: string
67 |   default: 'unslider-active'
68 |   description: What class should Unslider set to the active slides and navigation items? Use this if you want to match your CSS.
69 | - name: onchange
70 |   type: action
71 |   description: "Fires the moment when the slide changes"
72 | 


--------------------------------------------------------------------------------
/sample/_test-props-editor.ejs:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   #_<%= uid %> th {
  3 |     border: 1px solid lightgrey;
  4 |     padding: 20px;
  5 |     font-weight: 100;
  6 |     max-width: 300px;
  7 |     overflow: hidden;
  8 |     text-overflow: ellipsis;
  9 |   }
 10 | </style>
 11 | <table id="_<%= uid %>">
 12 |   <caption>Rendered values</caption>
 13 |   <tr>
 14 |     <th>uid</th>
 15 |     <th><%= uid %></th>
 16 |   </tr>
 17 |   <tr>
 18 |     <th>toggleval</th>
 19 |     <th><%= toggleval %></th>
 20 |   </tr>
 21 |   <tr>
 22 |     <th>togglevalNoDefault</th>
 23 |     <th><%= togglevalNoDefault %></th>
 24 |   </tr>
 25 |   <tr>
 26 |     <th>stringvalNOTEXPANDED</th>
 27 |     <th><%= stringvalNOTEXPANDED %></th>
 28 |   </tr>
 29 |   <tr>
 30 |     <th>colorvalNOTEXPANDED</th>
 31 |     <th><%= colorvalNOTEXPANDED %></th>
 32 |   </tr>
 33 |   <tr>
 34 |     <th>numberunitNOTEXPANDED</th>
 35 |     <th><%= numberunitNOTEXPANDED %></th>
 36 |   </tr>
 37 |   <tr>
 38 |     <th>enumval</th>
 39 |     <th><%= enumval %></th>
 40 |   </tr>
 41 |   <tr>
 42 |     <th>boolval</th>
 43 |     <th><%= boolval %></th>
 44 |   </tr>
 45 |   <tr>
 46 |     <th>stringarrayval</th>
 47 |     <th>[<%= stringarrayval.join(', ') %>]</th>
 48 |   </tr>
 49 |   <tr>
 50 |     <th>arrayofobjects</th>
 51 |     <th><%= arrayofobjects ? JSON.stringify(arrayofobjects) : '' %></th>
 52 |   </tr>
 53 |   <tr>
 54 |     <th>objectval</th>
 55 |     <th><%= objectval ? JSON.stringify(objectval) : '' %></th>
 56 |   </tr>
 57 |   <tr>
 58 |     <th>propMixed</th>
 59 |     <th><%= propMixed ? JSON.stringify(propMixed) : '' %></th>
 60 |   </tr>
 61 |   <tr>
 62 |     <th>stringval</th>
 63 |     <th><%= stringval %></th>
 64 |   </tr>
 65 |   <tr>
 66 |     <th>multilineval</th>
 67 |     <th><%- multilineval %></th>
 68 |   </tr>
 69 |   <tr>
 70 |     <th>numberval</th>
 71 |     <th><%= numberval %></th>
 72 |   </tr>
 73 |   <tr>
 74 |     <th>numberunit</th>
 75 |     <th><%= numberunit %></th>
 76 |   </tr>
 77 |   <tr>
 78 |     <th>actionval</th>
 79 |     <th><%= actionval %></th>
 80 |   </tr>
 81 |   <tr>
 82 |     <th>fileval</th>
 83 |     <th><%= fileval %></th>
 84 |   </tr>
 85 |   <tr>
 86 |     <th>colorval</th>
 87 |     <th><%= colorval %></th>
 88 |   </tr>
 89 |   <tr>
 90 |     <th>componentval</th>
 91 |     <th><%= componentval %></th>
 92 |   </tr>
 93 |   <tr>
 94 |     <th>linkval</th>
 95 |     <th><%= linkval ? linkval.href : '' %></th>
 96 |   </tr>
 97 |   <tr>
 98 |     <th>linkvalexpandable</th>
 99 |     <th><%= linkvalexpandable ? linkvalexpandable.href : '' %></th>
100 |   </tr>
101 | </table>
102 | 


--------------------------------------------------------------------------------
/sample/color.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Color Component
 3 | description: 'Let the user select a color. Note: It is not supported in Internet Explorer or Safari.'
 4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 5 | category: Form Input
 6 | tags:
 7 | - form
 8 | - input
 9 | - dropdown
10 | - color
11 | dependencies:
12 | props:
13 | - name: value
14 |   description: The current value
15 |   type: color
16 | - name: required
17 |   description: Whether the component must be filled out before submitting a form
18 |   type: boolean
19 | - name: disabled
20 |   description: Whether the component is disabled, or not
21 |   type: boolean
22 | - name: form
23 |   type: component
24 |   accept:
25 |   - form
26 |   description: "The form element that the component is associated with (its form owner)."
27 | - name: name
28 |   description: Sets the value of the name attribute of a date field
29 |   type: string
30 | - name: autofocus
31 |   description: Whether the component should automatically get focus when the page loads
32 |   type: boolean
33 | - name: onchange
34 |   type: action
35 |   description: "Fires the moment when the value of the element is changed"
36 | - name: onmousedown
37 |   type: action
38 |   description: "Fires when a mouse button is pressed down on an element"
39 | - name: onmousemove
40 |   type: action
41 |   description: "Fires when the mouse pointer is moving while it is over an element"
42 | - name: onmouseout
43 |   type: action
44 |   description: "Fires when the mouse pointer moves out of an element"
45 | - name: onmouseover
46 |   type: action
47 |   description: "Fires when the mouse pointer moves over an element"
48 | - name: onmouseup
49 |   type: action
50 |   description: "Fires when a mouse button is released over an element"
51 | - name: onwheel
52 |   type: action
53 |   description: "Fires when the mouse wheel rolls up or down over an element"
54 | - name: onblur
55 |   type: action
56 |   description: "Fires the moment that the element loses focus"
57 | - name: oncontextmenu
58 |   type: action
59 |   description: "Script to be run when a context menu is triggered"
60 | - name: onfocus
61 |   type: action
62 |   description: "Fires the moment when the element gets focus"
63 | - name: oninput
64 |   type: action
65 |   description: "Script to be run when an element gets user input"
66 | - name: oninvalid
67 |   type: action
68 |   description: "Script to be run when an element is invalid"
69 | - name: onreset
70 |   type: action
71 |   description: "Fires when the Reset button in a form is clicked"
72 | - name: onsearch
73 |   type: action
74 |   description: "Fires when the user writes something in a search field (for <input=\"search\">)"
75 | - name: onselect
76 |   type: action
77 |   description: "Fires after some text has been selected in an element"
78 | - name: onsubmit
79 |   type: action
80 |   description: "Fires when a form is submitted"
81 | - name: onkeydown
82 |   type: action
83 |   description: "Fires when a user is pressing a key"
84 | - name: onkeypres
85 |   type: action
86 |   description: "Fires when a user presses a key"
87 | - name: onkeyup
88 |   type: action
89 |   description: "Fires when a user releases a key"
90 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | Prodotype is used in [Silex website builder](https://www.silex.me) as a component creation tool. Use it to create components and the UI to edit them out of html templates and yaml files.
  3 | 
  4 | Links
  5 | 
  6 | * [Website](http://projects.silexlabs.org/Prodotype/)
  7 | * [Github repo](https://github.com/silexlabs/Prodotype)
  8 | * [npm package](https://www.npmjs.com/package/prodotype)
  9 | * [docs](http://projects.silexlabs.org/Prodotype/)
 10 | 
 11 | Features
 12 | 
 13 | * build components from 1 template file and 1 definition file per component
 14 | * generate a UI to edit each component, which creates a data object
 15 | * render a component given data object
 16 | * manage dependencies for components
 17 | 
 18 | ## Install
 19 | 
 20 | Add to your project and build `pub/prodotype.js`
 21 | 
 22 | ```sh
 23 | $ npm install
 24 | $ npm run build
 25 | ```
 26 | 
 27 | ## Use in your projects
 28 | 
 29 | In your HTML page - e.g. see this [demo page](./pub/index.html)
 30 | 
 31 | ```html
 32 |   <script type="text/javascript" src="./ejs.min.js"></script>
 33 |   <script type="text/javascript" src="./prodotype.js"></script>
 34 |   <div id="stage"></div>
 35 |   <div id="ui"></div>
 36 | ```
 37 | 
 38 | In your js file - e.g. see this [demo script](./pub/demo.js) for a complete / real world example.
 39 | ```js
 40 | // the div where you want your components to be rendered
 41 | const stage = document.querySelector('#stage');
 42 | // the div where we want the UI to edit the components
 43 | const ui = document.querySelector('#ui');
 44 | // where prodotype templates are located
 45 | const templateFolder = './sample'
 46 | // the main Prodotype object
 47 | const prodotype = new Prodotype(ui, templateFolder);
 48 | prodotype.ready(function(err) {
 49 |   // create a slide show in the stage div
 50 |   const templateName = 'unslider';
 51 |   prodotype.decorate(templateName).then(html => stage.innerHTML = html);
 52 |   // display tool boxes to edit the component
 53 |   prodotype.edit(data, [{templateName:templateName}], templateName, {
 54 |     onChange: function(newData, html) {
 55 |       stage.innerHTML = html;
 56 |     }
 57 |   });
 58 | });
 59 | 
 60 | ```
 61 | 
 62 | Run it with `npm start` and you should be able to edit the component like this:
 63 | 
 64 | ![sample component edition](./screenshot.png)
 65 | 
 66 | ## create your own templates
 67 | 
 68 | Create a folder with a `.yaml` file and a `.ejs` file - see [the `sample/` folder](./sample/) to see examples of templates.
 69 | 
 70 | Then build your templates with this command line, which will generate a `components.json` in the destination folder (`pub/sample/` in this example):
 71 | 
 72 | ```sh
 73 | $ npm run build:templates
 74 | ```
 75 | [All the types of editors here](https://github.com/silexlabs/Prodotype/blob/master/src/Editor.js#L29)
 76 | 
 77 | 
 78 | 
 79 | ## Development
 80 | 
 81 | Production (uses http-server to serve `pub/`):
 82 | 
 83 | ```sh
 84 | $ npm start
 85 | ```
 86 | 
 87 | Development (serve, watch, build and live reload):
 88 | 
 89 | ```sh
 90 | $ npm run watch
 91 | $ npm run reload
 92 | ```
 93 | 
 94 | Create a new version
 95 | 
 96 | ```sh
 97 | $ npm version patch
 98 | $ git push origin master --follow-tags
 99 | $ npm publish
100 | ```
101 | 
102 | 


--------------------------------------------------------------------------------
/sample/checkbox.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Checkbox or Radio Component
 3 | description: 'Let the user select an option. Use the "name" property to group the radio buttons.'
 4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 5 | category: Form Input
 6 | tags:
 7 | - form
 8 | - input
 9 | - dropdown
10 | - checkbox
11 | - radio
12 | dependencies:
13 | props:
14 | - name: checked
15 |   description: The current value
16 |   type: boolean
17 | - name: type
18 |   description: The type of the component (radio or checkbox)
19 |   type:
20 |   - checkbox
21 |   - radio
22 |   default: checkbox
23 | - name: required
24 |   description: Whether the component must be filled out before submitting a form
25 |   type: boolean
26 | - name: disabled
27 |   description: Whether the component is disabled, or not
28 |   type: boolean
29 | - name: form
30 |   type: component
31 |   accept:
32 |   - form
33 |   description: "The form element that the component is associated with (its form owner)."
34 | - name: name
35 |   description: Sets the value of the name attribute of a date field
36 |   type: string
37 | - name: autofocus
38 |   description: Whether the component should automatically get focus when the page loads
39 |   type: boolean
40 | - name: onchange
41 |   type: action
42 |   description: "Fires the moment when the value of the element is changed"
43 | - name: onmousedown
44 |   type: action
45 |   description: "Fires when a mouse button is pressed down on an element"
46 | - name: onmousemove
47 |   type: action
48 |   description: "Fires when the mouse pointer is moving while it is over an element"
49 | - name: onmouseout
50 |   type: action
51 |   description: "Fires when the mouse pointer moves out of an element"
52 | - name: onmouseover
53 |   type: action
54 |   description: "Fires when the mouse pointer moves over an element"
55 | - name: onmouseup
56 |   type: action
57 |   description: "Fires when a mouse button is released over an element"
58 | - name: onwheel
59 |   type: action
60 |   description: "Fires when the mouse wheel rolls up or down over an element"
61 | - name: onblur
62 |   type: action
63 |   description: "Fires the moment that the element loses focus"
64 | - name: oncontextmenu
65 |   type: action
66 |   description: "Script to be run when a context menu is triggered"
67 | - name: onfocus
68 |   type: action
69 |   description: "Fires the moment when the element gets focus"
70 | - name: oninput
71 |   type: action
72 |   description: "Script to be run when an element gets user input"
73 | - name: oninvalid
74 |   type: action
75 |   description: "Script to be run when an element is invalid"
76 | - name: onreset
77 |   type: action
78 |   description: "Fires when the Reset button in a form is clicked"
79 | - name: onsearch
80 |   type: action
81 |   description: "Fires when the user writes something in a search field (for <input=\"search\">)"
82 | - name: onselect
83 |   type: action
84 |   description: "Fires after some text has been selected in an element"
85 | - name: onsubmit
86 |   type: action
87 |   description: "Fires when a form is submitted"
88 | - name: onkeydown
89 |   type: action
90 |   description: "Fires when a user is pressing a key"
91 | - name: onkeypres
92 |   type: action
93 |   description: "Fires when a user presses a key"
94 | - name: onkeyup
95 |   type: action
96 |   description: "Fires when a user releases a key"
97 | 


--------------------------------------------------------------------------------
/src/FileEditor.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import PropEditorBase from './PropEditorBase';
 3 | 
 4 | /**
 5 |  * onChange will be called with an array of File data, e.g.
 6 |  * {
 7 |  *   "url": "raw data or url",
 8 |  *   "lastModified": last modified time of the file, in millisecond since the UNIX epoch (January 1st, 1970 at Midnight).
 9 |  *   "lastModifiedDate": last modified Date of the file referenced by the File object.
10 |  *   "name": name of the file referenced by the File object.
11 |  *   "size": size, in bytes, of the data contained in the Blob object.
12 |  *   "type": string indicating the MIME type of the data contained in the Blob. If the type is unknown, this string is empty.
13 |  * }
14 |  */
15 | export default class FileEditor extends React.Component {
16 |   /**
17 |    * a custom script has intercepted the browse command
18 |    * this happens when onBrowse is set and calls e.preventDefault()
19 |    */
20 |   changedCustom(fileLikeObjects) {
21 |     this.props.onChange(fileLikeObjects);
22 |   }
23 |   changed() {
24 |     const files = this.input.files;
25 |     if(files.length > 0) {
26 |       let result = [];
27 |       for(let idx = 0; idx < files.length; idx++) {
28 |         const reader = new FileReader();
29 |         const file = files[idx];
30 |         reader.addEventListener("load", () => {
31 |           const clone = {
32 |             "url": reader.result,
33 |             "lastModified": file.lastModified,
34 |             "lastModifiedDate": file.lastModifiedDate,
35 |             "name": file.name,
36 |             "size": file.size,
37 |             "type": file.type,
38 |           };
39 |           result.push(clone);
40 |           if(result.length === files.length) {
41 |             this.props.onChange(result);
42 |           }
43 |         }, false);
44 |         reader.readAsDataURL(file);
45 |       }
46 |     }
47 |     else {
48 |       this.props.onChange([]);
49 |     }
50 |   }
51 |   render() {
52 |     this.props.data.value = this.props.data.value || [];
53 |     let idx = 0;
54 |     const imagesPreview = this.props.data.value.map(file => {
55 |       if ( /\.(jpe?g|png|gif)$/i.test(file.name) || (file.type && file.type.startsWith('image')) ) {
56 |         const style = {
57 |             backgroundImage: 'url(' + file.url + ')',
58 |             height: '150px',
59 |             backgroundSize: 'contain',
60 |             backgroundRepeat: 'no-repeat',
61 |             backgroundPosition: 'center',
62 |         }
63 |         return <div className="image-preview"
64 |           key = {idx++}
65 |           title = {file.name}
66 |           style = {style}
67 |         />
68 |       }
69 |       return null;
70 |     });
71 |     return <PropEditorBase data={this.props.data}>
72 |       {imagesPreview}
73 |       <div
74 |         onClick={e => {
75 |           this.props.onBrowse(e, this.props.data.value.length ? this.props.data.value[0].url : null, url => {
76 |             this.changedCustom(url);
77 |           });
78 |           // here the e.preventDefault might have been called
79 |           // (case of custom browse dialog)
80 |         }}
81 |       >
82 |         <input
83 |           accept={this.props.data.accept || ''}
84 |           multiple={this.props.data.multiple || ''}
85 |           ref={c => this.input = c}
86 |           type="file"
87 |           onChange={e => this.changed()}
88 |         />
89 |       </div>
90 |     </PropEditorBase>;
91 |   }
92 | }
93 | 


--------------------------------------------------------------------------------
/sample/button.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Button
 3 | description: HTML button tag for your forms.
 4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
 5 | category: Form Input
 6 | tags:
 7 | - form
 8 | - input
 9 | - dropdown
10 | - button
11 | dependencies:
12 | props:
13 | - name: label
14 |   type: string
15 |   default: Button
16 |   description: 'The label of the button.'
17 | - name: disabled
18 |   type: boolean
19 |   default: false
20 |   description: "This Boolean attribute indicates that the user cannot interact with the button."
21 | - name: autofocus
22 |   type: boolean
23 |   default: false
24 |   description: "This Boolean attribute lets you specify that the button should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form-associated element in a document can have this attribute specified."
25 | - name: name
26 |   type: string
27 |   description: "The name of the button, which is submitted with the form data."
28 | - name: form
29 |   type: component
30 |   accept:
31 |   - form
32 |   description: "The form element that the component is associated with (its form owner)."
33 | - name: formaction
34 |   type: string
35 |   description: "The URI of a program that processes the information submitted by the button. If specified, it overrides the action attribute of the button''s form owner."
36 | - name: formmethod
37 |   type:
38 |   - post
39 |   - get
40 |   description: "If the button is a submit button, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are: post and get"
41 | - name: formnovalidate
42 |   type: boolean
43 |   description: "If the button is a submit button, this Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the novalidate attribute of the button's form owner."
44 | - name: formtarget
45 |   type: string
46 |   description: "If the button is a submit button, this attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a browsing context (for example, tab, window, or inline frame). If this attribute is specified, it overrides the target attribute of the button's form owner. "
47 | - name: type
48 |   type:
49 |   - submit
50 |   - reset
51 |   - button
52 |   - menu
53 |   description: "The type of the button. Possible values are: submit, reset, button, menu."
54 |   default: button
55 | - name: onclick
56 |   type: action
57 |   description: "Fires on a mouse click on the element"
58 | - name: ondblclick
59 |   type: action
60 |   description: "Fires on a mouse double-click on the element"
61 | - name: onmousedown
62 |   type: action
63 |   description: "Fires when a mouse button is pressed down on an element"
64 | - name: onmousemove
65 |   type: action
66 |   description: "Fires when the mouse pointer is moving while it is over an element"
67 | - name: onmouseout
68 |   type: action
69 |   description: "Fires when the mouse pointer moves out of an element"
70 | - name: onmouseover
71 |   type: action
72 |   description: "Fires when the mouse pointer moves over an element"
73 | - name: onmouseup
74 |   type: action
75 | - name: oncontextmenu
76 |   type: action
77 |   description: "Script to be run when a context menu is triggered"
78 | - name: onfocus
79 |   type: action
80 |   description: "Fires the moment when the element gets focus"
81 | - name: onkeydown
82 |   type: action
83 |   description: "Fires when a user is pressing a key"
84 | - name: onkeypres
85 |   type: action
86 |   description: "Fires when a user presses a key"
87 | - name: onkeyup
88 |   type: action
89 |   description: "Fires when a user releases a key"
90 | 


--------------------------------------------------------------------------------
/sample/file.yml:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: File Input
 3 | description: A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.
 4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
 5 | category: Form Input
 6 | tags:
 7 | - form
 8 | - input
 9 | - dropdown
10 | - file
11 | dependencies:
12 | props:
13 | - name: value
14 |   description: The path or the name of the selected file
15 |   type: string
16 | - name: accept
17 |   description: Indicates the types of files that the server accepts. The value must be a comma-separated list of unique content type specifiers.
18 |   type: string
19 | - name: disabled
20 |   description: Whether the component is disabled, or not
21 |   type: boolean
22 | - name: multiple
23 |   type: boolean
24 |   default: false
25 |   description: Indicates whether the user is allowed to select more than one file.
26 | - name: required
27 |   type: boolean
28 |   default: false
29 |   description: 'A Boolean attribute indicating that an option with a non-empty string value must be selected.'
30 | - name: autofocus
31 |   type: boolean
32 |   default: false
33 |   description: 'This attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.'
34 | - name: name
35 |   type: string
36 |   description: 'The name of the control, which will be sent to the server when the user validates the form.'
37 | - name: form
38 |   type: component
39 |   accept:
40 |   - form
41 |   description: "The form element that the component is associated with (its form owner)."
42 | - name: onchange
43 |   type: action
44 |   description: "Fires the moment when the value of the element is changed"
45 | - name: onmousedown
46 |   type: action
47 |   description: "Fires when a mouse button is pressed down on an element"
48 | - name: onmousemove
49 |   type: action
50 |   description: "Fires when the mouse pointer is moving while it is over an element"
51 | - name: onmouseout
52 |   type: action
53 |   description: "Fires when the mouse pointer moves out of an element"
54 | - name: onmouseover
55 |   type: action
56 |   description: "Fires when the mouse pointer moves over an element"
57 | - name: onmouseup
58 |   type: action
59 |   description: "Fires when a mouse button is released over an element"
60 | - name: onwheel
61 |   type: action
62 |   description: "Fires when the mouse wheel rolls up or down over an element"
63 | - name: onblur
64 |   type: action
65 |   description: "Fires the moment that the element loses focus"
66 | - name: oncontextmenu
67 |   type: action
68 |   description: "Script to be run when a context menu is triggered"
69 | - name: onfocus
70 |   type: action
71 |   description: "Fires the moment when the element gets focus"
72 | - name: oninput
73 |   type: action
74 |   description: "Script to be run when an element gets user input"
75 | - name: oninvalid
76 |   type: action
77 |   description: "Script to be run when an element is invalid"
78 | - name: onreset
79 |   type: action
80 |   description: "Fires when the Reset button in a form is clicked"
81 | - name: onsearch
82 |   type: action
83 |   description: "Fires when the user writes something in a search field (for <input=\"search\">)"
84 | - name: onselect
85 |   type: action
86 |   description: "Fires after some text has been selected in an element"
87 | - name: onsubmit
88 |   type: action
89 |   description: "Fires when a form is submitted"
90 | - name: onkeydown
91 |   type: action
92 |   description: "Fires when a user is pressing a key"
93 | - name: onkeypres
94 |   type: action
95 |   description: "Fires when a user presses a key"
96 | - name: onkeyup
97 |   type: action
98 |   description: "Fires when a user releases a key"
99 | 


--------------------------------------------------------------------------------
/sample/text.yml:
--------------------------------------------------------------------------------
  1 | ---
  2 | name: Text input component (input, url, password, email)
  3 | description: 'Let the user type a text.'
  4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  5 | category: Form Input
  6 | tags:
  7 | - form
  8 | - input
  9 | - dropdown
 10 | - text
 11 | dependencies:
 12 | props:
 13 | - name: value
 14 |   description: The current value
 15 |   type: string
 16 | - name: type
 17 |   description: The type of textual data (text, url, password, email)
 18 |   type:
 19 |   - text
 20 |   - url
 21 |   - password
 22 |   - email
 23 |   default: text
 24 | - name: maxLength
 25 |   description: The maximum acceptable length
 26 |   type: number
 27 | - name: placeholder
 28 |   description: The short hint that describes the expected value of an URL field
 29 |   type: string
 30 | - name: pattern
 31 |   description: The regular expression that the URL field's value is checked against
 32 |   type: string
 33 |   default: "https?://.+"
 34 | - name: required
 35 |   description: Whether the component must be filled out before submitting a form
 36 |   type: boolean
 37 | - name: disabled
 38 |   description: Whether the component is disabled, or not
 39 |   type: boolean
 40 | - name: readOnly
 41 |   description: Whether the component is read only, or not
 42 |   type: boolean
 43 | - name: form
 44 |   type: component
 45 |   accept:
 46 |   - form
 47 |   description: "The form element that the component is associated with (its form owner)."
 48 | - name: name
 49 |   description: Sets the value of the name attribute of a date field
 50 |   type: string
 51 | - name: autofocus
 52 |   description: Whether the component should automatically get focus when the page loads
 53 |   type: boolean
 54 | - name: onchange
 55 |   type: action
 56 |   description: "Fires the moment when the value of the element is changed"
 57 | - name: onmousedown
 58 |   type: action
 59 |   description: "Fires when a mouse button is pressed down on an element"
 60 | - name: onmousemove
 61 |   type: action
 62 |   description: "Fires when the mouse pointer is moving while it is over an element"
 63 | - name: onmouseout
 64 |   type: action
 65 |   description: "Fires when the mouse pointer moves out of an element"
 66 | - name: onmouseover
 67 |   type: action
 68 |   description: "Fires when the mouse pointer moves over an element"
 69 | - name: onmouseup
 70 |   type: action
 71 |   description: "Fires when a mouse button is released over an element"
 72 | - name: onwheel
 73 |   type: action
 74 |   description: "Fires when the mouse wheel rolls up or down over an element"
 75 | - name: onblur
 76 |   type: action
 77 |   description: "Fires the moment that the element loses focus"
 78 | - name: oncontextmenu
 79 |   type: action
 80 |   description: "Script to be run when a context menu is triggered"
 81 | - name: onfocus
 82 |   type: action
 83 |   description: "Fires the moment when the element gets focus"
 84 | - name: oninput
 85 |   type: action
 86 |   description: "Script to be run when an element gets user input"
 87 | - name: oninvalid
 88 |   type: action
 89 |   description: "Script to be run when an element is invalid"
 90 | - name: onreset
 91 |   type: action
 92 |   description: "Fires when the Reset button in a form is clicked"
 93 | - name: onsearch
 94 |   type: action
 95 |   description: "Fires when the user writes something in a search field (for <input=\"search\">)"
 96 | - name: onselect
 97 |   type: action
 98 |   description: "Fires after some text has been selected in an element"
 99 | - name: onsubmit
100 |   type: action
101 |   description: "Fires when a form is submitted"
102 | - name: onkeydown
103 |   type: action
104 |   description: "Fires when a user is pressing a key"
105 | - name: onkeypres
106 |   type: action
107 |   description: "Fires when a user presses a key"
108 | - name: onkeyup
109 |   type: action
110 |   description: "Fires when a user releases a key"
111 | 


--------------------------------------------------------------------------------
/sample/number.yml:
--------------------------------------------------------------------------------
  1 | ---
  2 | name: Number input component
  3 | description: 'Let the user select a numeric value. Note: It is not supported in Internet Explorer 9 and earlier versions..'
  4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  5 | category: Form Input
  6 | tags:
  7 | - form
  8 | - input
  9 | - dropdown
 10 | - number
 11 | dependencies:
 12 | props:
 13 | - name: value
 14 |   description: The current value
 15 |   type: number
 16 | - name: required
 17 |   description: Whether the component must be filled out before submitting a form
 18 |   type: boolean
 19 | - name: disabled
 20 |   description: Whether the component is disabled, or not
 21 |   type: boolean
 22 | - name: readOnly
 23 |   description: Whether the component is read only, or not
 24 |   type: boolean
 25 | - name: min
 26 |   description: min value
 27 |   type: string
 28 | - name: max
 29 |   description: max value
 30 |   type: string
 31 | - name: step
 32 |   description: step to increment or decrement the value with up/down arrow
 33 |   type: number
 34 | - name: form
 35 |   type: component
 36 |   accept:
 37 |   - form
 38 |   description: "The form element that the component is associated with (its form owner)."
 39 | - name: name
 40 |   description: Name of the component
 41 |   type: string
 42 | - name: type
 43 |   description: Type of component
 44 |   type:
 45 |   - number
 46 |   - range
 47 |   default: number
 48 | - name: readOnly
 49 |   description: The component is read-only, or not
 50 |   type: boolean
 51 | - name: autocomplete
 52 |   description: Enable the autocomplete feature of the browser
 53 |   type: boolean
 54 | - name: autofocus
 55 |   description: The component should automatically get focus when the page loads
 56 |   type: boolean
 57 | - name: onchange
 58 |   type: action
 59 |   description: "Fires the moment when the value of the element is changed"
 60 | - name: onmousedown
 61 |   type: action
 62 |   description: "Fires when a mouse button is pressed down on an element"
 63 | - name: onmousemove
 64 |   type: action
 65 |   description: "Fires when the mouse pointer is moving while it is over an element"
 66 | - name: onmouseout
 67 |   type: action
 68 |   description: "Fires when the mouse pointer moves out of an element"
 69 | - name: onmouseover
 70 |   type: action
 71 |   description: "Fires when the mouse pointer moves over an element"
 72 | - name: onmouseup
 73 |   type: action
 74 |   description: "Fires when a mouse button is released over an element"
 75 | - name: onwheel
 76 |   type: action
 77 |   description: "Fires when the mouse wheel rolls up or down over an element"
 78 | - name: onblur
 79 |   type: action
 80 |   description: "Fires the moment that the element loses focus"
 81 | - name: oncontextmenu
 82 |   type: action
 83 |   description: "Script to be run when a context menu is triggered"
 84 | - name: onfocus
 85 |   type: action
 86 |   description: "Fires the moment when the element gets focus"
 87 | - name: oninput
 88 |   type: action
 89 |   description: "Script to be run when an element gets user input"
 90 | - name: oninvalid
 91 |   type: action
 92 |   description: "Script to be run when an element is invalid"
 93 | - name: onreset
 94 |   type: action
 95 |   description: "Fires when the Reset button in a form is clicked"
 96 | - name: onsearch
 97 |   type: action
 98 |   description: "Fires when the user writes something in a search field (for <input=\"search\">)"
 99 | - name: onselect
100 |   type: action
101 |   description: "Fires after some text has been selected in an element"
102 | - name: onsubmit
103 |   type: action
104 |   description: "Fires when a form is submitted"
105 | - name: onkeydown
106 |   type: action
107 |   description: "Fires when a user is pressing a key"
108 | - name: onkeypres
109 |   type: action
110 |   description: "Fires when a user presses a key"
111 | - name: onkeyup
112 |   type: action
113 |   description: "Fires when a user releases a key"
114 | 


--------------------------------------------------------------------------------
/pub/demo.js:
--------------------------------------------------------------------------------
  1 | var stage = document.getElementById('stage');
  2 | var componentSelect = document.getElementById('components');
  3 | var dependenciesElement = document.getElementById('dependencies');
  4 | var currentComponent = null;
  5 | function add(compName) {
  6 |   if(currentComponent) {
  7 |     stage.removeChild(currentComponent);
  8 |   }
  9 |   var compName = compName || componentSelect.value;
 10 |   var element = document.createElement('div');
 11 |   var name = prodotype.createName(compName, getCompList());
 12 |   prodotype.decorate(compName, {
 13 |     name: name
 14 |   })
 15 |     .then(html => element.innerHTML = html);
 16 |   element.setAttribute('data-template-name', compName);
 17 |   element.setAttribute('data-name', name);
 18 |   select(element);
 19 |   stage.appendChild(element);
 20 |   currentComponent = element;
 21 |   updateDependencies();
 22 | }
 23 | function updateDependencies() {
 24 |   // removed unused dependencies (scripts and style sheets)
 25 |   var unused = prodotype.getUnusedDependencies(document.head.querySelectorAll('[data-dependency]'), getCompList());
 26 |   for(var idx=0; idx < unused.length; idx++) {
 27 |     var el = unused[idx];
 28 |     document.head.removeChild(el);
 29 |   };
 30 |   // add missing dependencies (scripts and style sheets)
 31 |   var missing = prodotype.getMissingDependencies(document.head, getCompList());
 32 |   for(var idx=0; idx < missing.length; idx++) {
 33 |     var el = missing[idx];
 34 |     el.setAttribute('data-dependency', '')
 35 |     document.head.appendChild(el);
 36 |   };
 37 | }
 38 | function getCompList() {
 39 |   var comps = document.querySelectorAll('[data-template-name]');
 40 |   var compArr = [];
 41 |   for(idx=0; idx < comps.length; idx++) compArr.push({
 42 |     name: comps[idx].getAttribute('data-name'),
 43 |     displayName: (comps[idx].getAttribute('data-name') || 'No name') + ' (' + comps[idx].getAttribute('data-template-name') + ')',
 44 |     templateName: comps[idx].getAttribute('data-template-name')
 45 |   });
 46 |   return compArr;
 47 | }
 48 | function select(element) {
 49 |   var selection = document.querySelectorAll('.selected');
 50 |   for(var idx=0; idx < selection.length; idx++) {
 51 |     var el = selection[idx];
 52 |     el.classList.remove('selected');
 53 |   };
 54 |   element.classList.add('selected');
 55 | 
 56 |   var data = JSON.parse(element.getAttribute('data-data') || '{}');
 57 |   var templateName = element.getAttribute('data-template-name');
 58 |   prodotype.edit(data, {components: getCompList()}, templateName, {
 59 |     onChange: function(newData, html) {
 60 |       element.setAttribute('data-data', JSON.stringify(newData));
 61 |       element.innerHTML = html;
 62 |     },
 63 |     onBrowse: function(e, url, cbk) {
 64 |       console.log('custom event called, do not prevent default for the demo, let the default editor handle it');
 65 |       // e.preventDefault();
 66 |       cbk(url);
 67 |     },
 68 |     onEditLink: function(e, linkData, cbk) {
 69 |       console.log('custom event called, do not prevent default for the demo, let the default editor handle it', e, cbk);
 70 |       // e.preventDefault();
 71 |       cbk(linkData);
 72 |     },
 73 |   });
 74 | }
 75 | 
 76 | var showPreview = document.getElementById('showPreview');
 77 | showPreview.onclick = function(e) {
 78 |   document.body.classList.toggle('show-preview');
 79 | }
 80 | 
 81 | var ui = document.getElementById('ui');
 82 | var prodotype = new Prodotype(ui, './sample');
 83 | prodotype.ready(function(err) {
 84 |   var option = document.createElement('option')
 85 |   option.value = option.innerHTML = '-';
 86 |   componentSelect.appendChild(option);
 87 |   for(var name in prodotype.componentsDef) {
 88 |     var option = document.createElement('option')
 89 |     option.value = option.innerHTML = name;
 90 |     componentSelect.appendChild(option);
 91 |   }
 92 |   componentSelect.onchange = function (e) {
 93 |     add(componentSelect.value);
 94 |   }
 95 |   // var initValue = 'test';
 96 |   var initValue = componentSelect.childNodes[1].value;
 97 |   componentSelect.value = initValue;
 98 |   setTimeout(add, 1000);
 99 | });
100 | 


--------------------------------------------------------------------------------
/sample/select.yml:
--------------------------------------------------------------------------------
  1 | ---
  2 | name: Dropdown list (<select>)
  3 | description: Let the user select an option among a list of options.
  4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select
  5 | category: Form Input
  6 | tags:
  7 | - form
  8 | - input
  9 | - dropdown
 10 | - select
 11 | dependencies:
 12 | props:
 13 | - name: data
 14 |   type: array
 15 |   description: 'The options (1 per line).'
 16 |   default:
 17 |   - option 1
 18 |   - option 2
 19 | - name: disabled
 20 |   description: Whether the component is disabled, or not
 21 |   type: boolean
 22 | - name: multiple
 23 |   type: boolean
 24 |   default: false
 25 |   description: 'This Boolean attribute indicates that multiple options can be selected in the list. If it is not specified, then only one option can be selected at a time.'
 26 | - name: size
 27 |   type: number
 28 |   default: 0
 29 |   description: 'If the control is presented as a scrolled list box, this attribute represents the number of rows in the list that should be visible at one time. Browsers are not required to present a select element as a scrolled list box. The default value is 0.'
 30 | - name: required
 31 |   type: boolean
 32 |   default: false
 33 |   description: 'A Boolean attribute indicating that an option with a non-empty string value must be selected.'
 34 | - name: autofocus
 35 |   type: boolean
 36 |   default: false
 37 |   description: 'This attribute lets you specify that a form control should have input focus when the page loads, unless the user overrides it, for example by typing in a different control. Only one form element in a document can have the autofocus attribute, which is a Boolean.'
 38 | - name: name
 39 |   type: string
 40 |   description: 'The name of the control, which will be sent to the server when the user validates the form.'
 41 | - name: form
 42 |   type: component
 43 |   accept:
 44 |   - form
 45 |   description: "The form element that the component is associated with (its form owner)."
 46 | - name: onchange
 47 |   type: action
 48 |   description: "Fires the moment when the value of the element is changed"
 49 | - name: onmousedown
 50 |   type: action
 51 |   description: "Fires when a mouse button is pressed down on an element"
 52 | - name: onmousemove
 53 |   type: action
 54 |   description: "Fires when the mouse pointer is moving while it is over an element"
 55 | - name: onmouseout
 56 |   type: action
 57 |   description: "Fires when the mouse pointer moves out of an element"
 58 | - name: onmouseover
 59 |   type: action
 60 |   description: "Fires when the mouse pointer moves over an element"
 61 | - name: onmouseup
 62 |   type: action
 63 |   description: "Fires when a mouse button is released over an element"
 64 | - name: onwheel
 65 |   type: action
 66 |   description: "Fires when the mouse wheel rolls up or down over an element"
 67 | - name: onblur
 68 |   type: action
 69 |   description: "Fires the moment that the element loses focus"
 70 | - name: oncontextmenu
 71 |   type: action
 72 |   description: "Script to be run when a context menu is triggered"
 73 | - name: onfocus
 74 |   type: action
 75 |   description: "Fires the moment when the element gets focus"
 76 | - name: oninput
 77 |   type: action
 78 |   description: "Script to be run when an element gets user input"
 79 | - name: oninvalid
 80 |   type: action
 81 |   description: "Script to be run when an element is invalid"
 82 | - name: onreset
 83 |   type: action
 84 |   description: "Fires when the Reset button in a form is clicked"
 85 | - name: onsearch
 86 |   type: action
 87 |   description: "Fires when the user writes something in a search field (for <input=\"search\">)"
 88 | - name: onselect
 89 |   type: action
 90 |   description: "Fires after some text has been selected in an element"
 91 | - name: onsubmit
 92 |   type: action
 93 |   description: "Fires when a form is submitted"
 94 | - name: onkeydown
 95 |   type: action
 96 |   description: "Fires when a user is pressing a key"
 97 | - name: onkeypres
 98 |   type: action
 99 |   description: "Fires when a user presses a key"
100 | - name: onkeyup
101 |   type: action
102 |   description: "Fires when a user releases a key"
103 | 


--------------------------------------------------------------------------------
/sample/date.yml:
--------------------------------------------------------------------------------
  1 | ---
  2 | name: Date Component
  3 | description: 'Let the user select a date. Note: It does not show as any date field/calendar in Firefox.'
  4 | doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input
  5 | category: Form Input
  6 | tags:
  7 | - form
  8 | - input
  9 | - dropdown
 10 | - date
 11 | dependencies:
 12 | props:
 13 | - name: value
 14 |   description: The current value
 15 |   type: string
 16 | - name: required
 17 |   description: Whether the component must be filled out before submitting a form
 18 |   type: boolean
 19 | - name: disabled
 20 |   description: Whether the component is disabled, or not
 21 |   type: boolean
 22 | - name: readOnly
 23 |   description: Whether the component is read only, or not
 24 |   type: boolean
 25 | - name: min
 26 |   description: Sets or returns the value of the min attribute of the date field
 27 |   type: string
 28 | - name: max
 29 |   description: Sets or returns the value of the max attribute of the date field
 30 |   type: string
 31 | - name: step
 32 |   description: Sets or returns the value of the step attribute of the date field
 33 |   type: number
 34 | - name: form
 35 |   type: component
 36 |   accept:
 37 |   - form
 38 |   description: "The form element that the component is associated with (its form owner)."
 39 | - name: name
 40 |   description: Sets or returns the value of the name attribute of a date field
 41 |   type: string
 42 | - name: type
 43 |   description: Type of date field
 44 |   type:
 45 |   - date
 46 |   - month
 47 |   - week
 48 |   - time
 49 |   - datetime
 50 |   - datetime-local
 51 | - name: readOnly
 52 |   description: Sets or returns whether the date field is read-only, or not
 53 |   type: boolean
 54 | - name: autocomplete
 55 |   description: Sets or returns the value of the autocomplete attribute of a date field
 56 |   type: boolean
 57 | - name: autofocus
 58 |   description: Sets or returns whether a date field should automatically get focus when the page loads
 59 |   type: boolean
 60 | - name: onchange
 61 |   type: action
 62 |   description: "Fires the moment when the value of the element is changed"
 63 | - name: onmousedown
 64 |   type: action
 65 |   description: "Fires when a mouse button is pressed down on an element"
 66 | - name: onmousemove
 67 |   type: action
 68 |   description: "Fires when the mouse pointer is moving while it is over an element"
 69 | - name: onmouseout
 70 |   type: action
 71 |   description: "Fires when the mouse pointer moves out of an element"
 72 | - name: onmouseover
 73 |   type: action
 74 |   description: "Fires when the mouse pointer moves over an element"
 75 | - name: onmouseup
 76 |   type: action
 77 |   description: "Fires when a mouse button is released over an element"
 78 | - name: onwheel
 79 |   type: action
 80 |   description: "Fires when the mouse wheel rolls up or down over an element"
 81 | - name: onblur
 82 |   type: action
 83 |   description: "Fires the moment that the element loses focus"
 84 | - name: oncontextmenu
 85 |   type: action
 86 |   description: "Script to be run when a context menu is triggered"
 87 | - name: onfocus
 88 |   type: action
 89 |   description: "Fires the moment when the element gets focus"
 90 | - name: oninput
 91 |   type: action
 92 |   description: "Script to be run when an element gets user input"
 93 | - name: oninvalid
 94 |   type: action
 95 |   description: "Script to be run when an element is invalid"
 96 | - name: onreset
 97 |   type: action
 98 |   description: "Fires when the Reset button in a form is clicked"
 99 | - name: onsearch
100 |   type: action
101 |   description: "Fires when the user writes something in a search field (for <input=\"search\">)"
102 | - name: onselect
103 |   type: action
104 |   description: "Fires after some text has been selected in an element"
105 | - name: onsubmit
106 |   type: action
107 |   description: "Fires when a form is submitted"
108 | - name: onkeydown
109 |   type: action
110 |   description: "Fires when a user is pressing a key"
111 | - name: onkeypres
112 |   type: action
113 |   description: "Fires when a user presses a key"
114 | - name: onkeyup
115 |   type: action
116 |   description: "Fires when a user releases a key"
117 | 


--------------------------------------------------------------------------------
/pub/demo.css:
--------------------------------------------------------------------------------
  1 | body, html {
  2 |   margin: 0;
  3 |   padding: 0;
  4 |   font-family: 'Open Sans', sans-serif;
  5 |   background-color: #006775;
  6 |   color: #DDD;
  7 |   height: 100%;
  8 |   width: 100%;
  9 |   display: flex;
 10 | }
 11 | #info, #info a {
 12 |   padding: 17px;
 13 | }
 14 | div#tools {
 15 |   width: 550px;
 16 |   max-width: 50%;
 17 |   display: flex;
 18 |   flex-direction: column;
 19 | }
 20 | select#components {
 21 |   margin: 10px 0;
 22 |   width: 100%;
 23 |   height: 40px;
 24 |   flex: 0 0 40px;
 25 | }
 26 | div#ui {
 27 |   width: 100%;
 28 |   overflow: auto;
 29 |   background-color: #444;
 30 | }
 31 | /* **************************** */
 32 | /* stage and rendered component */
 33 | /* **************************** */
 34 | 
 35 | #stage {
 36 |   align-items: center;
 37 |   justify-content: center;
 38 |   margin: auto;
 39 | }
 40 | #stage .prodotype-preview {
 41 |   display: none;
 42 | }
 43 | .show-preview #stage .prodotype-preview {
 44 |   display: block;
 45 | }
 46 | .show-preview #stage .prodotype-runtime {
 47 |   display: none;
 48 | }
 49 | #stage .prodotype-force-size {
 50 |   position: absolute;
 51 |   top: 25%;
 52 |   left: 62%;
 53 |   width: 25%;
 54 |   height: 50%;
 55 | }
 56 | 
 57 | /* ******* */
 58 | /* editor */
 59 | /* ******* */
 60 | 
 61 | /* header */
 62 | #ui .name {
 63 |   display: inline;
 64 | }
 65 | #ui .help {
 66 |   float: right;
 67 |   border-radius: 50%;
 68 |   background: none;
 69 |   color: #DDD;
 70 |   border: 1px solid #DDD;
 71 |   margin: 5px;
 72 |   width: 25px;
 73 |   height: 25px;
 74 |   cursor: pointer;
 75 | }
 76 | #ui .help:hover {
 77 |   background-color: darkgrey;
 78 | }
 79 | /* ******* */
 80 | /* properties */
 81 | /* ******* */
 82 | #ui .editor > ul {
 83 |   border-bottom: 1px solid #2F2F2F;
 84 |   margin: 0;
 85 |   padding: 0;
 86 |   overflow: hidden;
 87 |   display: flex;
 88 |   flex-wrap: wrap;
 89 | }
 90 | #ui .prop-editor-base {
 91 |   border-top: 1px solid #2F2F2F;
 92 |   width: 100%;
 93 | }
 94 | #ui .prop-editor-base.half-col {
 95 |   flex: 1;
 96 |   margin-right: 10px;
 97 |   margin-left: 0px;
 98 |   min-width: 40%;
 99 | }
100 | #ui .prop-editor-base.prop-editor-expand {
101 |   margin-bottom: 20px;
102 | }
103 | /* all inputs centered */
104 | #ui .prop-editor-base .prop-editor-container {
105 |   padding: 5px;
106 |   display: flex;
107 | }
108 | #ui .prop-editor-base .prop-editor-container .sub-editors .prop-editor-name {
109 |   text-align: left;
110 | }
111 | /* */
112 | #ui .prop-editor-base .prop-editor-description {
113 |   padding: 12px
114 | }
115 | #ui .prop-editor-base .prop-editor-name .fa {
116 |   cursor: pointer;
117 | }
118 | #ui .prop-editor-base .prop-editor-name {
119 |   display: block;
120 |   padding: 10px 5px;
121 |   cursor: pointer;
122 | }
123 | #ui .prop-editor-base .prop-editor-container > input,
124 | #ui .prop-editor-base .prop-editor-container > select {
125 |   background-color: #2F2F2F;
126 |   border: 1px solid #2A2A2A;
127 |   box-shadow: 1px 1px 0 #535353;
128 |   color: #DDD;
129 |   border-radius: 2px;
130 |   box-sizing: border-box;
131 |   padding: 0;
132 |   line-height: 2;
133 |   width: 100%;
134 |   height: 35px;
135 | }
136 | #ui .prop-editor-base .prop-editor-container .toggle-button {
137 |   min-height: 50px;
138 |   width: 50px;
139 |   background-position: 50%;
140 |   background-repeat: no-repeat;
141 |   background-color: #2F2F2F;
142 |   border-color: #2A2A2A;
143 |   border-style: solid;
144 |   border-left-style: none;
145 |   cursor: pointer;
146 | }
147 | #ui .prop-editor-base .prop-editor-container .toggle-button:focus {
148 |   border-left-style: solid;
149 |   border-radius: 5px 0 0 5px;
150 | }
151 | #ui .prop-editor-base .prop-editor-container .toggle-button:first-of-type {
152 |   border-left-style: solid;
153 |   border-radius: 5px 0 0 5px;
154 | }
155 | #ui .prop-editor-base .prop-editor-container .toggle-button:last-of-type {
156 |   border-radius: 0 5px 5px 0;
157 | }
158 | #ui .prop-editor-base .prop-editor-container .toggle-button:hover {
159 |   border: 1px solid #535353;
160 | }
161 | #ui .prop-editor-base .prop-editor-container .toggle-button[data-selected=true] {
162 |   background-color: #535353;
163 | }
164 | #ui .prop-editor-base .prop-editor-container > input[type=number] {
165 | }
166 | #ui .prop-editor-base .prop-editor-container > input[type=checkbox] {
167 |   width: auto;
168 |   height: auto;
169 | }
170 | #ui .prop-editor-base .prop-editor-container > input[type=color] {
171 | }
172 | #ui .prop-editor-base .image-preview {
173 |   min-width: 100px;
174 |   min-height: 100px;
175 |   background-size: contain;
176 |   background-repeat: no-repeat;
177 |   background-position: 50%;
178 |   border: 1px solid;
179 | }
180 | #ui .prop-editor-base.number-editor .prop-editor-container input {
181 |   -webkit-appearance: textfield;
182 |   -moz-appearance: textfield;
183 |   appearance: textfield;
184 | }
185 | #ui .prop-editor-base.number-editor .prop-editor-container .unit-selector {
186 |   -webkit-appearance: none;
187 |   -moz-appearance: none;
188 |   appearance: none;
189 |   text-align: center;
190 |   margin-left: -35px;
191 |   padding: 0;
192 |   border: none;
193 |   box-shadow: none;
194 |   cursor: pointer;
195 |   width: auto;
196 | }
197 | /* array of object editor */
198 | #ui .prop-editor-base .sub-editors-container .sub-editors {
199 |   border-bottom: 1px solid #2F2F2F;
200 |   margin-bottom: 9px;
201 | 
202 | }
203 | #ui .prop-editor-base .sub-editors-container {
204 |   width: 90%;
205 |   border-bottom: 1px solid #2F2F2F;
206 |   border-left: 1px solid #2F2F2F;
207 |   border-right: 1px solid #2F2F2F;
208 |   margin-bottom: 20px;
209 |   padding-bottom: 10px;
210 |   margin-left: 25px;
211 | }
212 | #ui .prop-editor-base .btn {
213 |   width: 90%;
214 |   cursor: pointer;
215 |   display: inline;
216 |   margin: 10px;
217 |   opacity: .8;
218 | }
219 | #ui .prop-editor-base .btn:hover {
220 |   opacity: 1;
221 | }
222 | #ui .prop-editor-base .add-btn {
223 | }
224 | 


--------------------------------------------------------------------------------
/src/Editor.spec.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import renderer from 'react-test-renderer';
  3 | import Editor from './Editor.js';
  4 | import StringArrayEditor from './StringArrayEditor.js';
  5 | import ToggleEditor from './ToggleEditor.js';
  6 | import ObjectEditor from './ObjectEditor.js';
  7 | import MulitlineEditor from './MulitlineEditor.js';
  8 | import StringEditor from './StringEditor.js';
  9 | import BooleanEditor from './BooleanEditor.js';
 10 | import NumberEditor from './NumberEditor.js';
 11 | import ActionEditor from './ActionEditor.js';
 12 | import FileEditor from './FileEditor.js';
 13 | import ColorEditor from './ColorEditor.js';
 14 | import ComponentEditor from './ComponentEditor.js';
 15 | import LinkEditor from './LinkEditor.js';
 16 | import EnumEditor from './EnumEditor.js';
 17 | import ObjectArrayEditor from './ObjectArrayEditor.js';
 18 | 
 19 | test('Init empty component', () => {
 20 |   const component = renderer.create(
 21 |     <Editor />
 22 |   );
 23 |   const tree = component.toJSON();
 24 |   expect(tree).not.toBeNull();
 25 | });
 26 | 
 27 | test('Get simple types', () => {
 28 |   const testGetItemClass = (type, EditorClass) => {
 29 |     const itemClass = Editor.getItemClass({
 30 |       type,
 31 |     });
 32 |     expect(itemClass).not.toBeNull();
 33 |     expect(itemClass).toBe(EditorClass);
 34 |   }
 35 |   testGetItemClass('array', StringArrayEditor);
 36 |   testGetItemClass('toggle', ToggleEditor);
 37 |   testGetItemClass('object', ObjectEditor);
 38 |   testGetItemClass('string', StringEditor);
 39 |   testGetItemClass('multiline', MulitlineEditor);
 40 |   testGetItemClass('boolean', BooleanEditor);
 41 |   testGetItemClass('number', NumberEditor);
 42 |   testGetItemClass('action', ActionEditor);
 43 |   testGetItemClass('file', FileEditor);
 44 |   testGetItemClass('color', ColorEditor);
 45 |   testGetItemClass('component', ComponentEditor);
 46 |   testGetItemClass('link', LinkEditor);
 47 | });
 48 | 
 49 | test('Get complex types', () => {
 50 |   const itemClassEnum = Editor.getItemClass({
 51 |     type: ['enum1', 'enum2', 'enum3'],
 52 |   });
 53 |   expect(itemClassEnum).not.toBeNull();
 54 |   expect(itemClassEnum).toBe(EnumEditor);
 55 | 
 56 |   const itemClassArray = Editor.getItemClass({
 57 |     type: [{type: 'number'}, {type: 'number'}, {type: 'number'}],
 58 |   });
 59 |   expect(itemClassArray).not.toBeNull();
 60 |   expect(itemClassArray).toBe(ObjectArrayEditor);
 61 | 
 62 |   expect(() => Editor.getItemClass({
 63 |     type: 'unknown',
 64 |   })).toThrow();
 65 | });
 66 | 
 67 | test('createPropEditors for basic types', () => {
 68 |   const testCreatePropEditors = (type) => {
 69 |     const testNumber = Editor.createPropEditors({
 70 |       templates: {},
 71 |       data: {
 72 |         type,
 73 |       },
 74 |     });
 75 |     expect(testNumber).not.toBeNull();
 76 |     expect(testNumber.props.data.uid).not.toBeNull();
 77 |   };
 78 |   testCreatePropEditors('array', StringArrayEditor);
 79 |   testCreatePropEditors('toggle', ToggleEditor);
 80 |   testCreatePropEditors('object', ObjectEditor);
 81 |   testCreatePropEditors('string', StringEditor);
 82 |   testCreatePropEditors('multiline', MulitlineEditor);
 83 |   testCreatePropEditors('boolean', BooleanEditor);
 84 |   testCreatePropEditors('number', NumberEditor);
 85 |   testCreatePropEditors('action', ActionEditor);
 86 |   testCreatePropEditors('file', FileEditor);
 87 |   testCreatePropEditors('color', ColorEditor);
 88 |   testCreatePropEditors('component', ComponentEditor);
 89 |   testCreatePropEditors('link', LinkEditor);
 90 |   testCreatePropEditors(['enum1', 'enum2', 'enum3'], EnumEditor);
 91 |   testCreatePropEditors([{type: 'number'}, {type: 'number'}, {type: 'number'}], ObjectArrayEditor);
 92 | });
 93 | 
 94 | // test('Create with templates', () => {
 95 | //   const testTemplate = Editor.createPropEditors({
 96 | //     templates: {
 97 | //       'TestTemplate': {
 98 | //         props: [
 99 | //           {type: 'number', name: 'propTemplate'},
100 | //         ],
101 | //       },
102 | //     },
103 | //     data: {
104 | //       type: 'TestTemplate',
105 | //       name: 'propMixed',
106 | //       props: [
107 | //         {type: 'string', name: 'propComp'},
108 | //       ],
109 | //     },
110 | //   });
111 | //   expect(testTemplate).not.toBeNull();
112 | //   expect(testTemplate.props.data.uid).not.toBeNull();
113 | //   expect(testTemplate.props.data.type).toBe('object');
114 | //   expect(testTemplate.props.data.name).toBe('propMixed');
115 | //   expect(testTemplate.props.data.props[0]).not.toBeNull();
116 | //   expect(testTemplate.props.data.props[0].name).toBe('propComp');
117 | //   expect(testTemplate.props.data.props[1]).not.toBeNull();
118 | //   expect(testTemplate.props.data.props[1].name).toBe('propTemplate');
119 | // })
120 | 
121 | test('Create templates of templates', () => {
122 |   const testTemplate = Editor.createPropEditors({
123 |     templates: {
124 |       'TestTemplate1': {
125 |         type: 'template',
126 |         extends: 'TestTemplate2',
127 |         props: [
128 |           {type: 'number', name: 'propTemplate1'},
129 |         ],
130 |       },
131 |       'TestTemplate2': {
132 |         type: 'template',
133 |         props: [
134 |           {type: 'number', name: 'propTemplate2'},
135 |         ],
136 |       },
137 |     },
138 |     data: {
139 |       type: 'TestTemplate1',
140 |       name: 'propMixed',
141 |       props: [
142 |         {type: 'string', name: 'propComp'},
143 |       ],
144 |     },
145 |   });
146 |   expect(testTemplate).not.toBeNull();
147 |   expect(testTemplate.props.data.uid).not.toBeNull();
148 |   expect(testTemplate.props.data.type).toBe('object');
149 |   expect(testTemplate.props.data.name).toBe('propMixed');
150 |   expect(testTemplate.props.data.props.length).toBe(3);
151 |   expect(testTemplate.props.data.props[2]).not.toBeNull();
152 |   expect(testTemplate.props.data.props[2].name).toBe('propComp');
153 |   expect(testTemplate.props.data.props[2].type).toBe('string');
154 |   expect(testTemplate.props.data.props[1]).not.toBeNull();
155 |   expect(testTemplate.props.data.props[1].name).toBe('propTemplate1');
156 |   expect(testTemplate.props.data.props[1].type).toBe('number');
157 |   expect(testTemplate.props.data.props[0]).not.toBeNull();
158 |   expect(testTemplate.props.data.props[0].name).toBe('propTemplate2');
159 |   expect(testTemplate.props.data.props[0].type).toBe('number');
160 | })
161 | 


--------------------------------------------------------------------------------
/src/NumberEditor.spec.js:
--------------------------------------------------------------------------------
  1 | import React from 'react'
  2 | import ReactDOM from 'react-dom';
  3 | import NumberEditor from './NumberEditor.js'
  4 | import { act } from 'react-dom/test-utils'
  5 | import ReactTestUtils from 'react-dom/test-utils';
  6 | 
  7 | let container
  8 | 
  9 | beforeEach(() => {
 10 |   container = document.createElement('div')
 11 |   document.body.appendChild(container)
 12 | })
 13 | 
 14 | afterEach(() => {
 15 |   document.body.removeChild(container)
 16 |   container = null
 17 | })
 18 | 
 19 | test('Display a value', () => {
 20 |   const data = {
 21 |     value: '50%',
 22 |     unit: ['', '%', 'px'],
 23 |   }
 24 |   act(() => {
 25 |     ReactDOM.render(
 26 |       <NumberEditor
 27 |         data={data}
 28 |       />, container)
 29 |   })
 30 |   const input = container.querySelector('.value')
 31 |   const select = container.querySelector('.unit-selector')
 32 |   expect(input).not.toBeNull()
 33 |   expect(select).not.toBeNull()
 34 |   expect(input.value).toBe('50')
 35 |   expect(select.value).toBe('%')
 36 | })
 37 | 
 38 | test('Display a value of zero', () => {
 39 |   const data = {
 40 |     value: '0',
 41 |     unit: ['', '%', 'px'],
 42 |   }
 43 |   act(() => {
 44 |     ReactDOM.render(
 45 |       <NumberEditor
 46 |         data={data}
 47 |       />, container)
 48 |   })
 49 |   const input = container.querySelector('.value')
 50 |   const select = container.querySelector('.unit-selector')
 51 |   expect(input).not.toBeNull()
 52 |   expect(select).not.toBeNull()
 53 |   expect(input.value).toBe('0')
 54 |   expect(select.value).toBe('')
 55 | })
 56 | 
 57 | test('Display a value without unit in it', () => {
 58 |   const data = {
 59 |     value: '10',
 60 |     unit: ['', '%', 'px'],
 61 |   }
 62 |   act(() => {
 63 |     ReactDOM.render(
 64 |       <NumberEditor
 65 |         data={data}
 66 |       />, container)
 67 |   })
 68 |   const input = container.querySelector('.value')
 69 |   const select = container.querySelector('.unit-selector')
 70 |   expect(input).not.toBeNull()
 71 |   expect(select).not.toBeNull()
 72 |   expect(input.value).toBe('10')
 73 |   expect(select.value).toBe('')
 74 | })
 75 | 
 76 | test('Display a value without unit defined', () => {
 77 |   const data = {
 78 |     value: '10',
 79 |   }
 80 |   act(() => {
 81 |     ReactDOM.render(
 82 |       <NumberEditor
 83 |         data={data}
 84 |       />, container)
 85 |   })
 86 |   const input = container.querySelector('.value')
 87 |   const select = container.querySelector('.unit-selector')
 88 |   expect(input).not.toBeNull()
 89 |   expect(select).toBeNull()
 90 |   expect(input.value).toBe('10')
 91 | })
 92 | 
 93 | test('Display an empty value without unit', () => {
 94 |   const data = {
 95 |     value: null,
 96 |     unit: ['', '%', 'px'],
 97 |   }
 98 |   act(() => {
 99 |     ReactDOM.render(
100 |       <NumberEditor
101 |         data={data}
102 |       />, container)
103 |   })
104 |   const input = container.querySelector('.value')
105 |   const select = container.querySelector('.unit-selector')
106 |   expect(input).not.toBeNull()
107 |   expect(select).not.toBeNull()
108 |   expect(input.value).toBe('')
109 |   expect(select.value).toBe('')
110 | })
111 | 
112 | test('Display an empty value with default unit', () => {
113 |   const data = {
114 |     value: null,
115 |     unit: ['%', 'px'],
116 |   }
117 |   act(() => {
118 |     ReactDOM.render(
119 |       <NumberEditor
120 |         data={data}
121 |       />, container)
122 |   })
123 |   const input = container.querySelector('.value')
124 |   const select = container.querySelector('.unit-selector')
125 |   expect(input).not.toBeNull()
126 |   expect(select).not.toBeNull()
127 |   expect(input.value).toBe('')
128 |   expect(select.value).toBe('%')
129 | })
130 | 
131 | test('Change the value', () => {
132 |   const data = {
133 |     value: '50%',
134 |     unit: ['', '%', 'px'],
135 |   }
136 |   let component = null
137 |   act(() => {
138 |     component = ReactDOM.render(
139 |       <NumberEditor
140 |         data={data}
141 |         onChange={jest.fn()}
142 |       />, container)
143 |   })
144 |   expect(component).not.toBeNull()
145 | 
146 |   const input = container.querySelector('.value')
147 |   const select = container.querySelector('.unit-selector')
148 | 
149 |   ReactTestUtils.Simulate.change(input, {target: {value: '100'}})
150 |   expect(component.props.onChange).toHaveBeenCalledTimes(1)
151 |   expect(component.props.onChange).toHaveBeenCalledWith('100%')
152 | 
153 |   ReactTestUtils.Simulate.change(select, {target: {value: 'px'}})
154 |   expect(component.props.onChange).toHaveBeenCalledTimes(2)
155 |   expect(component.props.onChange).toHaveBeenCalledWith('50px')
156 | })
157 | 
158 | test('Change the value to empty value', () => {
159 |   const data = {
160 |     value: '50%',
161 |     unit: ['', '%', 'px'],
162 |   }
163 |   let component = null
164 |   act(() => {
165 |     component = ReactDOM.render(
166 |       <NumberEditor
167 |         data={data}
168 |         onChange={jest.fn()}
169 |       />, container)
170 |   })
171 |   expect(component).not.toBeNull()
172 | 
173 |   const input = container.querySelector('.value')
174 |   const select = container.querySelector('.unit-selector')
175 | 
176 |   ReactTestUtils.Simulate.change(input, {target: {value: ''}})
177 |   expect(component.props.onChange).toHaveBeenCalledTimes(1)
178 |   expect(component.props.onChange).toHaveBeenCalledWith('')
179 | 
180 |   ReactTestUtils.Simulate.change(select, {target: {value: ''}})
181 |   expect(component.props.onChange).toHaveBeenCalledTimes(2)
182 |   expect(component.props.onChange).toHaveBeenCalledWith('50')
183 | })
184 | 
185 | test('Change the value to zero', () => {
186 |   const data = {
187 |     value: '50%',
188 |     unit: ['', '%', 'px'],
189 |   }
190 |   let component = null
191 |   act(() => {
192 |     component = ReactDOM.render(
193 |       <NumberEditor
194 |         data={data}
195 |         onChange={jest.fn()}
196 |       />, container)
197 |   })
198 |   expect(component).not.toBeNull()
199 | 
200 |   const input = container.querySelector('.value')
201 | 
202 |   ReactTestUtils.Simulate.change(input, {target: {value: '0'}})
203 |   expect(component.props.onChange).toHaveBeenCalledTimes(1)
204 |   expect(component.props.onChange).toHaveBeenCalledWith('0')
205 | })
206 | 
207 | test('Change the value when there are no units', () => {
208 |   const data = {
209 |     value: '50',
210 |   }
211 |   let component = null
212 |   act(() => {
213 |     component = ReactDOM.render(
214 |       <NumberEditor
215 |         data={data}
216 |         onChange={jest.fn()}
217 |       />, container)
218 |   })
219 |   expect(component).not.toBeNull()
220 | 
221 |   const input = container.querySelector('.value')
222 | 
223 |   ReactTestUtils.Simulate.change(input, {target: {value: '10'}})
224 |   expect(component.props.onChange).toHaveBeenCalledTimes(1)
225 |   expect(component.props.onChange).toHaveBeenCalledWith('10')
226 | })
227 | 


--------------------------------------------------------------------------------
/src/Editor.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import StringArrayEditor from './StringArrayEditor';
  3 | import ObjectArrayEditor from './ObjectArrayEditor';
  4 | import ObjectEditor from './ObjectEditor';
  5 | import StringEditor from './StringEditor';
  6 | import MulitlineEditor from './MulitlineEditor';
  7 | import BooleanEditor from './BooleanEditor';
  8 | import NumberEditor from './NumberEditor';
  9 | import ActionEditor from './ActionEditor';
 10 | import EnumEditor from './EnumEditor';
 11 | import ToggleEditor from './ToggleEditor';
 12 | import FileEditor from './FileEditor';
 13 | import ColorEditor from './ColorEditor';
 14 | import ComponentEditor from './ComponentEditor';
 15 | import DataSourceEditor from './DataSourceEditor';
 16 | import LinkEditor from './LinkEditor';
 17 | 
 18 | let INDEX = 0;
 19 | export default class Editor extends React.Component {
 20 |   static getItemClass(itemData) {
 21 |     let itemClass = null;
 22 |     if(itemData.type instanceof Array && typeof itemData.type[0] === 'string') {
 23 |       itemClass = EnumEditor;
 24 |     }
 25 |     else if(itemData.type instanceof Array) {
 26 |       itemClass = ObjectArrayEditor;
 27 |     }
 28 |     else {
 29 |       switch(itemData.type) {
 30 |         case 'array':
 31 |           itemClass = StringArrayEditor;
 32 |           break;
 33 |         case 'toggle':
 34 |           itemClass = ToggleEditor;
 35 |           break;
 36 |         case 'object':
 37 |           itemClass = ObjectEditor;
 38 |           break;
 39 |         case 'string':
 40 |           itemClass = StringEditor;
 41 |           break;
 42 |         case 'multiline':
 43 |           itemClass = MulitlineEditor;
 44 |           break;
 45 |         case 'boolean':
 46 |           itemClass = BooleanEditor;
 47 |           break;
 48 |         case 'number':
 49 |           itemClass = NumberEditor;
 50 |           break;
 51 |         case 'action':
 52 |           itemClass = ActionEditor;
 53 |           break;
 54 |         case 'file':
 55 |           itemClass = FileEditor;
 56 |           break;
 57 |         case 'color':
 58 |           itemClass = ColorEditor;
 59 |           break;
 60 |         case 'component':
 61 |           itemClass = ComponentEditor;
 62 |           break;
 63 |         case 'data-source':
 64 |           itemClass = DataSourceEditor;
 65 |           break;
 66 |         case 'link':
 67 |           itemClass = LinkEditor;
 68 |           break;
 69 |         default:
 70 |           throw new Error('Unknown property type: ' + itemData.type);
 71 |       }
 72 |     }
 73 |     return itemClass;
 74 |   }
 75 |   static getTemplateData({templates, data}) {
 76 |     if(!!templates && templates[data.type] || (data.type === 'template' && !!data.extends && templates[data.extends])) {
 77 |       const agregatedTemplate = Editor.getTemplateData({templates, data: templates[data.extends || data.type]});
 78 |       return {
 79 |         ...data,
 80 |         type: 'object',
 81 |         props: [
 82 |           ...agregatedTemplate.props,
 83 |           ...(data.props || []),
 84 |         ],
 85 |       }
 86 |     }
 87 |     return data;
 88 |   }
 89 |   /**
 90 |    * @param {data, dataSources, onBrowse, onEditLink, onChange, idx, ...props} options
 91 |    */
 92 |   static createPropEditors(options) {
 93 |     const data = Editor.getTemplateData(options);
 94 |     // add an id to be used in the template to link several elements together
 95 |     data.uid = `${Date.now()}_${Math.round(Math.random() * 99999)}`;
 96 |     data.key = options.idx++;
 97 |     // det which editor for this property
 98 |     const itemClass = Editor.getItemClass(data);
 99 |     // build the editor
100 |     return React.createElement(itemClass, {
101 |       ...options,
102 |       data: {
103 |         ...options.data,
104 |         ...data,
105 |       },
106 |     });
107 |   }
108 |   /**
109 |    * @param parentProps, the props of the containing component
110 |    * @param props, the definition of the sub components, i.e. an array of objects which have name, type...
111 |    * @param value, the object containing the actual data of each sub component, i.e. an map of objects with a the prop name as a key and the prop value as a value
112 |    * @param parentValue, optional object to pass to the component's onChange callback, which will contain the value param - defaults to the value param
113 |    */
114 |   static getSubEditors(parentProps, props, value, parentValue) {
115 |     return props.map((prop, idx) => {
116 |       // clone the definition
117 |       const itemData = JSON.parse(JSON.stringify(prop));
118 |       // compute the value
119 |       if(typeof value[itemData.name] === 'undefined') {
120 |         itemData.value = itemData.default;
121 |       }
122 |       else {
123 |         itemData.value = value[itemData.name];
124 |       }
125 |       // create the editor
126 |       return Editor.createPropEditors({
127 |         data: itemData,
128 |         dataSources: parentProps.dataSources,
129 |         onBrowse: parentProps.onBrowse,
130 |         onEditLink: parentProps.onEditLink,
131 |         onChange: (newVal) => {
132 |           value[itemData.name] = newVal;
133 |           parentProps.onChange(parentValue || value);
134 |         },
135 |         idx: idx,
136 |       });
137 |     });
138 |   }
139 |   parseDefinition({definition, data}) {
140 |     // TODO: use reduce instead of this strange algo
141 |     const templates = {};
142 |     const editorsData = definition.props
143 |     .map((def, idx) => {
144 |       // clone the definition
145 |       const itemData = JSON.parse(JSON.stringify(def));
146 |       if(itemData.type === 'template') {
147 |         templates[itemData.name] = itemData;
148 |         return null;
149 |       }
150 |       else {
151 |         // compute the value
152 |         if(typeof data[itemData.name] === 'undefined')
153 |           itemData.value = itemData.default;
154 |         else
155 |           itemData.value = data[itemData.name];
156 |         itemData.idx = INDEX++;
157 |         // create the editor
158 |         return itemData;
159 |       }
160 |     })
161 |     .filter(e => !!e);
162 |     return {
163 |       templates,
164 |       editorsData,
165 |     }
166 |   }
167 |   // fixme: this method is bullshit
168 |   createEditors({ templates, editorsData }) {
169 |     return editorsData.map(data => {
170 |       return Editor.createPropEditors({
171 |         templates,
172 |         data,
173 |         dataSources: this.props.dataSources,
174 |         onBrowse: this.props.onBrowse,
175 |         onEditLink: this.props.onEditLink,
176 |         onChange: (value) => {
177 |           this.props.data[data.name] = value;
178 |           this.props.onChange(this.props.data);
179 |         },
180 |         idx: editorsData.idx,
181 |       })
182 |     });
183 |   }
184 |   render() {
185 |     if(this.props.data && this.props.definition) {
186 |       const { templates, editorsData } = this.parseDefinition(this.props);
187 |       const editors = this.createEditors({ templates, editorsData });
188 |       return <section className="editor">
189 |         <h1 className="name">{ this.props.definition.name }</h1>
190 |         { this.props.definition.doc ?
191 |           <button className="help" onClick={ () => window.open(this.props.definition.doc, '_blank') }>?</button>
192 |           : ''
193 |         }
194 |         <div>{ <span className="description-container">
195 |           <p className="description">{ this.props.definition.description }</p>
196 |         </span> }
197 |         </div>
198 |         <div>{ editors }</div>
199 |       </section>;
200 |     }
201 |     // nothing selected
202 |     return <section></section>;
203 |   }
204 | }
205 | 


--------------------------------------------------------------------------------
/src/Prodotype.js:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import ReactDOM from 'react-dom';
  3 | import Editor from './Editor';
  4 | import Renderer from './Renderer';
  5 | 
  6 | export default class Prodotype {
  7 | 
  8 |   constructor(element, rootPath = '') {
  9 |     this.componentsDef = null;
 10 |     this.container = element;
 11 |     if(typeof rootPath === 'string') {
 12 |       this.loadComponentsDef(rootPath)
 13 |       .then((componentsDef) => this.onLoad(componentsDef))
 14 |       .catch(err => this.onLoad(null, err));
 15 |     } else {
 16 |       Promise.all(
 17 |         rootPath.map(path => this.loadComponentsDef(path))
 18 |       )
 19 |       .then((componentsDefArr) => this.onLoad(componentsDefArr.reduce((aggr, next) => ({
 20 |         ...aggr,
 21 |         ...next,
 22 |       }))))
 23 |       .catch(err => this.onLoad(null, err));
 24 |     }
 25 |     this.renderer = new Renderer();
 26 |   }
 27 | 
 28 |   ////////////////////
 29 |   // ComponentsDef loading, ready mechanism
 30 |   ////////////////////
 31 |   isReady = false
 32 |   readyCbk = []
 33 |   errorLoadingComponents = null
 34 |   /**
 35 |    * public method to notify the caller that we are ready
 36 |    *
 37 |    */
 38 |   ready(cbk) {
 39 |     if(this.isReady) cbk(this.errorLoadingComponents);
 40 |     else this.readyCbk.push(cbk);
 41 |   }
 42 |   /**
 43 |    * Components data loaded
 44 |    * call the ready callbacks
 45 |    */
 46 |   onLoad(componentsDef, err) {
 47 |     if (err) {
 48 |       this.errorLoadingComponents = err;
 49 |       console.error('Prodotype loading error', err)
 50 |     } else {
 51 |       this.componentsDef = componentsDef;
 52 |       this.isReady = true;
 53 |       this.edit();
 54 |     }
 55 |     this.readyCbk.forEach(cbk => cbk(err));
 56 |     this.readyCbk = [];
 57 |   }
 58 |   /**
 59 |    * load the components data
 60 |    */
 61 |   loadComponentsDef(rootPath) {
 62 |     return new Promise((resolve, reject) => {
 63 |       if(this.isReady) return;
 64 |       let oReq = new XMLHttpRequest();
 65 |       oReq.open("GET", rootPath + '/components.json');
 66 |       oReq.send();
 67 |       oReq.addEventListener("error", (e) => {
 68 |         reject(e);
 69 |       });
 70 |       oReq.addEventListener("load", () => {
 71 |         if(oReq.status === 200) {
 72 |           try {
 73 |             const componentsDef = JSON.parse(oReq.responseText);
 74 |             Object.keys(componentsDef)
 75 |               .map(name => {
 76 |                 componentsDef[name].rootPath = rootPath;
 77 |               });
 78 |             resolve(componentsDef);
 79 |           } catch(e) {
 80 |             console.error('Could not parse component data from', rootPath, oReq.statusText, oReq.status);
 81 |             reject(new Error(`Could not parse component data from ${rootPath}. Error: ${oReq.statusText}(${oReq.status})`));
 82 |           }
 83 |         } else {
 84 |           console.error('Could not load components from', rootPath, oReq.statusText, oReq.status);
 85 |           reject(new Error(`Could not load components from ${rootPath}. Error: ${oReq.statusText}(${oReq.status})`));
 86 |         }
 87 |       });
 88 |     });
 89 |   }
 90 |   ///////////////////
 91 |   // edition of components
 92 |   ///////////////////
 93 |   /**
 94 |    * build the ui for a component
 95 |    * and notify me when user changes a property
 96 |    * @param {Object} data the component's data to edit
 97 |    * @param {Object} the data sources
 98 |    * @param {string} temlateName the type of the component to edit
 99 |    * @param {onChange:function, ?onBrowse:function, ?onEditLink} events
100 |    */
101 |   edit(data, dataSources, templateName, events) {
102 |     events = events || {};
103 |     ReactDOM.render(<Editor
104 |       dataSources= {dataSources}
105 |       onBrowse = {events.onBrowse}
106 |       onEditLink = {events.onEditLink}
107 |       data = {data}
108 |       definition = {this.componentsDef[templateName]}
109 |       onChange = {(value) => {
110 |         this.edit(value, dataSources, templateName, events);
111 |         this.decorate(templateName, value, dataSources)
112 |           .then(html => events.onChange(value, html));
113 |       }}
114 |     />, this.container);
115 |   }
116 | 
117 | 
118 |   /**
119 |    * render the HTML for a component
120 |    * with the given data merged with defaults
121 |    */
122 |   decorate(templateName, data, dataSources) {
123 |     return this.renderer.render(this.componentsDef[templateName], data, dataSources, templateName);
124 |   }
125 | 
126 | 
127 |   /**
128 |    * reset the ui
129 |    */
130 |   reset() {
131 |     ReactDOM.render(<Editor />, this.container);
132 |   }
133 | 
134 | 
135 |   /**
136 |    * create a unique meaningful name
137 |    */
138 |   createName(templateName, components) {
139 |     let idx = 0;
140 |     while(components.map(compData => compData.name).includes(templateName + (++idx))) {
141 |     }
142 |     return templateName + idx;
143 |   }
144 | 
145 | 
146 |   /**
147 |    * get the dependencies for the list of components
148 |    * @param {Array.<{name:string, displayName:string, templateName:string}>} the list of all the component names
149 |    */
150 |   getDependencies(components) {
151 |     return components 
152 |       .reduce((prev, current) => {
153 |         const componentDefObj = this.componentsDef[current.templateName];
154 |         if(!componentDefObj) {
155 |           const msg = `Prodotype error: component ${ current.templateName } not found.`;
156 |           console.error(msg, this.componentsDef, current.templateName);
157 |           throw new Error(msg);
158 |         }
159 |         const dependencies = componentDefObj.dependencies;
160 |         for(let depType in dependencies) {
161 |           prev[depType] = prev[depType] || [];
162 |           prev[depType] = prev[depType].concat(dependencies[depType]);
163 |         }
164 |         return prev;
165 |       }, {});
166 |   }
167 | 
168 |   /**
169 |    * find the missing dependencies for a given set of components
170 |    * @param {Array.<Element>} the element containing the dependencies (scripts and style sheets)
171 |    * @param {Array.<{name:string, displayName:string, templateName:string}>} the list of all the component names
172 |    * @return {Array.<Element>} the elements to be added to the site
173 |    */
174 |   getMissingDependencies(container, components) {
175 |     let result = [];
176 |     const dependencies = this.getDependencies(components);
177 |     for(let type in dependencies) {
178 |       let depType = dependencies[type];
179 |       for(let idxDep in depType) {
180 |         let dep = depType[idxDep];
181 |         let attributes = [];
182 |         for(let attrName in dep) attributes.push(attrName + '="' + dep[attrName] + '"');
183 |         let selector = type + '[' + attributes.join('][') + ']';
184 |         let existing = container.querySelector(selector);
185 |         if(!existing) {
186 |           let el = document.createElement(type);
187 |           for(let attrName in dep) el.setAttribute(attrName, dep[attrName]);
188 |           result.push(el);
189 |         }
190 |       }
191 |     }
192 |     return result;
193 |   }
194 | 
195 | 
196 |   /**
197 |    * find the missing dependencies for a given set of components
198 |    * @param {Array.<Element>} depencies, i.e. scripts and style sheets
199 |    * @param {Array.<{name:string, displayName:string, templateName:string}>} the list of all the component names
200 |    */
201 |   getUnusedDependencies(dependencyElements, components) {
202 |     const result = [];
203 |     const dependencies = this.getDependencies(components);
204 |     // remove what is not needed
205 |     for(let elIdx = 0; elIdx < dependencyElements.length; elIdx++) {
206 |       const el = dependencyElements[elIdx];
207 |       const tagName = el.tagName.toLowerCase();
208 |       if(dependencies[tagName]) {
209 |         let found = dependencies[tagName].find(function(dep) {
210 |           for(let attrName in dep)
211 |             if(el.getAttribute(attrName) !== dep[attrName])
212 |               return false;
213 |           return true;
214 |         });
215 |         if(!found) {
216 |           result.push(el);
217 |         }
218 |       }
219 |       else {
220 |         result.push(el);
221 |       }
222 |     }
223 |     return result;
224 |   }
225 | }
226 | 
227 | window.Prodotype = Prodotype;
228 | 


--------------------------------------------------------------------------------
/pub/fontawesome/less/variables.less:
--------------------------------------------------------------------------------
  1 | // Variables
  2 | // --------------------------
  3 | 
  4 | @fa-font-path:        "../fonts";
  5 | @fa-font-size-base:   14px;
  6 | @fa-line-height-base: 1;
  7 | //@fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts"; // for referencing Bootstrap CDN font files directly
  8 | @fa-css-prefix:       fa;
  9 | @fa-version:          "4.7.0";
 10 | @fa-border-color:     #eee;
 11 | @fa-inverse:          #fff;
 12 | @fa-li-width:         (30em / 14);
 13 | 
 14 | @fa-var-500px: "\f26e";
 15 | @fa-var-address-book: "\f2b9";
 16 | @fa-var-address-book-o: "\f2ba";
 17 | @fa-var-address-card: "\f2bb";
 18 | @fa-var-address-card-o: "\f2bc";
 19 | @fa-var-adjust: "\f042";
 20 | @fa-var-adn: "\f170";
 21 | @fa-var-align-center: "\f037";
 22 | @fa-var-align-justify: "\f039";
 23 | @fa-var-align-left: "\f036";
 24 | @fa-var-align-right: "\f038";
 25 | @fa-var-amazon: "\f270";
 26 | @fa-var-ambulance: "\f0f9";
 27 | @fa-var-american-sign-language-interpreting: "\f2a3";
 28 | @fa-var-anchor: "\f13d";
 29 | @fa-var-android: "\f17b";
 30 | @fa-var-angellist: "\f209";
 31 | @fa-var-angle-double-down: "\f103";
 32 | @fa-var-angle-double-left: "\f100";
 33 | @fa-var-angle-double-right: "\f101";
 34 | @fa-var-angle-double-up: "\f102";
 35 | @fa-var-angle-down: "\f107";
 36 | @fa-var-angle-left: "\f104";
 37 | @fa-var-angle-right: "\f105";
 38 | @fa-var-angle-up: "\f106";
 39 | @fa-var-apple: "\f179";
 40 | @fa-var-archive: "\f187";
 41 | @fa-var-area-chart: "\f1fe";
 42 | @fa-var-arrow-circle-down: "\f0ab";
 43 | @fa-var-arrow-circle-left: "\f0a8";
 44 | @fa-var-arrow-circle-o-down: "\f01a";
 45 | @fa-var-arrow-circle-o-left: "\f190";
 46 | @fa-var-arrow-circle-o-right: "\f18e";
 47 | @fa-var-arrow-circle-o-up: "\f01b";
 48 | @fa-var-arrow-circle-right: "\f0a9";
 49 | @fa-var-arrow-circle-up: "\f0aa";
 50 | @fa-var-arrow-down: "\f063";
 51 | @fa-var-arrow-left: "\f060";
 52 | @fa-var-arrow-right: "\f061";
 53 | @fa-var-arrow-up: "\f062";
 54 | @fa-var-arrows: "\f047";
 55 | @fa-var-arrows-alt: "\f0b2";
 56 | @fa-var-arrows-h: "\f07e";
 57 | @fa-var-arrows-v: "\f07d";
 58 | @fa-var-asl-interpreting: "\f2a3";
 59 | @fa-var-assistive-listening-systems: "\f2a2";
 60 | @fa-var-asterisk: "\f069";
 61 | @fa-var-at: "\f1fa";
 62 | @fa-var-audio-description: "\f29e";
 63 | @fa-var-automobile: "\f1b9";
 64 | @fa-var-backward: "\f04a";
 65 | @fa-var-balance-scale: "\f24e";
 66 | @fa-var-ban: "\f05e";
 67 | @fa-var-bandcamp: "\f2d5";
 68 | @fa-var-bank: "\f19c";
 69 | @fa-var-bar-chart: "\f080";
 70 | @fa-var-bar-chart-o: "\f080";
 71 | @fa-var-barcode: "\f02a";
 72 | @fa-var-bars: "\f0c9";
 73 | @fa-var-bath: "\f2cd";
 74 | @fa-var-bathtub: "\f2cd";
 75 | @fa-var-battery: "\f240";
 76 | @fa-var-battery-0: "\f244";
 77 | @fa-var-battery-1: "\f243";
 78 | @fa-var-battery-2: "\f242";
 79 | @fa-var-battery-3: "\f241";
 80 | @fa-var-battery-4: "\f240";
 81 | @fa-var-battery-empty: "\f244";
 82 | @fa-var-battery-full: "\f240";
 83 | @fa-var-battery-half: "\f242";
 84 | @fa-var-battery-quarter: "\f243";
 85 | @fa-var-battery-three-quarters: "\f241";
 86 | @fa-var-bed: "\f236";
 87 | @fa-var-beer: "\f0fc";
 88 | @fa-var-behance: "\f1b4";
 89 | @fa-var-behance-square: "\f1b5";
 90 | @fa-var-bell: "\f0f3";
 91 | @fa-var-bell-o: "\f0a2";
 92 | @fa-var-bell-slash: "\f1f6";
 93 | @fa-var-bell-slash-o: "\f1f7";
 94 | @fa-var-bicycle: "\f206";
 95 | @fa-var-binoculars: "\f1e5";
 96 | @fa-var-birthday-cake: "\f1fd";
 97 | @fa-var-bitbucket: "\f171";
 98 | @fa-var-bitbucket-square: "\f172";
 99 | @fa-var-bitcoin: "\f15a";
100 | @fa-var-black-tie: "\f27e";
101 | @fa-var-blind: "\f29d";
102 | @fa-var-bluetooth: "\f293";
103 | @fa-var-bluetooth-b: "\f294";
104 | @fa-var-bold: "\f032";
105 | @fa-var-bolt: "\f0e7";
106 | @fa-var-bomb: "\f1e2";
107 | @fa-var-book: "\f02d";
108 | @fa-var-bookmark: "\f02e";
109 | @fa-var-bookmark-o: "\f097";
110 | @fa-var-braille: "\f2a1";
111 | @fa-var-briefcase: "\f0b1";
112 | @fa-var-btc: "\f15a";
113 | @fa-var-bug: "\f188";
114 | @fa-var-building: "\f1ad";
115 | @fa-var-building-o: "\f0f7";
116 | @fa-var-bullhorn: "\f0a1";
117 | @fa-var-bullseye: "\f140";
118 | @fa-var-bus: "\f207";
119 | @fa-var-buysellads: "\f20d";
120 | @fa-var-cab: "\f1ba";
121 | @fa-var-calculator: "\f1ec";
122 | @fa-var-calendar: "\f073";
123 | @fa-var-calendar-check-o: "\f274";
124 | @fa-var-calendar-minus-o: "\f272";
125 | @fa-var-calendar-o: "\f133";
126 | @fa-var-calendar-plus-o: "\f271";
127 | @fa-var-calendar-times-o: "\f273";
128 | @fa-var-camera: "\f030";
129 | @fa-var-camera-retro: "\f083";
130 | @fa-var-car: "\f1b9";
131 | @fa-var-caret-down: "\f0d7";
132 | @fa-var-caret-left: "\f0d9";
133 | @fa-var-caret-right: "\f0da";
134 | @fa-var-caret-square-o-down: "\f150";
135 | @fa-var-caret-square-o-left: "\f191";
136 | @fa-var-caret-square-o-right: "\f152";
137 | @fa-var-caret-square-o-up: "\f151";
138 | @fa-var-caret-up: "\f0d8";
139 | @fa-var-cart-arrow-down: "\f218";
140 | @fa-var-cart-plus: "\f217";
141 | @fa-var-cc: "\f20a";
142 | @fa-var-cc-amex: "\f1f3";
143 | @fa-var-cc-diners-club: "\f24c";
144 | @fa-var-cc-discover: "\f1f2";
145 | @fa-var-cc-jcb: "\f24b";
146 | @fa-var-cc-mastercard: "\f1f1";
147 | @fa-var-cc-paypal: "\f1f4";
148 | @fa-var-cc-stripe: "\f1f5";
149 | @fa-var-cc-visa: "\f1f0";
150 | @fa-var-certificate: "\f0a3";
151 | @fa-var-chain: "\f0c1";
152 | @fa-var-chain-broken: "\f127";
153 | @fa-var-check: "\f00c";
154 | @fa-var-check-circle: "\f058";
155 | @fa-var-check-circle-o: "\f05d";
156 | @fa-var-check-square: "\f14a";
157 | @fa-var-check-square-o: "\f046";
158 | @fa-var-chevron-circle-down: "\f13a";
159 | @fa-var-chevron-circle-left: "\f137";
160 | @fa-var-chevron-circle-right: "\f138";
161 | @fa-var-chevron-circle-up: "\f139";
162 | @fa-var-chevron-down: "\f078";
163 | @fa-var-chevron-left: "\f053";
164 | @fa-var-chevron-right: "\f054";
165 | @fa-var-chevron-up: "\f077";
166 | @fa-var-child: "\f1ae";
167 | @fa-var-chrome: "\f268";
168 | @fa-var-circle: "\f111";
169 | @fa-var-circle-o: "\f10c";
170 | @fa-var-circle-o-notch: "\f1ce";
171 | @fa-var-circle-thin: "\f1db";
172 | @fa-var-clipboard: "\f0ea";
173 | @fa-var-clock-o: "\f017";
174 | @fa-var-clone: "\f24d";
175 | @fa-var-close: "\f00d";
176 | @fa-var-cloud: "\f0c2";
177 | @fa-var-cloud-download: "\f0ed";
178 | @fa-var-cloud-upload: "\f0ee";
179 | @fa-var-cny: "\f157";
180 | @fa-var-code: "\f121";
181 | @fa-var-code-fork: "\f126";
182 | @fa-var-codepen: "\f1cb";
183 | @fa-var-codiepie: "\f284";
184 | @fa-var-coffee: "\f0f4";
185 | @fa-var-cog: "\f013";
186 | @fa-var-cogs: "\f085";
187 | @fa-var-columns: "\f0db";
188 | @fa-var-comment: "\f075";
189 | @fa-var-comment-o: "\f0e5";
190 | @fa-var-commenting: "\f27a";
191 | @fa-var-commenting-o: "\f27b";
192 | @fa-var-comments: "\f086";
193 | @fa-var-comments-o: "\f0e6";
194 | @fa-var-compass: "\f14e";
195 | @fa-var-compress: "\f066";
196 | @fa-var-connectdevelop: "\f20e";
197 | @fa-var-contao: "\f26d";
198 | @fa-var-copy: "\f0c5";
199 | @fa-var-copyright: "\f1f9";
200 | @fa-var-creative-commons: "\f25e";
201 | @fa-var-credit-card: "\f09d";
202 | @fa-var-credit-card-alt: "\f283";
203 | @fa-var-crop: "\f125";
204 | @fa-var-crosshairs: "\f05b";
205 | @fa-var-css3: "\f13c";
206 | @fa-var-cube: "\f1b2";
207 | @fa-var-cubes: "\f1b3";
208 | @fa-var-cut: "\f0c4";
209 | @fa-var-cutlery: "\f0f5";
210 | @fa-var-dashboard: "\f0e4";
211 | @fa-var-dashcube: "\f210";
212 | @fa-var-database: "\f1c0";
213 | @fa-var-deaf: "\f2a4";
214 | @fa-var-deafness: "\f2a4";
215 | @fa-var-dedent: "\f03b";
216 | @fa-var-delicious: "\f1a5";
217 | @fa-var-desktop: "\f108";
218 | @fa-var-deviantart: "\f1bd";
219 | @fa-var-diamond: "\f219";
220 | @fa-var-digg: "\f1a6";
221 | @fa-var-dollar: "\f155";
222 | @fa-var-dot-circle-o: "\f192";
223 | @fa-var-download: "\f019";
224 | @fa-var-dribbble: "\f17d";
225 | @fa-var-drivers-license: "\f2c2";
226 | @fa-var-drivers-license-o: "\f2c3";
227 | @fa-var-dropbox: "\f16b";
228 | @fa-var-drupal: "\f1a9";
229 | @fa-var-edge: "\f282";
230 | @fa-var-edit: "\f044";
231 | @fa-var-eercast: "\f2da";
232 | @fa-var-eject: "\f052";
233 | @fa-var-ellipsis-h: "\f141";
234 | @fa-var-ellipsis-v: "\f142";
235 | @fa-var-empire: "\f1d1";
236 | @fa-var-envelope: "\f0e0";
237 | @fa-var-envelope-o: "\f003";
238 | @fa-var-envelope-open: "\f2b6";
239 | @fa-var-envelope-open-o: "\f2b7";
240 | @fa-var-envelope-square: "\f199";
241 | @fa-var-envira: "\f299";
242 | @fa-var-eraser: "\f12d";
243 | @fa-var-etsy: "\f2d7";
244 | @fa-var-eur: "\f153";
245 | @fa-var-euro: "\f153";
246 | @fa-var-exchange: "\f0ec";
247 | @fa-var-exclamation: "\f12a";
248 | @fa-var-exclamation-circle: "\f06a";
249 | @fa-var-exclamation-triangle: "\f071";
250 | @fa-var-expand: "\f065";
251 | @fa-var-expeditedssl: "\f23e";
252 | @fa-var-external-link: "\f08e";
253 | @fa-var-external-link-square: "\f14c";
254 | @fa-var-eye: "\f06e";
255 | @fa-var-eye-slash: "\f070";
256 | @fa-var-eyedropper: "\f1fb";
257 | @fa-var-fa: "\f2b4";
258 | @fa-var-facebook: "\f09a";
259 | @fa-var-facebook-f: "\f09a";
260 | @fa-var-facebook-official: "\f230";
261 | @fa-var-facebook-square: "\f082";
262 | @fa-var-fast-backward: "\f049";
263 | @fa-var-fast-forward: "\f050";
264 | @fa-var-fax: "\f1ac";
265 | @fa-var-feed: "\f09e";
266 | @fa-var-female: "\f182";
267 | @fa-var-fighter-jet: "\f0fb";
268 | @fa-var-file: "\f15b";
269 | @fa-var-file-archive-o: "\f1c6";
270 | @fa-var-file-audio-o: "\f1c7";
271 | @fa-var-file-code-o: "\f1c9";
272 | @fa-var-file-excel-o: "\f1c3";
273 | @fa-var-file-image-o: "\f1c5";
274 | @fa-var-file-movie-o: "\f1c8";
275 | @fa-var-file-o: "\f016";
276 | @fa-var-file-pdf-o: "\f1c1";
277 | @fa-var-file-photo-o: "\f1c5";
278 | @fa-var-file-picture-o: "\f1c5";
279 | @fa-var-file-powerpoint-o: "\f1c4";
280 | @fa-var-file-sound-o: "\f1c7";
281 | @fa-var-file-text: "\f15c";
282 | @fa-var-file-text-o: "\f0f6";
283 | @fa-var-file-video-o: "\f1c8";
284 | @fa-var-file-word-o: "\f1c2";
285 | @fa-var-file-zip-o: "\f1c6";
286 | @fa-var-files-o: "\f0c5";
287 | @fa-var-film: "\f008";
288 | @fa-var-filter: "\f0b0";
289 | @fa-var-fire: "\f06d";
290 | @fa-var-fire-extinguisher: "\f134";
291 | @fa-var-firefox: "\f269";
292 | @fa-var-first-order: "\f2b0";
293 | @fa-var-flag: "\f024";
294 | @fa-var-flag-checkered: "\f11e";
295 | @fa-var-flag-o: "\f11d";
296 | @fa-var-flash: "\f0e7";
297 | @fa-var-flask: "\f0c3";
298 | @fa-var-flickr: "\f16e";
299 | @fa-var-floppy-o: "\f0c7";
300 | @fa-var-folder: "\f07b";
301 | @fa-var-folder-o: "\f114";
302 | @fa-var-folder-open: "\f07c";
303 | @fa-var-folder-open-o: "\f115";
304 | @fa-var-font: "\f031";
305 | @fa-var-font-awesome: "\f2b4";
306 | @fa-var-fonticons: "\f280";
307 | @fa-var-fort-awesome: "\f286";
308 | @fa-var-forumbee: "\f211";
309 | @fa-var-forward: "\f04e";
310 | @fa-var-foursquare: "\f180";
311 | @fa-var-free-code-camp: "\f2c5";
312 | @fa-var-frown-o: "\f119";
313 | @fa-var-futbol-o: "\f1e3";
314 | @fa-var-gamepad: "\f11b";
315 | @fa-var-gavel: "\f0e3";
316 | @fa-var-gbp: "\f154";
317 | @fa-var-ge: "\f1d1";
318 | @fa-var-gear: "\f013";
319 | @fa-var-gears: "\f085";
320 | @fa-var-genderless: "\f22d";
321 | @fa-var-get-pocket: "\f265";
322 | @fa-var-gg: "\f260";
323 | @fa-var-gg-circle: "\f261";
324 | @fa-var-gift: "\f06b";
325 | @fa-var-git: "\f1d3";
326 | @fa-var-git-square: "\f1d2";
327 | @fa-var-github: "\f09b";
328 | @fa-var-github-alt: "\f113";
329 | @fa-var-github-square: "\f092";
330 | @fa-var-gitlab: "\f296";
331 | @fa-var-gittip: "\f184";
332 | @fa-var-glass: "\f000";
333 | @fa-var-glide: "\f2a5";
334 | @fa-var-glide-g: "\f2a6";
335 | @fa-var-globe: "\f0ac";
336 | @fa-var-google: "\f1a0";
337 | @fa-var-google-plus: "\f0d5";
338 | @fa-var-google-plus-circle: "\f2b3";
339 | @fa-var-google-plus-official: "\f2b3";
340 | @fa-var-google-plus-square: "\f0d4";
341 | @fa-var-google-wallet: "\f1ee";
342 | @fa-var-graduation-cap: "\f19d";
343 | @fa-var-gratipay: "\f184";
344 | @fa-var-grav: "\f2d6";
345 | @fa-var-group: "\f0c0";
346 | @fa-var-h-square: "\f0fd";
347 | @fa-var-hacker-news: "\f1d4";
348 | @fa-var-hand-grab-o: "\f255";
349 | @fa-var-hand-lizard-o: "\f258";
350 | @fa-var-hand-o-down: "\f0a7";
351 | @fa-var-hand-o-left: "\f0a5";
352 | @fa-var-hand-o-right: "\f0a4";
353 | @fa-var-hand-o-up: "\f0a6";
354 | @fa-var-hand-paper-o: "\f256";
355 | @fa-var-hand-peace-o: "\f25b";
356 | @fa-var-hand-pointer-o: "\f25a";
357 | @fa-var-hand-rock-o: "\f255";
358 | @fa-var-hand-scissors-o: "\f257";
359 | @fa-var-hand-spock-o: "\f259";
360 | @fa-var-hand-stop-o: "\f256";
361 | @fa-var-handshake-o: "\f2b5";
362 | @fa-var-hard-of-hearing: "\f2a4";
363 | @fa-var-hashtag: "\f292";
364 | @fa-var-hdd-o: "\f0a0";
365 | @fa-var-header: "\f1dc";
366 | @fa-var-headphones: "\f025";
367 | @fa-var-heart: "\f004";
368 | @fa-var-heart-o: "\f08a";
369 | @fa-var-heartbeat: "\f21e";
370 | @fa-var-history: "\f1da";
371 | @fa-var-home: "\f015";
372 | @fa-var-hospital-o: "\f0f8";
373 | @fa-var-hotel: "\f236";
374 | @fa-var-hourglass: "\f254";
375 | @fa-var-hourglass-1: "\f251";
376 | @fa-var-hourglass-2: "\f252";
377 | @fa-var-hourglass-3: "\f253";
378 | @fa-var-hourglass-end: "\f253";
379 | @fa-var-hourglass-half: "\f252";
380 | @fa-var-hourglass-o: "\f250";
381 | @fa-var-hourglass-start: "\f251";
382 | @fa-var-houzz: "\f27c";
383 | @fa-var-html5: "\f13b";
384 | @fa-var-i-cursor: "\f246";
385 | @fa-var-id-badge: "\f2c1";
386 | @fa-var-id-card: "\f2c2";
387 | @fa-var-id-card-o: "\f2c3";
388 | @fa-var-ils: "\f20b";
389 | @fa-var-image: "\f03e";
390 | @fa-var-imdb: "\f2d8";
391 | @fa-var-inbox: "\f01c";
392 | @fa-var-indent: "\f03c";
393 | @fa-var-industry: "\f275";
394 | @fa-var-info: "\f129";
395 | @fa-var-info-circle: "\f05a";
396 | @fa-var-inr: "\f156";
397 | @fa-var-instagram: "\f16d";
398 | @fa-var-institution: "\f19c";
399 | @fa-var-internet-explorer: "\f26b";
400 | @fa-var-intersex: "\f224";
401 | @fa-var-ioxhost: "\f208";
402 | @fa-var-italic: "\f033";
403 | @fa-var-joomla: "\f1aa";
404 | @fa-var-jpy: "\f157";
405 | @fa-var-jsfiddle: "\f1cc";
406 | @fa-var-key: "\f084";
407 | @fa-var-keyboard-o: "\f11c";
408 | @fa-var-krw: "\f159";
409 | @fa-var-language: "\f1ab";
410 | @fa-var-laptop: "\f109";
411 | @fa-var-lastfm: "\f202";
412 | @fa-var-lastfm-square: "\f203";
413 | @fa-var-leaf: "\f06c";
414 | @fa-var-leanpub: "\f212";
415 | @fa-var-legal: "\f0e3";
416 | @fa-var-lemon-o: "\f094";
417 | @fa-var-level-down: "\f149";
418 | @fa-var-level-up: "\f148";
419 | @fa-var-life-bouy: "\f1cd";
420 | @fa-var-life-buoy: "\f1cd";
421 | @fa-var-life-ring: "\f1cd";
422 | @fa-var-life-saver: "\f1cd";
423 | @fa-var-lightbulb-o: "\f0eb";
424 | @fa-var-line-chart: "\f201";
425 | @fa-var-link: "\f0c1";
426 | @fa-var-linkedin: "\f0e1";
427 | @fa-var-linkedin-square: "\f08c";
428 | @fa-var-linode: "\f2b8";
429 | @fa-var-linux: "\f17c";
430 | @fa-var-list: "\f03a";
431 | @fa-var-list-alt: "\f022";
432 | @fa-var-list-ol: "\f0cb";
433 | @fa-var-list-ul: "\f0ca";
434 | @fa-var-location-arrow: "\f124";
435 | @fa-var-lock: "\f023";
436 | @fa-var-long-arrow-down: "\f175";
437 | @fa-var-long-arrow-left: "\f177";
438 | @fa-var-long-arrow-right: "\f178";
439 | @fa-var-long-arrow-up: "\f176";
440 | @fa-var-low-vision: "\f2a8";
441 | @fa-var-magic: "\f0d0";
442 | @fa-var-magnet: "\f076";
443 | @fa-var-mail-forward: "\f064";
444 | @fa-var-mail-reply: "\f112";
445 | @fa-var-mail-reply-all: "\f122";
446 | @fa-var-male: "\f183";
447 | @fa-var-map: "\f279";
448 | @fa-var-map-marker: "\f041";
449 | @fa-var-map-o: "\f278";
450 | @fa-var-map-pin: "\f276";
451 | @fa-var-map-signs: "\f277";
452 | @fa-var-mars: "\f222";
453 | @fa-var-mars-double: "\f227";
454 | @fa-var-mars-stroke: "\f229";
455 | @fa-var-mars-stroke-h: "\f22b";
456 | @fa-var-mars-stroke-v: "\f22a";
457 | @fa-var-maxcdn: "\f136";
458 | @fa-var-meanpath: "\f20c";
459 | @fa-var-medium: "\f23a";
460 | @fa-var-medkit: "\f0fa";
461 | @fa-var-meetup: "\f2e0";
462 | @fa-var-meh-o: "\f11a";
463 | @fa-var-mercury: "\f223";
464 | @fa-var-microchip: "\f2db";
465 | @fa-var-microphone: "\f130";
466 | @fa-var-microphone-slash: "\f131";
467 | @fa-var-minus: "\f068";
468 | @fa-var-minus-circle: "\f056";
469 | @fa-var-minus-square: "\f146";
470 | @fa-var-minus-square-o: "\f147";
471 | @fa-var-mixcloud: "\f289";
472 | @fa-var-mobile: "\f10b";
473 | @fa-var-mobile-phone: "\f10b";
474 | @fa-var-modx: "\f285";
475 | @fa-var-money: "\f0d6";
476 | @fa-var-moon-o: "\f186";
477 | @fa-var-mortar-board: "\f19d";
478 | @fa-var-motorcycle: "\f21c";
479 | @fa-var-mouse-pointer: "\f245";
480 | @fa-var-music: "\f001";
481 | @fa-var-navicon: "\f0c9";
482 | @fa-var-neuter: "\f22c";
483 | @fa-var-newspaper-o: "\f1ea";
484 | @fa-var-object-group: "\f247";
485 | @fa-var-object-ungroup: "\f248";
486 | @fa-var-odnoklassniki: "\f263";
487 | @fa-var-odnoklassniki-square: "\f264";
488 | @fa-var-opencart: "\f23d";
489 | @fa-var-openid: "\f19b";
490 | @fa-var-opera: "\f26a";
491 | @fa-var-optin-monster: "\f23c";
492 | @fa-var-outdent: "\f03b";
493 | @fa-var-pagelines: "\f18c";
494 | @fa-var-paint-brush: "\f1fc";
495 | @fa-var-paper-plane: "\f1d8";
496 | @fa-var-paper-plane-o: "\f1d9";
497 | @fa-var-paperclip: "\f0c6";
498 | @fa-var-paragraph: "\f1dd";
499 | @fa-var-paste: "\f0ea";
500 | @fa-var-pause: "\f04c";
501 | @fa-var-pause-circle: "\f28b";
502 | @fa-var-pause-circle-o: "\f28c";
503 | @fa-var-paw: "\f1b0";
504 | @fa-var-paypal: "\f1ed";
505 | @fa-var-pencil: "\f040";
506 | @fa-var-pencil-square: "\f14b";
507 | @fa-var-pencil-square-o: "\f044";
508 | @fa-var-percent: "\f295";
509 | @fa-var-phone: "\f095";
510 | @fa-var-phone-square: "\f098";
511 | @fa-var-photo: "\f03e";
512 | @fa-var-picture-o: "\f03e";
513 | @fa-var-pie-chart: "\f200";
514 | @fa-var-pied-piper: "\f2ae";
515 | @fa-var-pied-piper-alt: "\f1a8";
516 | @fa-var-pied-piper-pp: "\f1a7";
517 | @fa-var-pinterest: "\f0d2";
518 | @fa-var-pinterest-p: "\f231";
519 | @fa-var-pinterest-square: "\f0d3";
520 | @fa-var-plane: "\f072";
521 | @fa-var-play: "\f04b";
522 | @fa-var-play-circle: "\f144";
523 | @fa-var-play-circle-o: "\f01d";
524 | @fa-var-plug: "\f1e6";
525 | @fa-var-plus: "\f067";
526 | @fa-var-plus-circle: "\f055";
527 | @fa-var-plus-square: "\f0fe";
528 | @fa-var-plus-square-o: "\f196";
529 | @fa-var-podcast: "\f2ce";
530 | @fa-var-power-off: "\f011";
531 | @fa-var-print: "\f02f";
532 | @fa-var-product-hunt: "\f288";
533 | @fa-var-puzzle-piece: "\f12e";
534 | @fa-var-qq: "\f1d6";
535 | @fa-var-qrcode: "\f029";
536 | @fa-var-question: "\f128";
537 | @fa-var-question-circle: "\f059";
538 | @fa-var-question-circle-o: "\f29c";
539 | @fa-var-quora: "\f2c4";
540 | @fa-var-quote-left: "\f10d";
541 | @fa-var-quote-right: "\f10e";
542 | @fa-var-ra: "\f1d0";
543 | @fa-var-random: "\f074";
544 | @fa-var-ravelry: "\f2d9";
545 | @fa-var-rebel: "\f1d0";
546 | @fa-var-recycle: "\f1b8";
547 | @fa-var-reddit: "\f1a1";
548 | @fa-var-reddit-alien: "\f281";
549 | @fa-var-reddit-square: "\f1a2";
550 | @fa-var-refresh: "\f021";
551 | @fa-var-registered: "\f25d";
552 | @fa-var-remove: "\f00d";
553 | @fa-var-renren: "\f18b";
554 | @fa-var-reorder: "\f0c9";
555 | @fa-var-repeat: "\f01e";
556 | @fa-var-reply: "\f112";
557 | @fa-var-reply-all: "\f122";
558 | @fa-var-resistance: "\f1d0";
559 | @fa-var-retweet: "\f079";
560 | @fa-var-rmb: "\f157";
561 | @fa-var-road: "\f018";
562 | @fa-var-rocket: "\f135";
563 | @fa-var-rotate-left: "\f0e2";
564 | @fa-var-rotate-right: "\f01e";
565 | @fa-var-rouble: "\f158";
566 | @fa-var-rss: "\f09e";
567 | @fa-var-rss-square: "\f143";
568 | @fa-var-rub: "\f158";
569 | @fa-var-ruble: "\f158";
570 | @fa-var-rupee: "\f156";
571 | @fa-var-s15: "\f2cd";
572 | @fa-var-safari: "\f267";
573 | @fa-var-save: "\f0c7";
574 | @fa-var-scissors: "\f0c4";
575 | @fa-var-scribd: "\f28a";
576 | @fa-var-search: "\f002";
577 | @fa-var-search-minus: "\f010";
578 | @fa-var-search-plus: "\f00e";
579 | @fa-var-sellsy: "\f213";
580 | @fa-var-send: "\f1d8";
581 | @fa-var-send-o: "\f1d9";
582 | @fa-var-server: "\f233";
583 | @fa-var-share: "\f064";
584 | @fa-var-share-alt: "\f1e0";
585 | @fa-var-share-alt-square: "\f1e1";
586 | @fa-var-share-square: "\f14d";
587 | @fa-var-share-square-o: "\f045";
588 | @fa-var-shekel: "\f20b";
589 | @fa-var-sheqel: "\f20b";
590 | @fa-var-shield: "\f132";
591 | @fa-var-ship: "\f21a";
592 | @fa-var-shirtsinbulk: "\f214";
593 | @fa-var-shopping-bag: "\f290";
594 | @fa-var-shopping-basket: "\f291";
595 | @fa-var-shopping-cart: "\f07a";
596 | @fa-var-shower: "\f2cc";
597 | @fa-var-sign-in: "\f090";
598 | @fa-var-sign-language: "\f2a7";
599 | @fa-var-sign-out: "\f08b";
600 | @fa-var-signal: "\f012";
601 | @fa-var-signing: "\f2a7";
602 | @fa-var-simplybuilt: "\f215";
603 | @fa-var-sitemap: "\f0e8";
604 | @fa-var-skyatlas: "\f216";
605 | @fa-var-skype: "\f17e";
606 | @fa-var-slack: "\f198";
607 | @fa-var-sliders: "\f1de";
608 | @fa-var-slideshare: "\f1e7";
609 | @fa-var-smile-o: "\f118";
610 | @fa-var-snapchat: "\f2ab";
611 | @fa-var-snapchat-ghost: "\f2ac";
612 | @fa-var-snapchat-square: "\f2ad";
613 | @fa-var-snowflake-o: "\f2dc";
614 | @fa-var-soccer-ball-o: "\f1e3";
615 | @fa-var-sort: "\f0dc";
616 | @fa-var-sort-alpha-asc: "\f15d";
617 | @fa-var-sort-alpha-desc: "\f15e";
618 | @fa-var-sort-amount-asc: "\f160";
619 | @fa-var-sort-amount-desc: "\f161";
620 | @fa-var-sort-asc: "\f0de";
621 | @fa-var-sort-desc: "\f0dd";
622 | @fa-var-sort-down: "\f0dd";
623 | @fa-var-sort-numeric-asc: "\f162";
624 | @fa-var-sort-numeric-desc: "\f163";
625 | @fa-var-sort-up: "\f0de";
626 | @fa-var-soundcloud: "\f1be";
627 | @fa-var-space-shuttle: "\f197";
628 | @fa-var-spinner: "\f110";
629 | @fa-var-spoon: "\f1b1";
630 | @fa-var-spotify: "\f1bc";
631 | @fa-var-square: "\f0c8";
632 | @fa-var-square-o: "\f096";
633 | @fa-var-stack-exchange: "\f18d";
634 | @fa-var-stack-overflow: "\f16c";
635 | @fa-var-star: "\f005";
636 | @fa-var-star-half: "\f089";
637 | @fa-var-star-half-empty: "\f123";
638 | @fa-var-star-half-full: "\f123";
639 | @fa-var-star-half-o: "\f123";
640 | @fa-var-star-o: "\f006";
641 | @fa-var-steam: "\f1b6";
642 | @fa-var-steam-square: "\f1b7";
643 | @fa-var-step-backward: "\f048";
644 | @fa-var-step-forward: "\f051";
645 | @fa-var-stethoscope: "\f0f1";
646 | @fa-var-sticky-note: "\f249";
647 | @fa-var-sticky-note-o: "\f24a";
648 | @fa-var-stop: "\f04d";
649 | @fa-var-stop-circle: "\f28d";
650 | @fa-var-stop-circle-o: "\f28e";
651 | @fa-var-street-view: "\f21d";
652 | @fa-var-strikethrough: "\f0cc";
653 | @fa-var-stumbleupon: "\f1a4";
654 | @fa-var-stumbleupon-circle: "\f1a3";
655 | @fa-var-subscript: "\f12c";
656 | @fa-var-subway: "\f239";
657 | @fa-var-suitcase: "\f0f2";
658 | @fa-var-sun-o: "\f185";
659 | @fa-var-superpowers: "\f2dd";
660 | @fa-var-superscript: "\f12b";
661 | @fa-var-support: "\f1cd";
662 | @fa-var-table: "\f0ce";
663 | @fa-var-tablet: "\f10a";
664 | @fa-var-tachometer: "\f0e4";
665 | @fa-var-tag: "\f02b";
666 | @fa-var-tags: "\f02c";
667 | @fa-var-tasks: "\f0ae";
668 | @fa-var-taxi: "\f1ba";
669 | @fa-var-telegram: "\f2c6";
670 | @fa-var-television: "\f26c";
671 | @fa-var-tencent-weibo: "\f1d5";
672 | @fa-var-terminal: "\f120";
673 | @fa-var-text-height: "\f034";
674 | @fa-var-text-width: "\f035";
675 | @fa-var-th: "\f00a";
676 | @fa-var-th-large: "\f009";
677 | @fa-var-th-list: "\f00b";
678 | @fa-var-themeisle: "\f2b2";
679 | @fa-var-thermometer: "\f2c7";
680 | @fa-var-thermometer-0: "\f2cb";
681 | @fa-var-thermometer-1: "\f2ca";
682 | @fa-var-thermometer-2: "\f2c9";
683 | @fa-var-thermometer-3: "\f2c8";
684 | @fa-var-thermometer-4: "\f2c7";
685 | @fa-var-thermometer-empty: "\f2cb";
686 | @fa-var-thermometer-full: "\f2c7";
687 | @fa-var-thermometer-half: "\f2c9";
688 | @fa-var-thermometer-quarter: "\f2ca";
689 | @fa-var-thermometer-three-quarters: "\f2c8";
690 | @fa-var-thumb-tack: "\f08d";
691 | @fa-var-thumbs-down: "\f165";
692 | @fa-var-thumbs-o-down: "\f088";
693 | @fa-var-thumbs-o-up: "\f087";
694 | @fa-var-thumbs-up: "\f164";
695 | @fa-var-ticket: "\f145";
696 | @fa-var-times: "\f00d";
697 | @fa-var-times-circle: "\f057";
698 | @fa-var-times-circle-o: "\f05c";
699 | @fa-var-times-rectangle: "\f2d3";
700 | @fa-var-times-rectangle-o: "\f2d4";
701 | @fa-var-tint: "\f043";
702 | @fa-var-toggle-down: "\f150";
703 | @fa-var-toggle-left: "\f191";
704 | @fa-var-toggle-off: "\f204";
705 | @fa-var-toggle-on: "\f205";
706 | @fa-var-toggle-right: "\f152";
707 | @fa-var-toggle-up: "\f151";
708 | @fa-var-trademark: "\f25c";
709 | @fa-var-train: "\f238";
710 | @fa-var-transgender: "\f224";
711 | @fa-var-transgender-alt: "\f225";
712 | @fa-var-trash: "\f1f8";
713 | @fa-var-trash-o: "\f014";
714 | @fa-var-tree: "\f1bb";
715 | @fa-var-trello: "\f181";
716 | @fa-var-tripadvisor: "\f262";
717 | @fa-var-trophy: "\f091";
718 | @fa-var-truck: "\f0d1";
719 | @fa-var-try: "\f195";
720 | @fa-var-tty: "\f1e4";
721 | @fa-var-tumblr: "\f173";
722 | @fa-var-tumblr-square: "\f174";
723 | @fa-var-turkish-lira: "\f195";
724 | @fa-var-tv: "\f26c";
725 | @fa-var-twitch: "\f1e8";
726 | @fa-var-twitter: "\f099";
727 | @fa-var-twitter-square: "\f081";
728 | @fa-var-umbrella: "\f0e9";
729 | @fa-var-underline: "\f0cd";
730 | @fa-var-undo: "\f0e2";
731 | @fa-var-universal-access: "\f29a";
732 | @fa-var-university: "\f19c";
733 | @fa-var-unlink: "\f127";
734 | @fa-var-unlock: "\f09c";
735 | @fa-var-unlock-alt: "\f13e";
736 | @fa-var-unsorted: "\f0dc";
737 | @fa-var-upload: "\f093";
738 | @fa-var-usb: "\f287";
739 | @fa-var-usd: "\f155";
740 | @fa-var-user: "\f007";
741 | @fa-var-user-circle: "\f2bd";
742 | @fa-var-user-circle-o: "\f2be";
743 | @fa-var-user-md: "\f0f0";
744 | @fa-var-user-o: "\f2c0";
745 | @fa-var-user-plus: "\f234";
746 | @fa-var-user-secret: "\f21b";
747 | @fa-var-user-times: "\f235";
748 | @fa-var-users: "\f0c0";
749 | @fa-var-vcard: "\f2bb";
750 | @fa-var-vcard-o: "\f2bc";
751 | @fa-var-venus: "\f221";
752 | @fa-var-venus-double: "\f226";
753 | @fa-var-venus-mars: "\f228";
754 | @fa-var-viacoin: "\f237";
755 | @fa-var-viadeo: "\f2a9";
756 | @fa-var-viadeo-square: "\f2aa";
757 | @fa-var-video-camera: "\f03d";
758 | @fa-var-vimeo: "\f27d";
759 | @fa-var-vimeo-square: "\f194";
760 | @fa-var-vine: "\f1ca";
761 | @fa-var-vk: "\f189";
762 | @fa-var-volume-control-phone: "\f2a0";
763 | @fa-var-volume-down: "\f027";
764 | @fa-var-volume-off: "\f026";
765 | @fa-var-volume-up: "\f028";
766 | @fa-var-warning: "\f071";
767 | @fa-var-wechat: "\f1d7";
768 | @fa-var-weibo: "\f18a";
769 | @fa-var-weixin: "\f1d7";
770 | @fa-var-whatsapp: "\f232";
771 | @fa-var-wheelchair: "\f193";
772 | @fa-var-wheelchair-alt: "\f29b";
773 | @fa-var-wifi: "\f1eb";
774 | @fa-var-wikipedia-w: "\f266";
775 | @fa-var-window-close: "\f2d3";
776 | @fa-var-window-close-o: "\f2d4";
777 | @fa-var-window-maximize: "\f2d0";
778 | @fa-var-window-minimize: "\f2d1";
779 | @fa-var-window-restore: "\f2d2";
780 | @fa-var-windows: "\f17a";
781 | @fa-var-won: "\f159";
782 | @fa-var-wordpress: "\f19a";
783 | @fa-var-wpbeginner: "\f297";
784 | @fa-var-wpexplorer: "\f2de";
785 | @fa-var-wpforms: "\f298";
786 | @fa-var-wrench: "\f0ad";
787 | @fa-var-xing: "\f168";
788 | @fa-var-xing-square: "\f169";
789 | @fa-var-y-combinator: "\f23b";
790 | @fa-var-y-combinator-square: "\f1d4";
791 | @fa-var-yahoo: "\f19e";
792 | @fa-var-yc: "\f23b";
793 | @fa-var-yc-square: "\f1d4";
794 | @fa-var-yelp: "\f1e9";
795 | @fa-var-yen: "\f157";
796 | @fa-var-yoast: "\f2b1";
797 | @fa-var-youtube: "\f167";
798 | @fa-var-youtube-play: "\f16a";
799 | @fa-var-youtube-square: "\f166";
800 | 
801 | 


--------------------------------------------------------------------------------
/pub/fontawesome/scss/_variables.scss:
--------------------------------------------------------------------------------
  1 | // Variables
  2 | // --------------------------
  3 | 
  4 | $fa-font-path:        "../fonts" !default;
  5 | $fa-font-size-base:   14px !default;
  6 | $fa-line-height-base: 1 !default;
  7 | //$fa-font-path:        "//netdna.bootstrapcdn.com/font-awesome/4.7.0/fonts" !default; // for referencing Bootstrap CDN font files directly
  8 | $fa-css-prefix:       fa !default;
  9 | $fa-version:          "4.7.0" !default;
 10 | $fa-border-color:     #eee !default;
 11 | $fa-inverse:          #fff !default;
 12 | $fa-li-width:         (30em / 14) !default;
 13 | 
 14 | $fa-var-500px: "\f26e";
 15 | $fa-var-address-book: "\f2b9";
 16 | $fa-var-address-book-o: "\f2ba";
 17 | $fa-var-address-card: "\f2bb";
 18 | $fa-var-address-card-o: "\f2bc";
 19 | $fa-var-adjust: "\f042";
 20 | $fa-var-adn: "\f170";
 21 | $fa-var-align-center: "\f037";
 22 | $fa-var-align-justify: "\f039";
 23 | $fa-var-align-left: "\f036";
 24 | $fa-var-align-right: "\f038";
 25 | $fa-var-amazon: "\f270";
 26 | $fa-var-ambulance: "\f0f9";
 27 | $fa-var-american-sign-language-interpreting: "\f2a3";
 28 | $fa-var-anchor: "\f13d";
 29 | $fa-var-android: "\f17b";
 30 | $fa-var-angellist: "\f209";
 31 | $fa-var-angle-double-down: "\f103";
 32 | $fa-var-angle-double-left: "\f100";
 33 | $fa-var-angle-double-right: "\f101";
 34 | $fa-var-angle-double-up: "\f102";
 35 | $fa-var-angle-down: "\f107";
 36 | $fa-var-angle-left: "\f104";
 37 | $fa-var-angle-right: "\f105";
 38 | $fa-var-angle-up: "\f106";
 39 | $fa-var-apple: "\f179";
 40 | $fa-var-archive: "\f187";
 41 | $fa-var-area-chart: "\f1fe";
 42 | $fa-var-arrow-circle-down: "\f0ab";
 43 | $fa-var-arrow-circle-left: "\f0a8";
 44 | $fa-var-arrow-circle-o-down: "\f01a";
 45 | $fa-var-arrow-circle-o-left: "\f190";
 46 | $fa-var-arrow-circle-o-right: "\f18e";
 47 | $fa-var-arrow-circle-o-up: "\f01b";
 48 | $fa-var-arrow-circle-right: "\f0a9";
 49 | $fa-var-arrow-circle-up: "\f0aa";
 50 | $fa-var-arrow-down: "\f063";
 51 | $fa-var-arrow-left: "\f060";
 52 | $fa-var-arrow-right: "\f061";
 53 | $fa-var-arrow-up: "\f062";
 54 | $fa-var-arrows: "\f047";
 55 | $fa-var-arrows-alt: "\f0b2";
 56 | $fa-var-arrows-h: "\f07e";
 57 | $fa-var-arrows-v: "\f07d";
 58 | $fa-var-asl-interpreting: "\f2a3";
 59 | $fa-var-assistive-listening-systems: "\f2a2";
 60 | $fa-var-asterisk: "\f069";
 61 | $fa-var-at: "\f1fa";
 62 | $fa-var-audio-description: "\f29e";
 63 | $fa-var-automobile: "\f1b9";
 64 | $fa-var-backward: "\f04a";
 65 | $fa-var-balance-scale: "\f24e";
 66 | $fa-var-ban: "\f05e";
 67 | $fa-var-bandcamp: "\f2d5";
 68 | $fa-var-bank: "\f19c";
 69 | $fa-var-bar-chart: "\f080";
 70 | $fa-var-bar-chart-o: "\f080";
 71 | $fa-var-barcode: "\f02a";
 72 | $fa-var-bars: "\f0c9";
 73 | $fa-var-bath: "\f2cd";
 74 | $fa-var-bathtub: "\f2cd";
 75 | $fa-var-battery: "\f240";
 76 | $fa-var-battery-0: "\f244";
 77 | $fa-var-battery-1: "\f243";
 78 | $fa-var-battery-2: "\f242";
 79 | $fa-var-battery-3: "\f241";
 80 | $fa-var-battery-4: "\f240";
 81 | $fa-var-battery-empty: "\f244";
 82 | $fa-var-battery-full: "\f240";
 83 | $fa-var-battery-half: "\f242";
 84 | $fa-var-battery-quarter: "\f243";
 85 | $fa-var-battery-three-quarters: "\f241";
 86 | $fa-var-bed: "\f236";
 87 | $fa-var-beer: "\f0fc";
 88 | $fa-var-behance: "\f1b4";
 89 | $fa-var-behance-square: "\f1b5";
 90 | $fa-var-bell: "\f0f3";
 91 | $fa-var-bell-o: "\f0a2";
 92 | $fa-var-bell-slash: "\f1f6";
 93 | $fa-var-bell-slash-o: "\f1f7";
 94 | $fa-var-bicycle: "\f206";
 95 | $fa-var-binoculars: "\f1e5";
 96 | $fa-var-birthday-cake: "\f1fd";
 97 | $fa-var-bitbucket: "\f171";
 98 | $fa-var-bitbucket-square: "\f172";
 99 | $fa-var-bitcoin: "\f15a";
100 | $fa-var-black-tie: "\f27e";
101 | $fa-var-blind: "\f29d";
102 | $fa-var-bluetooth: "\f293";
103 | $fa-var-bluetooth-b: "\f294";
104 | $fa-var-bold: "\f032";
105 | $fa-var-bolt: "\f0e7";
106 | $fa-var-bomb: "\f1e2";
107 | $fa-var-book: "\f02d";
108 | $fa-var-bookmark: "\f02e";
109 | $fa-var-bookmark-o: "\f097";
110 | $fa-var-braille: "\f2a1";
111 | $fa-var-briefcase: "\f0b1";
112 | $fa-var-btc: "\f15a";
113 | $fa-var-bug: "\f188";
114 | $fa-var-building: "\f1ad";
115 | $fa-var-building-o: "\f0f7";
116 | $fa-var-bullhorn: "\f0a1";
117 | $fa-var-bullseye: "\f140";
118 | $fa-var-bus: "\f207";
119 | $fa-var-buysellads: "\f20d";
120 | $fa-var-cab: "\f1ba";
121 | $fa-var-calculator: "\f1ec";
122 | $fa-var-calendar: "\f073";
123 | $fa-var-calendar-check-o: "\f274";
124 | $fa-var-calendar-minus-o: "\f272";
125 | $fa-var-calendar-o: "\f133";
126 | $fa-var-calendar-plus-o: "\f271";
127 | $fa-var-calendar-times-o: "\f273";
128 | $fa-var-camera: "\f030";
129 | $fa-var-camera-retro: "\f083";
130 | $fa-var-car: "\f1b9";
131 | $fa-var-caret-down: "\f0d7";
132 | $fa-var-caret-left: "\f0d9";
133 | $fa-var-caret-right: "\f0da";
134 | $fa-var-caret-square-o-down: "\f150";
135 | $fa-var-caret-square-o-left: "\f191";
136 | $fa-var-caret-square-o-right: "\f152";
137 | $fa-var-caret-square-o-up: "\f151";
138 | $fa-var-caret-up: "\f0d8";
139 | $fa-var-cart-arrow-down: "\f218";
140 | $fa-var-cart-plus: "\f217";
141 | $fa-var-cc: "\f20a";
142 | $fa-var-cc-amex: "\f1f3";
143 | $fa-var-cc-diners-club: "\f24c";
144 | $fa-var-cc-discover: "\f1f2";
145 | $fa-var-cc-jcb: "\f24b";
146 | $fa-var-cc-mastercard: "\f1f1";
147 | $fa-var-cc-paypal: "\f1f4";
148 | $fa-var-cc-stripe: "\f1f5";
149 | $fa-var-cc-visa: "\f1f0";
150 | $fa-var-certificate: "\f0a3";
151 | $fa-var-chain: "\f0c1";
152 | $fa-var-chain-broken: "\f127";
153 | $fa-var-check: "\f00c";
154 | $fa-var-check-circle: "\f058";
155 | $fa-var-check-circle-o: "\f05d";
156 | $fa-var-check-square: "\f14a";
157 | $fa-var-check-square-o: "\f046";
158 | $fa-var-chevron-circle-down: "\f13a";
159 | $fa-var-chevron-circle-left: "\f137";
160 | $fa-var-chevron-circle-right: "\f138";
161 | $fa-var-chevron-circle-up: "\f139";
162 | $fa-var-chevron-down: "\f078";
163 | $fa-var-chevron-left: "\f053";
164 | $fa-var-chevron-right: "\f054";
165 | $fa-var-chevron-up: "\f077";
166 | $fa-var-child: "\f1ae";
167 | $fa-var-chrome: "\f268";
168 | $fa-var-circle: "\f111";
169 | $fa-var-circle-o: "\f10c";
170 | $fa-var-circle-o-notch: "\f1ce";
171 | $fa-var-circle-thin: "\f1db";
172 | $fa-var-clipboard: "\f0ea";
173 | $fa-var-clock-o: "\f017";
174 | $fa-var-clone: "\f24d";
175 | $fa-var-close: "\f00d";
176 | $fa-var-cloud: "\f0c2";
177 | $fa-var-cloud-download: "\f0ed";
178 | $fa-var-cloud-upload: "\f0ee";
179 | $fa-var-cny: "\f157";
180 | $fa-var-code: "\f121";
181 | $fa-var-code-fork: "\f126";
182 | $fa-var-codepen: "\f1cb";
183 | $fa-var-codiepie: "\f284";
184 | $fa-var-coffee: "\f0f4";
185 | $fa-var-cog: "\f013";
186 | $fa-var-cogs: "\f085";
187 | $fa-var-columns: "\f0db";
188 | $fa-var-comment: "\f075";
189 | $fa-var-comment-o: "\f0e5";
190 | $fa-var-commenting: "\f27a";
191 | $fa-var-commenting-o: "\f27b";
192 | $fa-var-comments: "\f086";
193 | $fa-var-comments-o: "\f0e6";
194 | $fa-var-compass: "\f14e";
195 | $fa-var-compress: "\f066";
196 | $fa-var-connectdevelop: "\f20e";
197 | $fa-var-contao: "\f26d";
198 | $fa-var-copy: "\f0c5";
199 | $fa-var-copyright: "\f1f9";
200 | $fa-var-creative-commons: "\f25e";
201 | $fa-var-credit-card: "\f09d";
202 | $fa-var-credit-card-alt: "\f283";
203 | $fa-var-crop: "\f125";
204 | $fa-var-crosshairs: "\f05b";
205 | $fa-var-css3: "\f13c";
206 | $fa-var-cube: "\f1b2";
207 | $fa-var-cubes: "\f1b3";
208 | $fa-var-cut: "\f0c4";
209 | $fa-var-cutlery: "\f0f5";
210 | $fa-var-dashboard: "\f0e4";
211 | $fa-var-dashcube: "\f210";
212 | $fa-var-database: "\f1c0";
213 | $fa-var-deaf: "\f2a4";
214 | $fa-var-deafness: "\f2a4";
215 | $fa-var-dedent: "\f03b";
216 | $fa-var-delicious: "\f1a5";
217 | $fa-var-desktop: "\f108";
218 | $fa-var-deviantart: "\f1bd";
219 | $fa-var-diamond: "\f219";
220 | $fa-var-digg: "\f1a6";
221 | $fa-var-dollar: "\f155";
222 | $fa-var-dot-circle-o: "\f192";
223 | $fa-var-download: "\f019";
224 | $fa-var-dribbble: "\f17d";
225 | $fa-var-drivers-license: "\f2c2";
226 | $fa-var-drivers-license-o: "\f2c3";
227 | $fa-var-dropbox: "\f16b";
228 | $fa-var-drupal: "\f1a9";
229 | $fa-var-edge: "\f282";
230 | $fa-var-edit: "\f044";
231 | $fa-var-eercast: "\f2da";
232 | $fa-var-eject: "\f052";
233 | $fa-var-ellipsis-h: "\f141";
234 | $fa-var-ellipsis-v: "\f142";
235 | $fa-var-empire: "\f1d1";
236 | $fa-var-envelope: "\f0e0";
237 | $fa-var-envelope-o: "\f003";
238 | $fa-var-envelope-open: "\f2b6";
239 | $fa-var-envelope-open-o: "\f2b7";
240 | $fa-var-envelope-square: "\f199";
241 | $fa-var-envira: "\f299";
242 | $fa-var-eraser: "\f12d";
243 | $fa-var-etsy: "\f2d7";
244 | $fa-var-eur: "\f153";
245 | $fa-var-euro: "\f153";
246 | $fa-var-exchange: "\f0ec";
247 | $fa-var-exclamation: "\f12a";
248 | $fa-var-exclamation-circle: "\f06a";
249 | $fa-var-exclamation-triangle: "\f071";
250 | $fa-var-expand: "\f065";
251 | $fa-var-expeditedssl: "\f23e";
252 | $fa-var-external-link: "\f08e";
253 | $fa-var-external-link-square: "\f14c";
254 | $fa-var-eye: "\f06e";
255 | $fa-var-eye-slash: "\f070";
256 | $fa-var-eyedropper: "\f1fb";
257 | $fa-var-fa: "\f2b4";
258 | $fa-var-facebook: "\f09a";
259 | $fa-var-facebook-f: "\f09a";
260 | $fa-var-facebook-official: "\f230";
261 | $fa-var-facebook-square: "\f082";
262 | $fa-var-fast-backward: "\f049";
263 | $fa-var-fast-forward: "\f050";
264 | $fa-var-fax: "\f1ac";
265 | $fa-var-feed: "\f09e";
266 | $fa-var-female: "\f182";
267 | $fa-var-fighter-jet: "\f0fb";
268 | $fa-var-file: "\f15b";
269 | $fa-var-file-archive-o: "\f1c6";
270 | $fa-var-file-audio-o: "\f1c7";
271 | $fa-var-file-code-o: "\f1c9";
272 | $fa-var-file-excel-o: "\f1c3";
273 | $fa-var-file-image-o: "\f1c5";
274 | $fa-var-file-movie-o: "\f1c8";
275 | $fa-var-file-o: "\f016";
276 | $fa-var-file-pdf-o: "\f1c1";
277 | $fa-var-file-photo-o: "\f1c5";
278 | $fa-var-file-picture-o: "\f1c5";
279 | $fa-var-file-powerpoint-o: "\f1c4";
280 | $fa-var-file-sound-o: "\f1c7";
281 | $fa-var-file-text: "\f15c";
282 | $fa-var-file-text-o: "\f0f6";
283 | $fa-var-file-video-o: "\f1c8";
284 | $fa-var-file-word-o: "\f1c2";
285 | $fa-var-file-zip-o: "\f1c6";
286 | $fa-var-files-o: "\f0c5";
287 | $fa-var-film: "\f008";
288 | $fa-var-filter: "\f0b0";
289 | $fa-var-fire: "\f06d";
290 | $fa-var-fire-extinguisher: "\f134";
291 | $fa-var-firefox: "\f269";
292 | $fa-var-first-order: "\f2b0";
293 | $fa-var-flag: "\f024";
294 | $fa-var-flag-checkered: "\f11e";
295 | $fa-var-flag-o: "\f11d";
296 | $fa-var-flash: "\f0e7";
297 | $fa-var-flask: "\f0c3";
298 | $fa-var-flickr: "\f16e";
299 | $fa-var-floppy-o: "\f0c7";
300 | $fa-var-folder: "\f07b";
301 | $fa-var-folder-o: "\f114";
302 | $fa-var-folder-open: "\f07c";
303 | $fa-var-folder-open-o: "\f115";
304 | $fa-var-font: "\f031";
305 | $fa-var-font-awesome: "\f2b4";
306 | $fa-var-fonticons: "\f280";
307 | $fa-var-fort-awesome: "\f286";
308 | $fa-var-forumbee: "\f211";
309 | $fa-var-forward: "\f04e";
310 | $fa-var-foursquare: "\f180";
311 | $fa-var-free-code-camp: "\f2c5";
312 | $fa-var-frown-o: "\f119";
313 | $fa-var-futbol-o: "\f1e3";
314 | $fa-var-gamepad: "\f11b";
315 | $fa-var-gavel: "\f0e3";
316 | $fa-var-gbp: "\f154";
317 | $fa-var-ge: "\f1d1";
318 | $fa-var-gear: "\f013";
319 | $fa-var-gears: "\f085";
320 | $fa-var-genderless: "\f22d";
321 | $fa-var-get-pocket: "\f265";
322 | $fa-var-gg: "\f260";
323 | $fa-var-gg-circle: "\f261";
324 | $fa-var-gift: "\f06b";
325 | $fa-var-git: "\f1d3";
326 | $fa-var-git-square: "\f1d2";
327 | $fa-var-github: "\f09b";
328 | $fa-var-github-alt: "\f113";
329 | $fa-var-github-square: "\f092";
330 | $fa-var-gitlab: "\f296";
331 | $fa-var-gittip: "\f184";
332 | $fa-var-glass: "\f000";
333 | $fa-var-glide: "\f2a5";
334 | $fa-var-glide-g: "\f2a6";
335 | $fa-var-globe: "\f0ac";
336 | $fa-var-google: "\f1a0";
337 | $fa-var-google-plus: "\f0d5";
338 | $fa-var-google-plus-circle: "\f2b3";
339 | $fa-var-google-plus-official: "\f2b3";
340 | $fa-var-google-plus-square: "\f0d4";
341 | $fa-var-google-wallet: "\f1ee";
342 | $fa-var-graduation-cap: "\f19d";
343 | $fa-var-gratipay: "\f184";
344 | $fa-var-grav: "\f2d6";
345 | $fa-var-group: "\f0c0";
346 | $fa-var-h-square: "\f0fd";
347 | $fa-var-hacker-news: "\f1d4";
348 | $fa-var-hand-grab-o: "\f255";
349 | $fa-var-hand-lizard-o: "\f258";
350 | $fa-var-hand-o-down: "\f0a7";
351 | $fa-var-hand-o-left: "\f0a5";
352 | $fa-var-hand-o-right: "\f0a4";
353 | $fa-var-hand-o-up: "\f0a6";
354 | $fa-var-hand-paper-o: "\f256";
355 | $fa-var-hand-peace-o: "\f25b";
356 | $fa-var-hand-pointer-o: "\f25a";
357 | $fa-var-hand-rock-o: "\f255";
358 | $fa-var-hand-scissors-o: "\f257";
359 | $fa-var-hand-spock-o: "\f259";
360 | $fa-var-hand-stop-o: "\f256";
361 | $fa-var-handshake-o: "\f2b5";
362 | $fa-var-hard-of-hearing: "\f2a4";
363 | $fa-var-hashtag: "\f292";
364 | $fa-var-hdd-o: "\f0a0";
365 | $fa-var-header: "\f1dc";
366 | $fa-var-headphones: "\f025";
367 | $fa-var-heart: "\f004";
368 | $fa-var-heart-o: "\f08a";
369 | $fa-var-heartbeat: "\f21e";
370 | $fa-var-history: "\f1da";
371 | $fa-var-home: "\f015";
372 | $fa-var-hospital-o: "\f0f8";
373 | $fa-var-hotel: "\f236";
374 | $fa-var-hourglass: "\f254";
375 | $fa-var-hourglass-1: "\f251";
376 | $fa-var-hourglass-2: "\f252";
377 | $fa-var-hourglass-3: "\f253";
378 | $fa-var-hourglass-end: "\f253";
379 | $fa-var-hourglass-half: "\f252";
380 | $fa-var-hourglass-o: "\f250";
381 | $fa-var-hourglass-start: "\f251";
382 | $fa-var-houzz: "\f27c";
383 | $fa-var-html5: "\f13b";
384 | $fa-var-i-cursor: "\f246";
385 | $fa-var-id-badge: "\f2c1";
386 | $fa-var-id-card: "\f2c2";
387 | $fa-var-id-card-o: "\f2c3";
388 | $fa-var-ils: "\f20b";
389 | $fa-var-image: "\f03e";
390 | $fa-var-imdb: "\f2d8";
391 | $fa-var-inbox: "\f01c";
392 | $fa-var-indent: "\f03c";
393 | $fa-var-industry: "\f275";
394 | $fa-var-info: "\f129";
395 | $fa-var-info-circle: "\f05a";
396 | $fa-var-inr: "\f156";
397 | $fa-var-instagram: "\f16d";
398 | $fa-var-institution: "\f19c";
399 | $fa-var-internet-explorer: "\f26b";
400 | $fa-var-intersex: "\f224";
401 | $fa-var-ioxhost: "\f208";
402 | $fa-var-italic: "\f033";
403 | $fa-var-joomla: "\f1aa";
404 | $fa-var-jpy: "\f157";
405 | $fa-var-jsfiddle: "\f1cc";
406 | $fa-var-key: "\f084";
407 | $fa-var-keyboard-o: "\f11c";
408 | $fa-var-krw: "\f159";
409 | $fa-var-language: "\f1ab";
410 | $fa-var-laptop: "\f109";
411 | $fa-var-lastfm: "\f202";
412 | $fa-var-lastfm-square: "\f203";
413 | $fa-var-leaf: "\f06c";
414 | $fa-var-leanpub: "\f212";
415 | $fa-var-legal: "\f0e3";
416 | $fa-var-lemon-o: "\f094";
417 | $fa-var-level-down: "\f149";
418 | $fa-var-level-up: "\f148";
419 | $fa-var-life-bouy: "\f1cd";
420 | $fa-var-life-buoy: "\f1cd";
421 | $fa-var-life-ring: "\f1cd";
422 | $fa-var-life-saver: "\f1cd";
423 | $fa-var-lightbulb-o: "\f0eb";
424 | $fa-var-line-chart: "\f201";
425 | $fa-var-link: "\f0c1";
426 | $fa-var-linkedin: "\f0e1";
427 | $fa-var-linkedin-square: "\f08c";
428 | $fa-var-linode: "\f2b8";
429 | $fa-var-linux: "\f17c";
430 | $fa-var-list: "\f03a";
431 | $fa-var-list-alt: "\f022";
432 | $fa-var-list-ol: "\f0cb";
433 | $fa-var-list-ul: "\f0ca";
434 | $fa-var-location-arrow: "\f124";
435 | $fa-var-lock: "\f023";
436 | $fa-var-long-arrow-down: "\f175";
437 | $fa-var-long-arrow-left: "\f177";
438 | $fa-var-long-arrow-right: "\f178";
439 | $fa-var-long-arrow-up: "\f176";
440 | $fa-var-low-vision: "\f2a8";
441 | $fa-var-magic: "\f0d0";
442 | $fa-var-magnet: "\f076";
443 | $fa-var-mail-forward: "\f064";
444 | $fa-var-mail-reply: "\f112";
445 | $fa-var-mail-reply-all: "\f122";
446 | $fa-var-male: "\f183";
447 | $fa-var-map: "\f279";
448 | $fa-var-map-marker: "\f041";
449 | $fa-var-map-o: "\f278";
450 | $fa-var-map-pin: "\f276";
451 | $fa-var-map-signs: "\f277";
452 | $fa-var-mars: "\f222";
453 | $fa-var-mars-double: "\f227";
454 | $fa-var-mars-stroke: "\f229";
455 | $fa-var-mars-stroke-h: "\f22b";
456 | $fa-var-mars-stroke-v: "\f22a";
457 | $fa-var-maxcdn: "\f136";
458 | $fa-var-meanpath: "\f20c";
459 | $fa-var-medium: "\f23a";
460 | $fa-var-medkit: "\f0fa";
461 | $fa-var-meetup: "\f2e0";
462 | $fa-var-meh-o: "\f11a";
463 | $fa-var-mercury: "\f223";
464 | $fa-var-microchip: "\f2db";
465 | $fa-var-microphone: "\f130";
466 | $fa-var-microphone-slash: "\f131";
467 | $fa-var-minus: "\f068";
468 | $fa-var-minus-circle: "\f056";
469 | $fa-var-minus-square: "\f146";
470 | $fa-var-minus-square-o: "\f147";
471 | $fa-var-mixcloud: "\f289";
472 | $fa-var-mobile: "\f10b";
473 | $fa-var-mobile-phone: "\f10b";
474 | $fa-var-modx: "\f285";
475 | $fa-var-money: "\f0d6";
476 | $fa-var-moon-o: "\f186";
477 | $fa-var-mortar-board: "\f19d";
478 | $fa-var-motorcycle: "\f21c";
479 | $fa-var-mouse-pointer: "\f245";
480 | $fa-var-music: "\f001";
481 | $fa-var-navicon: "\f0c9";
482 | $fa-var-neuter: "\f22c";
483 | $fa-var-newspaper-o: "\f1ea";
484 | $fa-var-object-group: "\f247";
485 | $fa-var-object-ungroup: "\f248";
486 | $fa-var-odnoklassniki: "\f263";
487 | $fa-var-odnoklassniki-square: "\f264";
488 | $fa-var-opencart: "\f23d";
489 | $fa-var-openid: "\f19b";
490 | $fa-var-opera: "\f26a";
491 | $fa-var-optin-monster: "\f23c";
492 | $fa-var-outdent: "\f03b";
493 | $fa-var-pagelines: "\f18c";
494 | $fa-var-paint-brush: "\f1fc";
495 | $fa-var-paper-plane: "\f1d8";
496 | $fa-var-paper-plane-o: "\f1d9";
497 | $fa-var-paperclip: "\f0c6";
498 | $fa-var-paragraph: "\f1dd";
499 | $fa-var-paste: "\f0ea";
500 | $fa-var-pause: "\f04c";
501 | $fa-var-pause-circle: "\f28b";
502 | $fa-var-pause-circle-o: "\f28c";
503 | $fa-var-paw: "\f1b0";
504 | $fa-var-paypal: "\f1ed";
505 | $fa-var-pencil: "\f040";
506 | $fa-var-pencil-square: "\f14b";
507 | $fa-var-pencil-square-o: "\f044";
508 | $fa-var-percent: "\f295";
509 | $fa-var-phone: "\f095";
510 | $fa-var-phone-square: "\f098";
511 | $fa-var-photo: "\f03e";
512 | $fa-var-picture-o: "\f03e";
513 | $fa-var-pie-chart: "\f200";
514 | $fa-var-pied-piper: "\f2ae";
515 | $fa-var-pied-piper-alt: "\f1a8";
516 | $fa-var-pied-piper-pp: "\f1a7";
517 | $fa-var-pinterest: "\f0d2";
518 | $fa-var-pinterest-p: "\f231";
519 | $fa-var-pinterest-square: "\f0d3";
520 | $fa-var-plane: "\f072";
521 | $fa-var-play: "\f04b";
522 | $fa-var-play-circle: "\f144";
523 | $fa-var-play-circle-o: "\f01d";
524 | $fa-var-plug: "\f1e6";
525 | $fa-var-plus: "\f067";
526 | $fa-var-plus-circle: "\f055";
527 | $fa-var-plus-square: "\f0fe";
528 | $fa-var-plus-square-o: "\f196";
529 | $fa-var-podcast: "\f2ce";
530 | $fa-var-power-off: "\f011";
531 | $fa-var-print: "\f02f";
532 | $fa-var-product-hunt: "\f288";
533 | $fa-var-puzzle-piece: "\f12e";
534 | $fa-var-qq: "\f1d6";
535 | $fa-var-qrcode: "\f029";
536 | $fa-var-question: "\f128";
537 | $fa-var-question-circle: "\f059";
538 | $fa-var-question-circle-o: "\f29c";
539 | $fa-var-quora: "\f2c4";
540 | $fa-var-quote-left: "\f10d";
541 | $fa-var-quote-right: "\f10e";
542 | $fa-var-ra: "\f1d0";
543 | $fa-var-random: "\f074";
544 | $fa-var-ravelry: "\f2d9";
545 | $fa-var-rebel: "\f1d0";
546 | $fa-var-recycle: "\f1b8";
547 | $fa-var-reddit: "\f1a1";
548 | $fa-var-reddit-alien: "\f281";
549 | $fa-var-reddit-square: "\f1a2";
550 | $fa-var-refresh: "\f021";
551 | $fa-var-registered: "\f25d";
552 | $fa-var-remove: "\f00d";
553 | $fa-var-renren: "\f18b";
554 | $fa-var-reorder: "\f0c9";
555 | $fa-var-repeat: "\f01e";
556 | $fa-var-reply: "\f112";
557 | $fa-var-reply-all: "\f122";
558 | $fa-var-resistance: "\f1d0";
559 | $fa-var-retweet: "\f079";
560 | $fa-var-rmb: "\f157";
561 | $fa-var-road: "\f018";
562 | $fa-var-rocket: "\f135";
563 | $fa-var-rotate-left: "\f0e2";
564 | $fa-var-rotate-right: "\f01e";
565 | $fa-var-rouble: "\f158";
566 | $fa-var-rss: "\f09e";
567 | $fa-var-rss-square: "\f143";
568 | $fa-var-rub: "\f158";
569 | $fa-var-ruble: "\f158";
570 | $fa-var-rupee: "\f156";
571 | $fa-var-s15: "\f2cd";
572 | $fa-var-safari: "\f267";
573 | $fa-var-save: "\f0c7";
574 | $fa-var-scissors: "\f0c4";
575 | $fa-var-scribd: "\f28a";
576 | $fa-var-search: "\f002";
577 | $fa-var-search-minus: "\f010";
578 | $fa-var-search-plus: "\f00e";
579 | $fa-var-sellsy: "\f213";
580 | $fa-var-send: "\f1d8";
581 | $fa-var-send-o: "\f1d9";
582 | $fa-var-server: "\f233";
583 | $fa-var-share: "\f064";
584 | $fa-var-share-alt: "\f1e0";
585 | $fa-var-share-alt-square: "\f1e1";
586 | $fa-var-share-square: "\f14d";
587 | $fa-var-share-square-o: "\f045";
588 | $fa-var-shekel: "\f20b";
589 | $fa-var-sheqel: "\f20b";
590 | $fa-var-shield: "\f132";
591 | $fa-var-ship: "\f21a";
592 | $fa-var-shirtsinbulk: "\f214";
593 | $fa-var-shopping-bag: "\f290";
594 | $fa-var-shopping-basket: "\f291";
595 | $fa-var-shopping-cart: "\f07a";
596 | $fa-var-shower: "\f2cc";
597 | $fa-var-sign-in: "\f090";
598 | $fa-var-sign-language: "\f2a7";
599 | $fa-var-sign-out: "\f08b";
600 | $fa-var-signal: "\f012";
601 | $fa-var-signing: "\f2a7";
602 | $fa-var-simplybuilt: "\f215";
603 | $fa-var-sitemap: "\f0e8";
604 | $fa-var-skyatlas: "\f216";
605 | $fa-var-skype: "\f17e";
606 | $fa-var-slack: "\f198";
607 | $fa-var-sliders: "\f1de";
608 | $fa-var-slideshare: "\f1e7";
609 | $fa-var-smile-o: "\f118";
610 | $fa-var-snapchat: "\f2ab";
611 | $fa-var-snapchat-ghost: "\f2ac";
612 | $fa-var-snapchat-square: "\f2ad";
613 | $fa-var-snowflake-o: "\f2dc";
614 | $fa-var-soccer-ball-o: "\f1e3";
615 | $fa-var-sort: "\f0dc";
616 | $fa-var-sort-alpha-asc: "\f15d";
617 | $fa-var-sort-alpha-desc: "\f15e";
618 | $fa-var-sort-amount-asc: "\f160";
619 | $fa-var-sort-amount-desc: "\f161";
620 | $fa-var-sort-asc: "\f0de";
621 | $fa-var-sort-desc: "\f0dd";
622 | $fa-var-sort-down: "\f0dd";
623 | $fa-var-sort-numeric-asc: "\f162";
624 | $fa-var-sort-numeric-desc: "\f163";
625 | $fa-var-sort-up: "\f0de";
626 | $fa-var-soundcloud: "\f1be";
627 | $fa-var-space-shuttle: "\f197";
628 | $fa-var-spinner: "\f110";
629 | $fa-var-spoon: "\f1b1";
630 | $fa-var-spotify: "\f1bc";
631 | $fa-var-square: "\f0c8";
632 | $fa-var-square-o: "\f096";
633 | $fa-var-stack-exchange: "\f18d";
634 | $fa-var-stack-overflow: "\f16c";
635 | $fa-var-star: "\f005";
636 | $fa-var-star-half: "\f089";
637 | $fa-var-star-half-empty: "\f123";
638 | $fa-var-star-half-full: "\f123";
639 | $fa-var-star-half-o: "\f123";
640 | $fa-var-star-o: "\f006";
641 | $fa-var-steam: "\f1b6";
642 | $fa-var-steam-square: "\f1b7";
643 | $fa-var-step-backward: "\f048";
644 | $fa-var-step-forward: "\f051";
645 | $fa-var-stethoscope: "\f0f1";
646 | $fa-var-sticky-note: "\f249";
647 | $fa-var-sticky-note-o: "\f24a";
648 | $fa-var-stop: "\f04d";
649 | $fa-var-stop-circle: "\f28d";
650 | $fa-var-stop-circle-o: "\f28e";
651 | $fa-var-street-view: "\f21d";
652 | $fa-var-strikethrough: "\f0cc";
653 | $fa-var-stumbleupon: "\f1a4";
654 | $fa-var-stumbleupon-circle: "\f1a3";
655 | $fa-var-subscript: "\f12c";
656 | $fa-var-subway: "\f239";
657 | $fa-var-suitcase: "\f0f2";
658 | $fa-var-sun-o: "\f185";
659 | $fa-var-superpowers: "\f2dd";
660 | $fa-var-superscript: "\f12b";
661 | $fa-var-support: "\f1cd";
662 | $fa-var-table: "\f0ce";
663 | $fa-var-tablet: "\f10a";
664 | $fa-var-tachometer: "\f0e4";
665 | $fa-var-tag: "\f02b";
666 | $fa-var-tags: "\f02c";
667 | $fa-var-tasks: "\f0ae";
668 | $fa-var-taxi: "\f1ba";
669 | $fa-var-telegram: "\f2c6";
670 | $fa-var-television: "\f26c";
671 | $fa-var-tencent-weibo: "\f1d5";
672 | $fa-var-terminal: "\f120";
673 | $fa-var-text-height: "\f034";
674 | $fa-var-text-width: "\f035";
675 | $fa-var-th: "\f00a";
676 | $fa-var-th-large: "\f009";
677 | $fa-var-th-list: "\f00b";
678 | $fa-var-themeisle: "\f2b2";
679 | $fa-var-thermometer: "\f2c7";
680 | $fa-var-thermometer-0: "\f2cb";
681 | $fa-var-thermometer-1: "\f2ca";
682 | $fa-var-thermometer-2: "\f2c9";
683 | $fa-var-thermometer-3: "\f2c8";
684 | $fa-var-thermometer-4: "\f2c7";
685 | $fa-var-thermometer-empty: "\f2cb";
686 | $fa-var-thermometer-full: "\f2c7";
687 | $fa-var-thermometer-half: "\f2c9";
688 | $fa-var-thermometer-quarter: "\f2ca";
689 | $fa-var-thermometer-three-quarters: "\f2c8";
690 | $fa-var-thumb-tack: "\f08d";
691 | $fa-var-thumbs-down: "\f165";
692 | $fa-var-thumbs-o-down: "\f088";
693 | $fa-var-thumbs-o-up: "\f087";
694 | $fa-var-thumbs-up: "\f164";
695 | $fa-var-ticket: "\f145";
696 | $fa-var-times: "\f00d";
697 | $fa-var-times-circle: "\f057";
698 | $fa-var-times-circle-o: "\f05c";
699 | $fa-var-times-rectangle: "\f2d3";
700 | $fa-var-times-rectangle-o: "\f2d4";
701 | $fa-var-tint: "\f043";
702 | $fa-var-toggle-down: "\f150";
703 | $fa-var-toggle-left: "\f191";
704 | $fa-var-toggle-off: "\f204";
705 | $fa-var-toggle-on: "\f205";
706 | $fa-var-toggle-right: "\f152";
707 | $fa-var-toggle-up: "\f151";
708 | $fa-var-trademark: "\f25c";
709 | $fa-var-train: "\f238";
710 | $fa-var-transgender: "\f224";
711 | $fa-var-transgender-alt: "\f225";
712 | $fa-var-trash: "\f1f8";
713 | $fa-var-trash-o: "\f014";
714 | $fa-var-tree: "\f1bb";
715 | $fa-var-trello: "\f181";
716 | $fa-var-tripadvisor: "\f262";
717 | $fa-var-trophy: "\f091";
718 | $fa-var-truck: "\f0d1";
719 | $fa-var-try: "\f195";
720 | $fa-var-tty: "\f1e4";
721 | $fa-var-tumblr: "\f173";
722 | $fa-var-tumblr-square: "\f174";
723 | $fa-var-turkish-lira: "\f195";
724 | $fa-var-tv: "\f26c";
725 | $fa-var-twitch: "\f1e8";
726 | $fa-var-twitter: "\f099";
727 | $fa-var-twitter-square: "\f081";
728 | $fa-var-umbrella: "\f0e9";
729 | $fa-var-underline: "\f0cd";
730 | $fa-var-undo: "\f0e2";
731 | $fa-var-universal-access: "\f29a";
732 | $fa-var-university: "\f19c";
733 | $fa-var-unlink: "\f127";
734 | $fa-var-unlock: "\f09c";
735 | $fa-var-unlock-alt: "\f13e";
736 | $fa-var-unsorted: "\f0dc";
737 | $fa-var-upload: "\f093";
738 | $fa-var-usb: "\f287";
739 | $fa-var-usd: "\f155";
740 | $fa-var-user: "\f007";
741 | $fa-var-user-circle: "\f2bd";
742 | $fa-var-user-circle-o: "\f2be";
743 | $fa-var-user-md: "\f0f0";
744 | $fa-var-user-o: "\f2c0";
745 | $fa-var-user-plus: "\f234";
746 | $fa-var-user-secret: "\f21b";
747 | $fa-var-user-times: "\f235";
748 | $fa-var-users: "\f0c0";
749 | $fa-var-vcard: "\f2bb";
750 | $fa-var-vcard-o: "\f2bc";
751 | $fa-var-venus: "\f221";
752 | $fa-var-venus-double: "\f226";
753 | $fa-var-venus-mars: "\f228";
754 | $fa-var-viacoin: "\f237";
755 | $fa-var-viadeo: "\f2a9";
756 | $fa-var-viadeo-square: "\f2aa";
757 | $fa-var-video-camera: "\f03d";
758 | $fa-var-vimeo: "\f27d";
759 | $fa-var-vimeo-square: "\f194";
760 | $fa-var-vine: "\f1ca";
761 | $fa-var-vk: "\f189";
762 | $fa-var-volume-control-phone: "\f2a0";
763 | $fa-var-volume-down: "\f027";
764 | $fa-var-volume-off: "\f026";
765 | $fa-var-volume-up: "\f028";
766 | $fa-var-warning: "\f071";
767 | $fa-var-wechat: "\f1d7";
768 | $fa-var-weibo: "\f18a";
769 | $fa-var-weixin: "\f1d7";
770 | $fa-var-whatsapp: "\f232";
771 | $fa-var-wheelchair: "\f193";
772 | $fa-var-wheelchair-alt: "\f29b";
773 | $fa-var-wifi: "\f1eb";
774 | $fa-var-wikipedia-w: "\f266";
775 | $fa-var-window-close: "\f2d3";
776 | $fa-var-window-close-o: "\f2d4";
777 | $fa-var-window-maximize: "\f2d0";
778 | $fa-var-window-minimize: "\f2d1";
779 | $fa-var-window-restore: "\f2d2";
780 | $fa-var-windows: "\f17a";
781 | $fa-var-won: "\f159";
782 | $fa-var-wordpress: "\f19a";
783 | $fa-var-wpbeginner: "\f297";
784 | $fa-var-wpexplorer: "\f2de";
785 | $fa-var-wpforms: "\f298";
786 | $fa-var-wrench: "\f0ad";
787 | $fa-var-xing: "\f168";
788 | $fa-var-xing-square: "\f169";
789 | $fa-var-y-combinator: "\f23b";
790 | $fa-var-y-combinator-square: "\f1d4";
791 | $fa-var-yahoo: "\f19e";
792 | $fa-var-yc: "\f23b";
793 | $fa-var-yc-square: "\f1d4";
794 | $fa-var-yelp: "\f1e9";
795 | $fa-var-yen: "\f157";
796 | $fa-var-yoast: "\f2b1";
797 | $fa-var-youtube: "\f167";
798 | $fa-var-youtube-play: "\f16a";
799 | $fa-var-youtube-square: "\f166";
800 | 
801 | 


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