9d Logo

by dumptyd

HTML

<div id="logo">
  <semi-circle t="0" l="0"></semi-circle>
  <line l="81" t="0"></line>
</div>









<!-- COMPONENTS -->
<component name="semi-circle" attrs="t,l">
  <div class="semi-circle" style="top:[[t]]px; left: [[l]]px"></div>
</component>
<component name="line" attrs="t,l">
  <div class="line" style="top:[[t]]px; left: [[l]]px"></div>
</component>

CSS

.semi-circle {
  position: absolute;
  height: 100px;
  width: 80px;
  border-bottom-left-radius: 50px;
  border-top-left-radius: 50px;
  border: 1px solid #000;
  box-sizing: border-box;
}

.line {
  position: absolute;
  height: 250px;
  width: 1px;
  background-color: #000;
}

#logo {
  position: relative;
}

component {
  display: none;
}

JavaScript

class Replacer {
  constructor() {
    this.components = {};
    this._tagName = 'component';
  }

  init() {
    let components = [...document.getElementsByTagName(this._tagName)];
    components.forEach(c => {
      let name = c.getAttribute('name'),
        markup = c.innerHTML;
      let attrs = c.getAttribute('attrs');
      attrs = attrs && attrs.length ? attrs.split(',') : [];

      this.components[name] = {
        markup,
        attrs
      };
    });
  };

  replace() {
    Object.keys(this.components).forEach(c => {
      let elems = [...document.getElementsByTagName(c)];
      elems.forEach(e => {
        let markup = this.components[c].markup;
        let attrVals = this.components[c].attrs.forEach(attr => {
          let val = e.getAttribute(attr);
          let reg = new RegExp(`\\[\\[${attr}\\]\\]`, 'g');
          markup = markup.replace(reg, val || '');
        });
        e.outerHTML = markup;
      });
    });
  }

  addComponent({
    name,
    markup
  }) {
    this.components[name] = markup;
  };
}

let r = new Replacer();
r.init();
r.replace();