From e4af3666478e296840527b14579052fd2ae04e0c Mon Sep 17 00:00:00 2001 From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com> Date: Fri, 11 Oct 2024 10:03:22 +0200 Subject: [PATCH] refactor: using invoker command instead of JS glue code (#989) --- enterprise.patternlab-config.json | 2 + package-lock.json | 14 +++++ package.json | 5 +- source/_meta/_foot.hbs | 1 - source/_meta/_head.hbs | 1 + .../_patterns/01-elements/buttons/button.hbs | 4 +- .../_patterns/02-components/dialog/dialog.hbs | 4 +- .../_patterns/02-components/dialog/dialog.md | 5 +- .../02-components/dialog/dialog.script.js | 54 ------------------- .../02-components/dialog/dialog.scss | 5 +- 10 files changed, 31 insertions(+), 64 deletions(-) delete mode 100644 source/_patterns/02-components/dialog/dialog.script.js diff --git a/enterprise.patternlab-config.json b/enterprise.patternlab-config.json index c47d1fed6a..c1c3b13df4 100644 --- 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 index 74e683537a..5536e61959 100644 --- a/package-lock.json +++ b/package-lock.json @@ -35,6 +35,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", @@ -10370,6 +10371,13 @@ "node": ">= 0.10" } }, + "node_modules/invokers-polyfill": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/invokers-polyfill/-/invokers-polyfill-0.4.6.tgz", + "integrity": "sha512-+NxCqLu5WSxlq/C0//ubFEO4QCi4gqtMH602eTFNVNq7fzEdzr+iSgiWia8ohr93pTqW33uzv/0JgJQ7fJU7Pg==", + "dev": true, + "license": "MIT" + }, "node_modules/ip-address": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz", @@ -27370,6 +27378,12 @@ "integrity": "sha512-agE4QfB2Lkp9uICn7BAqoscw4SZP9kTE2hxiFI3jBPmXJfdqiahTbUuKGsMoN2GtqL9AxhYioAcVvgsb1HvRbA==", "dev": true }, + "invokers-polyfill": { + "version": "0.4.6", + "resolved": "https://registry.npmjs.org/invokers-polyfill/-/invokers-polyfill-0.4.6.tgz", + "integrity": "sha512-+NxCqLu5WSxlq/C0//ubFEO4QCi4gqtMH602eTFNVNq7fzEdzr+iSgiWia8ohr93pTqW33uzv/0JgJQ7fJU7Pg==", + "dev": true + }, "ip-address": { "version": "9.0.5", "resolved": "https://registry.npmjs.org/ip-address/-/ip-address-9.0.5.tgz", diff --git a/package.json b/package.json index 72dcdbeef1..c9ed657efb 100644 --- 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 index ba7f5538d8..faa41c70ed 100644 --- a/source/_meta/_foot.hbs +++ b/source/_meta/_foot.hbs @@ -6,7 +6,6 @@ - diff --git a/source/_meta/_head.hbs b/source/_meta/_head.hbs index e41f8e2da0..ba6cdbe8ab 100644 --- a/source/_meta/_head.hbs +++ b/source/_meta/_head.hbs @@ -40,6 +40,7 @@ documentation has useful tips on creating an effective description. //--> + diff --git a/source/_patterns/01-elements/buttons/button.hbs b/source/_patterns/01-elements/buttons/button.hbs index 50a40b920b..9b7709f61d 100644 --- 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 }}} diff --git a/source/_patterns/02-components/dialog/dialog.hbs b/source/_patterns/02-components/dialog/dialog.hbs index 5f3681a9a7..6c1f17704d 100644 --- 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 }}
{{> elements-headline type='2' text='Modal' id='' }} - {{> elements-link styleModifier='is-close' href='#' value='Close' title='Close the dialog' }} +

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.

diff --git a/source/_patterns/02-components/dialog/dialog.md b/source/_patterns/02-components/dialog/dialog.md index ba385a0382..11ee568c3b 100644 --- a/source/_patterns/02-components/dialog/dialog.md +++ b/source/_patterns/02-components/dialog/dialog.md @@ -15,10 +15,9 @@ Source: -- 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: -**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 deleted file mode 100644 index f74554bde8..0000000000 --- a/source/_patterns/02-components/dialog/dialog.script.js +++ /dev/null @@ -1,54 +0,0 @@ -/* global dialogPolyfill */ - -(function () { - // Bind the click events for links (that we'll check for later on) - document.addEventListener('click', (event) => { - // Determine whether the target of the current link is a dialog - if ( - event.target && - event.target.tagName && - event.target.tagName.toLowerCase() === 'a' && - event.target.attributes.href.value.slice(0, 1) === '#' - ) { - const link = event.target; - let type, dialog; - - // Determine whether the link is included within a dialog and is the close link - if ( - link.attributes.href.value === '#' && - link.closest('dialog') && - link.matches('.elm-link.is-close') - ) { - type = 'close'; - dialog = link.closest('dialog'); - } else if ( - link.hash && - document.querySelector(link.hash) && - document.querySelector(link.hash).tagName.toLowerCase() === - 'dialog' - ) { - type = 'dialog'; - dialog = document.querySelector(link.hash); - } else { - return; - } - - // Check for whether the dialog has been registered even already - if (type === 'dialog') { - if (!dialog.dataset.polyfilled) { - // Initially registering the dialog - dialogPolyfill.registerDialog(dialog); - - dialog.dataset.polyfilled = true; - } - - dialog.showModal(); - } else { - dialog.close(); - } - - // Prevent the default behaviour of the link - event.preventDefault(); - } - }); -})(); diff --git a/source/_patterns/02-components/dialog/dialog.scss b/source/_patterns/02-components/dialog/dialog.scss index 2a6bc0752c..006a72949d 100644 --- 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),