JSFiddle - React, Tailwind, and code Playground

by Felipe Alfaro

CSS

.timeline-wrapper-horizontal {}



/* <div class="timeline-wrapper-horizontal">
  <a clas="timeline-handler timeline-handler-prev" href=""></a>
  <a clas="timeline-handler timeline-handler-next" href=""></a>
  <div class="timeline">
    <div class="timeline-draggable-handler"></div>
    <div class="timeline-reel">
      <div class="timeline-anchor" style="width: 25%;"></div>
      <div class="timeline-anchor" style="width: 25%;"></div>
      <div class="timeline-anchor" style="width: 25%;"></div>
      <div class="timeline-anchor" style="width: 25%;"></div>
    </div>
  </div>
</div> */

JavaScript

console.clear();

$a = (function (doc) {

	var modules = {};

	function $a() {}
  
  $a.module = addModuleFn;
  
  function addModuleFn(moduleFn) {
  	var module = new AlphaModule(moduleFn);
    modules[module.name] = module;
  }
  
  function AlphaModule(moduleFn) {
  	var nativeAction = moduleFn.call(this);
    
    if (nativeAction) {
    	$a[this.name] = nativeAction;
    }
  }
  
  AlphaModule.prototype.require = requireModuleFn;
  
  function requireModuleFn() {
  	Array.prototype.forEach.call(arguments, function (moduleName) {
      Object.assign(this, _getModule(moduleName));
    });
  }
  
  function _getModule(moduleName) {
    var requiredModule = modules[moduleName];

    if (!requiredModule) {
      throw new Error('$a Error: Module "' + moduleName + '" not found.');
    }
    
    console.log(requiredModule);
    
    return requiredModule;
  }
  
  function AlphaElement(data) {
  	this.content = [data];
  }
  
  return $a;

})(document);

$a.module(function () {
	this.name = 'core';
});

$a.module(function () {

	var $m = this;

	$m.name = 'timeline';
  $m.readableName = 'Time Line';
  $m.require('core');
  
	console.log('yeah',this);
  
  return function (wrapperElement, length) {
  	//return new HistoryLine(wrapperElement, length);
  }

});

var myTimeline = $a.timeline(document.querySelector('body'), 10);






//var timeline = $a.timeLine(10),
//		anchor_a = timeline.anchor(0, 1).content('A'),
//    anchor_b = timeline.anchor(3, 1).content('B');