jsgui3-server 0.0.121 → 0.0.123

package/examples/box/2) twenty square boxes/css flex wrap/server.js

@@ -1,113 +1,40 @@
-const jsgui = require('./client');
-
-const {Demo_UI, Square_Box} = jsgui.controls;
-const Server = require('../../../../server');
-
-
-// what would be the (best?) way to include the whole thing in one JS file?
-//  Maybe don't try that right now.
-//  maybe standardise on the dir, then client.js and server.js inside.
-
-
-
-// Want to exclude this from the client bundle.
-//  Some kind of marking to say that it's server-side only?
-
-// Need to include JSGUI3 js within the client document.
-//   Seems like an earlier code simplification removed this functionality?
-//   Just specifying a Ctrl for the server - and giving it the 'disk_path_client_js'.
-//     May as well fix that....
-
-
-
-
-
-if (require.main === module) {
-
-    // By default should include the JS and the CSS.
-    // By reference, serving them from their respective paths.
-
-
-    // This API is not working right now.
-
-    // A very simple syntax for running a single control would be great.
-
-    // Need to in the default (server) configuration build and serve the client-side app.
-    // Want to be able to make interactive apps quickly with minimal server side code that needs to be written as boilerplate to
-    // get the app running.
-
-    // Though maybe defining a webpage, that serves the client js, and renders the control on the server, and activates it on the client,
-    // would be the right approach.
-
-    // Want to make the code really explicit, in a simple way.
-
-
-    // eg { '/': Demo_UI }
-    // eg { '*': Demo_UI }
-    //  as at least it explicitly assigns it to the '/' route
-
-
-    // But worth keeping the '/' Ctrl property?
-    //  Could change it to explicitly setting the route(s).
-
-    // Do want it to build the client js on start.
-
-    // Could extract the CSS from the file itself, or maybe better reading it from the classes and objects that are loaded / referenced.
-    // All kinds of complex server program structures exist already, so could use Publishers if needed for some things.
-    //  But need to keep the surface-level API really simple.
-
-    // Maybe define a Webpage and maybe use / define an HTML_Webpage_Publisher for example too.
-    // The clearest code would be really explicit about what it does, but in terms of almost English idioms
-    //  and on the surface-level not spelling out in great detail what it's doing, but referencing objects and
-    //  instructions with clear purposes, though details could be obscure at the top level. Eg it's the publisher's responsibility
-    //  to include the CSS and JS that's needed to get it to run. A publisher is referenced and used, and it does its thing.
-
-    // The Server could automatically involk the use of a Publisher.
-    //  May be better to either require or recommend more explicit code, have them in the examples,
-    //  but also to document some shortcuts, defaults, and abbreviations (though they may omit some essential info, so not recommended for beginners)
-
-    // Could have a tabbed view for examples for 'explicit' and 'short' notations when there are multiple.
-
-    // jsgui3-html-suite may be of use, for some more extended controls that are built on top of jsgui3-html, but not specifically
-    // client or server.
-
-
-
-
-
-
-    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',
-        'src_path_client_js': require.resolve('./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');
-            }
-        });
-    })
-
-    
-
+const jsgui = require('./client');
+
+const {Demo_UI, Square_Box} = jsgui.controls;
+const Server = require('../../../../server');
+
+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',
+        'src_path_client_js': require.resolve('./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(52000, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+
+    
+
 }

package/examples/box/3) twenty selectable square boxes/css flex wrap/client.js

@@ -0,0 +1,129 @@
+const jsgui = require('jsgui3-client');
+const {controls, Control, mixins} = jsgui;
+const {dragable, selectable} = mixins;
+
+const Active_HTML_Document = require('../../../../controls/Active_HTML_Document');
+
+class Demo_UI extends Active_HTML_Document {
+    constructor(spec = {}) {
+        spec.__type_name = spec.__type_name || 'demo_ui';
+        super(spec);
+        const {context} = this;
+        if (typeof this.body.add_class === 'function') {
+            this.body.add_class('demo-ui');
+        }
+        const compose = () => {
+            const n = 20;
+            for (let c = 0; c < n; c++) {
+                const box = new Square_Box({
+                    context: context
+                })
+                this.body.add(box);
+            }
+        }
+        if (!spec.el) {
+            compose();
+        }
+    }
+    activate() {
+        if (!this.__active) {
+            super.activate();
+            const {context} = this;
+
+            console.log('activate Demo_UI');
+
+            context.on('window-resize', e_resize => {
+                console.log('window-resize', e_resize);
+
+            });
+        }
+    }
+}
+Demo_UI.css = `
+
+body {
+    margin: 0;
+}
+
+.demo-ui {
+    display: flex;
+    flex-wrap: wrap;
+    /* flex-direction: column; */
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    min-height: 100vh;
+}
+`;
+
+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 box');
+            this.dragable = true;
+            */
+
+            selectable(this);
+            console.log('selectable mixin applied to square box');
+            this.selectable = true;
+            // Maybe should turn on selectable by default?
+            //   Though mixins may be best to add functionality rather than add and enable it always.
+
+            //this.selectable = true;
+            
+            
+            
+            //console.log('this.dragable = true;');
+
+            this.on('dragend', e => {
+                this.background.color = '#44FF44';
+                const bcr = this.bcr();
+                const absolutise_position = () => {
+                    const style = this.dom.attributes.style;
+                    // but need to move it to the body....
+                    // But then when it's in absolute position the dragable mixin needs to support it and not mess up...
+
+                    style.position = 'absolute';
+                    style.left = bcr[0][0];
+                    style.top = bcr[0][1];
+                    style.transform = 'none';
+                    // Much better if these lines were not needed. Should be able to set these ta translate x and y values once the
+                    //   style transform gets set.
+                    this.ta[6] = 0; // This ta system may be a good and fast way to set translations, should not need to
+                    // use it when using a higher level api though.
+                    this.ta[7] = 0;
+                }
+                absolutise_position();
+            });
+        }
+    }
+}
+Square_Box.css = `
+.square-box {
+    box-sizing: border-box;
+    background-color: #BB3333;
+    width: 80px;
+    height: 80px;
+}
+.square-box.selected {
+    background-color: #3333BB;
+    border: 3px solid #000;
+}
+`;
+
+controls.Demo_UI = Demo_UI;
+controls.Square_Box = Square_Box;
+
+module.exports = jsgui;

package/examples/{controls/15) window, text field → box/3) twenty selectable square boxes/css flex wrap}/server.js

@@ -1,39 +1,39 @@
-const jsgui = require('./client');
-
-const {Demo_UI} = jsgui.controls;
-const Server = require('../../../server');
-
-
-
-if (require.main === module) {
-
-    const server = new Server({
-        Ctrl: Demo_UI,
-        debug: true,
-        'src_path_client_js': require.resolve('./client.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.one('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');
-            }
-        });
-    })
-
-    
-
+const jsgui = require('./client');
+
+const {Demo_UI, Square_Box} = jsgui.controls;
+const Server = require('../../../../server');
+
+if (require.main === module) {
+    
+    const server = new Server({
+        Ctrl: Demo_UI,
+        debug: true,
+
+
+        //'js_mode': 'debug',
+        'src_path_client_js': require.resolve('./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(52000, function (err, cb_start) {
+            if (err) {
+                throw err;
+            } else {
+                // Should have build it by now...
+    
+                console.log('server started');
+            }
+        });
+    })
+
+    
+
 }

package/examples/boxes/square_boxes.js

@@ -1,49 +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');
-            }
-        });
-    })
-
-    
-
+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');
+            }
+        });
+    })
+
+    
+
 }