19 |
20 |
Source: actions/dock.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Dock actions.
31 | * @module
32 | */
33 |
34 | // Redux action creator factory
35 | import ACF from '../lib/redux-action'
36 |
37 | /**
38 | * Create and return the ADD_BUTTON action.
39 | * @function
40 | * @param {Object} button The button properties. See {@link module:components/dock~Button}.
41 | * @return {module:lib/redux-action~Action}
42 | */
43 | export const addButton = ACF('ADD_BUTTON', 'button')
44 |
45 | /**
46 | * Create and return the REMOVE_BUTTON action.
47 | * @function
48 | * @param {Integer} id The button id.
49 | * @return {module:lib/redux-action~Action}
50 | */
51 | export const removeButton = ACF('REMOVE_BUTTON', 'id')
52 |
53 | /**
54 | * Create and return the SELECT_BUTTON action.
55 | * @function
56 | * @param {Integer} id The button id.
57 | * @return {module:lib/redux-action~Action}
58 | */
59 | export const selectButton = ACF('SELECT_BUTTON', 'id')
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
19 |
20 |
Source: actions/panes.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Panes actions.
31 | * @module
32 | */
33 |
34 | // Redux action creator factory
35 | import ACF from '../lib/redux-action'
36 |
37 | /**
38 | * Create and return the ADD_PANE action.
39 | * @function
40 | * @param {Object} pane The pane properties. See {@link module:components/panes~Pane}.
41 | * @return {module:lib/redux-action~Action}
42 | */
43 | export const addPane = ACF('ADD_PANE', 'pane')
44 |
45 | /**
46 | * Create and return the REMOVE_PANE action.
47 | * @function
48 | * @param {Integer} id The pane id.
49 | * @return {module:lib/redux-action~Action}
50 | */
51 | export const removePane = ACF('REMOVE_PANE', 'id')
52 |
53 | /**
54 | * Create and return the SELECT_PANE action.
55 | * @function
56 | * @param {Integer} id The pane id.
57 | * @return {module:lib/redux-action~Action}
58 | */
59 | export const selectPane = ACF('SELECT_PANE', 'id')
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
19 |
20 |
Source: com.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Dock module.
31 | * @module
32 | */
33 |
34 | // React
35 | import React from 'react'
36 |
37 | /**
38 | * Communication component.
39 | *
40 | * @extends module:React~Component
41 | * @param {Object} props Component properties.
42 | */
43 | class Com extends React.Component {
44 | /**
45 | * Render the component.
46 | * @return {String}
47 | */
48 | render() {
49 | return (
50 | <div>
51 | <p>Communication...</p>
52 | </div>
53 | )
54 | }
55 | }
56 |
57 | // Exports
58 | export default Com
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
19 |
20 |
Source: components/com.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Dock module.
31 | * @module
32 | */
33 |
34 | // React
35 | import React from 'react'
36 |
37 | /**
38 | * Communication component.
39 | *
40 | * @extends module:React~Component
41 | * @param {Object} props Component properties.
42 | */
43 | class Com extends React.Component {
44 | /**
45 | * Render the component.
46 | * @return {String}
47 | */
48 | render() {
49 | return (
50 | <div>
51 | <p>Communication...</p>
52 | </div>
53 | )
54 | }
55 | }
56 |
57 | // Exports
58 | export default Com
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
19 |
20 |
Source: components/font-awesome.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Dock module.
31 | * @module
32 | */
33 |
34 | // React
35 | import React from 'react'
36 |
37 | /**
38 | * Communication component.
39 | *
40 | * @extends module:React~Component
41 | * @param {Object} props Component properties.
42 | */
43 | class Icon extends React.Component {
44 | /**
45 | * @type {Object}
46 | * @member module:components/font-awesome~Icon.prototype#props
47 | * @property {String} name Icon name (without fa- prefix)
48 | * @property {Boolean} fw If true display fixed width icon.
49 | */
50 |
51 | /**
52 | * Return the icon class name from props.
53 | * @return {String}
54 | */
55 | getClassName() {
56 | return 'fa fa-' + this.props.name + (this.props.fw ? ' fa-fw' : '')
57 | }
58 |
59 | /**
60 | * Render the component.
61 | * @return {String}
62 | */
63 | render() {
64 | return (
65 | this.props.name ? <i className={ this.getClassName() }></i> : null
66 | )
67 | }
68 | }
69 |
70 |
71 | // Exports
72 | export default Icon
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
19 |
20 |
Source: components/laserweb.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * LaserWeb main module (layout).
31 | * - Create the main layout.
32 | * - Set initial state.
33 | * @module
34 | */
35 |
36 | // Styles/Fonts
37 | import 'bootstrap'
38 | import 'bootstrap/dist/css/bootstrap.min.css'
39 | import 'font-awesome/css/font-awesome.min.css'
40 | import '../styles/index.css'
41 |
42 | // React/Redux
43 | import React from 'react'
44 | import { createStore } from 'redux'
45 | import { Provider, connect } from 'react-redux'
46 | import reducers from '../reducers'
47 |
48 | // Main components
49 | import Sidebar from './sidebar'
50 | import Workspace from './workspace'
51 |
52 | // Inner components
53 | import Com from './com'
54 |
55 | // Create redux store
56 | let store = createStore(reducers)
57 |
58 | /**
59 | * LaserWeb main component (layout).
60 | * - Create the main layout.
61 | *
62 | * @extends module:React~Component
63 | * @param {Object} props Component properties.
64 | */
65 | class LaserWeb extends React.Component {
66 | /**
67 | * Render the component.
68 | * @return {String}
69 | */
70 | render() {
71 | return (
72 | <Provider store={store}>
73 | <div className="table">
74 | <Sidebar>
75 | <Com id="com" title="Communication" icon="wifi" active={ true } />
76 | <Com id="com2" title="Communication2" icon="wifi" />
77 | <Com id="com3" title="Communication3" icon="wifi" />
78 | </Sidebar>
79 | <Workspace />
80 | </div>
81 | </Provider>
82 | )
83 | }
84 | }
85 |
86 | // Exports
87 | export default LaserWeb
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
19 |
20 |
Source: components/workspace.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Workspace module.
31 | * - Handle workspace modules.
32 | * @module
33 | */
34 |
35 | // React/Redux
36 | import React from 'react'
37 |
38 | /**
39 | * Workspace component.
40 | * - Handle workspace modules.
41 | *
42 | * @extends module:React~Component
43 | * @param {Object} props Component properties.
44 | */
45 | class Workspace extends React.Component {
46 | /**
47 | * Render the component.
48 | * @return {String}
49 | */
50 | render() {
51 | return (
52 | <div id="workspace" className="table-cell">
53 | <p>workspace</p>
54 | </div>
55 | )
56 | }
57 | }
58 |
59 | // Exports
60 | export default Workspace
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
19 |
20 |
Source: font-awesome.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Dock module.
31 | * @module
32 | */
33 |
34 | // React
35 | import React from 'react'
36 |
37 | /**
38 | * Communication component.
39 | *
40 | * @extends module:React~Component
41 | * @param {Object} props Component properties.
42 | */
43 | class Icon extends React.Component {
44 | /**
45 | * @type {Object}
46 | * @member module:components/font-awesome~Icon.prototype#props
47 | * @property {String} name Icon name (without fa- prefix)
48 | * @property {Boolean} fw If true display fixed width icon.
49 | */
50 |
51 | /**
52 | * Return the icon class name from props.
53 | * @return {String}
54 | */
55 | getClassName() {
56 | return 'fa fa-' + this.props.name + (this.props.fw ? ' fa-fw' : '')
57 | }
58 |
59 | /**
60 | * Render the component.
61 | * @return {String}
62 | */
63 | render() {
64 | return (
65 | this.props.name ? <i className={ this.getClassName() }></i> : null
66 | )
67 | }
68 | }
69 |
70 |
71 | // Exports
72 | export default Icon
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
19 |
20 |
Source: laserweb.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * LaserWeb main module (layout).
31 | * - Create the main layout.
32 | * - Set initial state.
33 | * @module
34 | */
35 |
36 | // Styles/Fonts
37 | import 'bootstrap'
38 | import 'bootstrap/dist/css/bootstrap.min.css'
39 | import 'font-awesome/css/font-awesome.min.css'
40 | import '../styles/index.css'
41 |
42 | // React/Redux
43 | import React from 'react'
44 | import { createStore } from 'redux'
45 | import { Provider, connect } from 'react-redux'
46 | import reducers from '../reducers'
47 |
48 | // Main components
49 | import Sidebar from './sidebar'
50 | import Workspace from './workspace'
51 |
52 | // Inner components
53 | import Com from './com'
54 |
55 | // Create redux store
56 | let store = createStore(reducers)
57 |
58 | /**
59 | * LaserWeb main component (layout).
60 | * - Create the main layout.
61 | *
62 | * @extends module:React~Component
63 | * @param {Object} props Component properties.
64 | */
65 | class LaserWeb extends React.Component {
66 | /**
67 | * Render the component.
68 | * @return {String}
69 | */
70 | render() {
71 | return (
72 | <Provider store={store}>
73 | <div className="table">
74 | <Sidebar>
75 | <Com id="com" title="Communication" icon="wifi" active={ true } />
76 | <Com id="com2" title="Communication2" icon="wifi" />
77 | <Com id="com3" title="Communication3" icon="wifi" />
78 | </Sidebar>
79 | <Workspace />
80 | </div>
81 | </Provider>
82 | )
83 | }
84 | }
85 |
86 | // Exports
87 | export default LaserWeb
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
19 |
20 |
Class: LaserWeb
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
new LaserWeb(props)
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 | - Create the main layout.
53 | - Load all modules.
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
Parameters:
66 |
67 |
68 |
69 |
70 |
71 |
72 | | Name |
73 |
74 |
75 | Type |
76 |
77 |
78 |
79 |
80 |
81 | Description |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 | props |
91 |
92 |
93 |
94 |
95 |
96 | Object
97 |
98 |
99 |
100 | |
101 |
102 |
103 |
104 |
105 |
106 | |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 |
140 |
141 |
142 |
143 |
144 |
145 | - Source:
146 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
196 |
197 |
198 |
199 |
200 |
19 |
20 |
Module: reducers/index
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 | - Source:
89 |
92 |
93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
140 |
141 |
142 |
143 |
144 |
19 |
20 |
Class: exports
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
Constructor
45 |
46 |
47 |
new exports()
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |
73 |
74 |
75 |
76 |
77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 | - Source:
93 |
96 |
97 |
98 |
99 |
100 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
143 |
144 |
145 |
146 |
147 |
19 |
20 |
Source: panes.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Pane module.
31 | * @module
32 | */
33 |
34 | // React/Redux
35 | import React from 'react'
36 | import { connect } from 'react-redux'
37 |
38 | /**
39 | * Pane component.
40 | *
41 | * @extends module:React~Component
42 | * @param {Object} props Component properties.
43 | */
44 | class Pane extends React.Component {
45 | /**
46 | * @type {Object}
47 | * @member module:components/pane~Pane.prototype#props
48 | * @property {String} key Pane key.
49 | * @property {String} title Pane title.
50 | * @property {String} icon Pane icon name (font-awesome).
51 | * @property {Boolean} active True if active button.
52 | * @property {module:React~Component|module:React~Component[]} children Component children.
53 | */
54 |
55 | /**
56 | * Render the component.
57 | * @return {String}
58 | */
59 | render() {
60 | return (
61 | <div className={ "pane" + (this.props.active ? " active" : "") }>
62 | <h4>{ this.props.title }</h4>
63 | { this.props.children }
64 | </div>
65 | )
66 | }
67 | }
68 |
69 | /**
70 | * Panes component.
71 | * - Handle panes.
72 | *
73 | * @extends module:React~Component
74 | * @param {Object} props Component properties.
75 | */
76 | class Panes extends React.Component {
77 | /**
78 | * @type {Object}
79 | * @member module:components/pane~Panes.prototype#props
80 | * @property {Boolean} visible True if visible.
81 | * @property {module:React~Component|module:React~Component[]} children Component children.
82 | */
83 |
84 | /**
85 | * Render the component.
86 | * @return {String}
87 | */
88 | render() {
89 | return (
90 | <div className={ "panes table-cell " + (this.props.visible ? "" : "hidden") }>
91 | { this.props.children.map(pane => <Pane key={ pane.id } { ...pane } />) }
92 | </div>
93 | )
94 | }
95 | }
96 |
97 | const mapStateToProps = (state) => {
98 | return {
99 | visible: state.panes.visible,
100 | children: state.panes.children
101 | }
102 | }
103 |
104 | const mapDispatchToProps = (dispatch) => {
105 | return {}
106 | }
107 |
108 | // Exports
109 | export { Panes, Pane }
110 | export default connect(mapStateToProps, mapDispatchToProps)(Panes)
111 |
112 |
113 |
114 |
115 |
116 |
117 |
118 |
19 |
20 |
Source: reducers/index.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Combined reducers.
31 | * @module reducers
32 | */
33 |
34 | // Redux reducers combiner
35 | import { combineReducers } from 'redux'
36 |
37 | // Reducers
38 | import dock from './dock'
39 | import panes from './panes'
40 |
41 | // Exports compined reducer
42 | export default combineReducers({ dock, panes })
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
19 |
20 |
Source: sidebar.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Sidebar module.
31 | * @module
32 | */
33 |
34 | // React/Redux
35 | import React from 'react'
36 | import { connect } from 'react-redux'
37 |
38 | // Main components
39 | import Dock from './dock'
40 | import Panes from './panes'
41 |
42 | // Actions
43 | import * as dockActions from '../actions/dock'
44 | import * as panesActions from '../actions/panes'
45 |
46 | /**
47 | * Sidebar component.
48 | * - Handle sidebar modules.
49 | *
50 | * @extends module:React~Component
51 | * @param {Object} props Component properties.
52 | */
53 | class Sidebar extends React.Component {
54 | /**
55 | * @type {Object}
56 | * @member module:components/sidebar~Sidebar.prototype#props
57 | * @property {module:React~Component|module:React~Component[]} children Component children.
58 | * @property {module:components/sidebar~addModule} addModule Add module dock/pane to the sidebar.
59 | */
60 |
61 | constructor(props) {
62 | // Super constructor
63 | super(props)
64 |
65 | // Add each children dock/pane to the sidebar
66 | React.Children.forEach(this.props.children, (child) => {
67 | this.props.addModule(child.props)
68 | })
69 | }
70 |
71 | /**
72 | * Render the component.
73 | * @return {String}
74 | */
75 | render() {
76 | return (
77 | <div id="sidebar" className="table-cell">
78 | <div className="table">
79 | <Dock />
80 | <Panes />
81 | </div>
82 | </div>
83 | )
84 | }
85 | }
86 |
87 | const mapStateToProps = (state) => {
88 | return {}
89 | }
90 |
91 | const mapDispatchToProps = (dispatch) => {
92 | return {
93 | /**
94 | * Add module dock/pane to the sidebar.
95 | * @typedef {Function} module:components/sidebar~addModule
96 | * @param {Object} props Component properties.
97 | */
98 | addModule: (props) => {
99 | dispatch(dockActions.addButton(props))
100 | dispatch(panesActions.addPane(props))
101 | }
102 | }
103 | }
104 |
105 | export default connect(mapStateToProps, mapDispatchToProps)(Sidebar)
106 |
107 |
108 |
109 |
110 |
111 |
112 |
113 |
19 |
20 |
Source: workspace.js
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 | /**
30 | * Workspace module.
31 | * - Handle workspace modules.
32 | * @module
33 | */
34 |
35 | // React/Redux
36 | import React from 'react'
37 |
38 | /**
39 | * Workspace component.
40 | * - Handle workspace modules.
41 | *
42 | * @extends module:React~Component
43 | * @param {Object} props Component properties.
44 | */
45 | class Workspace extends React.Component {
46 | /**
47 | * Render the component.
48 | * @return {String}
49 | */
50 | render() {
51 | return (
52 | <div id="workspace" className="table-cell">
53 | <p>workspace</p>
54 | </div>
55 | )
56 | }
57 | }
58 |
59 | // Exports
60 | export default Workspace
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |