@jinntec/fore 1.10.3 → 2.1.0

package/src/fore.js

@@ -18,6 +18,79 @@ export class Fore {
 
   static TYPE_DEFAULT = 'xs:string';
 
+ /**
+   * Loads and return a piece of HTML
+   * @param url - the Url to load from
+   * @returns {Promise<string>}
+   */
+  static async loadHtml(url){
+    try{
+      const response = await fetch(url,  {
+        method: 'GET',
+        mode: 'cors',
+        credentials: 'same-origin',
+        headers: {
+          'Content-Type': "text/html",
+        },
+      });
+      const responseContentType = response.headers.get('content-type').toLowerCase();
+      if (responseContentType.startsWith('text/html')) {
+        return response.text();
+      } else {
+        Fore.dispatch(this, 'error', {
+          message: `Response has wrong contentType '${responseContentType}'. Should be 'text/html'`,
+          level:'Error'
+        });
+      }
+    } catch (e){
+      Fore.dispatch(this, 'error', {
+        message: `Html couldn't be loaded from '${url}'`,
+        level:'Error'
+      });
+    }
+  }
+
+  /**
+   * loads a Fore element from given `src`. Always returns the first occurrence of a `<fx-fore>`. The retured element
+   * will replace the `replace` element in the DOM.
+   *
+   * @param replace the element with a `src` attribute to resolvé.
+   * @param src the Url to resolve
+   * @param selector a querySelector expression to fetch certain element from loaded document
+   * @returns {Promise<void>}
+   */
+  static async loadForeFromSrc(replace, src, selector){
+    if(!src){
+      Fore.dispatch(this, 'error', {
+        detail: {
+          message: `No 'src' attribute present`,
+        },
+      });
+    }
+    await Fore.loadHtml(src)
+        .then(data => {
+          const parsed = new DOMParser().parseFromString(data, 'text/html');
+          // const theFore = parsed.querySelector('fx-fore');
+          const foreElement = parsed.querySelector(selector);
+          // console.log('foreElement', foreElement)
+          if (!foreElement) {
+            Fore.dispatch(this, 'error', {
+              detail: {
+                message: `Fore element not found in '${src}'. Maybe wrapped within 'template' element?`,
+              },
+            });
+          }
+          foreElement.setAttribute('from-src', src);
+          const thisAttrs = replace.attributes;
+          Array.from(thisAttrs).forEach(attr =>{
+            if(attr.name !== 'src'){
+              foreElement.setAttribute(attr.name,attr.value);
+            }
+          });
+          replace.replaceWith(foreElement);
+          return foreElement;
+        });
+  }
   static buildPredicates(node){
     let attrPredicate='';
     Array.from(node.attributes).forEach(attr =>{
@@ -339,6 +412,7 @@ export class Fore {
     return 'done';
   }
 
+/*
   static evaluateAttributeTemplateExpression(expr, node) {
     const matches = expr.match(/{[^}]*}/g);
     if (matches) {
@@ -354,6 +428,7 @@ export class Fore {
     }
     return expr;
   }
+*/
 
   static fadeInElement(element) {
     const duration = 600;
@@ -467,6 +542,7 @@ export class Fore {
   static stringifiedComponent(element){
     return `<${element.localName} ${Array.from(element.attributes).map(attr=>`${attr.name}="${attr.value}"`).join(' ')}>…</${element.localName}>`;
   }
+/*
   static async loadForeFromUrl(hostElement, url) {
     // console.log('########## loading Fore from ', this.src, '##########');
     await fetch(url, {
@@ -538,7 +614,7 @@ export class Fore {
           // this.appendChild(imported);
         }
       })
-      /*.catch(error => {
+      /!*.catch(error => {
         hostElement.dispatchEvent(
           new CustomEvent('error', {
             composed: false,
@@ -549,8 +625,9 @@ export class Fore {
             },
           }),
         );
-      });*/
+      });*!/
   }
+*/
 
   /**
    * clear all text nodes and attribute values to get a 'clean' template.

package/src/fx-bind.js

@@ -72,6 +72,7 @@ export class FxBind extends foreElementMixin(HTMLElement) {
       this._buildBindGraph();
       this._createModelItems();
     }
+    // todo: support json
 
     // ### process child bindings
     this._processChildren(model);

package/src/fx-fore.js

@@ -26,6 +26,7 @@ import {FxRepeatAttributes} from './ui/fx-repeat-attributes.js';
  */
 export class FxFore extends HTMLElement {
     static outermostHandler = null;
+    static draggedItem = null;
 
     static get properties() {
         return {
@@ -56,6 +57,9 @@ export class FxFore extends HTMLElement {
             ready: {
                 type: Boolean,
             },
+            strict:{
+                type: Boolean
+            },
             /**
              *
              */
@@ -100,6 +104,8 @@ export class FxFore extends HTMLElement {
 		// updates are included in that one
 		this.outermostHandler = null;
 
+		this.copiedElements = new WeakSet();
+
         const style = `
             :host {
                 display: block;
@@ -176,7 +182,6 @@ export class FxFore extends HTMLElement {
         `;
 
         const html = `
-           <noscript>This page uses Web Components and needs JavaScript to be enabled..</noscript>
 <!--           <slot name="errors"></slot> -->
            <jinn-toast id="message" gravity="bottom" position="left"></jinn-toast>
            <jinn-toast id="sticky" gravity="bottom" position="left" duration="-1" close="true" data-class="sticky-message"></jinn-toast>
@@ -204,7 +209,7 @@ export class FxFore extends HTMLElement {
 
         this.toRefresh = [];
         this.initialRun = true;
-        this.someInstanceDataStructureChanged = false;
+        this._scanForNewTemplateExpressionsNextRefresh = false;
         this.repeatsFromAttributesCreated = false;
         this.validateOn = this.hasAttribute('validate-on') ? this.getAttribute('validate-on'):'update';
         // this.mergePartial = this.hasAttribute('merge-partial')? true:false;
@@ -214,6 +219,7 @@ export class FxFore extends HTMLElement {
     connectedCallback() {
         this.style.visibility = 'hidden';
         console.time('init');
+        this.strict = this.hasAttribute('strict') ? true : false;
         /*
         document.addEventListener('ready', (e) =>{
           if(e.target !== this){
@@ -255,6 +261,7 @@ export class FxFore extends HTMLElement {
         const slot = this.shadowRoot.querySelector('slot#default');
         slot.addEventListener('slotchange', async event => {
             // preliminary addition for auto-conversion of non-prefixed element into prefixed elements. See fore.js
+            console.log(`### <<<<< slotchange on '${this.id}' >>>>>`);
             if(this.inited) return;
             if(this.hasAttribute('convert')){
                 this.replaceWith(Fore.copyDom(this));
@@ -280,8 +287,8 @@ export class FxFore extends HTMLElement {
             }
             if (!modelElement.inited) {
                 console.info(
-                    `%cFore is processing URL ${window.location.href}`,
-                    "background:#64b5f6; color:white; padding:1rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
+                        `%cFore is processing fx-fore#${this.id}`,
+                    "background:#64b5f6; color:white; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
                 );
 
                 await modelElement.modelConstruct();
@@ -296,6 +303,9 @@ export class FxFore extends HTMLElement {
         this.addEventListener('path-mutated', () => {
             this.someInstanceDataStructureChanged = true;
         });
+        this.addEventListener('refresh', () => {
+            this.refresh(true);
+        });
 
     }
 
@@ -319,6 +329,15 @@ export class FxFore extends HTMLElement {
         }
     }
 
+	/**
+	 * Raise a flag that there might be new template expressions under some node. This happens with
+	 * repeats updating (new repeat items can have new template expressions) or switches changing their case (new case = new raw HTML)
+	 */
+	scanForNewTemplateExpressionsNextRefresh() {
+		// TODO: also ask for the root of any new HTML: this can prevent some very deep queries.
+		this._scanForNewTemplateExpressionsNextRefresh = true;
+	}
+
     /**
      * loads a Fore from an URL given by `src`.
      *
@@ -327,54 +346,7 @@ export class FxFore extends HTMLElement {
      */
     async _loadFromSrc() {
         // console.log('########## loading Fore from ', this.src, '##########');
-        await fetch(this.src, {
-            method: 'GET',
-            mode: 'cors',
-            credentials: 'include',
-            headers: {
-                'Content-Type': 'text/html',
-            },
-        })
-            .then(response => {
-                const responseContentType = response.headers.get('content-type').toLowerCase();
-                console.log('********** responseContentType *********', responseContentType);
-                if (responseContentType.startsWith('text/html')) {
-                    // const htmlResponse = response.text();
-                    // return new DOMParser().parseFromString(htmlResponse, 'text/html');
-                    // return response.text();
-                    return response.text().then(result =>
-                        // console.log('xml ********', result);
-                        new DOMParser().parseFromString(result, 'text/html'),
-                    );
-                }
-                return 'done';
-            })
-            .then(data => {
-                // const theFore = fxEvaluateXPathToFirstNode('//fx-fore', data.firstElementChild);
-                const theFore = data.querySelector('fx-fore');
-
-                // console.log('thefore', theFore)
-                if (!theFore) {
-                    Fore.dispatch(this, 'error', {
-                        detail: {
-                            message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
-                        },
-                    });
-                }
-                theFore.setAttribute('from-src', this.src);
-                const thisAttrs = this.attributes;
-                Array.from(thisAttrs).forEach(attr =>{
-                    if(attr.name !== 'src'){
-                        theFore.setAttribute(attr.name,attr.value);
-                    }
-                });
-                this.replaceWith(theFore);
-            })
-            .catch(() => {
-                Fore.dispatch(this, 'error', {
-                    message: `'${this.src}' not found or does not contain Fore element.`,
-                });
-            });
+        await Fore.loadForeFromSrc(this,this.src,'fx-fore');
     }
 
     /**
@@ -420,6 +392,7 @@ export class FxFore extends HTMLElement {
     }
 
     disconnectedCallback() {
+		this.removeEventListener('dragstart', this.dragstart);
         /*
         this.removeEventListener('model-construct-done', this._handleModelConstructDone);
         this.removeEventListener('message', this._displayMessage);
@@ -443,8 +416,11 @@ export class FxFore extends HTMLElement {
 
         Fore.refreshChildren(this, true);
         this._updateTemplateExpressions();
-        this.someInstanceDataStructureChanged = false; // reset
+        this._scanForNewTemplateExpressionsNextRefresh = false; // reset
         this._processTemplateExpressions();
+
+        console.log(`### <<<<< refresh-done ${this.id} >>>>>`);
+
         Fore.dispatch(this, 'refresh-done', {});
 
         // console.groupEnd();
@@ -493,7 +469,7 @@ export class FxFore extends HTMLElement {
 			return;
 		}
         this.isRefreshing = true;
-        console.log('### <<<<< refresh() >>>>>');
+        console.log(`### <<<<< refresh() on '${this.id}' >>>>>`);
 
         // refresh () {
         // ### refresh Fore UI elements
@@ -553,24 +529,44 @@ export class FxFore extends HTMLElement {
         }
 
         // ### refresh template expressions
-        if (this.initialRun || this.someInstanceDataStructureChanged) {
+        if (this.initialRun || this._scanForNewTemplateExpressionsNextRefresh) {
             this._updateTemplateExpressions();
-            this.someInstanceDataStructureChanged = false; // reset
+            this._scanForNewTemplateExpressionsNextRefresh = false; // reset
         }
+
         this._processTemplateExpressions();
 
         // console.log('### <<<<< dispatching refresh-done - end of UI update cycle >>>>>');
         // this.dispatchEvent(new CustomEvent('refresh-done'));
         // this.initialRun = false;
         this.style.visibility='visible';
+        console.log(`### <<<<< refresh-done ${this.id} >>>>>`);
         Fore.dispatch(this, 'refresh-done', {});
 
 		// this.isRefreshing = true;
 		// this.parentNode.closest('fx-fore')?.refresh(false, changedPaths);
-		this.parentNode.closest('fx-fore')?.refresh(false);
-		for (const subFore of this.querySelectorAll('fx-fore')) {
+
+        const subFores = Array.from(this.querySelectorAll('fx-fore'));
+/*
+        calling the parent to refresh causes errors and inconsistent state. Also it is questionable
+        if a child should actually interact with its parent in this way.
+
+        This only affects the refreshing NOT the data mutation itself which is happening as expected.
+
+        Current solution is that a child that wants the parent to refresh must do so by adding an additional
+        event handler that dispatches an event upwards and having a handler in the parent to refresh itself.
+
+        So refreshed propagate downwards but not upwards which is at least an option to consider.
+
+        if(this.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE){
+            // await this.parentNode.closest('fx-fore')?.refresh(false);
+        }
+*/
+		for (const subFore of subFores) {
 			// subFore.refresh(false, changedPaths);
-			subFore.refresh(false);
+            if(subFore.ready){
+                await subFore.refresh(false);
+            }
 		}
 		this.isRefreshing = false;
     }
@@ -672,11 +668,11 @@ export class FxFore extends HTMLElement {
             const naked = match.substring(1, match.length - 1);
             const inscope = getInScopeContext(node, naked);
             if (!inscope) {
+                console.warn('no inscope context for expr', naked);
                 const errNode =
                     node.nodeType === Node.TEXT_NODE || node.nodeType === Node.ATTRIBUTE_NODE
                         ? node.parentNode
                         : node;
-                console.warn('no inscope context for ', errNode);
                 return match;
             }
             // Templates are special: they use the namespace configuration from the place where they are
@@ -695,11 +691,17 @@ export class FxFore extends HTMLElement {
             }
         });
 
+		// Update to the new value. Don't do it though if nothing changed to prevent iframes or
+		// images from reloading for example
         if (node.nodeType === Node.ATTRIBUTE_NODE) {
             const parent = node.ownerElement;
-            parent.setAttribute(node.nodeName, replaced);
+			if (parent.getAttribute(node.nodeName) !== replaced) {
+				parent.setAttribute(node.nodeName, replaced);
+			}
         } else if (node.nodeType === Node.TEXT_NODE) {
-            node.textContent = replaced;
+			if (node.textContent !== replaced) {
+				node.textContent = replaced;
+			}
         }
     }
 
@@ -770,7 +772,11 @@ export class FxFore extends HTMLElement {
         const model = this.querySelector('fx-model');
 
         // ##### lazy creation should NOT take place if there's a parent Fore using shared instances
-        const parentFore = this.parentNode.closest('fx-fore');
+        const parentFore = this.parentNode.nodeType !== Node.DOCUMENT_FRAGMENT_NODE ? this.parentNode.closest('fx-fore'): null;
+        if(this.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE){
+            console.log('fragment',this.parentNode)
+        }
+
         if(parentFore){
             const shared = parentFore.getModel().instances.filter(shared => shared.hasAttribute('shared'));
             if(shared.length !==0) return;
@@ -888,7 +894,7 @@ export class FxFore extends HTMLElement {
      */
     async _initUI() {
         // console.log('### _initUI()');
-        console.log('### <<<<< _initUI >>>>>');
+        console.log(`### <<<<< _initUI '${this.id}' >>>>>`);
 
         if (!this.initialRun) return;
         this.classList.add('initialRun');
@@ -929,8 +935,51 @@ export class FxFore extends HTMLElement {
         Fore.dispatch(this, 'ready', {});
         // console.log('dataChanged', FxModel.dataChanged);
         console.timeEnd('init');
+
+		this.addEventListener('dragstart', this._handleDragStart);
+		//	this.addEventListener('dragend', this._handleDragEnd);
+		this.handleDrop = event => this._handleDrop(event);
+		this.ownerDocument.body.addEventListener('drop', this.handleDrop);
+		this.ownerDocument.body.addEventListener('dragover', e=>{
+			e.preventDefault();
+			e.stopPropagation();
+			e.dataTransfer.dropEffect = "move";
+		});
     }
 
+	_handleDragStart (event) {
+		const draggedItem = event.target.closest('[draggable="true"]');
+		this.originalDraggedItem = draggedItem;
+		console.log('DRAG START', this);
+		if (draggedItem.getAttribute('drop-action') === 'copy') {
+			event.dataTransfer.dropEffect = 'copy';
+			event.dataTransfer.effectAllowed = 'copy';
+			this.draggedItem = draggedItem.cloneNode(true);
+			this.draggedItem.setAttribute('drop-action', 'move');
+			this.copiedElements.add(this.draggedItem);
+		} else {
+			event.dataTransfer.dropEffect = 'move';
+			event.dataTransfer.effectAllowed = 'move';
+			this.draggedItem = draggedItem;
+		}
+	}
+
+	_handleDrop (event) {
+		console.log('DROP ON BODY', this)
+		if (!this.draggedItem) {
+			return;
+		}
+		// A drop on 'body' should be a removal.
+		if (event.dataTransfer.dropEffect === 'none') {
+			if (this.copiedElements.has(this.originalDraggedItem)) {
+				this.originalDraggedItem.remove();
+			}
+		}
+		this.originalDraggedItem = null
+		this.draggedItem = null;
+		event.stopPropagation();
+	}
+
     registerLazyElement(element) {
         if (this.intersectionObserver) {
             // console.log('registerLazyElement',element);
@@ -986,8 +1035,9 @@ export class FxFore extends HTMLElement {
         if(e.detail.expr){
             console.error('Failing expression',e.detail.expr);
         }
-        console.error('---');
-        this._displayError(e);
+        if(this.strict){
+            this._displayError(e);
+        }
     }
 
     _copyToClipboard(target){

package/src/fx-instance.js

@@ -110,6 +110,7 @@ export class FxInstance extends HTMLElement {
   async init() {
     // console.log('fx-instance init');
     await this._initInstance();
+    console.log(`### <<<<< instance ${this.id} loaded >>>>> `);
     this.dispatchEvent(
       new CustomEvent('instance-loaded', {
         composed: true,

package/src/fx-model.js

@@ -106,7 +106,7 @@ export class FxModel extends HTMLElement {
      *
      */
     async modelConstruct() {
-        console.log('### <<<<< dispatching model-construct >>>>>');
+        console.log(`### <<<<< dispatching model-construct for '${this.fore.id}' >>>>>`);
         // this.dispatchEvent(new CustomEvent('model-construct', { detail: this }));
         Fore.dispatch(this, 'model-construct', {model: this});
 
@@ -129,7 +129,7 @@ export class FxModel extends HTMLElement {
             this.updateModel();
         } else {
             // ### if there's no instance one will created
-            console.log('### <<<<< dispatching model-construct-done >>>>>');
+            console.log(`### <<<<< dispatching model-construct-done for '${this.fore.id}' >>>>>`);
             await this.dispatchEvent(
                 new CustomEvent('model-construct-done', {
                     composed: false,
@@ -167,7 +167,7 @@ export class FxModel extends HTMLElement {
     }
 
     rebuild() {
-        console.log('### <<<<< rebuild() >>>>>');
+        console.log(`### <<<<< rebuild() '${this.fore.id}' >>>>>`);
 
         this.mainGraph = new DepGraph(false); // do: should be moved down below binds.length check but causes errors in tests.
         this.modelItems = [];
@@ -203,7 +203,7 @@ export class FxModel extends HTMLElement {
             return;
         }
 
-        console.log('### <<<<< recalculate() >>>>>');
+        console.log(`### <<<<< recalculate() '${this.fore.id}' >>>>>`);
 
         // console.log('changed nodes ', this.changed);
         this.computes = 0;
@@ -368,7 +368,7 @@ export class FxModel extends HTMLElement {
 
         if (this.modelItems.length === 0) return true;
 
-        console.log('### <<<<< revalidate() >>>>>');
+        console.log(`### <<<<< revalidate() '${this.fore.id}' >>>>>`);
 
         // reset submission validation
         // this.parentNode.classList.remove('submit-validation-failed')
@@ -447,7 +447,10 @@ export class FxModel extends HTMLElement {
     }
 
     getDefaultInstance() {
-        return this.instances[0];
+        if (this.instances.length) {
+			return this.instances[0];
+		}
+		return this.getInstance('default');
     }
 
     getDefaultInstanceData() {
@@ -459,18 +462,40 @@ export class FxModel extends HTMLElement {
         // console.log('instances ', this.instances);
         // console.log('instances array ',Array.from(this.instances));
 
-        const instArray = Array.from(this.instances);
-        let found = instArray.find(inst => inst.id === id);
+        let found;
+        if(id === 'default'){
+            found = this.instances[0];
+        }
+        // ### lookup in local instances first
         if(!found) {
-            const parentFore = this.fore.parentNode.closest('fx-fore');
+			const instArray = Array.from(this.instances);
+            found = instArray.find(inst => inst.id === id);
+            const parentFore = this.fore.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+                    ? this.fore.parentNode.host.closest('fx-fore')
+                    : this.fore.parentNode.closest('fx-fore');
+
+        }
+        // ### lookup in parent Fore if present
+        if(!found){
+            // const parentFore = this.fore.parentNode.closest('fx-fore');
+            const parentFore = this.fore.parentNode.nodeType === Node.DOCUMENT_FRAGMENT_NODE
+                ? this.fore.parentNode.host.closest('fx-fore')
+                : this.fore.parentNode.closest('fx-fore');
             if (parentFore) {
                 console.log('shared instances from parent', this.parentNode.id);
                 const parentInstances = parentFore.getModel().instances;
                 const shared = parentInstances.filter(shared => shared.hasAttribute('shared'));
                 found = shared.find(found => found.id === id);
             }
+
         }
-        if(!found){
+        if(found){
+			return found;
+        }
+        if (id === 'default') {
+            return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
+        }
+        if(!found && this.fore.strict){
             // return this.getDefaultInstance(); // if id is not found always defaults to first in doc order
             Fore.dispatch(this, 'error', {
                 origin: this,
@@ -478,7 +503,7 @@ export class FxModel extends HTMLElement {
                 level:'Error'
             });
         }
-        return found;
+        return null;
     }
 
     evalBinding(bindingExpr) {

package/src/fx-submission.js

@@ -48,14 +48,16 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
             ? this.getAttribute('serialization')
             : 'xml';
 
-        this.url = this.hasAttribute('url') ? this.getAttribute('url'):null;
-
-        this.targetref = this.hasAttribute('targetref') ? this.getAttribute('targetref') : null;
-
         this.mediatype = this.hasAttribute('mediatype')
             ? this.getAttribute('mediatype')
             : 'application/xml';
 
+        this.responseMediatype = this.hasAttribute('response-mediatype') ? this.getAttribute('response-mediatype') : this.mediatype;
+        this.url = this.hasAttribute('url') ? this.getAttribute('url') : null;
+
+        this.targetref = this.hasAttribute('targetref') ? this.getAttribute('targetref') : null;
+
+
         this.validate = this.getAttribute('validate') ? this.getAttribute('validate') : 'true';
         this.credentials = this.hasAttribute('credentials')
             ? this.getAttribute('credentials')
@@ -85,7 +87,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
         model.recalculate();
 
-        if (this.validate === 'true') {
+        if (this.validate === 'true' && this.method !== 'get') {
             const valid = model.revalidate();
             if (!valid) {
                 console.log('validation failed. Submission stopped');
@@ -134,6 +136,23 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
 
         // let serialized = serializer.serializeToString(relevant);
         if (this.method.toLowerCase() === 'get') {
+/*
+             todo: serialize the bound instance element names as get parameters and using their text values
+             as param values. leave out empty params and create querystring from the result.Elements may
+             have exactly level deep or are otherwise ignored.
+             <data>
+                <id>1234</id>
+                <name>john</name>
+                <zip></zip>
+                <!-- ignored as no direct text value -->
+                <phone>
+                    <mobile></mobile>
+                <phone>
+              </data>
+              results in: ?id=1234&name=john to be appended to this.url on fetch
+
+*/
+
             serialized = undefined;
         }
         // console.log('data being send', serialized);
@@ -182,6 +201,7 @@ export class FxSubmission extends foreElementMixin(HTMLElement) {
                 const key = resolvedUrl.substring(resolvedUrl.indexOf(':') + 1);
                 localStorage.removeItem(key);
                 const newInst = new DOMParser().parseFromString('<data></data>', 'application/xml');
+                this.replace = 'instance';
                 this._handleResponse(newInst);
                 console.log('### <<<<< submit-done >>>>>');
                 Fore.dispatch(this, 'submit-done', {});