$a.historyLine

by Felipe Alfaro

HTML

<div id="test"></div>

SCSS

.a-history-line {
  position: relative;
  width: 100%;
  background: gainsboro;
  height: 4px;
  border-radius: 2px;
  overflow: visible;
  margin: 30px 0;
}

.a-line-mark {
  left: 0;
  display: block;
  position: absolute;
  height: 100%;
  width: 4px;
  background: red;
}

JavaScript

console.clear();

var $a = (function(doc) {

  var $aElements = [],
    modules = {};

  function $a(node) {
    var $aElement = new AlphaElement(node);
    $aElements.push($aElement);
    return $aElement;
  }

  $a.addModule = addModuleFn;

  function addModuleFn(moduleName, moduleFn, moduleRequirements) {
    if (modules[moduleName]) {
      return;
    }

    modules[moduleName] = moduleFn;
    moduleFn.call($a);
  }

  function AlphaElement(node) {
    this.node = node;
    this.handlers = [];
  }

  AlphaElement.prototype.addHandler = function(handler) {
    this.handlers.push(handler);
  };

  return $a;

})(document);


$a.addModule('core', function () {
  this.str = {
    camelCaseToHyphen: function(str) {
      return str
        .replace(/[^a-zA-Z0-9]+/g, '-')
        .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
        .replace(/([a-z])([A-Z])/g, '$1-$2')
        .replace(/([0-9])([^0-9])/g, '$1-$2')
        .replace(/([^0-9])([0-9])/g, '$1-$2')
        .replace(/-+/g, '-')
        .toLowerCase();
    }
  };
  this.createElement = function(tag, id, className, attributes, inlineStyles) {
    var el = document.createElement(tag || 'div');
    el.className = className || '';

    if (inlineStyles) {
      Object.keys(inlineStyles).forEach(function(styleName) {
        el.style[$a.str.camelCaseToHyphen(styleName)] = inlineStyles[styleName];
      });
    }

    return el;
  };
});


console.dir($a);

var myLine = $a('historyLine')(document.getElementById('test'));

/*
$a.addModule((function () {

	var workingHistoryLineInstance = null;

  function HistoryLine(wrapperElement, length) {
    var self = this,
        element = $a.createElement('div', null, 'a-history-line');
        
    wrapperElement.innerHTML = '';
    wrapperElement.appendChild(element);
    
    self.element = element;
    self.$aElement = $s(wrapperElement);
    self.lineLength = length || 10;
    self.marks = [];
    self.overflowMarks = false;
    
    self.$aElement.addHandler(this);
 ...