DOMBuilder

DOMBuilder.coffee

class DOMBuilder

	@build: (tag) ->

		# create element
		el = document.createElement(tag)

		# set options
		for attribute, value of arguments[1]
			switch (true)

				when (attribute == 'classList')
					if (typeof value is 'string' || value instanceof String)
						el.classList.add value
					else
						for className in value
							el.classList.add className

				when (['dataSet', 'dataset', 'data'].indexOf(attribute) > -1)
					for dataKey, dataValue of value
						el.dataset[dataKey] = dataValue

				when (['style', 'styles', 'css'].indexOf(attribute) > -1)
					for styleKey, styleValue of value
						el.style[styleKey] = styleValue
				else
					el[attribute] = value

		# append childnodes (if any)
		if (arguments.length > 2)
			for i in [2..arguments.length-1]
				el.appendChild arguments[i]

		# return the create element
		el

# Build list of functions to export
# @note: list of tags built using https://gist.github.com/bramus/a9c1bad426e6f4fd9af0f19ecb2e24a3
exportedFunctions = []
for el in ["html","base","head","link","meta","script","style","title","address","article","body","h1","h6","footer","header","h2","h3","h4","h5","hgroup","nav","section","dd","dl","dt","div","figcaption","figure","hr","li","ol","ul","menu","main","p","pre","a","abbr","b","bdi","bdo","br","cite","code","data","time","dfn","em","i","kbd","mark","q","blockquote","rp","ruby","rt","rtc","rb","s","del","ins","samp","small","span","strong","sub","sup","u","var","wbr","area","map","audio","source","track","video","embed","object","param","canvas","noscript","caption","table","col","colgroup","tbody","tr","thead","tfoot","td","th","button","datalist","option","fieldset","label","form","input","keygen","legend","meter","optgroup","select","output","progress","textarea","details","dialog","menuitem","summary","content","element","shadow","template","acronym","applet","basefont","font","big","blink","center","command","dir","frame","frameset","isindex","listing","marquee","noembed","plaintext","spacer","strike","tt","xmp"]
	do (el) ->
		exportedFunctions[el] = () ->
			DOMBuilder.build(el, arguments...)

module.exports = exportedFunctions

Usage.coffee

class PrerollVideoState extends State

	# Build the HTML needed for the VotingState
	buildHtmlNodeList: ->

		# STATE SCREEN
		stateScreen = DOMBuilder.div
			classList: ['state', 'quiz-container']

		# STATE HEADER
		stateHeader = DOMBuilder.div
			classList: ['quiz-header']

			# StateScreen: Header: Title
			DOMBuilder.h1
				classList: ['quiz-header-title']
				innerHTML: @pollData.question

			# StateScreen: Header: Instructions
			if (@pollData.description? and @pollData.description)
				DOMBuilder.div
					classList: ['quiz-header-instructions']
					innerHTML: @pollData.description?.substr(0,150) or ''
			else
				DOMBuilder.span()

		stateScreen.appendChild stateHeader


		# STATE CONTENT
		stateContent = DOMBuilder.main
			classList: ['quiz-content', 'panel-wrapper']

			# We'll abuse the 'answers-wrapper' here to inject 1 'answer' which will act as the trigger to play the video
			@answersWrapper = DOMBuilder.div
				classList: ['answers-wrapper', 'answers-wrapper--hideresults', 'answers-wrapper--single']

				# create answer wrapper
				DOMBuilder.div
					id: 'answer_preroll'
					classList: ['answer-wrapper', 'answer-wrapper--video']

					# Video Thumbnail
					DOMBuilder.div
						classList: ['answer-wrapper-top']
						style:
							backgroundImage: "url(#{@pollData.preroll.thumbnail})"
						# DOMBuilder.div
						# 	classList: ['answer-caption']
						# 	DOMBuilder.div
						# 		classList: ['answer-text']
						# 		DOMBuilder.div
						# 			classList: ['answer-text-inner']
						# 			innerHTML: 'Bekijk het filmpje'

					# Video Play Button
					DOMBuilder.a
						href: '#'
						classList: ['button--playvideo']

			# 'Go to voting state' button
			DOMBuilder.div
				classList: 'preroll-buttonwrapper'
				DOMBuilder.a
					href: '#'
					id: 'button--gotovotingstate'
					classList: ['button', 'button--green']
					innerHTML: if (parseInt(@pollData.options_count; 10) == 1) then 'Maak je keuze >' else 'Maak je keuzes >'

		stateScreen.appendChild stateContent

		# return it
		stateScreen

	run: (options) ->

		# Build the HTML needed for this state
		nodeList = @buildHtmlNodeList()
		@rootElem.appendChild nodeList if nodeList

		true