coffeescript-ui/src/base/dom.coffee

Coffeescript User Interface System

###
 * coffeescript-ui - Coffeescript User Interface System (CUI)
 * Copyright (c) 2013 - 2016 Programmfabrik GmbH
 * MIT Licence
 * https://github.com/programmfabrik/coffeescript-ui, http://www.coffeescript-ui.org
###

class CUI.dom

	@data: (node, key, data) ->
		if not node
			return undefined

		if node.hasOwnProperty('DOM')
			node = node.DOM

		CUI.util.assert(node instanceof HTMLElement, "dom.data","node needs to be instance of HTMLElement", node: node)

		if key == undefined
			return node.__dom_data or {}

		if CUI.util.isPlainObject(key)
			for k, v of key
				CUI.dom.data(node, k, v)
			return node

		if data == undefined
			return node.__dom_data?[key]

		if not node.__dom_data
			node.__dom_data = {}

		node.__dom_data[key] = data
		return node

	@removeData: (node, key) ->
		if not node
			return undefined

		if node.__dom_data
			delete(node.__dom_data[key])
			if CUI.util.isEmptyObject(node.__dom_data)
				delete(node.__dom_data)
		node

	# find an element starting from node, but never going
	# up
	@findElement: (node, selector, nodeFilter, forward=true, siblingOnly=false) ->
		els = @findElements(node, selector, nodeFilter, 1, forward, siblingOnly)
		if els.length == 0
			return null

		return els[0]

	# find an element starting from node, with going up
	@findNextElement: (node, selector, nodeFilter=false, forward=true, siblingOnly=true) ->
		el = @findElement(node, selector, nodeFilter, forward, siblingOnly)
		# console.debug "find next element", node, el
		if el
			return el

		# find next parent node which has a sibling
		while true
			node = node.parentNode
			# console.debug "checking next node", node

			if not node
				return null

			if forward
				sibling = node.nextElementSibling
			else
				sibling = node.previousElementSibling

			# console.debug "sibling", forward, sibling

			if sibling
				break

		@findNextElement(sibling, selector, nodeFilter, forward, false)

	@findPreviousElement: (node, selector, nodeFilter=false) ->
		@findNextElement(node, selector, nodeFilter, false)

	@findNextVisibleElement: (node, selector, forward=true) ->
		@findNextElement(node, selector, ((node) =>
			# console.debug "node visible?", DOM.isVisible(node), node
			CUI.dom.isVisible(node)), forward)

	@findPreviousVisibleElement: (node, selector) ->
		@findNextVisibleElement(node, selector, false)

	@findNextSiblings: (node, selector, nodeFilter=false) ->
		@findElements(node, selector, nodeFilter, null, true, true)

	@findPreviousSiblings: (node, selector, nodeFilter=false) ->
		@findElements(node, selector, nodeFilter, null, false, true)

	# find the next node starting from node start
	# which matches the selector
	@findElements: (node=document.documentElement, selector=null, nodeFilter=false, maxEls=null, forward=true, siblingOnly=false, elements) ->
		if not elements
			CUI.util.assert(node instanceof HTMLElement, "DOM.findElement", "node needs to be instanceof HTMLElement.", node: node, selector: selector)
			elements = []
			check_node = not siblingOnly
		else
			check_node = true

		accept_node = not nodeFilter or nodeFilter(node)
		# console.debug "findElement", maxEls, node, accept_node, nodeFilter

		if check_node and accept_node
			# console.debug "checking node", node
			if selector == null or CUI.dom.matches(node, selector)
				# console.debug "node ok..."
				elements.push(node)
				if elements.length == maxEls
					# console.debug "enough!", elements.length, maxEls
					return elements
			else
				; # console.debug "node not ok..."


		if forward
			child = node.firstElementChild
			sibling = node.nextElementSibling
		else
			child = node.lastElementChild
			sibling = node.previousElementSibling

		# console.debug "child/sibling", child, sibling, siblingOnly

		if child and not siblingOnly and accept_node
			# console.debug "dive to", node
			@findElements(child, selector, nodeFilter, maxEls, forward, siblingOnly, elements)
			if elements.length == maxEls
				return elements

		if sibling
			# console.debug "sibling to", sibling
			@findElements(sibling, selector, nodeFilter, maxEls, forward, siblingOnly, elements)
			if elements.length == maxEls
				return elements

		# console.debug "nothing found, returning with", elements.length
		return elements


	@children: (node, filter) ->
		children = []

		for child, idx in node.children
			if not filter or @is(child, filter)
				children.push(child)

		children

	# finds the first element child which is not
	# filtered by the optional node filter
	@firstElementChild: (node, nodeFilter) ->
		child = node.firstElementChild
		while true
			if not child
				return null

			if not nodeFilter or @is(child, nodeFilter)
				return child

			child = child.nextElementSibling

	@lastElementChild: (node, nodeFilter) ->
		child = node.lastElementChild
		while true
			if not child
				return null

			if not nodeFilter or @is(child, nodeFilter)
				return child

			child = child.previousElementSibling

	@nextElementSibling: (node, nodeFilter) ->
		sibling = node

		while true
			sibling = sibling.nextElementSibling
			if not sibling
				return null

			if not nodeFilter or @is(sibling, nodeFilter)
				return sibling


	@previousElementSibling: (node, nodeFilter) ->
		sibling = node

		while true
			sibling = sibling.previousElementSibling
			if not sibling
				return null

			if not nodeFilter or @is(sibling, nodeFilter)
				return sibling


	@removeAttribute: (node, key) ->
		if not node
			return null

		node.removeAttribute(key)
		node

	@setAttribute: (_node, key, value) ->
		if not _node
			return null

		node = _node.DOM or _node

		if CUI.util.isNull(value) or value == false
			return @removeAttribute(node, key)

		if value == true
			node.setAttribute(key, key)
		else
			node.setAttribute(key, value)

		node

	@hasAttribute: (node, key) ->
		if not node
			return false

		if node.hasOwnProperty('DOM')
			node = node.DOM

		node.hasAttribute(key)

	@setAttributeMap: (_node, map) ->
		if not _node
			return null

		node = _node.DOM or _node

		if not map
			return node

		for key, value of map
			CUI.dom.setAttribute(node, key, value)

		node

	@width: (docElem, value) ->
		if docElem == document or docElem == window
			if value != undefined
				CUI.util.assert(false, "CUI.dom.width", "Unable to set width on a non HTMLElement", docElem: docElem)
			return window.innerWidth

		if value == undefined
			@getDimension(docElem, "contentBoxWidth")
		else
			@setDimension(docElem, "contentBoxWidth", value)

	@height: (docElem, value) ->
		if docElem == document or docElem == window
			if value != undefined
				CUI.util.assert(false, "CUI.dom.height", "Unable to set width on a non HTMLElement", docElem: docElem)
			return window.innerHeight

		if value == undefined
			@getDimension(docElem, "contentBoxHeight")
		else
			@setDimension(docElem, "contentBoxHeight", value)

	@__append: (node, content, append=true) ->
		if CUI.util.isNull(content)
			return node

		if CUI.util.isArray(content) or content instanceof HTMLCollection or content instanceof NodeList
			idx = 0
			len = content.length

			while idx < len
				@__append(node, content[idx], append)
				if len > content.length
					# leave idx == 0, list is live
				else
					idx++

				len = content.length

			return node

		switch typeof(content)
			when "number", "boolean"
				append_node = document.createTextNode(content + "")
			when "string"
				append_node = document.createTextNode(content)
			else
				if content.hasOwnProperty('DOM')
					append_node = content.DOM
					if CUI.util.isNull(append_node)
						return
				else
					append_node = content

		if append
			CUI.util.assert(append_node instanceof Node, "CUI.dom.append", "Content needs to be instanceof Node, string, boolean, or number.", node: append_node)
			node.appendChild(append_node)
		else
			CUI.util.assert(append_node instanceof Node, "CUI.dom.prepend", "Content needs to be instanceof Node, string, boolean, or number.", node: append_node)
			node.insertBefore(append_node, node.firstChild)

		return node

	@replace: (node, content) ->
		if node.hasOwnProperty('DOM')
			node = node.DOM
		@empty(node)
		@append(node, content)

	@prepend: (node, content) ->
		@__append(node, content, false)

	@append: (node, content) ->
		@__append(node, content)

	# @getById: (uniqueId) ->
	# 	dom_el = document.getElementById("cui-dom-element-"+uniqueId)
	# 	if not dom_el
	# 		return null
	# 	DOM.data(dom_el, "element")

	@getAttribute: (node, key) ->
		if node.hasOwnProperty('DOM')
			node = node.DOM

		node.getAttribute(key)

	@remove: (_node) ->
		node = (_node?.DOM or _node)

		if not node
			return null

		node.parentNode?.removeChild(node)
		node

	@empty: (node) ->
		if not node
			return null

		if node.hasOwnProperty('DOM')
			node = node.DOM

		CUI.util.assert(CUI.util.isElement(node), "CUI.dom.empty", "top needs to be Element", node: node)
		while last = node.lastChild
			node.removeChild(last)
		node

	# checks if any of the classes are set
	@hasClass: (element, cls) ->
		if not element or not cls
			return null

		if element.DOM
			element = element.DOM

		for _cls in cls.trim().split(/\s+/)
			if _cls == ""
				continue
			if element.classList.contains(_cls)
				return true
		return false

	@toggleClass: (element, cls) ->
		@setClass(element, cls, not @hasClass(element, cls))

	@setClass: (element, cls, on_off) ->
		if on_off
			@addClass(element, cls)
		else
			@removeClass(element, cls)
		return on_off

	@setAria: (element, attr, value) ->
		if value == true
			@setAttribute(element, "aria-"+attr, "true")
		else if value == false
			@setAttribute(element, "aria-"+attr, "false")
		else
			@setAttribute(element, "aria-"+attr, value)

	@addClass: (element, cls) ->
		if not cls or not element
			return element

		for _cls in cls.trim().split(/\s+/)
			if _cls == ""
				continue
			(element.DOM or element).classList.add(_cls)
		element

	@removeClass: (element, cls) ->
		if not cls or not element
			return element

		for _cls in cls.trim().split(/\s+/)
			if _cls == ""
				continue
			(element.DOM or element).classList.remove(_cls)
		element


	# returns the relative position of either
	# the next scrollable parent or positioned parent
	@getRelativeOffset: (node, untilElem = null, ignore_margin = false) ->
		CUI.util.assert(CUI.util.isElement(node), "CUI.dom.getRelativePosition", "Node needs to HTMLElement.", node: node)
		dim_node = CUI.dom.getDimensions(node)
		parent = node.parentNode

		if ignore_margin
			margin_key_top = "viewportTop"
			margin_key_left = "viewportLeft"
		else
			margin_key_top = "viewportTopMargin"
			margin_key_left = "viewportLeftMargin"

		while true
			dim = CUI.dom.getDimensions(parent)

			if parent == document.body or
				parent == document.documentElement or
				parent == document
					offset =
						parent: parent
						top: dim_node[margin_key_top] + document.body.scrollTop
						left: dim_node[margin_key_left] + document.body.scrollLeft
					break

			if dim.canHaveScrollbar or
				parent == node.offsetParent or
				parent == untilElem
					offset =
						parent: parent
						top: dim_node[margin_key_top] - (dim.viewportTop + dim.borderTop) + dim.scrollTop
						left: dim_node[margin_key_left] - (dim.viewportLeft + dim.borderTop) + dim.scrollLeft

					break

			parent = parent.parentNode

			if not parent
				break

		# console.debug parent, node, offset.top, offset.left
		return offset

	@hasAnimatedClone: (node) ->
		!!node.__clone

	# if selector is set, watch matched nodes
	#
	@initAnimatedClone: (node, selector) ->

		@removeAnimatedClone(node)

		clone = node.cloneNode(true)

		node.__clone = clone

		if selector
			watched_nodes = CUI.dom.matchSelector(node, selector)
			clone.__watched_nodes = CUI.dom.matchSelector(clone, selector)
		else
			watched_nodes = CUI.dom.children(node)
			clone.__watched_nodes = CUI.dom.children(clone)

		offset = CUI.dom.getRelativeOffset(node)

		if not CUI.dom.isPositioned(offset.parent)
			node.__parent_saved_position = offset.parent.style.position
			offset.parent.style.position = "relative"

		CUI.dom.setStyle clone,
			position: "absolute"
			"pointer-events": "none"
			top: offset.top
			left: offset.left
			# left: "300px"

		node.style.opacity = "0"

		dim = CUI.dom.getDimensions(node)
		CUI.dom.addClass(clone, "cui-dom-animated-clone")

		# We need this micro DIV to push the scroll height / left
		div = CUI.dom.element("div", style: "position: absolute; opacity: 0; width: 1px; height: 1px;")
		clone.appendChild(div)

		CUI.dom.insertAfter(node, clone)

		CUI.dom.setDimension(clone, "marginBoxWidth", dim.marginBoxWidth)
		CUI.dom.setDimension(clone, "marginBoxHeight", dim.marginBoxHeight)

		for clone_child, idx in clone.__watched_nodes
			clone_child.__watched_node = watched_nodes[idx]

			CUI.dom.setStyle clone_child,
				position: "absolute"
				margin: 0

		@syncAnimatedClone(node)

		node.__clone.__syncScroll = =>
			div.style.top = (node.scrollHeight-1)+"px";
			div.style.left = (node.scrollWidth-1)+"px";
			clone.scrollTop = node.scrollTop
			clone.scrollLeft = node.scrollLeft

		CUI.Events.listen
			type: "scroll"
			instance: clone
			node: node
			call: =>
				node.__clone.__syncScroll()

		node.__clone.__syncScroll()
		node

	@syncAnimatedClone: (node) ->

		clone = node.__clone
		if not clone
			return

		for clone_child, idx in clone.__watched_nodes

			child = clone_child.__watched_node

			# We don't check if the child is still in DOM, for
			# now this case is being ignored.

			offset_new = @getRelativeOffset(child, node, true)

			CUI.dom.setStyle clone_child,
				top: offset_new.top
				left: offset_new.left
		node

	@removeAnimatedClone: (node) ->
		if node.hasOwnProperty("__parent_saved_position")
			node.style.position = node.__parent_saved_position or ""
			delete(node.__parent_saved_position)

		if not node.__clone
			return

		CUI.Events.ignore(instance: node.__clone)
		node.style.opacity = ""
		CUI.dom.remove(node.__clone)
		delete(node.__clone)
		node


	# sets the absolute position of an element
	@setAbsolutePosition: (element, offset) ->
		CUI.util.assert(CUI.util.isElement(element), "CUI.dom.setAbsolutePosition", "element needs to be an instance of HTMLElement", element: element, offset: offset)
		CUI.util.assert(CUI.util.isNumber(offset?.left) and CUI.util.isNumber(offset?.top), "CUI.dom.setAbsolutePosition", "offset.left and offset.top must be >= 0", element: element, offset: offset)
		# the offset needs to be corrected by the parent offset
		# of our DOM element
		offsetParent = element.offsetParent

		if offsetParent == document.documentElement
			layer_parent_offset =
				top: 0
				left: 0

			correct_offset =
				top: document.body.scrollTop
				left: document.body.scrollLeft
		else
			dim = CUI.dom.getDimensions(offsetParent)
			layer_parent_offset =
				top: dim.top
				left: dim.left

			# position: relative/absolute anchor
			# is the point between padding and border,
			# we need to adjust this to the border
			layer_parent_offset.top += dim.borderTopWidth
			layer_parent_offset.left += dim.borderLeftWidth

			correct_offset =
				top: dim.scrollTop
				left: dim.scrollLeft

		CUI.dom.setStyle(element,
			top: offset.top - layer_parent_offset.top + correct_offset.top
			left: offset.left - layer_parent_offset.left + correct_offset.left
		)

	@__failedDOMInserts = 0


	@waitForDOMRemove: (_opts) ->

		opts = CUI.Element.readOpts _opts, "CUI.dom.waitForDOMRemove",
			node:
				mandatory: true
				check: (v) ->
					CUI.dom.isNode(v)
			ms:
				default: 200
				check: (v) ->
					v > 0

		node = CUI.dom.getNode(opts.node)

		dfr = new CUI.Deferred()
		check_in_dom = =>
			if not CUI.dom.isInDOM(node)
				dfr.resolve()
				return

			CUI.setTimeout
				call: check_in_dom
				ms: opts.ms
				track: false

		check_in_dom()
		dfr.promise()


	@waitForDOMInsert: (_opts) ->

		opts = CUI.Element.readOpts _opts, "CUI.dom.waitForDOMInsert",
			node:
				mandatory: true
				check: (v) ->
					CUI.dom.isNode(v)

		node = CUI.dom.getNode(opts.node)

		if CUI.dom.isInDOM(node)
			return CUI.resolvedPromise(true)

		dfr = new CUI.Deferred()

		# If we use MutationObserver, and a not gets not inserted
		# we never free memory on these nodes we wait to be inserted.

		# mo = new MutationObserver =>
		# 	console.debug "waiting for dom insert", node
		# 	if DOM.isInDOM(node)
		# 		if dfr.state() == "pending"
		# 			# console.warn "inserted by mutation", node
		# 			dfr.resolve()

		# dfr.always =>
		# 	mo.disconnect()

		# mo.observe(document.documentElement, childList: true, subtree: true)

		# return dfr.promise()


		#add animation style
		for prefix in ["-webkit-", "-moz-", "-ms-", "-o-", ""]
			# nodeInserted needs to be defined in CSS!
			CUI.dom.setStyleOne(node, "#{prefix}animation-duration", "0.001s")
			CUI.dom.setStyleOne(node, "#{prefix}animation-name", "nodeInserted")

		timeout = null

		CUI.Events.wait
			node: node
			type: "animationstart"
			maxWait: -1
		.done =>

			if CUI.dom.isInDOM(node)
				dfr.resolve()
				return

			c = @__failedDOMInserts++

			console.warn("[##{c}] Element received animationstart event but is not in DOM yet. We poll with timeout 0.")

			tries = 0

			check_for_node = ->
				if CUI.dom.isInDOM(node)
					console.warn("[##{c}] Poll done, element is in DOM now.")
					dfr.resolve()
				else if tries < 10
					console.warn("[##{c}] Checking for node failed, try: ", tries)
					tries = tries + 1
					CUI.setTimeout(check_for_node, 0)
				else
					console.error("[##{c}] Checking for node failed. Giving up.", node)

			CUI.setTimeout(check_for_node, 0)

		.fail(dfr.reject)
		dfr.promise()


	@getNode: (node) ->
		if node.DOM and node != window
			node.DOM
		else
			node

	# small experiment, testing...
	@printElement: (_opts) ->
		opts = CUI.Element.readOpts _opts, "CUI.dom.printElement",
			docElem:
				check: (v) ->
					v instanceof HTMLElement
			title:
				default: "CUI-Print-Window"
				check: String
			windowName:
				default: "_blank"
				check: String
			windowFeatures:
				default: "width=400,height=800"
				check: String
			bodyClasses:
				default: []
				check: Array

		if opts.docElem == document.documentElement
			docElem = document.body
		else
			docElem = opts.docElem

		win = window.open("", opts.windowName, opts.windowFeatures)

		if not CUI.util.isEmpty(opts.title)
			win.document.title = opts.title

		for style_node in CUI.dom.matchSelector(document.head, "link[rel='stylesheet']")
			new_node = style_node.cloneNode(true)
			href = ez5.getAbsoluteURL(new_node.getAttribute("href"))
			new_node.setAttribute("href", href)
			console.debug "cloning css node for href", href
			win.document.head.appendChild(new_node)
		win.document.body.innerHTML = docElem.outerHTML
		win.document.body.classList.add("cui-dom-print-element")
		for cls in opts.bodyClasses
			win.document.body.classList.add(cls)
		win.print()

	@isNode: (node, level=0) ->
		if not node
			return false

		if node == document.documentElement or
			node == window or
			node == document or
			node.nodeType or
			(@isNode(node.DOM, level+1) and level == 0)
				true
		else
			false

	# Inserts the node like array "slice"
	@insertChildAtPosition: (node, node_insert, pos) ->
		CUI.util.assert(CUI.util.isInteger(pos) and pos >= 0 and pos <= node.children.length, "CUI.dom.insertAtPosition", "Unable to insert node at position ##{pos}.", node: node, node_insert: node_insert, pos: pos)
		if pos == node.children.length
			node.appendChild(node_insert)
		else if node.children[pos] != node_insert
			@insertBefore(node.children[pos], node_insert)

	@insertBefore: (_node, node_before) ->
		node = (_node?.DOM or _node)
		if not node
			return null

		if node_before
			node.parentNode.insertBefore(node_before, node)
		node

	@insertAfter: (_node, node_after) ->
		node = (_node?.DOM or _node)
		if not node
			return null

		if node_after
			node.parentNode.insertBefore(node_after, node.nextSibling)
		node

	@is: (node, selector) ->
		if not node
			return null

		if selector instanceof HTMLElement
			return node == selector

		if CUI.util.isFunction(selector)
			return !!selector(node)

		if node not instanceof HTMLElement
			return null

		@matches(node, selector)


	@matches: (node, selector) ->
		if not node
			return null

		node[CUI.dom.matchFunc](selector)

	@matchFunc: (->
		d = document.createElement("div")
		for k in ["matches", "webkitMatchesSelector", "mozMatchesSelector", "oMatchesSelector", "msMatchesSelector"]
			if d[k]
				return k
		CUI.util.assert(false, "Could not determine match function on docElem")
	)()

	@find: (sel) ->
		@matchSelector(document.documentElement, sel)

	@matchSelector: (docElem, sel, trySelf=false) ->
		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM

		CUI.util.assert(docElem instanceof HTMLElement or docElem == document, "CUI.dom.matchSelector", "docElem needs to be instanceof HTMLElement or document.", docElem: docElem)

		# console.error "matchSelector", docElem, sel, trySelf
		list = docElem.querySelectorAll(sel)
		# console.debug "DONE"

		if trySelf and list.length == 0
			if docElem[CUI.dom.matchFunc](sel)
				list = [docElem]
			else
				list = []

		return list

	# returns the element matching first the selector
	# upwards, ends at untilDocElem
	# selector & untilDocElem: collect everything until selector matches, but
	#                          not further than untilDocElem
	# selector: collection eveverything until selector matches, null if no match
	# untilDocElem: stop collecting at docElem
	@elementsUntil: (docElem, selector, untilDocElem) ->
		CUI.util.assert(docElem instanceof Node or docElem == window, "CUI.dom.elementsUntil", "docElem needs to be instanceof Node or window.", docElem: docElem, selector: selector, untilDocElem: untilDocElem)
		testDocElem = docElem
		path = [testDocElem]
		while true
			if selector and @is(testDocElem, selector)
				return path

			if testDocElem == untilDocElem
				if selector
					# this means we have not found any
					# elements which match the selector, so we
					return []
				else
					return path

			testDocElem = CUI.dom.parent(testDocElem)

			if testDocElem == null
				if selector
					return []
				else
					return path

			path.push(testDocElem)

		# this should unreachable
		return []

	@parent: (docElem) ->
		if docElem == window
			null
		else if docElem == document
			window
		else
			if docElem.hasOwnProperty('DOM')
				docElem = docElem.DOM
			docElem.parentNode

	@closest: (docElem, selector) ->
		@closestUntil(docElem, selector)

	@closestUntil: (docElem, selector, untilDocElem) ->
		if not selector
			return null

		path = @elementsUntil(docElem, selector, untilDocElem)
		if path.length == 0
			return null

		path[path.length-1]

	# selector is a stopper (like untiDocElem)
	@parentsUntil: (docElem, selector, untilDocElem=document.documentElement) ->
		parentElem = CUI.dom.parent(docElem)
		if not parentElem
			return []

		@elementsUntil(parentElem, selector, untilDocElem)

	# selector is a filter
	@parents: (docElem, selector, untilDocElem=document.documentElement) ->
		CUI.util.assert(docElem instanceof Element or docElem == document or docElem == window, "CUI.dom.parents", "element needs to be instanceof HTMLElement, document, or window.", element: docElem)
		path = @parentsUntil(docElem, null, untilDocElem)

		if not selector
			return path

		# filter parents
		parents = []
		for parent in path
			if @is(parent, selector)
				parents.push(parent)

		parents

	@isInDOM: (docElem) ->
		if not docElem
			return null

		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM

		CUI.util.assert(docElem instanceof Node, "CUI.dom.isInDOM", "docElem needs to be instanceof Node.", docElem: docElem)
		document.documentElement.contains(docElem)

	# new nodes can be node or Array of nodes
	@replaceWith: (node, new_node) ->
		if node.hasOwnProperty('DOM')
			node = node.DOM

		if new_node.hasOwnProperty('DOM')
			new_node = new_node.DOM

		CUI.util.assert(node instanceof Node and (new_node instanceof Node or new_node instanceof NodeList), "CUI.dom.replaceWidth", "nodes need to be instanceof Node.", node: node, newNode: new_node)
		CUI.util.assert(node.parentNode instanceof Node, "CUI.dom.replaceWith", "parentNode of node needs to be an instance of Node", node: node, parentNode: node.parentNode)

		if new_node instanceof NodeList
			first_node = new_node[0]
			node.parentNode.replaceChild(first_node, node)
			while (new_node.length > 0)
				@insertAfter(first_node, new_node[new_node.length-1])
			return first_node
		else
			return node.parentNode.replaceChild(new_node, node)

	@getRect: (docElem) ->
		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM
		docElem.getBoundingClientRect()

	@getComputedStyle: (docElem) ->
		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM
		window.getComputedStyle(docElem)

	@setStyle: (docElem, style, append="px") ->
		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM

		CUI.util.assert(docElem instanceof HTMLElement, "CUI.dom.setStyle", "docElem needs to be instanceof HTMLElement.", docElem: docElem)
		for k, v of style
			if v == undefined
				continue
			switch v
				when "", null
					set = ""
				else
					if isNaN(Number(v))
						set = v
					else if v == 0 or v == "0"
						set = 0
					else
						set = v + append

			if k.startsWith("--")
				docElem.style.setProperty(k, set)
			else
				docElem.style[k] = set


		docElem

	@getStyle: (element) ->
		if element.hasOwnProperty('DOM')
			element = element.DOM

		styles = {}
		for styleKey, styleValue of element.style
			if not CUI.util.isNull(styleValue)
				styles[styleKey] = styleValue
		styles

	@setStyleOne: (docElem, key, value) ->
		map = {}
		map[key] = value

		@setStyle(docElem, map)

	@setStylePx: (docElem, style) ->
		console.error("CUI.dom.setStylePx is deprectaed, use CUI.dom.setStyle.")
		@setStyle(docElem, style)

	@getRelativePosition: (docElem) ->
		CUI.util.assert(docElem instanceof HTMLElement, "CUI.dom.getRelativePosition", "docElem needs to be instanceof HTMLElement.", docElem: docElem)
		dim = CUI.dom.getDimensions(docElem)
		top: dim.offsetTopScrolled
		left: dim.offsetLeftScrolled

	@getDimensions: (docElem) ->
		if CUI.util.isNull(docElem)
			return null

		if docElem == window or docElem == document
			return {
				width: window.innerWidth
				height: window.innerHeight
			}

		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM

		cs = @getComputedStyle(docElem)
		rect = @getRect(docElem)

		dim =
			computedStyle: cs
			clientBoundingRect: rect

		for k1 in ["margin", "padding", "border"]
			for k2 in ["Top", "Right", "Bottom", "Left"]

				dim_key = k1+k2
				switch k1
					when "border"
						dim[dim_key] = @getCSSFloatValue(cs["border#{k2}Width"])
					else
						dim[dim_key] = @getCSSFloatValue(cs[dim_key])

			dim[k1+"Vertical"] = dim[k1+"Top"] + dim[k1+"Bottom"]
			dim[k1+"Horizontal"] = dim[k1+"Left"] + dim[k1+"Right"]

		dim.contentBoxWidth = Math.max(0, rect.width - dim.borderHorizontal - dim.paddingHorizontal)
		dim.contentBoxHeight = Math.max(0, rect.height - dim.borderVertical - dim.paddingVertical)
		dim.innerBoxWidth = Math.max(0, rect.width - dim.borderHorizontal)
		dim.innerBoxHeight = Math.max(0, rect.height - dim.borderVertical)
		dim.borderBoxWidth = rect.width
		dim.borderBoxHeight = rect.height

		if cs.boxSizing == "content-box"
			dim.contentWidthAdjust = dim.borderBoxWidth - dim.contentBoxWidth
			dim.contentHeightAdjust = dim.borderBoxHeight - dim.contentBoxHeight
		else
			dim.contentWidthAdjust = 0
			dim.contentHeightAdjust = 0

		dim.marginBoxWidth = Math.max(0, rect.width + dim.marginHorizontal)
		dim.marginBoxHeight = Math.max(0, rect.height + dim.marginVertical)

		dim.viewportTop = rect.top
		dim.viewportTopMargin = rect.top - dim.marginTop
		dim.viewportLeft = rect.left
		dim.viewportLeftMargin = rect.left - dim.marginLeft
		dim.viewportBottom = rect.bottom
		dim.viewportBottomMargin = rect.bottom + dim.marginBottom
		dim.viewportRight = rect.right
		dim.viewportRightMargin = rect.right + dim.marginRight

		dim.viewportCenterTop = rect.top + ((rect.bottom - rect.top) / 2)
		dim.viewportCenterLeft = rect.left + ((rect.right - rect.left) / 2)

		# passthru keys
		for k in [
			"left"
			"top"
			"minWidth"
			"minHeight"
			"maxWidth"
			"maxHeight"
			"marginRight"
			"marginLeft"
			"marginTop"
			"marginBottom"
			"borderTopWidth"
			"borderLeftWidth"
			"borderBottomWidth"
			"borderRightWidth"
		]
			dim[k] = @getCSSFloatValue(cs[k])

		for k in [
			"offsetWidth"
			"offsetHeight"
			"offsetTop"
			"offsetLeft"
			"clientWidth"
			"clientHeight"
			"scrollWidth"
			"scrollHeight"
			"scrollLeft"
			"scrollTop"
		]
			dim[k] = docElem[k]

		dim.scaleX = dim.borderBoxWidth / dim.offsetWidth or 1
		dim.scaleY = dim.borderBoxHeight / dim.offsetHeight or 1

		if docElem.offsetParent
			dim.offsetTopScrolled = dim.offsetTop + docElem.offsetParent.scrollTop
			dim.offsetLeftScrolled = dim.offsetLeft + docElem.offsetParent.scrollLeft
		else
			dim.offsetTopScrolled = dim.offsetTop + document.body.scrollTop
			dim.offsetLeftScrolled = dim.offsetLeft + document.body.scrollLeft

		for k in [
			"offsetWidth"
			"offsetLeft"
			"clientWidth"
			"scrollWidth"
			"scrollLeft"
		]
			dim[k+"Scaled"] = dim[k] * dim.scaleX

		for k in [
			"offsetHeight"
			"offsetTop"
			"clientHeight"
			"scrollHeight"
			"scrollTop"
		]
			dim[k+"Scaled"] = dim[k] * dim.scaleY

		dim.verticalScrollbarWidth = dim.offsetWidth - dim.borderHorizontal - dim.clientWidth
		dim.horizontalScrollbarHeight = dim.offsetHeight - dim.borderVertical - dim.clientHeight

		dim.canHaveScrollbar = cs.overflowX in ["auto", "scroll"] or cs.overflowY in ["auto", "scroll"]
		dim.horizontalScrollbarAtStart = dim.scrollLeft == 0
		dim.horizontalScrollbarAtEnd = dim.scrollWidth - dim.scrollLeft - dim.clientWidth - dim.verticalScrollbarWidth < 1
		dim.verticalScrollbarAtStart = dim.scrollTop == 0
		dim.verticalScrollbarAtEnd = dim.scrollHeight - dim.scrollTop - dim.clientHeight - dim.horizontalScrollbarHeight < 1

		dim.viewportTopContent = rect.top + dim.borderTop + dim.paddingTop
		dim.viewportLeftContent = rect.left + dim.borderLeft + dim.paddingLeft
		dim.viewportBottomContent = rect.bottom - dim.borderBottom - Math.max(dim.paddingBottom, dim.horizontalScrollbarHeight)
		dim.viewportRightContent = rect.right - dim.borderRight- Math.max(dim.paddingRight, dim.verticalScrollbarWidth)

		dim.viewportTopInner = rect.top + dim.borderTop
		dim.viewportLeftInner = rect.left + dim.borderLeft
		dim.viewportBottomInner = rect.bottom - dim.borderBottom - dim.horizontalScrollbarHeight
		dim.viewportRightInner = rect.right - dim.borderRight- dim.verticalScrollbarWidth

		dim

	# returns the scrollable parents
	@parentsScrollable: (node) ->
		parents = []
		for parent, idx in CUI.dom.parents(node)
			dim = CUI.dom.getDimensions(parent)
			if dim.canHaveScrollbar
				parents.push(parent)
		parents

	@setDimension: (docElem, key, value) ->
		set = {}
		set[key] = value
		@setDimensions(docElem, set)

	@getDimension: (docElem, key) ->
		@getDimensions(docElem)[key]

	@prepareSetDimensions: (docElem) ->
		if docElem.__prep_dim
			return

		docElem.__prep_dim =
			borderBox: @isBorderBox(docElem)
			dim: @getDimensions(docElem)
		@

	@setDimensions: (docElem, _dim) ->
		@prepareSetDimensions(docElem)

		css = {}
		borderBox = docElem.__prep_dim.borderBox
		dim = docElem.__prep_dim.dim

		delete(docElem.__prep_dim)

		set_dim = CUI.util.copyObject(_dim)

		cssFloat = {}
		set = (key, value) =>
			if CUI.util.isNull(value) or isNaN(value)
				return

			if not cssFloat.hasOwnProperty(key)
				if key in ["width", "height"] and value < 0
					value = 0

				cssFloat[key] = value
				return
			CUI.util.assert(cssFloat[key] == value, "CUI.dom.setDimensions", "Unable to set contradicting values for #{key}.", docElem: docElem, dim: set_dim)
			return

		# passthru keys
		for k in ["width", "height", "left", "top"]
			if set_dim.hasOwnProperty(k)
				set(k, set_dim[k])
				delete(set_dim[k])

		if set_dim.hasOwnProperty("contentBoxWidth")
			if borderBox
				set("width", set_dim.contentBoxWidth + dim.paddingHorizontal + dim.borderHorizontal)
			else
				set("width", set_dim.contentBoxWidth)

			delete(set_dim.contentBoxWidth)

		if set_dim.hasOwnProperty("contentBoxHeight")
			if borderBox
				set("height",set_dim.contentBoxHeight + dim.paddingVertical + dim.borderVertical)
			else
				set("height",set_dim.contentBoxHeight)

			delete(set_dim.contentBoxHeight)

		if set_dim.hasOwnProperty("borderBoxWidth")
			if borderBox
				set("width", set_dim.borderBoxWidth)
			else
				set("width", set_dim.borderBoxWidth - dim.paddingHorizontal - dim.borderHorizontal)
			delete(set_dim.borderBoxWidth)

		if set_dim.hasOwnProperty("borderBoxHeight")
			if borderBox
				set("height",set_dim.borderBoxHeight)
			else
				set("height",set_dim.borderBoxHeight - dim.paddingVertical - dim.borderVertical)

			delete(set_dim.borderBoxHeight)

		if set_dim.hasOwnProperty("marginBoxWidth")
			if borderBox
				set("width", set_dim.marginBoxWidth - dim.marginHorizontal)
			else
				set("width", set_dim.marginBoxWidth - dim.marginHorizontal - dim.paddingHorizontal - dim.borderHorizontal)

			delete(set_dim.marginBoxWidth)

		if set_dim.hasOwnProperty("marginBoxHeight")
			if borderBox
				set("height", set_dim.marginBoxHeight - dim.marginVertical)
			else
				set("height", set_dim.marginBoxHeight - dim.marginVertical - dim.paddingVertical - dim.borderHorizontal)

			delete(set_dim.marginBoxHeight)

		left_over_keys = Object.keys(set_dim)

		CUI.util.assert(left_over_keys.length == 0, "CUI.dom.setDimensions", "Unknown keys in dimension: \""+left_over_keys.join("\", \"")+"\".", docElem: docElem, dim: _dim)

		@setStyle(docElem, cssFloat)
		cssFloat

	@htmlToNodes: (html) ->
		if CUI.util.isNull(html)
			return

		d = @element("DIV")
		d.innerHTML = html
		d.childNodes

	# runs callback on each textnode
	@findTextInNodes: (nodes, callback, texts = []) ->
		for node in nodes
			child_nodes = []
			for child in node.childNodes
				switch child.nodeType
					when 3 # Text
						textContent = child.textContent.trim()
						if textContent.length > 0
							callback?(child, textContent)
							texts.push(textContent)
					when 1 # Element
						child_nodes.push(child)
			@findTextInNodes(child_nodes, callback, texts)

		return texts

	# turns 14.813px into a Number
	@getCSSFloatValue: (v) ->
		if v.indexOf("px") == -1
			return 0

		fl = parseFloat(v.substr(0, v.length-2))
		fl

	@isPositioned: (docElem) ->
		CUI.util.assert(docElem instanceof HTMLElement, "CUI.dom.isPositioned", "docElem needs to be instance of HTMLElement.", docElem: docElem)
		@getComputedStyle(docElem).position in ["relative", "absolute", "fixed"]

	@isVisible: (docElem) ->
		style = @getComputedStyle(docElem)
		if style.visibility == "hidden" or style.display == "none"
			false
		else
			true

	# @hasOverflow: (docElem) ->
	# 	style = @getComputedStyle(docElem)
	# 	if style.overflowX == "visible" and style.overflowY == "visible"
	# 		true
	# 	else
	# 		false

	@getBoxSizing: (docElem) ->
		@getComputedStyle(docElem).boxSizing

	@isBorderBox: (docElem) ->
		@getBoxSizing(docElem) == "border-box"

	@isContentBox: (docElem) ->
		@getBoxSizing(docElem) == "content-box"

	@hideElement: (docElem) ->
		if not docElem
			return

		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM

		if docElem.style.display != "none"
			docElem.__saved_display = docElem.style.display
		docElem.style.display = "none"
		docElem

	@focus: (element) ->
		if not element
			return
		if element.DOM
			element = element.DOM
		element.focus()

	@blur: (element) ->
		if not element
			return
		if element.DOM
			element = element.DOM
		element.blur()

	# remove all children from a DOM node (detach)
	@removeChildren: (docElem, filter) ->
		CUI.util.assert(docElem instanceof HTMLElement, "CUI.dom.removeChildren", "element needs to be instance of HTMLElement", element: docElem)
		for child in @children(docElem, filter)
			docElem.removeChild(child)
		return docElem

	@showElement: (docElem) ->
		if not docElem
			return

		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM

		docElem.style.display = docElem.__saved_display or ""
		delete(docElem.__saved_display)
		docElem

	@space: (style = null) ->
		switch style
			when "small"
				@element("DIV", class: "cui-small-space")
			when "large"
				@element("DIV", class: "cui-large-space")
			when "flexible"
				@element("DIV", class: "cui-flexible-space")
			when null
				@element("DIV", class: "cui-space")
			else
				CUI.util.assert(false, "CUI.dom.space", "Unknown style: "+style)

	@element: (tagName, attrs) ->
		CUI.dom.setAttributeMap(document.createElement(tagName), attrs)

	@debugRect: ->
		@remove(@find("#cui-debug-rect")[0])
		if arguments.length == 0
			return

		if arguments.length == 2 or not CUI.util.isArray(arguments[0])
			dim = arguments[0]
			pattern = arguments[1]
			arr = []
			for k in ["Top", "Left", "Bottom", "Right"]
				if CUI.util.isEmpty(pattern) or pattern == "*"
					k = k.toLowerCase()
					value = dim[k]
				else
					value = dim[pattern.replace("*", k)]

				arr.push(value)
		else if CUI.util.isArray(arguments[0])
			arr = arguments[0]
		else
			console.error("CUI.dom.debugRect: Argument Error.")
			return

		[top, left, bottom, right] = arr

		width = right - left
		height = bottom - top

		d = @element("DIV", id: "cui-debug-rect")
		@setStyle d,
			position: "absolute"
			border: "2px solid red"
			boxSizing: "border-box"
			top: top
			left: left
			width: width
			height: height

		document.body.appendChild(d)
		console.debug "CUI.dom.debugRect:", [top, left, bottom, right]
		d

	@scrollIntoView: (docElem) ->
		if not docElem
			return null

		if docElem.nodeType == 3 # textnode
			docElem = docElem.parentNode

		if docElem.hasOwnProperty('DOM')
			docElem = docElem.DOM

		parents = CUI.dom.parentsUntil(docElem)
		dim = null

		measure = =>
			dim = @getDimensions(docElem)

		measure()

		for p, idx in parents

			dim_p = @getDimensions(p)
			if dim_p.computedStyle.overflowY != "visible"

				off_bottom = dim.viewportBottomMargin - dim_p.viewportBottomContent

				if off_bottom > 0
					p.scrollTop = p.scrollTop + off_bottom
					measure()

				off_top = dim.viewportTopMargin - dim_p.viewportTopContent

				if off_top < 0
					p.scrollTop = p.scrollTop + off_top
					measure()

			if dim_p.computedStyle.overflowX != "visible"

				off_right = dim.viewportRightMargin - dim_p.viewportRightContent

				if off_right > 0
					p.scrollLeft = p.scrollLeft + off_right
					measure()

				off_left = dim.viewportLeftMargin - dim_p.viewportLeftContent

				if off_left < 0
					p.scrollLeft = p.scrollLeft + off_left
					measure()

		return docElem

	@setClassOnMousemove: (_opts={}) ->
		opts = CUI.Element.readOpts _opts, "CUI.dom.setClassOnMousemove",
			delayRemove:
				check: Function
			class:
				mandatory: true
				check: String
			ms:
				default: 3000
				mandatory: true
				check: (v) ->
					v > 0
			element:
				mandatory: true
				check: (v) ->
					v instanceof HTMLElement
			instance: {}

		add_class = ->
			CUI.dom.addClass(opts.element, opts.class)
			schedule_remove_mousemoved_class()

		remove_mousemoved_class = ->
			if opts.delayRemove?() or CUI.globalDrag
				schedule_remove_mousemoved_class()
				return
			CUI.dom.removeClass(opts.element, opts.class)

		schedule_remove_mousemoved_class = ->
			CUI.scheduleCallback
				ms: opts.ms
				call: remove_mousemoved_class

		CUI.Events.listen
			node: opts.element
			type: ["mousemove", "wheel"]
			instance: opts.instance
			call: (ev) ->
				add_class()
				return

		CUI.Events.listen
			node: opts.element
			type: "mouseleave"
			instance: opts.instance
			call: ->
				remove_mousemoved_class()

	@requestFullscreen: (elem) ->
		if elem.hasOwnProperty('DOM')
			elem = elem.DOM

		CUI.util.assert(elem instanceof HTMLElement, "startFullscreen", "element needs to be instance of HTMLElement", element: elem)
		if elem.requestFullscreen
			elem.requestFullscreen()
		else if elem.webkitRequestFullscreen
			elem.webkitRequestFullscreen()
		else if elem.mozRequestFullScreen
			elem.mozRequestFullScreen()
		else if elem.msRequestFullscreen
			elem.msRequestFullscreen()

		dfr = new CUI.Deferred()

		# send notifiy on open and done on exit

		fsc_ev = CUI.Events.listen
			type: "fullscreenchange"
			node: window
			call: (ev) =>
				if CUI.dom.isFullscreen()
					dfr.notify()
				else
					CUI.Events.ignore(fsc_ev)
					dfr.resolve()
				return

		dfr.promise()

	@exitFullscreen: ->
		if not CUI.dom.isFullscreen()
			return CUI.resolvedPromise()

		dfr = new CUI.Deferred()

		if document.exitFullscreen
			document.exitFullscreen()
		else if document.msExitFullscreen
			document.msExitFullscreen()
		else if (document.mozCancelFullScreen)
			document.mozCancelFullScreen()
		else if (document.webkitExitFullscreen)
			document.webkitExitFullscreen()

		CUI.Events.listen
			type: "fullscreenchange"
			node: window
			only_once: true
			call: =>
				dfr.resolve()
				return

		dfr.promise()

	@fullscreenElement: ->
		document.fullscreenElement or
			document.webkitFullscreenElement or
			document.mozFullScreenElement or
			document.msFullscreenElement or
			undefined

	@fullscreenEnabled: ->
		document.fullscreenEnabled or
			document.webkitFullscreenEnabled or
			document.mozFullScreenEnabled or
			document.msFullscreenEnabled or
			false

	@isFullscreen: ->
		document.fullscreen or
			document.webkitIsFullScreen or
			document.mozFullScreen or
			!!document.msFullscreenElement or
			false

	@$element: (tagName, cls, attrs={}, no_tables=false) ->
		if not CUI.util.isEmpty(cls)
			attrs.class = cls

		if no_tables
			if CUI.util.isEmpty(cls)
				attrs.class = "cui-"+tagName
			else
				attrs.class = "cui-"+tagName+" "+cls

			tagName = "div"

		node = CUI.dom.element(tagName, attrs)
		node

	@div: (cls, attrs) ->
		CUI.dom.$element("div", cls, attrs)

	@video: (cls, attrs) ->
		CUI.dom.$element("video", cls, attrs)

	@audio: (cls, attrs) ->
		CUI.dom.$element("audio", cls, attrs)

	@source: (cls, attrs) ->
		CUI.dom.$element("source", cls, attrs)

	@span: (cls, attrs) ->
		CUI.dom.$element("span", cls, attrs)

	@table: (cls, attrs) ->
		CUI.dom.$element("table", cls, attrs, true)

	@img: (cls, attrs) ->
		CUI.dom.$element("img", cls, attrs)

	@tr: (cls, attrs) ->
		CUI.dom.$element("tr", cls, attrs, true)

	@th: (cls, attrs) ->
		CUI.dom.$element("th", cls, attrs, true)

	@td: (cls, attrs) ->
		CUI.dom.$element("td", cls, attrs, true)

	@i: (cls, attrs) ->
		CUI.dom.$element("i", cls, attrs)

	@p: (cls, attrs) ->
		CUI.dom.$element("p", cls, attrs)

	@pre: (cls, attrs) ->
		CUI.dom.$element("pre", cls, attrs)

	@ul: (cls, attrs) ->
		CUI.dom.$element("ul", cls, attrs)

	@a: (cls, attrs) ->
		CUI.dom.$element("a", cls, attrs)

	@b: (cls, attrs) ->
		CUI.dom.$element("b", cls, attrs)

	@li: (cls, attrs) ->
		CUI.dom.$element("li", cls, attrs)

	@label: (cls, attrs) ->
		CUI.dom.$element("label", cls, attrs)

	@h1: (cls, attrs) ->
		CUI.dom.$element("h1", cls, attrs)

	@h2: (cls, attrs) ->
		CUI.dom.$element("h2", cls, attrs)

	@h3: (cls, attrs) ->
		CUI.dom.$element("h3", cls, attrs)

	@h4: (cls, attrs) ->
		CUI.dom.$element("h4", cls, attrs)

	@h5: (cls, attrs) ->
		CUI.dom.$element("h5", cls, attrs)

	@h6: (cls, attrs) ->
		CUI.dom.$element("h6", cls, attrs)

	@text: (text, cls, attrs) ->
		s = CUI.dom.span(cls, attrs)
		s.textContent = text
		s

	@textEmpty: (text) ->
		s = CUI.dom.span("italic")
		s.textContent = text
		s

	@table_one_row: ->
		CUI.dom.append(CUI.dom.table(), CUI.dom.tr_one_row.apply(@, arguments))

	@tr_one_row: ->
		tr = CUI.dom.tr()
		append = (__a) ->
			td = CUI.dom.td()
			CUI.dom.append(tr, td)

			add_content = (___a) =>
				if CUI.util.isArray(___a)
					for a in ___a
						add_content(a)
				else if ___a?.DOM
					CUI.dom.append(td, ___a.DOM)
				else if not CUI.util.isNull(___a)
					CUI.dom.append(td, ___a)
				return


			add_content(__a)
			return

		for a in arguments
			if CUI.util.isArray(a)
				for _a in a
					append(_a)
			else
				append(a)

		tr