jsgui3-server 0.0.121 → 0.0.123

package/examples/boxes/square_boxes_client.js

@@ -1,136 +1,132 @@
-const jsgui = require('jsgui3-client'); // and will replace this with jsgui-client, I presume.
-const {controls, Control, mixins} = jsgui;
-const {dragable} = mixins;
-
-
-const Active_HTML_Document = require('../../controls/Active_HTML_Document');
-
-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.
-
-// 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;
-        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.background.color = '#6655CC';
-
-
-            //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...
-
+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.background.color = '#6655CC';
+
+
+            //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/client-side-popup-menu-button.html

@@ -1,94 +1,94 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <title>Client-side Popup Menu Button</title>
-        <link rel="stylesheet" type="text/css" href="css/basic.css">
-    </head>
-    <body>
-        <div id="menu_here"></div>
-    </body>
-    
-    <script src="js/app-bundle-active.js"></script>
-    <script language="javascript">
-
-        var el_popup_menu = document.getElementById('menu_here');
-
-        // Each item could be defined as an array.
-
-        var arr_items_0 = [
-            ["Load and Preallocate", (e) => {
-                console.log("Load and Preallocate", e);
-                console.trace();
-            }],
-            ["Smart Allocation", (e) => {
-                console.log("Smart Allocation", e);
-            }],
-            ["Add Travel Time", (e) => {
-                console.log("Add Travel Time", e);
-            }],
-            ["Print Rosters", (e) => {
-                console.log("Print Rosters", e);
-            }],
-            ["Email Rosters", (e) => {
-                console.log("Email Rosters", e);
-            }]
-        ];
-
-        var arr_items = [
-            "Load and Preallocate",
-            "Smart Allocation",
-            "Add Travel Time",
-            "Print Rosters",
-            "Email Rosters"
-        ];
-
-        // Or, better to activate the document, then render the popup_menu_button?
-        //  As it is, with the creation of the control before document activation, it has no element to attach its DOM events to as they are defined.
-        //  For the moment, getting it to attach its events to the DOM at the right time seems like the best approach.
-
-
-
-        // Better to activate / setup an individual component with jsgui rather than activate the whole document.
-        var popup_menu_button = new jsgui.Popup_Menu_Button({
-            'context': page_context,
-            'el': el_popup_menu,
-            'label': 'Actions',
-            'items': arr_items_0
-        });
-        popup_menu_button.active();
-        console.log('popup_menu_button', popup_menu_button);
-
-        popup_menu_button.all_html_render((err, html) => {
-            if (err) {
-                throw err;
-            } else {
-                //console.log('html', html);
-                el_popup_menu.outerHTML = html;
-                //console.log('pre activate');
-                //popup_menu_button.activate(el_popup_menu);
-                
-                page_context.update_Controls('item', jsgui.Item);
-                page_context.update_Controls('combo_box', jsgui.Combo_Box);
-                page_context.update_Controls('popup_menu_button', jsgui.Popup_Menu_Button);
-
-                
-
-                // this._bound_general_handler;
-
-                // Activation should attach the DOM events that are not attached?
-
-                jsgui.activate(page_context);
-            }
-        });
-        
-        /*
-        ["Load and Preallocate", "sch_LoadandAllocate.a5w", [300, 200]],
-        ["Smart Allocation", "sch_Autofill.a5w", [300, 200]],
-        ["Add Travel Time", "sch_addTravel.a5w", [300, 400]],
-        ["Print Rosters", "sch_PrintRosters.a5w", [300, 400]],
-        ["Email Rosters", "sch_EmailRosters.a5w", [300, 400]]
-        */
-
-
-    </script>
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>Client-side Popup Menu Button</title>
+        <link rel="stylesheet" type="text/css" href="css/basic.css">
+    </head>
+    <body>
+        <div id="menu_here"></div>
+    </body>
+    
+    <script src="js/app-bundle-active.js"></script>
+    <script language="javascript">
+
+        var el_popup_menu = document.getElementById('menu_here');
+
+        // Each item could be defined as an array.
+
+        var arr_items_0 = [
+            ["Load and Preallocate", (e) => {
+                console.log("Load and Preallocate", e);
+                console.trace();
+            }],
+            ["Smart Allocation", (e) => {
+                console.log("Smart Allocation", e);
+            }],
+            ["Add Travel Time", (e) => {
+                console.log("Add Travel Time", e);
+            }],
+            ["Print Rosters", (e) => {
+                console.log("Print Rosters", e);
+            }],
+            ["Email Rosters", (e) => {
+                console.log("Email Rosters", e);
+            }]
+        ];
+
+        var arr_items = [
+            "Load and Preallocate",
+            "Smart Allocation",
+            "Add Travel Time",
+            "Print Rosters",
+            "Email Rosters"
+        ];
+
+        // Or, better to activate the document, then render the popup_menu_button?
+        //  As it is, with the creation of the control before document activation, it has no element to attach its DOM events to as they are defined.
+        //  For the moment, getting it to attach its events to the DOM at the right time seems like the best approach.
+
+
+
+        // Better to activate / setup an individual component with jsgui rather than activate the whole document.
+        var popup_menu_button = new jsgui.Popup_Menu_Button({
+            'context': page_context,
+            'el': el_popup_menu,
+            'label': 'Actions',
+            'items': arr_items_0
+        });
+        popup_menu_button.active();
+        console.log('popup_menu_button', popup_menu_button);
+
+        popup_menu_button.all_html_render((err, html) => {
+            if (err) {
+                throw err;
+            } else {
+                //console.log('html', html);
+                el_popup_menu.outerHTML = html;
+                //console.log('pre activate');
+                //popup_menu_button.activate(el_popup_menu);
+                
+                page_context.update_Controls('item', jsgui.Item);
+                page_context.update_Controls('combo_box', jsgui.Combo_Box);
+                page_context.update_Controls('popup_menu_button', jsgui.Popup_Menu_Button);
+
+                
+
+                // this._bound_general_handler;
+
+                // Activation should attach the DOM events that are not attached?
+
+                jsgui.activate(page_context);
+            }
+        });
+        
+        /*
+        ["Load and Preallocate", "sch_LoadandAllocate.a5w", [300, 200]],
+        ["Smart Allocation", "sch_Autofill.a5w", [300, 200]],
+        ["Add Travel Time", "sch_addTravel.a5w", [300, 400]],
+        ["Print Rosters", "sch_PrintRosters.a5w", [300, 400]],
+        ["Email Rosters", "sch_EmailRosters.a5w", [300, 400]]
+        */
+
+
+    </script>
 </html>

package/examples/color_palette.js

@@ -1,52 +1,52 @@
-const jsgui = require('./color_palette_client');
-
-const {Demo_UI} = 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?
-
-// Autoresizing within the color palette not working properly.
-//  Should do more work on a grid that deals with the autoresizing properly.
-
-
-
-
-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('./color_palette_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('./color_palette_client');
+
+const {Demo_UI} = 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?
+
+// Autoresizing within the color palette not working properly.
+//  Should do more work on a grid that deals with the autoresizing properly.
+
+
+
+
+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('./color_palette_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');
+            }
+        });
+    })
+
+    
+
 }