diff --git a/.config/certificate/tls.crt b/.config/certificate/tls.crt
deleted file mode 100644
index 28a9fb4643343cb706a2c568ca5987f90ddee783..0000000000000000000000000000000000000000
--- a/.config/certificate/tls.crt
+++ /dev/null
@@ -1,22 +0,0 @@
------BEGIN CERTIFICATE-----
-MIIDpTCCAo2gAwIBAgIUIhictOU1c7uiyV3gQqDnKiX+4XYwDQYJKoZIhvcNAQEL
-BQAwNzELMAkGA1UEBhMCQVUxEzARBgNVBAgMClNvbWUtU3RhdGUxEzARBgNVBAoM
-CkFsdmluZS1ERVYwHhcNMjMwNDEzMTE1NzM2WhcNNDMwNDA4MTE1NzM2WjA3MQsw
-CQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1TdGF0ZTETMBEGA1UECgwKQWx2aW5l
-LURFVjCCASIwDQYJKoZIhvcNAQEBBQADggEPADCCAQoCggEBANqUdoCV+SXzTcke
-fxZUuCdiPVSB9ygqVWSkoENDGMkuR5dxIIvAdAUfT71VHLMbq6Vm4O+9PHRVqs96
-gxD6Zz4qtZUvRXagBS7FGYisko3Akj4BfdpbHXw5N/VAOmzSOiQTFH5qtEijTie5
-ycGS+DMxLCuiNdPUTIKGDBo38iPCEAvt/InwMA6mTokzeTp2rKbo1GRXTxelXoDC
-UjQbBH3juqYJeye4R2yn3h88xEGWbiy55K+vbTQdOTrYi8pb5t91BW82whCZGT+F
-WS1CmL5Ie8ArbvRxxWN6CmVXzkCLCaR2f9/3CRD23YkSNFVowLtbvnxSbbebPRBG
-ZINABMcCAwEAAaOBqDCBpTAJBgNVHRMEAjAAMHIGA1UdIwRrMGmAFN2+5FhTq1n4
-iBFmUynHxYXTHbJGoTukOTA3MQswCQYDVQQGEwJBVTETMBEGA1UECAwKU29tZS1T
-dGF0ZTETMBEGA1UECgwKQWx2aW5lLURFVoIUSLmMatoX5y+KA87qlSxyxLkRluYw
-CwYDVR0PBAQDAgTwMBcGA1UdEQQQMA6CDCouYWx2aW5lLmRldjANBgkqhkiG9w0B
-AQsFAAOCAQEAfwywLYjHymyh1D5y2dcPUki+xBTKKhxSZ/wA+6TySToqlVlN9uVF
-RA/S35Rt7kUKmajgkpUlbVXYTNg8JsrqJqmzyPyVhkNNeTLkG1dYGLxKfToQ9RWI
-keUIzqyzylJVORN1kN900I3QMBSn4IJgCjKzBLxdT+M4mELy3x8dFulFo0AsgStW
-A4h7IcTrmzdDLXnE3+BuOBwDZLqsKqPX7hBjhMi4+Z87JU0cNWOifuAmQXwHy4Ud
-/qLkLrm50S4eph0zJJw+R18tmfTnuF9b1NdLQ3InrzO2rVh3Q65fVLIsCEjxh8PL
-ckBVfAPucfI4jDzm91REW4a60+aeLCDvBQ==
------END CERTIFICATE-----
diff --git a/.config/certificate/tls.key b/.config/certificate/tls.key
deleted file mode 100644
index f0416c129d23687e9c0560695e179ebbf45f6589..0000000000000000000000000000000000000000
--- a/.config/certificate/tls.key
+++ /dev/null
@@ -1,27 +0,0 @@
------BEGIN RSA PRIVATE KEY-----
-MIIEpAIBAAKCAQEA2pR2gJX5JfNNyR5/FlS4J2I9VIH3KCpVZKSgQ0MYyS5Hl3Eg
-i8B0BR9PvVUcsxurpWbg7708dFWqz3qDEPpnPiq1lS9FdqAFLsUZiKySjcCSPgF9
-2lsdfDk39UA6bNI6JBMUfmq0SKNOJ7nJwZL4MzEsK6I109RMgoYMGjfyI8IQC+38
-ifAwDqZOiTN5OnaspujUZFdPF6VegMJSNBsEfeO6pgl7J7hHbKfeHzzEQZZuLLnk
-r69tNB05OtiLylvm33UFbzbCEJkZP4VZLUKYvkh7wCtu9HHFY3oKZVfOQIsJpHZ/
-3/cJEPbdiRI0VWjAu1u+fFJtt5s9EEZkg0AExwIDAQABAoIBADJvY1CUSmL5Ww93
-G/f5IGzl/CTNwEviSMXqPpiGmOeC6D4Hem0EwUCVUv7q7q5dSiPmMyzeS17EjZ9G
-M4vtW3k6vZ9owux2S/vYuuWQfFh9AMGR8oo5z/nj8geDBHgrogLE7EunL2Y7WENO
-WUFzOhYF2J1Q1n7EU8siRxSdqB+bsIUN6qC5FRHPpjzA1oscwpfbG2MnRc/GrW0H
-1UxRyCuPl8y5NAqm5IPx7DTr+Vo0/VvT4c3grdDJIck+rJgR2KEebEdyLvAXQn9+
-oVzO7KyCt+JUGxW3csbVI22wxQtMbPCyyJ5STBTH39sAO2RlCdq0s5FqTRedj2Dx
-zAhfWzECgYEA89QFkU8fUpO+6lwW8NllJa9oxoFsEXPbeBM7srPn9AIDnhXBQ9u0
-eYfR6hxAqGb3g0z/VFCfS83p77683B7iPj8VvXO+2kAj93XP2H8Q4RQR/AfBpDMU
-z8JSo1MOGFMiQ/WiTMdYs/9X/q0WS1La9fd52gB8z61edAnntdy/2YMCgYEA5X3I
-h7GG2uz1iwnQMegjv25ywsj4+ISY4yYHyRwQLrJBXMlq1vk3YlAfy3gqA/snCKe0
-6nivb/Vv82lX0hc81oWBSOYP9IGiBIWZ/tg9rZW0i57icBYzvvpe/jMGdNE/mM1W
-7808NINZp3Pv4kulWlxv2rJhvzA3C+LD5qYJeG0CgYBvX0YXxGtLPb8zr1KvOq2P
-1BpoqY8iPahepXJcQv7NHupmGAvKIh3CcT55z+PcyAOAjvgFnDnW1zxmzNnZNaYj
-xo74lVj0ud1z1/VTL18XYCKC20wg41A7QcibX4GNrNN29UjoBxpGRXj9FDSdvT/U
-n/Chmh1ogwkkua2EDUv4XwKBgQCKMPwX+ebi3d3eI8Kiys77715bvPlvbSlDXxtB
-Fw0HkX+aiA819ExNf0ImG+3xB8Oxiot+xb2fBYSsZrrjX+raovn/E8p3ybfuUSUy
-OLSrWoKlsL9aD4SJc+rP15oDrh1FviCjtkqStKXAGChTdInVp+QTJWeG4VnEZoDg
-2wrI4QKBgQDnhaZKmg4ShL2xx/kT8Nml6u3gC3S0WLyZTkHCsvOohoxev5EocPLU
-NCZTCaCKrCddnvk7Sn5746mAMK+ySS+PIwa/0HB5UKfq4Wei1oEQINKUJT9jbgD1
-3WWz9hiu+mu0y0AbCermlgpt1nIhR6lRrCRILrOPHaahQARFfrQryg==
------END RSA PRIVATE KEY-----
diff --git a/.gitignore b/.gitignore
index ad50389f77056d0d48f6f027956a77619baff56e..e998ea239f92c755feae210b8f5aae0d0d07c3c3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -490,3 +490,5 @@ result
# pupeeter screenshot of the test page
screenshot.png
/copy-to-documentation/
+
+/development/config/vite.config.mjs
diff --git a/development/config/vite.config.mjs b/development/config/vite.config.mjs
deleted file mode 100644
index 3f12d0bc9177c0f77a56322c6a00769f41d7aba3..0000000000000000000000000000000000000000
--- a/development/config/vite.config.mjs
+++ /dev/null
@@ -1,126 +0,0 @@
-import {resolve} from 'path';
-import {defineConfig} from 'vite'
-
-import {projectRoot} from './import.mjs';
-
-import cssnano from 'cssnano';
-import normalizeCss from 'postcss-normalize';
-import postcssFluid from 'postcss-fluid';
-import importCss from 'postcss-import';
-import postcssNesting from 'postcss-nesting';
-import postcssFor from 'postcss-for';
-import autoprefixer from 'autoprefixer';
-import postcssMixins from 'postcss-mixins';
-import postcssResponsiveType from 'postcss-responsive-type';
-import {ViteMinifyPlugin} from 'vite-plugin-minify'
-import {viteMockServe} from 'vite-plugin-mock';
-
-import {buildCSS, createScriptFilenameFromStyleFilename} from '../scripts/buildStylePostCSS.mjs';
-import directoryIndex from 'vite-plugin-directory-index';
-
-export default defineConfig({
- clearScreen: false,
-
- base: './',
-
- appType: 'mpa',
- root: projectRoot,
- mode: 'development',
- logLevel: 'info',
- esbuild: {
- minifyIdentifiers: true,
- minifySyntax: true,
- minifyWhitespace: true,
- target: 'es2015',
- legalComments: 'none'
- },
- plugins: [
- // banner(
- // `/**\n * name: \n * version: v\n * description: \n * author: schukai GmbH\n * homepage: https://monsterjs.org\n */`
- // ),
-
- ViteMinifyPlugin(),
- directoryIndex({}),
-
- viteMockServe({
- mockPath: projectRoot + '/development/mock',
- }),
-
- {
- name: 'run-script-on-pcss-change',
- handleHotUpdate({file, server}) {
-
- if (file.endsWith('.pcss')) {
-
- const source = file;
- const dest = createScriptFilenameFromStyleFilename(file);
-
- buildCSS(source, dest).then(() => {
- }).catch((e) => {
- console.error(e.message);
- })
-
- }
- },
- }
-
-
- ],
-
- css: {
- postcss: {
- plugins: [
- importCss(),
- normalizeCss,
- postcssMixins,
- postcssNesting(),
- postcssFor,
- postcssFluid({
- min: '320px',
- max: '1800px',
- functionName: 'fluid',
- }),
- autoprefixer,
- cssnano,
- postcssResponsiveType,
- ]
- }
- },
-
- server: {
- open: '/development/',
- port: 8443,
- host: "localhost.alvine.dev",
- https: {
- key: projectRoot + '/development/certificates/key.pem',
- cert: projectRoot + '/development/certificates/cert.pem',
-
- },
- debug: true,
- proxy: {
- '^/api/commerce/orders/search': {
- target: 'http://localhost:8090',
- changeOrigin: false,
-
- configure: (proxy, options) => {
- proxy.secure = false
- proxy.agent = null
-
- },
- },
- '^/assets/world.json$': {
- target: 'https://monsterjs.org/',
- changeOrigin: true,
-
- configure: (proxy, options) => {
-
- proxy.secure = true
- proxy.agent = null
-
- },
- },
- },
- },
-
-
-})
\ No newline at end of file
diff --git a/development/templates/vite.config.mjs b/development/templates/vite.config.mjs
index cc2bba3e98d6f5e2e13dc817b73223b34ba216ed..2e2df2ba03c431b9e44e040194c4654adf9a159e 100644
--- a/development/templates/vite.config.mjs
+++ b/development/templates/vite.config.mjs
@@ -92,8 +92,9 @@ export default defineConfig({
port: 8443,
host: "localhost.alvine.dev",
https: {
- key: projectRoot + '/development/certificates/key.pem',
- cert: projectRoot + '/development/certificates/cert.pem',
+ key: "${LOCALHOST_CERTS_DIR}/localhost.alvine.dev.key",
+ cert: "${LOCALHOST_CERTS_DIR}/localhost.alvine.dev.crt"
+
},
debug: true,
diff --git a/flake.lock b/flake.lock
index 8e1f0dc01237022f2e214e0d6b0bccdac124ee75..c0820cf99cd808d2b74839c80072f2d9e241d562 100644
--- a/flake.lock
+++ b/flake.lock
@@ -1,5 +1,28 @@
{
"nodes": {
+ "certificatesFlake": {
+ "inputs": {
+ "commonFlake": "commonFlake",
+ "flake-utils": "flake-utils",
+ "flakeUtils": "flakeUtils",
+ "nixpkgs": "nixpkgs_2",
+ "nixpkgsUnstable": "nixpkgsUnstable",
+ "versionFlake": "versionFlake"
+ },
+ "locked": {
+ "lastModified": 1726843786,
+ "narHash": "sha256-10dh/8mLSK3/NfT1Q8GA+nqhHWv36MQd1BMblyIUaHM=",
+ "ref": "refs/heads/master",
+ "rev": "895ecf979969fb390e2c2c8bd2939d8d3e00fa7f",
+ "revCount": 4,
+ "type": "git",
+ "url": "https://gitlab.schukai.com/alvine/certificates.git"
+ },
+ "original": {
+ "type": "git",
+ "url": "https://gitlab.schukai.com/alvine/certificates.git"
+ }
+ },
"commonFlake": {
"inputs": {
"nixpkgs": "nixpkgs"
@@ -20,16 +43,71 @@
"url": "https://gitlab.schukai.com/schukai/entwicklung/nix-flakes.git?dir=common"
}
},
+ "commonFlake_2": {
+ "inputs": {
+ "nixpkgs": "nixpkgs_4"
+ },
+ "locked": {
+ "dir": "common",
+ "lastModified": 1718788884,
+ "narHash": "sha256-PefMbkGNMK9TN1qcNL9OkFVTNdv6wo6XoaS8eTdsY04=",
+ "ref": "refs/heads/master",
+ "rev": "abda2dc723e13dfc835535593321c514666e679e",
+ "revCount": 39,
+ "type": "git",
+ "url": "https://gitlab.schukai.com/schukai/entwicklung/nix-flakes.git?dir=common"
+ },
+ "original": {
+ "dir": "common",
+ "type": "git",
+ "url": "https://gitlab.schukai.com/schukai/entwicklung/nix-flakes.git?dir=common"
+ }
+ },
"flake-utils": {
"inputs": {
"systems": "systems"
},
"locked": {
- "lastModified": 1710146030,
- "narHash": "sha256-SZ5L6eA7HJ/nmkzGG7/ISclqe6oZdOZTNoesiInkXPQ=",
+ "lastModified": 1726560853,
+ "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
+ "owner": "numtide",
+ "repo": "flake-utils",
+ "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
+ "type": "github"
+ },
+ "original": {
+ "id": "flake-utils",
+ "type": "indirect"
+ }
+ },
+ "flake-utils_2": {
+ "inputs": {
+ "systems": "systems_3"
+ },
+ "locked": {
+ "lastModified": 1726560853,
+ "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
+ "owner": "numtide",
+ "repo": "flake-utils",
+ "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
+ "type": "github"
+ },
+ "original": {
+ "owner": "numtide",
+ "repo": "flake-utils",
+ "type": "github"
+ }
+ },
+ "flakeUtils": {
+ "inputs": {
+ "systems": "systems_2"
+ },
+ "locked": {
+ "lastModified": 1726560853,
+ "narHash": "sha256-X6rJYSESBVr3hBoH0WbKE5KvhPU5bloyZ2L4K60/fPQ=",
"owner": "numtide",
"repo": "flake-utils",
- "rev": "b1d9ab70662946ef0850d488da1c9019f3a9752a",
+ "rev": "c1dfcf08411b08f6b8615f7d8971a2bfa81d5e8a",
"type": "github"
},
"original": {
@@ -53,13 +131,29 @@
"type": "indirect"
}
},
+ "nixpkgsUnstable": {
+ "locked": {
+ "lastModified": 1726463316,
+ "narHash": "sha256-gI9kkaH0ZjakJOKrdjaI/VbaMEo9qBbSUl93DnU7f4c=",
+ "owner": "nixos",
+ "repo": "nixpkgs",
+ "rev": "99dc8785f6a0adac95f5e2ab05cc2e1bf666d172",
+ "type": "github"
+ },
+ "original": {
+ "owner": "nixos",
+ "ref": "nixos-unstable",
+ "repo": "nixpkgs",
+ "type": "github"
+ }
+ },
"nixpkgs_2": {
"locked": {
- "lastModified": 1726320982,
- "narHash": "sha256-RuVXUwcYwaUeks6h3OLrEmg14z9aFXdWppTWPMTwdQw=",
+ "lastModified": 1726447378,
+ "narHash": "sha256-2yV8nmYE1p9lfmLHhOCbYwQC/W8WYfGQABoGzJOb1JQ=",
"owner": "nixos",
"repo": "nixpkgs",
- "rev": "8f7492cce28977fbf8bd12c72af08b1f6c7c3e49",
+ "rev": "086b448a5d54fd117f4dc2dee55c9f0ff461bdc1",
"type": "github"
},
"original": {
@@ -84,12 +178,59 @@
"type": "indirect"
}
},
+ "nixpkgs_4": {
+ "locked": {
+ "lastModified": 1714971268,
+ "narHash": "sha256-IKwMSwHj9+ec660l+I4tki/1NRoeGpyA2GdtdYpAgEw=",
+ "owner": "NixOS",
+ "repo": "nixpkgs",
+ "rev": "27c13997bf450a01219899f5a83bd6ffbfc70d3c",
+ "type": "github"
+ },
+ "original": {
+ "id": "nixpkgs",
+ "ref": "nixos-23.11",
+ "type": "indirect"
+ }
+ },
+ "nixpkgs_5": {
+ "locked": {
+ "lastModified": 1726447378,
+ "narHash": "sha256-2yV8nmYE1p9lfmLHhOCbYwQC/W8WYfGQABoGzJOb1JQ=",
+ "owner": "nixos",
+ "repo": "nixpkgs",
+ "rev": "086b448a5d54fd117f4dc2dee55c9f0ff461bdc1",
+ "type": "github"
+ },
+ "original": {
+ "owner": "nixos",
+ "ref": "nixos-24.05",
+ "repo": "nixpkgs",
+ "type": "github"
+ }
+ },
+ "nixpkgs_6": {
+ "locked": {
+ "lastModified": 1704145853,
+ "narHash": "sha256-G/1AMt9ibpeMlcxvD1vNaC8imGaK+g7zZ99e29BLgWw=",
+ "owner": "NixOS",
+ "repo": "nixpkgs",
+ "rev": "2d2ea8eab9e400618748ab1a6a108255233b602c",
+ "type": "github"
+ },
+ "original": {
+ "id": "nixpkgs",
+ "ref": "nixos-23.11",
+ "type": "indirect"
+ }
+ },
"root": {
"inputs": {
- "commonFlake": "commonFlake",
- "flake-utils": "flake-utils",
- "nixpkgs": "nixpkgs_2",
- "versionFlake": "versionFlake"
+ "certificatesFlake": "certificatesFlake",
+ "commonFlake": "commonFlake_2",
+ "flake-utils": "flake-utils_2",
+ "nixpkgs": "nixpkgs_5",
+ "versionFlake": "versionFlake_2"
}
},
"systems": {
@@ -107,6 +248,36 @@
"type": "github"
}
},
+ "systems_2": {
+ "locked": {
+ "lastModified": 1681028828,
+ "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+ "owner": "nix-systems",
+ "repo": "default",
+ "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+ "type": "github"
+ },
+ "original": {
+ "owner": "nix-systems",
+ "repo": "default",
+ "type": "github"
+ }
+ },
+ "systems_3": {
+ "locked": {
+ "lastModified": 1681028828,
+ "narHash": "sha256-Vy1rq5AaRuLzOxct8nz4T6wlgyUR7zLU309k9mBC768=",
+ "owner": "nix-systems",
+ "repo": "default",
+ "rev": "da67096a3b9bf56a91d16901293e51ba5b49a27e",
+ "type": "github"
+ },
+ "original": {
+ "owner": "nix-systems",
+ "repo": "default",
+ "type": "github"
+ }
+ },
"versionFlake": {
"inputs": {
"nixpkgs": "nixpkgs_3"
@@ -124,6 +295,24 @@
"type": "git",
"url": "https://gitlab.schukai.com/oss/utilities/version.git"
}
+ },
+ "versionFlake_2": {
+ "inputs": {
+ "nixpkgs": "nixpkgs_6"
+ },
+ "locked": {
+ "lastModified": 1716914109,
+ "narHash": "sha256-JY0PLGWzYRDQ9daKLGOBWHHuYun9nSpH9J3aSk8iDmQ=",
+ "ref": "refs/heads/master",
+ "rev": "fe8dd932d6c414a93b4a69c470792b2db038e0fb",
+ "revCount": 129,
+ "type": "git",
+ "url": "https://gitlab.schukai.com/oss/utilities/version.git"
+ },
+ "original": {
+ "type": "git",
+ "url": "https://gitlab.schukai.com/oss/utilities/version.git"
+ }
}
},
"root": "root",
diff --git a/flake.nix b/flake.nix
index adf178b4130d80b4b0aba9c39476f3b1ce365fcc..732374728badae59fbd393be45d5e6f83e7c8acd 100644
--- a/flake.nix
+++ b/flake.nix
@@ -14,6 +14,12 @@
url = "git+https://gitlab.schukai.com/oss/utilities/version.git";
flake = true;
};
+
+ certificatesFlake = {
+ url = "git+https://gitlab.schukai.com/alvine/certificates.git";
+ flake = true;
+ };
+
};
outputs = {
@@ -22,6 +28,7 @@
flake-utils,
versionFlake,
commonFlake,
+ certificatesFlake,
} @ inputs:
flake-utils.lib.eachDefaultSystem (system: let
inherit (nixpkgs.lib) optional;
@@ -35,6 +42,10 @@
(final: prev: {
common = commonPck;
})
+
+ (final: prev: {
+ alvineDevCerts = certificatesFlake;
+ })
(final: prev: {
version = versionPck;
diff --git a/nix/config/release.nix b/nix/config/release.nix
index 1250b0db96a7a24bc6cc4f01dd2468a0a5ce376b..27f049cd2e565b122b57496879c76c6cb27d99aa 100644
--- a/nix/config/release.nix
+++ b/nix/config/release.nix
@@ -3,4 +3,4 @@
commit = "c34be0102cb1e8b1fc0fb50045709bed5d4a09b1";
name = "Monster";
mnemonic = "monster";
-}
\ No newline at end of file
+}
diff --git a/nix/scripts/start-server.nix b/nix/scripts/start-server.nix
index 3135d26df24759103d3cf836a36bd3f5a7609536..e7549b032dee8b2764152614b4d74c9345916845 100644
--- a/nix/scripts/start-server.nix
+++ b/nix/scripts/start-server.nix
@@ -25,6 +25,7 @@ in
export PNPX_BIN=${pkgs'.nodePackages.pnpm}/bin/pnpx
export NODE_BIN=${pkgs'.nodejs_20}/bin/node
+ export LOCALHOST_CERTS_DIR=${pkgs'.alvineDevCerts}
cd development
diff --git a/nix/scripts/update-project.nix b/nix/scripts/update-project.nix
index 276327bcb97fb9cfec95c127dcb8872ab19381aa..4b5e4c10492edaa5f31994bec13e83bd0f160872 100644
--- a/nix/scripts/update-project.nix
+++ b/nix/scripts/update-project.nix
@@ -26,6 +26,14 @@ in
exit 1
fi
+ ## update monser.mjs
+ echo_step "Updating monser.mjs"
+ if ! ${pkgs'.nodejs_22}/bin/node "./development/scripts/buildMonsterFile.mjs"
+ then
+ echo_fail "Failed to update monser.mjs"
+ exit 1
+ fi
+
##format javascript code
echo_step "Formatting JS code"
if ! ${pkgs'.biome}/bin/biome format --write ./source/
diff --git a/source/components/datatable/datasource/rest.mjs b/source/components/datatable/datasource/rest.mjs
index 43f810e722e9c7b06477a4be8411a1fa4d50b867..344e7d3638381c038ab03851a44059d4f7cc2f41 100644
--- a/source/components/datatable/datasource/rest.mjs
+++ b/source/components/datatable/datasource/rest.mjs
@@ -215,7 +215,6 @@ class Rest extends Datasource {
* @returns {Promise<never>|*}
*/
fetch() {
-
const opt = clone(this.getOption("read"));
this[dataSourceSymbol].setOption("read", opt);
diff --git a/source/components/layout/slider.mjs b/source/components/layout/slider.mjs
index 69f7e6fbb81be68fc8e95ae4c504aecbd51725b8..6a02b3cd713716883c642c8c9c72ad6c3d11bb87 100644
--- a/source/components/layout/slider.mjs
+++ b/source/components/layout/slider.mjs
@@ -11,19 +11,12 @@
*/
import {instanceSymbol} from "../../constants.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {
- ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_PREFIX,
- ATTRIBUTE_ROLE,
-} from "../../dom/constants.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
+import {ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
import {CustomElement, getSlottedElements} from "../../dom/customelement.mjs";
import {
assembleMethodSymbol,
registerCustomElement,
} from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {isFunction} from "../../types/is.mjs";
import {SliderStyleSheet} from "./stylesheet/slider.mjs";
import {fireCustomEvent} from "../../dom/events.mjs";
@@ -65,7 +58,7 @@ const configSymbol = Symbol("config");
* @private
* @type {string}
*/
-const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from"
+const ATTRIBUTE_CLON_FROM = ATTRIBUTE_PREFIX + "clone-from";
/**
* A Slider
@@ -100,14 +93,8 @@ class Slider extends CustomElement {
isDragging: false,
draggingPos: 0,
startPos: 0,
- // currentTranslate: 0,
- // prevTranslate: 0,
- //
- // startPositions: null,
- // currentPositions: null,
-
autoPlayInterval: null,
- }
+ };
initControlReferences.call(this);
initEventHandler.call(this);
@@ -124,10 +111,18 @@ class Slider extends CustomElement {
*
* @property {Object} templates Template definitions
* @property {string} templates.main Main template
- * @property {Object} labels Label definitions
- * @property {Object} actions Callbacks
* @property {string} actions.click="throw Error" Callback when clicked
* @property {Object} features Features
+ * @property {boolean} features.carousel=true Carousel feature
+ * @property {boolean} features.autoPlay=true Auto play feature
+ * @property {boolean} features.thumbnails=true Thumbnails feature
+ * @property {boolean} features.drag=true Drag feature
+ * @property {Object} autoPlay Auto play configuration
+ * @property {number} autoPlay.delay=1500 Delay between slides
+ * @property {number} autoPlay.startDelay=1000 Start delay
+ * @property {string} autoPlay.direction="next" Direction of the auto play
+ * @property {boolean} autoPlay.mouseOverPause=true Pause on mouse over
+ * @property {boolean} autoPlay.touchPause=true Pause on touch
* @property {Object} classes CSS classes
* @property {boolean} disabled=false Disabled state
*/
@@ -136,14 +131,15 @@ class Slider extends CustomElement {
templates: {
main: getTemplate(),
},
- labels: {},
+
classes: {},
disabled: false,
features: {
- carousel: false,
+ carousel: true,
autoPlay: true,
thumbnails: true,
+ drag: true,
},
autoPlay: {
@@ -152,14 +148,8 @@ class Slider extends CustomElement {
direction: "next",
mouseOverPause: true,
touchPause: true,
- drag: true,
},
- actions: {
- click: () => {
- throw new Error("the click action is not defined");
- },
- }
});
}
@@ -184,7 +174,7 @@ class Slider extends CustomElement {
* @returns {void}
*/
moveTo(index) {
- return moveTo.call(this, index)
+ return moveTo.call(this, index);
}
/**
@@ -224,7 +214,6 @@ class Slider extends CustomElement {
startAutoPlay() {
initAutoPlay.call(this);
}
-
}
/**
@@ -262,7 +251,9 @@ function initStructure() {
*/
function initThumbnails() {
const self = this;
- const thumbnails = this.shadowRoot.querySelector("[data-monster-role='thumbnails']");
+ const thumbnails = this.shadowRoot.querySelector(
+ "[data-monster-role='thumbnails']",
+ );
const slides = Array.from(getSlottedElements.call(this, ":scope", null));
slides.forEach((slide, index) => {
@@ -277,7 +268,7 @@ function initThumbnails() {
});
thumbnails.appendChild(thumbnail);
- })
+ });
this.addEventListener("monster-slider-moved", (e) => {
const index = e.detail.index;
@@ -289,10 +280,10 @@ function initThumbnails() {
Array.from(thumbnails.children).forEach((thumb) => {
thumb.classList.remove("current");
- })
+ });
thumbnail.classList.add("current");
- })
+ });
}
/**
@@ -306,14 +297,13 @@ function initAutoPlay() {
const direction = autoPlay.direction;
function start() {
-
if (self[configSymbol].autoPlayInterval) {
clearInterval(self[configSymbol].autoPlayInterval);
}
self[configSymbol].autoPlayInterval = setInterval(() => {
if (direction === "next") {
- if(self.next() === -1) {
+ if (self.next() === -1) {
if (self.getOption("features.carousel")) {
clearInterval(self[configSymbol].autoPlayInterval);
}
@@ -354,17 +344,14 @@ function initAutoPlay() {
start();
});
}
-
}
/**
* @private
*/
function initCarousel() {
-
const {slides, totalSlides} = getSlidesAndTotal.call(this);
if (this.getOption("features.carousel") && totalSlides > 2) {
-
const firstElement = slides[0].cloneNode(true);
firstElement.setAttribute(ATTRIBUTE_CLON_FROM, 1);
@@ -375,7 +362,6 @@ function initCarousel() {
slides[0].insertAdjacentElement("beforebegin", lastElement);
moveTo.call(this, 1);
-
}
}
@@ -394,7 +380,6 @@ function getSlidesAndTotal() {
* @returns {number}
*/
function next() {
-
const {slides, totalSlides} = getSlidesAndTotal.call(this);
const nextIndex = this[configSymbol].currentIndex + 1;
@@ -409,7 +394,7 @@ function next() {
});
});
});
-
+
return 0;
}
@@ -418,7 +403,6 @@ function next() {
* @returns {number}
*/
function prev() {
-
const prevIndex = this[configSymbol].currentIndex - 1;
if (prevIndex < 0) {
@@ -435,21 +419,20 @@ function prev() {
* @param index
*/
function setMoveProperties(slides, index) {
-
- this[configSymbol].currentIndex = index
+ this[configSymbol].currentIndex = index;
slides.forEach((slide) => {
slide.classList.remove("current");
- })
+ });
let offset = -(index * 100);
if (offset !== 0) {
offset += "%";
}
- this[sliderElementSymbol].style.transform = `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
+ this[sliderElementSymbol].style.transform =
+ `translateX(calc(${offset} + ${this[configSymbol].draggingPos}px))`;
slides[index].classList.add("current");
-
}
/**
@@ -458,13 +441,12 @@ function setMoveProperties(slides, index) {
* @fires monster-slider-moved
*/
function moveTo(index) {
-
const {slides, totalSlides} = getSlidesAndTotal.call(this);
if (index < 0) {
- index = totalSlides - 1
+ index = totalSlides - 1;
} else if (index >= totalSlides) {
- index = 0
+ index = 0;
}
const slider = this[sliderElementSymbol];
@@ -498,7 +480,7 @@ function moveTo(index) {
fireCustomEvent(this, "monster-slider-moved", {
index: slideIndex,
- })
+ });
eventFired = true;
});
@@ -512,11 +494,10 @@ function moveTo(index) {
if (!eventFired) {
fireCustomEvent(this, "monster-slider-moved", {
index: slideIndex,
- })
+ });
}
}
-
/**
* @private
* @return {initEventHandler}
@@ -540,10 +521,17 @@ function initEventHandler() {
});
}
- this[sliderElementSymbol].addEventListener('mousedown', (e) => startDragging.call(this, e, 'mouse'));
- this[sliderElementSymbol].addEventListener('touchstart', (e) => startDragging.call(this, e, 'touch'));
- // this[sliderElementSymbol].addEventListener('touchend', () => stopDragging.call(this, 'touch'));
- // this[sliderElementSymbol].addEventListener('touchmove', (e) => dragging.call(this, e, 'touch'));
+ if (this.getOption("features.drag")) {
+
+ this[sliderElementSymbol].addEventListener("mousedown", (e) =>
+ startDragging.call(this, e, "mouse"),
+ );
+
+ this[sliderElementSymbol].addEventListener("touchstart", (e) =>
+ startDragging.call(this, e, "touch"),
+ );
+ }
+
return this;
}
@@ -553,27 +541,25 @@ function initEventHandler() {
* @param type
*/
function startDragging(e, type) {
-
this[configSymbol].isDragging = true;
this[configSymbol].startPos = getPositionX(e, type);
- this[sliderElementSymbol].classList.add('grabbing');
+ this[sliderElementSymbol].classList.add("grabbing");
this[sliderElementSymbol].style.transitionProperty = "none";
const callbackMousemove = (x) => {
dragging.call(this, x, type);
- }
+ };
const callbackMouseUp = () => {
-
- const endEvent = type === 'mouse' ? 'mouseup' : 'touchend';
- const moveEvent = type === 'mouse' ? 'mousemove' : 'touchmove';
+ const endEvent = type === "mouse" ? "mouseup" : "touchend";
+ const moveEvent = type === "mouse" ? "mousemove" : "touchmove";
document.body.removeEventListener(endEvent, callbackMouseUp);
document.body.removeEventListener(moveEvent, callbackMousemove);
this[configSymbol].isDragging = false;
this[configSymbol].startPos = 0;
- this[sliderElementSymbol].classList.remove('grabbing');
+ this[sliderElementSymbol].classList.remove("grabbing");
this[sliderElementSymbol].style.transitionProperty = "";
const lastPos = this[configSymbol].draggingPos;
@@ -590,12 +576,10 @@ function startDragging(e, type) {
}
this.moveTo(newIndex);
+ };
- }
-
- document.body.addEventListener('mouseup', callbackMouseUp);
- document.body.addEventListener('mousemove', callbackMousemove);
-
+ document.body.addEventListener("mouseup", callbackMouseUp);
+ document.body.addEventListener("mousemove", callbackMousemove);
}
/**
@@ -605,7 +589,7 @@ function startDragging(e, type) {
* @returns {*|number|number}
*/
function getPositionX(e, type) {
- return type === 'mouse' ? e.pageX : e.touches[0].clientX;
+ return type === "mouse" ? e.pageX : e.touches[0].clientX;
}
/**
@@ -615,7 +599,8 @@ function getPositionX(e, type) {
*/
function dragging(e, type) {
if (!this[configSymbol].isDragging) return;
- this[configSymbol].draggingPos = getPositionX(e, type) - this[configSymbol].startPos;
+ this[configSymbol].draggingPos =
+ getPositionX(e, type) - this[configSymbol].startPos;
const {slides, totalSlides} = getSlidesAndTotal.call(this);
setMoveProperties.call(this, slides, this[configSymbol].currentIndex);
}
@@ -625,7 +610,6 @@ function dragging(e, type) {
* @return {void}
*/
function initControlReferences() {
-
this[controlElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="control"]`,
);
@@ -664,5 +648,4 @@ function getTemplate() {
</div>`;
}
-
registerCustomElement(Slider);
diff --git a/source/components/layout/stylesheet/slider.mjs b/source/components/layout/stylesheet/slider.mjs
index 094cced5d93e4ee386cd72cbd9f24ee461313fe3..9c02e6fc3fa9d2a35143a6d64537ce4cec2b537e 100644
--- a/source/components/layout/stylesheet/slider.mjs
+++ b/source/components/layout/stylesheet/slider.mjs
@@ -10,10 +10,10 @@
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {SliderStyleSheet}
+export { SliderStyleSheet };
/**
* @private
@@ -22,10 +22,17 @@ export {SliderStyleSheet}
const SliderStyleSheet = new CSSStyleSheet();
try {
- SliderStyleSheet.insertRule(`
+ SliderStyleSheet.insertRule(
+ `
@layer slider {
:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4);--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6);--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1);--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4);--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1);--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1);--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1);--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4);--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3);--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3);--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4);--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6);--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6);--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}.monster-theme-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-theme-primary-disabled-1{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1)}.monster-theme-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-theme-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-theme-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-theme-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-theme-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-theme-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-theme-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-border-color-1{border-color:var(--monster-color-border-1)}.monster-color-neutral-1{color:var(--monster-color-primary-1)}.monster-bg-color-primary-1{background-color:var(--monster-bg-color-primary-1)}.monster-bg-color-secondary-1{background-color:var(--monster-bg-color-secondary-1)}.monster-bg-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1)}.monster-color-primary-1{background-color:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1)}.monster-color-secondary-1{background-color:var(--monster-bg-color-secondary-1);color:var(--monster-color-secondary-1)}.monster-color-tertiary-1{background-color:var(--monster-bg-color-tertiary-1);color:var(--monster-color-tertiary-1)}.monster-color-destructive-1{background-color:var(--monster-bg-color-destructive-1);color:var(--monster-color-destructive-1)}.monster-color-success-1{background-color:var(--monster-bg-color-success-1);color:var(--monster-color-success-1)}.monster-color-warning-1{background-color:var(--monster-bg-color-warning-1);color:var(--monster-color-warning-1)}.monster-color-error-1{background-color:var(--monster-bg-color-error-1);color:var(--monster-color-error-1)}.monster-color-selection-1{background-color:var(--monster-bg-color-selection-1);color:var(--monster-color-selection-1)}.monster-theme-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-theme-primary-disabled-2{background-color:var(--monster-bg-color-primary-disabled-2);color:var(--monster-color-primary-disabled-2)}.monster-theme-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-theme-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-theme-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-theme-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-theme-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-theme-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-theme-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-border-color-2{border-color:var(--monster-color-border-2)}.monster-color-neutral-2{color:var(--monster-color-primary-2)}.monster-bg-color-primary-2{background-color:var(--monster-bg-color-primary-2)}.monster-bg-color-secondary-2{background-color:var(--monster-bg-color-secondary-2)}.monster-bg-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2)}.monster-color-primary-2{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2)}.monster-color-secondary-2{background-color:var(--monster-bg-color-secondary-2);color:var(--monster-color-secondary-2)}.monster-color-tertiary-2{background-color:var(--monster-bg-color-tertiary-2);color:var(--monster-color-tertiary-2)}.monster-color-destructive-2{background-color:var(--monster-bg-color-destructive-2);color:var(--monster-color-destructive-2)}.monster-color-success-2{background-color:var(--monster-bg-color-success-2);color:var(--monster-color-success-2)}.monster-color-warning-2{background-color:var(--monster-bg-color-warning-2);color:var(--monster-color-warning-2)}.monster-color-error-2{background-color:var(--monster-bg-color-error-2);color:var(--monster-color-error-2)}.monster-color-selection-2{background-color:var(--monster-bg-color-selection-2);color:var(--monster-color-selection-2)}.monster-theme-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-theme-primary-disabled-3{background-color:var(--monster-bg-color-primary-disabled-3);color:var(--monster-color-primary-disabled-3)}.monster-theme-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-theme-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-theme-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-theme-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-theme-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-theme-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-theme-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-border-color-3{border-color:var(--monster-color-border-3)}.monster-color-neutral-3{color:var(--monster-color-primary-3)}.monster-bg-color-primary-3{background-color:var(--monster-bg-color-primary-3)}.monster-bg-color-secondary-3{background-color:var(--monster-bg-color-secondary-3)}.monster-bg-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3)}.monster-color-primary-3{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}.monster-color-secondary-3{background-color:var(--monster-bg-color-secondary-3);color:var(--monster-color-secondary-3)}.monster-color-tertiary-3{background-color:var(--monster-bg-color-tertiary-3);color:var(--monster-color-tertiary-3)}.monster-color-destructive-3{background-color:var(--monster-bg-color-destructive-3);color:var(--monster-color-destructive-3)}.monster-color-success-3{background-color:var(--monster-bg-color-success-3);color:var(--monster-color-success-3)}.monster-color-warning-3{background-color:var(--monster-bg-color-warning-3);color:var(--monster-color-warning-3)}.monster-color-error-3{background-color:var(--monster-bg-color-error-3);color:var(--monster-color-error-3)}.monster-color-selection-3{background-color:var(--monster-bg-color-selection-3);color:var(--monster-color-selection-3)}.monster-theme-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-theme-primary-disabled-4{background-color:var(--monster-bg-color-primary-disabled-4);color:var(--monster-color-primary-disabled-4)}.monster-theme-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-theme-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-theme-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-theme-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-theme-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-theme-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-theme-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-border-color-4{border-color:var(--monster-color-border-4)}.monster-color-neutral-4{color:var(--monster-color-primary-4)}.monster-bg-color-primary-4{background-color:var(--monster-bg-color-primary-4)}.monster-bg-color-secondary-4{background-color:var(--monster-bg-color-secondary-4)}.monster-bg-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4)}.monster-color-primary-4{background-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-color-secondary-4{background-color:var(--monster-bg-color-secondary-4);color:var(--monster-color-secondary-4)}.monster-color-tertiary-4{background-color:var(--monster-bg-color-tertiary-4);color:var(--monster-color-tertiary-4)}.monster-color-destructive-4{background-color:var(--monster-bg-color-destructive-4);color:var(--monster-color-destructive-4)}.monster-color-success-4{background-color:var(--monster-bg-color-success-4);color:var(--monster-color-success-4)}.monster-color-warning-4{background-color:var(--monster-bg-color-warning-4);color:var(--monster-color-warning-4)}.monster-color-error-4{background-color:var(--monster-bg-color-error-4);color:var(--monster-color-error-4)}.monster-color-selection-4{background-color:var(--monster-bg-color-selection-4);color:var(--monster-color-selection-4)}.monster-theme-control-container-1,.monster-theme-control-row-1{border:1px solid var(--monster-theme-control-border-color)}.monster-theme-control-container-1,.monster-theme-control-element,.monster-theme-control-row-1{background-color:var(--monster-theme-control-bg-color);color:var(--monster-theme-control-color)}.monster-theme-control-background{background-color:var(--monster-theme-control-bg-color)}.monster-theme-background-inherit{background-color:inherit!important}.monster-theme-on{background-color:var(--monster-theme-on-bg-color);color:var(--monster-theme-on-color)}.monster-theme-off{background-color:var(--monster-theme-off-bg-color);color:var(--monster-theme-off-color)}:host{box-sizing:border-box}[data-monster-role=control]{overflow:hidden;position:relative}[data-monster-role=control],[data-monster-role=slider]{box-sizing:border-box;display:flex;height:100%;width:100%}[data-monster-role=slider]{scroll-behavior:smooth;scroll-snap-type:x mandatory;scrollbar-width:none;transition:all .3s ease-in-out}[data-monster-role=slider].grabbing{box-sizing:border-box;cursor:grabbing;-webkit-user-select:none;-moz-user-select:none;user-select:none}::slotted(div){box-sizing:border-box;display:flex;flex:0 0 100%;height:100%}.prev{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;height:-moz-max-content;height:max-content;justify-content:center;left:.5rem;position:absolute;top:28%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-sticky)}.prev:hover{transform:scale(1.2)}.next{align-items:center;box-sizing:border-box;cursor:pointer;display:flex;height:-moz-max-content;height:max-content;justify-content:center;position:absolute;right:.5rem;top:28%;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-sticky)}.next:hover{transform:scale(1.2)}[data-monster-role=thumbnails]{border-radius:.5rem;bottom:20px;display:grid;gap:.5rem;grid-auto-flow:column;left:50%;position:absolute;transform:translateX(-50%);z-index:var(--monster-z-index-sticky)}[data-monster-role=thumbnails] .thumbnail{background-color:var(--monster-bg-color-primary-1);border-radius:50%;box-sizing:border-box;color:var(--monster-color-primary-1);cursor:pointer;filter:chroma(0 0 0 0);height:1rem;margin:.5rem;width:1rem}[data-monster-role=thumbnails] .thumbnail.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3)}
-}`, 0);
+}`,
+ 0,
+ );
} catch (e) {
- addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+ addAttributeToken(
+ document.getRootNode().querySelector("html"),
+ ATTRIBUTE_ERRORMESSAGE,
+ e + "",
+ );
}
diff --git a/source/components/navigation/table-of-content.mjs b/source/components/navigation/table-of-content.mjs
index ba25be3524959a52edf1a17eb4ae404991d7949d..6a28301a3f2038f7fb2cb236ada73d5a85a39165 100644
--- a/source/components/navigation/table-of-content.mjs
+++ b/source/components/navigation/table-of-content.mjs
@@ -271,7 +271,6 @@ function calcAndSetNavigationTopScrollableParentContext() {
const thisTop = scrollTop;
let top = 0;
top += scrollTop;
- console.log(thisTop, scrollTop);
const offset = this.getOption("offset");
if (offset > 0) {
diff --git a/source/components/tree-menu/dragable-tree-menu.mjs b/source/components/tree-menu/dragable-tree-menu.mjs
index f2a7d5850a55a71a12771befa4e0c3161564e33f..80e502cbf326cab9344e21d5b00ace9e104b4596 100644
--- a/source/components/tree-menu/dragable-tree-menu.mjs
+++ b/source/components/tree-menu/dragable-tree-menu.mjs
@@ -527,14 +527,14 @@ function switchToConfig() {
element.prepend(dropzone);
- console.log("over", element.outerHTML, event);
+ //console.log("over", element.outerHTML, event);
event.dataTransfer.dropEffect = "move";
};
this[dragenterEventHandlerSymbol] = (event) => {
const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
- console.log("enter", element.outerHTML, event);
+ //console.log("enter", element.outerHTML, event);
event.dataTransfer.dropEffect = "move";
event.preventDefault();
@@ -548,7 +548,7 @@ function switchToConfig() {
return;
}
- console.log("leave", element.outerHTML, event);
+ //console.log("leave", element.outerHTML, event);
event.dataTransfer.dropEffect = "move";
event.preventDefault();
@@ -560,7 +560,7 @@ function switchToConfig() {
this[dropEventHandlerSymbol] = (event) => {
const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
- console.log("drop", element.outerHTML, event);
+ //console.log("drop", element.outerHTML, event);
event.preventDefault();
};
diff --git a/source/data/datasource/server/restapi.mjs b/source/data/datasource/server/restapi.mjs
index ef8a551f5d12d79a4f2e1fef2876c56f2e827d54..2ef7c94649d5fbf6feab5fe7bdff8af84e51e8c9 100644
--- a/source/data/datasource/server/restapi.mjs
+++ b/source/data/datasource/server/restapi.mjs
@@ -193,7 +193,7 @@ class RestAPI extends Server {
*/
function fetchData(init, key, callback) {
let response;
-
+
return fetch(this.getOption(`${key}.url`), init)
.then((resp) => {
response = resp;
diff --git a/source/dom/updater.mjs b/source/dom/updater.mjs
index 38d7b008ef3d7fd5fbb3a7fcc84ba2ef2bf1942b..5c42adc70090ec5379f1a4e33a7c42a8b76c2166 100644
--- a/source/dom/updater.mjs
+++ b/source/dom/updater.mjs
@@ -12,36 +12,36 @@
* SPDX-License-Identifier: AGPL-3.0
*/
-import {internalSymbol} from "../constants.mjs";
-import {diff} from "../data/diff.mjs";
-import {Pathfinder} from "../data/pathfinder.mjs";
-import {Pipe} from "../data/pipe.mjs";
+import { internalSymbol } from "../constants.mjs";
+import { diff } from "../data/diff.mjs";
+import { Pathfinder } from "../data/pathfinder.mjs";
+import { Pipe } from "../data/pipe.mjs";
import {
- ATTRIBUTE_ERRORMESSAGE,
- ATTRIBUTE_UPDATER_ATTRIBUTES,
- ATTRIBUTE_UPDATER_BIND,
- ATTRIBUTE_UPDATER_BIND_TYPE,
- ATTRIBUTE_UPDATER_INSERT,
- ATTRIBUTE_UPDATER_INSERT_REFERENCE,
- ATTRIBUTE_UPDATER_REMOVE,
- ATTRIBUTE_UPDATER_REPLACE,
- ATTRIBUTE_UPDATER_SELECT_THIS,
+ ATTRIBUTE_ERRORMESSAGE,
+ ATTRIBUTE_UPDATER_ATTRIBUTES,
+ ATTRIBUTE_UPDATER_BIND,
+ ATTRIBUTE_UPDATER_BIND_TYPE,
+ ATTRIBUTE_UPDATER_INSERT,
+ ATTRIBUTE_UPDATER_INSERT_REFERENCE,
+ ATTRIBUTE_UPDATER_REMOVE,
+ ATTRIBUTE_UPDATER_REPLACE,
+ ATTRIBUTE_UPDATER_SELECT_THIS,
} from "./constants.mjs";
-import {Base} from "../types/base.mjs";
-import {isArray, isString, isInstance, isIterable} from "../types/is.mjs";
-import {Observer} from "../types/observer.mjs";
-import {ProxyObserver} from "../types/proxyobserver.mjs";
-import {validateArray, validateInstance} from "../types/validate.mjs";
-import {clone} from "../util/clone.mjs";
-import {trimSpaces} from "../util/trimspaces.mjs";
-import {addAttributeToken, addToObjectLink} from "./attributes.mjs";
-import {updaterTransformerMethodsSymbol} from "./customelement.mjs";
-import {findTargetElementFromEvent} from "./events.mjs";
-import {findDocumentTemplate} from "./template.mjs";
-import {getWindow} from "./util.mjs";
-
-export {Updater, addObjectWithUpdaterToElement};
+import { Base } from "../types/base.mjs";
+import { isArray, isString, isInstance, isIterable } from "../types/is.mjs";
+import { Observer } from "../types/observer.mjs";
+import { ProxyObserver } from "../types/proxyobserver.mjs";
+import { validateArray, validateInstance } from "../types/validate.mjs";
+import { clone } from "../util/clone.mjs";
+import { trimSpaces } from "../util/trimspaces.mjs";
+import { addAttributeToken, addToObjectLink } from "./attributes.mjs";
+import { updaterTransformerMethodsSymbol } from "./customelement.mjs";
+import { findTargetElementFromEvent } from "./events.mjs";
+import { findDocumentTemplate } from "./template.mjs";
+import { getWindow } from "./util.mjs";
+
+export { Updater, addObjectWithUpdaterToElement };
/**
* The updater class connects an object with the DOM. In this way, structures and contents in the DOM can be
@@ -68,194 +68,190 @@ export {Updater, addObjectWithUpdaterToElement};
* @summary The updater class connects an object with the dom
*/
class Updater extends Base {
- /**
- * @since 1.8.0
- * @param {HTMLElement} element
- * @param {object|ProxyObserver|undefined} subject
- * @throws {TypeError} value is not a object
- * @throws {TypeError} value is not an instance of HTMLElement
- * @see {@link Monster.DOM.findDocumentTemplate}
- */
- constructor(element, subject) {
- super();
-
- /**
- * @type {HTMLElement}
- */
- if (subject === undefined) subject = {};
- if (!isInstance(subject, ProxyObserver)) {
- subject = new ProxyObserver(subject);
- }
-
- this[internalSymbol] = {
- element: validateInstance(element, HTMLElement),
- last: {},
- callbacks: new Map(),
- eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
- subject: subject,
- };
-
- this[internalSymbol].callbacks.set(
- "checkstate",
- getCheckStateCallback.call(this),
- );
-
- this[internalSymbol].subject.attachObserver(
- new Observer(() => {
- const s = this[internalSymbol].subject.getRealSubject();
-
- const diffResult = diff(this[internalSymbol].last, s);
- this[internalSymbol].last = clone(s);
-
- const promises = [];
-
- for (const [, change] of Object.entries(diffResult)) {
- promises.push(
- new Promise((resolve, reject) => {
- getWindow().requestAnimationFrame(() => {
-
- try {
-
- removeElement.call(this, change);
- insertElement.call(this, change);
- updateContent.call(this, change);
- updateAttributes.call(this, change);
-
- resolve();
-
- } catch (error) {
- reject(error);
- }
-
- });
- }),
- );
- }
-
- return Promise.all(promises);
- }),
- );
- }
-
- /**
- * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
- *
- * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
- * @since 1.9.0
- * @param {Array} types
- * @return {Updater}
- */
- setEventTypes(types) {
- this[internalSymbol].eventTypes = validateArray(types);
- return this;
- }
-
- /**
- * With this method, the eventlisteners are hooked in and the magic begins.
- *
- * ```
- * updater.run().then(() => {
- * updater.enableEventProcessing();
- * });
- * ```
- *
- * @since 1.9.0
- * @return {Updater}
- * @throws {Error} the bind argument must start as a value with a path
- */
- enableEventProcessing() {
- this.disableEventProcessing();
-
- for (const type of this[internalSymbol].eventTypes) {
- // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
- this[internalSymbol].element.addEventListener(
- type,
- getControlEventHandler.call(this),
- {
- capture: true,
- passive: true,
- },
- );
- }
-
- return this;
- }
-
- /**
- * This method turns off the magic or who loves it more profane it removes the eventListener.
- *
- * @since 1.9.0
- * @return {Updater}
- */
- disableEventProcessing() {
- for (const type of this[internalSymbol].eventTypes) {
- this[internalSymbol].element.removeEventListener(
- type,
- getControlEventHandler.call(this),
- );
- }
-
- return this;
- }
-
- /**
- * The run method must be called for the update to start working.
- * The method ensures that changes are detected.
- *
- * ```
- * updater.run().then(() => {
- * updater.enableEventProcessing();
- * });
- * ```
- *
- * @summary Let the magic begin
- * @return {Promise}
- */
- run() {
- // the key __init__has no further meaning and is only
- // used to create the diff for empty objects.
- this[internalSymbol].last = {__init__: true};
- return this[internalSymbol].subject.notifyObservers();
- }
-
- /**
- * Gets the values of bound elements and changes them in subject
- *
- * @since 1.27.0
- * @return {Monster.DOM.Updater}
- */
- retrieve() {
- retrieveFromBindings.call(this);
- return this;
- }
-
- /**
- * If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.
- * However, if you passed a simple object, here you will get a proxy for that object.
- *
- * For changes, the ProxyObserver must be used.
- *
- * @since 1.8.0
- * @return {Proxy}
- */
- getSubject() {
- return this[internalSymbol].subject.getSubject();
- }
-
- /**
- * This method can be used to register commands that can be called via call: instruction.
- * This can be used to provide a pipe with its own functionality.
- *
- * @param {string} name
- * @param {function} callback
- * @returns {Transformer}
- * @throws {TypeError} value is not a string
- * @throws {TypeError} value is not a function
- */
- setCallback(name, callback) {
- this[internalSymbol].callbacks.set(name, callback);
- return this;
- }
+ /**
+ * @since 1.8.0
+ * @param {HTMLElement} element
+ * @param {object|ProxyObserver|undefined} subject
+ * @throws {TypeError} value is not a object
+ * @throws {TypeError} value is not an instance of HTMLElement
+ * @see {@link Monster.DOM.findDocumentTemplate}
+ */
+ constructor(element, subject) {
+ super();
+
+ /**
+ * @type {HTMLElement}
+ */
+ if (subject === undefined) subject = {};
+ if (!isInstance(subject, ProxyObserver)) {
+ subject = new ProxyObserver(subject);
+ }
+
+ this[internalSymbol] = {
+ element: validateInstance(element, HTMLElement),
+ last: {},
+ callbacks: new Map(),
+ eventTypes: ["keyup", "click", "change", "drop", "touchend", "input"],
+ subject: subject,
+ };
+
+ this[internalSymbol].callbacks.set(
+ "checkstate",
+ getCheckStateCallback.call(this),
+ );
+
+ this[internalSymbol].subject.attachObserver(
+ new Observer(() => {
+ const s = this[internalSymbol].subject.getRealSubject();
+
+ const diffResult = diff(this[internalSymbol].last, s);
+ this[internalSymbol].last = clone(s);
+
+ const promises = [];
+
+ for (const [, change] of Object.entries(diffResult)) {
+ promises.push(
+ new Promise((resolve, reject) => {
+ getWindow().requestAnimationFrame(() => {
+ try {
+ removeElement.call(this, change);
+ insertElement.call(this, change);
+ updateContent.call(this, change);
+ updateAttributes.call(this, change);
+
+ resolve();
+ } catch (error) {
+ reject(error);
+ }
+ });
+ }),
+ );
+ }
+
+ return Promise.all(promises);
+ }),
+ );
+ }
+
+ /**
+ * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
+ *
+ * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
+ * @since 1.9.0
+ * @param {Array} types
+ * @return {Updater}
+ */
+ setEventTypes(types) {
+ this[internalSymbol].eventTypes = validateArray(types);
+ return this;
+ }
+
+ /**
+ * With this method, the eventlisteners are hooked in and the magic begins.
+ *
+ * ```
+ * updater.run().then(() => {
+ * updater.enableEventProcessing();
+ * });
+ * ```
+ *
+ * @since 1.9.0
+ * @return {Updater}
+ * @throws {Error} the bind argument must start as a value with a path
+ */
+ enableEventProcessing() {
+ this.disableEventProcessing();
+
+ for (const type of this[internalSymbol].eventTypes) {
+ // @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
+ this[internalSymbol].element.addEventListener(
+ type,
+ getControlEventHandler.call(this),
+ {
+ capture: true,
+ passive: true,
+ },
+ );
+ }
+
+ return this;
+ }
+
+ /**
+ * This method turns off the magic or who loves it more profane it removes the eventListener.
+ *
+ * @since 1.9.0
+ * @return {Updater}
+ */
+ disableEventProcessing() {
+ for (const type of this[internalSymbol].eventTypes) {
+ this[internalSymbol].element.removeEventListener(
+ type,
+ getControlEventHandler.call(this),
+ );
+ }
+
+ return this;
+ }
+
+ /**
+ * The run method must be called for the update to start working.
+ * The method ensures that changes are detected.
+ *
+ * ```
+ * updater.run().then(() => {
+ * updater.enableEventProcessing();
+ * });
+ * ```
+ *
+ * @summary Let the magic begin
+ * @return {Promise}
+ */
+ run() {
+ // the key __init__has no further meaning and is only
+ // used to create the diff for empty objects.
+ this[internalSymbol].last = { __init__: true };
+ return this[internalSymbol].subject.notifyObservers();
+ }
+
+ /**
+ * Gets the values of bound elements and changes them in subject
+ *
+ * @since 1.27.0
+ * @return {Monster.DOM.Updater}
+ */
+ retrieve() {
+ retrieveFromBindings.call(this);
+ return this;
+ }
+
+ /**
+ * If you have passed a ProxyObserver in the constructor, you will get the object that the ProxyObserver manages here.
+ * However, if you passed a simple object, here you will get a proxy for that object.
+ *
+ * For changes, the ProxyObserver must be used.
+ *
+ * @since 1.8.0
+ * @return {Proxy}
+ */
+ getSubject() {
+ return this[internalSymbol].subject.getSubject();
+ }
+
+ /**
+ * This method can be used to register commands that can be called via call: instruction.
+ * This can be used to provide a pipe with its own functionality.
+ *
+ * @param {string} name
+ * @param {function} callback
+ * @returns {Transformer}
+ * @throws {TypeError} value is not a string
+ * @throws {TypeError} value is not a function
+ */
+ setCallback(name, callback) {
+ this[internalSymbol].callbacks.set(name, callback);
+ return this;
+ }
}
/**
@@ -266,20 +262,20 @@ class Updater extends Base {
* @this Updater
*/
function getCheckStateCallback() {
- return function (current) {
- // this is a reference to the current object (therefore no array function here)
- if (this instanceof HTMLInputElement) {
- if (["radio", "checkbox"].indexOf(this.type) !== -1) {
- return `${this.value}` === `${current}` ? "true" : undefined;
- }
- } else if (this instanceof HTMLOptionElement) {
- if (isArray(current) && current.indexOf(this.value) !== -1) {
- return "true";
- }
-
- return undefined;
- }
- };
+ return function (current) {
+ // this is a reference to the current object (therefore no array function here)
+ if (this instanceof HTMLInputElement) {
+ if (["radio", "checkbox"].indexOf(this.type) !== -1) {
+ return `${this.value}` === `${current}` ? "true" : undefined;
+ }
+ } else if (this instanceof HTMLOptionElement) {
+ if (isArray(current) && current.indexOf(this.value) !== -1) {
+ return "true";
+ }
+
+ return undefined;
+ }
+ };
}
/**
@@ -294,27 +290,27 @@ const symbol = Symbol("@schukai/monster/updater@@EventHandler");
* @throws {Error} the bind argument must start as a value with a path
*/
function getControlEventHandler() {
- if (this[symbol]) {
- return this[symbol];
- }
-
- /**
- * @throws {Error} the bind argument must start as a value with a path.
- * @throws {Error} unsupported object
- * @param {Event} event
- */
- this[symbol] = (event) => {
- const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
-
- if (element === undefined) {
- return;
- }
- queueMicrotask(() => {
- retrieveAndSetValue.call(this, element);
- });
- };
-
- return this[symbol];
+ if (this[symbol]) {
+ return this[symbol];
+ }
+
+ /**
+ * @throws {Error} the bind argument must start as a value with a path.
+ * @throws {Error} unsupported object
+ * @param {Event} event
+ */
+ this[symbol] = (event) => {
+ const element = findTargetElementFromEvent(event, ATTRIBUTE_UPDATER_BIND);
+
+ if (element === undefined) {
+ return;
+ }
+ queueMicrotask(() => {
+ retrieveAndSetValue.call(this, element);
+ });
+ };
+
+ return this[symbol];
}
/**
@@ -325,101 +321,101 @@ function getControlEventHandler() {
* @private
*/
function retrieveAndSetValue(element) {
- const pathfinder = new Pathfinder(this[internalSymbol].subject.getSubject());
-
- let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
- if (path === null)
- throw new Error("the bind argument must start as a value with a path");
-
- if (path.indexOf("path:") !== 0) {
- throw new Error("the bind argument must start as a value with a path");
- }
-
- path = path.substring(5); // remove path: from the string
-
- let value;
-
- if (element instanceof HTMLInputElement) {
- switch (element.type) {
- case "checkbox":
- value = element.checked ? element.value : undefined;
- break;
- default:
- value = element.value;
- break;
- }
- } else if (element instanceof HTMLTextAreaElement) {
- value = element.value;
- } else if (element instanceof HTMLSelectElement) {
- switch (element.type) {
- case "select-one":
- value = element.value;
- break;
- case "select-multiple":
- value = element.value;
-
- let options = element?.selectedOptions;
- if (options === undefined)
- options = element.querySelectorAll(":scope option:checked");
- value = Array.from(options).map(({value}) => value);
-
- break;
- }
-
- // values from custom elements
- } else if (
- (element?.constructor?.prototype &&
- !!Object.getOwnPropertyDescriptor(
- element.constructor.prototype,
- "value",
- )?.["get"]) ||
- element.hasOwnProperty("value")
- ) {
- value = element?.["value"];
- } else {
- throw new Error("unsupported object");
- }
-
- if (isString(value)) {
- const type = element.getAttribute(ATTRIBUTE_UPDATER_BIND_TYPE);
- switch (type) {
- case "number":
- case "int":
- case "float":
- case "integer":
- value = Number(value);
- if (isNaN(value)) {
- value = 0;
- }
- break;
- case "boolean":
- case "bool":
- case "checkbox":
- value = value === "true" || value === "1" || value === "on";
- break;
- case "array":
- case "list":
- value = value.split(",");
- break;
- case "object":
- case "json":
- value = JSON.parse(value);
- break;
- default:
- break;
- }
- }
-
- const copy = clone(this[internalSymbol].subject.getRealSubject());
-
- const pf = new Pathfinder(copy);
- pf.setVia(path, value);
-
- const diffResult = diff(copy, this[internalSymbol].subject.getRealSubject());
-
- if (diffResult.length > 0) {
- pathfinder.setVia(path, value);
- }
+ const pathfinder = new Pathfinder(this[internalSymbol].subject.getSubject());
+
+ let path = element.getAttribute(ATTRIBUTE_UPDATER_BIND);
+ if (path === null)
+ throw new Error("the bind argument must start as a value with a path");
+
+ if (path.indexOf("path:") !== 0) {
+ throw new Error("the bind argument must start as a value with a path");
+ }
+
+ path = path.substring(5); // remove path: from the string
+
+ let value;
+
+ if (element instanceof HTMLInputElement) {
+ switch (element.type) {
+ case "checkbox":
+ value = element.checked ? element.value : undefined;
+ break;
+ default:
+ value = element.value;
+ break;
+ }
+ } else if (element instanceof HTMLTextAreaElement) {
+ value = element.value;
+ } else if (element instanceof HTMLSelectElement) {
+ switch (element.type) {
+ case "select-one":
+ value = element.value;
+ break;
+ case "select-multiple":
+ value = element.value;
+
+ let options = element?.selectedOptions;
+ if (options === undefined)
+ options = element.querySelectorAll(":scope option:checked");
+ value = Array.from(options).map(({ value }) => value);
+
+ break;
+ }
+
+ // values from custom elements
+ } else if (
+ (element?.constructor?.prototype &&
+ !!Object.getOwnPropertyDescriptor(
+ element.constructor.prototype,
+ "value",
+ )?.["get"]) ||
+ element.hasOwnProperty("value")
+ ) {
+ value = element?.["value"];
+ } else {
+ throw new Error("unsupported object");
+ }
+
+ if (isString(value)) {
+ const type = element.getAttribute(ATTRIBUTE_UPDATER_BIND_TYPE);
+ switch (type) {
+ case "number":
+ case "int":
+ case "float":
+ case "integer":
+ value = Number(value);
+ if (isNaN(value)) {
+ value = 0;
+ }
+ break;
+ case "boolean":
+ case "bool":
+ case "checkbox":
+ value = value === "true" || value === "1" || value === "on";
+ break;
+ case "array":
+ case "list":
+ value = value.split(",");
+ break;
+ case "object":
+ case "json":
+ value = JSON.parse(value);
+ break;
+ default:
+ break;
+ }
+ }
+
+ const copy = clone(this[internalSymbol].subject.getRealSubject());
+
+ const pf = new Pathfinder(copy);
+ pf.setVia(path, value);
+
+ const diffResult = diff(copy, this[internalSymbol].subject.getRealSubject());
+
+ if (diffResult.length > 0) {
+ pathfinder.setVia(path, value);
+ }
}
/**
@@ -429,15 +425,15 @@ function retrieveAndSetValue(element) {
* @private
*/
function retrieveFromBindings() {
- if (this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`)) {
- retrieveAndSetValue.call(this, this[internalSymbol].element);
- }
-
- for (const [, element] of this[internalSymbol].element
- .querySelectorAll(`[${ATTRIBUTE_UPDATER_BIND}]`)
- .entries()) {
- retrieveAndSetValue.call(this, element);
- }
+ if (this[internalSymbol].element.matches(`[${ATTRIBUTE_UPDATER_BIND}]`)) {
+ retrieveAndSetValue.call(this, this[internalSymbol].element);
+ }
+
+ for (const [, element] of this[internalSymbol].element
+ .querySelectorAll(`[${ATTRIBUTE_UPDATER_BIND}]`)
+ .entries()) {
+ retrieveAndSetValue.call(this, element);
+ }
}
/**
@@ -448,11 +444,11 @@ function retrieveFromBindings() {
* @return {void}
*/
function removeElement(change) {
- for (const [, element] of this[internalSymbol].element
- .querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
- .entries()) {
- element.parentNode.removeChild(element);
- }
+ for (const [, element] of this[internalSymbol].element
+ .querySelectorAll(`:scope [${ATTRIBUTE_UPDATER_REMOVE}]`)
+ .entries()) {
+ element.parentNode.removeChild(element);
+ }
}
/**
@@ -468,133 +464,133 @@ function removeElement(change) {
* @this Updater
*/
function insertElement(change) {
- const subject = this[internalSymbol].subject.getRealSubject();
+ const subject = this[internalSymbol].subject.getRealSubject();
- const mem = new WeakSet();
- let wd = 0;
+ const mem = new WeakSet();
+ let wd = 0;
- const container = this[internalSymbol].element;
+ const container = this[internalSymbol].element;
- while (true) {
- let found = false;
- wd++;
-
- const p = clone(change?.["path"]);
- if (!isArray(p)) return;
-
- while (p.length > 0) {
- const current = p.join(".");
-
- let iterator = new Set();
- const query = `[${ATTRIBUTE_UPDATER_INSERT}*="path:${current}"]`;
-
- const e = container.querySelectorAll(query);
-
- if (e.length > 0) {
- iterator = new Set([...e]);
- }
-
- if (container.matches(query)) {
- iterator.add(container);
- }
-
- for (const [, containerElement] of iterator.entries()) {
- if (mem.has(containerElement)) continue;
- mem.add(containerElement);
-
- found = true;
-
- const attributes = containerElement.getAttribute(
- ATTRIBUTE_UPDATER_INSERT,
- );
- if (attributes === null) continue;
-
- const def = trimSpaces(attributes);
- const i = def.indexOf(" ");
- const key = trimSpaces(def.substr(0, i));
- const refPrefix = `${key}-`;
- const cmd = trimSpaces(def.substr(i));
-
- // this case is actually excluded by the query but is nevertheless checked again here
- if (cmd.indexOf("|") > 0) {
- throw new Error("pipes are not allowed when cloning a node.");
- }
-
- const pipe = new Pipe(cmd);
- this[internalSymbol].callbacks.forEach((f, n) => {
- pipe.setCallback(n, f);
- });
-
- let value;
- try {
- containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
- value = pipe.run(subject);
- } catch (e) {
- containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
- }
-
- const dataPath = cmd.split(":").pop();
-
- let insertPoint;
- if (containerElement.hasChildNodes()) {
- insertPoint = containerElement.lastChild;
- }
-
- if (!isIterable(value)) {
- throw new Error("the value is not iterable");
- }
-
- const available = new Set();
-
- for (const [i] of Object.entries(value)) {
- const ref = refPrefix + i;
- const currentPath = `${dataPath}.${i}`;
-
- available.add(ref);
- const refElement = containerElement.querySelector(
- `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
- );
-
- if (refElement instanceof HTMLElement) {
- insertPoint = refElement;
- continue;
- }
-
- appendNewDocumentFragment(containerElement, key, ref, currentPath);
- }
-
- const nodes = containerElement.querySelectorAll(
- `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
- );
-
- for (const [, node] of Object.entries(nodes)) {
- if (
- !available.has(
- node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
- )
- ) {
- try {
- containerElement.removeChild(node);
- } catch (e) {
- containerElement.setAttribute(
- ATTRIBUTE_ERRORMESSAGE,
- `${containerElement.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
- e.message
- }`.trim(),
- );
- }
- }
- }
- }
-
- p.pop();
- }
-
- if (found === false) break;
- if (wd++ > 200) {
- throw new Error("the maximum depth for the recursion is reached.");
- }
- }
+ while (true) {
+ let found = false;
+ wd++;
+
+ const p = clone(change?.["path"]);
+ if (!isArray(p)) return;
+
+ while (p.length > 0) {
+ const current = p.join(".");
+
+ let iterator = new Set();
+ const query = `[${ATTRIBUTE_UPDATER_INSERT}*="path:${current}"]`;
+
+ const e = container.querySelectorAll(query);
+
+ if (e.length > 0) {
+ iterator = new Set([...e]);
+ }
+
+ if (container.matches(query)) {
+ iterator.add(container);
+ }
+
+ for (const [, containerElement] of iterator.entries()) {
+ if (mem.has(containerElement)) continue;
+ mem.add(containerElement);
+
+ found = true;
+
+ const attributes = containerElement.getAttribute(
+ ATTRIBUTE_UPDATER_INSERT,
+ );
+ if (attributes === null) continue;
+
+ const def = trimSpaces(attributes);
+ const i = def.indexOf(" ");
+ const key = trimSpaces(def.substr(0, i));
+ const refPrefix = `${key}-`;
+ const cmd = trimSpaces(def.substr(i));
+
+ // this case is actually excluded by the query but is nevertheless checked again here
+ if (cmd.indexOf("|") > 0) {
+ throw new Error("pipes are not allowed when cloning a node.");
+ }
+
+ const pipe = new Pipe(cmd);
+ this[internalSymbol].callbacks.forEach((f, n) => {
+ pipe.setCallback(n, f);
+ });
+
+ let value;
+ try {
+ containerElement.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+ value = pipe.run(subject);
+ } catch (e) {
+ containerElement.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+ }
+
+ const dataPath = cmd.split(":").pop();
+
+ let insertPoint;
+ if (containerElement.hasChildNodes()) {
+ insertPoint = containerElement.lastChild;
+ }
+
+ if (!isIterable(value)) {
+ throw new Error("the value is not iterable");
+ }
+
+ const available = new Set();
+
+ for (const [i] of Object.entries(value)) {
+ const ref = refPrefix + i;
+ const currentPath = `${dataPath}.${i}`;
+
+ available.add(ref);
+ const refElement = containerElement.querySelector(
+ `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}="${ref}"]`,
+ );
+
+ if (refElement instanceof HTMLElement) {
+ insertPoint = refElement;
+ continue;
+ }
+
+ appendNewDocumentFragment(containerElement, key, ref, currentPath);
+ }
+
+ const nodes = containerElement.querySelectorAll(
+ `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
+ );
+
+ for (const [, node] of Object.entries(nodes)) {
+ if (
+ !available.has(
+ node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE),
+ )
+ ) {
+ try {
+ containerElement.removeChild(node);
+ } catch (e) {
+ containerElement.setAttribute(
+ ATTRIBUTE_ERRORMESSAGE,
+ `${containerElement.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
+ e.message
+ }`.trim(),
+ );
+ }
+ }
+ }
+ }
+
+ p.pop();
+ }
+
+ if (found === false) break;
+ if (wd++ > 200) {
+ throw new Error("the maximum depth for the recursion is reached.");
+ }
+ }
}
/**
@@ -609,17 +605,17 @@ function insertElement(change) {
* @throws {Error} no template was found with the specified key.
*/
function appendNewDocumentFragment(container, key, ref, path) {
- const template = findDocumentTemplate(key, container);
+ const template = findDocumentTemplate(key, container);
- const nodes = template.createDocumentFragment();
- for (const [, node] of Object.entries(nodes.childNodes)) {
- if (node instanceof HTMLElement) {
- applyRecursive(node, key, path);
- node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
- }
+ const nodes = template.createDocumentFragment();
+ for (const [, node] of Object.entries(nodes.childNodes)) {
+ if (node instanceof HTMLElement) {
+ applyRecursive(node, key, path);
+ node.setAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE, ref);
+ }
- container.appendChild(node);
- }
+ container.appendChild(node);
+ }
}
/**
@@ -632,27 +628,27 @@ function appendNewDocumentFragment(container, key, ref, path) {
* @return {void}
*/
function applyRecursive(node, key, path) {
- if (node instanceof HTMLElement) {
- if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
- const value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
- node.setAttribute(
- ATTRIBUTE_UPDATER_REPLACE,
- value.replaceAll(`path:${key}`, `path:${path}`),
- );
- }
-
- if (node.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
- const value = node.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
- node.setAttribute(
- ATTRIBUTE_UPDATER_ATTRIBUTES,
- value.replaceAll(`path:${key}`, `path:${path}`),
- );
- }
-
- for (const [, child] of Object.entries(node.childNodes)) {
- applyRecursive(child, key, path);
- }
- }
+ if (node instanceof HTMLElement) {
+ if (node.hasAttribute(ATTRIBUTE_UPDATER_REPLACE)) {
+ const value = node.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
+ node.setAttribute(
+ ATTRIBUTE_UPDATER_REPLACE,
+ value.replaceAll(`path:${key}`, `path:${path}`),
+ );
+ }
+
+ if (node.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
+ const value = node.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+ node.setAttribute(
+ ATTRIBUTE_UPDATER_ATTRIBUTES,
+ value.replaceAll(`path:${key}`, `path:${path}`),
+ );
+ }
+
+ for (const [, child] of Object.entries(node.childNodes)) {
+ applyRecursive(child, key, path);
+ }
+ }
}
/**
@@ -664,19 +660,19 @@ function applyRecursive(node, key, path) {
* @this Updater
*/
function updateContent(change) {
- const subject = this[internalSymbol].subject.getRealSubject();
-
- const p = clone(change?.["path"]);
- runUpdateContent.call(this, this[internalSymbol].element, p, subject);
-
- const slots = this[internalSymbol].element.querySelectorAll("slot");
- if (slots.length > 0) {
- for (const [, slot] of Object.entries(slots)) {
- for (const [, element] of Object.entries(slot.assignedNodes())) {
- runUpdateContent.call(this, element, p, subject);
- }
- }
- }
+ const subject = this[internalSymbol].subject.getRealSubject();
+
+ const p = clone(change?.["path"]);
+ runUpdateContent.call(this, this[internalSymbol].element, p, subject);
+
+ const slots = this[internalSymbol].element.querySelectorAll("slot");
+ if (slots.length > 0) {
+ for (const [, slot] of Object.entries(slots)) {
+ for (const [, element] of Object.entries(slot.assignedNodes())) {
+ runUpdateContent.call(this, element, p, subject);
+ }
+ }
+ }
}
/**
@@ -689,69 +685,69 @@ function updateContent(change) {
* @return {void}
*/
function runUpdateContent(container, parts, subject) {
- if (!isArray(parts)) return;
- if (!(container instanceof HTMLElement)) return;
- parts = clone(parts);
-
- const mem = new WeakSet();
-
- while (parts.length > 0) {
- const current = parts.join(".");
- parts.pop();
-
- // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
- const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
- const e = container.querySelectorAll(`${query}`);
-
- const iterator = new Set([...e]);
-
- if (container.matches(query)) {
- iterator.add(container);
- }
-
- /**
- * @type {HTMLElement}
- */
- for (const [element] of iterator.entries()) {
- if (mem.has(element)) return;
- mem.add(element);
-
- const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
- const cmd = trimSpaces(attributes);
-
- const pipe = new Pipe(cmd);
- this[internalSymbol].callbacks.forEach((f, n) => {
- pipe.setCallback(n, f);
- });
-
- let value;
- try {
- element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
- value = pipe.run(subject);
- } catch (e) {
- element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
- }
-
- if (value instanceof HTMLElement) {
- while (element.firstChild) {
- element.removeChild(element.firstChild);
- }
-
- try {
- element.appendChild(value);
- } catch (e) {
- element.setAttribute(
- ATTRIBUTE_ERRORMESSAGE,
- `${element.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
- e.message
- }`.trim(),
- );
- }
- } else {
- element.innerHTML = value;
- }
- }
- }
+ if (!isArray(parts)) return;
+ if (!(container instanceof HTMLElement)) return;
+ parts = clone(parts);
+
+ const mem = new WeakSet();
+
+ while (parts.length > 0) {
+ const current = parts.join(".");
+ parts.pop();
+
+ // Unfortunately, static data is always changed as well, since it is not possible to react to changes here.
+ const query = `[${ATTRIBUTE_UPDATER_REPLACE}^="path:${current}"], [${ATTRIBUTE_UPDATER_REPLACE}^="static:"], [${ATTRIBUTE_UPDATER_REPLACE}^="i18n:"]`;
+ const e = container.querySelectorAll(`${query}`);
+
+ const iterator = new Set([...e]);
+
+ if (container.matches(query)) {
+ iterator.add(container);
+ }
+
+ /**
+ * @type {HTMLElement}
+ */
+ for (const [element] of iterator.entries()) {
+ if (mem.has(element)) return;
+ mem.add(element);
+
+ const attributes = element.getAttribute(ATTRIBUTE_UPDATER_REPLACE);
+ const cmd = trimSpaces(attributes);
+
+ const pipe = new Pipe(cmd);
+ this[internalSymbol].callbacks.forEach((f, n) => {
+ pipe.setCallback(n, f);
+ });
+
+ let value;
+ try {
+ element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+ value = pipe.run(subject);
+ } catch (e) {
+ element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+ }
+
+ if (value instanceof HTMLElement) {
+ while (element.firstChild) {
+ element.removeChild(element.firstChild);
+ }
+
+ try {
+ element.appendChild(value);
+ } catch (e) {
+ element.setAttribute(
+ ATTRIBUTE_ERRORMESSAGE,
+ `${element.getAttribute(ATTRIBUTE_ERRORMESSAGE)}, ${
+ e.message
+ }`.trim(),
+ );
+ }
+ } else {
+ element.innerHTML = value;
+ }
+ }
+ }
}
/**
@@ -761,9 +757,9 @@ function runUpdateContent(container, parts, subject) {
* @return {void}
*/
function updateAttributes(change) {
- const subject = this[internalSymbol].subject.getRealSubject();
- const p = clone(change?.["path"]);
- runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
+ const subject = this[internalSymbol].subject.getRealSubject();
+ const p = clone(change?.["path"]);
+ runUpdateAttributes.call(this, this[internalSymbol].element, p, subject);
}
/**
@@ -775,70 +771,70 @@ function updateAttributes(change) {
* @this Updater
*/
function runUpdateAttributes(container, parts, subject) {
- if (!isArray(parts)) return;
- parts = clone(parts);
+ if (!isArray(parts)) return;
+ parts = clone(parts);
- const mem = new WeakSet();
+ const mem = new WeakSet();
- while (parts.length > 0) {
- const current = parts.join(".");
- parts.pop();
+ while (parts.length > 0) {
+ const current = parts.join(".");
+ parts.pop();
- let iterator = new Set();
+ let iterator = new Set();
- const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
+ const query = `[${ATTRIBUTE_UPDATER_SELECT_THIS}][${ATTRIBUTE_UPDATER_ATTRIBUTES}], [${ATTRIBUTE_UPDATER_ATTRIBUTES}*="path:${current}"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="static:"], [${ATTRIBUTE_UPDATER_ATTRIBUTES}^="i18n:"]`;
- const e = container.querySelectorAll(query);
+ const e = container.querySelectorAll(query);
- if (e.length > 0) {
- iterator = new Set([...e]);
- }
+ if (e.length > 0) {
+ iterator = new Set([...e]);
+ }
- if (container.matches(query)) {
- iterator.add(container);
- }
+ if (container.matches(query)) {
+ iterator.add(container);
+ }
- for (const [element] of iterator.entries()) {
- if (mem.has(element)) return;
- mem.add(element);
+ for (const [element] of iterator.entries()) {
+ if (mem.has(element)) return;
+ mem.add(element);
- // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
- if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
- continue;
- }
+ // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
+ if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
+ continue;
+ }
- const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
+ const attributes = element.getAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES);
- for (let [, def] of Object.entries(attributes.split(","))) {
- def = trimSpaces(def);
- const i = def.indexOf(" ");
- const name = trimSpaces(def.substr(0, i));
- const cmd = trimSpaces(def.substr(i));
+ for (let [, def] of Object.entries(attributes.split(","))) {
+ def = trimSpaces(def);
+ const i = def.indexOf(" ");
+ const name = trimSpaces(def.substr(0, i));
+ const cmd = trimSpaces(def.substr(i));
- const pipe = new Pipe(cmd);
+ const pipe = new Pipe(cmd);
- this[internalSymbol].callbacks.forEach((f, n) => {
- pipe.setCallback(n, f, element);
- });
+ this[internalSymbol].callbacks.forEach((f, n) => {
+ pipe.setCallback(n, f, element);
+ });
- let value;
- try {
- element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
- value = pipe.run(subject);
- } catch (e) {
- element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
- }
+ let value;
+ try {
+ element.removeAttribute(ATTRIBUTE_ERRORMESSAGE);
+ value = pipe.run(subject);
+ } catch (e) {
+ element.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.message);
+ }
- if (value === undefined) {
- element.removeAttribute(name);
- } else if (element.getAttribute(name) !== value) {
- element.setAttribute(name, value);
- }
+ if (value === undefined) {
+ element.removeAttribute(name);
+ } else if (element.getAttribute(name) !== value) {
+ element.setAttribute(name, value);
+ }
- handleInputControlAttributeUpdate.call(this, element, name, value);
- }
- }
- }
+ handleInputControlAttributeUpdate.call(this, element, name, value);
+ }
+ }
+ }
}
/**
@@ -851,58 +847,58 @@ function runUpdateAttributes(container, parts, subject) {
*/
function handleInputControlAttributeUpdate(element, name, value) {
- if (element instanceof HTMLSelectElement) {
- switch (element.type) {
- case "select-multiple":
- for (const [index, opt] of Object.entries(element.options)) {
- if (value.indexOf(opt.value) !== -1) {
- opt.selected = true;
- } else {
- opt.selected = false;
- }
- }
-
- break;
- case "select-one":
- // Only one value may be selected
-
- for (const [index, opt] of Object.entries(element.options)) {
- if (opt.value === value) {
- element.selectedIndex = index;
- break;
- }
- }
-
- break;
- }
- } else if (element instanceof HTMLInputElement) {
- switch (element.type) {
- case "radio":
- if (name === "checked") {
- element.checked = value !== undefined;
- }
-
- break;
-
- case "checkbox":
- if (name === "checked") {
- element.checked = value !== undefined;
- }
-
- break;
- case "text":
- default:
- if (name === "value") {
- element.value = value === undefined ? "" : value;
- }
-
- break;
- }
- } else if (element instanceof HTMLTextAreaElement) {
- if (name === "value") {
- element.value = value === undefined ? "" : value;
- }
- }
+ if (element instanceof HTMLSelectElement) {
+ switch (element.type) {
+ case "select-multiple":
+ for (const [index, opt] of Object.entries(element.options)) {
+ if (value.indexOf(opt.value) !== -1) {
+ opt.selected = true;
+ } else {
+ opt.selected = false;
+ }
+ }
+
+ break;
+ case "select-one":
+ // Only one value may be selected
+
+ for (const [index, opt] of Object.entries(element.options)) {
+ if (opt.value === value) {
+ element.selectedIndex = index;
+ break;
+ }
+ }
+
+ break;
+ }
+ } else if (element instanceof HTMLInputElement) {
+ switch (element.type) {
+ case "radio":
+ if (name === "checked") {
+ element.checked = value !== undefined;
+ }
+
+ break;
+
+ case "checkbox":
+ if (name === "checked") {
+ element.checked = value !== undefined;
+ }
+
+ break;
+ case "text":
+ default:
+ if (name === "value") {
+ element.value = value === undefined ? "" : value;
+ }
+
+ break;
+ }
+ } else if (element instanceof HTMLTextAreaElement) {
+ if (name === "value") {
+ element.value = value === undefined ? "" : value;
+ }
+ }
}
/**
@@ -922,83 +918,83 @@ function handleInputControlAttributeUpdate(element, name, value) {
* @throws {TypeError} symbol must be an instance of Symbol
*/
function addObjectWithUpdaterToElement(elements, symbol, object, config = {}) {
- if (!(this instanceof HTMLElement)) {
- throw new TypeError(
- "the context of this function must be an instance of HTMLElement",
- );
- }
-
- if (!(typeof symbol === "symbol")) {
- throw new TypeError("symbol must be an instance of Symbol");
- }
-
- const updaters = new Set();
-
- if (elements instanceof NodeList) {
- elements = new Set([...elements]);
- } else if (elements instanceof HTMLElement) {
- elements = new Set([elements]);
- } else if (elements instanceof Set) {
- } else {
- throw new TypeError(
- `elements is not a valid type. (actual: ${typeof elements})`,
- );
- }
-
- const result = [];
-
- const updaterCallbacks = [];
- const cb = this?.[updaterTransformerMethodsSymbol];
- if (this instanceof HTMLElement && typeof cb === "function") {
- const callbacks = cb.call(this);
- if (typeof callbacks === "object") {
- for (const [name, callback] of Object.entries(callbacks)) {
- if (typeof callback === "function") {
- updaterCallbacks.push([name, callback]);
- } else {
- addAttributeToken(
- this,
- ATTRIBUTE_ERRORMESSAGE,
- `onUpdaterPipeCallbacks: ${name} is not a function`,
- );
- }
- }
- } else {
- addAttributeToken(
- this,
- ATTRIBUTE_ERRORMESSAGE,
- `onUpdaterPipeCallbacks do not return an object with functions`,
- );
- }
- }
-
- elements.forEach((element) => {
- if (!(element instanceof HTMLElement)) return;
- if (element instanceof HTMLTemplateElement) return;
-
- const u = new Updater(element, object);
- updaters.add(u);
-
- if (updaterCallbacks.length > 0) {
- for (const [name, callback] of updaterCallbacks) {
- u.setCallback(name, callback);
- }
- }
-
- result.push(
- u.run().then(() => {
- if (config.eventProcessing === true) {
- u.enableEventProcessing();
- }
-
- return u;
- }),
- );
- });
-
- if (updaters.size > 0) {
- addToObjectLink(this, symbol, updaters);
- }
-
- return result;
+ if (!(this instanceof HTMLElement)) {
+ throw new TypeError(
+ "the context of this function must be an instance of HTMLElement",
+ );
+ }
+
+ if (!(typeof symbol === "symbol")) {
+ throw new TypeError("symbol must be an instance of Symbol");
+ }
+
+ const updaters = new Set();
+
+ if (elements instanceof NodeList) {
+ elements = new Set([...elements]);
+ } else if (elements instanceof HTMLElement) {
+ elements = new Set([elements]);
+ } else if (elements instanceof Set) {
+ } else {
+ throw new TypeError(
+ `elements is not a valid type. (actual: ${typeof elements})`,
+ );
+ }
+
+ const result = [];
+
+ const updaterCallbacks = [];
+ const cb = this?.[updaterTransformerMethodsSymbol];
+ if (this instanceof HTMLElement && typeof cb === "function") {
+ const callbacks = cb.call(this);
+ if (typeof callbacks === "object") {
+ for (const [name, callback] of Object.entries(callbacks)) {
+ if (typeof callback === "function") {
+ updaterCallbacks.push([name, callback]);
+ } else {
+ addAttributeToken(
+ this,
+ ATTRIBUTE_ERRORMESSAGE,
+ `onUpdaterPipeCallbacks: ${name} is not a function`,
+ );
+ }
+ }
+ } else {
+ addAttributeToken(
+ this,
+ ATTRIBUTE_ERRORMESSAGE,
+ `onUpdaterPipeCallbacks do not return an object with functions`,
+ );
+ }
+ }
+
+ elements.forEach((element) => {
+ if (!(element instanceof HTMLElement)) return;
+ if (element instanceof HTMLTemplateElement) return;
+
+ const u = new Updater(element, object);
+ updaters.add(u);
+
+ if (updaterCallbacks.length > 0) {
+ for (const [name, callback] of updaterCallbacks) {
+ u.setCallback(name, callback);
+ }
+ }
+
+ result.push(
+ u.run().then(() => {
+ if (config.eventProcessing === true) {
+ u.enableEventProcessing();
+ }
+
+ return u;
+ }),
+ );
+ });
+
+ if (updaters.size > 0) {
+ addToObjectLink(this, symbol, updaters);
+ }
+
+ return result;
}
diff --git a/source/monster.mjs b/source/monster.mjs
index 719f80c4a1e9459f75b6330ba713be2e84fe27f9..4b570c95242fd32dca39cc6acfba9d2ccade15a0 100644
--- a/source/monster.mjs
+++ b/source/monster.mjs
@@ -1,5 +1,5 @@
/**
- * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Copyright © schukai GmbH and all contributing authors, 2024. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
@@ -8,10 +8,16 @@
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
- *
- * SPDX-License-Identifier: AGPL-3.0
*/
+// THIS FILE IS AUTOGENERATED. DO NOT EDIT THIS FILE DIRECTLY.
+
+/**
+ * Main namespace for Monster.
+ *
+ * @namespace Monster
+ * @author schukai GmbH
+ */
export * from "./components/layout/collapse.mjs";
export * from "./components/layout/tabs.mjs";
export * from "./components/layout/split-panel.mjs";
@@ -19,6 +25,7 @@ export * from "./components/layout/popper.mjs";
export * from "./components/layout/width-toggle.mjs";
export * from "./components/layout/panel.mjs";
export * from "./components/layout/details.mjs";
+export * from "./components/layout/slider.mjs";
export * from "./components/form/message-state-button.mjs";
export * from "./components/form/button-bar.mjs";
export * from "./components/form/reload.mjs";