JSFiddle - React, Tailwind, and code Playground

by karthick6891

HTML

<div data-component="Footer">
	    	Footer
	    	<p class="copy"> footer copy </p>
</div>
<div data-component="Footer">
	    	Footer2
	    	<p class="copy"> footer copy2 </p>
</div>
<div data-component="Footer">
	    	Footer3
	    	<p class="copy"> footer copy3 </p>
</div>

JavaScript

var Utils = {
	isFunction: function isFunction(obj) {
			return typeof obj==='function';
		},
    extend: function extend(obj, props) {
			if (props) {
				for (let i in props) obj[i] = props[i];
			}
			return obj;
		},
}

var Base = {
   name: "Base",
   initialize: function(){
       	this.el = arguments[0]
        if (typeof jQuery !== 'undefined') this.$el = jQuery(this.el);
   
        this.data = arguments[1];
        this.grootDomEvents();
        this.mediator = arguments[2];  
        this.init();
   
       
   },
   grootDomEvents: function() {
  // console.log("groot", this.events)
			var events = this.events;      
			if (!events) return this;
	
			for(var key in events) {
				 var handler = events[key];		
				 if(!Utils.isFunction(handler)) handler = this[handler];
				 if(handler){
					 var match = key.match( /^(\S+)\s*(.*)$/);			
    					 // TODO Remove jquery event binding

					 if(match.length > 1) this.$el.on(match[1], match[2], handler.bind(this))
					 else this.$el.on(match[1], handler.bind(this))
				 }			
			};
      return this;
		},
}


var foo = Object.create(Base);

Utils.extend(foo,{
 	init: function(){
		console.log("MiniFooter Init")
	},
	events: {
	    "click": "onClick"
	},
	onClick: function onClick(e) {
     	console.log("click event from npm MiniFooter.js onCLick",this.el, this.$el);
      this.$el.find('.copy').toggle();
   }
})

for(var i=0; i < document.querySelectorAll('[data-component=Footer]').length;i++){
   foo.initialize(document.querySelectorAll('[data-component=Footer]')[i],{},this);
}