BoundBasedView.hx

import coconut.ui.*;
import vdom.Attr;
import js.Browser.*;

typedef Bounds = 
{
	var top(default, never):Float;
	var left(default, never):Float;
	var bottom(default, never):Float;
	var right(default, never):Float;

	var width(default, never):Float;
	var height(default, never):Float;
}

class BoundBasedView extends View
{
	@:attribute function renderWithBounds(bounds:Bounds):Children;
	@:attribute var className:vdom.Attr.ClassName = null;
	@:state var bounds:Bounds = null;

	function render() '
		<div class=${className}>
			<if ${bounds != null}>
				${...renderWithBounds(bounds)}
			</if>
		</div>
	';

	function updateBounds()
		this.bounds = toElement().getBoundingClientRect();

	override function afterInit(_) 
	{
		window.addEventListener('resize', updateBounds);
		tink.core.Callback.defer(updateBounds);//not ideal, but because of how virtual-dom calls life-cycle hooks this must be deferred
	}

	override function beforeDestroy(_) 
		window.removeEventListener('resize', updateBounds);
}