One Property Tree (#500)

* Organize properties in one single property tree
* Update scenes to work with one property tree. Fix documentation issues.

data/web/common/base.js

@@ -0,0 +1,4 @@
+function parseJson(elementId) {
+  var jsonElement = document.getElementById(elementId);
+  return JSON.parse(jsonElement.innerHTML);
+}

data/web/common/style.css

@@ -8,25 +8,40 @@
 
 .documentation-item {
   background-color: #f4f4f4;
-  border-left: 2px solid #888;
+  border-left: 6px solid;
   padding-left: 10px;
   padding-top: 5px;
   padding-right: 5px;
   margin-bottom: 5px;
 }
 
-.documentation-item .documentation-item {
-  border-left: 2px solid #f00;
-  background-color: #fff;
-}
-
-.documentation-item .documentation-item .documentation-item {
-  border-left: 2px solid #080;
+.item-level-1 {
+  border-color: #343C47;
   background-color: #f4f4f4;
 }
 
-.documentation-item .documentation-item .documentation-item .documentation-item {
-  border-left: 2px solid #00f;
+.item-level-2 {
+  border-color: #505760;
+  background-color: #fff;
+}
+
+.item-level-3 {
+  border-color: #5E6C7C;
+  background-color: #f4f4f4;
+}
+
+.item-level-4 {
+  border-color: #537399;
+  background-color: #fff;
+}
+
+.item-level-5 {
+  border-color: #2569BA;
+  background-color: #f4f4f4;
+}
+
+.item-level-6 {
+  border-color: #208AE2;
   background-color: #fff;
 }
 
@@ -69,16 +84,15 @@
   font-size: 0.8em;
 }
 
-
 /*!
  * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)
  * Copyright 2013-2016 Start Bootstrap
  * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap/blob/gh-pages/LICENSE)
  */
 
- body {
-    overflow-x: hidden;
- }
+body {
+  overflow-x: hidden;
+}
 
 /* Toggle Styles */
 

data/web/documentation/documentation.hbs

@@ -1,5 +1,5 @@
 {{#each entries}}
-  <div class="documentation-item">
+  <div class="documentation-item item-level-{{level name}}">
     <div class="row">
       <div class="col-lg-12">
         <p>

data/web/documentation/script.js

@@ -18,6 +18,19 @@ window.onload = function () {
     return identifier;
   });
 
+  Handlebars.registerHelper('level', function(options, context) {
+    var data = context.data;
+    var level = 0;
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        ++level;
+      }
+    }
+
+    return level;
+  });
+
   documentation.sort(function (a, b) {
     return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0);
   });

data/web/factories/factory.hbs

@@ -1,5 +1,5 @@
 {{#each classes}}
-  <div class="documentation-item">
+  <div class="documentation-item item-level-{{level name}}">
     <div class="row">
       <div class="col-lg-12">
         <p>

data/web/factories/script.js

@@ -18,6 +18,19 @@ window.onload = function () {
     return identifier;
   });
 
+  Handlebars.registerHelper('level', function(options, context) {
+    var data = context.data;
+    var level = 0;
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        ++level;
+      }
+    }
+
+    return level;
+  });
+
   factories.sort(function (a, b) {
     return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0);
   });

data/web/kameleondocumentation/script.js

@@ -15,6 +15,19 @@ window.onload = function () {
     return identifier;
   });
 
+  Handlebars.registerHelper('level', function(options, context) {
+    var data = context.data;
+    var level = 0;
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        ++level;
+      }
+    }
+
+    return level;
+  });
+
   var dataElement = document.getElementById('data');
   var data = JSON.parse(dataElement.innerHTML);
 

data/web/keybindings/keybinding.hbs

@@ -1,11 +1,11 @@
-<div class="documentation-item {{#if remoteScripting}}remote-scripting{{else}}local-scripting{{/if}}">
+<div class="documentation-item item-level-{{level name}} {{#if remoteScripting}}remote-scripting{{else}}local-scripting{{/if}}">
   <div class="row">
     <div class="col-lg-12">
       <p>
         <a href="#{{urlify key}}" name="{{urlify key}}">
           <span class="documentation-key">{{key}}</span> <span class="documentation-type">{{#if remoteScripting}}Remote scripting{{else}}Local scripting{{/if}}</span>
         </a>
-        <p>{{script}}</p>
+        <p><code>{{script}}</code></p>
         <p>{{documentation}}</p>
       </p>
     </div>

data/web/keybindings/script.js

@@ -18,6 +18,19 @@ window.onload = function () {
     return identifier;
   });
 
+  Handlebars.registerHelper('level', function(options, context) {
+    var data = context.data;
+    var level = 0;
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        ++level;
+      }
+    }
+
+    return level;
+  });
+
   keybindings.sort(function (a, b) {
     return a.key < b.key ? -1 : (a.key > b.key ? 1 : 0);
   });

data/web/luascripting/script.js

@@ -18,6 +18,19 @@ window.onload = function () {
     return identifier;
   });
 
+  Handlebars.registerHelper('level', function(options, context) {
+    var data = context.data;
+    var level = 0;
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        ++level;
+      }
+    }
+
+    return level;
+  });
+
   scripting.sort(function (a, b) {
     return a.library < b.library ? -1 : (a.library > b.library ? 1 : 0);
   });

data/web/luascripting/scripting.hbs

@@ -1,5 +1,5 @@
 {{#each functions}}
-  <div class="documentation-item">
+  <div class="documentation-item item-level-{{level name}}">
     <div class="row">
       <div class="col-lg-12">
         <p>

data/web/properties/main.hbs

@@ -3,7 +3,7 @@
     <ul class="sidebar-nav">
       <li class="sidebar-brand">
         <a href="#">
-            OpenSpace Scene Properties
+            OpenSpace Properties
         </a>
       </li>
       {{#each propertyOwners}}
@@ -28,8 +28,6 @@
             {{/each}}
             {{#each propertyOwners}}
               {{> propertyOwner}}
-            {{else}}
-              <p>{{name}} has no property owners</p>
             {{/each}}
           </div>
         </div>

data/web/properties/property.hbs

@@ -1,4 +1,4 @@
-<div class="documentation-item">
+<div class="documentation-item item-level-{{level name}}">
   <div class="row">
     <div class="col-lg-12" title="{{guiName}}">
       <p>
@@ -7,7 +7,8 @@
           <span class="documentation-key">{{id}}</span>
         </a>
       </p>
-      <p class="documentation-description">{{fullyQualifiedId}}
+      <p class="documentation-description">
+        <code>{{fullyQualifiedId}}</code>
         <a class="documentation-small" onclick="copyTextToClipboard('{{fullyQualifiedId}}')">copy</a>
       </p>
       <p class="documentation-documentation">{{description}}</p>

data/web/properties/propertyowner.hbs

@@ -1,4 +1,4 @@
-<div class="documentation-item">
+<div class="documentation-item item-level-{{level name}}">
   <div class="row">
     <div class="col-lg-12">
       <p>

data/web/properties/script.js

@@ -46,6 +46,19 @@ window.onload = function () {
     return identifier;
   });
 
+  Handlebars.registerHelper('level', function(options, context) {
+    var data = context.data;
+    var level = 0;
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        ++level;
+      }
+    }
+
+    return level;
+  });
+
   propertyOwners.sort(function (a, b) {
     return a.name < b.name ? -1 : (a.name > b.name ? 1 : 0);
   });

data/web/scenelicense/script.js

@@ -18,6 +18,19 @@ window.onload = function () {
     return identifier;
   });
 
+  Handlebars.registerHelper('level', function(options, context) {
+    var data = context.data;
+    var level = 0;
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        ++level;
+      }
+    }
+
+    return level;
+  });
+
   var data = {
     sceneLicenses: sceneLicenses,
     version: version