jsgui3-server 0.0.90 → 0.0.91

package/examples/boxes/square_boxes.js

@@ -0,0 +1,46 @@
+const jsgui = require('./square_boxes_client');
+
+const {Demo_UI, Square_Box} = jsgui.controls;
+const Server = require('./../../server');
+
+// Want to exclude this from the client bundle.
+//  Some kind of marking to say that it's server-side only?
+
+if (require.main === module) {
+    
+    const server = new Server({
+        Ctrl: Demo_UI,
+        // Giving it the Ctrl and disk path client js should enable to server to get the JS-bundled CSS from the file(s).
+        //  Putting the JS files through proper parsing and into a syntax tree would be best.
+
+
+        //'js_mode': 'debug',
+        'disk_path_client_js': require.resolve('./square_boxes_client.js')
+        //js_client: require.resolve('./square_box.js')
+    });
+
+    // A callback or event for when the bundling has been completed
+    //  a 'ready' event.
+
+    // then start the server....
+    // be able to choose the port / ports?
+    console.log('waiting for server ready event');
+    server.on('ready', () => {
+        console.log('server ready');
+
+        // server start will change to observable?
+
+        server.start(8080, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+
+    
+
+}

package/examples/boxes/square_boxes_client.js

@@ -0,0 +1,133 @@
+const jsgui = require('jsgui3-client'); // and will replace this with jsgui-client, I presume.
+const {controls, Control, mixins} = jsgui;
+const {dragable} = mixins;
+
+
+class Square_Box extends Control {
+    constructor(spec) {
+        spec.__type_name = spec.__type_name || 'square_box';
+        super(spec);
+        this.add_class('square-box');
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            console.log('Activate square box');
+
+            dragable(this, {
+                drag_mode: 'translate'
+            });
+            
+            //console.log('dragable mixin applied to square');
+            this.dragable = true;
+            //console.log('this.dragable = true;');
+
+            this.on('dragend', e => {
+                console.log('square box dragend e', e);
+            });
+
+        }
+    }
+}
+Square_Box.css = `
+.square-box {
+    background-color: #BB3333;
+    width: 220px;
+    height: 220px;
+}
+`;
+
+
+// Relies on extracting CSS from JS files.
+
+class Demo_UI extends Control {
+    constructor(spec) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+        this.add_class('demo-ui');
+
+        const compose = () => {
+            const box = new Square_Box({
+                context: context
+            })
+            this.add(box);
+
+            const box2 = new Square_Box({
+                context: context
+            });
+            //box2.background_color = '#6655CC';
+            //box2.background.color = '#6655CC';
+
+            // or even box2.color = ... and it would know which color was meant
+            //  or be able to access the .color reference / property name when asked for.
+
+
+            box2.dom.attributes.style['background-color'] = '#6655CC';
+            this.add(box2);
+
+            const box3 = new Square_Box({
+                context: context
+            })
+            this.add(box3);
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context} = this;
+
+            console.log('activate Demo_UI');
+            // listen for the context events regarding frames, changes, resizing.
+
+            context.on('window-resize', e_resize => {
+                console.log('window-resize', e_resize);
+            });
+
+        }
+    }
+}
+
+// Include this in bundling.
+//  Want CSS bundling so that styles are read out from the JS document and compiled to a stylesheet.
+
+//controls.Demo_UI = Demo_UI;
+Demo_UI.css = `
+.demo-ui {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+`;
+
+// then if running on the client...?
+
+
+
+//controls.Square_Box = Square_Box;
+// could export jsgui with the updated controls....
+//  so that they are in the correct Page Context.?
+
+
+controls.Demo_UI = Demo_UI;
+controls.Square_Box = Square_Box;
+
+module.exports = jsgui;
+
+/*
+module.exports = {
+    Square_Box: Square_Box,
+    Demo_UI: Demo_UI
+}
+*/
+
+// Then if window...?
+
+// Need to add the Square_Box control to the context or original map of controls...
+

package/examples/grids/grid_1.js

@@ -0,0 +1,46 @@
+const jsgui = require('./grid_1_client');
+
+const {Demo_UI, Square_Box} = jsgui.controls;
+const Server = require('../../server');
+
+// Want to exclude this from the client bundle.
+//  Some kind of marking to say that it's server-side only?
+
+if (require.main === module) {
+    
+    const server = new Server({
+        Ctrl: Demo_UI,
+        // Giving it the Ctrl and disk path client js should enable to server to get the JS-bundled CSS from the file(s).
+        //  Putting the JS files through proper parsing and into a syntax tree would be best.
+
+
+        //'js_mode': 'debug',
+        'disk_path_client_js': require.resolve('./grid_1_client.js')
+        //js_client: require.resolve('./square_box.js')
+    });
+
+    // A callback or event for when the bundling has been completed
+    //  a 'ready' event.
+
+    // then start the server....
+    // be able to choose the port / ports?
+    console.log('waiting for server ready event');
+    server.on('ready', () => {
+        console.log('server ready');
+
+        // server start will change to observable?
+
+        server.start(8080, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+
+    
+
+}

package/examples/grids/grid_1_client.js

@@ -0,0 +1,196 @@
+const jsgui = require('jsgui3-client'); // and will replace this with jsgui-client, I presume.
+const {controls, Control, mixins} = jsgui;
+const {dragable} = mixins;
+
+/*
+class Square_Box extends Control {
+    constructor(spec) {
+        spec.__type_name = spec.__type_name || 'square_box';
+        super(spec);
+        this.add_class('square-box');
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            console.log('Activate square box');
+
+            dragable(this, {
+                drag_mode: 'translate'
+            });
+            
+            //console.log('dragable mixin applied to square');
+            this.dragable = true;
+            //console.log('this.dragable = true;');
+
+            this.on('dragend', e => {
+                console.log('square box dragend e', e);
+            });
+
+        }
+    }
+}
+Square_Box.css = `
+.square-box {
+    background-color: #BB3333;
+    width: 220px;
+    height: 220px;
+}
+`;
+*/
+
+// Relies on extracting CSS from JS files.
+
+const Grid = controls.Grid;
+
+class Demo_UI extends Control {
+    constructor(spec) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+        this.add_class('demo-ui');
+
+        const compose = () => {
+
+            // Would be nice to have a grid / other control that expands to fit available space.
+            //  Like height and width 100%? May be a bit different in css implementation.
+
+
+            // Then indicating how much space it's supposed to take...?
+            //  Could it automatically size itself depending on space available?
+
+            const grid = new Grid({
+                context: context,
+                grid_size: [32, 32],
+                cell_size: [10, 10]
+            });
+
+            //grid.size = [320, 200];
+
+            this.add(grid);
+            
+            this._ctrl_fields = this._ctrl_fields || {};
+            this._ctrl_fields.grid = grid;
+            
+
+
+            // cell_size property perhaps?
+            // cell_size auto?
+
+            // size: auto for various controls?
+            //  a 'size' mixin? Autosize mixin?
+
+            // resizable
+            // user-resizable
+
+            // probably want mixins to represent a fair few behavious that could apply reasonably to different controls.
+            // making multi-mode rendering more of a standard too.
+
+
+
+
+
+            // Then if the grid is made flexbox...?
+            //  A way to make it fill the available space from CSS.
+
+            // Maybe a mixin to handle more sizing and positioning options?
+            //  The grid itself autofilling the space may help.
+            //   Then it can calculate what size to display / render the cells at.
+
+
+
+
+
+
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context, grid} = this;
+
+            console.log('activate Demo_UI');
+            console.log('grid', grid);
+
+            // .dimensions?
+            // Not available yet...?
+            //  A clearer post-activate time would be best.
+            //   .do_once_active possibly?
+
+
+            console.log('grid.grid_size', grid.grid_size);
+            grid.refresh_size();
+
+
+            // listen for the context events regarding frames, changes, resizing.
+
+            context.on('window-resize', e_resize => {
+                console.log('window-resize', e_resize);
+            });
+
+            // A delegated click or other event handler may work nicely (for the cells).
+
+            grid.each_cell(cell => {
+                cell.on('click', e_click => {
+                    //console.log('e_click', e_click);
+                    //console.log('cell', cell);
+                    const xy = [cell.x, cell.y];
+                    //const xy = [cell._.x, cell._.y];
+                    console.log('xy', xy);
+
+                    if (cell.dom.attributes.style['background-color'] === '#000000') {
+                        cell.dom.attributes.style['background-color'] = '#FFFFFF';
+                    } else {
+                        cell.dom.attributes.style['background-color'] = '#000000';
+                    }
+
+                    
+                })
+            })
+
+        }
+    }
+}
+
+// Include this in bundling.
+//  Want CSS bundling so that styles are read out from the JS document and compiled to a stylesheet.
+
+//controls.Demo_UI = Demo_UI;
+Demo_UI.css = `
+.demo-ui {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+`;
+
+// then if running on the client...?
+
+
+
+//controls.Square_Box = Square_Box;
+// could export jsgui with the updated controls....
+//  so that they are in the correct Page Context.?
+
+
+controls.Demo_UI = Demo_UI;
+//controls.Square_Box = Square_Box;
+
+module.exports = jsgui;
+
+/*
+module.exports = {
+    Square_Box: Square_Box,
+    Demo_UI: Demo_UI
+}
+*/
+
+// Then if window...?
+
+// Need to add the Square_Box control to the context or original map of controls...
+

package/package.json

@@ -13,8 +13,8 @@
     "cookies": "^0.8.0",
     "fnl": "^0.0.22",
     "fnlfs": "^0.0.25",
-    "jsgui3-client": "^0.0.72",
-    "jsgui3-html": "0.0.99",
+    "jsgui3-client": "^0.0.73",
+    "jsgui3-html": "0.0.100",
     "multiparty": "^4.2.3",
     "ncp": "^2.0.0",
     "obext": "0.0.24",
@@ -40,5 +40,5 @@
     "type": "git",
     "url": "https://github.com/metabench/jsgui3-server.git"
   },
-  "version": "0.0.90"
+  "version": "0.0.91"
 }