repo: janusweb
action: commit
revision: 
path_from: 
revision_from: 0b1af96bb8ed60c0105f19527cffa662a84d097c:
path_to: 
revision_to: 

commit 0b1af96bb8ed60c0105f19527cffa662a84d097c
Author: James Baicoianu 
Date:   Wed May 9 12:34:49 2018 -0700

    Implemented settings UI

diff --git a/media/assets/webui/apps/settings/panels.html b/media/assets/webui/apps/settings/panels.html
new file mode 100644
index 0000000000000000000000000000000000000000..f0af6feff42bb7ae417091024eefcf543e87542c
--- /dev/null
+++ b/media/assets/webui/apps/settings/panels.html
@@ -0,0 +1,8 @@
+    
+    
+    
+    
+    
+    
+    
+    
diff --git a/media/assets/webui/apps/settings/settings-ui-app.html b/media/assets/webui/apps/settings/settings-ui-app.html
new file mode 100644
index 0000000000000000000000000000000000000000..850167c9807d78d8d421ad57a0d60469fa6d1d6a
--- /dev/null
+++ b/media/assets/webui/apps/settings/settings-ui-app.html
@@ -0,0 +1,21 @@
+{?app.toplevel}
+
+  
+  
+    Remove
+  
+
+{:else}
+
{app.name}
+{/app.toplevel}
+
+
+{#app.applist}
+  
+{/app.applist}
+
+
+{#app.components}
+  
+{/app.components}
+
diff --git a/media/assets/webui/apps/settings/settings-ui-component.html b/media/assets/webui/apps/settings/settings-ui-component.html
new file mode 100644
index 0000000000000000000000000000000000000000..82cd4ffcf7ba5a92c2204ce04bd0c751ef603657
--- /dev/null
+++ b/media/assets/webui/apps/settings/settings-ui-component.html
@@ -0,0 +1,4 @@
+
<{component}>
+

+  <{component} preview="true">
+
diff --git a/media/assets/webui/apps/settings/settings-ui.html b/media/assets/webui/apps/settings/settings-ui.html
new file mode 100644
index 0000000000000000000000000000000000000000..706755e988a32c3123681855e6ab58f146500043
--- /dev/null
+++ b/media/assets/webui/apps/settings/settings-ui.html
@@ -0,0 +1,18 @@
+    

+      
+        default
+        Create New...
+      
+    
+    

+      
Installed Apps
+      
+        {#apps}
+          
+            
+          
+        {/apps}
+      
+
+      Add App
+    
diff --git a/media/assets/webui/apps/settings/settings.css b/media/assets/webui/apps/settings/settings.css
new file mode 100644
index 0000000000000000000000000000000000000000..195f9d8a329e2b418b3f42857f6225d94bc96275
--- /dev/null
+++ b/media/assets/webui/apps/settings/settings.css
@@ -0,0 +1,133 @@
+janus-ui-settings {
+  width: 100%;
+  min-height: 20em;
+  display: flex;
+}
+janus-ui-settings>ui-tabs{
+  flex: 1 1;
+}
+janus-ui-settings-ui ui-list.apps {
+  margin-left: 1em;
+}
+
+janus-ui-settings-button {
+  border: none;
+  border-radius: .5em;
+  padding: .25em .5em;
+  color: white;
+  cursor: pointer;
+  text-align: center;
+  -ms-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+
+  background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
+  background-color: transparent;
+  display: inline-block;
+}
+janus-ui-settings-button[hover] {
+  background-image: linear-gradient(#323232, #404142 40%, #393b3d);
+}
+janus-ui-settings-button:active {
+  background-image: linear-gradient(#020202, #101112 40%, #191b1d);
+}
+janus-ui-settings-button[disabled] {
+  color: #999;
+  background-image: linear-gradient(#484e55, #3a3f44 60%, #313539);
+  cursor: not-allowed;
+}
+
+janus-ui-settings-ui-component {
+  flex: 1 1;
+  flex-direction: column;
+  cursor: move;
+  cursor: -webkit-grab;
+  cursor: grab;
+  overflow: hidden;
+  position: relative;
+}
+janus-ui-settings-ui-component h3 {
+  font-size: 1em;
+  flex 0 0;
+  padding-bottom: .2em;
+  border-bottom: 1px solid black;
+  margin-bottom: .5em;
+  white-space: nowrap;
+}
+janus-ui-settings-ui-component .preview {
+  display: block;
+  filter: brightness(60%);
+  transition: filter 150ms linear;
+  pointer-events: none;
+  position: relative;
+  flex: 1 1;
+  height: 4em;
+}
+janus-ui-settings-ui-component:hover .preview {
+  filter: brightness(90%)
+}
+
+ui-grid.components {
+  font-size: .7em;
+  display: relative;
+  grid-template-columns: repeat(auto-fill, minmax(12em, 1fr))
+}
+ui-grid.components>ui-item {
+  display: flex;
+}
+ui-grid.components>ui-item:hover janus-ui-settings-ui-component {
+  position: relative;
+  overflow: visible;
+  /* setting a transform forces the renderer to treat this element as a separate layer, and avoids graphical bugs from overflowing elements */
+  transform: rotate(0deg);
+  z-index: 100;
+}
+
+/*
+janus-ui-main[editing] {
+  display: block;
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 300;
+}
+*/
+janus-ui-main[editing] ui-panel,
+janus-ui-main[editing] ui-collapsiblepanel {
+  outline: 1px solid red;
+  padding: .5em;
+}
+janus-ui-main[editing] ui-collapsiblepanel[left],
+janus-ui-main[editing] ui-collapsiblepanel[right] {
+  min-width: 40px;
+}
+janus-ui-main[editing] ui-collapsiblepanel[top],
+janus-ui-main[editing] ui-collapsiblepanel[bottom] {
+  min-height: 40px;
+}
+janus-ui-main[editing] ui-panel.candrop {
+  background: rgba(0,255,0,.1);
+}
+janus-ui-applayout {
+  display: block;
+  position: absolute;
+  border: 1px solid blue;
+  background: rgba(0, 0, 255, .2);
+  pointer-events: none;
+  box-shadow: 0 0 5px white;
+  z-index: 1000;
+}
+janus-ui-applayout>ui-label {
+  position: absolute;
+  top: -1.6em;
+  left: 0;
+  background: rgba(0,0,255,.6);
+  border: 1px solid blue;
+  border-bottom: 0;
+}
+.janus-settings>ui-window-content {
+  width: 60em;
+  height: 50em;
+}
diff --git a/media/assets/webui/apps/settings/settings.html b/media/assets/webui/apps/settings/settings.html
new file mode 100644
index 0000000000000000000000000000000000000000..6d6e3624ba0b831e7b7d898b4c4ad62d8dc9f6a8
--- /dev/null
+++ b/media/assets/webui/apps/settings/settings.html
@@ -0,0 +1,97 @@
+
+  
+    
+  
+  
+    
+      
+      
+    
+    
+  
+  
+    
+      
+        
+          
+          
+        
+      
+      
+        Hello
+      
+      
+        What
+      
+      
+        
+          
+          
+        
+      
+      
+        
+          
+        
+      
+      
+        
+          
+          
+            VR
+            Desktop
+          
+        
+      
+      
+        
+          
+        
+      
+    
+      
+        
+      
+  
+  
+    
+      
+        None
+        Low (512)
+        Medium (1024)
+        High (2048)
+        Very High (4096)
+      
+      
+        16x
+        8x
+        4x
+        2x
+        1x
+        Off
+      
+      
+        Off
+        Low
+        Medium
+        High
+        Very High
+      
+      
+        None
+        FXAA
+        MSAA
+      
+      
+      
+    
+  
+  
+    
+      
+      
+      
+      
+    
+  
+
diff --git a/media/assets/webui/apps/settings/settings.js b/media/assets/webui/apps/settings/settings.js
new file mode 100644
index 0000000000000000000000000000000000000000..611839ad8e864e17326a0c75cebbf9d0793c9a9f
--- /dev/null
+++ b/media/assets/webui/apps/settings/settings.js
@@ -0,0 +1,134 @@
+elation.elements.define('janus.ui.settings', class extends elation.elements.base {
+  create() {
+    this.reload();
+  }
+  reload() {
+    this.innerHTML = elation.template.get('janus.ui.settings');
+  }
+});
+elation.elements.define('janus.ui.settings.button', class extends elation.elements.ui.button {
+  create() {
+    this.label = 'Settings';
+    super.create();
+    this.onclick = () => {
+      if (!this.window) {
+        this.window = janus.ui.openWindow('janus-ui-settings', {
+          center: 1,
+          title: 'Settings',
+          class: 'janus-settings'
+        });
+        this.window.scrollable = true;
+      } else {
+        this.window.show();
+      }
+    };
+  }
+});
+elation.elements.define('janus.ui.settings.ui', class extends elation.elements.base {
+  create() {
+    janus.ui.addEventListener('appload', (ev) => { this.reload() });
+    this.reload();
+  }
+  reload() {
+    var tplvars = {
+      apps: []
+    };
+    var apps = janus.ui.apps;
+    for (var k in apps)  {
+      tplvars.apps.push({
+        name: k,
+        app: apps[k]
+      });
+    };
+    this.innerHTML = elation.template.get('janus.ui.settings.ui', tplvars);
+  }
+});
+elation.elements.define('janus.ui.settings.ui.app', class extends elation.elements.base {
+  init() {
+    super.init();
+    this.defineAttributes({
+      name: { type: 'string' },
+      app: { type: 'string' }
+    });
+  }
+  create() {
+    var app = this.app;
+    if (typeof app == 'string') {
+      app = document.querySelector(app);
+      if (app) {
+        this.app = app;
+      }
+    }
+    if (app instanceof elation.elements.janus.ui.app) {
+    }
+    this.reload();
+  }
+  reload() {
+console.log('render app', this.name, this);
+    this.innerHTML = elation.template.get('janus.ui.settings.ui.app', this);
+  }
+});
+elation.elements.define('janus.ui.settings.ui.component', class extends elation.elements.base {
+  init() {
+    super.init();
+    this.defineAttributes({
+      name: { type: 'string' },
+      component: { type: 'string' }
+    });
+  }
+  create() {
+    this.innerHTML = elation.template.get('janus.ui.settings.ui.component', this);
+    this.addEventListener('dragstart', (ev) => this.handleDragStart(ev));
+    this.addEventListener('dragend', (ev) => this.handleDragEnd(ev));
+  }
+  handleDragStart(ev) {
+    janus.ui.editing = true;
+    ev.dataTransfer.setData('text/html', '<' + this.component + '>');
+    ev.dataTransfer.setData('x-janus/x-component', this.component);
+  }
+  handleDragEnd(ev) {
+    janus.ui.editing = false;
+  }
+});
+elation.elements.define('janus.ui.settings.panels', class extends elation.elements.base {
+  create() {
+    this.panels = {};
+    this.layouts = {
+      'default': {
+        'topleft': ['janus-ui-navigation'],
+        'right': ['janus-ui-inventory'],
+        'bottom': ['janus-comms-userlist'],
+        'bottomright': ['janus-ui-buttons'],
+      }
+    };
+    let customlayouts = player.getSetting('ui.layouts');
+    if (customlayouts) {
+console.log('custom layouts!', customlayouts);
+      for (var k in customlayouts) {
+        this.layouts[k] = customlayouts[k];
+      }
+    }
+
+    let layoutname = player.getSetting('ui.activelayout', 'default');
+    this.layout = layoutname;
+    let layout = this.layouts[layoutname] || this.layouts['default'];
+console.log('layoutname:', layoutname, layout);
+
+    let elements = elation.elements.fromTemplate('janus.ui.settings.panels', this);
+
+    ['topleft', 'top', 'topright', 'left', 'right', 'bottomleft', 'bottom', 'bottomright'].forEach(k => {
+      let panel = this.panels[k] = elements[k];
+      panel.editable = true;
+      let children = layout[k];
+      if (children && children.length > 0) {
+        let content = elation.elements.create('div');
+        for (let i = 0; i < children.length; i++) {
+          elation.elements.create(children[i], {
+            append: content
+          });
+        }
+        panel.setcontent(content);
+      }
+    });
+  }
+});
diff --git a/media/assets/webui/apps/settings/settings.json b/media/assets/webui/apps/settings/settings.json

--- a/media/assets/webui/apps/settings/settings.json
+++ b/media/assets/webui/apps/settings/settings.json
@@ -1 +1,18 @@
-{}
+{
+  "templates": {
+    "janus.ui.settings": "./settings.html",
+    "janus.ui.settings.ui": "./settings-ui.html",
+    "janus.ui.settings.ui.app": "./settings-ui-app.html",
+    "janus.ui.settings.ui.component": "./settings-ui-component.html",
+    "janus.ui.settings.panels": "./panels.html"
+  },
+  "css": [
+    "./settings.css"
+  ],
+  "scripts": [
+    "./settings.js"
+  ],
+  "components": [
+    "janus-ui-settings-button"
+  ]
+}

-----END OF PAGE-----