84 lines
2.4 KiB
HTML
84 lines
2.4 KiB
HTML
|
<!--
|
||
|
|
@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>
|