├── docs
    ├── renderers
    │   ├── TextRenderer.md
    │   ├── NumberRenderer.md
    │   ├── SelectRenderer.md
    │   ├── CheckboxRenderer.md
    │   ├── DateTimeRenderer.md
    │   └── BaseRenderer.md
    ├── actions
    │   ├── LinkAction.md
    │   ├── ButtonAction.md
    │   └── BaseAction.md
    ├── filters
    │   ├── SelectFilter.md
    │   ├── TextFilter.md
    │   ├── CheckboxFilter.md
    │   └── BaseFilter.md
    ├── examples
    │   ├── actions.md
    │   ├── remote-data.md
    │   ├── custom-data-types.md
    │   └── basic.md
    └── JSONMetaTable.md
├── src
    ├── actions
    │   ├── ButtonAction.js
    │   ├── LinkAction.js
    │   └── BaseAction.js
    ├── filters
    │   ├── TextFilter.js
    │   ├── SelectFilter.js
    │   ├── CheckboxFilter.js
    │   └── BaseFilter.js
    ├── renderers
    │   ├── TextRenderer.js
    │   ├── NumberRenderer.js
    │   ├── DateTimeRenderer.js
    │   ├── SelectRenderer.js
    │   ├── CheckboxRenderer.js
    │   ├── AutocompleteRenderer.js
    │   └── BaseRenderer.js
    └── json-meta-table.js
├── public
    ├── index.html
    └── basic-example.html
├── .npmignore
├── .gitignore
├── .travis.yml
├── package.json
└── README.md


/docs/renderers/TextRenderer.md:
--------------------------------------------------------------------------------
1 | TextRenderer
2 | ============
3 | Renderer type class for `text` type data values.
4 | Renders an `<input type="text">` element as an editor.
5 | 
6 | See [BaseRenderer](BaseRenderer.md) for more details.


--------------------------------------------------------------------------------
/docs/renderers/NumberRenderer.md:
--------------------------------------------------------------------------------
1 | NumberRenderer
2 | ==============
3 | Renderer type class for `number` type data values.
4 | Renders an `<input type="number">` element as an editor.
5 | 
6 | See [BaseRenderer](BaseRenderer.md) for more details.


--------------------------------------------------------------------------------
/docs/actions/LinkAction.md:
--------------------------------------------------------------------------------
1 | LinkAction
2 | ==========
3 | Action type class for `link` type. Renders a `<button>` element and navigates to `options.url` on click.
4 | 
5 | See [BaseAction](BaseAction.md) for more details.
6 | 
7 | Notes
8 | -----
9 |   - Button element text and `title` attribute can be set with `options` object


--------------------------------------------------------------------------------
/docs/actions/ButtonAction.md:
--------------------------------------------------------------------------------
1 | ButtonAction
2 | ============
3 | Action type class for `button` type. Renders a `<button>` element and triggers `options.event` function on click.
4 | 
5 | See [BaseAction](BaseAction.md) for more details.
6 | 
7 | Notes
8 | -----
9 |   - Button element text and `title` attribute can be set with `options` object


--------------------------------------------------------------------------------
/docs/filters/SelectFilter.md:
--------------------------------------------------------------------------------
 1 | SelectFilter
 2 | ============
 3 | Filter type class for `select` type data values.
 4 | Renders a `<select>` element with options defined in metadata.
 5 | 
 6 | See [BaseFilter](BaseFilter.md) for more details.
 7 | 
 8 | Notes
 9 | -----
10 |   - Options are defined in the `meta` parameter's `options` property.


--------------------------------------------------------------------------------
/docs/filters/TextFilter.md:
--------------------------------------------------------------------------------
 1 | TextFilter
 2 | ==========
 3 | Filter type class for `text` type data values.
 4 | Renders an `<input type="text">` element.
 5 | 
 6 | See [BaseFilter](BaseFilter.md) for more details.
 7 | 
 8 | Notes
 9 | -----
10 |   - Placeholder attribute can be set using the `options` parameter. See [BaseFilter](BaseFilter.md).


--------------------------------------------------------------------------------
/docs/renderers/SelectRenderer.md:
--------------------------------------------------------------------------------
 1 | SelectRenderer
 2 | ==============
 3 | Renderer type class for `select` type data values.
 4 | Renders a `<select>` element as an editor with options defined in metadata.
 5 | 
 6 | See [BaseRenderer](BaseRenderer.md) for more details.
 7 | 
 8 | Notes
 9 | -----
10 |   - Options are defined in the `meta` parameter's `options` property.


--------------------------------------------------------------------------------
/docs/filters/CheckboxFilter.md:
--------------------------------------------------------------------------------
 1 | CheckboxFilter
 2 | ==============
 3 | Filter type class for `checkbox` type data values.
 4 | Renders a `<select>` element with options for `true` and `false` values.
 5 | 
 6 | See [BaseFilter](BaseFilter.md) for more details.
 7 | 
 8 | Notes
 9 | -----
10 |   - Option text can be set using the `options` parameter. See [BaseFilter](BaseFilter.md).


--------------------------------------------------------------------------------
/src/actions/ButtonAction.js:
--------------------------------------------------------------------------------
 1 | import BaseAction from './BaseAction'
 2 | 
 3 | /**
 4 |  * Button action class
 5 |  */
 6 | export default class ButtonAction extends BaseAction {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (row, options) {
13 |         super(row, options)
14 | 
15 |         this.init()
16 |     }
17 | 
18 |     // endregion Constructor
19 | }


--------------------------------------------------------------------------------
/docs/renderers/CheckboxRenderer.md:
--------------------------------------------------------------------------------
 1 | CheckboxRenderer
 2 | ================
 3 | Renderer type class for `checkbox` type data values.
 4 | Renders an `<input type="checkbox">` element as an editor and has no display.
 5 | 
 6 | See [BaseRenderer](BaseRenderer.md) for more details.
 7 | 
 8 | Notes
 9 | -----
10 |   - This renderer doesn't use a display - only a checkbox editor, as it provides
11 |     a better user experience with only a single click to edit.


--------------------------------------------------------------------------------
/docs/renderers/DateTimeRenderer.md:
--------------------------------------------------------------------------------
 1 | DateTimeRenderer
 2 | ================
 3 | Renderer type class for `datetime` type data values.
 4 | Renders an `<input type="text">` element as an editor.
 5 | 
 6 | See [BaseRenderer](BaseRenderer.md) for more details.
 7 | 
 8 | Notes
 9 | -----
10 |   - Display value is formatted to relative time, using the `moment` dependency.
11 |   - Editor value is parsed using the `moment` dependency, supports entering any valid datetime string.


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <link rel="stylesheet" href="//cdn.everything.io/kickstart/3.x/css/kickstart.min.css" />
 4 |     <script language="javascript" type="text/javascript">
 5 |       function resizeIframe(obj) {
 6 |         obj.style.height = obj.contentWindow.document.body.scrollHeight + 20 + 'px';
 7 |       }
 8 |     </script>
 9 | </head>
10 | <body>
11 |     <h2>Basic Example</h2>
12 |     <a href="basic-example.html"> Link </a>
13 | </body>


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | 
35 | .idea/
36 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | 
 6 | # Runtime data
 7 | pids
 8 | *.pid
 9 | *.seed
10 | 
11 | # Directory for instrumented libs generated by jscoverage/JSCover
12 | lib-cov
13 | 
14 | # Coverage directory used by tools like istanbul
15 | coverage
16 | 
17 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
18 | .grunt
19 | 
20 | # node-waf configuration
21 | .lock-wscript
22 | 
23 | # Compiled binary addons (http://nodejs.org/api/addons.html)
24 | build/Release
25 | 
26 | # Dependency directory
27 | node_modules
28 | 
29 | # Optional npm cache directory
30 | .npm
31 | 
32 | # Optional REPL history
33 | .node_repl_history
34 | 
35 | .idea/
36 | dist/
37 | 


--------------------------------------------------------------------------------
/src/filters/TextFilter.js:
--------------------------------------------------------------------------------
 1 | import BaseFilter from './BaseFilter'
 2 | 
 3 | /**
 4 |  * Text filter class
 5 |  */
 6 | export default class TextFilter extends BaseFilter {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (meta, options = {}) {
13 |         super(meta, options)
14 | 
15 |         this.init()
16 |     }
17 | 
18 |     // endregion Constructor
19 | 
20 |     // region Actions
21 | 
22 |     /**
23 |      * @inheritdoc
24 |      */
25 |     performRender () {
26 |         super.performRender()
27 | 
28 |         this.input.type        = 'text'
29 |         this.input.placeholder = this.options.placeholderText
30 |     }
31 | 
32 |     // endregion Actions
33 | }


--------------------------------------------------------------------------------
/src/renderers/TextRenderer.js:
--------------------------------------------------------------------------------
 1 | import BaseRenderer from './BaseRenderer'
 2 | 
 3 | /**
 4 |  * Text renderer
 5 |  */
 6 | export default class TextRenderer extends BaseRenderer {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (table, meta, row, value, displayValue) {
13 |         super(table, meta, row, value, displayValue)
14 | 
15 |         this.init()
16 |     }
17 | 
18 |     // endregion Constructor
19 | 
20 |     // region Actions
21 | 
22 |     /**
23 |      * @inheritdoc
24 |      */
25 |     performRender () {
26 |         super.performRender()
27 | 
28 |         this.container.classList.add('json-meta-table-renderer-text')
29 | 
30 |         this.input.type  = 'text'
31 |         this.input.title = this.meta.label
32 |     }
33 | 
34 |     // endregion Actions
35 | }


--------------------------------------------------------------------------------
/.travis.yml:
--------------------------------------------------------------------------------
 1 | sudo: false
 2 | language: node_js
 3 | node_js:
 4 | - '4'
 5 | cache:
 6 |   directories:
 7 |     - node_modules
 8 | deploy:
 9 |   skip_cleanup: true
10 |   email: benauf@gmail.com
11 |   provider: npm
12 |   api_key:
13 |     secure: mmvjE7uAb6cCC0A1J00V+x/ACsJaPUEka7QCeg+yyNc3KBsIt5ecrDdTiXi3uVIgAdp51ywj4foz78pOxkWzDaWCJcFf1Q6sHk7rH4ZTYzXc5A/La34hwJFNtetRkgNODB7HX1y8J9+Mv421dkC1S31Sd19qjSFR5y0eK2nwDbnchH9sASzVrjfxaz7UyPf4nguGubNnUZ/b1rrlcHtXAvI3OD5hGbxJzcU6mPHdpERjiQCauGo7xRe5wB0ou1XWmRfXt+pdgwl0xX4lVaHzxD5qvbCrwxC86Oyh4T9slMXIkbcAaa5UMV7q3O+hLTdPDKyxGyxXIzPUPsRkF0dTrEkVvxFyI1i6qjETtTnPievXTjqtdL+4LxDQetjcmLi80pkMfNqm0YGl7h1/k500qdfV0VWscKnNy/oHGi8f+UKSqjdWR1k7oDuHnc3kg1ow4lbR/V6xAn/FcfGmhRh39n1v6GDUTya6Q5IcIHjRRznIyejVn+diEbqQYTs5dQTeihnOsaJSmF7hkP1ZVj7gSXoBYAxGckvG2k7B67ODfqbT89wbYomgwCIw3/K4AaWbUUJEpn9bhN41y4uk+BGI1BnvGRoYTHGrVt2afDMERfIB2848ylLH/7s/5Tyvn6UOdxs02ZxbiHpWBEDliN5o78exSR7Rr+NeHaSDLft4ggs=
14 | 


--------------------------------------------------------------------------------
/src/renderers/NumberRenderer.js:
--------------------------------------------------------------------------------
 1 | import BaseRenderer from './BaseRenderer'
 2 | 
 3 | /**
 4 |  * Number renderer
 5 |  */
 6 | export default class NumberRenderer extends BaseRenderer {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (table, meta, row, value, displayValue) {
13 |         super(table, meta, row, value, displayValue)
14 | 
15 |         this.init()
16 |     }
17 | 
18 |     // endregion Constructor
19 | 
20 |     // region Helpers
21 | 
22 |     /**
23 |      * @inheritdoc
24 |      */
25 |     parseValue (value) {
26 |         return parseInt(value)
27 |     }
28 | 
29 |     // endregion Helpers
30 | 
31 |     // region Actions
32 | 
33 |     /**
34 |      * @inheritdoc
35 |      */
36 |     performRender () {
37 |         super.performRender()
38 | 
39 |         this.container.classList.add('json-meta-table-renderer-number')
40 | 
41 |         this.input.type  = 'number'
42 |         this.input.title = this.meta.label
43 |     }
44 | 
45 |     // endregion Actions
46 | }


--------------------------------------------------------------------------------
/docs/examples/actions.md:
--------------------------------------------------------------------------------
 1 | Actions example
 2 | ===============
 3 | This example shows how to create a `JSONMetaTable` instance with some actions to display in the actions column per row.
 4 | 
 5 | JavaScript
 6 | ----------
 7 | ```javascript
 8 | import JSONMetaTable from 'json-meta-table'
 9 | 
10 | let tableInstance = new JSONMetaTable('#actions-example-container', {}, {}, [
11 |     {
12 |         name:  'view',
13 |         type:  'link',
14 |         text:  'View',
15 |         title: 'View this row',
16 |         url:   '/view/${row.values.id}/'
17 |     },{
18 |         name:  'open',
19 |         type:  'button',
20 |         text:  'Open',
21 |         title: 'Open this row'
22 |         event: (row) => {
23 |             // Perform open functionality
24 |         }
25 |     }
26 | ])
27 | 
28 | tableInstance.setMetadata([...])
29 | tableInstance.setData([...])
30 | ```
31 | 
32 | HTML
33 | ----
34 | ```html
35 | <!doctype html>
36 | <html>
37 |   <head>
38 |     <title>Actions example</title>
39 |     <meta charset="utf-8" />
40 |   </head>
41 | 
42 |   <body>
43 |     <h1>Actions example</h1>
44 | 
45 |     <div id="actions-example-container"></div>
46 |   </body>
47 | </html>
48 | ```


--------------------------------------------------------------------------------
/src/filters/SelectFilter.js:
--------------------------------------------------------------------------------
 1 | import BaseFilter from './BaseFilter'
 2 | 
 3 | /**
 4 |  * Select filter class
 5 |  */
 6 | export default class SelectFilter extends BaseFilter {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (meta, options = {}) {
13 |         super(meta, options)
14 | 
15 |         this.input = document.createElement('select')
16 | 
17 |         this.init()
18 |     }
19 | 
20 |     // endregion Constructor
21 | 
22 |     // region Actions
23 | 
24 |     /**
25 |      * @inheritdoc
26 |      */
27 |     performRender () {
28 |         let emptyOption = document.createElement('option')
29 | 
30 |         super.performRender()
31 | 
32 |         emptyOption.value     = ''
33 |         emptyOption.innerHTML = this.options.emptyOptionText
34 |         this.input.appendChild(emptyOption)
35 | 
36 |         this.meta.options.map((option) => {
37 |             let optionNode = document.createElement('option')
38 | 
39 |             optionNode.value     = option.value
40 |             optionNode.innerHTML = option.label
41 | 
42 |             this.input.appendChild(optionNode)
43 |         })
44 |     }
45 | 
46 |     // endregion Actions
47 | }


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "json-meta-table",
 3 |   "version": "1.4.1",
 4 |   "description": "A JSON-driven editable table component.",
 5 |   "main": "dist/json-meta-table.js",
 6 |   "repository": {
 7 |     "type": "git",
 8 |     "url": "git://github.com/NZME/json-meta-table"
 9 |   },
10 |   "scripts": {
11 |     "compile": "node node_modules/babel-cli/bin/babel.js --presets es2015,stage-0 -d dist/ src/",
12 |     "prepublish": "npm run compile",
13 |     "test": "echo 'ok'",
14 |     "bundle": "node node_modules/browserify/bin/cmd.js dist/json-meta-table.js --standalone JSONMetaTable > public/json-meta-table-bundle.js"
15 |   },
16 |   "keywords": [
17 |     "js",
18 |     "es6",
19 |     "table",
20 |     "html",
21 |     "json",
22 |     "class"
23 |   ],
24 |   "contributors": [
25 |     "Raice Hannay <raicehannay@gmail.com> (http://github.com/voodoocreation)"
26 |   ],
27 |   "bugs": {
28 |     "url": "https://github.com/NZME/json-meta-table/issues"
29 |   },
30 |   "dependencies": {
31 |     "event-abstract-class": "^1.0.6",
32 |     "moment": "^2.13.0",
33 |     "fetch-class": "^1.0.3"
34 |   },
35 |   "devDependencies": {
36 |     "babel-cli": "^6.8.0",
37 |     "babel-core": "^6.8.0",
38 |     "babel-preset-es2015": "^6.6.0",
39 |     "babel-preset-stage-0": "^6.5.0",
40 |     "browserify": "^13.0.1"
41 |   }
42 | }
43 | 


--------------------------------------------------------------------------------
/src/filters/CheckboxFilter.js:
--------------------------------------------------------------------------------
 1 | import BaseFilter from './BaseFilter'
 2 | 
 3 | /**
 4 |  * Checkbox filter class
 5 |  */
 6 | export default class CheckboxFilter extends BaseFilter {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (meta, options = {}) {
13 |         super(meta, options)
14 | 
15 |         this.input = document.createElement('select')
16 | 
17 |         this.init()
18 |     }
19 | 
20 |     // endregion Constructor
21 | 
22 |     // region Actions
23 | 
24 |     /**
25 |      * @inheritdoc
26 |      */
27 |     performRender () {
28 |         let options = [
29 |             {
30 |                 value: '',
31 |                 label: this.options.emptyOptionText
32 |             },{
33 |                 value: true,
34 |                 label: this.options.trueOptionText
35 |             },{
36 |                 value: false,
37 |                 label: this.options.falseOptionText
38 |             }
39 |         ]
40 | 
41 |         super.performRender()
42 | 
43 |         options.map((option) => {
44 |             let optionNode = document.createElement('option')
45 | 
46 |             optionNode.value     = option.value
47 |             optionNode.innerHTML = option.label
48 | 
49 |             this.input.appendChild(optionNode)
50 |         })
51 |     }
52 | 
53 |     // endregion Actions
54 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ![Travis Build](https://img.shields.io/travis/NZME/json-meta-table.svg)
 2 | 
 3 | JSON meta table
 4 | ===============
 5 | A JSON-driven editable table component.
 6 | 
 7 | Components
 8 | ----------
 9 | ### Core
10 |   - [JSONMetaTable](docs/JSONMetaTable.md)
11 |   
12 | ### Filters
13 |   - [BaseFilter](docs/filters/BaseFilter.md)
14 |   - [TextFilter](docs/filters/TextFilter.md)
15 |   - [SelectFilter](docs/filters/SelectFilter.md)
16 |   - [CheckboxFilter](docs/filters/CheckboxFilter.md)
17 | 
18 | ### Renderers
19 |   - [BaseRenderer](docs/renderers/BaseRenderer.md)
20 |   - [TextRenderer](docs/renderers/TextRenderer.md)
21 |   - [NumberRenderer](docs/renderers/NumberRenderer.md)
22 |   - [SelectRenderer](docs/renderers/SelectRenderer.md)
23 |   - [CheckboxRenderer](docs/renderers/CheckboxRenderer.md)
24 |   - [DateTimeRenderer](docs/renderers/DateTimeRenderer.md)
25 | 
26 | ### Actions
27 |   - [BaseAction](docs/actions/BaseAction.md)
28 |   - [ButtonAction](docs/actions/ButtonAction.md)
29 |   - [LinkAction](docs/actions/LinkAction.md)
30 | 
31 | 
32 | Examples
33 | --------
34 |   - [Basic](docs/examples/basic.md)
35 |   - [Remote data](docs/examples/remote-data.md)
36 |   - [Actions](docs/examples/actions.md)
37 |   - [Custom data types](docs/examples/custom-data-types.md)
38 |   
39 |   
40 | Release Notes
41 | --------
42 |   - 1.3 Upgrade Babel to 1.8 and create public bundle


--------------------------------------------------------------------------------
/src/actions/LinkAction.js:
--------------------------------------------------------------------------------
 1 | import BaseAction from './BaseAction'
 2 | 
 3 | /**
 4 |  * Link action class
 5 |  */
 6 | export default class LinkAction extends BaseAction {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (row, options) {
13 |         super(row, options)
14 | 
15 |         this.url = this.parseUrl()
16 |         this.init()
17 |     }
18 | 
19 |     // endregion Constructor
20 | 
21 |     // region Helpers
22 | 
23 |     /**
24 |      * Parse URL string and replace row vars with values
25 |      *
26 |      * @returns {String}
27 |      */
28 |     parseUrl () {
29 |         let row        = this.row,
30 |             url        = this.options.url,
31 |             expression = /\${([^{}]*)}/gi
32 | 
33 |         this.options.url.match(expression).map((match) => {
34 |             url = this.options.url.replace(match, eval(match.replace(/([\${}]*)/g, '')))
35 |         })
36 | 
37 |         return url
38 |     }
39 | 
40 |     // endregion Helpers
41 | 
42 |     // region Actions
43 | 
44 |     /**
45 |      * @inheritdoc
46 |      */
47 |     performClick () {
48 |         if (this.options.isNewWindow) {
49 |             window.open(this.url, this.options.windowName, this.options.windowFeatures)
50 |         } else {
51 |             window.location.href = this.url
52 |         }
53 |     }
54 | 
55 |     // endregion Actions
56 | }


--------------------------------------------------------------------------------
/src/renderers/DateTimeRenderer.js:
--------------------------------------------------------------------------------
 1 | import BaseRenderer from './BaseRenderer'
 2 | import moment from 'moment'
 3 | 
 4 | /**
 5 |  * DateTime renderer
 6 |  */
 7 | export default class DateTimeRenderer extends BaseRenderer {
 8 |     // region Constructor
 9 | 
10 |     /**
11 |      * @inheritdoc
12 |      */
13 |     constructor (table, meta, row, value, displayValue) {
14 |         super(table, meta, row, value, displayValue)
15 | 
16 |         this.init()
17 |     }
18 | 
19 |     // endregion Constructor
20 | 
21 |     // region Helpers
22 | 
23 |     /**
24 |      * @inheritdoc
25 |      */
26 |     parseValue (value) {
27 |         let date = moment(new Date(value))
28 | 
29 |         return (date.isValid())
30 |             ? date.format()
31 |             : this.initialValue
32 |     }
33 | 
34 |     /**
35 |      * @inheritdoc
36 |      */
37 |     formatValue (value) {
38 |         let date = moment(new Date(value))
39 | 
40 |         return `<time datetime="${date.format()}" title="${date.format('DD/MM/YYYY [at] h:mm a')}">${date.fromNow()}</time>`
41 |     }
42 | 
43 |     // endregion Helpers
44 | 
45 |     // region Actions
46 | 
47 |     /**
48 |      * @inheritdoc
49 |      */
50 |     performRender () {
51 |         super.performRender()
52 | 
53 |         this.container.classList.add('json-meta-table-renderer-datetime')
54 | 
55 |         this.input.type  = 'text'
56 |         this.input.title = this.meta.label
57 |     }
58 | 
59 |     // endregion Actions
60 | }


--------------------------------------------------------------------------------
/src/renderers/SelectRenderer.js:
--------------------------------------------------------------------------------
 1 | import BaseRenderer from './BaseRenderer'
 2 | 
 3 | /**
 4 |  * Select renderer
 5 |  */
 6 | export default class SelectRenderer extends BaseRenderer {
 7 |     // region Constructor
 8 | 
 9 |     /**
10 |      * @inheritdoc
11 |      */
12 |     constructor (table, meta, row, value, displayValue) {
13 |         super(table, meta, row, value, displayValue)
14 | 
15 |         this.input = document.createElement('select')
16 | 
17 |         this.init()
18 |     }
19 | 
20 |     // endregion Constructor
21 | 
22 |     // region Helpers
23 | 
24 |     /**
25 |      * @inheritdoc
26 |      */
27 |     formatValue (value) {
28 |         let option
29 | 
30 |         if (!this.meta.options.find) {
31 |             return value
32 |         }
33 | 
34 |         option = this.meta.options.find((option) => {
35 |             return (option.value == value)
36 |         })
37 | 
38 |         if (option) {
39 |             return option.label
40 |         }
41 | 
42 |         return value
43 |     }
44 | 
45 |     // endregion Helpers
46 | 
47 |     // region Actions
48 | 
49 |     /**
50 |      * @inheritdoc
51 |      */
52 |     performRender () {
53 |         super.performRender()
54 | 
55 |         this.container.classList.add('json-meta-table-renderer-select')
56 |         this.input.title = this.meta.label
57 | 
58 |         this.meta.options.map((option) => {
59 |             let optionNode = document.createElement('option')
60 | 
61 |             optionNode.value     = option.value
62 |             optionNode.innerHTML = option.label
63 | 
64 |             this.input.appendChild(optionNode)
65 |         })
66 |     }
67 | 
68 |     // endregion Actions
69 | }


--------------------------------------------------------------------------------
/docs/examples/remote-data.md:
--------------------------------------------------------------------------------
 1 | Remote data example
 2 | ===================
 3 | This example shows how to create a `JSONMetaTable` instance that loads data from a remote
 4 | API source and persists row changes/deletes using event handlers.
 5 | 
 6 | You could also optionally listen to `JSONMetaTable` filter/sort events and trigger a new
 7 | fetch with extra query parameters.
 8 | 
 9 | JavaScript
10 | ----------
11 | ```javascript
12 | import JSONMetaTable from 'json-meta-table'
13 | 
14 | let tableInstance = new JSONMetaTable('#remote-data-example-container')
15 | 
16 | /**
17 |  * Handle table updateRow:post event - persist row changes using API
18 |  */
19 | tableInstance.on('updateRow:post', (args) => {
20 |     fetch(`/api/put/url/${args.row.id}/`, {
21 |         method: 'PUT',
22 |         body:   JSON.stringify(args.row)
23 |     })
24 |         .then((response) => {
25 |             return response.json()
26 |         })
27 |         .then((response) => {
28 |             // Success
29 |         })
30 |         .catch((error) => {
31 |             console.error(error)
32 |         })
33 | })
34 | 
35 | /**
36 |  * Handle table deleteRow:post event - persist row delete using API
37 |  */
38 | tableInstance.on('deleteRow:post', (args) => {
39 |     fetch(`/api/delete/url/${args.row.id}/`, {
40 |         method: 'DELETE'
41 |     })
42 |         .then((response) => {
43 |             return response.json()
44 |         })
45 |         .then((response) => {
46 |             // Success
47 |         })
48 |         .catch((error) => {
49 |             console.error(error)
50 |         })
51 | })
52 | 
53 | /**
54 |  * Fetch remote data and add to table
55 |  */
56 | fetch('/api/get/url/')
57 |     .then((response) => {
58 |         return response.json()
59 |     })
60 |     .then((response) => {
61 |         tableInstance.setMetadata(response.metadata)
62 |         tableInstance.setData(response.data)
63 |     })
64 |     .catch((error) => {
65 |         console.error(error)
66 |     })
67 | ```
68 | 
69 | HTML
70 | ----
71 | ```html
72 | <!doctype html>
73 | <html>
74 |   <head>
75 |     <title>Remote data example</title>
76 |     <meta charset="utf-8" />
77 |   </head>
78 | 
79 |   <body>
80 |     <h1>Remote data example</h1>
81 | 
82 |     <div id="remote-data-example-container"></div>
83 |   </body>
84 | </html>
85 | ```


--------------------------------------------------------------------------------
/docs/examples/custom-data-types.md:
--------------------------------------------------------------------------------
 1 | Custom data types example
 2 | =========================
 3 | This example shows how to create a `JSONMetaTable` instance with a custom renderer for the `csvarray` data type.
 4 | 
 5 | This renderer displays and edits a simple array as a CSV. When the text value is updated, it is set in the table data as an array.
 6 | 
 7 | JavaScript
 8 | ----------
 9 | ```javascript
10 | import JSONMetaTable, { BaseRenderer } from 'json-meta-table'
11 | 
12 | class CSVArrayRenderer extends BaseRenderer {
13 |     constructor (table, meta, value) {
14 |         super(table, meta, value)
15 | 
16 |         this.init()
17 |     }
18 | 
19 |     formatValue (value) {
20 |         return value.join(', ')
21 |     }
22 | 
23 |     parseValue (value) {
24 |         let result = (value.split)
25 |             ? value.split(',')
26 |             : value
27 | 
28 |         for (let index in result) {
29 |             result[index] = result[index].trim()
30 |         }
31 | 
32 |         return result
33 |     }
34 | 
35 |     performSetValue (value) {
36 |         this.value             = this.parseValue(value)
37 |         this.input.value       = this.formatValue(this.value)
38 |         this.display.innerHTML = this.formatValue(this.value)
39 | 
40 |         if (this.value !== this.initialValue) {
41 |             this.hasChanged = true
42 |         }
43 |     }
44 | }
45 | 
46 | let tableInstance = new JSONMetaTable('#basic-example-container', {}, {}, [], {}, {
47 |     csvarray: CSVArrayRenderer
48 | })
49 | 
50 | tableInstance.setMetadata([
51 |     {
52 |         name:  'csvarray',
53 |         label: 'CSV array',
54 |         type:  'csvarray'
55 |     }
56 | ])
57 | 
58 | tableInstance.setData([
59 |     {
60 |         id: 1,
61 |         values: {
62 |             csvarray: ['value 1', 'value 2', 'value 3']
63 |         }
64 |     },{
65 |         id: 2,
66 |         values: {
67 |             csvarray: ['value 2', 'value 3']
68 |         }
69 |     },{
70 |         id: 3,
71 |         values: {
72 |             csvarray: ['value 1', 'value 2']
73 |         }
74 |     }
75 | ])
76 | ```
77 | 
78 | HTML
79 | ----
80 | ```html
81 | <!doctype html>
82 | <html>
83 |   <head>
84 |     <title>Custom data types example</title>
85 |     <meta charset="utf-8" />
86 |   </head>
87 | 
88 |   <body>
89 |     <h1>Custom data types example</h1>
90 | 
91 |     <div id="custom-data-types-example-container"></div>
92 |   </body>
93 | </html>
94 | ```


--------------------------------------------------------------------------------
/src/renderers/CheckboxRenderer.js:
--------------------------------------------------------------------------------
  1 | import BaseRenderer from './BaseRenderer'
  2 | 
  3 | /**
  4 |  * Checkbox renderer
  5 |  */
  6 | export default class CheckboxRenderer extends BaseRenderer {
  7 |     // region Constructor
  8 | 
  9 |     /**
 10 |      * @inheritdoc
 11 |      */
 12 |     constructor (table, meta, row, value, displayValue) {
 13 |         super(table, meta, row, value, displayValue)
 14 | 
 15 |         this.init()
 16 | 
 17 |         this.bindInputClick()
 18 |     }
 19 | 
 20 |     // endregion Constructor
 21 | 
 22 |     // region Event binders
 23 | 
 24 |     /**
 25 |      * Bind functionality to input element click event
 26 |      */
 27 |     bindInputClick () {
 28 |         if (this.meta.editable) {
 29 |             this.input.addEventListener('click', this.handleInputClick.bind(this))
 30 |         }
 31 |     }
 32 | 
 33 |     // endregion Event binders
 34 | 
 35 |     // region Event handlers
 36 | 
 37 |     /**
 38 |      * Handle input element click event
 39 |      *
 40 |      * @param evt
 41 |      */
 42 |     handleInputClick (evt) {
 43 |         this.setValue(this.input.checked)
 44 |     }
 45 | 
 46 |     // endregion Event handlers
 47 | 
 48 |     // region Helpers
 49 | 
 50 |     /**
 51 |      * @inheritdoc
 52 |      */
 53 |     parseValue (value) {
 54 |         return (
 55 |             (value === 'true') ||
 56 |             (value === 1) ||
 57 |             (value === true)
 58 |         )
 59 |     }
 60 | 
 61 |     // endregion Helpers
 62 | 
 63 |     // region Actions
 64 | 
 65 |     /**
 66 |      * @inheritdoc
 67 |      */
 68 |     performRender () {
 69 |         super.performRender()
 70 | 
 71 |         this.container.classList.add('json-meta-table-renderer-checkbox')
 72 | 
 73 |         this.input.type  = 'checkbox'
 74 |         this.input.title = this.meta.label
 75 | 
 76 |         this.input.disabled = (!this.meta.editable)
 77 | 
 78 |         this.toggleEditor(true)
 79 |     }
 80 | 
 81 |     /**
 82 |      * @inheritdoc
 83 |      */
 84 |     performSetValue (value, displayValue = null) {
 85 |         displayValue = (displayValue)
 86 |             ? displayValue
 87 |             : value
 88 | 
 89 |         this.value             = this.parseValue(value)
 90 |         this.displayValue      = this.formatValue(displayValue)
 91 |         this.input.value       = new String(value)
 92 |         this.input.checked     = this.value
 93 |         this.display.innerHTML = this.displayValue
 94 | 
 95 |         if (this.value !== this.initialValue) {
 96 |             this.hasChanged = true
 97 |         }
 98 |     }
 99 | 
100 |     // endregion Actions
101 | }


--------------------------------------------------------------------------------
/docs/actions/BaseAction.md:
--------------------------------------------------------------------------------
 1 | BaseAction
 2 | ==========
 3 | Abstract class for action type classes to extend.
 4 | 
 5 | Notes
 6 | -----
 7 |   - It is recommended to override the methods in the 'actions' code region, rather than those
 8 |     in the 'controls' region, to avoid having to manually trigger the class events.
 9 | 
10 | Parameters
11 | ----------
12 | ### `row`
13 | Object from `JSONMetaTable.data` for the row the actions are being rendered in.
14 | 
15 | ### `options`
16 | Options for instance of action. Merged with defaults:
17 | ```javascript
18 | {
19 |     name:           '',
20 |     type:           '',
21 |     text:           '',
22 |     title:          '',
23 |     className:      'json-meta-table-action',
24 |     event:          (row) => {},
25 |     url:            '',
26 |     isNewWindow:    false,
27 |     windowName:     undefined,
28 |     windowFeatures: undefined
29 | }
30 | ```
31 |   - `name`: Name of action - used as a unique identifier when defining action in row object
32 |   - `type`: Action type - string value used to get an action type from `JSONMetaTable.actionTypes` object
33 |   - `text`: Text to append to action `<button>` element
34 |   - `title`: Text to use for action `<button>` `title` attribute
35 |   - `className`: Class to add to action `<button>` element
36 |   - `event`: Function to trigger when action is clicked
37 |   - `url`: URL to navigate to for `LinkAction` instances - can reference the `row` object. eg: `'/post/${row.values.id}/${row.values.slug}/'`
38 |   - `isNewWindow`: Open `LinkAction` URL in new window (default `false`)
39 |   - `windowName`: Name for `LinkAction` new window
40 |   - `windowFeatures`: Features passed to `LinkAction` new window's windowFeatures parameter
41 | 
42 | Controls
43 | --------
44 | Public control methods to be accessed on an instance are as follows:
45 | 
46 | ### init
47 | Initialise filter instance - executes `render` and `bind` methods.
48 | 
49 | ### render
50 | Render filter instance - used to apply classes and structure HTML.
51 | 
52 | ### click
53 | Perform action 'click'. Called in action's button element `click` event, and can be called programmatically.
54 | 
55 | Events
56 | ------
57 | This class triggers the following events:
58 | 
59 | ### init:pre
60 | Triggered before action instance initialisation.
61 | 
62 | ### init:post
63 | Triggered after action instance initialisation.
64 | 
65 | ### render:pre
66 | Triggered before action has rendered.
67 | 
68 | ### render:post
69 | Triggered after action has rendered.
70 | 
71 | ## click:pre
72 | Triggered before action has been clicked, either from clicking the button element or programmatically.
73 | 
74 | ## click:post
75 | Triggered after action has been clicked, either from clicking the button element or programmatically.


--------------------------------------------------------------------------------
/docs/examples/basic.md:
--------------------------------------------------------------------------------
  1 | Basic example
  2 | =============
  3 | This example shows how to create a basic `JSONMetaTable` instance with some static metadata/data.
  4 | 
  5 | JavaScript
  6 | ----------
  7 | ```javascript
  8 | import JSONMetaTable from 'json-meta-table'
  9 | 
 10 | let tableInstance = new JSONMetaTable('#basic-example-container')
 11 | 
 12 | tableInstance.setMetadata([
 13 |     {
 14 |         name:     'id',
 15 |         label:    'ID',
 16 |         type:     'number',
 17 |         editable: false
 18 |     },{
 19 |         name:     'name',
 20 |         label:    'Name',
 21 |         type:     'text'
 22 |     },{
 23 |         name:     'gender',
 24 |         label:    'Gender',
 25 |         type:     'select',
 26 |         options:  [
 27 |             {
 28 |                 value: 'm',
 29 |                 label: 'Male'
 30 |             },{
 31 |                 value: 'f',
 32 |                 label: 'Female'
 33 |             }
 34 |         ]
 35 |     },{
 36 |         name:       'age',
 37 |         label:      'Age',
 38 |         type:       'number'
 39 |     },{
 40 |         name:       'created_at',
 41 |         label:      'Created',
 42 |         type:       'datetime',
 43 |         info:       'Date created in the system'
 44 |         filterable: false
 45 |     },{
 46 |         name:       'is_active',
 47 |         label:      'Active',
 48 |         type:       'checkbox'
 49 |     }
 50 | ])
 51 | 
 52 | tableInstance.setData([
 53 |     {
 54 |         id: 40531,
 55 |         values: {
 56 |             id:         40531,
 57 |             name:       'Jose Garcia',
 58 |             gender:     'm',
 59 |             age:        25,
 60 |             created_at: '2016-04-06T19:52:48.251676Z',
 61 |             is_active:  true
 62 |         }
 63 |     },{
 64 |         id: 40532,
 65 |         values: {
 66 |             id:         40532,
 67 |             name:       'Raymond Mitchell',
 68 |             gender:     'm',
 69 |             age:        34,
 70 |             created_at: '2016-04-06T20:52:48.251676Z',
 71 |             is_active:  true
 72 |         }
 73 |     },{
 74 |         id: 40533,
 75 |         values: {
 76 |             id:         40533,
 77 |             name:       'Jane Sloane',
 78 |             gender:     'f',
 79 |             age:        43,
 80 |             created_at: '2016-04-06T23:52:48.251676Z',
 81 |             is_active:  true
 82 |         }
 83 |     }
 84 | ])
 85 | ```
 86 | 
 87 | HTML
 88 | ----
 89 | ```html
 90 | <!doctype html>
 91 | <html>
 92 |   <head>
 93 |     <title>Basic example</title>
 94 |     <meta charset="utf-8" />
 95 |   </head>
 96 | 
 97 |   <body>
 98 |     <h1>Basic example</h1>
 99 | 
100 |     <div id="basic-example-container"></div>
101 |   </body>
102 | </html>
103 | ```


--------------------------------------------------------------------------------
/public/basic-example.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 | <head>
 3 |     <script src="json-meta-table-bundle.js"></script>
 4 |     <link rel="stylesheet" href="//cdn.everything.io/kickstart/3.x/css/kickstart.min.css" />
 5 | </head>
 6 | <body>
 7 |     <div id="json-meta-table-container"></div>
 8 |     <script language="JavaScript">
 9 |         let tableInstance = new JSONMetaTable.default('#json-meta-table-container')
10 |         tableInstance.options.tableClass = "table table-zebra"
11 |         tableInstance.setMetadata([
12 |             {
13 |                 name:     'id',
14 |                 label:    'ID',
15 |                 type:     'number',
16 |                 editable: false
17 |             },{
18 |                 name:     'name',
19 |                 label:    'Name',
20 |                 type:     'text'
21 |             },{
22 |                 name:     'gender',
23 |                 label:    'Gender',
24 |                 type:     'select',
25 |                 options:  [
26 |                     {
27 |                         value: 'm',
28 |                         label: 'Male'
29 |                     },{
30 |                         value: 'f',
31 |                         label: 'Female'
32 |                     }
33 |                 ]
34 |             },{
35 |                 name:     'age',
36 |                 label:    'Age',
37 |                 type:     'number'
38 |             },{
39 |                 name:       'created_at',
40 |                 label:      'Created',
41 |                 type:       'datetime',
42 |                 info:       'Date created in the system',
43 |                 filterable: false
44 |             },{
45 |                 name:     'is_active',
46 |                 label:    'Active',
47 |                 type:     'checkbox'
48 |             }
49 |         ])
50 | 
51 |         tableInstance.setData([
52 |             {
53 |                 id: 40531,
54 |                 values: {
55 |                     id:         40531,
56 |                     name:       'Jose Garcia',
57 |                     gender:     'm',
58 |                     age:        25,
59 |                     created_at: '2016-04-06T19:52:48.251676Z',
60 |                     is_active:  true
61 |                 }
62 |             },{
63 |                 id: 40532,
64 |                 values: {
65 |                     id:         40532,
66 |                     name:       'Raymond Mitchell',
67 |                     gender:     'm',
68 |                     age:        34,
69 |                     created_at: '2016-04-06T20:52:48.251676Z',
70 |                     is_active:  true
71 |                 }
72 |             },{
73 |                 id: 40533,
74 |                 values: {
75 |                     id:         40533,
76 |                     name:       'Jane Sloane',
77 |                     gender:     'f',
78 |                     age:        43,
79 |                     created_at: '2016-04-06T23:52:48.251676Z',
80 |                     is_active:  true
81 |                 }
82 |             }
83 |         ])
84 | 
85 |     </script>
86 | </body>
87 | </html>


--------------------------------------------------------------------------------
/src/actions/BaseAction.js:
--------------------------------------------------------------------------------
  1 | import EventAbstractClass from 'event-abstract-class'
  2 | 
  3 | const OPTIONS = {
  4 |     name:           '',
  5 |     type:           '',
  6 |     text:           '',
  7 |     title:          '',
  8 |     className:      'json-meta-table-action',
  9 |     event:          (row) => {},
 10 |     url:            '',
 11 |     isNewWindow:    false,
 12 |     windowName:     undefined,
 13 |     windowFeatures: undefined
 14 | }
 15 | 
 16 | /**
 17 |  * Base action abstract class
 18 |  */
 19 | export default class BaseAction extends EventAbstractClass {
 20 |     // region Constructor
 21 | 
 22 |     /**
 23 |      * Constructor
 24 |      *
 25 |      * @param {Object} row     Table row object
 26 |      * @param {Object} options Action options
 27 |      */
 28 |     constructor (row, options = {}) {
 29 |         super()
 30 | 
 31 |         this.row     = row
 32 |         this.options = Object.assign({}, OPTIONS, options)
 33 | 
 34 |         this.button = document.createElement('button')
 35 |     }
 36 | 
 37 |     // endregion Constructor
 38 |     
 39 |     // region Helpers
 40 | 
 41 |     /**
 42 |      * Bind functionality to elements
 43 |      */
 44 |     bind () {
 45 |         this.button.addEventListener('click', this.handleButtonClick.bind(this))
 46 |     }
 47 |     
 48 |     // endregion Helpers
 49 |     
 50 |     // region Event handlers
 51 | 
 52 |     /**
 53 |      * Handle button element click event
 54 |      *
 55 |      * @param {MouseEvent} evt
 56 |      */
 57 |     handleButtonClick (evt) {
 58 |         this.click()
 59 |     }
 60 |     
 61 |     // endregion Event handlers
 62 | 
 63 |     // region Actions
 64 | 
 65 |     /**
 66 |      * Perform init action
 67 |      */
 68 |     performInit () {
 69 |         this.render()
 70 |         this.bind()
 71 |     }
 72 | 
 73 |     /**
 74 |      * Perform render action
 75 |      */
 76 |     performRender () {
 77 |         this.button.type      = 'button'
 78 |         this.button.title     = this.options.title
 79 |         this.button.className = this.options.className
 80 |         this.button.innerHTML = `<span>${this.options.text}</span>`
 81 |     }
 82 | 
 83 |     /**
 84 |      * Perform click action
 85 |      */
 86 |     performClick () {
 87 |         if (this.options.event) {
 88 |             this.options.event(this.row)
 89 |         }
 90 |     }
 91 | 
 92 |     // endregion Actions
 93 | 
 94 |     // region Controls
 95 | 
 96 |     /**
 97 |      * Initialise action
 98 |      *
 99 |      * @fires BaseAction#init:pre
100 |      * @fires BaseAction#init:post
101 |      */
102 |     init () {
103 |         this.trigger('init:pre')
104 | 
105 |         this.performInit()
106 | 
107 |         this.trigger('init:post')
108 |     }
109 | 
110 |     /**
111 |      * Render action
112 |      *
113 |      * @fires BaseAction#render:pre
114 |      * @fires BaseAction#render:post
115 |      */
116 |     render () {
117 |         this.trigger('render:pre')
118 | 
119 |         this.performRender()
120 | 
121 |         this.trigger('render:post')
122 |     }
123 | 
124 |     /**
125 |      * Click the action button
126 |      *
127 |      * @fires BaseAction#click:pre
128 |      * @fires BaseAction#click:post
129 |      */
130 |     click () {
131 |         this.trigger('click:pre')
132 | 
133 |         this.performClick()
134 | 
135 |         this.trigger('click:post')
136 |     }
137 | 
138 |     // endregion Controls
139 | }


--------------------------------------------------------------------------------
/docs/filters/BaseFilter.md:
--------------------------------------------------------------------------------
  1 | BaseFilter
  2 | ==========
  3 | Abstract class for filter type classes to extend.
  4 | 
  5 | Notes
  6 | -----
  7 |   - It is recommended to override the methods in the 'actions' code region, rather than those
  8 |     in the 'controls' region, to avoid having to manually trigger the class events.
  9 | 
 10 | Parameters
 11 | ----------
 12 | ### `meta`
 13 | Metadata for column this filter is attached to - pulled from objects in `JSONMetaTable.metadata`.
 14 | 
 15 | ### `options`
 16 | Options for instance of filter. Merged with defaults:
 17 | ```javascript
 18 | {
 19 |     containerClass:      'json-meta-table-filter',
 20 |     buttonClass:         'json-meta-table-filter-button',
 21 |     inputContainerClass: 'json-meta-table-filter-input',
 22 |     inputHasValueClass:  'json-meta-table-filter-has-value',
 23 |     emptyOptionText:     'Select one',
 24 |     trueOptionText:      'True',
 25 |     falseOptionText:     'False',
 26 |     placeholderText:     'Search',
 27 |     typingUpdateDelay:   500
 28 | }
 29 | ```
 30 |   - `containerClass`: Class added to filter container element
 31 |   - `buttonClass`: Class added to `<button>` element
 32 |   - `inputContainerClass`: Class added to the `<input>` container element
 33 |   - `inputHasValueClass`: Class added to the container element when the filter has a value set
 34 |   - `emptyOptionText`: Text for empty option text for filters using the `<select>` element
 35 |   - `trueOptionText`: Text for `CheckboxFilter` filter type `true` option
 36 |   - `falseOptionText`: Text for `CheckboxFilter` filter type `false` option
 37 |   - `placeholderText`: Text to use for `<input>` `placeholder` attribute
 38 |   - `typingUpdateDelay`: Time in milliseconds to delay updating the filter value when typing
 39 | 
 40 | Controls
 41 | --------
 42 | Public control methods to be accessed on an instance are as follows:
 43 | 
 44 | ### init
 45 | Initialise filter instance - executes `render` and `bind` methods.
 46 | 
 47 | ### render
 48 | Render filter instance - used to apply classes and structure HTML.
 49 | 
 50 | ### toggleInput
 51 | Toggle visibility between input and button display, based on provided `isVisible` parameter.
 52 | If `true`, input is visible, else button will be visible.
 53 | 
 54 | ### setValue
 55 | Set new filter value and toggle `options.inputHasValueClass` class on container element if a value is set.
 56 | 
 57 | Events
 58 | ------
 59 | This class triggers the following events:
 60 | 
 61 | ### init:pre
 62 | Triggered before filter instance initialisation.
 63 | 
 64 | ### init:post
 65 | Triggered after filter instance initialisation.
 66 | 
 67 | ### render:pre
 68 | Triggered before filter has rendered.
 69 | 
 70 | ### render:post
 71 | Triggered after filter has rendered.
 72 | 
 73 | ### toggleInput:pre
 74 | Triggered before input/button visibility is toggled.
 75 | #### Receives
 76 | ```javascript
 77 | {
 78 |     isVisible: isVisible // Visibility: true if input is to be visible, false if button
 79 | }
 80 | ```
 81 | 
 82 | ### toggleInput:post
 83 | Triggered after input/button visibility is toggled.
 84 | #### Receives
 85 | ```javascript
 86 | {
 87 |     isVisible: isVisible // Visibility: true if input is visible, false if button
 88 | }
 89 | ```
 90 | 
 91 | ### setValue:pre
 92 | Triggered before new filter value is set.
 93 | #### Receives
 94 | ```javascript
 95 | {
 96 |     newValue: value // New value to be set
 97 | }
 98 | ```
 99 | 
100 | ### setValue:post
101 | Triggered after new filter value is set.
102 | #### Receives
103 | ```javascript
104 | {
105 |     value: value // Value that was set
106 | }
107 | ```


--------------------------------------------------------------------------------
/docs/renderers/BaseRenderer.md:
--------------------------------------------------------------------------------
  1 | BaseRenderer
  2 | ============
  3 | Abstract class for renderer type classes to extend.
  4 | 
  5 | Notes
  6 | -----
  7 |   - Renderer classes are used to render both the value display, as well as the editor used within the table.
  8 |   - It is recommended to override the methods in the 'actions' code region, rather than those
  9 |     in the 'controls' region, to avoid having to manually trigger the class events.
 10 | 
 11 | Parameters
 12 | ----------
 13 | ### `table`
 14 | Instance of `JSONMetaTable` class - can be used to call public controls on the table instance.
 15 | 
 16 | ### `meta`
 17 | Metadata for column this renderer is attached to - pulled from objects in `JSONMetaTable.metadata`.
 18 | 
 19 | ### `value`
 20 | Value for renderer's editor to parse.
 21 | 
 22 | ### `displayValue`
 23 | Value for renderer's display to format. `value` is used if `displayValue` isn't provided.
 24 | 
 25 | Controls
 26 | --------
 27 | Public control methods to be accessed on an instance are as follows:
 28 | 
 29 | ### init
 30 | Initialise renderer instance - executes `render`, `setValue`, and `bindDisplay` methods.
 31 | 
 32 | ### render
 33 | Render renderer instance - used to apply classes and structure HTML.
 34 | 
 35 | ### toggleEditor
 36 | Toggle visibility between editor and display, based on provided `isVisible` parameter.
 37 | If `true`, editor is visible, else display will be visible.
 38 | 
 39 | ### setValue
 40 | Set new renderer value - updates rendered display with formatted value and input value with parsed value.
 41 | 
 42 | ### focus
 43 | Toggle editor visibility and give focus to editor input element.
 44 | If input element supports text selection, all text will be selected.
 45 | 
 46 | ### blur
 47 | Toggle display visibility, set `BaseRenderer.initialValue` to new value, and reset `BaseRenderer.hasChanged`
 48 | to `false` to ensure event handlers checking for `hasChanged` state don't trigger again.
 49 | 
 50 | Events
 51 | ------
 52 | This class triggers the following events:
 53 | 
 54 | ### init:pre
 55 | Triggered before renderer instance initialisation.
 56 | 
 57 | ### init:post
 58 | Triggered after renderer instance initialisation.
 59 | 
 60 | ### render:pre
 61 | Triggered before renderer has rendered.
 62 | 
 63 | ### render:post
 64 | Triggered after renderer has rendered.
 65 | 
 66 | ### toggleEditor:pre
 67 | Triggered before editor/display visibility is toggled.
 68 | #### Receives
 69 | ```javascript
 70 | {
 71 |     isVisible: isVisible // Visibility: true if editor is to be visible, false if display
 72 | }
 73 | ```
 74 | 
 75 | ### toggleEditor:post
 76 | Triggered after editor/display visibility is toggled.
 77 | #### Receives
 78 | ```javascript
 79 | {
 80 |     isVisible: isVisible // Visibility: true if editor is visible, false if display
 81 | }
 82 | ```
 83 | 
 84 | ### setValue:pre
 85 | Triggered before new renderer value is set.
 86 | #### Receives
 87 | ```javascript
 88 | {
 89 |     value:        value, // New value to be set
 90 |     displayValue: displayValue // New display value to be set
 91 | }
 92 | ```
 93 | 
 94 | ### setValue:post
 95 | Triggered after new renderer value is set.
 96 | #### Receives
 97 | ```javascript
 98 | {
 99 |     value:        value, // Value that was set
100 |     displayValue: displayValue // Display value that was set
101 | }
102 | ```
103 | 
104 | ### focus:pre
105 | Triggered before editor visibility is toggled and given focus.
106 | 
107 | ### focus:post
108 | Triggered after editor visibility is toggled and given focus.
109 | 
110 | ### blur:pre
111 | Triggered before editor loses focus and display visibility is toggled.
112 | 
113 | ### blur:post
114 | Triggered after editor loses focus and display visibility is toggled.


--------------------------------------------------------------------------------
/src/renderers/AutocompleteRenderer.js:
--------------------------------------------------------------------------------
  1 | import BaseRenderer from './BaseRenderer'
  2 | import Fetch from 'fetch-class'
  3 | 
  4 | const
  5 |     OPTIONS = {
  6 |         resultListClass:       'json-meta-table-autocomplete-results',
  7 |         typingUpdateDelay:     500,
  8 |         maxResults:            10,
  9 |         limitResults:          true,
 10 |         remoteData:            false,
 11 |         remoteDataUrl:         '',
 12 |         remoteDataParser:      undefined,
 13 |         remoteDataSearchParam: 'search'
 14 |     },
 15 |     remote = new Fetch('', { credentials: 'same-origin' })
 16 | 
 17 | export default class AutocompleteRenderer extends BaseRenderer {
 18 |     // region Constructor
 19 | 
 20 |     /**
 21 |      * @inheritdoc
 22 |      */
 23 |     constructor (table, meta, row, value, displayValue) {
 24 |         super(table, meta, row, value, displayValue)
 25 | 
 26 |         this.options     = Object.assign({}, OPTIONS, this.options, meta.rendererOptions)
 27 |         this.results     = []
 28 |         this.resultsList = document.createElement('ul')
 29 | 
 30 |         this.init()
 31 | 
 32 |         this.input.addEventListener('keyup', this.handleInputKeyup.bind(this))
 33 |     }
 34 | 
 35 |     // endregion Constructor
 36 | 
 37 |     // region Helpers
 38 | 
 39 |     /**
 40 |      * Parse response data and return parsed array
 41 |      *
 42 |      * @param response
 43 |      * @returns {Array}
 44 |      */
 45 |     parseResponse (response) {
 46 |         let results = []
 47 | 
 48 |         for (let option of response.results) {
 49 |             results.push(option)
 50 |         }
 51 | 
 52 |         return results
 53 |     }
 54 | 
 55 |     // endregion Helpers
 56 | 
 57 |     // region Event handlers
 58 | 
 59 |     /**
 60 |      * Handle input element keyup event
 61 |      *
 62 |      * @param evt
 63 |      */
 64 |     handleInputKeyup (evt) {
 65 |         if (this.typingUpdateTimeout) {
 66 |             window.clearTimeout(this.typingUpdateTimeout)
 67 |         }
 68 | 
 69 |         this.typingUpdateTimeout = window.setTimeout(() => {
 70 |             if (this.options.remoteData) {
 71 |                 this.performRemoteResultSearch(this.input.value)
 72 |             } else {
 73 |                 this.performOptionsResultSearch(this.input.value)
 74 |             }
 75 |         }, this.options.typingUpdateDelay)
 76 |     }
 77 | 
 78 |     /**
 79 |      * @inheritdoc
 80 |      */
 81 |     handleInputBlur (evt) {
 82 |         this.blur()
 83 |     }
 84 | 
 85 |     /**
 86 |      * Handle result item element mousedown event
 87 |      *
 88 |      * @param {Object}     result Result item object
 89 |      * @param {MouseEvent} evt    Event
 90 |      */
 91 |     handleResultMousedown (result, evt) {
 92 |         this.setValue(result.value, result.label)
 93 |     }
 94 | 
 95 |     /**
 96 |      * Handle remote result search request success event
 97 |      *
 98 |      * @param {Object} response Response object
 99 |      */
100 |     handleRemoteResultSearchSuccess (response) {
101 |         let results  = []
102 |         this.results = []
103 | 
104 |         if (response.response) {
105 |             results = (this.options.remoteDataParser)
106 |                 ? this.options.remoteDataParser(response.response)
107 |                 : this.parseResponse(response.response)
108 |         }
109 | 
110 |         for (let result of results) {
111 |             this.results.push(result)
112 | 
113 |             if (
114 |                 this.options.limitResults &&
115 |                 (this.results.length === this.options.maxResults)
116 |             ) {
117 |                 break
118 |             }
119 |         }
120 | 
121 |         this.renderResultsList()
122 |     }
123 | 
124 |     // endregion Event handlers
125 | 
126 |     // region Renderers
127 | 
128 |     /**
129 |      * Render results list
130 |      */
131 |     renderResultsList () {
132 |         let noResultsLi
133 | 
134 |         this.resultsList.innerHTML = ''
135 | 
136 |         this.results.map((result) => {
137 |             let li = document.createElement('li')
138 | 
139 |             li.innerHTML     = `<span>${result.label}</span>`
140 |             li.dataset.value = result.value
141 | 
142 |             li.addEventListener('mousedown', this.handleResultMousedown.bind(this, result))
143 | 
144 |             this.resultsList.appendChild(li)
145 |         })
146 | 
147 |         if (this.results.length < 1) {
148 |             noResultsLi           = document.createElement('li')
149 |             noResultsLi.innerHTML = 'No results found.'
150 | 
151 |             this.resultsList.appendChild(noResultsLi)
152 |         }
153 |     }
154 | 
155 |     // endregion Renderers
156 | 
157 |     // region Actions
158 | 
159 |     /**
160 |      * @inheritdoc
161 |      */
162 |     performRender () {
163 |         super.performRender()
164 | 
165 |         this.resultsList.className = this.options.resultListClass
166 | 
167 |         this.editor.appendChild(this.resultsList)
168 |     }
169 | 
170 |     /**
171 |      * Perform simple text search on options
172 |      *
173 |      * @param {String} search Search query
174 |      */
175 |     performOptionsResultSearch (search) {
176 |         this.results = []
177 | 
178 |         for (let option of this.meta.options) {
179 |             if (
180 |                 (new String(option.value).toLowerCase().indexOf(search.toLowerCase()) >= 0) ||
181 |                 (option.label.toLowerCase().indexOf(search.toLowerCase()) >= 0)
182 |             ) {
183 |                 this.results.push(option)
184 |             }
185 | 
186 |             if (
187 |                 this.options.limitResults &&
188 |                 (this.results.length === this.options.maxResults)
189 |             ) {
190 |                 break
191 |             }
192 |         }
193 | 
194 |         this.renderResultsList()
195 |     }
196 | 
197 |     /**
198 |      * Perform remote result search
199 |      *
200 |      * @param {String} search Search query
201 |      */
202 |     performRemoteResultSearch (search) {
203 |         let data = {}
204 | 
205 |         data[this.options.remoteDataSearchParam] = search
206 | 
207 |         remote.get(this.options.remoteDataUrl, this.handleRemoteResultSearchSuccess.bind(this), {
208 |             data: data
209 |         })
210 |     }
211 | 
212 |     // endregion Actions
213 | }


--------------------------------------------------------------------------------
/src/filters/BaseFilter.js:
--------------------------------------------------------------------------------
  1 | import EventAbstractClass from 'event-abstract-class'
  2 | 
  3 | const OPTIONS = {
  4 |     containerClass:      'json-meta-table-filter',
  5 |     buttonClass:         'json-meta-table-filter-button',
  6 |     inputContainerClass: 'json-meta-table-filter-input',
  7 |     inputHasValueClass:  'json-meta-table-filter-has-value',
  8 |     emptyOptionText:     'Select one',
  9 |     trueOptionText:      'True',
 10 |     falseOptionText:     'False',
 11 |     placeholderText:     'Search',
 12 |     typingUpdateDelay:   500
 13 | }
 14 | 
 15 | /**
 16 |  * Base filter abstract class
 17 |  */
 18 | export default class BaseFilter extends EventAbstractClass {
 19 |     // region Constructor
 20 | 
 21 |     /**
 22 |      * Constructor
 23 |      * 
 24 |      * @param {Object} meta    Column meta
 25 |      * @param {Object} options Filter options
 26 |      */
 27 |     constructor (meta, options = {}) {
 28 |         super()
 29 | 
 30 |         this.meta    = meta
 31 |         this.options = Object.assign({}, OPTIONS, options)
 32 | 
 33 |         this.value = ''
 34 | 
 35 |         this.container      = document.createElement('div')
 36 |         this.button         = document.createElement('button')
 37 |         this.inputContainer = document.createElement('div')
 38 |         this.input          = document.createElement('input')
 39 |     }
 40 | 
 41 |     // endregion Constructor
 42 | 
 43 |     // region Helpers
 44 | 
 45 |     /**
 46 |      * Bind functionality to element events
 47 |      */
 48 |     bind () {
 49 |         this.button.addEventListener('click', this.handleButtonClick.bind(this))
 50 |         this.input.addEventListener('blur', this.handleInputBlur.bind(this))
 51 | 
 52 |         if (this.input.localName === 'select') {
 53 |             this.input.addEventListener('change', this.handleInputChange.bind(this))
 54 |         } else {
 55 |             this.input.addEventListener('keyup', this.handleInputKeyup.bind(this))
 56 |         }
 57 |     }
 58 | 
 59 |     // endregion Helpers
 60 | 
 61 |     // region Event handlers
 62 | 
 63 |     /**
 64 |      * Handle button element click event
 65 |      *
 66 |      * @param {MouseEvent} evt
 67 |      */
 68 |     handleButtonClick (evt) {
 69 |         this.toggleInput(true)
 70 |     }
 71 | 
 72 |     /**
 73 |      * Handle input element blur event
 74 |      *
 75 |      * @param {FocusEvent} evt
 76 |      */
 77 |     handleInputBlur (evt) {
 78 |         this.toggleInput(false)
 79 |     }
 80 | 
 81 |     /**
 82 |      * Handle input element keyup event
 83 |      *
 84 |      * @param {KeyboardEvent} evt
 85 |      */
 86 |     handleInputKeyup (evt) {
 87 |         if (this.typingUpdateTimeout) {
 88 |             window.clearTimeout(this.typingUpdateTimeout)
 89 |         }
 90 | 
 91 |         this.typingUpdateTimeout = window.setTimeout(() => {
 92 |             this.setValue(this.input.value)
 93 |         }, this.options.typingUpdateDelay)
 94 |     }
 95 | 
 96 |     /**
 97 |      * Handle input element change event
 98 |      *
 99 |      * @param {Event} evt
100 |      */
101 |     handleInputChange (evt) {
102 |         this.setValue(this.input.value)
103 |     }
104 | 
105 |     // endregion Event handlers
106 | 
107 |     // region Actions
108 | 
109 |     /**
110 |      * Perform init action
111 |      */
112 |     performInit () {
113 |         this.render()
114 |         this.bind()
115 |     }
116 | 
117 |     /**
118 |      * Perform render action
119 |      */
120 |     performRender () {
121 |         this.container.className      = this.options.containerClass
122 |         this.button.className         = this.options.buttonClass
123 |         this.inputContainer.className = this.options.inputContainerClass
124 | 
125 |         this.button.innerHTML = '<span>Filter</span>'
126 |         this.button.type      = 'button'
127 | 
128 |         this.inputContainer.appendChild(this.input)
129 |         this.container.appendChild(this.button)
130 |     }
131 | 
132 |     /**
133 |      * Perform toggleInput action
134 |      *
135 |      * @param {boolean} isVisible If true, input is visible else button is visible
136 |      */
137 |     performToggleInput (isVisible) {
138 |         if (isVisible) {
139 |             this.container.removeChild(this.button)
140 |             this.container.appendChild(this.inputContainer)
141 | 
142 |             this.input.focus()
143 | 
144 |             if (this.input.setSelectionRange) {
145 |                 this.input.setSelectionRange(0, this.value.length)
146 |             }
147 |         } else {
148 |             this.container.removeChild(this.inputContainer)
149 |             this.container.appendChild(this.button)
150 |         }
151 |     }
152 | 
153 |     /**
154 |      * Perform setValue action
155 |      *
156 |      * @param {*} value New value to set
157 |      */
158 |     performSetValue (value) {
159 |         this.value       = value
160 |         this.input.value = value
161 | 
162 |         this.container.classList.toggle(this.options.inputHasValueClass, (this.value !== ''))
163 |     }
164 | 
165 |     // endregion Actions
166 | 
167 |     // region Controls
168 | 
169 |     /**
170 |      * Initialise filter
171 |      *
172 |      * @fires BaseFilter#init:pre
173 |      * @fires BaseFilter#init:post
174 |      */
175 |     init () {
176 |         this.trigger('init:pre')
177 | 
178 |         this.performInit()
179 | 
180 |         this.trigger('init:post')
181 |     }
182 | 
183 |     /**
184 |      * Render filter
185 |      *
186 |      * @fires BaseFilter#render:pre
187 |      * @fires BaseFilter#render:post
188 |      */
189 |     render () {
190 |         this.trigger('render:pre')
191 | 
192 |         this.performRender()
193 | 
194 |         this.trigger('render:post')
195 |     }
196 | 
197 |     /**
198 |      * Toggle input visibility
199 |      *
200 |      * @param {boolean} isVisible If true, input is visible else button is visible
201 |      * @fires BaseFilter#toggleInput:pre
202 |      * @fires BaseFilter#toggleInput:post
203 |      */
204 |     toggleInput (isVisible) {
205 |         this.trigger('toggleInput:pre', {
206 |             isVisible: isVisible
207 |         })
208 | 
209 |         this.performToggleInput(isVisible)
210 | 
211 |         this.trigger('toggleInput:post', {
212 |             isVisible: isVisible
213 |         })
214 |     }
215 | 
216 |     /**
217 |      * Set new value
218 |      *
219 |      * @param {*} value New value to set
220 |      * @fires BaseFilter#setValue:pre
221 |      * @fires BaseFilter#setValue:post
222 |      */
223 |     setValue (value) {
224 |         this.trigger('setValue:pre', {
225 |             newValue: value
226 |         })
227 | 
228 |         this.performSetValue(value)
229 | 
230 |         this.trigger('setValue:post', {
231 |             value: value
232 |         })
233 |     }
234 | 
235 |     // endregion Controls
236 | }


--------------------------------------------------------------------------------
/src/renderers/BaseRenderer.js:
--------------------------------------------------------------------------------
  1 | import EventAbstractClass from 'event-abstract-class'
  2 | 
  3 | const OPTIONS = {
  4 | 
  5 | }
  6 | 
  7 | /**
  8 |  * Base renderer abstract class
  9 |  */
 10 | export default class BaseRenderer extends EventAbstractClass {
 11 |     // region Constructor
 12 | 
 13 |     /**
 14 |      * Constructor
 15 |      *
 16 |      * @param {JSONMetaTable} table        Table instance
 17 |      * @param {Object}        meta         Column metadata
 18 |      * @param {Object}        row          Row object
 19 |      * @param {*}             value        Value to set on editor
 20 |      * @param {*}             displayValue Value to display
 21 |      */
 22 |     constructor (table, meta, row, value, displayValue) {
 23 |         super()
 24 | 
 25 |         displayValue = (displayValue !== undefined)
 26 |             ? displayValue
 27 |             : value
 28 | 
 29 |         this.options             = Object.assign({}, OPTIONS, meta.rendererOptions)
 30 |         this.table               = table
 31 |         this.meta                = meta
 32 |         this.row                 = row
 33 |         this.value               = null
 34 |         this.displayValue        = null
 35 |         this.initialValue        = value
 36 |         this.initialDisplayValue = displayValue
 37 |         this.hasChanged          = false
 38 | 
 39 |         this.container = document.createElement('div')
 40 |         this.editor    = document.createElement('div')
 41 |         this.display   = document.createElement('div')
 42 |         this.input     = document.createElement('input')
 43 | 
 44 |         this.inputBlurHandler = this.handleInputBlur.bind(this)
 45 |     }
 46 | 
 47 |     // endregion Constructor
 48 | 
 49 |     // region Helpers
 50 | 
 51 |     /**
 52 |      * Parse value for saving
 53 |      *
 54 |      * @param value
 55 |      * @returns {*}
 56 |      */
 57 |     parseValue (value) {
 58 |         return value
 59 |     }
 60 | 
 61 |     /**
 62 |      * Format value for display
 63 |      *
 64 |      * @param value
 65 |      * @returns {*}
 66 |      */
 67 |     formatValue (value) {
 68 |         return new String(value)
 69 |     }
 70 | 
 71 |     // endregion Helpers
 72 | 
 73 |     // region Event binders
 74 | 
 75 |     /**
 76 |      * Bind functionality to display element events
 77 |      */
 78 |     bindDisplay () {
 79 |         if (this.meta.editable) {
 80 |             this.display.addEventListener('click', this.handleDisplayClick.bind(this))
 81 |         }
 82 |     }
 83 | 
 84 |     /**
 85 |      * Bind functionality to input blur event
 86 |      */
 87 |     bindInputBlur () {
 88 |         this.input.addEventListener('blur', this.inputBlurHandler)
 89 |     }
 90 | 
 91 |     /**
 92 |      * Unbind functionality from input blur event
 93 |      */
 94 |     unbindInputBlur () {
 95 |         this.input.removeEventListener('blur', this.inputBlurHandler)
 96 |     }
 97 | 
 98 |     // endregion Event binders
 99 | 
100 |     // region Event handlers
101 | 
102 |     /**
103 |      * Handle display element click event
104 |      *
105 |      * @param evt
106 |      */
107 |     handleDisplayClick (evt) {
108 |         this.focus()
109 |     }
110 | 
111 |     /**
112 |      * Handle input element blur event
113 |      *
114 |      * @param evt
115 |      */
116 |     handleInputBlur (evt) {
117 |         if (this.input.checkValidity()) {
118 |             this.setValue(this.input.value)
119 |         } else {
120 |             this.setValue(this.initialValue, this.initialDisplayValue)
121 |         }
122 | 
123 |         this.blur()
124 |     }
125 | 
126 |     // endregion Event handlers
127 | 
128 |     // region Actions
129 | 
130 |     /**
131 |      * Perform init action
132 |      */
133 |     performInit () {
134 |         this.render()
135 |         this.setValue(this.initialValue, this.initialDisplayValue)
136 |         this.bindDisplay()
137 |     }
138 | 
139 |     /**
140 |      * Perform render action
141 |      */
142 |     performRender () {
143 |         this.container.classList.add('json-meta-table-renderer')
144 |         this.editor.classList.add('json-meta-table-editor')
145 |         this.display.classList.add('json-meta-table-display')
146 | 
147 |         if (this.meta.required) {
148 |             this.input.required = true
149 |         }
150 | 
151 |         this.editor.appendChild(this.input)
152 |         this.container.appendChild(this.display)
153 |     }
154 | 
155 |     /**
156 |      * Perform toggleEditor action
157 |      *
158 |      * @param {boolean} isEditing If true, editor will be toggled, otherwise display will be toggled
159 |      */
160 |     performToggleEditor (isEditing) {
161 |         if (isEditing) {
162 |             this.display = this.container.removeChild(this.display)
163 |             this.container.appendChild(this.editor)
164 |         } else {
165 |             this.editor = this.container.removeChild(this.editor)
166 |             this.container.appendChild(this.display)
167 |         }
168 |     }
169 | 
170 |     /**
171 |      * Perform setValue action
172 |      *
173 |      * @param {*} value        New value to set
174 |      * @param {*} displayValue New display value to set
175 |      */
176 |     performSetValue (value, displayValue = null) {
177 |         displayValue = (displayValue)
178 |             ? displayValue
179 |             : value
180 | 
181 |         this.value             = this.parseValue(value)
182 |         this.displayValue      = this.formatValue(displayValue)
183 |         this.input.value       = new String(this.value)
184 |         this.display.innerHTML = this.displayValue
185 | 
186 |         if (this.value !== this.initialValue) {
187 |             this.hasChanged = true
188 |         }
189 |     }
190 | 
191 |     /**
192 |      * Perform focus action
193 |      */
194 |     performFocus () {
195 |         if (!this.meta.editable) {
196 |             return
197 |         }
198 | 
199 |         this.toggleEditor(true)
200 | 
201 |         this.input.focus()
202 | 
203 |         if (this.input.setSelectionRange) {
204 |             this.input.setSelectionRange(0, this.input.value.length)
205 |         }
206 | 
207 |         this.bindInputBlur()
208 |     }
209 | 
210 |     /**
211 |      * Perform blur action
212 |      */
213 |     performBlur () {
214 |         this.toggleEditor(false)
215 |         this.unbindInputBlur()
216 | 
217 |         this.initialValue        = this.value
218 |         this.initialDisplayValue = this.displayValue
219 |         this.hasChanged          = false
220 |     }
221 | 
222 |     // endregion Actions
223 | 
224 |     // region Controls
225 | 
226 |     /**
227 |      * Initialise renderer
228 |      *
229 |      * @fires BaseRenderer#init:pre
230 |      * @fires BaseRenderer#init:post
231 |      */
232 |     init () {
233 |         this.trigger('init:pre')
234 | 
235 |         this.performInit()
236 | 
237 |         this.trigger('init:post')
238 |     }
239 | 
240 |     /**
241 |      * Render HTML elements
242 |      *
243 |      * @fires BaseRenderer#render:pre
244 |      * @fires BaseRenderer#render:post
245 |      */
246 |     render () {
247 |         this.trigger('render:pre')
248 | 
249 |         this.performRender()
250 | 
251 |         this.trigger('render:post')
252 |     }
253 | 
254 |     /**
255 |      * Toggle editor/display
256 |      *
257 |      * @param {boolean} isVisible If true, editor will be toggled, otherwise display will be toggled
258 |      * @fires BaseRenderer#toggleEditor:pre
259 |      * @fires BaseRenderer#toggleEditor:post
260 |      */
261 |     toggleEditor (isVisible) {
262 |         this.trigger('toggleEditor:pre', {
263 |             isVisible: isVisible
264 |         })
265 | 
266 |         this.performToggleEditor(isVisible)
267 | 
268 |         this.trigger('toggleEditor:post', {
269 |             isVisible: isVisible
270 |         })
271 |     }
272 | 
273 |     /**
274 |      * Set new value
275 |      *
276 |      * @param {*} value        New value to set
277 |      * @param {*} displayValue New display value to set
278 |      * @fires BaseRenderer#setValue:pre
279 |      * @fires BaseRenderer#setValue:post
280 |      */
281 |     setValue (value, displayValue = null) {
282 |         this.trigger('setValue:pre', {
283 |             newValue:        this.parseValue(value),
284 |             newDisplayValue: displayValue
285 |         })
286 | 
287 |         this.performSetValue(value, displayValue)
288 | 
289 |         this.trigger('setValue:post', {
290 |             value:        this.value,
291 |             displayValue: this.displayValue
292 |         })
293 |     }
294 | 
295 |     /**
296 |      * Set focus to editor input and remove display
297 |      *
298 |      * @fires BaseRenderer#focus:pre
299 |      * @fires BaseRenderer#focus:post
300 |      */
301 |     focus () {
302 |         this.trigger('focus:pre')
303 | 
304 |         this.performFocus()
305 | 
306 |         this.trigger('focus:post')
307 |     }
308 | 
309 |     /**
310 |      * Blur input and return to display
311 |      *
312 |      * @fires BaseRenderer#blur:pre
313 |      * @fires BaseRenderer#blur:post
314 |      */
315 |     blur () {
316 |         this.trigger('blur:pre')
317 | 
318 |         this.performBlur()
319 | 
320 |         this.trigger('blur:post')
321 |     }
322 | 
323 |     // endregion Controls
324 | }


--------------------------------------------------------------------------------
/docs/JSONMetaTable.md:
--------------------------------------------------------------------------------
  1 | JSONMetaTable
  2 | =============
  3 | Primary component class - used to create table instances with an array of features.
  4 | 
  5 | Metadata format
  6 | ---------------
  7 | Metadata is provided to JSONMetaTable instances as an array of associative objects,
  8 | each object gets merged with the core module defaults:
  9 | ```javascript
 10 | {
 11 |     name:            '',
 12 |     label:           '',
 13 |     type:            'text',
 14 |     info:            null,
 15 |     options:         null,
 16 |     editable:        true,
 17 |     sortable:        true,
 18 |     filterable:      true,
 19 |     renderer:        undefined,
 20 |     filter:          undefined,
 21 |     rendererOptions: {}
 22 | }
 23 | ```
 24 |   - `name`: Column name (unique identifier)
 25 |   - `label`: Column label - used to display in the <th> element
 26 |   - `type`: Type of data - used to determine the type of renderer to use for displaying/editing
 27 |   - `info`: Column info to display as <th> element's title attribute
 28 |   - `options`: Array of associative objects to use in combination with 'select' type - object format: { value: '', label: '' }
 29 |   - `editable`: Column is editable
 30 |   - `sortable`: Column is sortable
 31 |   - `filterable`: Column is filterable - if false, this column is skipped in all filter searches and will have no filter in its `<th>` element
 32 |   - `renderer`: Specific renderer to use for this column - overrides type-based renderer selection - must extend `BaseRenderer` abstract class
 33 |   - `filter`: Specific filter to use for this column - overrides type-based filter selection - must extend `BaseFilter` abstract class
 34 |   - `rendererOptions`: Options for renderer instance to use
 35 | 
 36 | Data format
 37 | -----------
 38 | Data is provided to JSONMetaTable instances as an array of associative objects
 39 |   - `id`: Unique identifier for row
 40 |   - `trClassName`: Class to add to row `<tr>` element
 41 |   - `values`: Associative object of row values - values are only rendered if included in the table's metadata, in the order defined by the metadata
 42 |   - `displayValues`: Associative object of row values specific to renderer display only
 43 | 
 44 | Parameters
 45 | ----------
 46 | ### `container`
 47 | Container to append JSON meta table instance's `<table>` element to - can provide an HTML node, or string to be used in `document.querySelector()`.
 48 | 
 49 | ### `options`
 50 | Table-specific options.
 51 | 
 52 |   - `tableClass`: Class added to `<table>` element
 53 |   - `thContainerClass`: Class added to the text container inside `<th>` elements
 54 |   - `hasInfoClass`: Class added to `<th>` elements for columns that have info metadata
 55 |   - `sortableClass`: Class added to `<th>` elements for columns that are sortable
 56 |   - `sortAscClass`: Class added to `<th>` element for column currently being sorted in ascending order
 57 |   - `sortDescClass`: Class added to `<th>` element for column currently being sorted in descending order
 58 |   - `filterableClass`: Class added to `<th>` elements for columns that are filterable
 59 |   - `actionsContainerClass`: Class added to the container element the row actions are appended to
 60 |   - `deleteActionClass`: Class added to the delete action button
 61 |   - `inlineEditing`: Enable inline editing of row data
 62 |   - `inlineDeleting`: Enable inline deleting of rows
 63 |   - `columnFiltering`: Enable column filtering, using filter controls in the `<th>` elements
 64 | 
 65 | ### `filterOptions`
 66 | Options that are passed to filter instances used for column-specific filtering.
 67 | 
 68 |   - `containerClass`: Class added to filter container element
 69 |   - `buttonClass`: Class added to `<button>` element
 70 |   - `inputContainerClass`: Class added to the `<input>` container element
 71 |   - `inputHasValueClass`: Class added to the container element when the filter has a value set
 72 |   - `emptyOptionText`: Text for empty option text for filters using the `<select>` element
 73 |   - `trueOptionText`: Text for `CheckboxFilter` filter type `true` option
 74 |   - `falseOptionText`: Text for `CheckboxFilter` filter type `false` option
 75 |   - `placeholderText`: Text to use for `<input>` `placeholder` attribute
 76 |   - `typingUpdateDelay`: Time in milliseconds to delay updating the filter value when typing
 77 |   
 78 | ### `actions`
 79 | Array of associative objects to use for row action generation.
 80 | 
 81 | Available object properties:
 82 | 
 83 |   - `name`: Name of action - used as a unique identifier when defining action in row object
 84 |   - `type`: Action type - string value used to get an action type from the `actionTypes` object
 85 |   - `text`: Text to append to action `<button>` element
 86 |   - `title`: Text to use for action `<button>` `title` attribute
 87 |   - `className`: Class to add to action `<button>` element
 88 |   - `event`: Function to trigger when action is clicked
 89 |   - `url`: URL to navigate to for `LinkAction` instances - can reference the `row` object. eg: `'/post/${row.values.id}/${row.values.slug}/'`
 90 |   - `isNewWindow`: Open `LinkAction` URL in new window (default `false`)
 91 |   - `windowName`: Name for `LinkAction` new window
 92 |   - `windowFeatures`: Features passed to `LinkAction` new window's windowFeatures parameter
 93 |   
 94 | ### `filterTypes`
 95 | Associative object of filter types, referenced . Merged with core module defaults:
 96 | ```javascript
 97 | {
 98 |     text:     TextFilter,
 99 |     select:   SelectFilter,
100 |     checkbox: CheckboxFilter
101 | }
102 | ```
103 | 
104 | ### `rendererTypes`
105 | Associative object of renderer types. Merged with core module defaults:
106 | ```javascript
107 | {
108 |     text:     TextRenderer,
109 |     number:   NumberRenderer,
110 |     select:   SelectRenderer,
111 |     checkbox: CheckboxRenderer,
112 |     datetime: DateTimeRenderer
113 | }
114 | ```
115 | 
116 | ### `actionTypes`
117 | Associative object of action types. Merged with core module defaults:
118 | ```javascript
119 | {
120 |     button: ButtonAction,
121 |     link:   LinkAction
122 | }
123 | ```
124 | 
125 | Controls
126 | --------
127 | Public control methods to be accessed on an instance are as follows:
128 | 
129 | ### setMetadata
130 | Set table metadata and re-render table.
131 | 
132 | ### setData
133 | Set table data and re-render table.
134 | 
135 | ### sortBy
136 | Sort by provided `column` and `direction` parameters.
137 | 
138 | ### filterByColumns
139 | Filter data by provided associative object.
140 | 
141 | ### filterBy
142 | Filter data by provided `column` and `search` parameters.
143 | 
144 | ### filter
145 | Filter data by general text search, searching filterable columns.
146 | 
147 | ### deleteRow
148 | Delete row using provided `row` parameter. This can be the row id or row object.
149 | 
150 | Events
151 | ------
152 | The class triggers the following events:
153 | 
154 | ### updateRow:pre
155 | Triggered before a row is updated when editing using the table's inline editing functionality.
156 | #### Receives
157 | ```javascript
158 | {
159 |     row:             row,     // Row being edited
160 |     meta:            meta,    // Row column metadata
161 |     newValue:        newValue // New value to update to
162 |     newDisplayValue: newDisplayValue // New display value to update to
163 | }
164 | ```
165 | 
166 | ### updateRow:post
167 | Triggered after a row is updated when editing using the table's inline editing functionality.
168 | #### Receives
169 | ```javascript
170 | {
171 |     row:  row,  // Row that was edited
172 |     meta: meta, // Row column metadata
173 | }
174 | ```
175 | 
176 | ### renderBody:pre
177 | Triggered before table body is rendered.
178 | 
179 | ### renderBody:post
180 | Triggered after table body is rendered.
181 | 
182 | ### render:pre
183 | Triggered before table is rendered.
184 | 
185 | ### render:post
186 | Triggered after table is rendered.
187 | 
188 | ### setMetadata:pre
189 | Triggered before new metadata is set.
190 | #### Receives
191 | ```javascript
192 | {
193 |     newMetadata: newMetadata // New metadata to be set
194 | }
195 | ```
196 | 
197 | ### setMetadata:post
198 | Triggered after new metadata is set.
199 | 
200 | ### setData:pre
201 | Triggered before new data is set.
202 | #### Receives
203 | ```javascript
204 | {
205 |     newData: newData // New data to be set
206 | }
207 | ```
208 | 
209 | ### setData:post
210 | Triggered after new data is set.
211 | 
212 | ### sortBy:pre
213 | Triggered before table is sorted by column.
214 | #### Receives
215 | ```javascript
216 | {
217 |     column: column,      // Column to sort by
218 |     direction: direction // Direction to sort column
219 | }
220 | ```
221 | 
222 | ### sortBy:post
223 | Triggered after table is sorted by column.
224 | #### Receives
225 | ```javascript
226 | {
227 |     column: column,      // Column sorted by
228 |     direction: direction // Direction column was sorted
229 | }
230 | ```
231 | 
232 | ### filterByColumns:pre
233 | Triggered before table data is filtered by multiple columns.
234 | #### Receives
235 | ```javascript
236 | {
237 |     values: values // New values to filter data by
238 | }
239 | ```
240 | 
241 | ### filterByColumns:post
242 | Triggered after table data is filtered by multiple columns.
243 | #### Receives
244 | ```javascript
245 | {
246 |     values: values // Values data was filtered by
247 | }
248 | ```
249 | 
250 | ### filterBy:pre
251 | Triggered before table data is filtered by column.
252 | #### Receives
253 | ```javascript
254 | {
255 |     column: column, // Column to filter data by
256 |     search: search  // Search value to filter data by
257 | }
258 | ```
259 | 
260 | ### filterBy:post
261 | Triggered after table data is filtered by column.
262 | #### Receives
263 | ```javascript
264 | {
265 |     column: column, // Column data was filtered by
266 |     search: search  // Search value data was filtered by
267 | }
268 | ```
269 | 
270 | ### filter:pre
271 | Triggered before table data is filtered by general search string.
272 | #### Receives
273 | ```javascript
274 | {
275 |     search: search // Search value to filter data by
276 | }
277 | ```
278 | 
279 | ### filter:post
280 | Triggered after table data is filtered by general search string.
281 | #### Receives
282 | ```javascript
283 | {
284 |     search: search // Search value data was filtered by
285 | }
286 | ```
287 | 
288 | ### deleteRow:pre
289 | Triggered before a row is deleted from table data.
290 | #### Receives
291 | ```javascript
292 | {
293 |     id: id // Row id
294 | }
295 | ```
296 | 
297 | ### deleteRow:post
298 | Triggered after a row is deleted from table data.
299 | #### Receives
300 | ```javascript
301 | {
302 |     id: id // Row id
303 | }
304 | ```


--------------------------------------------------------------------------------
/src/json-meta-table.js:
--------------------------------------------------------------------------------
  1 | import EventAbstractClass from 'event-abstract-class'
  2 | 
  3 | import BaseFilter from './filters/BaseFilter'
  4 | import TextFilter from './filters/TextFilter'
  5 | import SelectFilter from './filters/SelectFilter'
  6 | import CheckboxFilter from './filters/CheckboxFilter'
  7 | 
  8 | import BaseRenderer from './renderers/BaseRenderer'
  9 | import TextRenderer from './renderers/TextRenderer'
 10 | import NumberRenderer from './renderers/NumberRenderer'
 11 | import SelectRenderer from './renderers/SelectRenderer'
 12 | import CheckboxRenderer from './renderers/CheckboxRenderer'
 13 | import DateTimeRenderer from './renderers/DateTimeRenderer'
 14 | import AutocompleteRenderer from './renderers/AutocompleteRenderer'
 15 | 
 16 | import BaseAction from './actions/BaseAction'
 17 | import ButtonAction from './actions/ButtonAction'
 18 | import LinkAction from './actions/LinkAction'
 19 | 
 20 | export {
 21 |     BaseFilter,
 22 |     TextFilter,
 23 |     SelectFilter,
 24 |     CheckboxFilter,
 25 | 
 26 |     BaseRenderer,
 27 |     TextRenderer,
 28 |     NumberRenderer,
 29 |     SelectRenderer,
 30 |     CheckboxRenderer,
 31 |     DateTimeRenderer,
 32 |     AutocompleteRenderer,
 33 | 
 34 |     BaseAction,
 35 |     ButtonAction,
 36 |     LinkAction
 37 | }
 38 | 
 39 | const
 40 |     OPTIONS = {
 41 |         tableClass:            'json-meta-table',
 42 |         thContainerClass:      'json-meta-table-header',
 43 |         hasInfoClass:          'json-meta-table-has-info',
 44 |         sortableClass:         'json-meta-table-sortable',
 45 |         sortAscClass:          'json-meta-table-sort-asc',
 46 |         sortDescClass:         'json-meta-table-sort-desc',
 47 |         filterableClass:       'json-meta-table-filterable',
 48 |         actionsContainerClass: 'json-meta-table-actions',
 49 |         deleteActionClass:     'json-meta-table-action-delete',
 50 | 
 51 |         inlineEditing:   true,
 52 |         inlineDeleting:  true,
 53 |         columnFiltering: true
 54 |     },
 55 | 
 56 |     METADATA = {
 57 |         name:            '',
 58 |         label:           '',
 59 |         type:            'text',
 60 |         info:            null,
 61 |         options:         null,
 62 |         editable:        true,
 63 |         sortable:        true,
 64 |         filterable:      true,
 65 |         required:        false,
 66 |         renderer:        undefined,
 67 |         filter:          undefined,
 68 |         rendererOptions: {}
 69 |     },
 70 | 
 71 |     FILTERS = {
 72 |         text:     TextFilter,
 73 |         select:   SelectFilter,
 74 |         checkbox: CheckboxFilter
 75 |     },
 76 | 
 77 |     RENDERERS = {
 78 |         text:         TextRenderer,
 79 |         number:       NumberRenderer,
 80 |         select:       SelectRenderer,
 81 |         checkbox:     CheckboxRenderer,
 82 |         datetime:     DateTimeRenderer,
 83 |         autocomplete: AutocompleteRenderer
 84 |     },
 85 | 
 86 |     ACTIONS = {
 87 |         button: ButtonAction,
 88 |         link:   LinkAction
 89 |     }
 90 | 
 91 | /**
 92 |  * JSON meta table class
 93 |  */
 94 | export default class JSONMetaTable extends EventAbstractClass {
 95 |     // region Constructor
 96 | 
 97 |     /**
 98 |      * Constructor
 99 |      *
100 |      * @param {HTMLElement|String} container     Container to insert table into
101 |      * @param {Object}             options       Table options
102 |      * @param {Object}             filterOptions Filter options
103 |      * @param {Array}              actions       Table row actions
104 |      * @param {Object}             filterTypes   Custom filters
105 |      * @param {Object}             rendererTypes Custom renderers
106 |      * @param {Object}             actionTypes   Custom action types
107 |      */
108 |     constructor (
109 |         container,
110 |         options       = {},
111 |         filterOptions = {},
112 |         actions       = [],
113 |         filterTypes   = {},
114 |         rendererTypes = {},
115 |         actionTypes   = {}
116 |     ) {
117 |         super()
118 | 
119 |         this.completeData = []
120 |         this.data         = []
121 |         this.metadata     = []
122 | 
123 |         this.sorting   = {
124 |             column:    null,
125 |             direction: null
126 |         }
127 |         this.filtering = {}
128 | 
129 |         this.options       = Object.assign({}, OPTIONS, options)
130 |         this.filterOptions = filterOptions
131 |         this.actions       = actions
132 |         this.filters       = Object.assign({}, FILTERS, filterTypes)
133 |         this.renderers     = Object.assign({}, RENDERERS, rendererTypes)
134 |         this.actionTypes   = Object.assign({}, ACTIONS, actionTypes)
135 | 
136 |         this.container = (typeof container === 'string')
137 |             ? document.querySelector(container)
138 |             : container
139 | 
140 |         if (this.options.inlineDeleting) {
141 |             this.actions.push({
142 |                 name:      'delete',
143 |                 type:      'button',
144 |                 text:      'Delete',
145 |                 title:     'Delete this row',
146 |                 className: this.options.deleteActionClass,
147 |                 event:     this.handleDeleteActionClick.bind(this)
148 |             })
149 |         }
150 |     }
151 | 
152 |     // endregion Constructor
153 | 
154 |     // region Helpers
155 | 
156 |     /**
157 |      * Get meta by column name
158 |      *
159 |      * @param {String} columnName
160 |      * @returns {Object}
161 |      */
162 |     getMetaByColumnName (columnName) {
163 |         return this.metadata.find((meta) => {
164 |             return (meta.name === columnName)
165 |         })
166 |     }
167 | 
168 |     // endregion Helpers
169 | 
170 |     // region Event handlers
171 | 
172 |     /**
173 |      * Handle sortable table header element click event
174 |      *
175 |      * @param {Object}     meta Column meta
176 |      * @param {MouseEvent} evt  Event object
177 |      */
178 |     handleSortableHeadClick (meta, evt) {
179 |         let direction = (
180 |             (this.sorting.column === meta.name) &&
181 |             (this.sorting.direction === 'asc')
182 |         )
183 |             ? 'desc'
184 |             : 'asc'
185 | 
186 |         this.sortBy(meta.name, direction)
187 |     }
188 | 
189 |     /**
190 |      * Handle BaseFilter setValue:post event
191 |      *
192 |      * @param {Object} meta Header meta
193 |      */
194 |     handleFilterPostSetValue (meta) {
195 |         this.filterBy(meta.name, meta.filter.value)
196 |     }
197 | 
198 |     /**
199 |      * Handle renderer setValue:post event
200 |      *
201 |      * @param {Object}       row      Row data
202 |      * @param {Object}       meta     Column meta
203 |      * @param {BaseRenderer} renderer Renderer instance
204 |      * @fires JSONMetaTable#updateRow:pre
205 |      * @fires JSONMetaTable#updateRow:post
206 |      */
207 |     handleRendererPostSetValue (row, meta, renderer) {
208 |         if (renderer.hasChanged) {
209 |             this.trigger('updateRow:pre', {
210 |                 row:             row,
211 |                 meta:            meta,
212 |                 newValue:        renderer.value,
213 |                 newDisplayValue: renderer.displayValue
214 |             })
215 | 
216 |             if (!row.displayValues) {
217 |                 row.displayValues = {}
218 |             }
219 | 
220 |             row.values[renderer.meta.name]        = renderer.value
221 |             row.displayValues[renderer.meta.name] = renderer.displayValue
222 | 
223 |             this.trigger('updateRow:post', {
224 |                 row:  row,
225 |                 meta: meta
226 |             })
227 |         }
228 |     }
229 | 
230 |     /**
231 |      * Handle delete action click event
232 |      *
233 |      * @param {Object} row Row object to delete
234 |      */
235 |     handleDeleteActionClick (row) {
236 |         this.deleteRow(row)
237 |     }
238 | 
239 |     // endregion Event handlers
240 | 
241 |     // region Renderers
242 | 
243 |     /**
244 |      * Render table headers
245 |      *
246 |      * @fires JSONMetaTable#renderHead:pre
247 |      * @fires JSONMetaTable#renderHead:post
248 |      */
249 |     renderHead () {
250 |         this.trigger('renderHead:pre')
251 | 
252 |         this.theadRow.innerHTML = ''
253 | 
254 |         this.metadata.map((meta) => {
255 |             meta.th          = document.createElement('th')
256 |             meta.thContainer = document.createElement('div')
257 | 
258 |             meta.thContainer.className = this.options.thContainerClass
259 |             meta.thContainer.innerHTML = `<span>${meta.label}</span>`
260 | 
261 |             meta.th.appendChild(meta.thContainer)
262 | 
263 |             if (meta.info) {
264 |                 meta.th.classList.add(this.options.hasInfoClass)
265 |                 meta.th.title = meta.info
266 |             }
267 | 
268 |             if (meta.sortable) {
269 |                 meta.th.classList.add(this.options.sortableClass)
270 |                 meta.thContainer.addEventListener('click', this.handleSortableHeadClick.bind(this, meta))
271 |             }
272 | 
273 |             if (meta.filterable && this.options.columnFiltering) {
274 |                 meta.th.classList.add(this.options.filterableClass)
275 | 
276 |                 meta.th.appendChild(meta.filter.container)
277 |             }
278 | 
279 |             this.theadRow.appendChild(meta.th)
280 |         })
281 | 
282 |         if (this.actions.length > 0) {
283 |             this.theadRow.appendChild(document.createElement('th'))
284 |         }
285 | 
286 |         this.trigger('renderHead:post')
287 |     }
288 | 
289 |     /**
290 |      * Render table body
291 |      *
292 |      * @fires JSONMetaTable#renderBody:pre
293 |      * @fires JSONMetaTable#renderBody:post
294 |      */
295 |     renderBody () {
296 |         this.trigger('renderBody:pre')
297 | 
298 |         this.tbody.innerHTML = ''
299 | 
300 |         this.data.map((row) => {
301 |             row.tr        = document.createElement('tr')
302 |             row.cells     = {}
303 |             row.renderers = {}
304 | 
305 |             if (row.trClassName) {
306 |                 row.tr.className = row.trClassName
307 |             }
308 | 
309 |             this.metadata.map((meta) => {
310 |                 let displayValue = (row.displayValues && row.displayValues[meta.name])
311 |                     ? row.displayValues[meta.name]
312 |                     : undefined
313 | 
314 |                 row.cells[meta.name]     = document.createElement('td')
315 |                 row.renderers[meta.name] = new meta.renderer(this, meta, row, row.values[meta.name], displayValue)
316 | 
317 |                 row.renderers[meta.name].on('setValue:post', this.handleRendererPostSetValue.bind(this, row, meta, row.renderers[meta.name]))
318 | 
319 |                 row.cells[meta.name].appendChild(row.renderers[meta.name].container)
320 |                 row.tr.appendChild(row.cells[meta.name])
321 |             })
322 | 
323 |             if (this.actions.length > 0) {
324 |                 let actionsContainer = document.createElement('div')
325 | 
326 |                 row.actions = {}
327 |                 row.cells.actions = document.createElement('td')
328 | 
329 |                 actionsContainer.className = this.options.actionsContainerClass
330 | 
331 |                 this.actions.map((action) => {
332 |                     row.actions[action.name] = new this.actionTypes[action.type](row, action)
333 |                     actionsContainer.appendChild(row.actions[action.name].button)
334 |                 })
335 | 
336 |                 row.cells.actions.appendChild(actionsContainer)
337 |                 row.tr.appendChild(row.cells.actions)
338 |             }
339 | 
340 |             this.tbody.appendChild(row.tr)
341 |         })
342 | 
343 |         this.trigger('renderBody:post')
344 |     }
345 | 
346 |     /**
347 |      * Render table
348 |      *
349 |      * @fires JSONMetaTable#render:pre
350 |      * @fires JSONMetaTable#render:post
351 |      */
352 |     render () {
353 |         this.trigger('render:pre')
354 | 
355 |         if (!this.table) {
356 |             this.table    = document.createElement('table')
357 |             this.thead    = document.createElement('thead')
358 |             this.tbody    = document.createElement('tbody')
359 |             this.theadRow = document.createElement('tr')
360 | 
361 |             this.table.className = this.options.tableClass
362 | 
363 |             this.thead.appendChild(this.theadRow)
364 |             this.table.appendChild(this.thead)
365 |             this.table.appendChild(this.tbody)
366 |             this.container.appendChild(this.table)
367 |         }
368 | 
369 |         this.renderHead()
370 |         this.renderBody()
371 | 
372 |         this.trigger('render:post')
373 |     }
374 | 
375 |     // endregion Renderers
376 | 
377 |     // region Controls
378 | 
379 |     /**
380 |      * Set table metadata
381 |      *
382 |      * @param {Object} metadata
383 |      * @fires JSONMetaTable#setMetadata:pre
384 |      * @fires JSONMetaTable#setMetadata:post
385 |      */
386 |     setMetadata (metadata) {
387 |         this.trigger('setMetadata:pre', {
388 |             newMetadata: metadata
389 |         })
390 | 
391 |         this.metadata = metadata
392 | 
393 |         this.metadata.map((meta, index) => {
394 |             this.metadata[index] = Object.assign({}, METADATA, meta)
395 | 
396 |             if (!this.metadata[index].renderer) {
397 |                 this.metadata[index].renderer = (this.renderers[this.metadata[index].type])
398 |                     ? this.renderers[this.metadata[index].type]
399 |                     : this.renderers.text
400 |             }
401 | 
402 |             if (
403 |                 (this.options.columnFiltering) &&
404 |                 (this.metadata[index].filterable) &&
405 |                 (!this.metadata[index].filter)
406 |             ) {
407 |                 this.metadata[index].filter = (this.filters[this.metadata[index].type])
408 |                     ? new this.filters[this.metadata[index].type](meta, this.filterOptions)
409 |                     : new this.filters.text(meta, this.filterOptions)
410 | 
411 |                 if (this.filtering[meta.name]) {
412 |                     this.metadata[index].filter.setValue(this.filtering[meta.name])
413 |                 }
414 | 
415 |                 this.metadata[index].filter.on('setValue:post', this.handleFilterPostSetValue.bind(this, this.metadata[index]))
416 |             }
417 |         })
418 | 
419 |         if (this.table) {
420 |             this.render()
421 |         }
422 | 
423 |         this.trigger('setMetadata:post')
424 |     }
425 | 
426 |     /**
427 |      * Set table data
428 |      *
429 |      * @param {Object} data
430 |      * @fires JSONMetaTable#setData:pre
431 |      * @fires JSONMetaTable#setData:post
432 |      */
433 |     setData (data) {
434 |         this.trigger('setData:pre', {
435 |             newData: data
436 |         })
437 | 
438 |         this.completeData = data
439 |         this.data         = data
440 | 
441 |         if (!this.table) {
442 |             this.render()
443 |         } else {
444 |             this.renderBody()
445 |         }
446 | 
447 |         this.trigger('setData:post')
448 |     }
449 | 
450 |     /**
451 |      * Sort data by column
452 |      *
453 |      * @param {String} column    Column to sort by
454 |      * @param {String} direction Direction to sort by
455 |      * @fires JSONMetaTable#sortBy:pre
456 |      * @fires JSONMetaTable#sortBy:post
457 |      */
458 |     sortBy (column, direction = 'asc') {
459 |         this.trigger('sortBy:pre', {
460 |             column:    column,
461 |             direction: direction
462 |         })
463 | 
464 |         let newData = this.data.slice(),
465 |             order = (direction === 'asc')
466 |                 ? 1
467 |                 : -1
468 | 
469 |         newData.sort((a, b) => {
470 |             let result = (a.values[column] < b.values[column])
471 |                 ? -1
472 |                 : (a.values[column] > b.values[column])
473 |                     ? 1
474 |                     : 0
475 | 
476 |             return (result * order)
477 |         })
478 | 
479 |         this.sorting = {
480 |             column:    column,
481 |             direction: direction
482 |         }
483 | 
484 |         this.data = newData
485 |         this.renderBody()
486 | 
487 |         for (let meta of this.metadata) {
488 |             meta.th.classList.remove(this.options.sortAscClass, this.options.sortDescClass)
489 | 
490 |             if (meta.name === column) {
491 |                 if (direction === 'asc') {
492 |                     meta.th.classList.add(this.options.sortAscClass)
493 |                 } else {
494 |                     meta.th.classList.add(this.options.sortDescClass)
495 |                 }
496 |             }
497 |         }
498 | 
499 |         this.trigger('sortBy:post', {
500 |             column:    column,
501 |             direction: direction
502 |         })
503 |     }
504 | 
505 |     /**
506 |      * Filter data by column filter values
507 |      *
508 |      * @param {Object} values Associative object of column => value pairs
509 |      * @fires JSONMetaTable#filterByColumns:pre
510 |      * @fires JSONMetaTable#filterByColumns:post
511 |      */
512 |     filterByColumns (values) {
513 |         let columns = Object.keys(values)
514 | 
515 |         for (let column of columns) {
516 |             if (new String(values[column]) === '') {
517 |                 delete values[column]
518 |             }
519 |         }
520 | 
521 |         this.trigger('filterByColumns:pre', {
522 |             values: values
523 |         })
524 | 
525 |         columns = Object.keys(values)
526 | 
527 |         this.filtering = values
528 | 
529 |         this.data = this.completeData.filter((row) => {
530 |             let matches = 0
531 | 
532 |             for (let column of columns) {
533 |                 let textSearch = new String(this.filtering[column]).toLowerCase(),
534 |                     meta       = this.getMetaByColumnName(column)
535 | 
536 |                 if (textSearch === '') {
537 |                     matches += 1
538 |                     continue
539 |                 }
540 | 
541 |                 if (
542 |                     (meta.options) &&
543 |                     (row.values[column] === this.filtering[column])
544 |                 ) {
545 |                     matches += 1
546 |                 } else if (new String(row.values[column]).toLowerCase().indexOf(textSearch) >= 0) {
547 |                     matches += 1
548 |                 }
549 |             }
550 | 
551 |             return (matches >= columns.length)
552 |         })
553 | 
554 |         if (this.sorting.column) {
555 |             this.sortBy(this.sorting.column, this.sorting.direction)
556 |         } else {
557 |             this.renderBody()
558 |         }
559 | 
560 |         this.trigger('filterByColumns:post', {
561 |             values: values
562 |         })
563 |     }
564 | 
565 |     /**
566 |      * Filter data by column search terms
567 |      *
568 |      * @param column
569 |      * @param search
570 |      * @fires JSONMetaTable#filterBy:pre
571 |      * @fires JSONMetaTable#filterBy:post
572 |      */
573 |     filterBy (column, search) {
574 |         this.trigger('filterBy:pre', {
575 |             column: column,
576 |             search: search
577 |         })
578 | 
579 |         this.filtering[column] = search
580 | 
581 |         this.filterByColumns(this.filtering)
582 | 
583 |         this.trigger('filterBy:post', {
584 |             column: column,
585 |             search: search
586 |         })
587 |     }
588 | 
589 |     /**
590 |      * Filter data by general row search terms
591 |      *
592 |      * @param search
593 |      * @fires JSONMetaTable#filter:pre
594 |      * @fires JSONMetaTable#filter:post
595 |      */
596 |     filter (search) {
597 |         this.trigger('filter:pre', {
598 |             search: search
599 |         })
600 | 
601 |         let textSearch = new String(search).toLowerCase()
602 | 
603 |         this.data = this.completeData.filter((row) => {
604 |             if (textSearch === '') {
605 |                 return true
606 |             }
607 | 
608 |             let isMatching = false
609 | 
610 |             for (let meta of this.metadata) {
611 |                 if (!meta.filterable) {
612 |                     continue
613 |                 }
614 | 
615 |                 let isOptionMatching = false,
616 |                     isValueMatching  = (new String(row.values[meta.name]).toLowerCase().indexOf(textSearch) >= 0)
617 | 
618 |                 if (meta.options) {
619 |                     isOptionMatching = (meta.options.find((option) => {
620 |                         return (
621 |                             (option.value === row.values[meta.name]) &&
622 |                             (option.label.toLowerCase().indexOf(textSearch) >= 0)
623 |                         )
624 |                     }) !== undefined)
625 |                 }
626 | 
627 |                 if (isOptionMatching || isValueMatching) {
628 |                     isMatching = true
629 |                     break
630 |                 }
631 |             }
632 | 
633 |             return isMatching
634 |         })
635 | 
636 |         if (this.sorting.column) {
637 |             this.sortBy(this.sorting.column, this.sorting.direction)
638 |         } else {
639 |             this.renderBody()
640 |         }
641 | 
642 |         this.trigger('filter:post', {
643 |             search: search
644 |         })
645 |     }
646 | 
647 |     /**
648 |      * Delete row
649 |      *
650 |      * @param {*} row Row object or row id
651 |      * @fires JSONMetaTable#deleteRow:pre
652 |      * @fires JSONMetaTable#deleteRow:post
653 |      */
654 |     deleteRow (row) {
655 |         let id = (row.id)
656 |             ? row.id
657 |             : row
658 | 
659 |         this.trigger('deleteRow:pre', {
660 |             id: id
661 |         })
662 | 
663 |         let data = this.completeData.filter((item) => {
664 |             return (item.id !== id)
665 |         })
666 | 
667 |         this.setData(data)
668 | 
669 |         this.trigger('deleteRow:post', {
670 |             id: id
671 |         })
672 |     }
673 | 
674 |     // endregion Controls
675 | }


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