Skip to content

Commit e4af366

Browse files
mfranzkemfranzke
authored
refactor: using invoker command instead of JS glue code (#989)
1 parent 24d7626 commit e4af366

File tree

10 files changed

+31
-64
lines changed

10 files changed

+31
-64
lines changed

‎enterprise.patternlab-config.json

+2
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,7 @@
5757
"icons": "./node_modules/@db-ui/base/build/assets/icons",
5858
"samples": "./source/samples",
5959
"iframeResizer.contentWindow.js": "node_modules/iframe-resizer/js/iframeResizer.contentWindow.js",
60+
"invokers-polyfill.js": "node_modules/invokers-polyfill/invoker.min.js",
6061
"details-element-polyfill.js": "node_modules/details-element-polyfill/dist/details-element-polyfill.js",
6162
"dialog-polyfill.js": "node_modules/dialog-polyfill/dist/dialog-polyfill.js",
6263
"dialog-polyfill.css": "node_modules/dialog-polyfill/dist/dialog-polyfill.css",
@@ -75,6 +76,7 @@
7576
"icons": "out/icons",
7677
"samples": "out/samples",
7778
"iframeResizer.contentWindow.js": "out/js/iframeResizer.contentWindow.js",
79+
"invokers-polyfill.js": "out/js/invoker.min.js",
7880
"details-element-polyfill.js": "out/js/details-element-polyfill.js",
7981
"dialog-polyfill.js": "out/js/dialog-polyfill.js",
8082
"dialog-polyfill.css": "out/css/dialog-polyfill.css",

‎package-lock.json

+14
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+3-2
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
"description": "Technical Frontend implementation of the DB UX Design System.",
55
"style": "./dist/css/enterprise/db-ui-core.css",
66
"sass": "./sources/css/enterprise/db-ui-core.scss",
7-
"browser": "./dist/js/main.min.js",
7+
"browser": "./dist/js/plugins.min.js",
88
"bugs": {
99
"url": "https://github.com/db-ui/core/issues"
1010
},
@@ -36,7 +36,7 @@
3636
"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",
3737
"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",
3838
"js-deploy": "npm run js-build && cpr source/js dist/js -d",
39-
"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",
39+
"js-build": "babel source/**/*.plugin.js --minified --out-file source/js/plugins.min.js --source-maps",
4040
"js-watch": "npm run js-build -- --watch",
4141
"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",
4242
"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 @@
8383
"html5-boilerplate": "^9.0.1",
8484
"husky": "^9.1.6",
8585
"iframe-resizer": "^4.4.5",
86+
"invokers-polyfill": "^0.4.6",
8687
"lint-staged": "^15.2.10",
8788
"markdownlint-cli": "^0.42.0",
8889
"nodemon": "^3.1.7",

‎source/_meta/_foot.hbs

-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
<script src="../../js/details-element-polyfill.js"></script>
77
<!-- dialog polyfill //-->
88
<script src="../../js/dialog-polyfill.js"></script>
9-
<script src="../../js/main.min.js"></script>
109
</body>
1110

1211
</html>

‎source/_meta/_head.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ documentation has useful tips on creating an effective description. //-->
4040

4141
<!-- iframe resizing script for pattern previews -->
4242
<script src="../../js/iframeResizer.contentWindow.js"></script>
43+
<script src="../../js/invoker.min.js"></script>
4344
</head>
4445

4546
<body class="{{ bodyClass }}">

‎source/_patterns/01-elements/buttons/button.hbs

+3-1
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
{{#if icon}} data-icon="{{ icon }}"{{/if}}
99
{{#if icon-after}} data-icon-after="{{ icon-after }}"{{/if}}
1010
{{#if label}} aria-label="{{ label }}"{{/if }}
11-
{{#if width }} data-width="{{ width }}"{{/if }}>
11+
{{#if width }} data-width="{{ width }}"{{/if }}
12+
{{#if command }} command="{{ command }}"{{/if }}
13+
{{#if commandfor }} commandfor="{{ commandfor }}"{{/if }}>
1214
{{{ value }}}
1315
</button>

‎source/_patterns/02-components/dialog/dialog.hbs

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
{{#if opener }}
2-
{{> elements-link anchorlink=id value='Dialog öffnen' }}
2+
{{> elements-button command="show-modal" commandfor=id value='Dialog öffnen' variant="secondary-outline" }}
33
{{/if }}
44
<dialog id="{{ id }}" class="cmp-dialog">
55
<header>
66
<!-- [html-validate-disable-next heading-level] -->
77
{{> elements-headline type='2' text='Modal' id='' }}
8-
{{> elements-link styleModifier='is-close' href='#' value='Close' title='Close the dialog' }}
8+
<button type="button" class="is-close" title="Close the dialog" command="close" commandfor="{{ id }}">Close</button>
99
</header>
1010
<main>
1111
<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>

‎source/_patterns/02-components/dialog/dialog.md

+2-3
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,9 @@ Source: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#Usage_
1515

1616
## JavaScript dependencies
1717

18-
- 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/>
19-
- 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.
18+
**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/>
2019

21-
**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.**
20+
**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.**
2221

2322
## Accessibility
2423

‎source/_patterns/02-components/dialog/dialog.script.js

-54
This file was deleted.

‎source/_patterns/02-components/dialog/dialog.scss

+4-1
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,15 @@
6868
}
6969
}
7070

71-
.elm-link {
71+
:is(.elm-link, button) {
7272
&.is-close {
7373
position: absolute;
7474
right: 0;
7575
top: 0;
7676

77+
background-color: transparent;
78+
border-color: transparent;
79+
7780
& {
7881
@include icon(
7982
glyph(close),

0 commit comments

Comments
 (0)