add content to the body of connectedCallback

Author: dabeng

.eslintrc.json

@@ -87,7 +87,7 @@
     "no-spaced-func": 2,
     "no-sparse-arrays": 2,
     "no-throw-literal": 2,
-    "no-trailing-spaces": 2,
+    "no-trailing-spaces": 1,
     "no-undef": 2,
     "no-undef-init": 2,
     "no-unneeded-ternary": 2,

src/orgchart-webcomponents.js

@@ -33,40 +33,12 @@ export default class OrgChart extends HTMLElement {
         'pan': false,
         'zoom': false
       },
-      opts = Object.assign(defaultOptions, options),
-      data = opts.data,
-      chart = document.createElement('div');
+      opts = Object.assign(defaultOptions, options);
 
     this.options = opts;
-    delete this.options.data;
-    this.dataset.options = JSON.stringify(opts);
-    this.setAttribute('class', 'orgchart' + (opts.chartClass !== '' ? ' ' + opts.chartClass : '') +
-      (opts.direction !== 't2b' ? ' ' + opts.direction : ''));
-    if (typeof data === 'object') { // local json datasource
-      this.buildHierarchy(this, opts.ajaxURL ? data : this._attachRel(data, '00'), 0);
-    } else if (typeof data === 'string' && data.startsWith('#')) { // ul datasource
-      this.buildHierarchy(this, this._buildJsonDS(document.querySelector(data).children[0]), 0);
-    } else { // ajax datasource
-      let spinner = document.createElement('i');
 
-      spinner.setAttribute('class', 'fa fa-circle-o-notch fa-spin spinner');
-      this.appendChild(spinner);
-      this._getJSON(data)
-      .then(function (resp) {
-        that.buildHierarchy(that, opts.ajaxURL ? resp : that._attachRel(resp, '00'), 0);
-      })
-      .catch(function (err) {
-        console.error('failed to fetch datasource for orgchart', err);
-      })
-      .finally(function () {
-        let spinner = that.querySelector('.spinner');
-
-        spinner.parentNode.removeChild(spinner);
-      });
-    }
     this.addEventListener('click', this._clickChart.bind(this));
 
-
     if (opts.pan && opts.chartContainer) {
       let chartContainer = document.querySelector(opts.chartContainer);
 
@@ -87,7 +59,34 @@ export default class OrgChart extends HTMLElement {
     }
   }
   connectedCallback() {
+    let that = this,
+      opts = this.options,
+      data = opts.data;
 
+    this.setAttribute('class', 'orgchart' + (opts.chartClass !== '' ? ' ' + opts.chartClass : '') +
+      (opts.direction !== 't2b' ? ' ' + opts.direction : ''));
+    if (typeof data === 'object') { // local json datasource
+      this.buildHierarchy(this, opts.ajaxURL ? data : this._attachRel(data, '00'), 0);
+    } else if (typeof data === 'string' && data.startsWith('#')) { // ul datasource
+      this.buildHierarchy(this, this._buildJsonDS(document.querySelector(data).children[0]), 0);
+    } else { // ajax datasource
+      let spinner = document.createElement('i');
+
+      spinner.setAttribute('class', 'fa fa-circle-o-notch fa-spin spinner');
+      this.appendChild(spinner);
+      this._getJSON(data)
+      .then(function (resp) {
+        that.buildHierarchy(that, opts.ajaxURL ? resp : that._attachRel(resp, '00'), 0);
+      })
+      .catch(function (err) {
+        console.error('failed to fetch datasource for orgchart', err);
+      })
+      .finally(function () {
+        let spinner = that.querySelector('.spinner');
+
+        spinner.parentNode.removeChild(spinner);
+      });
+    }
   }
   disconnectedCallback() {