knate/NateHtmlDom.coffee

# Hack for IE 8 not allowing to add properties to text nodes
# So, we'll use <span> instead of text nodes

USE_SPAN_INSTEAD_OF_TEXT_NODES = false
try
  testTxtNode = document.createTextNode('')
  testTxtNode.testProperty = ''
catch Error
  USE_SPAN_INSTEAD_OF_TEXT_NODES = true

K = window.K

class K.NateHtmlDom
  @ON_CLICK_EVENT_BLOCKER: () ->
    event = arguments[0] || window.event
    rv = (event.button != 0)
    event.returnValue = rv
    return rv

  constructor: (parentOrElem) ->
    @children = []
    @nateParent = null
    @elem = null
    # if there is parentOrElem, check the type of it
    if parentOrElem?
      if parentOrElem instanceof K.NateHtmlDom
        @nateParent = parentOrElem
        throw 'Nate parent is not properly handled in constructor yet !'
      else if K.Elem.isElem(parentOrElem) or K.Elem.isText(parentOrElem)
        if parentOrElem.nate?
          throw 'Cannot create 2nd Nate object for same elem! The element you provided as elem for Nate is already a elem for different nate object'
        else
          # first, attach @ (this Nate object) to element
          @attachNateToElem(parentOrElem)
          # then, check if DOM parent is Nate object - if yes, tell it about me
          if parentOrElem.parentNode? and parentOrElem.parentNode.nate?
            parentOrElem.parentNode.nate.addNateChild @
      else
        throw 'parentOrElem should be Nate object or html-element'
    else
      throw 'parentOrElem should be Nate object or html-element - cannot be null'

  deleteAllChildren: () ->
    # TODO: optimize this
    while @children.length > 0
      @children[0].delete()

  delete: () ->
    #@deleteAllChildren()
    if @nateParent?
      @nateParent.removeNateChild(@)
    else
      @elem.style.backgroundColor = '#f00000'
      throw 'Removal from non-nates is NOT supported. You tried to remove [elem:' + @elem + ']'

  addNateChild: (nateChild) ->
    if nateChild.nateParent?
      throw 'Moving nate-child between parents not yet supported.'

    nateChild.nateParent = @
    @children.push(nateChild)
    if @elem? and nateChild.elem? and (nateChild.elem.parentNode isnt @elem)
      @elem.appendChild(nateChild.elem)

  removeNateChild: (nateChild) ->
    if nateChild.nateParent != @
      throw 'Can\'t remove nateChild from me, as the child claims his parent is another object.'

    K.Array.removeAll(@children, nateChild)
    if @elem? and nateChild.elem
      try
        @elem.removeChild(nateChild.elem)
      catch err
        console.log 'Error during removeChild parent is:', @elem, 'child is:', nateChild.elem
    nateChild.nateParent = null

  newNate: (elem = null) ->
    return new K.NateHtmlDom(elem)

  newChildFromElement: (elem, text) ->
    newNate = @newNate(elem)
    @addNateChild(newNate)
    if text?
      newNate.set('innerHTML', text)
    return newNate

  newTextNode: (text = '') ->
    if USE_SPAN_INSTEAD_OF_TEXT_NODES
      return @newSpan(text)
    else
      textNode = document.createTextNode(text)
      return @newChildFromElement(textNode)

  newTxt: (theTxt) ->
    return @newTextNode(theTxt)

  newSpan: (text = null) ->
    span = document.createElement('span')
    return @newChildFromElement(span, text)

  newDiv: (text = null) ->
    div = document.createElement('div')
    return @newChildFromElement(div, text)

  newA: (text = null) ->
    a = document.createElement('a')
    return @newChildFromElement(a, text)

  newB: (text = null) ->
    a = document.createElement('b')
    return @newChildFromElement(a, text)

  newH1: (text = null) ->
    a = document.createElement('h1')
    return @newChildFromElement(a, text)

  newH2: (text = null) ->
    a = document.createElement('h2')
    return @newChildFromElement(a, text)

  newH3: (text = null) ->
    a = document.createElement('h3')
    return @newChildFromElement(a, text)

  newImg: (text = null) ->
    a = document.createElement('img')
    return @newChildFromElement(a, text)

  newLabel: (text = null) ->
    a = document.createElement('label')
    return @newChildFromElement(a, text)

  newP: (text = null) ->
    a = document.createElement('p')
    return @newChildFromElement(a, text)

  newUl: (text = null) ->
    a = document.createElement('ul')
    return @newChildFromElement(a, text)

  newLi: (text = null) ->
    a = document.createElement('Li')
    return @newChildFromElement(a, text)

  #
  # HTML Table
  #
  newTable: (text = null) ->
    a = document.createElement('table')
    return @newChildFromElement(a, text)

  newTBody: (text = null) ->
    a = document.createElement('tbody')
    return @newChildFromElement(a, text)

  newTr: (text = null) ->
    a = document.createElement('tr')
    return @newChildFromElement(a, text)

  newTd: (text = null) ->
    a = document.createElement('td')
    return @newChildFromElement(a, text)

  newTh: (text = null) ->
    a = document.createElement('th')
    return @newChildFromElement(a, text)

  #
  # HTML Inputs
  #
  newTextArea: () ->
    textarea = document.createElement('textarea')
    return @newChildFromElement(textarea)

  newOption: (text = null) ->
    option = document.createElement('option')
    return @newChildFromElement(option, text)

  newSelect: () ->
    return @newInputSelect()

  newInputCheckbox: () ->
    input = document.createElement('input')
    input.type = "checkbox"
    return @newChildFromElement(input)

  newInputText: () ->
    input = document.createElement('input')
    input.type = "text"
    return @newChildFromElement(input)

  newInputPassword: () ->
    input = document.createElement('input')
    input.type = "password"
    return @newChildFromElement(input)

  newInputRadio: () ->
    input = document.createElement('input')
    input.type = "radio"
    return @newChildFromElement(input)

  newInputSelect: () ->
    input = document.createElement('select')
    return @newChildFromElement(input)

  #
  # SVG, canvas etc.
  #
  newCanvas: (text = null) ->
    a = document.createElement('canvas')
    return @newChildFromElement(a, text)

  newSvg: () ->
    a = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
    return @newChildFromElement(a)

  #
  # nate methods
  #
  attachNateToElem: (elem) ->
    # avoid registering >1 Nate objects to one elem
    if elem.nate?
      throw 'Provided elem already has Nate object'

    # remove from current element is not supported
    if @elem?
      throw 'This nate object is already attached to element.'

    # attach this object to elem
    @elem = elem
    @elem.nate = @
    for child in @children
      throw 'This needs to be updated...'
      @elem.appendChild(child)

  getElem: () ->
    return @elem

  get$: () ->
    return $(@elem)

  setText: (txt) ->
    @set('innerHTML', txt)
    return @

  setOnClickEventBlocker: () ->
    @set('onclick', K.NateHtmlDom.ON_CLICK_EVENT_BLOCKER)
    return @

  set: (param, value) ->
    switch param
      when 'rect'
        value.applyToHtmlElement(@elem)
      when 'checked', 'href', 'id', 'innerHTML', 'value', \
      'selected', 'onclick', 'src', 'rowSpan', 'colSpan'
        K.updateProperty(@elem, param, value)
      when 'for' # 'for' in html  maps to 'htmlFor' in js
        K.updateProperty(@elem, 'htmlFor', value)
      when 'style'
        K.updateProperty(@elem.style, 'cssText', value)
      when 'cssText', 'cursor', \
      'display', 'float', \
      'height', 'width', 'left', 'top', 'right', 'bottom',\
      'margin', 'padding', \
      'overflow', 'overflowX', 'overflowY', \
      'position', 'visibility', 'zIndex', \
      'textAlign', 'verticalAlign', \
      'backgroundColor', 'color', \
      'border', 'borderCollapse', \
      'font', 'fontWeight'
        K.updateProperty(@elem.style, param, value)
      when 'on'
        # TODO: handling of other things than 'block'
        if value
          @set 'display', 'block'
        else
          @set 'display', 'none'
      when 'class'
        K.updateProperty(@elem, 'className', value)
        #@get$().addClass(value)
      when 'cols', 'name', 'rows', 'wrap'
        @elem.setAttribute(param, value)
      else
        throw 'No handling for given property implemented: ' + param
    return @

  setData: (key, value) ->
    @elem.setAttribute('data-' + key, value)
    return @

  _decodeHtmlEntitiesToPlainText: (html) ->
    # Example:
    #   input  : Median &amp; average
    #   output : Median & average
    tempDivElement = document.createElement('div')
    tempDivElement.innerHTML = html

    if tempDivElement.childNodes.length is 0
      rv = ""
    else
      rv = tempDivElement.childNodes[0].nodeValue
    return rv

  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 = @_decodeHtmlEntitiesToPlainText(title)