@jinntec/fore 1.4.0 → 1.6.0

package/src/lab/fore-component.js

@@ -0,0 +1,90 @@
+/**
+ * a simple component that wraps a Fore page and puts it into shadowDom.
+ *
+ * HTML link elements passed as children will be used to construct a CSSStyleSheet that is passed
+ * to the shadowDOM.
+ * @customElement
+ */
+export class ForeComponent extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'})
+        this.src = ''
+    }
+
+    connectedCallback() {
+        this.src= this.getAttribute('src');
+        const style = `
+          :host {
+            display:block;
+          }
+        `;
+        const html = `
+          <fx-fore src="${this.src}">
+          </fx-fore>
+          <slot id="default"></slot>
+        `;
+
+        this.shadowRoot.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${html}
+        `;
+
+        /*
+         * wait for slotchange, then filter document.stylesheets to construct CSSStyleSheet
+         */
+        const slot = this.shadowRoot.querySelector('#default');
+        slot.addEventListener('slotchange', async event => {
+            const children = event.target.assignedElements();
+            const hostedStylesheet = children.filter(
+                linkElem => linkElem.nodeName.toUpperCase() === 'LINK',
+            );
+            if(!hostedStylesheet) return;
+            const allCSS = [...document.styleSheets]
+                .map((styleSheet) => {
+                    if(hostedStylesheet.find(sh => sh.href === styleSheet.href)){
+                        try {
+                            return [...styleSheet.cssRules]
+                                .map((rule) => rule.cssText)
+                                .join('');
+                        } catch (e) {
+                            console.log('Access to stylesheet %s is denied. Ignoring…', styleSheet.href);
+                        }
+                    }
+                })
+                .filter(Boolean)
+                .join('\n');
+
+            const sheet = new CSSStyleSheet();
+            sheet.replaceSync(allCSS);
+            this.shadowRoot.adoptedStyleSheets = [sheet];
+        });
+
+/*
+        const eventSlot = this.shadowRoot.querySelector('slot[name="event"]');
+        eventSlot.addEventListener('slotchange', async event => {
+            const children = event.target.assignedElements();
+            console.log('events', children)
+        });
+*/
+        const eventTmpl = this.querySelector('fx-action');
+        if(eventTmpl){
+            // const clone = eventTmpl.content.cloneNode(true);
+            const clone = eventTmpl.cloneNode(true);
+            this.removeChild(eventTmpl);
+            // const content = document.importNode(clone, true);
+
+            const fore = this.shadowRoot.querySelector('fx-fore');
+            // fore.appendChild(content.firstElementChild);
+            fore.appendChild(clone);
+        }
+
+    }
+
+}
+
+if (!customElements.get('fore-component')) {
+    customElements.define('fore-component', ForeComponent);
+}

package/src/lab/instance-inspector.js

@@ -0,0 +1,56 @@
+import '../../index.js';
+// import '@jinntec/jinn-codemirror/src/jinn-code-mirror.js';
+
+/**
+ * a simple component that wraps a Fore page and puts it into shadowDom.
+ *
+ * HTML link elements passed as children will be used to construct a CSSStyleSheet that is passed
+ * to the shadowDOM.
+ * @customElement
+ */
+export class InstanceInspector extends HTMLElement {
+    constructor() {
+        super();
+        this.attachShadow({mode: 'open'})
+    }
+
+    connectedCallback() {
+        this.id= this.getAttribute('id');
+        const style = `
+          :host {
+            display:block;
+            background:blue;           
+          }
+          section, fx-control, jinn-codemirror{
+            display:block;
+            width:100%;
+            height:100%;
+          }
+        `;
+        const html = `
+        <section>
+            <fx-control ref="instance('${this.id}')" as="node">
+                <label>${this.id}</label>
+                <jinn-codemirror mode="xml" class="widget"></jinn-codemirror>
+            </fx-control>
+        </section>
+        <slot></slot>
+        `;
+
+        this.innerHTML = `
+            <style>
+                ${style}
+            </style>
+            ${html}
+        `;
+
+
+        this.closest('fx-fore').refresh();
+
+    }
+
+}
+
+if (!customElements.get('instance-inspector')) {
+    customElements.define('instance-inspector', InstanceInspector);
+}

package/src/lab/template.html

@@ -0,0 +1,16 @@
+<fx-fore>
+  <fx-message event="ready">hey from component</fx-message>
+                <fx-model>
+                    <fx-instance>
+                        <data>
+                            <greeting>Hello Universe</greeting>
+                        </data>
+                    </fx-instance>
+                </fx-model>
+
+                <div class="static {greeting}">Greeting: {greeting}</div>
+                <fx-control ref="greeting" update-event="input">
+                    <label>Hey!</label>
+                </fx-control>
+<!--                <slot></slot>-->
+</fx-fore>

package/src/relevance.js

@@ -38,6 +38,19 @@ export class Relevance {
         const { attributes } = n;
         if (attributes) {
           Array.from(attributes).forEach(attr => {
+            if (element.nonrelevant === 'empty' && !Relevance._isRelevant(element, attr)) {
+              clone.setAttribute(attr.nodeName, '');
+            }else
+            if (Relevance._isRelevant(element, attr)) {
+              clone.setAttribute(attr.nodeName, attr.value);
+            } else {
+              // if (element.nonrelevant === 'empty') {
+              //   clone.setAttribute(attr.nodeName, '');
+              // } else{
+                clone.removeAttribute(attr.nodeName);
+              // }
+            }
+/*
             if (Relevance._isRelevant(element, attr)) {
               clone.setAttribute(attr.nodeName, attr.value);
             } else if (element.nonrelevant === 'empty') {
@@ -45,6 +58,7 @@ export class Relevance {
             } else {
               clone.removeAttribute(attr.nodeName);
             }
+*/
           });
         }
         return Relevance._filterRelevant(element, n, clone);
@@ -56,9 +70,21 @@ export class Relevance {
 
   static _isRelevant(element, node) {
     const mi = element.getModel().getModelItem(node);
-    if (!mi || mi.relevant) {
+
+    // ### remove empty attributes as these usually are not expected in most XML languages.
+    if(node.nodeType === Node.ATTRIBUTE_NODE
+        && node.nodeValue === ''){
+      return false;
+    }
+    // ### no modelItem means no constraints
+    if(!mi){
       return true;
     }
+    // ### modelItem 'relevant' is defined and 'true'
+    if ( mi.relevant) {
+      return true;
+    }
+
     return false;
   }
 }