TheRogerLAB Codes

Create an UI component

  July, 2021

Introduction

You can build your own UI component without use any framework or library. Just pure javascript object and will be able to reuse it many times as you want. Also you can set methods in order to customize your component and fire events as well. This is only a model of how can we do it. Feel free to use it or improve it:

Step 1: Define an object literal

var myComponent = {
 //step 2 will be here
 //step 3 will be here
 //step 7 will be here
};

Step 2: Define a property to store instance of object and a method to get that instance

 //store instance of component with id index
 items: [],

 //short for access to the component
 cmp: function(id){
  return this.items[id];
 },

Step 3: Define a function constructor that represents our component

 component: function(id){
  //methods to config, show and customized our component
  //step 4 will be here
  //step 5 will be here
  //step 6 will be here
 },

Step 4: Define functions for configuration

//config object default
this.config = {
  width:"100px"//example of default property
  height:"20px" //example of default property
},

//object for override config object just with changed default properties
this.settings = {},

//function for override config with setting
this.matchSettings = function(){
  var keys = [];
  for (var k in this.settings){
    if(k in this.config)
      this.config[k] = this.settings[k];
    }
},

Step 5: Add method for slots and customize property

//slots object just in case
this.slots = {
  content:""
},

//customized method
this.setWidth = function(width){
  document.querySelector('#'+id).style.width = width;
},

Step 6: Define method for build template, call config functions and return the created element or append inside a parent

//build all together
this.show = function(parent){

  //override settings
  this.matchSettings();

  //template html
  var e = `
  <div class='myclass' id=`+id+` style='width:`+this.config.width+`;height:`+this.config.height+`'>
    `+this.slots.content+`
  </div>
  `;

  //append inside a parent element or return it
  if(parent == undefined){
    return e;
  }else{
    var p = document.querySelector(parent);
    p.insertAdjacentHTML('beforeend', e);
  }

Step 7: Define method for create an instance of the component and store inside items

//Create an instance of component
create:function (id) {
  this.items[id] = new this.component(id);
  return this.items[id];
}

Step 8: Add some CSS style

.myclass{
 background-color: #2196F3;
 padding:10px;
 color:white;
 text-align:center;
}

Step 9: Example of usage (Finally 😅)

//myElement is the id
var el = myComponent.create('myElement');

//overriding the width, height remains
el.settings = {width:"200px"};

//using slot for extra content
el.slots = {content:"Hi i am a component"};

//rendering the component inside body (you can use a css selector)
el.show('body');

//changing width further (calling customized method for change property)
myComponent.cmp('myElement').setWidth('500px');

Check a working demo for this code:

SEE DEMO RATE THIS ARTICLE
4.9
8
TheRogerLAB Codes
Powered by TheRogerLAB Sandbox

info@therogerlab.com