@jinntec/fore 2.2.0 → 2.3.1

package/src/ui/fx-case.js

@@ -1,6 +1,7 @@
 // import { foreElementMixin } from '../ForeElementMixin';
 
-import {FxContainer} from "./fx-container.js";
+import { FxContainer } from './fx-container.js';
+import { Fore } from '../fore.js';
 
 /**
  * `fx-case`
@@ -9,12 +10,27 @@ import {FxContainer} from "./fx-container.js";
  *  * todo: implement
  * @customElement
  */
-class FxCase extends FxContainer {
-/*
-  constructor() {
-    super();
+export class FxCase extends FxContainer {
+  static get properties() {
+    return {
+      ...super.properties,
+      label: {
+        type: String,
+      },
+      name: {
+        type: String,
+      },
+      selected: {
+        type: String,
+      },
+      selector: {
+        type: String,
+      },
+      src: {
+        type: String,
+      },
+    };
   }
-*/
 
   connectedCallback() {
     if (this.hasAttribute('label')) {
@@ -26,6 +42,10 @@ class FxCase extends FxContainer {
     if (this.hasAttribute('selected')) {
       this.selected = this.getAttribute('selected');
     }
+    this.selector = this.hasAttribute('selector') ? this.getAttribute('selector') : 'fx-case';
+    if (this.hasAttribute('src')) {
+      this.src = this.getAttribute('src');
+    }
 
     const style = `
             :host {
@@ -41,8 +61,40 @@ class FxCase extends FxContainer {
                 ${style}
             </style>
             ${html}
-    `;
+        `;
+
+    this.addEventListener('select', async () => {
+      const ownerForm = this.getOwnerForm();
+      if (this.src) {
+        // We will replace the node. So this node will be detached after these async function
+        // calls. Save all important state first.
+        const { parentNode } = this;
+        const replacement = await this._loadFromSrc();
+        if(!replacement){
+          Fore.dispatch(this, 'error', {
+            detail: {
+              message: `HTML page couldn't be loaded`,
+            },
+          });
+          return;
+        }
+        await parentNode.replaceCase(this, replacement);
+      }
+      const model = ownerForm.getModel();
+      model.updateModel();
+      ownerForm.refresh(true);
+    });
+  }
 
+  /**
+   * loads a Fore from an URL given by `src`.
+   *
+   * Will extract the `fx-fore` element from that target file and use and replace current `fx-fore` element with the loaded one.
+   * @private
+   */
+  async _loadFromSrc() {
+    // console.log('########## loading Fore from ', this.src, '##########');
+    return Fore.loadForeFromSrc(this, this.src, this.selector);
   }
 }
 

package/src/ui/fx-container.js

@@ -1,30 +1,30 @@
 import '../fx-model.js';
-import { foreElementMixin } from '../ForeElementMixin.js';
-import {Fore} from "../fore.js";
+import ForeElementMixin from '../ForeElementMixin.js';
 
 /**
  * `fx-container` -
  * is a general class for container elements.
  *
  */
-export class FxContainer extends foreElementMixin(HTMLElement) {
+export class FxContainer extends ForeElementMixin {
   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;
+    this.src = this.hasAttribute('src') ? this.getAttribute('src') : null;
     const style = `
         :host {
             display: block;
@@ -44,7 +44,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
 
     this.getOwnerForm().registerLazyElement(this);
 
-/*
+    /*
     this.addEventListener('mousedown', e => {
 
       if(e.target === this){
@@ -53,7 +53,6 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
       }
     } );
 */
-
   }
 
   /**
@@ -64,7 +63,7 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     // 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 =>{
@@ -104,8 +103,8 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     // console.log('mip valid', this.modelItem.enabled);
     if (!this.modelItem) {
       // console.log('container is not relevant');
-      this.removeAttribute('relevant','');
-      this.setAttribute('nonrelevant','');
+      this.removeAttribute('relevant', '');
+      this.setAttribute('nonrelevant', '');
       this.dispatchEvent(new CustomEvent('disabled', {}));
       return;
     }
@@ -113,12 +112,12 @@ export class FxContainer extends foreElementMixin(HTMLElement) {
     if (this.isEnabled() !== this.modelItem.enabled) {
       if (this.modelItem.relevant) {
         // this.style.display = 'block';
-        this.removeAttribute('nonrelevant','');
-        this.setAttribute('relevant','');
+        this.removeAttribute('nonrelevant', '');
+        this.setAttribute('relevant', '');
         this.dispatchEvent(new CustomEvent('enabled', {}));
       } else {
-        this.removeAttribute('relevant','');
-        this.setAttribute('nonrelevant','');
+        this.removeAttribute('relevant', '');
+        this.setAttribute('nonrelevant', '');
         this.dispatchEvent(new CustomEvent('disabled', {}));
       }
     }