@jinntec/fore 2.0.0 → 2.1.1

package/src/ui/fx-repeatitem.js

@@ -1,5 +1,7 @@
-import { Fore } from '../fore.js';
-import { foreElementMixin } from '../ForeElementMixin.js';
+import {Fore} from '../fore.js';
+import {foreElementMixin} from '../ForeElementMixin.js';
+import {FxFore} from "../fx-fore.js";
+import {withDraggability} from "../withDraggability.js";
 
 /**
  * `fx-repeat`
@@ -8,105 +10,95 @@ import { foreElementMixin } from '../ForeElementMixin.js';
  * @customElement
  * @demo demo/index.html
  */
-export class FxRepeatitem extends foreElementMixin(HTMLElement) {
-  static get properties() {
-    return {
-      inited: {
-        type: Boolean,
-      },
-    };
-  }
-
-  constructor() {
-    super();
-    this.inited = false;
-
-    this.addEventListener('click', this._dispatchIndexChange);
-    // this.addEventListener('focusin', this._handleFocus);
-    this.addEventListener('focusin', this._dispatchIndexChange);
-
-    this.attachShadow({ mode: 'open', delegatesFocus: true });
-  }
-
-  _handleFocus() {
-    this.parentNode.setIndex(this.index);
-    // TODO: do this somewhere else, somewhere more central
-
-    /**
-     * todo: resolve - this is problematic as it triggers a lot of unneeded refreshes but it needed
-     * when you want to support activating the right repeatitem when the user tabs through controls.
-     */
-    // this.closest('fx-fore').refresh();
-  }
-
-  _dispatchIndexChange() {
-    // console.log('_dispatchIndexChange on index ', this.index);
-    if (this.parentNode) {
-      this.parentNode.dispatchEvent(
-        new CustomEvent('item-changed', { composed: false, bubbles: true, detail: { item: this , index:this.index } }),
-      );
+export class FxRepeatitem extends withDraggability(foreElementMixin(HTMLElement), true) {
+    static get properties() {
+        return {
+            inited: {
+                type: Boolean,
+            },
+        };
     }
-  }
 
-  connectedCallback() {
-    this.display = this.style.display;
+    constructor() {
+        super();
+        this.inited = false;
 
-    const html = `
+        this.addEventListener('click', this._dispatchIndexChange);
+        // this.addEventListener('focusin', this._handleFocus);
+        this.addEventListener('focusin', this._dispatchIndexChange);
+
+        this.attachShadow({mode: 'open', delegatesFocus: true});
+
+        this.dropTarget = null;
+
+    }
+
+    connectedCallback() {
+        super.connectedCallback();
+        this.display = this.style.display;
+
+        const html = `
            <slot></slot>
         `;
 
-    this.shadowRoot.innerHTML = `
+        this.shadowRoot.innerHTML = `
             ${html}
         `;
-      this.getOwnerForm().registerLazyElement(this);
-
-	  this.ref = `${this.parentNode.ref}`;
-  }
-
-  disconnectedCallback() {
-    // console.log('disconnectedCallback ', this);
-    this.removeEventListener('click', this._dispatchIndexChange());
-    this.removeEventListener('focusin', this._handleFocus);
-  }
-
-  init() {
-    // console.log('repeatitem init model ', this.nodeset);
-    // this._initializeChildren(this);
-    this.inited = true;
-  }
-
-  /*
-  getModelItem() {
-    super.getModelItem();
-    // console.log('modelItem in repeatitem ', this.getModelItem()[this.index]);
-    return this.getModelItem()[this.index];
-  }
-*/
-
-  refresh(force) {
-    this.modelItem = this.getModelItem();
-    // ### register ourselves as boundControl
-    if (!this.modelItem.boundControls.includes(this)) {
-      this.modelItem.boundControls.push(this);
+        this.getOwnerForm().registerLazyElement(this);
+
+        this.ref = `${this.parentNode.ref}`;
+
+        this.tabindex = 0;
+
+    }
+
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.removeEventListener('click', this._dispatchIndexChange);
+        this.removeEventListener('focusin', this._handleFocus);
     }
 
-    if (this.modelItem && !this.modelItem.relevant) {
-        this.setAttribute('nonrelevant','');
-    } else {
-		this.setAttribute('relevant','');
+
+    init() {
+        // console.log('repeatitem init model ', this.nodeset);
+        // this._initializeChildren(this);
+        this.inited = true;
     }
 
     /*
-    if (this?.modelItem?.relevant) {
-      // Fore.refreshChildren(this);
-    } else {
+      getModelItem() {
+      super.getModelItem();
+      // console.log('modelItem in repeatitem ', this.getModelItem()[this.index]);
+      return this.getModelItem()[this.index];
+      }
+    */
+
+    _dispatchIndexChange() {
+        this.dispatchEvent(
+            new CustomEvent('item-changed', {composed: false, bubbles: true, detail: {item: this, index: this.index}}),
+        );
     }
-*/
 
-    Fore.refreshChildren(this, force);
-  }
+
+    refresh(force) {
+        this.modelItem = this.getModelItem();
+        // ### register ourselves as boundControl
+        if (!this.modelItem.boundControls.includes(this)) {
+            this.modelItem.boundControls.push(this);
+
+            if (this.modelItem && !this.modelItem.relevant) {
+                this.removeAttribute('relevant');
+                this.setAttribute('nonrelevant', '');
+            } else {
+                this.removeAttribute('nonrelevant');
+                this.setAttribute('relevant', '');
+            }
+        }
+        // Always recurse for these refreshes, especially when forced
+        Fore.refreshChildren(this, force);
+    }
 }
 
 if (!customElements.get('fx-repeatitem')) {
-  window.customElements.define('fx-repeatitem', FxRepeatitem);
-}
+    window.customElements.define('fx-repeatitem', FxRepeatitem);
+}

package/src/ui/fx-trigger.js

@@ -1,6 +1,5 @@
 import XfAbstractControl from './abstract-control.js';
 import { leadingDebounce } from '../events.js';
-import {resolveId} from "../xpath-evaluation";
 
 export class FxTrigger extends XfAbstractControl {
   connectedCallback() {
@@ -24,7 +23,9 @@ export class FxTrigger extends XfAbstractControl {
     const slot = this.shadowRoot.querySelector('slot');
     slot.addEventListener('slotchange', () => {
       const elements = slot.assignedElements({ flatten: true });
-      elements[0].setAttribute('tabindex', '0');
+      if(!elements[0].getAttribute('tabindex')){
+        elements[0].setAttribute('tabindex', '0');
+      }
       if(elements[0].nodeName !== 'BUTTON'){
         elements[0].setAttribute('role', 'button');
       }

package/src/withDraggability.js

@@ -0,0 +1,218 @@
+import getInScopeContext from './getInScopeContext.js';
+
+export const withDraggability = (superclass, isAlsoDraggable) =>
+
+/**
+ * Adds draggability to generic components.
+ * Add the `dnd` attribute to make it draggable
+ */
+class DraggableComponent extends superclass {
+	static get properties() {
+		return {
+			...superclass.properties,
+			dnd: {
+				type: Boolean
+			}
+		};
+	}
+
+	constructor() {
+		super();
+
+    }
+
+	connectedCallback() {
+		this.drop = (event) => this._drop(event);
+        this.addEventListener('drop', this.drop);
+		this.dragOver = (event) => this._dragOver(event);
+        this.addEventListener('dragover', this.dragOver);
+		this.dragLeave = (event) => this._dragLeave(event);
+        this.addEventListener('dragleave', this.dragLeave);
+		this.dragEnd = (event) => this._dragEnd(event);
+        this.addEventListener('dragend', this._dragEnd);
+	}
+
+	disconnectedCallback() {
+        this.removeEventListener('drop', this.drop);
+        this.removeEventListener('dragover', this.dragOver);
+        this.removeEventListener('dragleave', this.dragLeave);
+		this.removeEventListener('dragend', this.dragEnd);
+	}
+
+    _dragOver(event) {
+//		console.log('dragover ',this);
+//		console.log('event target ',event.target);
+		if(event.target.classList.contains('no-drop')) {
+			return false;
+		}
+        event.stopPropagation();
+        const repeatItem = event.target.closest('fx-repeatitem');
+		if (!this.getOwnerForm().draggedItem) {
+			// Not dragging
+			return;
+		}
+		// Only allow drag and drop in similar repeats
+		if (this === this.getOwnerForm().draggedItem) {
+			// Ignore: drop on itself
+			return;
+		}
+		const {draggedItem} = this.getOwnerForm();
+
+		if (this.accepts(draggedItem)) {
+			this.classList.remove('no-drop');
+		} else {
+			this.classList.add('no-drop');
+		}
+
+		const thisClosestRepeat = this.hasAttribute('id') ? this : this.closest('[id]');
+		const draggingClosestRepeat = draggedItem.hasAttribute('id') ? draggedItem : draggedItem.closest('[id]');
+		if (thisClosestRepeat?.id === draggingClosestRepeat?.id) {
+			if (repeatItem !== this.getOwnerForm().draggedItem) {
+				this.classList.add('drag-over');
+			}
+
+			event.preventDefault();
+		}
+    }
+
+    _dragLeave(event){
+		this.classList.remove('drag-over');
+		this.classList.remove('no-drop');
+    }
+
+	_dragEnd (event) {
+		const item = this.getOwnerForm().draggedItem
+		if (item.getAttribute('drop-action') === 'copy') {
+			item.remove();
+		}
+        this.classList.remove('drag-over');
+//		event.stopPropagation();
+	}
+
+	_getDataNode () {
+		const dataNode = this.getOwnerForm().draggedItem?.getModelItem()?.node;
+		if (!dataNode) {
+			return null;
+		}
+
+		const {draggedItem} = this.getOwnerForm();
+		const thisClosestRepeat = this.hasAttribute('id') ? this : this.closest('[id]');
+		const draggingClosestRepeat = draggedItem.hasAttribute('id') ? draggedItem : draggedItem.closest('[id]');
+		if (thisClosestRepeat?.id !== draggingClosestRepeat?.id) {
+			// Moving between different repeats: this can make the items 'lost': placed into a
+			// different set
+			return null;
+		}
+
+		return dataNode;
+	}
+
+	accepts (draggedItem) {
+		if (!this.hasAttribute('accept')) {
+			return;
+		}
+		const accept = this.getAttribute('accept');
+		const isAccepted = draggedItem.matches(accept);
+		// console.log('accepted', isAccepted);
+		return isAccepted;
+	}
+
+    _drop(event){
+        this.classList.remove('drag-over');
+        event.stopPropagation();
+		if (this.localName === 'fx-droptarget') {
+			if(this.children.length !== 0){
+				console.log("we have to do something");
+			}
+
+			let {draggedItem} = this.getOwnerForm();
+
+			if (draggedItem.getAttribute('drop-action') === 'copy') {
+				draggedItem = draggedItem.cloneNode(true);
+			}
+
+			if (!this.accepts(draggedItem)) {
+				this.classList.remove('no-drop');
+				return;
+			}
+			if(draggedItem === this){
+				return;
+			}
+			if(draggedItem.localName === 'fx-droptarget'){
+				// todo : this looks still a bit weak
+				if(this.hasAttribute('drop-position')){
+					this.replaceChildren(draggedItem);
+					event.preventDefault();
+					return;
+				}
+				if(this.parentNode.lastElementChild === this){
+					this.parentNode.append(draggedItem);
+					event.stopImmediatePropagation();
+					// return;
+				}else if (draggedItem === this.previousElementSibling) {
+					// insertBefore of draggedItem before us would be a no-op: it is already before us.
+					// Instead: insert _after_ us, so we can still do something!
+					this.parentNode.insertBefore(draggedItem,  this.nextElementSibling);
+				} else {
+					this.parentNode.insertBefore(draggedItem, this);
+				}
+			}else{
+				this.appendChild(draggedItem);
+			}
+
+			/*
+			if(this.hasAttribute('drop-position')){
+				if(this.getAttribute('drop-position') === 'before'){
+					this.parentNode.insertBefore(draggedItem,this);
+				} else {
+					this.parentNode.append(draggedItem);
+				}
+			}else{
+				this.replaceChildren(draggedItem);
+			}
+*/
+			event.preventDefault();
+			this.getOwnerForm().getModel().updateModel();
+			this.getOwnerForm().refresh(true);
+			return;
+		}
+		const dataNode = this._getDataNode();
+		if (!dataNode) {
+			return;
+		}
+
+		if (this.localName === 'fx-repeat') {
+			// We are sure we'll handle this event!
+			event.preventDefault();
+			// Dropping on repeat itself always means to *append* the dropped item
+
+			let contextNode = this.nodeset;
+			if (Array.isArray(contextNode) && !contextNode.length) {
+				// Guess: just append it to the context node. Hope that the `ref` is actually a
+				// child axis, like `ref="./item"`. A ref like `./items/item` breaks.
+				const context = getInScopeContext(this.getAttributeNode('ref') || this, this.ref);
+				context.append(dataNode);
+			} else {
+				// Guess: just insert it after it to the context node. Hope that the `ref` is
+				// actually listing siblings, like `ref="./item"` or
+				// `ref="./items/item"`. `ref="descendant::item[@category='a']"` breaks
+				contextNode = contextNode[contextNode.length - 1];
+				contextNode.after(dataNode);
+			}
+		} else if (this.localName === 'fx-repeatitem') {
+			const repeatItemNode = this.getModelItem().node;
+
+			if (repeatItemNode.previousSibling === dataNode) {
+				// moving before will make it do nothing, move after
+				repeatItemNode.after(dataNode);
+			} else {
+				repeatItemNode.before(dataNode);
+			}
+		}
+
+		// Note: full refresh needed since multiple model items may be affected.
+		// TODO: Leverage the changedPaths trick
+		this.getOwnerForm().getModel().updateModel();
+		this.getOwnerForm().refresh(true);
+    }
+};

package/src/xpath-evaluation.js

@@ -339,6 +339,8 @@ function functionNameResolver({prefix, localName}, _arity) {
         case 'fore-attr':
         case 'index':
         case 'instance':
+        case 'json2xml':
+        case 'xml2Json':
         case 'log':
         case 'parse':
         case 'local-date':
@@ -349,6 +351,7 @@ function functionNameResolver({prefix, localName}, _arity) {
         case 'uri-host':
         case 'uri-param':
         case 'uri-path':
+        case 'uri-relpath':
         case 'uri-port':
         case 'uri-query':
         case 'uri-scheme':
@@ -381,7 +384,9 @@ function functionNameResolver({prefix, localName}, _arity) {
 function getVariablesInScope(formElement) {
     let closestActualFormElement = formElement;
     while (closestActualFormElement && !('inScopeVariables' in closestActualFormElement)) {
-        closestActualFormElement = closestActualFormElement.parentNode;
+        closestActualFormElement = closestActualFormElement.nodeType === Node.ATTRIBUTE_NODE ?
+			closestActualFormElement.ownerElement :
+			closestActualFormElement.parentNode;
     }
 
     if (!closestActualFormElement) {
@@ -1036,6 +1041,131 @@ registerCustomXPathFunction(
     'item()?',
     instance,
 );
+const getAttributes = (value) => {
+    if (Array.isArray(value)) {
+        return ` type="array"`;
+    } else if (typeof value === 'number') {
+        return ` type="number"`;
+    } else if (typeof value === 'boolean') {
+        return ` type="boolean"`;
+    }
+    return '';
+};
+
+const jsonToXml = (dynamicContext, json) => {
+    const escapeXml = (str) => {
+        return str.replace(/[^\u0009\u000A\u000D\u0020-\uD7FF\uE000-\uFFFD]/g, (char) => {
+            return `\\u${char.charCodeAt(0).toString(16).padStart(4, '0')}`;
+        });
+    };
+
+    const convert = (obj, parent) => {
+        const type = typeof obj;
+        if (type === 'number') {
+            parent.setAttribute('type', 'number');
+            parent.textContent = obj.toString();
+        } else if (type === 'boolean') {
+            parent.setAttribute('type', 'boolean');
+            parent.textContent = obj.toString();
+        } else if (obj === null) {
+            const node = document.createElement('_');
+            node.setAttribute('type', 'null');
+            parent.appendChild(node);
+        } else if (type === 'string') {
+            parent.textContent = escapeXml(obj);
+        } else if (Array.isArray(obj)) {
+            parent.setAttribute('type', 'array');
+            obj.forEach((item) => {
+                const node = document.createElement('_');
+                convert(item, node);
+                node.textContent = item;
+                parent.appendChild(node);
+            });
+        } else if (type === 'object') {
+            parent.setAttribute('type', 'object');
+            Object.entries(obj).forEach(([key, value]) => {
+                if(value){
+                    const childNode = document.createElement(key.replace(/[^a-zA-Z0-9_]/g, '_'));
+                    convert(value, childNode);
+                    parent.appendChild(childNode);
+                }
+            });
+        }
+    };
+
+    const root = document.createElement('json');
+    if(Array.isArray(json)){
+        root.setAttribute('type', 'array');
+    }else{
+        root.setAttribute('type', 'object');
+    }
+    convert(json, root);
+    // return root.outerHTML;
+    console.log('xml',root)
+    return root;
+};
+
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'json2xml'},
+    ['item()?'],
+    'item()?',
+    jsonToXml
+);
+const xmlToJson = (dynamicContext, xml) => {
+    const isElementNode = (node) => {
+        return node.nodeType === Node.ELEMENT_NODE;
+    };
+
+    const isTextNode = (node) => {
+        return node.nodeType === Node.TEXT_NODE;
+    };
+
+    const parseNode = (node) => {
+        if (isElementNode(node)) {
+            const obj = {};
+            if (node.hasAttributes()) {
+                obj['type'] = node.getAttribute('type');
+            }
+            if (node.childNodes.length === 1 && isTextNode(node.firstChild)) {
+                return node.textContent;
+            }
+            for (const child of node.childNodes) {
+                const childName = child.nodeName;
+                const childValue = parseNode(child);
+                if (obj[childName]) {
+                    if (!Array.isArray(obj[childName])) {
+                        obj[childName] = [obj[childName]];
+                    }
+                    obj[childName].push(childValue);
+                } else {
+                    obj[childName] = childValue;
+                }
+            }
+            return obj;
+        } else if (isTextNode(node)) {
+            return node.textContent;
+        }
+
+    };
+
+    const parser = new DOMParser();
+    const xmlDoc = parser.parseFromString(xml, 'application/xml');
+    const root = xmlDoc.documentElement;
+    return parseNode(root);
+};
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'xmltoJson'},
+    ['item()?'],
+    'item()?',
+    xmlToJson
+);
+
+/*
+// Example usage:
+const xml = '<json type="object"><given>Mark</given><family>Smith</family></json>';
+console.log(xmlToJson(xml));
+*/
+
 
 registerCustomXPathFunction(
     {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'depends'},
@@ -1167,6 +1297,15 @@ registerCustomXPathFunction(
     'xs:string?',
     (dynamicContext, arg) => window.location.search,
 );
+registerCustomXPathFunction(
+    {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-relpath'},
+    [],
+    'xs:string?',
+    (dynamicContext, arg) => {
+        const path = new URL(window.location.href).pathname;
+        return path.substring(0,path.lastIndexOf('/') + 1);
+    },
+);
 registerCustomXPathFunction(
     {namespaceURI: XFORMS_NAMESPACE_URI, localName: 'uri-path'},
     [],