Viewport Units with Coffee

viewport.coffee

class root.utils.ViewportHeight
	'The VH unit is not well supported. Use data-tags instead.
	data-viewport-unit="line-height: 100vh; height: 100vh;'
	constructor: ({@element, @styles}={}) ->
		@$element = $ @element
		@$window = $ window
		@_bindHandlers()

	_getStyles: ->
		# get styles as array
		if not @_styles
			styles = {}
			for style in _.filter(@styles.split(';'), Boolean)
				[key, value] = style.split(':')
				styles[key.trim()] = @_getValue(value)
			self._styles = styles
		return self._styles

	_bindHandlers: ->
		$(window).resize _.debounce(@onResize, 50)

	_getValue: (value) ->
		# given a unit like 400vw or 400vh, set it to absolute pixel values
		# map viewport units to viewport unit conversion functions
		viewportUnitMap = {
			'vh': @_vh,
			'vw': @_vw,
			'vmax': null,
			'vmin': null,
		}
		value = value.replace(';', '').trim()
		for unit, func of viewportUnitMap
			if unit.substr(value)
				return func(parseInt(value))

	_vh: (value) =>
		@$window.height() * value/100

	_vw: (value) =>
		@$window.width() * value/100

	_vmax: (value) =>
		return Math.max @_vh(value), @_vw(value)

	_vmin: (value) =>
		return Math.min @_vh(value), @_vw(value)

	onResize: =>
		# window has been resized. update CSS values of vh/vw equivalents
		@$element.css @_getStyles()


$("[data-viewport-styles]").each (index, el) ->
	new root.utils.ViewportHeight
		element: el
		styles: $(el).data('viewport-styles')