improve look and feel of scenegraph node property documentation

data/web/common/style.css

@@ -49,6 +49,10 @@
   font-size: 1.2em;
 }
 
+.documentation-small {
+  font-size: 0.8em;
+}
+
 
 /*!
  * Start Bootstrap - Simple Sidebar (http://startbootstrap.com/)

data/web/properties/main.hbs

@@ -0,0 +1,41 @@
+<div id="wrapper">
+  <div id="sidebar-wrapper">
+    <ul class="sidebar-nav">
+      <li class="sidebar-brand">
+        <a href="#">
+            OpenSpace Scene Properties
+        </a>
+      </li>
+      {{#each propertyOwners}}
+        <li>
+          <a href="#{{name}}">{{name}}</a>
+        </li>
+      {{/each}}
+    </ul>
+  </div>
+
+  <div id="page-content-wrapper">
+    <div class="container-fluid documentation-container">
+      <h1>OpenSpace Scene Properties</h1>
+      <p>Version: {{version.[0]}}.{{version.[1]}}.{{version.[2]}}</p>
+      <p>Scene name: {{sceneFilename}}</p>
+      <p>Generated: {{generationTime}}</p>
+
+    	{{#each propertyOwners}}
+        <div class="row">
+          <div class="col-lg-12">
+            <h2><a class="documentation-name" href="#{{name}}" name="{{name}}">{{name}}</a></h2>
+            {{#each properties}}
+              {{> property}}
+            {{/each}}
+            {{#each propertyOwners}}
+              {{> propertyOwner}}
+            {{else}}
+              <p>{{name}} has no property owners</p>
+            {{/each}}
+          </div>
+        </div>
+      {{/each}}
+    </div>
+  </div>
+</div>

data/web/properties/property.hbs

@@ -0,0 +1,15 @@
+<div class="documentation-item">
+  <div class="row">
+    <div class="col-lg-12" title="{{guiName}}">
+      <p>
+        <a href="#{{fullyQualifiedId}}" name="{{fullyQualifiedId}}">
+          <span class="documentation-type">{{type}}</span>
+          <span class="documentation-key">{{id}}</span>
+        </a>
+      </p>
+      <p class="documentation-description">{{fullyQualifiedId}}
+        <a class="documentation-small" onclick="copyTextToClipboard('{{fullyQualifiedId}}')">copy</a>
+      </p>
+    </div>
+  </div>
+</div>

data/web/properties/propertyowner.hbs

@@ -0,0 +1,18 @@
+<div class="documentation-item">
+  <div class="row">
+    <div class="col-lg-12">
+      <p>
+        <a href="#{{urlify name}}" name="{{urlify name}}">
+          <span class="documentation-key">{{name}}</span>
+        </a>
+      </p>
+      {{#each properties}}
+        {{> property}}
+      {{/each}}
+      {{#each propertyOwners}}
+        {{> propertyOwner}}
+      {{/each}}
+    </div>
+  </div>
+</div>
+

data/web/properties/script.js

@@ -0,0 +1,58 @@
+function copyTextToClipboard(text) {
+  var textArea = document.createElement("textarea");
+  textArea.style.position = 'fixed';
+  textArea.style.top = 0;
+  textArea.style.left = 0;
+
+  textArea.style.width = '2em';
+  textArea.style.height = '2em';
+
+  textArea.style.padding = 0;
+
+  textArea.style.border = 'none';
+  textArea.style.outline = 'none';
+  textArea.style.boxShadow = 'none';
+
+  textArea.style.background = 'transparent';
+  textArea.value = text;
+
+  document.body.appendChild(textArea);
+
+  textArea.select();
+  document.execCommand('copy');
+
+  document.body.removeChild(textArea);
+}
+
+window.onload = function () {
+  var mainTemplateElement = document.getElementById('mainTemplate');
+  var mainTemplate = Handlebars.compile(mainTemplateElement.innerHTML);
+
+  var propertyOwnerTemplateElement = document.getElementById('propertyOwnerTemplate');
+  Handlebars.registerPartial('propertyOwner', propertyOwnerTemplateElement.innerHTML);
+
+  var propertyTemplateElement = document.getElementById('propertyTemplate');
+  Handlebars.registerPartial('property', propertyTemplateElement.innerHTML);
+
+  Handlebars.registerHelper('urlify', function(options, context) {  
+    var data = context.data;
+    var identifier = options.replace(" ", "-").toLowerCase();
+
+    while (data = data._parent) {
+      if (data.key !== undefined) {
+        identifier = data.key + "-" + identifier;
+      }
+    }
+    return identifier;
+  });
+
+  var data = {
+    propertyOwners: propertyOwners,
+    version: version,
+    sceneFilename: sceneFilename,
+    generationTime: generationTime
+  }
+
+  var contents = mainTemplate(data);
+  document.body.innerHTML = contents;
+}