TextComponent

by ti2005

HTML

<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

<div id="editor">
</div>

JavaScript

function setCustomStyle(elId, propertyObject) {
  var el = document.getElementById(elId);
  for (var property in propertyObject) {
    el.style[property] = propertyObject[property];
  }
}

function TextWidget(id, config) {
  if (id && config.datatype && config.containerId) {
    this._id = id; // Mandatory Property
    this.datatype = config.datatype; // Mandatory Property
    this.containerId = config.containerId; // Mandatory Property
    this.content = config.data || 'New Label';
    this.options = config.options || {};

    this.render();
  }
}

TextWidget.prototype.getId = function() {
  return this._id;
};

TextWidget.prototype.render = function() {
  var e = document.createElement('div');
  e.id = this._id;
  e.innerHTML = this.content;
  document.getElementById(this.containerId).appendChild(e);
  setCustomStyle(this._id, this.options.customStyle || {});
};

var tw_1 = new TextWidget('text-component', {
  data: 'Compay Name',
  containerId: "editor",
  datatype: 'static',
  options: {
    // Is need for enabling/ disabling properties in the panel
    style: {
      isBold: true,
      isItalic: false,
      isUnderline: false,
    },
    // From property panel we need insert common style properties in to customStyle property then set the style property true or false.
    customStyle: {
      'padding-top': '10px',
      'font-weight': 'bold',
      'color': 'green',
      'font-size': '48px',
      'font-family': 'Roboto, sans-serif'
    }
  }
});

var tw_2 = new TextWidget('_text-component', {
  data: 'Subtitle',
  containerId: "editor",
  datatype: 'static',
  options: {
    style: {
      isBold: false,
      isItalic: false,
      isUnderline: true,
    },
    customStyle: {
      'padding-top': '10px',
      'color': 'red',
      'font-size': '24px',
      'font-family': 'Roboto, sans-serif',
      'font-style': 'italic',
      'text-decoration': 'underline'
    }
  }
});