knate/src/KNateHtmlDom.js

const K = window.K;

// -----------------------------------------------------------------------------
//                                  Prototypes
// -----------------------------------------------------------------------------

K.NateHtmlDomProto = Object.assign({}, K.NateAbstractDomProto, {
  commonAttributeSetter(nNode, key, value) {
    nNode.elem.setAttribute(key, value)
  },

  commonPropertySetter(nNode, key, value) {
    K.updateProperty(nNode.elem, key, value)
  },

  commonStyleAttributeSetter(nNode, key, value) {
    K.updateProperty(nNode.elem.style, key, value)
  },

  commonCreateHtmlTag(tagName, params)
  {
    const newHtmlElem = document.createElement(tagName)
    return this.newChildFromElement(newHtmlElem, params);
  },

  // TODO: Static.
  ON_CLICK_EVENT_BLOCKER()
  {
    let rv = null;

    event = arguments[0] || window.event;

    if (event.shiftKey || event.ctrlKey)
    {
      // (SHIFT + click) or (CTRL + click) - don't block.
      rv = true;
    }
    else
    {
      rv = (event.button != 0)

      event.returnValue = rv
    }

    return rv;
  },

  init(parentOrElem, namespace)
  {
    K.NateAbstractDomProto.init.call(this, parentOrElem, namespace);

    // Check the type of parentOrElem.
    let isInstanceOfNate    = parentOrElem && parentOrElem._getDefaultNamespace
    let isInstanceOfHtmlDom = (parentOrElem instanceof K.NateHtmlDom);
    let isInstanceOfSvgDom  = false;

    if (K.Object.isNotNull(K.NateSvgDom))
    {
      // K.NateSvgDom may be not included in the build
      isInstanceOfSvgDom = (parentOrElem instanceof K.NateSvgDom)
    }

    const isElemOrText = K.Elem.isElem(parentOrElem) || K.Elem.isText(parentOrElem);

    if ((!isInstanceOfNate) && (!isInstanceOfHtmlDom) && (!isElemOrText) && (!isInstanceOfSvgDom))
    {
      throw('parentOrElem should be Nate object or html-element');
    }
  },

  _getDefaultNamespace() {
    // Default namespace for all NateHtmlDom elements used when there is no
    // parent item.
    return K.nateHtmlDomNamespace
  },

  newChildFromElement(elem, params)
  {
    newNate = this.getNamespace().createNate(this);
    newNate.attachElemToNate(elem);

    if (params) {
      newNate.setFromMap(params)
    }

    return newNate;
  },

  newTextNode(text = '')
  {
    const textNode = document.createTextNode(text);

    return this.newChildFromElement(textNode);
  },

  newTxt(text)
  {
    return this.newTextNode(text);
  },

  br()
  {
    // TODO: br vs newBr()
    return this.newBr();
  },

  newScriptJsonLd(dataObj = null)
  {
    const a = document.createElement('script');

    a.type = 'type=application/ld+json';

    return this.newChildFromElement(a, {
      innerJSON: dataObj
    })
  },

  //
  // SVG, canvas etc.
  //

  newSvgNate(params)
  {
    const svgElem = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    const svgNate = K.NateSvgDom(svgElem, K.BSC.NateAbstractProto.USE_DEFAULT_NAMESPACE);

    this.addNateChild(svgNate);
    svgNate.setFromMap(params);

    return svgNate;
  },

  //
  // nate methods
  //

  get$()
  {
    // Don't call it anymore. We removed jQuery.
    K.Error.reportNotImplemented('K.NateHtmlDom::get$');

    // OLD IMPLEMENTATION
    //this._confirmIsNotDeleted()
    //return $(this.elem)
  },

  setText(txt)
  {
    this.set('innerHTML', txt);
    return this;
  },

  setOnClickEventBlocker()
  {
    this.set('onclick', K.NateHtmlDomProto.ON_CLICK_EVENT_BLOCKER);

    return this;
  },

  set(param, value)
  {
    this._confirmIsNotDeleted();

    const fct = this.namespace.getSetter(param)

    if (fct) {
      fct(this, param, value)
    } else {
      throw('No handling for given property implemented: ' + param);
    }

    return this;
  },

  setData(key, value)
  {
    this._confirmIsNotDeleted();
    this._validateDataKey(key);

    this.elem.setAttribute('data-' + key, value);

    return this;
  },

  _decodeHtmlEntitiesToPlainText(html)
  {
    // Example:
    //   input  : Median & average
    //   output : Median & average

    let rv = '';

    const tempDivElement = document.createElement('div');

    tempDivElement.innerHTML = html;

    if (tempDivElement.childNodes.length > 0)
    {
      rv = tempDivElement.childNodes[0].nodeValue;
    }

    return rv;
  }
});

K.NateHtmlDomHeadProto = Object.assign({}, K.NateHtmlDomProto,
{
  setTitle(title)
  {
    // We decode title to plain text, because document.title works in different way
    // than static <title> tag. Browser's side title needs plain, decoded text
    // instead of html.
    document.title = this._decodeHtmlEntitiesToPlainText(title);
  },

  setDocumentTitle(title)
  {
    this.setTitle(title);
  }
});

// -----------------------------------------------------------------------------
//                               HTML namespace
// -----------------------------------------------------------------------------

K.nateHtmlDomNamespace =
  K.BSC.nateNullNamespace.createExtension('HtmlDom', {nateProto: K.NateHtmlDomProto})

// -----------------------------------------------------------------------------
//                                HTML setters
// -----------------------------------------------------------------------------

// Common attribute setter.
K.BSC.nateCommonHtmlProperties.forEach((key) => {
  K.nateHtmlDomNamespace.addSetter(key, K.NateHtmlDomProto.commonPropertySetter)
})

// Common style attribute setter.
K.BSC.nateCommonStyleAttributes.forEach((key) => {
  K.nateHtmlDomNamespace.addSetter(key, K.NateHtmlDomProto.commonStyleAttributeSetter)
})

// Common HTML attributes.
K.BSC.nateCommonHtmlAttributes.forEach((key) => {
  K.nateHtmlDomNamespace.addSetter(key, K.NateHtmlDomProto.commonAttributeSetter)
})

K.nateHtmlDomNamespace.addSetter('style', (nNode, key, value) => {
  nNode.set('cssText', value)
})

K.nateHtmlDomNamespace.addSetter('rect', (nNode, key, value) => {
  value.applyToHtmlElement(nNode.elem);
})

K.nateHtmlDomNamespace.addSetter('on', (nNode, key, value) => {
  // TODO: handling of other things than 'block'
  if (value)
  {
    nNode.set('display', 'block');
  }
  else
  {
    nNode.set('display', 'none');
  }
})

// Special handlers to set inner content directly from strings (i.e. skip
// newXxx() API).
K.nateHtmlDomNamespace.addSetter('textContent', K.NateAbstractDomProto.commonInnerContentSetter)
K.nateHtmlDomNamespace.addSetter('innerHTML'  , K.NateAbstractDomProto.commonInnerContentSetter)
K.nateHtmlDomNamespace.addSetter('innerText'  , K.NateAbstractDomProto.commonInnerContentSetter)

// -----------------------------------------------------------------------------
//                                 HTML tags
// -----------------------------------------------------------------------------

K.BSC.nateCommonHtmlOpenCloseTags.forEach((key) => {
  K.nateHtmlDomNamespace.addCreateFunction(key, K.NateHtmlDomProto.commonCreateHtmlTag);
})

K.BSC.nateCommonHtmlOpenCloseAtOnceTags.forEach((key) => {
  K.nateHtmlDomNamespace.addCreateFunction(key, K.NateHtmlDomProto.commonCreateHtmlTag);
})

K.BSC.nateCommonHtmlInputTypes.forEach((inputType) => {
  const key = 'input' + inputType.charAt(0).toUpperCase() + inputType.substr(1);

  K.nateHtmlDomNamespace.addCreateFunction(key, function(tagName, params = {}) {
    const newHtmlElem = document.createElement('input');
    newHtmlElem.type = inputType;
    return this.newChildFromElement(newHtmlElem);
  });
})

K.nateHtmlDomNamespace.addCreateFunction('svg', function(tagName, params) {
  const a = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
  return this.newChildFromElement(a, params);
});

// -----------------------------------------------------------------------------
//                            Factory functions
// -----------------------------------------------------------------------------

K.NateHtmlDom     = K.nateHtmlDomNamespace.createFactoryFunction(K.NateHtmlDomProto);
K.NateHtmlDomHead = K.nateHtmlDomNamespace.createFactoryFunction(K.NateHtmlDomHeadProto);