knate/src/KNateHtmlStatic.js

const fs     = require('fs');
const coffee = require('coffeescript');
const K      = require('kcore');

require('./KBSCNateNamespace.js');
require('./KBSCNateHtml.js');
require('./KNateAbstractStatic.js');
require('./KNateXmlStatic.js');
require('./KNateSvgStatic.js');

const COMPACT = true;
// hard LB - always present
const LBH = '\n';
// soft LB - present only when COMPACT = false
const LB = COMPACT ? '' : '\n';

// turn off the cache when you are rapidly developing js/css etc.
let RESOURCE_CACHE_ON = true;

const RESOURCE_CACHE_STATE_PENDING = Symbol('pending');
const RESOURCE_CACHE = {};
const RESOURCE_COMPILED_CACHE = {};

const EMIT_RESOURCE_LOADING_TO_CONSOLE_LOG = false;
const EMIT_STATS_TO_CONSOLE_LOG            = false;

// This is rate limiter implemented locally, to prevent too many opened file handles (which crashes the server).
// This happens mostly in dev environments, where cache-ing files is disabled and so processing takes too long.
// Possible improvement:
// - use some already exisiting rate limiter implementation
// - use rate limiter instance taken for whole server/workspace, not just locally for Nate
let   RESOURCES_LOAD_PENDING_CNT   = 0;
const RESOURCES_LOAD_PENDING_LIMIT = 128;
const RESOURCES_WAITING_OBJECTS    = [];

// -----------------------------------------------------------------------------
//                                HTML Prototypes
// -----------------------------------------------------------------------------

K.JsCollectorProto =
{
  init()
  {
    this.js = '';
  },

  _generateJsTagFromText(jsTxt)
  {
    return '<script>' + LBH + jsTxt + LBH + '</script>' + LB;
  },

  getAllAsTag()
  {
    let rv = '';

    if (this.js != '')
    {
      rv = this._generateJsTagFromText(this.js);
    }

    return rv;
  },

  getAllAsOnLoadCode()
  {
    if (this.js != '')
    {
      K.Error.reportNotImplemented('K.JsCollector::getAllAsOnLoadCode()');
    }

    return '';

    // OLD IMPLEMENTATION
    // Removed due to jQuery dependency.
    // New implementation without jQuery needed.
    //
    // rv = ''
    // if @js != ''
    //   onLoadJs = '$(function() {' + LB + @js + LB + '});'
    //   rv = @_generateJsTagFromText(onLoadJs)
    // return rv
  },

  pushFromTxt(txt)
  {
    this.js += txt.trim();
  }
};

K.NateHtmlProto = Object.assign({}, K.NateXmlAbstractProto,
{
  setResourceCacheEnabled(onOff)
  {
    RESOURCE_CACHE_ON = onOff;
  },

  nl2br(text) {
    return text.replace(/(?:\r\n|\r|\n)/g, '<br>');
  },

  escapeHtmlContent(unsafe)
  {
    // Possible improvement: Add HTML specific escapes if needed.
    return K.NateXmlAbstractProto.escapeXmlTags(unsafe)
  },

  escapeHtmlAttribute(unsafe)
  {
    // We escapes quotas only inside attributes string.
    // https://webmasters.stackexchange.com/questions/12335/should-i-escape-the-apostrophe-character-with-its-html-entity-39
    return K.NateHtmlProto.escapeHtmlContent(unsafe)
           .replace(/"/g, '&quot;')
           .replace(/'/g, '&apos;');
  },

  _getDefaultNamespace() {
    // Default namespace for all NateHtmlStatic elements used when there
    // is no parent item.
    return K.nateHtmlStaticNamespace
  }
});

K.NateHtmlElemProto = Object.assign({}, K.NateHtmlProto,
{
  ON_CLICK_EVENT_BLOCKER: K.LinksUtil.getOnClickEventBlockerFunctionCodeAsText(),

  _concatParamStrings(obligatoryX, optionalY)
  {
    let rv = obligatoryX.trim()

    if (optionalY)
    {
      optionalY = optionalY.trim()

      if (optionalY != '')
      {
        rv = obligatoryX + ' ' + optionalY
      }
    }

    return rv
  },

  init(parent, namespace)
  {
    // Init super class.
    K.NateHtmlProto.init.call(this, parent, namespace);

    if (K.Object.isNotNull(parent))
    {
      parent.push(this);
    }
    else
    {
      this.tagOpenCloseMode = K.NateXmlAbstractProto.JUST_CHILDREN;
    }

    this.tagParamsList = {style: ''};
  },

  newTxt(theTxt)
  {
    const rv = this.getNamespace().createNate(this);

    rv.setTag(null, null, theTxt, K.NateXmlAbstractProto.JUST_THE_INNER);

    return rv;
  },

  br()
  {
    return this.newBr();
  },

  newScriptUrl(params)
  {
    return this.tagOpenClose('script', params);
  },

  newScriptJsonLd(dataObj = null)
  {
    const newTag = this.tagOpenClose('script', {
      type: 'application/ld+json',
      innerJSON: dataObj
    })

    return newTag;
  },

  newSvgNate(params)
  {
    const rv = K.NateSvgDocument(this);
    rv.setFromMap(params)

    return rv;
  },

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

    return this;
  },

  updateStyle(param, value)
  {
    value = value.trim();

    if (K.Object.isNotNull(value) && (value != ''))
    {
      const paramsMap = {
       'overflowX'      : 'overflow-x',
       'overflowY'      : 'overflow-y',
       'zIndex'         : 'z-index',
       'textAlign'      : 'text-align',
       'verticalAlign'  : 'vertical-align',
       'backgroundColor': 'background-color',
       'borderCollapse' : 'border-collapse',
       'fontFamily'     : 'font-family',
       'fontSize'       : 'font-size',
       'fontStyle'      : 'font-style',
       'fontWeight'     : 'font-weight',
      };

      let styleKey = paramsMap[param];

      if (K.Object.isUndefinedOrNull(styleKey))
      {
        styleKey = param;
      }

      this.tagParamsList.style += styleKey + ': ' + value + ';';
    }
  },

  _renderParams()
  {
    let rv = '';

    for (let paramKey in this.tagParamsList)
    {
      const value = this.tagParamsList[paramKey]
      if ((paramKey === 'style') && (value === ''))
      {
        // Do nothing for empty style
      }
      else
      {
        // If this is "boolean attribute", according to "2.4.2. Boolean attributes" of "HTML 5.3" spec
        // (http://w3c.github.io/html/infrastructure.html#sec-boolean-attributes)
        // then we just add the key without value.
        // For example in <script async> - the "async" is boolean
        // another example <input type="checkbox" checked> - the "checked" is boolean
        if (typeof value === 'boolean') {
          if (value) {
            rv += ' ' + paramKey
          }
        } else if (paramKey === 'innerHTML') {
          this.tagInnerContent = value
        } else {
          rv += ' ' + paramKey + '="' + value + '"'
        }
      }
    }

    return rv;
  },

  setData(key, value)
  {
    this._validateDataKey(key)
    this.tagParamsList['data-' + key.toLowerCase()] = value;

    return this;
  }
});

K.NateHtmlHeadProto = Object.assign({}, K.NateHtmlElemProto,
{
  init(parent, namespace)
  {
    K.NateHtmlElemProto.init.call(this, parent, namespace)

    this.htmlDocument = parent;
    this.css = '';
    this.meta = {};
    this.alternateLinksForLanguages = null;
    this.linkCanonical = null;
    this.iconTxt = null;
  },

  setTitle(title)
  {
    this.meta.title = title;
  },

  setMetaAuthor(author)
  {
    this.meta.author = author;
  },

  setMetaDescription(description)
  {
    this.meta.description = description;
  },

  setMetaKeywords(keywords)
  {
    this.meta.keywords = keywords;
  },

  setLinksForAlternateLanguages(links)
  {
    this.alternateLinksForLanguages = links;
  },

  setLinkCanonical(link)
  {
    this.linkCanonical = link;
  },

  setIcon(href, type = "image/png")
  {
    this.iconTxt = '<link rel="icon" type="' + type + '" href="' + href + '" />';
  },

  render()
  {
    let txt = '<head>' + LB;

    // title and metas
    txt += '<meta charset="UTF-8">' + LB;

    if (K.Object.isNotNull(this.meta.title))
    {
      txt += '<title>' + this.meta.title + '</title>' + LB;
    }

    if (K.Object.isNotNull(this.meta.description))
    {
      txt += '<meta name="description" content="' + K.NateHtmlProto.escapeHtmlAttribute(this.meta.description) + '">' + LB;
    }

    if (K.Object.isNotNull(this.meta.keywords))
    {
      txt += '<meta name="keywords" content="' + K.NateHtmlProto.escapeHtmlAttribute(this.meta.keywords) + '">' + LB;
    }

    if (K.Object.isNotNull(this.meta.author))
    {
      txt += '<meta name="author" content="' + K.NateHtmlProto.escapeHtmlAttribute(this.meta.author) + '">' + LB;
    }

    txt += '<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>' + LB;
    txt += '<meta name="viewport" content="width=device-width, initial-scale=1">' + LB;

    if (K.Object.isNotNull(this.iconTxt))
    {
      txt += this.iconTxt;
    }

    // alternate links for different langauges
    if (K.Object.isNotNull(this.alternateLinksForLanguages))
    {
      for (let langId in this.alternateLinksForLanguages)
      {
        const url = this.alternateLinksForLanguages[langId];

        txt += '<link rel="alternate" hreflang="' + langId + '" href="' + url + '" />' + LB;
      }
    }

    // canonical link
    if (K.Object.isNotNull(this.linkCanonical))
    {
      txt += '<link rel="canonical" href="' + this.linkCanonical + '" />';
    }

    // css code
    if (K.Object.isNotNull(this.css != ''))
    {
      if (EMIT_STATS_TO_CONSOLE_LOG)
      {
        console.log('head/css   :', (this.css.length / 1024).toFixed(2), 'KB');
      }

      txt += '<style>' + LB + this.css + LB + '</style>' + LB;
    }

    // js code
    const headJsCode = this.htmlDocument.jsGetCollector('head').getAllAsTag();

    if (EMIT_STATS_TO_CONSOLE_LOG)
    {
      console.log('head/js    :', (headJsCode.length / 1024).toFixed(2), 'KB');
    }

    txt += headJsCode;

    // finish
    txt += '</head>' + LB;

    return txt;
  },

  pushCss(css)
  {
    this.css += css.trim() + LB;
  }
});

K.NateHtmlDocumentProto = Object.assign({}, K.NateHtmlProto,
{
  init(parent, namespace)
  {
    K.NateHtmlProto.init.call(this, parent, namespace);

    this.theHead = K.NateHtmlHead(this);
    this.theBody = K.NateHtmlBody(this);

    this.jsPipes = {
      head:    K.JsCollector(),
      bodyEnd: K.JsCollector(),
      onLoad:  K.JsCollector(),
    };

    this.resourcesToLoad = {
      css:        [],
      js_head:    [],
      js_bodyEnd: [],
      js_onLoad:  [],
    };

    this.resourcesToLoadCnt  = 0;
    this.resourcesLoadDoneCb = null;
    this.waitingToEmit       = false;
    this.langId              = null;

    // debugging helpers
    if (EMIT_RESOURCE_LOADING_TO_CONSOLE_LOG) {
      this.LOG_resourceLoading = console.log;
    } else {
      this.LOG_resourceLoading = () => {};
    }
  },

  head()
  {
    return this.theHead;
  },

  body()
  {
    return this.theBody;
  },

  render()
  {
    let langMeta = '';

    if (K.Object.isNotNull(this.langId))
    {
      langMeta = ' lang="' + this.langId + '"';
    }

    if (EMIT_STATS_TO_CONSOLE_LOG)
    {
      console.log('------------------------------------------------------');
    }

    const bodyHtml = this.theBody.render();
    const headHtml = this.theHead.render();

    if (EMIT_STATS_TO_CONSOLE_LOG)
    {
      console.log('body       :', (bodyHtml.length / 1024).toFixed(2), 'KB');
      console.log('head       :', (headHtml.length / 1024).toFixed(2), 'KB');
    }

    let txt = '';

    txt += '<!DOCTYPE html>' + LB;
    txt += '<html' + langMeta + '>' + LB;
    txt += headHtml;
    txt += bodyHtml;
    txt += '</html>' + LB;

    return txt;
  },

  setLang(langId)
  {
    this.langId = langId;
  },

  loadResource(resourceData, done) {
    const cacheEntry = RESOURCE_CACHE[resourceData.path];

    if (RESOURCE_CACHE_ON && cacheEntry) {
      if (cacheEntry === RESOURCE_CACHE_STATE_PENDING) {
        // This resource is beeing loaded by another Nate instance.
        // Delay the work to use cached result built by another instance, so
        // we don't call done callbck yet.
        this.LOG_resourceLoading('[Nate] RESOURCE_CACHE already pending !');

        resourceData.loadResourceCalled = false;

        if (this.resourcesToLoadCnt === 1) {
          // It's the last resource in current instance queue, so we can't
          // retry load by itself.
          // Delay the job until one of other Nate instance finished and then
          // it will respawn us.
          if (RESOURCES_WAITING_OBJECTS.indexOf(this) === -1) {
            RESOURCES_WAITING_OBJECTS.push(this);
          }
        }

      } else {
        // Resource already loaded and cached. Just use it.
        this.LOG_resourceLoading('[Nate] RESOURCE_CACHE hit !');
        done(cacheEntry)
      }

    } else {
      // First resource hit or cache disabled.
      // Load resource the first time and cache for further use if needed.
      this.LOG_resourceLoading('[Nate] RESOURCE_CACHE miss !');

      // Avoid loading the same resource many time on first hit.
      RESOURCE_CACHE[resourceData.path] = RESOURCE_CACHE_STATE_PENDING;

      // Load resource from disk.
      fs.readFile(resourceData.path, 'utf8', (readError, data) => {
        if (readError) {
          // Error while loading resource from disk.
          console.log(readError);
          throw new Error('File loading failed from path:' + resourceData.path);

        } else {
          // Success - resource loaded from disk.
          // Cache result for further calls.
          RESOURCE_CACHE[resourceData.path] = data;
          done(data);
        }
      });
    }
  },

  // important:
  //   done() callback is not called at the moment the resource is loaded as this may cause change of order
  //   (for example, loading: A-B-C, then calling done(): A-C-B, may cause a lot of problems)
  //   done() is called in right order after ALL resources are loaded
  _onResourceLoaded(resourceData, data)
  {
    resourceData.loaded = true;
    this.resourcesToLoadCnt--;
    this.LOG_resourceLoading('[Nate] loaded resource:', resourceData.path, '(', 'total pending:', RESOURCES_LOAD_PENDING_CNT, ')');
    resourceData.loadedContent = data;
    this._resourcesCheckForPendingResources()
    this._resourcesCheckForResourcesReady();
  },

  _triggerResourceLoad(resourceData)
  {
    if (RESOURCES_LOAD_PENDING_CNT < RESOURCES_LOAD_PENDING_LIMIT)
    {
      RESOURCES_LOAD_PENDING_CNT++;

      // get from cache or trigger loading resource
      this.LOG_resourceLoading('[Nate] trigger resource load:', resourceData.path, '(', 'total pending:', RESOURCES_LOAD_PENDING_CNT, ')');

      resourceData.loadResourceCalled = true;

      this.loadResource(resourceData, (data) => {
        RESOURCES_LOAD_PENDING_CNT--;
        this._onResourceLoaded(resourceData, data);
      });

    } else {
      console.log('[Nate] WARNING! Too many open resource files. Pending resources limit reached (' + RESOURCES_LOAD_PENDING_CNT + '). Performance may be decreased.');

      if (this.resourcesToLoadCnt === 1) {
        // There are no free load resource slots even for the first resource.
        // So, we can't start work for this object.
        // Delay the job related to this object until other one finished its work.
        if (RESOURCES_WAITING_OBJECTS.indexOf(this) === -1) {
          RESOURCES_WAITING_OBJECTS.push(this);
        }
      }
    }
  },

  addResourceToLoad(pipe, resourceData, done)
  {
    // add load request to loading-pipe
    this.resourcesToLoadCnt++;
    resourceData.loaded = false;
    resourceData.done   = done;
    this.resourcesToLoad[pipe].push(resourceData);
    this.LOG_resourceLoading('[Nate] add resource:', resourceData.path);
    this._triggerResourceLoad(resourceData);
  },

  _resourcesCheckForPendingResources()
  {
    if (!this._resourcesCheckForPendingResourcesCalled)
    {
      this._resourcesCheckForPendingResourcesCalled = true;

      this.LOG_resourceLoading('[Nate] check for pending resources');

      // Check are there any pending resources to trigger.
      // Possible improvement: optimize it (avoid loop after each load).
      for (let pipe in this.resourcesToLoad)
      {
        this.resourcesToLoad[pipe].forEach((resourceData) => {
          if (!resourceData.loadResourceCalled)
          {
            this._triggerResourceLoad(resourceData);
          }
        })
      }

      this._resourcesCheckForPendingResourcesCalled = false;
    }
  },

  _resourcesCheckForResourcesReady()
  {
    if ((this.waitingToEmit) && (this.resourcesToLoadCnt == 0))
    {
      if (K.Object.isNotNull(this.resourcesLoadDoneCb))
      {
        this._resourcesLoadDoneCb();
        this.resourcesLoadDoneCb = null;
      }
    }
  },

  _resourcesLoadDoneCb()
  {
    this.LOG_resourceLoading('[Nate] All resources loaded...');

    for (let resourceType in this.resourcesToLoad)
    {
      this.resourcesToLoadItem = this.resourcesToLoad[resourceType];

      for (let resourceItemIdx in this.resourcesToLoadItem)
      {
        const resourceItem = this.resourcesToLoadItem[resourceItemIdx];

        resourceItem.done(resourceItem.loadedContent)
      }
    }

    if (K.Object.isNotNull(this.resourcesLoadDoneCb))
    {
      this.resourcesLoadDoneCb();
    }

    // We finished all work related to resources for this object.
    // Maybe some other object is waiting for free resources slot?
    if (RESOURCES_WAITING_OBJECTS.length > 0) {
      RESOURCES_WAITING_OBJECTS.shift()._resourcesCheckForPendingResources();
    }
  },

  cssFromStaticFile(path, done)
  {
    this.addResourceToLoad('css', {path: path}, (data) =>
    {
      this.theHead.pushCss(data);

      if (K.Object.isNotNull(done))
      {
        done();
      }
    });
  },

  // supported pipes are:
  //  head - goes to <head></head>
  //  bodyEnd - goes to bottom of <body></body>
  //  onLoad - goes to jQuery onLoad handler at the end of <body></body> section
  jsGetCollector(pipeName)
  {
    return this.jsPipes[pipeName];
  },

  jsFromStaticFile(path, pipeName, done)
  {
    K.Error.reportIfParameterNotSet(path, 'javascript path');

    this.addResourceToLoad('js_' + pipeName, {path: path}, (data) =>
    {
      this.jsGetCollector(pipeName).pushFromTxt(data);

      if (EMIT_STATS_TO_CONSOLE_LOG)
      {
        console.log('[', path, ']', (data.length / 1024).toFixed(2), 'KB');
      }

      if (K.Object.isNotNull(done))
      {
        done();
      }
    });
  },

  coffeeFromStaticFile(path, pipeName, done)
  {
    K.Error.reportIfParameterNotSet(path, 'coffeeScript path');

    this.addResourceToLoad('js_' + pipeName, {path: path}, (data) =>
    {
      let compiled = null;

      // compile or get from cache
      if (RESOURCE_CACHE_ON && K.Object.isNotNull(RESOURCE_COMPILED_CACHE[path]))
      {
        compiled = RESOURCE_COMPILED_CACHE[path];
      }
      else
      {
        compiled = coffee.compile(data);

        RESOURCE_COMPILED_CACHE[path] = compiled;
      }

      // emit and done()
      this.jsGetCollector(pipeName).pushFromTxt(compiled);

      if (EMIT_STATS_TO_CONSOLE_LOG)
      {
        console.log('[', path, ']', (compiled.length / 1024).toFixed(2), 'KB');
      }

      if (K.Object.isNotNull(done))
      {
        done();
      }
    });
  },

  _onReadyToEmit(done)
  {
    this.waitingToEmit = true;
    this.resourcesLoadDoneCb = done;
    this._resourcesCheckForResourcesReady();
  },

  emitAsResponse(httpResponse, cb)
  {
    this._onReadyToEmit(() =>
    {
      const responseBody = this.render();

      httpResponse.send(responseBody);

      if (K.Object.isNotNull(cb))
      {
        const responseStats = {htmlSize: responseBody.length};

        cb(responseStats);
      }
    });
  },

  emitToString(cb)
  {
    this._onReadyToEmit(() =>
    {
      if (K.Object.isNotNull(cb))
      {
        cb(this.render());
      }
    });
  }
});

K.NateHtmlBodyProto = Object.assign({}, K.NateHtmlElemProto,
{
  init(parent, namespace)
  {
    K.NateHtmlElemProto.init.call(this, parent, namespace);

    this.htmlDocument     = parent;
    this.tagOpenCloseMode = K.NateXmlAbstractProto.JUST_CHILDREN;
  },

  render()
  {
    const jsBodyEnd = this.htmlDocument.jsGetCollector('bodyEnd').getAllAsTag();
    const jsOnLoad  = this.htmlDocument.jsGetCollector('onLoad').getAllAsOnLoadCode();

    if (EMIT_STATS_TO_CONSOLE_LOG)
    {
      console.log('js/bodyEnd :', (jsBodyEnd.length / 1024).toFixed(2), 'KB');
      console.log('js/onLoad  :', (jsOnLoad.length / 1024).toFixed(2), 'KB');
    }

    let txt = '<body';

    txt += '>';
    txt += K.NateXmlAbstractProto.render.call(this); // TODO: super.render() ?
    txt += jsBodyEnd;
    txt += jsOnLoad;
    txt += '</body>';

    return txt;
  }
});

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

K.nateHtmlStaticNamespace =
  K.nateXmlStaticNamespace.createExtension('HtmlStatic', {nateProto: K.NateHtmlElemProto})

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

const commonStyleAttributeSetter = (nNode, key, value) => {
  nNode.updateStyle(key, value);
}

const commonJsHandlerAttributeSetter = (nNode, key, value) => {
  switch (typeof(value)) {
    case 'function': {
      // We got JS function - get source code.
      value = value.toString()

      // Remove function() {...} wrapper if existent.
      const idxFunction = value.indexOf('function')

      if (idxFunction !== -1) {
        const idxBegin = value.indexOf('{', idxFunction) + 1
        const idxEnd   = value.lastIndexOf('}')

        value = value.substr(idxBegin, idxEnd - idxBegin)
      }

      nNode.tagParamsList[key] = value

      break
    }

    case 'string': {
      // We got JS source as pure string - just pass it as is.
      nNode.tagParamsList[key] = value

      break
    }

    default: {
      // Fatal - unexpected handler format.
      // Should never happen on production.
      console.log('PANIC! Unexpected ', key, 'handler', typeof(value), value);

      break
    }
  }
}

K.BSC.nateCommonHtmlAttributes.forEach((key) => {
  K.nateHtmlStaticNamespace.addSetter(key, K.NateXmlAbstractProto.commonAttributeSetter)
})

K.BSC.nateCommonHtmlProperties.forEach((key) => {
  K.nateHtmlStaticNamespace.addSetter(key, K.NateXmlAbstractProto.commonAttributeSetter)
})

K.BSC.nateCommonStyleAttributes.forEach((key) => {
  K.nateHtmlStaticNamespace.addSetter(key, commonStyleAttributeSetter)
})

K.nateHtmlStaticNamespace.addSetter('style', K.NateXmlAbstractProto.commonAttributeSetter)

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

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

K.nateHtmlStaticNamespace.addSetter('innerHTML',
  K.NateXmlAbstractProto.commonInnerContentSetter)

// Possible imprevement: stringify json at render time.
K.nateHtmlStaticNamespace.addSetter('innerJSON',
  K.NateXmlAbstractProto.commonInnerContentSetter)

K.nateHtmlStaticNamespace.addSetter('rect', (nNode, key, value) => {
  // TODO: Not implemented.
})

K.nateHtmlStaticNamespace.addSetter('textContent', (nNode, key, value) => {
  const escapedValue = K.NateHtmlProto.escapeHtmlContent(value)
  K.NateXmlAbstractProto.commonInnerContentSetter(nNode, 'textContent', escapedValue)
})

K.nateHtmlStaticNamespace.addSetter('innerText', (nNode, key, value) => {
  // Convert \n to <br>
  const escapedValue = K.NateHtmlProto.nl2br(K.NateHtmlProto.escapeHtmlContent(value))
  K.NateXmlAbstractProto.commonInnerContentSetter(nNode, 'innerText', escapedValue)
})

K.nateHtmlStaticNamespace.addSetter('readOnly', (nNode, key, value) => {
  if (value) {
    // Adjust to DOM beheavior.
    nNode.tagParamsList['readonly'] = ''
  } else if (nNode.tagParamsList['readonly']) {
    delete nNode.tagParamsList['readonly']
  }
})

K.nateHtmlStaticNamespace.addSetter('checked' , K.NateXmlAbstractProto.commonOnOffAttributeSetter)
K.nateHtmlStaticNamespace.addSetter('selected', K.NateXmlAbstractProto.commonOnOffAttributeSetter)

K.nateHtmlStaticNamespace.addSetter('onscroll', commonJsHandlerAttributeSetter)
K.nateHtmlStaticNamespace.addSetter('onclick' , commonJsHandlerAttributeSetter)

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

K.BSC.nateCommonHtmlOpenCloseTags.forEach((key) => {
  K.nateHtmlStaticNamespace.addCreateFunction(key, K.NateXmlAbstractProto.tagOpenClose);
})

K.BSC.nateCommonHtmlOpenCloseAtOnceTags.forEach((key) => {
  K.nateHtmlStaticNamespace.addCreateFunction(key, K.NateXmlAbstractProto.tagOpenCloseAtOnce);
})

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

  K.nateHtmlStaticNamespace.addCreateFunction(key, function(tagName, params = {}) {
    params = K.Object.merge({type: inputType}, params);

    return this.tagOpenCloseAtOnce('input', params);
  });
})

K.nateHtmlStaticNamespace.addCreateFunction('svg', function() {
  return K.NateSvgDocument(this, K.BSC.NateAbstractProto.USE_DEFAULT_NAMESPACE);
});

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

K.NateHtmlElem     = K.nateHtmlStaticNamespace.createFactoryFunction(K.NateHtmlElemProto);
K.NateHtmlBody     = K.nateHtmlStaticNamespace.createFactoryFunction(K.NateHtmlBodyProto);
K.NateHtmlHead     = K.nateHtmlStaticNamespace.createFactoryFunction(K.NateHtmlHeadProto);
K.NateHtmlDocument = K.nateHtmlStaticNamespace.createFactoryFunction(K.NateHtmlDocumentProto);

K.JsCollector = function() {
  const thiz = Object.create(K.JsCollectorProto);

  thiz.init();

  return thiz;
}