From fae357a99519896fdcfb57f3768c13944e481b19 Mon Sep 17 00:00:00 2001 From: bahrus Date: Sun, 10 Sep 2017 10:45:59 -0400 Subject: [PATCH] json editor --- README.md | 10 ++++++++ xtal-json-editor.html | 7 ++---- xtal-json-editor.js | 48 ++++++++++++++++++++++++++++++-------- xtal-json-editor.ts | 54 ++++++++++++++++++++++++++++++++----------- 4 files changed, 90 insertions(+), 29 deletions(-) diff --git a/README.md b/README.md index b5d3f50..7a482bc 100644 --- a/README.md +++ b/README.md @@ -36,6 +36,16 @@ Polymer web wrapper around josdejong's awesome, most excellent JSON Editor a ``` +Important note regarding stylesheet dependency. + +This component includes the default css file for the json editor: jsoneditor.min.css. You can override this default, for your own look and feel by setting: + +```html + +``` + +This path will be relative to the hosting page url, not the component. We are basing the default path based on document.currentScript. But IE11 doesn't support that, so it is guessing that the path starts from /bower_components. If you are seeing an incorrect url path in your particular environment, please try setting the cssPath directly as shown above. + ## Install the Polymer-CLI First, make sure you have the [Polymer CLI](https://www.npmjs.com/package/polymer-cli) installed. Then run `polymer serve` to serve your element locally. diff --git a/xtal-json-editor.html b/xtal-json-editor.html index 94b4bac..671faf7 100644 --- a/xtal-json-editor.html +++ b/xtal-json-editor.html @@ -1,13 +1,10 @@ - diff --git a/xtal-json-editor.js b/xtal-json-editor.js index 0c0c764..f4ac448 100644 --- a/xtal-json-editor.js +++ b/xtal-json-editor.js @@ -1,13 +1,11 @@ /// //declare type JSONEditor = jsoneditor.JSONEditor; (function () { + let cs; function initXtalJsonEditor() { - console.log('in initXtalJsonEditor'); if (customElements.get('xtal-json-editor')) { - console.log('already defined'); return; } - console.log('lets define xtal-json-editor'); /** * Polymer based web component wrapper around the awesome, most excellent JSON Editor api, which can be found at https://github.com/josdejong/jsoneditor * @@ -17,12 +15,46 @@ */ class XtalJsonEditor extends Polymer.Element { constructor() { - super(); - console.log('in construcrtor'); + super(...arguments); + this.cs = cs; + } + //from https://stackoverflow.com/questions/14780350/convert-relative-path-to-absolute-using-javascript + absolute(base, relative) { + var stack = base.split("/"), parts = relative.split("/"); + stack.pop(); // remove current file name (or empty string) + // (omit if "base" is the current folder without trailing slash) + for (var i = 0; i < parts.length; i++) { + if (parts[i] == ".") + continue; + if (parts[i] == "..") + stack.pop(); + else + stack.push(parts[i]); + } + return stack.join("/"); + } + connectedCallback() { + super.connectedCallback(); + if (!this.cssPath) { + //const cs = document.currentScript; + if (cs) { + this.cssPath = this.absolute(cs.baseURI, 'jsoneditor.min.css'); + } + else { + this.cssPath = '/bower_components/xtal-json-editor/jsoneditor.min.css'; + } + } + console.log(this.cssPath); } static get is() { return 'xtal-json-editor'; } static get properties() { return { + /** + * Path to get the styling + */ + cssPath: { + type: String + }, /** * The expression that points to an object to edit. */ @@ -73,7 +105,6 @@ return this._jsonEditor; } onPropsChange(newVal) { - console.log('onPropsChange'); if (!this.watch) return; if (this.waitForOptions && !this.options) @@ -92,23 +123,20 @@ } //} this.$.xcontainer.innerHTML = ''; - console.log('i am here'); this._jsonEditor = new JSONEditor(this.$.xcontainer, this.options); this._jsonEditor.set(this.watch); } } - console.log('adding XtalJsonEditor to custom elements'); customElements.define(XtalJsonEditor.is, XtalJsonEditor); } function WaitForPolymer() { + cs = document.currentScript; if ((typeof Polymer !== 'function') || (typeof Polymer.Element !== 'function')) { setTimeout(WaitForPolymer, 100); return; } - console.log('call initXtalJsonEditor'); initXtalJsonEditor(); } - console.log('call WaitForPolymer'); WaitForPolymer(); })(); //# sourceMappingURL=xtal-json-editor.js.map \ No newline at end of file diff --git a/xtal-json-editor.ts b/xtal-json-editor.ts index 767da33..c821a46 100644 --- a/xtal-json-editor.ts +++ b/xtal-json-editor.ts @@ -2,7 +2,8 @@ //declare type JSONEditor = jsoneditor.JSONEditor; export interface IXtalJsonEditorProperties{ - watch: object | polymer.PropObjectType + cssPath: string | polymer.PropObjectType, + watch: object | polymer.PropObjectType, options: jsoneditor.JSONEditorOptions | polymer.PropObjectType, waitForOptions: boolean | polymer.PropObjectType, editedResult: object | polymer.PropObjectType, @@ -10,14 +11,12 @@ export interface IXtalJsonEditorProperties{ height: string | polymer.PropObjectType, width: string | polymer.PropObjectType } -(function () { +(function () { + let cs; function initXtalJsonEditor() { - console.log('in initXtalJsonEditor'); if (customElements.get('xtal-json-editor')){ - console.log('already defined'); return; } - console.log('lets define xtal-json-editor'); /** * Polymer based web component wrapper around the awesome, most excellent JSON Editor api, which can be found at https://github.com/josdejong/jsoneditor * @@ -27,14 +26,45 @@ export interface IXtalJsonEditorProperties{ */ class XtalJsonEditor extends Polymer.Element implements IXtalJsonEditorProperties { watch: object; options: jsoneditor.JSONEditorOptions; editedResult; waitForOptions; - _jsonEditor: JSONEditor;as;height;width - constructor(){ - super(); - console.log('in construcrtor'); + _jsonEditor: JSONEditor;as;height;width;cssPath; + cs = cs; + //from https://stackoverflow.com/questions/14780350/convert-relative-path-to-absolute-using-javascript + absolute(base, relative) { + var stack = base.split("/"), + parts = relative.split("/"); + stack.pop(); // remove current file name (or empty string) + // (omit if "base" is the current folder without trailing slash) + for (var i = 0; i < parts.length; i++) { + if (parts[i] == ".") + continue; + if (parts[i] == "..") + stack.pop(); + else + stack.push(parts[i]); + } + return stack.join("/"); + } + connectedCallback(){ + super.connectedCallback(); + if(!this.cssPath){ + //const cs = document.currentScript; + if(cs){ + this.cssPath = this.absolute(cs.baseURI, 'jsoneditor.min.css'); + }else{ + this.cssPath = '/bower_components/xtal-json-editor/jsoneditor.min.css'; + } + } + console.log(this.cssPath); } static get is() { return 'xtal-json-editor'; } static get properties() { return { + /** + * Path to get the styling + */ + cssPath:{ + type: String + }, /** * The expression that points to an object to edit. */ @@ -88,7 +118,6 @@ export interface IXtalJsonEditorProperties{ } onPropsChange(newVal) { - console.log('onPropsChange'); if (!this.watch) return; if(this.waitForOptions && !this.options) return; //const _this = this; @@ -103,25 +132,22 @@ export interface IXtalJsonEditorProperties{ } //} this.$.xcontainer.innerHTML = ''; - console.log('i am here'); this._jsonEditor = new JSONEditor(this.$.xcontainer, this.options); this._jsonEditor.set(this.watch); } } - console.log('adding XtalJsonEditor to custom elements'); customElements.define(XtalJsonEditor.is, XtalJsonEditor); } function WaitForPolymer() { + cs = document.currentScript; if ((typeof Polymer !== 'function') || (typeof Polymer.Element !== 'function')) { setTimeout( WaitForPolymer, 100); return; } - console.log('call initXtalJsonEditor'); initXtalJsonEditor(); } - console.log('call WaitForPolymer'); WaitForPolymer(); })(); \ No newline at end of file