notification list web component

notificationListComponent.js

/* notificationList Component
    Author: Birkan Kolcu
    License: MIT
    Description: Simple HTML table component which can be manipulated from javascript. Written without any framework.,

    Example Usage:
        notificationListComponent.initialize("yes");
        // Alternatively you can initialize it with styleOptions: notificationListComponent.initialize("yes", {"padding": "30px"});
        notificationListComponent.appendToList("maId", "red", "title", "content");
        notificationListComponent.removeFromList("maId");

        notificationListComponent.appendToList("yo", "red", "Yo Mate!", "Muhahahaha");
        var notificationObj = notificationListComponent.getNotificationValues("yo");

        console.log(JSON.stringify(notificationObj));

    Final Notes:
        Functions with underscores are private funcs.

<ul id="notificationList-component" style="padding: 5px;height:200px; border:3px solid blue; overflow: scroll; list-style: none;">

</ul>
*/
var notificationListComponent = {
  domId: "notificationList-component",
  initialize: function(domIdToAppend, styleOption) {
      var listNode = this._createListNode(this.domId, styleOption);
      this._appendChildToNode(listNode, domIdToAppend);
  },
  appendToList: function(elementId, color, title, content) {
    var fullId = this.domId + "-" + elementId;
    var listElementNode = this._createListElement(fullId, color, title, content);
    this._appendChildToNode(listElementNode, this.domId);
  },
  removeFromList: function(elementId) {
    var fullId = this.domId + "-" + elementId;
    var listElementNode = document.getElementById(fullId);
    this._removeChildFromNode(listElementNode, this.domId);
  },
  getNotificationValues: function(elementId) {
    var fullId = this.domId + "-" + elementId;
    var listElementNode = document.getElementById(fullId);
    var strongNode = listElementNode.getElementsByTagName('strong')[0];
    var textNode = listElementNode.getElementsByTagName('p')[0];
    var colorStuff = listElementNode.style["background-color"];

    var notification = {
      id: elementId,
      domId: fullId,
      color: listElementNode.style["background-color"],
      title: strongNode.innerHTML,
      content: textNode.innerHTML,
    };
    return notification;
  },
  _createListNode: function(listNodeId, styleOption) {
      var listNode = document.createElement("ul");
      listNode.id = listNodeId;
      if(!styleOption) {
        listNode.style["padding"]     = "5px";
        listNode.style["height"]      = "200px";
        listNode.style["border"]      = "3px solid blue";
        listNode.style["overflow"]    = "scroll";
        listNode.style["list-style"]  = "none";
      } else {
        for (var key in styleOption) {
            if (styleOption.hasOwnProperty(key))
                listNode.style[key] = styleOption[key];
        }
      }

      return listNode;
  },
  _createListElement: function(elementId, color, title, content) {
    var listElementNode = document.createElement("li");
    var contentNode = document.createTextNode(content);
	listElementNode.innerHTML= "<strong>"+title+"</strong><p>"+content+"</p>";
    listElementNode.style["background-color"] = color;
    listElementNode.id = elementId;
    
    return listElementNode;
  },
  _appendChildToNode: function(child, nodeId) {
    var notificationListNode = document.getElementById(nodeId);
    notificationListNode.appendChild(child);
  },
  _removeChildFromNode: function(child, nodeId) {
    var notificationListNode = document.getElementById(nodeId);
    notificationListNode.removeChild(child);
  }
};