evalDOM.js

module.exports = function evalDOM() {
  const ELEMENTS = ['audio', 'button', 'canvas', 'code', 'img', 'input', 'pre', 'svg', 'textarea', 'video', 'xmp'];
  const blocks = [];
  const win_w = window.innerWidth;
  const win_h = window.innerHeight;

  let agrsArr = arguments;
  if (!agrsArr.length) agrsArr = {length: 1, 0: {}};
  let agrs = agrsArr[0];
  
  if (agrsArr.length !== 1 || getArgtype(agrs) !== 'object') {
    agrs = parseAgrs([...agrsArr]);
  }

  const classProps = {
    position: 'fixed',
    zIndex: 999,
    background: agrs.background
  }
  if (agrs.animation) {
    classProps.animation = agrs.animation;
  }

  createCommonClass(classProps);

  function drawBlock({width, height, top, left, zIndex = 999, background = agrs.background, radius, subClas} = {}) {
    const styles = ['height:' + height + '%'];

    if (!subClas) {
      styles.push('top:' + top + '%', 'left:' + left + '%', 'width:' + width + '%');
    }

    if (classProps.zIndex !== zIndex) {
      styles.push('z-index:' + zIndex);
    }

    if (classProps.background !== background) {
      styles.push('background:' + background);
    }

    radius && radius != '0px' && styles.push('border-radius:' + radius);
    blocks.push(`<div class="_${subClas ? ' __' : ''}" style="${styles.join(';')}"></div>`);
  }

  function wPercent(x) {
    return parseFloat(x / win_w * 100).toFixed(3);
  }
  
  function hPercent(x) {
    return parseFloat(x / win_h * 100).toFixed(3);
  }

  function noop() {}

  function getArgtype(arg) {
    return Object.prototype.toString.call(arg).toLowerCase().match(/\s(\w+)/)[1];
  }

  function getStyle(node, attr) {
    return (node.nodeType === 1 ? getComputedStyle(node)[attr] : '') || '';
  }

  function getRootNode(el) {
    if (!el) return el;
    return typeof el === 'object' ?
            el:
            (getArgtype(el) === 'string' ?
            document.querySelector(el):
            null);
  }

  function includeElement(elements, node) {
    return ~elements.indexOf((node.tagName || '').toLowerCase());
  }

  function isHideStyle(node) {
    return getStyle(node, 'display') === 'none' || 
        getStyle(node, 'visibility') === 'hidden' || 
        getStyle(node, 'opacity') == 0 ||
        node.hidden;
  }

  function isCustomCardBlock(node) {
    const bgStyle = getStyle(node, 'background');
    const bgColorReg = /rgba\([\s\S]+?0\)/ig;
    const bdReg = /(0px)|(none)/;
    const hasBgColor = !bgColorReg.test(bgStyle) || ~bgStyle.indexOf('gradient');
    const hasNoBorder = ['top', 'left', 'right', 'bottom'].some(item => {
      return bdReg.test(getStyle(node, 'border-' + item));
    });
    const {w, h} = getRect(node);
    const customCardBlock = !!(hasBgColor && (!hasNoBorder || getStyle(node, 'box-shadow') != 'none') && w > 0 && h > 0 && w < 0.95*win_w && h < 0.3*win_h);
    return customCardBlock;
  }

  function calcTextWidth(text, {fontSize, fontWeight} = {}) {
    if (!text) return 0;

    const div = document.createElement('div');
    div.innerHTML = text;
    div.style.cssText = [
      'position:absolute',
      'left:-99999px',
	    `height:${fontSize}`,
      `font-size:${fontSize}`,
      `font-weight:${fontWeight}`,
      'opacity:0'
    ].join(';');
    document.body.appendChild(div);
    const w = getStyle(div, 'width');
    const h = getStyle(div, 'height');
    document.body.removeChild(div);
    return {
      w: parseInt(w),
      h: parseInt(h)
    };
  }

  function getRect(node) {
    if (!node) return {};
    const { top: t, left: l, width: w, height: h } = node.getBoundingClientRect();
    return {t, l, w, h};
  }

  function getPadding(node) {
    return {
      paddingTop: parseInt(getStyle(node, 'paddingTop')),
      paddingLeft: parseInt(getStyle(node, 'paddingLeft')),
      paddingBottom: parseInt(getStyle(node, 'paddingBottom')),
      paddingRight: parseInt(getStyle(node, 'paddingRight'))
    }
  }

  function createCommonClass(props) {
    const inlineStyle = ['<style>._{'];
    for(let prop in props) {
      inlineStyle.push(`${prop === 'zIndex'? 'z-index': prop}:${props[prop]};`);
    }
    inlineStyle.push('}.__{top:0%;left:0%;width:100%;}</style>');
    blocks.push(inlineStyle.join(''));
  }

  function parseAgrs(agrs = []) {
    let params = {};
    agrs.forEach(agr => {
      const sep = agr.indexOf(':');
      const [appName, name, type] = agr.slice(0, sep).split('-');
      const val = agr.slice(sep + 1);
      params[name] = type === 'function'? eval('(' + val + ')'): 
                      type === 'object'? JSON.parse(val):
                      val;
    });
    return params;
  }

  function DrawPageframe(opts) {
    this.rootNode = getRootNode(opts.rootNode) || document.body;
    this.offsetTop = opts.offsetTop || 0;
    this.includeElement = opts.includeElement;
    this.init = opts.init;
    this.originStyle = {};

    return this instanceof DrawPageframe ? this : new DrawPageframe(opts); 
  }

  DrawPageframe.prototype = {
    resetDOM: function() {
      this.init && this.init();
      this.originStyle = {
        scrollTop: window.scrollY,
        bodyOverflow: getStyle(document.body, 'overflow')
      };
      window.scrollTo(0, this.offsetTop);
      document.body.style.cssText += 'overflow:hidden!important;';
      drawBlock({
        height: 100, 
        zIndex: 990,
        background: '#fff',
        subClas: true
      });
      this.withHeader();
    },
    inHeader: function(node) {
      if (agrs.header) {
        const height = parseInt(agrs.header.height);
        if (height) {
          const {t, l, w, h} = getRect(node);
          return t <= height;
        }
      }
    },
    withHeader: function() {
      if (agrs.header) {
        const {height, background} = agrs.header;
        const hHeight = parseInt(height);
        const hBackground = background || agrs.background;
        if (hHeight) {
          drawBlock({
            height: hPercent(hHeight), 
            zIndex: 999,
            background: hBackground,
            subClas: true
          });
        }
      }
    },
    showBlocks: function() {
      if (blocks.length) {
        const { body } = document;
        const blocksHTML = blocks.join('');
        const div = document.createElement('div');
        div.innerHTML = blocksHTML;
        body.appendChild(div);

        window.scrollTo(0, this.originStyle.scrollTop);
        document.body.style.overflow = this.originStyle.bodyOverflow;

        return blocksHTML;
      }
    },

    startDraw: function() {
      const $this = this;
      this.resetDOM();
      const nodes = this.rootNode.childNodes;
      
      function deepFindNode(nodes) {
        if (nodes.length) {
          for(let i = 0; i < nodes.length; i++) {
            
            let node = nodes[i];
            if (isHideStyle(node) || (getArgtype($this.includeElement) === 'function' && $this.includeElement(node, drawBlock) == false)) continue;
            let childNodes = node.childNodes;
            let hasChildText = false;
            let background = getStyle(node, 'backgroundImage');
            let backgroundHasurl = background.match(/url\(.+?\)/);
            
            backgroundHasurl = backgroundHasurl && backgroundHasurl.length;

            for(let j = 0; j < childNodes.length; j++) {
              if (childNodes[j].nodeType === 3 && childNodes[j].textContent.trim().length) {
                hasChildText = true;
                break;
              }
            }

            if ((includeElement(ELEMENTS, node) || 
              backgroundHasurl ||
              (node.nodeType === 3 && node.textContent.trim().length) || hasChildText ||
              isCustomCardBlock(node)) && !$this.inHeader(node)) {
                const {t, l, w, h} = getRect(node);
                
                if (w > 0 && h > 0 && l >= 0 && l < win_w && win_h - t >= 20 && t >= 0) {
                  const {
                    paddingTop,
                    paddingLeft,
                    paddingBottom,
                    paddingRight
                  } = getPadding(node);
                  drawBlock({
                    width: wPercent(w - paddingLeft - paddingRight), 
                    height: hPercent(h - paddingTop - paddingBottom), 
                    top: hPercent(t + paddingTop), 
                    left: wPercent(l + paddingLeft),
                    radius: getStyle(node, 'border-radius')
                  });
                }
            } else if (childNodes && childNodes.length) {
              if (!hasChildText) {
                deepFindNode(childNodes);
              }
            }
          }
        }
      }

      deepFindNode(nodes);
      return this.showBlocks();
    }
  }

  return new Promise((resolve, reject) => {   
    setTimeout(() => {
      try {
        const html = new DrawPageframe({
          init: agrs.init,
          rootNode: agrs.rootNode,
          includeElement: agrs.includeElement
        }).startDraw();
        resolve(html);
      } catch (e) {
        reject(e);
      }
    }, 1000);
  }); 

}