knate/src/KNateSvgDom.js

const K = window.K;

// -----------------------------------------------------------------------------
//                                 SVG Prototypes
// -----------------------------------------------------------------------------

K.NateSvgDomProto = Object.assign({}, K.NateAbstractDomProto, K.BSC.NateSvgProto,
{
  init(parentOrElem, namespace)
  {
    K.NateAbstractDomProto.init.call(this, parentOrElem, namespace);

    // Check the type of parentOrElem.
    const isInstanceOfSvgDom = (parentOrElem instanceof K.NateSvgDom);
    const isElemOrText       = K.Elem.isElem(parentOrElem) || K.Elem.isText(parentOrElem);

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

  _getDefaultNamespace()
  {
    return K.nateSvgDomNamespace;
  },

  newSVGElement(tag, params)
  {
    const elem    = document.createElementNS('http://www.w3.org/2000/svg', tag);
    const newNate = new K.NateSvgDom(elem);

    this.addNateChild(newNate);

    if (K.Object.isNotNull(params))
    {
      for (const k in params)
      {
        newNate.set(k, params[k]);
      }
    }

    return newNate;
  },

  clear()
  {
    this.deleteAllChildren();
  }
});

// -----------------------------------------------------------------------------
//                                SVG namespace
// -----------------------------------------------------------------------------

K.nateSvgDomNamespace =
  K.BSC.NateNamespace('SvgDom', {nateProto: K.NateSvgDomProto})

// -----------------------------------------------------------------------------
//                                   SVG tags
// -----------------------------------------------------------------------------

K.BSC.nateSvgCommonOpenCloseAtOnceTags.forEach((tagName) => {
  K.nateSvgDomNamespace.addCreateFunction(tagName, K.NateSvgDomProto.newSVGElement);
})

K.BSC.nateSvgCommonTags.forEach((tagName) => {
  K.nateSvgDomNamespace.addCreateFunction(tagName, K.NateSvgDomProto.newSVGElement);
})

// -----------------------------------------------------------------------------
//                             SVG property setters
// -----------------------------------------------------------------------------

K.BSC.nateSvgAttributes.forEach((key) => {
  K.nateSvgDomNamespace.addSetter(key, K.NateHtmlDomProto.commonAttributeSetter)
})

// Special case: overload default handler for xlink:href.
K.nateSvgDomNamespace.addSetter('xlink:href', (nNode, key, value) => {
  nNode.elem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', value);
})

// Href should works too.
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href
// "Note: SVG 2 removed the need for the xlink namespace, so instead of xlink:href you
// should use href."
K.nateSvgDomNamespace.addSetter('href', (nNode, key, value) => {
  nNode.elem.setAttributeNS('http://www.w3.org/1999/xlink', 'href', value);
})

// This is not a standard, but Firefox and Chrome implement it in theirs DOMs,
// so we keep this call for compatibility.
K.nateSvgDomNamespace.addSetter('textContent', K.NateAbstractDomProto.commonInnerContentSetter)
K.nateSvgDomNamespace.addSetter('innerHTML'  , K.NateAbstractDomProto.commonInnerContentSetter)

// -----------------------------------------------------------------------------
//                             SVG factory functions
// -----------------------------------------------------------------------------

K.NateSvgDom = K.nateSvgDomNamespace.createFactoryFunction(K.NateSvgDomProto);