From bed9f8aca08000c01c65652285a69220fce2716b Mon Sep 17 00:00:00 2001 From: Conrad Sollitt Date: Thu, 11 May 2023 23:48:10 -0700 Subject: [PATCH 01/17] =?UTF-8?q?=F0=9F=93=84=20Update=20Docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/i18n/image-classification.ar.json | 2 +- examples/i18n/image-classification.en.json | 2 +- examples/i18n/image-classification.es.json | 2 +- examples/i18n/image-classification.fr.json | 2 +- examples/i18n/image-classification.ja.json | 2 +- examples/i18n/image-classification.pt-BR.json | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/examples/i18n/image-classification.ar.json b/examples/i18n/image-classification.ar.json index c0f1991d..fb5259a4 100644 --- a/examples/i18n/image-classification.ar.json +++ b/examples/i18n/image-classification.ar.json @@ -17,7 +17,7 @@ "Links": "الروابط", "info_1": "AI = الذكاء الاصطناعي / ML = التعلم الالي", "info_2": "توضح هذه الصفحة توسيع صفحة JSON Web Service مع DataFormsJS لتضمين شفرة JavaScript مخصصة.", - "info_3": "تقوم هذه الصفحة بتنزيل نماذج من الصور والنتائج من خدمة JSON وتسمح بالتنبؤات من تحميل الصور إلى خدمة ويب تصنيف الصور AI / ML المبنية مع Python باستخدام Keras و TensorFlow.", + "info_3": "تقوم هذه الصفحة بتنزيل نماذج من الصور والنتائج من خدمة JSON وتسمح بالتنبؤات من تحميل الصور إلى خدمة ويب تصنيف الصور AI / ML المبنية مع Python باستخدام PyTorch.", "info_4": "عند تحميل صورة ، ستتم مطابقتها مع 1000 فئة مختلفة ؛إذا تم تحميل صورة لا تتطابق مع إحدى الفئات ، فقد تكون النتائج غير دقيقة لأن النموذج يمكن أن يتطابق مع الفئات المعروفة فقط.على سبيل المثال ، يمكن تصنيف صورة الدلفين باحتمالية متوسطة كسمك قرش أبيض كبير.", "info_5": "من الناحية المثالية ، سيكون العنصر الرئيسي في الصورة في الوسط وتركيز الصورة وإلا ستكون النتائج أقل دقة.", "info_6": "تعتبر أي صور تقوم بتحميلها خاصة لك فقط ويتم حذفها من الخادم بمجرد معالجتها.", diff --git a/examples/i18n/image-classification.en.json b/examples/i18n/image-classification.en.json index 5a1bb403..257810a7 100644 --- a/examples/i18n/image-classification.en.json +++ b/examples/i18n/image-classification.en.json @@ -17,7 +17,7 @@ "Links": "Links", "info_1": "AI = Artificial Intelligence / ML = Machine Learning", "info_2": "This page demonstrates extending a JSON Web Service page with DataFormsJS to include custom JavaScript code.", - "info_3": "This page downloads sample images and results from a JSON Service and allows for predictions from upload images to AI/ML Image Classification Web service built with Python using Keras and TensorFlow.", + "info_3": "This page downloads sample images and results from a JSON Service and allows for predictions from upload images to AI/ML Image Classification Web service built with Python using PyTorch.", "info_4": "When you upload an image it will be matched against 1,000 different categories; if an image is uploaded that does not match one of the categories the results may be inaccurate because the model can only match against the known categories. For example a photo of a dolphin may be categorized with medium probability as a great white shark.", "info_5": "Ideally the main item in the image will be in the center and the focus of the photo otherwise the results will be less accurate.", "info_6": "Any images that you upload are private only to you and are deleted from the server as soon as they are processed.", diff --git a/examples/i18n/image-classification.es.json b/examples/i18n/image-classification.es.json index 12ab4aba..a7e297d1 100644 --- a/examples/i18n/image-classification.es.json +++ b/examples/i18n/image-classification.es.json @@ -17,7 +17,7 @@ "Links": "Enlaces web", "info_1": "AI = Inteligencia Artificial / ML = Machine Learning", "info_2": "Esta página muestra cómo extender una página de servicio web JSON con DataFormsJS para incluir código JavaScript personalizado.", - "info_3": "Esta página descarga imágenes de muestra y resultados de un servicio JSON y permite realizar predicciones a partir de la carga de imágenes al servicio web de clasificación de imágenes AI / ML creado con Python usando Keras y TensorFlow.", + "info_3": "Esta página descarga imágenes de muestra y resultados de un servicio JSON y permite realizar predicciones a partir de la carga de imágenes al servicio web de clasificación de imágenes AI / ML creado con Python usando PyTorch.", "info_4": "Cuando cargue una imagen, se comparará con 1,000 categorías diferentes; si se carga una imagen que no coincide con una de las categorías, los resultados pueden ser inexactos porque el modelo solo puede coincidir con las categorías conocidas. Por ejemplo, una foto de un delfín puede clasificarse con probabilidad media como un gran tiburón blanco.", "info_5": "Idealmente, el elemento principal de la imagen deberá estar en el centro y en el foco de la foto; de lo contrario, los resultados serán menos precisos.", "info_6": "Las imágenes que cargue son privadas solo para usted y se eliminan del servidor tan pronto como se procesan.", diff --git a/examples/i18n/image-classification.fr.json b/examples/i18n/image-classification.fr.json index 5632de2a..871047e8 100644 --- a/examples/i18n/image-classification.fr.json +++ b/examples/i18n/image-classification.fr.json @@ -17,7 +17,7 @@ "Links": "Liens", "info_1": "AI = Intelligence Artificielle / ML = Apprentissage Automatique", "info_2": "Cette page montre comment étendre une page de service Web JSON avec DataFormsJS pour inclure du code JavaScript personnalisé.", - "info_3": "Cette page télécharge des exemples d'images et de résultats à partir d'un service JSON et permet des prédictions de téléchargement d'images vers le service Web de classification d'images AI/ML construit avec Python en utilisant Keras et TensorFlow.", + "info_3": "Cette page télécharge des exemples d'images et de résultats à partir d'un service JSON et permet des prédictions de téléchargement d'images vers le service Web de classification d'images AI/ML construit avec Python en utilisant PyTorch.", "info_4": "Lorsque vous téléchargez une image, elle sera comparée à 1 000 catégories différentes; si une image est téléchargée qui ne correspond pas à l'une des catégories, les résultats peuvent être inexacts car le modèle ne peut correspondre qu'aux catégories connues. Par exemple, une photo d'un dauphin peut être classée avec une probabilité moyenne comme un grand requin blanc.", "info_5": "Idéalement, l'élément principal de l'image sera au centre et la mise au point de la photo, sinon les résultats seront moins précis.", "info_6": "Toutes les images que vous téléchargez sont privées uniquement pour vous et sont supprimées du serveur dès qu'elles sont traitées.", diff --git a/examples/i18n/image-classification.ja.json b/examples/i18n/image-classification.ja.json index d390c37e..491a7be0 100644 --- a/examples/i18n/image-classification.ja.json +++ b/examples/i18n/image-classification.ja.json @@ -17,7 +17,7 @@ "Links": "リンク集", "info_1": "AI =人工知能/ ML =機械学習", "info_2": "このページでは、JSON WebサービスページをDataFormsJSで拡張してカスタムJavaScriptコードを含める方法を示します。", - "info_3": "このページは、JSONサービスからサンプル画像と結果をダウンロードし、KerasとTensorFlowを使用してPythonで構築されたAI / ML画像分類Webサービスへのアップロード画像からの予測を可能にします。", + "info_3": "このページは、JSONサービスからサンプル画像と結果をダウンロードし、PyTorchを使用してPythonで構築されたAI / ML画像分類Webサービスへのアップロード画像からの予測を可能にします。", "info_4": "画像をアップロードすると、1,000の異なるカテゴリと照合されます。 カテゴリの1つと一致しない画像がアップロードされた場合、モデルは既知のカテゴリとしか一致しないため、結果が不正確になる可能性があります。 たとえば、イルカの写真は、ホオジロザメとして中程度の確率で分類されます。", "info_5": "理想的には、画像の主要なアイテムが中央にあり、写真の焦点が合っていると、結果の精度が低下します。", "info_6": "アップロードした画像は自分だけに限定され、処理されるとすぐにサーバーから削除されます。", diff --git a/examples/i18n/image-classification.pt-BR.json b/examples/i18n/image-classification.pt-BR.json index 34739854..339006c3 100644 --- a/examples/i18n/image-classification.pt-BR.json +++ b/examples/i18n/image-classification.pt-BR.json @@ -17,7 +17,7 @@ "Links": "Links", "info_1": "AI = Artificial Intelligence / ML = Machine Learning", "info_2": "Esta página demonstra como extender uma página Web Service JSON com DataFormsJS para incluir código personalizado JavaScript.", - "info_3": "Esta página baixa imagens de exemplo e resultados de um serviço JSON e permite predições à partir de imagens enviadas para o serviço web AI/ML Classificação de Imagem desenvolvido em Python usando Keras e TensorFlow.", + "info_3": "Esta página baixa imagens de exemplo e resultados de um serviço JSON e permite predições à partir de imagens enviadas para o serviço web AI/ML Classificação de Imagem desenvolvido em Python usando PyTorch.", "info_4": "Quando você envia uma imagem essa será comparada com categorias 1.000 diferentes; se uma imagem é enviada que não corresponde a uma das categorias os resultados talvez sejam imprecisos porque o modelo pode somente comparar com categorias conhecidas. Por exemplo uma foto de um golfinho pode ser categorizada com média probabilidade como um grande tubarão branco.", "info_5": "O ideal é o item principal em uma imagem estar no centro e no foco da foto the main item in the image will be in the center and the focus of the photo caso contrário os resultados serão menos precisos.", "info_6": "Quaisquer imagens que você envia são privadas e são apagadas do servidor assim que seu processamento é finalizado.", From 446e8a63a9d623801c98ae889177aeaafd0736da Mon Sep 17 00:00:00 2001 From: Conrad Sollitt Date: Thu, 11 May 2023 23:53:17 -0700 Subject: [PATCH 02/17] =?UTF-8?q?=F0=9F=93=84=20Update=20Docs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/html/image-info-links.htm | 3 +-- examples/html/image-info-react.jsx | 3 +-- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/examples/html/image-info-links.htm b/examples/html/image-info-links.htm index bd503239..7b6378fb 100644 --- a/examples/html/image-info-links.htm +++ b/examples/html/image-info-links.htm @@ -1,5 +1,4 @@ -
  • https://www.tensorflow.org
    • -
  • https://keras.io
    • +
  • https://pytorch.org/
  • https://www.kaggle.com/keras/resnet50
  • http://image-net.org/
  • https://en.wikipedia.org/wiki/Computer_vision
    • diff --git a/examples/html/image-info-react.jsx b/examples/html/image-info-react.jsx index ba7301f7..a5ef5695 100644 --- a/examples/html/image-info-react.jsx +++ b/examples/html/image-info-react.jsx @@ -1,7 +1,6 @@ const links = [ - 'https://www.tensorflow.org', - 'https://keras.io', + 'https://pytorch.org/', 'https://www.kaggle.com/keras/resnet50', 'http://image-net.org/', 'https://en.wikipedia.org/wiki/Computer_vision', From 9b7772c50b39df9068079bc7ba7049903ff57eea Mon Sep 17 00:00:00 2001 From: Conrad Sollitt Date: Sat, 10 Jun 2023 19:09:24 -0700 Subject: [PATCH 03/17] =?UTF-8?q?=F0=9F=93=84=20Add=20links=20to=20Server?= =?UTF-8?q?=20Code=20in=20Examples?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- examples/html/binary-info-hbs.htm | 1 + examples/html/binary-info-vue.htm | 1 + examples/html/image-info-hbs.htm | 1 + examples/html/image-info-react.jsx | 1 + examples/html/image-info-vue.htm | 1 + examples/html/image-info-web.htm | 1 + examples/html/places-info-hbs.htm | 1 + examples/html/places-info-js.htm | 1 + examples/html/places-info-links.htm | 1 + examples/html/places-info-react.jsx | 1 + examples/html/places-info-vue.htm | 1 + examples/html/places-info-web.htm | 1 + 12 files changed, 12 insertions(+) diff --git a/examples/html/binary-info-hbs.htm b/examples/html/binary-info-hbs.htm index e087caef..b60815f6 100644 --- a/examples/html/binary-info-hbs.htm +++ b/examples/html/binary-info-hbs.htm @@ -22,6 +22,7 @@

  • Handlebars
  • Vue
  • JavaScript
    • +
  • Python Server Code

    • {{i18n 'Links'}}

    diff --git a/examples/html/binary-info-vue.htm b/examples/html/binary-info-vue.htm index a39e2dfe..16ebef15 100644 --- a/examples/html/binary-info-vue.htm +++ b/examples/html/binary-info-vue.htm @@ -22,6 +22,7 @@

  • Vue
  • Handlebars
  • JavaScript
    • +
  • Python Server Code

    • diff --git a/examples/html/image-info-hbs.htm b/examples/html/image-info-hbs.htm index 0e98fdc5..dd367088 100644 --- a/examples/html/image-info-hbs.htm +++ b/examples/html/image-info-hbs.htm @@ -40,6 +40,7 @@

  • JSX (React)
  • Web Components
  • JavaScript (Web Components)
    • +
  • Python Server Code

    • {{i18n 'Links'}}

    diff --git a/examples/html/image-info-react.jsx b/examples/html/image-info-react.jsx index a5ef5695..4c602d13 100644 --- a/examples/html/image-info-react.jsx +++ b/examples/html/image-info-react.jsx @@ -48,6 +48,7 @@ function PageInfo() {
  • JSX (React)
  • Web Components
  • JavaScript (Web Components)
    • +
  • Python Server Code

    • {i18n.text('Links')}

    diff --git a/examples/html/image-info-vue.htm b/examples/html/image-info-vue.htm index 3a6caa00..9d810614 100644 --- a/examples/html/image-info-vue.htm +++ b/examples/html/image-info-vue.htm @@ -38,6 +38,7 @@

  • JSX (React)
  • Web Components
  • JavaScript (Web Components)
    • +
  • Python Server Code

    • diff --git a/examples/html/image-info-web.htm b/examples/html/image-info-web.htm index 7b4e4099..79ed0f5c 100644 --- a/examples/html/image-info-web.htm +++ b/examples/html/image-info-web.htm @@ -38,6 +38,7 @@

  • JSX (React)
  • Web Components
  • JavaScript (Web Components)
    • +
  • Python Server Code

    • diff --git a/examples/html/places-info-hbs.htm b/examples/html/places-info-hbs.htm index 8cc311d7..b82fd1fd 100644 --- a/examples/html/places-info-hbs.htm +++ b/examples/html/places-info-hbs.htm @@ -26,6 +26,7 @@

  • GraphQL
  • {{i18n 'web_components'}}
  • {{i18n 'html_js_only'}}
    • +
  • PHP Server Code

    • {{i18n 'Links'}}

    diff --git a/examples/html/places-info-js.htm b/examples/html/places-info-js.htm index c79a09ab..7574d756 100644 --- a/examples/html/places-info-js.htm +++ b/examples/html/places-info-js.htm @@ -26,6 +26,7 @@

  • Handlebars
  • GraphQL
    • +
  • PHP Server Code

    • diff --git a/examples/html/places-info-links.htm b/examples/html/places-info-links.htm index 8d0775e5..6ce2d2e7 100644 --- a/examples/html/places-info-links.htm +++ b/examples/html/places-info-links.htm @@ -5,3 +5,4 @@
  • https://leafletjs.com
  • https://www.openstreetmap.org
  • https://developer.mozilla.org/en-US/docs/Web/Web_Components
    • +
  • PHP Server Code
    • diff --git a/examples/html/places-info-react.jsx b/examples/html/places-info-react.jsx index 15e4f9ac..b6ae19bd 100644 --- a/examples/html/places-info-react.jsx +++ b/examples/html/places-info-react.jsx @@ -40,6 +40,7 @@ function PageInfo({match}) {
  • GraphQL
  • {i18n.text('web_components')}
  • {i18n.text('html_js_only')}
    • +
  • PHP Server Code

    • {i18n.text('Links')}

    diff --git a/examples/html/places-info-vue.htm b/examples/html/places-info-vue.htm index 440cf6fa..b80e1079 100644 --- a/examples/html/places-info-vue.htm +++ b/examples/html/places-info-vue.htm @@ -26,6 +26,7 @@

  • GraphQL
    • +
  • PHP Server Code

    • diff --git a/examples/html/places-info-web.htm b/examples/html/places-info-web.htm index 4ccbe631..fb90aa5c 100644 --- a/examples/html/places-info-web.htm +++ b/examples/html/places-info-web.htm @@ -26,6 +26,7 @@

  • Handlebars
  • GraphQL
    • +
  • PHP Server Code

    • From 57775391502f0186523d8903ba5b777dc4cd9774 Mon Sep 17 00:00:00 2001 From: Conrad Sollitt Date: Mon, 19 Aug 2024 21:50:58 -0700 Subject: [PATCH 04/17] =?UTF-8?q?=F0=9F=9A=80=20Release=205.14.4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CHANGELOG.md | 8 ++++++++ examples/hacker-news-react.htm | 2 +- js/DataFormsJS.js | 4 ++-- js/DataFormsJS.min.js | 4 ++-- js/plugins/animation.js | 2 +- js/plugins/animation.min.js | 2 +- js/react/es5/DataFormsJS.js | 2 +- js/react/es5/DataFormsJS.min.js | 2 +- js/react/es6/DataFormsJS.min.js | 2 +- js/react/jsxLoader.js | 4 ++-- js/react/jsxLoader.min.js | 4 ++-- js/web-components/json-data.min.js | 2 +- js/web-components/url-router.min.js | 2 +- package.json | 2 +- test/js/unit-testing-react.js | 2 +- 15 files changed, 26 insertions(+), 18 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 319c8e52..8f644f89 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,14 @@ DataFormsJS uses [Semantic Versioning](https://docs.npmjs.com/about-semantic-ver Overall the core Framework files, React Components, and Web Components and API are expected to remain stable however the version number is expected to increase to much larger numbers in the future due to the changes to smaller scripts and components. This change log includes all npm release history and new website features or major changes. +## 5.14.4 (Aug 19, 2024) + +* Replace all instances of the Polyfill Service `https://polyfill.io/v3/polyfill.min.js?` with `https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js?version=4.8.0&` + * This is due to a supply chain attack against the popular JS Polyfill Library and site `polyfill.io`. + * https://cdnjs.cloudflare.com/polyfill/ + * https://www.akamai.com/blog/security/2024-polyfill-supply-chain-attack-what-to-know + * Based on how the Polyfill is loaded for DataFormsJS this error would have only affected users of IE (as of 2024 this is mainly old Windows Servers in a corporate environment). + ## 5.14.3 (Jan 29, 2023) * jsxLoader Update so that JSX Files are compiled and added to the page only after all files are downloaded diff --git a/examples/hacker-news-react.htm b/examples/hacker-news-react.htm index 406fe8d2..ae12e343 100644 --- a/examples/hacker-news-react.htm +++ b/examples/hacker-news-react.htm @@ -58,7 +58,7 @@ --> - - + + - - + + - - + + - - + + - - + + diff --git a/examples/countries-no-spa-preact.htm b/examples/countries-no-spa-preact.htm index decf2994..339aff47 100644 --- a/examples/countries-no-spa-preact.htm +++ b/examples/countries-no-spa-preact.htm @@ -27,7 +27,7 @@

    Countries

    Preact https://preactjs.com/ --> - + diff --git a/examples/countries-no-spa-react.htm b/examples/countries-no-spa-react.htm index d35a0397..82ea715a 100644 --- a/examples/countries-no-spa-react.htm +++ b/examples/countries-no-spa-react.htm @@ -18,11 +18,11 @@

    Countries

    - - + + diff --git a/examples/hacker-news-react.htm b/examples/hacker-news-react.htm index ae12e343..0c43618a 100644 --- a/examples/hacker-news-react.htm +++ b/examples/hacker-news-react.htm @@ -29,8 +29,8 @@ React https://reactjs.org --> - - + + - + - - + + - - + + diff --git a/examples/image-gallery-preact.htm b/examples/image-gallery-preact.htm index 37f1b200..b2f37209 100644 --- a/examples/image-gallery-preact.htm +++ b/examples/image-gallery-preact.htm @@ -148,7 +148,7 @@

    Example Usage and Code

    Preact https://preactjs.com --> - + diff --git a/examples/image-gallery-react.htm b/examples/image-gallery-react.htm index d1dfd9b3..0dbfd60b 100644 --- a/examples/image-gallery-react.htm +++ b/examples/image-gallery-react.htm @@ -146,11 +146,11 @@

    Example Usage and Code

    - - + + diff --git a/examples/jsx-loader-dev.htm b/examples/jsx-loader-dev.htm index 3351d84a..300971a4 100644 --- a/examples/jsx-loader-dev.htm +++ b/examples/jsx-loader-dev.htm @@ -21,18 +21,18 @@ - - + + - + - - + + - - + + - - + + - - + + - + - - + + @@ -45,8 +45,8 @@ https://reacttraining.com/react-router/ https://github.com/ReactTraining/react-router --> - - + + - - + + - - + + - - + + - + - - + + - - + + - - + + - - + + - - + + - - + + - + - - + + - + \n \n";const dataCache=[];function saveDataToCache(t,e,s){for(const a of dataCache)if(a.url===t)return a.params=JSON.stringify(e),void(a.data=s);dataCache.push({url:t,params:JSON.stringify(e),data:s})}function getDataFromCache(t,e){for(const s of dataCache)if(s.url===t){if(e===s.params||null===e&&"null"===s.params)return s.data;break}return null}function copyTemplateSelector(t){const e=t.getAttribute("template-selector");if(e&&0===t.childNodes.length){const s=document.querySelector(e);s?t.appendChild(s.content.cloneNode(!0)):showError(t,`Error - Could not find template from <${t.tagName.toLowerCase()} [template-selector="${e}"]>.`)}}class JsonData extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0)),this.state={isLoading:!1,hasError:!1,isLoaded:!1,errorMessage:null},this.handleButtonClick=this.handleButtonClick.bind(this)}static get observedAttributes(){return["url","url-params"]}attributeChangedCallback(t,e){switch(t){case"url":case"url-params":null===e||this.manualFetchMode||this.fetch()}}connectedCallback(){if(this.elements={isLoading:this.querySelector("is-loading"),hasError:this.querySelector("has-error"),isLoaded:this.querySelector("is-loaded"),clickButton:null},null===this.clickSelector)void 0===this.state||this.state.isLoading||this.state.hasError||this.state.isLoaded||this.manualFetchMode||this.fetch();else if(this.elements.clickButton=document.querySelector(this.clickSelector),null===this.elements.clickButton){const t="Element not found for Web Component using [click-selector]: "+String(this.clickSelector);showErrorAlert(t)}else this.elements.clickButton.addEventListener("click",this.handleButtonClick)}disconnectedCallback(){this.elements&&null!==this.elements.clickButton&&(this.elements.clickButton.removeEventListener("click",this.handleButtonClick),this.elements.clickButton=null)}handleButtonClick(){"boolean"==typeof this.elements.clickButton.disabled&&(this.elements.clickButton.disabled=!0);const t=document.querySelectorAll("input[data-bind],select[data-bind],textarea[data-bind]"),e={};for(const s of t){const t=s.getAttribute("data-bind");"INPUT"===s.nodeName&&"checkbox"===s.type?e[t]=s.checked:e[t]=s.value}this.setAttribute("url-params",""),this.setAttribute("url-params",JSON.stringify(e))}get url(){return this.getAttribute("url")}set url(t){this.setAttribute("url",t)}get urlParams(){return this.getAttribute("url-params")}set urlParams(t){"object"==typeof t?this.setAttribute("url-params",JSON.stringify(t)):this.showError(`When setting [urlParams] of the value must be an object but was instead a type of [${typeof t}].`)}get loadOnlyOnce(){return null!==this.getAttribute("load-only-once")}get clickSelector(){return this.getAttribute("click-selector")}get manualFetchMode(){return null!==this.getAttribute("manual-fetch-mode")}get isLoading(){return this.state.isLoading}set isLoading(t){this.state.isLoading=!0===t,this.elements.isLoading&&(this.elements.isLoading.style.display=this.state.isLoading?"":"none")}get hasError(){return this.state.hasError}set hasError(t){this.state.hasError=!0===t,this.elements.hasError&&(this.elements.hasError.style.display=this.state.hasError?"":"none")}get isLoaded(){return this.state.isLoaded}set isLoaded(t){this.state.isLoaded=!0===t,this.elements.isLoaded&&(this.elements.isLoaded.style.display=this.state.isLoaded?"":"none")}dispatchContentReady(){this.dispatchEvent(new Event(appEvents.contentReady,{bubbles:!0}));const t=this.getAttribute("onready");if(t)try{if(!this.isConnected)return;const e=new Function("return "+t)();"function"==typeof e&&e()}catch(e){showErrorAlert(`Error from function : ${e.message}`),console.error(e)}}async fetch(){const t=this.url;let e=t;if(null===e||""===e)return await this.showError("Error, element is missing attribute [url]"),void this.dispatchContentReady();let s=this.getAttribute("url-params");if(""!==s||!e.includes(":")){if(this.loadOnlyOnce){const e=getDataFromCache(t,s);if(null!==e)return await this._setLoadedState(e),void this.dispatchContentReady()}s&&(s=JSON.parse(s)),e=buildUrl(e,s),this.isLoading=!0,this.isLoaded=!1,this.hasError=!1,await this.bindData(),fetch(e,{mode:"cors",cache:"no-store",credentials:"same-origin"}).then((t=>{const e=t.status;if(e>=200&&e<300||304===e)return Promise.resolve(t);{const s="Error loading data. Server Response Code: "+e+", Response Text: "+t.statusText;return Promise.reject(s)}})).then((t=>t.json())).then((async e=>{this.loadOnlyOnce&&saveDataToCache(t,s,e),await this._setLoadedState(e)})).catch((async t=>{await this.showError(t)})).finally((()=>{null!==this.elements.clickButton&&"boolean"==typeof this.elements.clickButton.disabled&&(this.elements.clickButton.disabled=!1),this.dispatchContentReady()}))}}async showError(t){this.isLoading=!1,this.isLoaded=!1,this.hasError=!0,this.state.errorMessage=t,this.dispatchEvent(new CustomEvent(appEvents.error,{bubbles:!0,detail:t})),await this.bindData(),console.error(t)}async _setLoadedState(t){this.isLoading=!1,this.isLoaded=!0,this.hasError=!1,this.state.errorMessage=null;const e=this.getAttribute("transform-data");if(e)try{if("function"==typeof window[e]){const s=window[e](t);"object"==typeof s&&null!==s?Object.assign(this.state,s):await this.showError(`Function [${e}()] must return an object.`)}else await this.showError(`Function [${e}()] was not found.`)}catch(t){await this.showError(t)}else Object.assign(this.state,t);"boolean"==typeof t.hasError&&(this.hasError=t.hasError),await this.bindData()}async bindData(){await componentsAreDefined(this,"[data-bind]");let t=this.querySelectorAll("[data-bind]");for(const e of t){const t=e.getAttribute("data-bind"),s=""===t?this.state:getBindValue(this.state,t);setElementText(e,formatData(e,s))}t=this.querySelectorAll("[data-bind-attr]");for(const e of t)bindAttrTmpl(e,"data-bind-attr",this.state);t=this.querySelectorAll("[data-show]");for(const e of t)if(this.state.isLoading)e.style.display="none";else{const t=e.getAttribute("data-show");try{const s=new Function("state","format","with(state){return "+t+"}")(this.state,format);e.style.display=!0===s?"":"none"}catch(s){e.style.display="",console.error(`Error evaluating JavaScript expression from [data-show="${t}"] attribute.`),console.error(s)}}t=this.querySelectorAll("[data-bind-refresh]");for(const e of t){const t=e.getAttribute("data-bind-refresh");try{e[t]()}catch(s){console.error(`Error calling function from element with [data-bind-refresh="${t}"].`),console.error(s),console.log(e)}}polyfillCustomElements()}}window.customElements.define("json-data",JsonData),window.customElements.define("is-loading",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0))}connectedCallback(){"JSON-DATA"===this.parentNode.nodeName&&!0===this.parentNode.isLoading||(this.style.display="none"),copyTemplateSelector(this)}}),window.customElements.define("has-error",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0))}connectedCallback(){"JSON-DATA"===this.parentNode.nodeName&&!0===this.parentNode.hasError||(this.style.display="none"),copyTemplateSelector(this)}}),window.customElements.define("is-loaded",class extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0))}connectedCallback(){"JSON-DATA"===this.parentNode.nodeName&&!0===this.parentNode.isLoaded||(this.style.display="none"),copyTemplateSelector(this)}}); \ No newline at end of file diff --git a/js/web-components/url-router.min.js b/js/web-components/url-router.min.js index c56f8979..4eebe6dd 100644 --- a/js/web-components/url-router.min.js +++ b/js/web-components/url-router.min.js @@ -1,5 +1,5 @@ // @link https://www.dataformsjs.com -// @version 5.14.4 +// @version 5.14.5 // @author Conrad Sollitt (https://conradsollitt.com) // @license MIT import{render,setElementText,formatData,bindAttrTmpl,polyfillCustomElements,showError,showErrorAlert,componentsAreDefined}from"./utils.min.js";const appEvents={routeChanged:"app:routeChanged",error:"app:error"},shadowTmpl=document.createElement("template");shadowTmpl.innerHTML="\n \n \n";class UrlRouter extends HTMLElement{constructor(){super();this.attachShadow({mode:"open"}).appendChild(shadowTmpl.content.cloneNode(!0)),this.currentRoute=null,this.currentUrlParams=null,this.updateView=this.updateView.bind(this),this.handlePushStateClick=this.handlePushStateClick.bind(this),this.useHistoryMode="history"===this.getAttribute("mode")}connectedCallback(){const t=this.useHistoryMode?"popstate":"hashchange";window.addEventListener(t,this.updateView),this.updateView()}disconnectedCallback(){const t=this.useHistoryMode?"popstate":"hashchange";window.removeEventListener(t,this.updateView)}async updateView(){this.currentRoute&&this.executeJsEvent("onunload"),this.currentRoute=null,this.currentUrlParams=null,await componentsAreDefined(this,"url-route");const t=this.getAttribute("view-selector");if(null===t||""===t)return void this.showFatalError("Error, element is missing attribute [view-selector]");const e=document.querySelector(t);if(null===e)return void this.showFatalError(render`Error, element from was not found on the page.`);const r=this.getAttribute("loading-template-selector");if(r){const t=document.querySelector(r);t?"TEMPLATE"===t.tagName?e.innerHTML=t.innerHTML:console.warn(`Unable to show loading screen from . Only