refactor: using invoker command instead of JS glue code (#989)

db-ui · Oct 11, 2024 · e4af366 · e4af366
1 parent 24d7626
commit e4af366
Show file tree

Hide file tree

Showing 10 changed files with 31 additions and 64 deletions.
diff --git a/enterprise.patternlab-config.json b/enterprise.patternlab-config.json
@@ -57,6 +57,7 @@
 			"icons": "./node_modules/@db-ui/base/build/assets/icons",
 			"samples": "./source/samples",
 			"iframeResizer.contentWindow.js": "node_modules/iframe-resizer/js/iframeResizer.contentWindow.js",
+			"invokers-polyfill.js": "node_modules/invokers-polyfill/invoker.min.js",
 			"details-element-polyfill.js": "node_modules/details-element-polyfill/dist/details-element-polyfill.js",
 			"dialog-polyfill.js": "node_modules/dialog-polyfill/dist/dialog-polyfill.js",
 			"dialog-polyfill.css": "node_modules/dialog-polyfill/dist/dialog-polyfill.css",
@@ -75,6 +76,7 @@
 			"icons": "out/icons",
 			"samples": "out/samples",
 			"iframeResizer.contentWindow.js": "out/js/iframeResizer.contentWindow.js",
+			"invokers-polyfill.js": "out/js/invoker.min.js",
 			"details-element-polyfill.js": "out/js/details-element-polyfill.js",
 			"dialog-polyfill.js": "out/js/dialog-polyfill.js",
 			"dialog-polyfill.css": "out/css/dialog-polyfill.css",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
   "description": "Technical Frontend implementation of the DB UX Design System.",
   "style": "./dist/css/enterprise/db-ui-core.css",
   "sass": "./sources/css/enterprise/db-ui-core.scss",
-  "browser": "./dist/js/main.min.js",
+  "browser": "./dist/js/plugins.min.js",
   "bugs": {
     "url": "https://github.com/db-ui/core/issues"
   },
@@ -36,7 +36,7 @@
     "css-build:base": "sass source/css/db-ui-core.vars.scss:dist/css/db-ui-core.vars.css source/css/db-ui-core.general.scss:dist/css/db-ui-core.general.css --style=compressed --embed-sources --load-path=node_modules",
     "css-build:pattern-lab-ui": "sass source/css/pattern-scaffolding-project-specific.scss:out/css/pattern-scaffolding-project-specific.css --style=compressed --embed-sources --load-path=node_modules",
     "js-deploy": "npm run js-build && cpr source/js dist/js -d",
-    "js-build": "babel source/_patterns/**/*.script.js --minified --out-file source/js/main.min.js --source-maps & babel source/**/*.plugin.js --minified --out-file source/js/plugins.min.js --source-maps",
+    "js-build": "babel source/**/*.plugin.js --minified --out-file source/js/plugins.min.js --source-maps",
     "js-watch": "npm run js-build -- --watch",
     "copy-assets": "cpr node_modules/@db-ui/base/build/assets/icons dist/icons -d && cpr node_modules/@db-ui/base/build/assets/fonts dist/fonts --filter=\"^(.*[/]sources[/]).*$\" -d | cpr source/images dist/images -d | cpr source/favicon.ico dist/favicon.ico -o | cpr source/robots.txt dist/robots.txt -o | cpr source/site.webmanifest dist/site.webmanifest -o",
     "copy-scss-sources": "cpr source/_patterns/ sources/_patterns/ --filter=\"^(?!.*[.](scss|sass)$).*$\" -d | cpr source/css/ sources/css/ --filter=\"^(?!.*[.](scss|sass)$).*$\" -d",
@@ -83,6 +83,7 @@
     "html5-boilerplate": "^9.0.1",
     "husky": "^9.1.6",
     "iframe-resizer": "^4.4.5",
+    "invokers-polyfill": "^0.4.6",
     "lint-staged": "^15.2.10",
     "markdownlint-cli": "^0.42.0",
     "nodemon": "^3.1.7",

diff --git a/source/_meta/_foot.hbs b/source/_meta/_foot.hbs
@@ -6,7 +6,6 @@
 		<script src="../../js/details-element-polyfill.js"></script>
 		<!-- dialog polyfill //-->
 		<script src="../../js/dialog-polyfill.js"></script>
-		<script src="../../js/main.min.js"></script>
 	</body>
 
 </html>
diff --git a/source/_meta/_head.hbs b/source/_meta/_head.hbs
@@ -40,6 +40,7 @@ documentation has useful tips on creating an effective description. //-->
 
 	<!-- iframe resizing script for pattern previews -->
 	<script src="../../js/iframeResizer.contentWindow.js"></script>
+	<script src="../../js/invoker.min.js"></script>
 </head>
 
 <body class="{{ bodyClass }}">
diff --git a/source/_patterns/01-elements/buttons/button.hbs b/source/_patterns/01-elements/buttons/button.hbs
@@ -8,6 +8,8 @@
 	{{#if icon}} data-icon="{{ icon }}"{{/if}}
 	{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
 	{{#if label}} aria-label="{{ label }}"{{/if }}
-	{{#if width }} data-width="{{ width }}"{{/if }}>
+	{{#if width }} data-width="{{ width }}"{{/if }}
+	{{#if command }} command="{{ command }}"{{/if }}
+	{{#if commandfor }} commandfor="{{ commandfor }}"{{/if }}>
 	{{{ value }}}
 </button>
diff --git a/source/_patterns/02-components/dialog/dialog.hbs b/source/_patterns/02-components/dialog/dialog.hbs
@@ -1,11 +1,11 @@
 {{#if opener }}
-{{> elements-link anchorlink=id value='Dialog öffnen' }}
+{{> elements-button command="show-modal" commandfor=id value='Dialog öffnen' variant="secondary-outline" }}
 {{/if }}
 <dialog id="{{ id }}" class="cmp-dialog">
 	<header>
 		<!-- [html-validate-disable-next heading-level] -->
 		{{> elements-headline type='2' text='Modal' id='' }}
-		{{> elements-link styleModifier='is-close' href='#' value='Close' title='Close the dialog' }}
+		<button type="button" class="is-close" title="Close the dialog" command="close" commandfor="{{ id }}">Close</button>
 	</header>
 	<main>
 		<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>

diff --git a/source/_patterns/02-components/dialog/dialog.md b/source/_patterns/02-components/dialog/dialog.md
@@ -15,10 +15,9 @@ Source: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Usage_
 
 ## JavaScript dependencies
 
-- Dialog polyfill: As some [older browsers don't fully support the native dialog HTML tag so far](https://caniuse.com/#feat=dialog) we'll [have to use a polyfill](https://github.com/GoogleChrome/dialog-polyfill), that is being included into the file `source/js/plugins.min.js` during build, as well as [a snippet that enforces to return focus to the previously focused element on the page after closing the dialog](https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1), which is included within `source/js/plugins.min.js` as well. Good news: With Safari 15.4 the last remaining of the modern browsers shipped the `dialog` elements support: <https://webkit.org/blog/12209/introducing-the-dialog-element/>
-- The dialog polyfill itself is being initialized via our individually developed [`dialog.script.js`](https://github.com/db-ui/core/blob/main/source/_patterns/02-components/dialog/dialog.script.js), which is being included into `source/js/main.min.js`during build.
+**Dialog polyfill**: As some [older browsers don't fully support the native dialog HTML tag so far](https://caniuse.com/#feat=dialog) we'll [have to use a polyfill](https://github.com/GoogleChrome/dialog-polyfill), that is being included into the file `source/js/plugins.min.js` during build, as well as [a snippet that enforces to return focus to the previously focused element on the page after closing the dialog](https://gist.github.com/samthor/babe9fad4a65625b301ba482dad284d1), which is included within `source/js/plugins.min.js` as well. Good news: With Safari 15.4 the last remaining of the modern browsers shipped the `dialog` elements support: <https://webkit.org/blog/12209/introducing-the-dialog-element/>
 
-**Please feel free to include and initialize all of those scripts according to your JavaScript ecosystem individually, and especially develop the logic out of [`dialog.script.js`](https://github.com/db-ui/core/blob/main/source/_patterns/02-components/dialog/dialog.script.js) on your own for your specific context and techstack.**
+**Please feel free to include and initialize this script according to your JavaScript ecosystem individually, and especially develop the logic out of [`invoker commands`](https://open-ui.org/components/invokers.explainer/) on your own for your specific context and techstack.**
 
 ## Accessibility
 

diff --git a/source/_patterns/02-components/dialog/dialog.script.js b/source/_patterns/02-components/dialog/dialog.script.js
diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss
@@ -68,12 +68,15 @@
 			}
 		}
 
-		.elm-link {
+		:is(.elm-link, button) {
 			&.is-close {
 				position: absolute;
 				right: 0;
 				top: 0;
 
+				background-color: transparent;
+				border-color: transparent;
+
 				& {
 					@include icon(
 						glyph(close),