improved performance of custom elements by eliminating wait for inner…

…html

appdata/modules/Framelix/custom-elements/framelix-custom-element.js

@@ -10,7 +10,7 @@ class FramelixCustomElement extends HTMLElement {
   }
 
   async connectedCallback () {
-    if (!await this.waitForConnect()) return
+    this.originalHtml = this.innerHTML
     this.updateDomContents()
   }
 
@@ -20,12 +20,4 @@ class FramelixCustomElement extends HTMLElement {
   updateDomContents () {
     this.setRootContainerProps()
   }
-
-  async waitForConnect () {
-    // this prevents innerHTML from being empty
-    await Framelix.wait(1)
-    if (!this.isConnected) return false
-    if (typeof this.originalHtml === 'undefined') this.originalHtml = this.innerHTML
-    return true
-  }
 }

appdata/modules/Framelix/public/dist/css/backend.min.css.hash.txt

@@ -1 +1 @@
-54bce7c59813d869877610b9b34a80b2
+79d64af45406d13eb8fcb55912ae86cf

appdata/modules/Framelix/public/dist/css/form.min.css.hash.txt

@@ -1 +1 @@
-45437f3f24f57e3f311e49b092e7b13b
+f0878b3aec01599c61b3a335a5964d05

appdata/modules/Framelix/public/dist/css/general.min.css.hash.txt

@@ -1 +1 @@
-ab6eb4cc191afbc1be4e366eea69c543
+7f48eeb2af6afc37edc924f519d85b3b

appdata/modules/Framelix/public/dist/js/backend.min.js.hash.txt

@@ -1 +1 @@
-286b0103d83101a512be20b1519043a5
+9171660cc776a30b6104d96e71296d26

appdata/modules/Framelix/public/dist/js/form.min.js.hash.txt

@@ -1 +1 @@
-2052ccdc3c4de24735ba1de9067a008c
+622c576092625f4df8a92fbdca07fae0

appdata/modules/Framelix/public/dist/js/general-late.min.js

@@ -0,0 +1,301 @@
+'use strict';
+
+;
+class FramelixCustomElement extends HTMLElement {
+  originalHtml;
+  constructor() {
+    super();
+  }
+  async connectedCallback() {
+    this.originalHtml = this.innerHTML;
+    this.updateDomContents();
+  }
+  setRootContainerProps() {}
+  updateDomContents() {
+    this.setRootContainerProps();
+  }
+}
+;
+;
+class FramelixCustomElementAlert extends FramelixCustomElement {
+  initialized = false;
+  static resetAllAlerts() {
+    FramelixLocalStorage.remove('framelix_alerts_hidden');
+    $('framelix-alert').removeClass('hidden');
+  }
+  async updateDomContents() {
+    super.updateDomContents();
+    const self = this;
+    const hidable = this.getAttribute('hidable');
+    const bgcolor = this.getAttribute('bgcolor');
+    const textcolor = this.getAttribute('textcolor');
+    this.setAttribute('role', 'figure');
+    let text = this.getAttribute('header') ? `
+        <header><div class="text">${await FramelixLang.get(this.getAttribute('header'))}</div></header>
+    ` : '';
+    if (this.originalHtml.trim().length) {
+      text += `<article><div class="text">${await FramelixLang.get(this.originalHtml)}</div></article>`;
+    }
+    this.innerHTML = text;
+    if (hidable) {
+      $(this).children().first().append(`<framelix-button theme="transparent" icon="719" title="__framelix_alert_hide__" small></framelix-button>`);
+    }
+    if (bgcolor) {
+      this.style.backgroundColor = bgcolor;
+      if (!textcolor) {
+        setTimeout(function () {
+          self.style.color = FramelixColorUtils.invertColor(FramelixColorUtils.cssColorToHex(self.style.backgroundColor), true);
+        }, 10);
+      }
+    }
+    if (textcolor) {
+      self.style.color = textcolor;
+    }
+    if (hidable) {
+      const entries = FramelixLocalStorage.get('framelix_alerts_hidden') || {};
+      if (entries[hidable] === 1) {
+        this.classList.add('hidden');
+      }
+    }
+    if (!this.initialized) {
+      this.initialized = true;
+      if (hidable) {
+        const self = this;
+        this.addEventListener('click', async function (ev) {
+          const entries = FramelixLocalStorage.get('framelix_alerts_hidden') || {};
+          entries[hidable] = 1;
+          FramelixLocalStorage.set('framelix_alerts_hidden', entries);
+          FramelixToast.success($('.framelix-user-settings').length ? '__framelix_alert_hidden_backend__' : '__framelix_alert_hidden__');
+          self.classList.add('hidden');
+        });
+      }
+    }
+  }
+}
+window.customElements.define('framelix-alert', FramelixCustomElementAlert);
+;
+class FramelixCustomElementButton extends FramelixCustomElement {
+  initialized = false;
+  async updateDomContents() {
+    super.updateDomContents();
+    const self = this;
+    const icon = this.getAttribute('icon');
+    let disabled = this.hasAttribute('disabled');
+    const bgcolor = this.getAttribute('bgcolor');
+    const textcolor = this.getAttribute('textcolor');
+    this.setAttribute('role', 'button');
+    if (!disabled) {
+      if (this.getAttribute('tabindex') === null) {
+        this.setAttribute('tabindex', '0');
+      }
+    } else if (disabled) {
+      this.removeAttribute('tabindex');
+      this.removeAttribute('role');
+    }
+    this.toggleAttribute('haslabel', this.originalHtml.trim().length >= 1);
+    if (!this.hasAttribute('raw')) {
+      let html = '';
+      if (icon) html += '<div class="icon"><framelix-icon icon="' + icon + '"></framelix-icon></div>';
+      const text = await FramelixLang.get(this.originalHtml.trim());
+      if (text.length) html += '<label class="label">' + text + '</label>';
+      this.innerHTML = html;
+    }
+    if (bgcolor) {
+      this.style.backgroundColor = bgcolor;
+      if (!textcolor) {
+        setTimeout(function () {
+          self.style.color = FramelixColorUtils.invertColor(FramelixColorUtils.cssColorToHex(self.style.backgroundColor), true);
+        }, 10);
+      }
+    }
+    if (textcolor) {
+      self.style.color = textcolor;
+    }
+    if (this.hasAttribute('href')) {
+      this.setAttribute('role', 'link');
+    }
+    if (!this.initialized) {
+      this.initialized = true;
+      this.addEventListener('click', async function (ev) {
+        disabled = disabled = this.hasAttribute('disabled');
+        if (disabled) return;
+        const clickConfirmMessage = this.getAttribute('confirm-message');
+        if (clickConfirmMessage) {
+          if (!(await FramelixModal.confirm(await FramelixLang.get(clickConfirmMessage)).confirmed)) {
+            return;
+          }
+        }
+        const target = this.getAttribute('target') || '_self';
+        const modalOptions = this.getAttribute('modal-options');
+        const jscallUrl = this.getAttribute('jscall-url');
+        const href = this.getAttribute('href');
+        if (jscallUrl) {
+          self.setAttribute('disabled', '1');
+          self.updateDomContents();
+          const request = FramelixRequest.jsCall(jscallUrl, {
+            'data': this.dataset
+          });
+          if (target === 'modal') {
+            FramelixModal.show(Object.assign({
+              bodyContent: request
+            }, modalOptions ? JSON.parse(modalOptions) : {}));
+          } else if (target === 'tooltip' || target === 'attached') {
+            FramelixPopup.show(this, request, {
+              color: target === 'tooltip' ? 'dark' : document.body
+            });
+          } else if (target === 'attached') {
+            FramelixPopup.show(this, request);
+          } else if (target === '_blank') {
+            const result = await request.getResponseData();
+            const w = window.open('about:blank');
+            w.document.write(result);
+          } else if (target === '_top') {
+            const result = await request.getResponseData();
+            window.top.document.write(result);
+          } else if (target === '_self') {
+            const result = await request.getResponseData();
+            window.document.write(result);
+          } else if (target === 'none') {
+            Framelix.showProgressBar(1);
+            await request.checkHeaders();
+            Framelix.showProgressBar(null);
+          }
+          self.removeAttribute('disabled');
+          self.updateDomContents();
+        }
+        if (href) {
+          if (target === 'modal') {
+            const request = FramelixRequest.request('get', href);
+            FramelixModal.show({
+              bodyContent: request
+            });
+          } else if (target === 'none') {
+            const request = FramelixRequest.request('get', href);
+            await request.checkHeaders();
+          } else {
+            const link = $('<a>').attr('href', href).attr('target', target);
+            link.css('display', 'hidden');
+            $('body').append();
+            link.trigger('click');
+            setTimeout(function () {
+              link.remove();
+            }, 1000);
+          }
+        }
+      });
+      this.addEventListener('keydown', function (ev) {
+        if (ev.key === ' ' || ev.key === 'Enter') {
+          $(self).trigger('click');
+        }
+      });
+    }
+  }
+}
+window.customElements.define('framelix-button', FramelixCustomElementButton);
+;
+class FramelixCustomElementIcon extends FramelixCustomElement {
+  initialized = false;
+  async updateDomContents() {
+    super.updateDomContents();
+    const icon = this.getAttribute('icon');
+    const size = this.getAttribute('size');
+    this.setAttribute('role', 'img');
+    if (size) {
+      this.style.fontSize = size.match(/[^0-9]/) ? size : size + 'px';
+    }
+    this.innerHTML = '&#xe' + icon + ';';
+  }
+}
+window.customElements.define('framelix-icon', FramelixCustomElementIcon);
+;
+class FramelixCustomElementImage extends FramelixCustomElement {
+  async updateDomContents() {
+    super.updateDomContents();
+    await Framelix.wait(FramelixRandom.getRandomInt(100, 200));
+    const lazy = !this.getAttribute('nolazy');
+    const self = this;
+    function show() {
+      const parent = self.parentElement;
+      let parentWidth = parent.getBoundingClientRect().width;
+      if (self.getAttribute('minwidth')) {
+        parentWidth = Math.max(parseInt(self.getAttribute('minwidth')), parentWidth);
+      }
+      if (self.getAttribute('maxwidth')) {
+        parentWidth = Math.min(parseInt(self.getAttribute('maxwidth')), parentWidth);
+      }
+      if (parentWidth <= 0) {
+        return;
+      }
+      let useUrl = '';
+      const sizeAttr = [];
+      for (const attr of self.attributes) {
+        if (attr.name.startsWith('size-')) {
+          const size = parseInt(attr.name.substring(5));
+          sizeAttr.push({
+            'size': size,
+            'url': attr.value
+          });
+          if (parentWidth > size || useUrl === '') {
+            useUrl = attr.value;
+          }
+        }
+      }
+      sizeAttr.sort(function (a, b) {
+        if (a.size > b.size) return 1;
+        if (a.size < b.size) return -1;
+        return 0;
+      });
+      for (const row of sizeAttr) {
+        if (parentWidth > row.size || useUrl === '') {
+          useUrl = row.url;
+        } else if (parentWidth < row.size) {
+          useUrl = row.url;
+          break;
+        }
+      }
+      if (useUrl === '') useUrl = self.getAttribute('src');
+      function checkResize(el) {
+        if (self.getAttribute('recalculate')) {
+          setTimeout(function () {
+            FramelixResizeObserver.observe(el, function () {
+              FramelixResizeObserver.unobserve(el);
+              show();
+            });
+          }, 500);
+        }
+      }
+      if (self.getAttribute('setparent')) {
+        parent.style.backgroundImage = 'url(' + useUrl + ')';
+        checkResize(parent);
+      } else {
+        const img = document.createElement('img');
+        self.innerHTML = ``;
+        self.appendChild(img);
+        img.src = useUrl;
+        checkResize(img);
+      }
+    }
+    console.log("show");
+    if (!lazy) {
+      show();
+    } else {
+      FramelixIntersectionObserver.onGetVisible(this, show);
+    }
+  }
+}
+window.customElements.define('framelix-image', FramelixCustomElementImage);
+;
+class FramelixCustomElementTime extends FramelixCustomElement {
+  initialized = false;
+  async updateDomContents() {
+    super.updateDomContents();
+    const self = this;
+    const datetime = this.getAttribute('datetime');
+    const format = this.getAttribute('format');
+    this.innerHTML = '<time datetime="' + datetime + '">' + dayjs(datetime).format(format) + '</time>';
+    if (!this.initialized) {
+      this.initialized = true;
+    }
+  }
+}
+window.customElements.define('framelix-time', FramelixCustomElementTime);

appdata/modules/Framelix/public/dist/js/general-late.min.js.hash.txt

@@ -0,0 +1 @@
+814ac77440676797db59d60de2e09c0c