twbs3-iframe components

by Anov Siradj

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<div is="twbs3-iframe" size="16by9">//anovsiradj.github.io/html/dark-gh-cv.htm</div>

<br/>Test Text

JavaScript

console.log('running..,');

;(function() {
  var new_elm = Object.create(HTMLElement.prototype);
  new_elm.createdCallback = function() {
    var _link_target = this.getAttribute('link-target');
    var _show_link = this.getAttribute('show-link') || 'show';
    var _size = this.getAttribute('size') || '4by3';
    var _src = this.innerText.trim();
    
    this.removeAttribute('style');
    for(var i=0; i<this.childNodes.length; i++) {
      this.childNodes[i].remove();
    }

    var outer = document.createElement('div');
    outer.classList.add('embed-responsive', 'embed-responsive-' + _size);

    var inner = document.createElement('iframe');
    inner.classList.add('embed-responsive-item');
    inner.src = _src;

    outer.appendChild(inner);
    this.appendChild(outer);
    if(_show_link === 'show') {
      var link = document.createElement('a');
      link.href = _src;
      link.innerText = link.href;
      if(_link_target) link.target = _link_target;
      this.appendChild(link);
    }
  };

  document.registerElement('twbs3-iframe', {
    prototype: new_elm,
    extends: 'div'
  });
})();