@@ -10,15 +10,13 @@ var newElement = Utils.newElement, extract = Utils.extract,
10function setProps(elem, e) {
10function setProps(elem, e) {
11 var props = elem.props;
11 var props = elem.props;
12 var element = elem.element;
12 var element = elem.element;
13− if (element.adjustWidth) {
13+ var width = props.width - (element.adjustWidth || 0);
14− props.width -= element.adjustWidth;
14+ var height = props.height - (element.adjustHeight || 0);
15− }
15+ e.style.width = (width |0) + 'px';
16− if (element.adjustHeight) {
16+ e.style.height = (height|0) + 'px';
17− props.height -= element.adjustHeight;
17+ if (props.opacity !== 1) {
18+ e.style.opacity = props.opacity;
19− e.style.width = (props.width |0) + 'px';
20− e.style.height = (props.height|0) + 'px';
21− if (props.opacity !== 1) { e.style.opacity = props.opacity; }
22 if (props.color.ctor === 'Just') {
20 if (props.color.ctor === 'Just') {
23 e.style.backgroundColor = extract(props.color._0);
21 e.style.backgroundColor = extract(props.color._0);
@@ -36,35 +34,59 @@ function setProps(elem, e) {
36 e.appendChild(a);
34 e.appendChild(a);
38 if (props.hover.ctor !== '_Tuple0') {
36 if (props.hover.ctor !== '_Tuple0') {
39− e.style.pointerEvents = 'auto';
40− e.elm_hover_handler = props.hover;
37+ addHover(e, props.hover);
41− e.elm_hover_count = 0;
42− e.addEventListener('mouseover', function() {
43− if (e.elm_hover_count++ > 0) return;
44− var handler = e.elm_hover_handler;
45− if (handler !== null) {
49− e.addEventListener('mouseout', function(evt) {
50− if (e.contains(evt.toElement || evt.relatedTarget)) return;
51− e.elm_hover_count = 0;
52− var handler = e.elm_hover_handler;
53− if (handler !== null) {
58 if (props.click.ctor !== '_Tuple0') {
39 if (props.click.ctor !== '_Tuple0') {
59− e.style.pointerEvents = 'auto';
60− e.elm_click_handler = props.click;
40+ addClick(e, props.click);
61− e.addEventListener('click', function() {
62− e.elm_click_handler(Tuple0);
45+function addClick(e, handler) {
46+ e.style.pointerEvents = 'auto';
47+ e.elm_click_handler = handler;
49+ e.elm_click_handler(Utils.Tuple0);
51+ e.elm_click_trigger = trigger;
52+ e.addEventListener('click', trigger);
55+function removeClick(e, handler) {
56+ if (e.elm_click_trigger) {
57+ e.removeEventListener('click', e.elm_click_trigger);
61+function addHover(e, handler) {
62+ e.style.pointerEvents = 'auto';
63+ e.elm_hover_handler = handler;
64+ e.elm_hover_count = 0;
67+ if (e.elm_hover_count++ > 0) return;
68+ e.elm_hover_handler(true);
71+ if (e.contains(evt.toElement || evt.relatedTarget)) return;
72+ e.elm_hover_count = 0;
73+ e.elm_hover_handler(false);
75+ e.elm_hover_over = over;
76+ e.elm_hover_out = out;
77+ e.addEventListener('mouseover', over);
78+ e.addEventListener('mouseout', out);
81+function removeHover(e) {
82+ if (e.elm_hover_over) {
83+ e.removeEventListener('mouseover', e.elm_hover_over);
85+ if (e.elm_hover_out) {
86+ e.removeEventListener('mouseout', e.elm_hover_out);
68function image(props, img) {
90function image(props, img) {
69 switch (img._0.ctor) {
91 switch (img._0.ctor) {
70 case 'Plain': return plainImage(img._3);
92 case 'Plain': return plainImage(img._3);
@@ -151,7 +173,12 @@ function toPos(pos) {
152// must clear right, left, top, bottom, and transform
174// must clear right, left, top, bottom, and transform
153// before calling this function
175// before calling this function
154−function setPos(pos,w,h,e) {
176+function setPos(pos,elem,e) {
177+ var element = elem.element;
178+ var props = elem.props;
179+ var w = props.width + (element.adjustWidth ? element.adjustWidth : 0);
180+ var h = props.height + (element.adjustHeight ? element.adjustHeight : 0);
155 e.style.position = 'absolute';
182 e.style.position = 'absolute';
156 e.style.margin = 'auto';
183 e.style.margin = 'auto';
157 var transform = '';
184 var transform = '';
@@ -171,7 +198,7 @@ function setPos(pos,w,h,e) {
172function container(pos,elem) {
199function container(pos,elem) {
173 var e = render(elem);
200 var e = render(elem);
174− setPos(pos, elem.props.width, elem.props.height, e);
201+ setPos(pos, elem, e);
175 var div = newElement('div');
202 var div = newElement('div');
176 div.style.position = 'relative';
203 div.style.position = 'relative';
177 div.style.overflow = 'hidden';
204 div.style.overflow = 'hidden';
@@ -302,7 +329,7 @@ function update(node, curr, next) {
303 case "Container":
330 case "Container":
304 update(node.firstChild, currE._1, nextE._1);
331 update(node.firstChild, currE._1, nextE._1);
305− setPos(nextE._0, nextE._1.props.width, nextE._1.props.height, node.firstChild);
332+ setPos(nextE._0, nextE._1, node.firstChild);
307 case "Custom":
334 case "Custom":
308 if (currE.type === nextE.type) {
335 if (currE.type === nextE.type) {
@@ -320,15 +347,15 @@ function updateProps(node, curr, next) {
320 var currP = curr.props;
347 var currP = curr.props;
321 var e = node;
348 var e = node;
322 var element = next.element;
349 var element = next.element;
323− if (element.adjustWidth) {
350+ var width = props.width - (element.adjustWidth || 0);
324− props.width -= element.adjustWidth;
351+ var height = props.height - (element.adjustHeight || 0);
352+ if (width !== currP.width) {
353+ e.style.width = (width|0) + 'px';
326− if (element.adjustHeight) {
355+ if (height !== currP.height) {
327− props.height -= element.adjustHeight;
356+ e.style.height = (height|0) + 'px';
329− if (props.width !== currP.width) e.style.width = (props.width |0) + 'px';
330− if (props.height !== currP.height) e.style.height = (props.height|0) + 'px';
331− if (props.opacity !== 1 && props.opacity !== currP.opacity) {
358+ if (props.opacity !== currP.opacity) {
332 e.style.opacity = props.opacity;
359 e.style.opacity = props.opacity;
334 var nextColor = (props.color.ctor === 'Just' ?
361 var nextColor = (props.color.ctor === 'Just' ?
@@ -355,17 +382,21 @@ function updateProps(node, curr, next) {
357 // update hover handlers
384 // update hover handlers
358− if (props.hover.ctor !== '_Tuple0') {
385+ if (props.hover.ctor === '_Tuple0') {
359− e.elm_hover_handler = props.hover;
386+ removeHover(e);
360 } else if (e.elm_hover_handler) {
387 } else if (e.elm_hover_handler) {
361− e.elm_hover_handler = null;
388+ e.elm_hover_handler = props.hover;
390+ addHover(e, props.hover);
364 // update click handlers
393 // update click handlers
365− if (props.click.ctor !== '_Tuple0') {
394+ if (props.click.ctor === '_Tuple0') {
366− e.elm_click_handler = props.click;
395+ removeClick(e);
367 } else if (e.elm_click_handler) {
396 } else if (e.elm_click_handler) {
368− e.elm_click_handler = null;
397+ e.elm_click_handler = props.click;
399+ addClick(e, props.click);