Add load events

Author: easafe

src/Flame/Html/Attribute.purs

@@ -262,4 +262,4 @@ import Flame.Html.Attribute.Internal
       , yChannelSelector
       , innerHtml
       ) as Exported
-import Flame.Html.Event (EventName, ToEvent, ToRawEvent, ToMaybeEvent, ToSpecialEvent, createEvent, createEventMessage, createRawEvent, onBlur, onBlur', onCheck, onClick, onClick', onChange, onChange', onContextmenu, onContextmenu', onDblclick, onDblclick', onDrag, onDrag', onDragend, onDragend', onDragenter, onDragenter', onDragleave, onDragleave', onDragover, onDragover', onDragstart, onDragstart', onDrop, onDrop', onError, onError', onFocus, onFocus', onFocusin, onFocusin', onFocusout, onFocusout', onInput, onInput', onKeydown, onKeydown', onKeypress, onKeypress', onKeyup, onKeyup', onMousedown, onMousedown', onMouseenter, onMouseenter', onMouseleave, onMouseleave', onMousemove, onMousemove', onMouseout, onMouseout', onMouseover, onMouseover', onMouseup, onMouseup', onReset, onReset', onScroll, onScroll', onSelect, onSelect', onSubmit, onSubmit', onWheel, onWheel') as Exported
+import Flame.Html.Event (EventName, ToEvent, ToRawEvent, ToMaybeEvent, ToSpecialEvent, createEvent, createEventMessage, createRawEvent, onBlur, onBlur', onCheck, onClick, onClick', onChange, onChange', onContextmenu, onContextmenu', onDblclick, onDblclick', onDrag, onDrag', onDragend, onDragend', onDragenter, onDragenter', onDragleave, onDragleave', onDragover, onDragover', onDragstart, onDragstart', onDrop, onDrop', onError, onError', onFocus, onFocus', onFocusin, onFocusin', onFocusout, onFocusout', onInput, onInput', onKeydown, onKeydown', onKeypress, onKeypress', onKeyup, onKeyup', onMousedown, onMousedown', onMouseenter, onMouseenter', onMouseleave, onMouseleave', onMousemove, onMousemove', onMouseout, onMouseout', onMouseover, onMouseover', onMouseup, onMouseup', onReset, onReset', onScroll, onScroll', onSelect, onSelect', onSubmit, onSubmit', onLoad, onLoad', onUnload, onUnload', onWheel, onWheel') as Exported

src/Flame/Html/Attribute/Event.purs

@@ -1,5 +1,5 @@
 -- | Definition of HTML events that can be fired from views
-module Flame.Html.Event (EventName, ToEvent, ToRawEvent, ToMaybeEvent, ToSpecialEvent, createEvent, createEventMessage, createRawEvent, onBlur, onBlur', onCheck, onClick, onClick', onChange, onChange', onContextmenu, onContextmenu', onDblclick, onDblclick', onDrag, onDrag', onDragend, onDragend', onDragenter, onDragenter', onDragleave, onDragleave', onDragover, onDragover', onDragstart, onDragstart', onDrop, onDrop', onError, onError', onFocus, onFocus', onFocusin, onFocusin', onFocusout, onFocusout', onInput, onInput', onKeydown, onKeydown', onKeypress, onKeypress', onKeyup, onKeyup', onMousedown, onMousedown', onMouseenter, onMouseenter', onMouseleave, onMouseleave', onMousemove, onMousemove', onMouseout, onMouseout', onMouseover, onMouseover', onMouseup, onMouseup', onReset, onReset', onScroll, onScroll', onSelect, onSelect', onSubmit, onSubmit', onWheel, onWheel') where
+module Flame.Html.Event (EventName, ToEvent, ToRawEvent, ToMaybeEvent, ToSpecialEvent, createEvent, createEventMessage, createRawEvent, onBlur, onBlur', onCheck, onClick, onClick', onChange, onChange', onContextmenu, onContextmenu', onDblclick, onDblclick', onDrag, onDrag', onDragend, onDragend', onDragenter, onDragenter', onDragleave, onDragleave', onDragover, onDragover', onDragstart, onDragstart', onDrop, onDrop', onError, onError', onFocus, onFocus', onFocusin, onFocusin', onFocusout, onFocusout', onInput, onInput', onKeydown, onKeydown', onKeypress, onKeypress', onKeyup, onKeyup', onMousedown, onMousedown', onMouseenter, onMouseenter', onMouseleave, onMouseleave', onMousemove, onMousemove', onMouseout, onMouseout', onLoad, onLoad',  onUnload, onUnload', onMouseover, onMouseover', onMouseup, onMouseup', onReset, onReset', onScroll, onScroll', onSelect, onSelect', onSubmit, onSubmit', onWheel, onWheel') where
 
 import Prelude
 
@@ -69,6 +69,18 @@ onClick = createEvent "click"
 onClick' ∷ ∀ message. ToRawEvent message
 onClick' = createEventMessage "click"
 
+onLoad ∷ ∀ message. ToEvent message
+onLoad = createEvent "load"
+
+onLoad' ∷ ∀ message. ToRawEvent message
+onLoad' = createEventMessage "load"
+
+onUnload ∷ ∀ message. ToEvent message
+onUnload = createEvent "unload"
+
+onUnload' ∷ ∀ message. ToRawEvent message
+onUnload' = createEventMessage "unload"
+
 onChange ∷ ∀ message. ToEvent message
 onChange = createEvent "change"
 

src/Flame/Renderer/Internal/Dom.js

@@ -365,7 +365,7 @@ F.prototype.runHandlers = function (handlers, messageMapper, event) {
 };
 
 F.prototype.resume = function (updatedHtml) {
-    this.cachedHtml = this.updateAllNodes(this.root, this.cachedHtml, updatedHtml);;
+    this.cachedHtml = this.updateAllNodes(this.root, this.cachedHtml, updatedHtml);
 };
 
 /** Patches over the parent element*/
@@ -375,9 +375,14 @@ F.prototype.updateAllNodes = function (parent, currentHtml, updatedHtml) {
         updatedHtml = shallowCopy(updatedHtml);
     //recreate node if it has changed tag or node type
     if (currentHtml.tag !== updatedHtml.tag || currentHtml.nodeType !== updatedHtml.nodeType) {
-        //moving the node instead of using clearNode allows us to reuse nodes
-        this.createAllNodes(parent, updatedHtml, currentHtml.node);
-        parent.removeChild(currentHtml.node);
+        if (currentHtml.nodeType === fragmentNode) {
+            this.createAllNodes(parent, updatedHtml, firstFragmentChildNode(currentHtml.children));
+            removeFragmentChildren(parent, currentHtml.children);
+        } else {
+            //moving the node instead of using clearNode allows us to reuse nodes
+            this.createAllNodes(parent, updatedHtml, currentHtml.node);
+            parent.removeChild(currentHtml.node);
+        }
     }
     else {
         updatedHtml.node = currentHtml.node;
@@ -434,6 +439,31 @@ F.prototype.updateAllNodes = function (parent, currentHtml, updatedHtml) {
     return updatedHtml;
 };
 
+/** Fragments are not child of any nodes, so we must find the first actual node */
+function firstFragmentChildNode(children) {
+    let childrenLength = children.length;
+
+    for (let i = 0; i < childrenLength; ++i) {
+        if (children[i].nodeType === fragmentNode)
+            return firstFragmentChildNode(children[i].children);
+
+        return children[i].node;
+    }
+
+    return undefined;
+}
+
+/** fragments are not child of any nodes, so we must recursively remove the actual child nodes  */
+function removeFragmentChildren(parent, children) {
+    let childrenLength = children.length;
+
+    for (let i = 0; i < childrenLength; ++i)
+        if (children[i].nodeType === fragmentNode)
+            removeFragmentChildren(children[i].children)
+        else
+            parent.removeChild(children[i].node);
+}
+
 function clearNode(node) {
     node.textContent = '';
 }