Initial commit

src/colors-view.html

@@ -0,0 +1,83 @@
+<!--
+@license
+Copyright (c) 2016 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+
+<link rel="import" href="../bower_components/polymer/polymer-element.html">
+<link rel="import" href="shared-styles.html">
+
+<dom-module id="colors-view">
+  <template>
+    <style include="shared-styles">
+      :host {
+        display: block;
+
+        padding: 10px;
+      }
+    </style>
+
+    <div class="card">
+      <div class="circle">2</div>
+      <h1>Color Definition</h1>
+      <p>Edit the color definitions here:</p>
+      <p></p>
+      <div id="editor_holder" name="editor_holder"></div>
+    </div>
+  </template>
+
+  <script src="js/jsoneditor.js"></script>
+  <script>
+      var schema = {
+	      "$schema": "http://json-schema.org/draft-06/schema#",
+	      "description": "DLite color definition",
+	      "type": "array",
+              "format": "table",
+              "uniqueItems": true,
+              "disable_collapse": true,
+	      "items": {
+	        "type": "object",
+	        "description": "Color definition",
+	        "properties": {
+	          "name": {
+		    "type": "string",
+		    "description": "Color name used as identifier"
+	          },
+	          "color": {
+		    "type": "string",
+                    "format": "color",
+		    "description": "Color definition"
+	          }
+	        }
+	      }
+	};
+    class MyView2 extends Polymer.Element {
+      static get is() { return 'colors-view'; }
+      ready() {
+        super.ready();
+    
+        var element = this.$.editor_holder;
+        var editor;
+
+        if (!element) {
+          alert("Could not find editor_holder element!");
+        } else {
+          editor = new JSONEditor(element, {
+                           schema: schema,
+                           iconlib: "fontawesome4",
+                           disable_properties: true,
+                           no_additional_properties: false,
+                           disable_edit_json: true
+                         });
+        }
+      }
+  }
+
+    window.customElements.define(MyView2.is, MyView2);
+
+  </script>
+</dom-module>