@jinntec/fore 1.10.3 → 2.1.0

package/src/getInScopeContext.js

@@ -61,18 +61,24 @@ export default function getInScopeContext(node, ref) {
     const parentElement = _getElement(node);
     // console.log('getInScopeContext parent', parentElement);
 
-    if(parentElement.closest('fx-fore').mergePartial){
-        console.log('mergePartial mode')
-    }
-
     if(parentElement.nodeName === 'FX-FORE'){
-        return parentElement.getModel().getDefaultInstance().getDefaultContext();
+        const context = parentElement.getModel().getDefaultInstance()?.getDefaultContext();
+		if (!context) {
+			// Edge-case, we are in an inner fore. Use the outer fore's default context
+			return getInScopeContext(parentElement.parentNode, ref);
+		}
+		return context;
     }
     const parentBind = XPathUtil.getClosest('[ref]', parentElement.parentNode);
     if (parentBind && (parentBind.nodeName === 'FX-GROUP' || parentBind.nodeName === 'FX-CONTROL')) {
         return parentBind.nodeset;
     }
 
+	const parentActionWithIterateExpr = parentElement.matches('[iterate]') ? parentElement : XPathUtil.getClosest('[iterate]', parentElement.parentNode);
+	if (parentActionWithIterateExpr && parentActionWithIterateExpr.currentContext) {
+		return parentActionWithIterateExpr.currentContext;
+	}
+
     const repeatItem = XPathUtil.getClosest('fx-repeatitem', parentElement);
     if (repeatItem) {
         if (node.nodeName === 'context') {

package/src/json-util.js

@@ -0,0 +1,27 @@
+const jsonToXml = (json) => {
+    const convert = (obj) => {
+        let xml = '';
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                xml += `<${key}`;
+                if (typeof obj[key] === 'object') {
+                    if (Array.isArray(obj[key])) {
+                        xml += ' type="array">';
+                        obj[key].forEach((item) => {
+                            xml += `<_>${convert(item)}</_>`;
+                        });
+                    } else {
+                        xml += ' type="object">';
+                        xml += convert(obj[key]);
+                    }
+                } else {
+                    xml += ` type="${typeof obj[key]}">${obj[key]}</${key}>`;
+                }
+                xml += `</${key}>`;
+            }
+        }
+        return xml;
+    };
+
+    return `<json>${convert(json)}</json>`;
+};

package/src/relevance.js

@@ -1,4 +1,22 @@
+import {Fore} from "./fore.js";
+
 export class Relevance {
+
+  static handleRelevance(boundElement){
+    const modelItem = boundElement.getModelItem();
+
+    if (modelItem && modelItem.relevant) {
+      boundElement.removeAttribute('nonrelevant');
+      boundElement.setAttribute('relevant','');
+      Fore.dispatch(this,'relevant',{});
+
+    } else {
+      boundElement.removeAttribute('relevant');
+      boundElement.setAttribute('nonrelevant','');
+      Fore.dispatch(this,'nonrelevant',{});
+    }
+  }
+
   static selectRelevant(element, type) {
     // console.log('selectRelevant', type);
     switch (type) {

package/src/ui/abstract-control.js

@@ -5,6 +5,7 @@ import { Fore } from '../fore.js';
 import { XPathUtil } from '../xpath-util.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { evaluateXPathToFirstNode} from '../xpath-evaluation.js';
+import {Relevance} from "../relevance.js";
 
 /**
  * `AbstractControl` -
@@ -172,6 +173,7 @@ export default class AbstractControl extends foreElementMixin(HTMLElement) {
       this.handleValid();
     }
     this.handleRelevant();
+    // Relevance.handleRelevance(this);
     // todo: handleType()
   }
 

package/src/ui/fx-case.js

@@ -1,5 +1,7 @@
 // import { foreElementMixin } from '../ForeElementMixin';
 
+import {FxContainer} from "./fx-container.js";
+
 /**
  * `fx-case`
  * a container allowing to switch between fx-case elements
@@ -7,11 +9,12 @@
  *  * todo: implement
  * @customElement
  */
-class FxCase extends HTMLElement {
+class FxCase extends FxContainer {
+/*
   constructor() {
     super();
-    this.attachShadow({ mode: 'open' });
   }
+*/
 
   connectedCallback() {
     if (this.hasAttribute('label')) {

package/src/ui/fx-container.js

@@ -1,5 +1,6 @@
 import '../fx-model.js';
 import { foreElementMixin } from '../ForeElementMixin.js';
+import {Fore} from "../fore.js";
 
 /**
  * `fx-container` -
@@ -7,12 +8,23 @@ import { foreElementMixin } from '../ForeElementMixin.js';
  *
  */
 export class FxContainer extends foreElementMixin(HTMLElement) {
+  static get properties() {
+    return {
+      ...super.properties,
+/*
+      src: {
+        type: String,
+      },
+*/
+    };
+  }
   constructor() {
     super();
     this.attachShadow({ mode: 'open' });
   }
 
   connectedCallback() {
+    this.src = this.hasAttribute('src') ? this.getAttribute('src'):null;
     const style = `
         :host {
             display: block;
@@ -51,6 +63,16 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (!force && this.hasAttribute('refresh-on-view')) return;
     // console.log('### FxContainer.refresh on : ', this);
 
+    // if loading from 'src' needs to be done do it now
+/*
+    if(this.src){
+      await Fore.loadForeFromSrc(this,this.src,'fx-group')
+          .then(foreElement =>{
+            this.getOwnerForm().registerLazyElement(foreElement);
+            foreElement.refresh();
+          })
+    }
+*/
     if (this.isBound()) {
       this.evalInContext();
       this.modelItem = this.getModelItem();

package/src/ui/fx-control.js

@@ -48,6 +48,9 @@ export default class FxControl extends XfAbstractControl {
             },
             initial: {
                 type: Boolean
+            },
+            src:{
+                type: String
             }
         };
     }
@@ -62,7 +65,7 @@ export default class FxControl extends XfAbstractControl {
 
     connectedCallback() {
         this.initial = this.hasAttribute('initial') ? this.getAttribute('initial') : null;
-        this.url = this.hasAttribute('url') ? this.getAttribute('url') : null;
+        this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
         this.loaded = false;
         this.initialNode = null;
         this.debounceDelay = this.hasAttribute('debounce') ? this.getAttribute('debounce') : null;
@@ -263,7 +266,7 @@ export default class FxControl extends XfAbstractControl {
         } else (
             Fore.dispatch(this, "warn", {'message': 'trying to replace a node that is neither an Attribute, Elemment or Text node'})
         )
-        this.getOwnerForm().refresh();
+        // this.getOwnerForm().refresh();
     }
 
     renderHTML(ref) {
@@ -374,8 +377,8 @@ export default class FxControl extends XfAbstractControl {
             return;
         }
 
-        // ### when there's a url Fore is used as widget and will be loaded from external file
-        if (this.url && !this.loaded && this.modelItem.relevant) {
+        // ### when there's a src Fore is used as widget and will be loaded from external file
+        if (this.src && !this.loaded && this.modelItem.relevant) {
             // ### evaluate initial data if necessary
 
             if (this.initial) {
@@ -383,8 +386,8 @@ export default class FxControl extends XfAbstractControl {
                 // console.log('initialNodes', this.initialNode);
             }
 
-            // ### load the markup from Url
-            await this._loadForeFromUrl();
+            // ### load the markup from src
+            await this._loadForeFromSrc();
             this.loaded = true;
 
             // ### replace default instance of embedded Fore with initial nodes
@@ -393,20 +396,13 @@ export default class FxControl extends XfAbstractControl {
             return;
         }
 
-        /*
-        if(this.url && !this.loaded){
-          this._loadForeFromUrl();
-          this.loaded=true;
-          return;
-        }
-    */
         if (widget.value !== this.value) {
             widget.value = this.value;
         }
     }
 
     /**
-     * loads an external Fore from an HTML file given by `url` attribute and embed it as child of this control.
+     * loads an external Fore from an HTML file given by `src` attribute and embed it as child of this control.
      *
      * Will look for the `<fx-fore>` element within the returned HTML file and return that element.
      *
@@ -415,13 +411,13 @@ export default class FxControl extends XfAbstractControl {
      * todo: dispatch link error
      * @private
      */
-    async _loadForeFromUrl() {
+    async _loadForeFromSrc() {
         console.info(
-            `%cFore is processing URL ${this.url}`,
+            `%cControl ref="${this.ref}" is loading ${this.src}`,
             "background:#64b5f6; color:white; padding:0.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;",
         );
         try {
-            const response = await fetch(this.url, {
+            const response = await fetch(this.src, {
                 method: 'GET',
                 credentials: this.credentials,
                 mode: 'cors',
@@ -457,10 +453,12 @@ export default class FxControl extends XfAbstractControl {
 						this.initialNode = evaluateXPathToFirstNode(this.initial, this.nodeset, this);
 
                         doc.firstElementChild.appendChild(this.initialNode.cloneNode(true));
-                        defaultInst.setInstanceData(doc);
+                            defaultInst.instanceData = doc;
                     }
-                    imported.getModel().updateModel();
-                    imported.refresh();
+                        imported.model = imported.querySelector('fx-model');
+                        imported.model.updateModel();
+
+                        imported.refresh(true);
                 },
                 {once: true},
             );
@@ -477,23 +475,19 @@ export default class FxControl extends XfAbstractControl {
                 dummy.replaceWith(imported);
             }
 
-
             if (!theFore) {
-                this.dispatchEvent(
-                    new CustomEvent('error', {
-                        detail: {
-                            message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
-                        },
-                    }),
-                );
+                Fore.dispatch('error', {
+                    detail: {
+                        message: `Fore element not found in '${this.src}'. Maybe wrapped within 'template' element?`,
+                    }
+                });
             }
-            this.dispatchEvent(new CustomEvent('loaded', {detail: {fore: theFore}}));
+            Fore.dispatch('loaded', {detail: {fore: theFore}});
         } catch (error) {
             // console.log('error', error);
             Fore.dispatch(this, 'error', {
                 origin: this,
-                message: `control couldn't be loaded from url '${this.url}'`,
-                expr:xpath,
+                message: `control couldn't be loaded from src '${this.src}'`,
                 level:'Error'
             });
 

package/src/ui/fx-droptarget.js

@@ -0,0 +1,9 @@
+import { foreElementMixin } from '../ForeElementMixin.js';
+import { withDraggability } from '../withDraggability.js';
+
+class FxDroptarget extends withDraggability(foreElementMixin(HTMLElement)) {
+}
+
+if (!customElements.get('fx-droptarget')) {
+    window.customElements.define('fx-droptarget', FxDroptarget);
+}

package/src/ui/fx-inspector.js

@@ -86,19 +86,23 @@ export class FxInspector extends HTMLElement {
 
   update() {
     // console.log('update');
-    const pre = this.shadowRoot.querySelectorAll('pre');
-    // console.log('pre', pre);
-    const fore = this.closest('fx-fore');
+    try{
+      const pre = this.shadowRoot.querySelectorAll('pre');
+      // console.log('pre', pre);
+      const fore = this.closest('fx-fore');
 
-    Array.from(pre).forEach(element => {
-      const inst = fore.getModel().getInstance(element.getAttribute('id'));
-      if (inst.getAttribute('type') === 'xml') {
-        element.innerText = this.serializeDOM(inst.instanceData);
-      }
-      if (inst.getAttribute('type') === 'json') {
-        element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
-      }
-    });
+      Array.from(pre).forEach(element => {
+        const inst = fore.getModel().getInstance(element.getAttribute('id'));
+        if (inst.getAttribute('type') === 'xml') {
+          element.innerText = this.serializeDOM(inst.instanceData);
+        }
+        if (inst.getAttribute('type') === 'json') {
+          element.innerText = JSON.stringify(inst.instanceData, undefined, 2);
+        }
+      });
+    }catch (e){
+      console.warn('caught problem in inspector', e.message);
+    }
   }
 
   render(style) {

package/src/ui/fx-repeat-attributes.js

@@ -3,6 +3,7 @@ import { evaluateXPath } from '../xpath-evaluation.js';
 import getInScopeContext from '../getInScopeContext.js';
 import { XPathUtil } from '../xpath-util.js';
 import {foreElementMixin} from "../ForeElementMixin.js";
+import {withDraggability} from "../withDraggability.js";
 
 /**
  * `fx-repeat`
@@ -19,7 +20,7 @@ import {foreElementMixin} from "../ForeElementMixin.js";
  *
  * todo: it should be seriously be considered to extend FxContainer instead but needs refactoring first.
  */
-export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
+export class FxRepeatAttributes extends withDraggability(foreElementMixin(HTMLElement), false) {
   static get properties() {
     return {
       ...super.properties,
@@ -51,6 +52,7 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
     super();
     this.ref = '';
     this.dataTemplate = [];
+    this.isDraggable=null;
     this.focusOnCreate = '';
     this.initDone = false;
     this.repeatIndex = 1;
@@ -87,7 +89,7 @@ export class FxRepeatAttributes extends foreElementMixin(HTMLElement) {
   }
 
   get index() {
-    return this.getAttribute('index');
+        return parseInt(this.getAttribute('index'), 10);
   }
 
   set index(idx) {