json editor

bahrus · Sep 10, 2017 · fae357a · fae357a
1 parent 5e7a28a
commit fae357a
Show file tree

Hide file tree

Showing 4 changed files with 90 additions and 29 deletions.
diff --git a/README.md b/README.md
@@ -36,6 +36,16 @@ Polymer web wrapper around josdejong&#39;s awesome, most excellent JSON Editor a
     </dom-bind>
 ```
 
+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
+    <xtal-json-editor cssPath="...">
+```
+
+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
@@ -1,13 +1,10 @@
 <!DOCTYPE html>
 <link rel="import" href="../polymer/polymer-element.html">
-<!-- <link rel="import" href="defaultTheme.html"> -->
 <dom-module id="xtal-json-editor">
 
     <template>
-        <link id="extCss" async rel="stylesheet" type="text/css"  href="../jsoneditor.css">
-        <!-- <style include="xtal-json-editor-default-theme">
-
-        </style> -->
+        <link id="extCss" async rel="stylesheet" type="text/css"  href="[[cssPath]]">
+
         <div id="xcontainer" style$="height:[[height]];width:[[width]]"></div>
     </template> 
    <script src="jsoneditor.js"></script>

diff --git a/xtal-json-editor.js b/xtal-json-editor.js
diff --git a/xtal-json-editor.ts b/xtal-json-editor.ts
@@ -2,22 +2,21 @@
 //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,
     as: string | polymer.PropObjectType,
     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();
 })();