gui rework

public/app.js

@@ -1287,15 +1287,15 @@ class App {
     infoEl.innerHTML = infoElHTML;
     document.body.appendChild(infoEl);
 
-    document.querySelector('#ruLang').addEventListener('click', function (e) {
-        _LangManager.locale = 'ru';
-        window.location.reload(true);
-    });
+    // document.querySelector('#ruLang').addEventListener('click', function (e) {
+    //     _LangManager.locale = 'ru';
+    //     window.location.reload(true);
+    // });
 
-    document.querySelector('#enLang').addEventListener('click', function (e) {
-        _LangManager.locale = 'en';
-        window.location.reload(true);
-    });
+    // document.querySelector('#enLang').addEventListener('click', function (e) {
+    //     _LangManager.locale = 'en';
+    //     window.location.reload(true);
+    // });
 
 }
 

public/lib/widgets.js

@@ -692,6 +692,28 @@ Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contribu
         }
 
 
+        connectionSettingsGUI() {
+
+            let connectionSettings = {
+                id: 'connectionSettings',
+                $type: 'div',
+                $components: [ 
+                _app.widgets.emptyDiv,
+                window._app.widgets.buttonRaised(
+                    {
+                        "label": 'Connection settings',
+                        "onclick": function (e) {
+                            e.preventDefault();
+                            window.location.pathname = '/settings';
+                        }
+                    }), _app.widgets.emptyDiv
+                ]
+            }
+
+            return connectionSettings
+            
+        }
+
         reflectorGUI() {
 
             let webrtcConnection = {

public/web/footer.js

@@ -0,0 +1,91 @@
+/*
+The MIT License (MIT)
+Copyright (c) 2014-2018 Nikolai Suslov and the Krestianstvo.org project contributors. (https://github.com/NikolaySuslov/livecodingspace/blob/master/LICENSE.md)
+*/
+
+//import page from '/lib/page.mjs';
+
+class Footer {
+    constructor() {
+        console.log("footer constructor");
+        this.language = _LangManager.language;
+
+    }
+
+    init() {
+
+        // let rootDoc = _app.indexApp.entry == 'index' ? document.querySelector('#indexPage') : document.querySelector('#app');
+        let rootDoc = document.querySelector('#app');
+
+        let el = document.createElement("div");
+        el.setAttribute("id", "footer");
+        rootDoc.appendChild(el);
+
+        document.querySelector("#footer").$cell({
+            id: 'footer',
+            $cell: true,
+            $type: "div",
+            $components: [
+
+                {
+                    $type: "div",
+                    class: "mdc-layout-grid",
+                    $components: [
+                        {
+                            $type: "div",
+                            class: "mdc-layout-grid__inner",
+                            $components: [
+                                {
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                    $components: [
+                                        _app.widgets.divider
+                                    ]
+                                },
+                                {
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                    $components: [
+
+
+                                        {
+
+                                            $type: "a",
+                                            style: "cursor:pointer; margin-right: 10px",
+                                            class: "mdc-typography  link-in-text mdc-theme--text-hint-on-background",
+                                            $text: "Krestianstvo.org",
+                                            href: "https://www.krestianstvo.org"
+                                        },
+                                        {
+
+                                            $type: "span",
+                                            class: "mdc-typography  mdc-theme--text-hint-on-background",
+                                            $text: "| 2020 "
+                                        }
+
+
+
+                                    ]
+                                }
+                               
+                                
+
+
+                            ]
+                        }
+                    ]
+                }
+
+
+
+
+
+            ]
+        })
+
+    }
+
+
+}
+
+export { Footer }

public/web/header.js

@@ -12,33 +12,119 @@ class Header {
 
     }
 
-    init(){
+    init() {
+
+        let rootDoc = _app.indexApp.entry == 'index' ? document.querySelector('#indexPage') : document.querySelector('#app');
+        //let rootDoc = document.querySelector('#app');
 
-        let rootDoc = document.querySelector('#app');
         let el = document.createElement("div");
         el.setAttribute("id", "header");
         rootDoc.prepend(el);
 
-        let headerGUI = {
-                $cell: true,
-                $type: "a",
-                class: "mdc-button mdc-button--compact mdc-card__action",
-                $text: "Home",
-                //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
-                onclick: function (e) {
-                    window.location.pathname = '/'
-                    //window.history.back();
-                }
-            
-        }
-
-
         document.querySelector("#header").$cell({
             id: 'header',
             $cell: true,
             $type: "div",
             $components: [
-                headerGUI
+
+                {
+                    $type: "div",
+                    class: "mdc-layout-grid",
+                    $components: [
+                        {
+                            $type: "div",
+                            class: "mdc-layout-grid__inner",
+                            $components: [
+                                {
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                    $components: [
+
+
+                                        {
+
+                                            $type: "a",
+                                            style: "cursor:pointer; margin-right: 10px",
+                                            class: "mdc-typography link-in-text mdc-theme--text-hint-on-background",
+                                            $text: "Home",
+                                            //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
+                                            onclick: function (e) {
+                                                window.location.pathname = '/'
+                                                //window.history.back();
+                                            }
+
+                                        },
+                                        {
+                                            $type: "a",
+                                            style: "cursor:pointer; margin-right: 10px",
+                                            class: "mdc-typography link-in-text mdc-theme--text-hint-on-background",
+                                            $text: "Connection settings",
+                                            //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
+                                            onclick: function (e) {
+                                                window.location.pathname = '/settings'
+                                                //window.history.back();
+                                            }
+
+                                        },
+                                        {
+
+                                            $type: "a",
+                                            style: "cursor:pointer; margin-right: 40px",
+                                            class: "mdc-typography link-in-text mdc-theme--text-hint-on-background",
+                                            $text: "Help",
+                                            //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
+                                            href: 'https://www.krestianstvo.org/docs/sdk3'
+
+                                        },
+                                        {
+                                            $type: "a",
+                                            id: 'ruLang',
+                                            style: "cursor:pointer; margin-right: 10px",
+                                            class: "mdc-typography link-in-text mdc-theme--text-hint-on-background",
+                                            $text: "RU",
+                                            //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
+                                            onclick: function (e) {
+                                                _LangManager.locale = 'ru';
+                                                window.location.reload(true);
+                                            }
+
+                                        },
+                                        {
+                                            $type: "a",
+                                            id: 'enLang',
+                                            style: "cursor:pointer; margin-right: 10px",
+                                            class: "mdc-typography link-in-text mdc-theme--text-hint-on-background",
+                                            $text: "EN",
+                                            //href: "/" + desc[2] + '/worlds/' + desc[0] + '/edit', ///:user/worlds/:name/edit
+                                            onclick: function (e) {
+                                                _LangManager.locale = 'en';
+                                                window.location.reload(true);
+                                            }
+
+                                        }
+
+
+                                    ]
+                                },
+                                {
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-12",
+                                    $components: [
+                                        _app.widgets.divider
+                                    ]
+                                }
+                                
+
+
+                            ]
+                        }
+                    ]
+                }
+
+
+
+
+
             ]
         })
 

public/web/index-app.js

@@ -83,12 +83,17 @@ class IndexApp {
         document.querySelector('head').innerHTML += '<link rel="stylesheet" href="/web/index-app.css">';
 
 
-        if(this.entry !== 'index'){
+        //if(this.entry !== 'index'){
             import('/web/header.js').then(res => {
-                let headerGUI = new res.Header();
-                headerGUI.init();
+                let gui = new res.Header();
+                gui.init();
               })
-        }
+       // }
+
+       import('/web/footer.js').then(res => {
+        let gui = new res.Footer();
+        gui.init();
+      })
 
 
 
@@ -222,7 +227,7 @@ class IndexApp {
                 this.$components = this._comps.concat([userGUI,  self.getLoginGUI(), _app.widgets.divider, self.getLookWorlds()]);
             },
             $init: function () {
-                this._comps = self.initUserGUI()
+                //this._comps = self.initUserGUI()
                 this._refresh();
             },
             $update: function () {
@@ -533,7 +538,7 @@ class IndexApp {
                         class: "mdc-typography--headline4",
                         $text: "Looking for Worlds made by other Users!"
                     }
-                ].concat(guiForAll, _app.widgets.p, _app.widgets.divider)
+                ].concat(guiForAll, _app.widgets.p)
             }
         }
         return lookWorlds
@@ -699,148 +704,7 @@ class IndexApp {
     }
 
 
-    initUserGUI() {
-        let self = this;
-
-        let lookWorlds = 
-        {
-            $type: "div",
-            id: "lookWorlds",
-            class: "mdc-layout-grid mdc-layout-grid--align-left",
-            _status: '',
-            $init: function () {
-                this._status = "init";
-            },
-            $update: function () {
-
-                //change for LiveCoding.space site 'app'
-                let defaultName = '';
-
-                let guiForAll = [
-                    {
-                        $type: "div",
-                        style: "margin-top: 20px;",
-                        _userName: null,
-                        _userNameField: null,
-                        $components:
-                            [
 
-                                _app.widgets.inputTextFieldOutlined({
-                                    "id": 'worldsUserName',
-                                    "label": 'Enter user name',
-                                    "value": defaultName,
-                                    "type": "text",
-                                    "init": function () {
-                                        this._userNameField = new mdc.textField.MDCTextField(this);
-                                    }
-                                }),
-                                _app.widgets.p,
-                                // {
-                                //     $type: "a",
-                                //     class: "mdc-button mdc-button--raised mdc-card__action actionButton",
-                                //     $text: 'World Protos', //self.language.t('set proxy'),//"clone",
-                                //     onclick: function (e) {
-                                //         //console.log('clone');
-                                //         let searchName = this._userNameField.value;
-                                //         self.initWorldsProtosListForUser(searchName);
-                                //     }
-                                // },
-                                // {
-                                //     $type: "a",
-                                //     class: "mdc-button mdc-button--raised mdc-card__action actionButton",
-                                //     $text: 'World States', //self.language.t('set proxy'),//"clone",
-                                //     onclick: function (e) {
-                                //         //console.log('clone');
-                                //         let searchName = this._userNameField.value;
-                                //         self.initWorldsStatesListForUser(searchName);
-                                //     }
-                                // }
-                    _app.widgets.buttonRaised(
-                        {
-                            "label": 'World Protos',
-                            "onclick": function (e) {
-                                e.preventDefault();
-                                //page("/app/worlds/protos")
-                                let searchName = this._userNameField.value;
-                                if(searchName !== "")
-                                    window.location.pathname = "/"+searchName+"/worlds/protos"
-                                //_app.indexApp.getAppDetailsFromDefaultDB('protos');
-
-                            }
-                        }), 
-                        _app.widgets.space,
-                    _app.widgets.buttonRaised(
-                        {
-                            "label": 'World States',
-                            "onclick": function (e) {
-                                e.preventDefault();
-                                //page("/app/worlds/states")
-                                let searchName = this._userNameField.value;
-                                if(searchName !== "")
-                                    window.location.pathname = "/"+searchName+"/worlds/states"
-                                //_app.indexApp.getAppDetailsFromDefaultDB('states');
-
-                            }
-                        })
-                               
-                            ]
-                    },
-                    // window._app.widgets.buttonStroked(
-                    //     {
-                    //         "label": 'Default World Protos',
-                    //         "onclick": function (e) {
-                    //             e.preventDefault();
-                    //             //page("/app/worlds/protos")
-                    //             window.location.pathname = "/app/worlds/protos"
-                    //             //_app.indexApp.getAppDetailsFromDefaultDB('protos');
-
-                    //         }
-                    //     }),
-                    // window._app.widgets.buttonStroked(
-                    //     {
-                    //         "label": 'Default World States',
-                    //         "onclick": function (e) {
-                    //             e.preventDefault();
-                    //             //page("/app/worlds/states")
-                    //             window.location.pathname = "/app/worlds/states"
-                    //             //_app.indexApp.getAppDetailsFromDefaultDB('states');
-
-                    //         }
-                    //     })
-                ];
-
-                this.$components = [
-                    {
-                        $type: "h1",
-                        class: "mdc-typography--headline4",
-                        $text: "Looking for Worlds made by other Users!"
-                    }
-                ].concat(guiForAll, _app.widgets.p, _app.widgets.divider)
-            }
-        }
-
-        let connectionSettings = {
-        id: 'connectionSettings',
-        $type: 'div',
-        class: "mdc-layout-grid mdc-layout-grid--align-left",
-        $components: [ 
-        _app.widgets.emptyDiv,
-        window._app.widgets.buttonRaised(
-            {
-                "label": 'Connection settings',
-                "onclick": function (e) {
-                    e.preventDefault();
-                    window.location.pathname = '/settings';
-                }
-            }), _app.widgets.emptyDiv
-        ]
-    }
-
-
-
-        return [connectionSettings, _app.widgets.divider]
-
-    }
 
     refresh() {
         // socket.emit('getWebAppUpdate', "");

public/web/locale/en/index.html

@@ -5,16 +5,6 @@
 
 <div id="headerGUI" class="mdc-layout-grid mdc-layout-grid--align-left">
   <div class="mdc-layout-grid__inner">
-    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
-      <span class="mdc-typography--subtitle1 mdc-theme--text-secondary-on-background mdc-typography">
-        <a id="ruLang" class="mdc-typography link-in-text mdc-theme--text-hint-on-background" style="cursor:pointer">RU</a>
-        <!--<strong>LiveCoding</strong>.space -->
-      </span>
-      <span class="mdc-typography--subtitle1 mdc-theme--text-secondary-on-background mdc-typography">
-        <a id="enLang" class="mdc-typography link-in-text mdc-theme--text-hint-on-background" style="cursor:pointer">EN</a>
-        <!--<strong>LiveCoding</strong>.space -->
-      </span>
-    </div>
     <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
       <div id="titleText">
         <h1 class="mdc-typography--headline3 mdc-theme--text-secondary-on-background mdc-typography"><a class="mdc-typography link-in-text"

public/web/locale/ru/index.html

@@ -5,16 +5,6 @@
 
 <div id="headerGUI" class="mdc-layout-grid mdc-layout-grid--align-left">
   <div class="mdc-layout-grid__inner">
-    <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
-      <span class="mdc-typography--subtitle1 mdc-theme--text-secondary-on-background mdc-typography">
-        <a id="ruLang" class="mdc-typography link-in-text mdc-theme--text-hint-on-background" style="cursor:pointer">RU</a>
-        <!--<strong>LiveCoding</strong>.space -->
-      </span>
-      <span class="mdc-typography--subtitle1 mdc-theme--text-secondary-on-background mdc-typography">
-        <a id="enLang" class="mdc-typography link-in-text mdc-theme--text-hint-on-background" style="cursor:pointer">EN</a>
-        <!--<strong>LiveCoding</strong>.space -->
-      </span>
-    </div>
     <div class="mdc-layout-grid__cell mdc-layout-grid__cell--span-12">
       <div id="titleText">
         <h1 class="mdc-typography--headline3 mdc-theme--text-secondary-on-background mdc-typography"><a class="mdc-typography link-in-text"

public/web/world-app.js

@@ -18,13 +18,14 @@ class WorldApp {
         //this.worlds = {};
         this.language = _LangManager.language;
 
+        let rootDoc = document.querySelector('#app');
         let el = document.createElement("div");
         el.setAttribute("id", "aboutWorld");
-        document.body.appendChild(el);
+        rootDoc.appendChild(el);
 
         let el2 = document.createElement("div");
         el2.setAttribute("id", "worldStates");
-        document.body.appendChild(el2);
+        rootDoc.appendChild(el2);
 
         document.querySelector("#worldStates").$cell({
             id: "worldStates",