From 8e0242ce8821843f4f5a85234189bf575ff5c0aa Mon Sep 17 00:00:00 2001 From: heff Date: Thu, 17 Nov 2022 15:57:36 -0800 Subject: [PATCH 1/3] Save point --- examples/themes/etch.html | 117 ++++++++++++++++++++++++++++++++++++++ 1 file changed, 117 insertions(+) create mode 100644 examples/themes/etch.html diff --git a/examples/themes/etch.html b/examples/themes/etch.html new file mode 100644 index 000000000..e9cdf5e04 --- /dev/null +++ b/examples/themes/etch.html @@ -0,0 +1,117 @@ + + + + + Media Chrome Etch-a-Sketch Theme + + + + + +
+

Media Chrome Etch-a-Sketch Theme

+ +
+ + + + + + + + + + +
+ +
+ +
+ + +
+ + + + + + + + +
+ View more examples +
+
+ + From 413c828a40f694f5793a8411bd68b40175e7ef57 Mon Sep 17 00:00:00 2001 From: heff Date: Thu, 26 Jan 2023 14:06:16 -0800 Subject: [PATCH 2/3] Fixed bug with media-controller attr in shadow dom Save point Save point Save point Save point --- examples/themes/etch.html | 298 ++++++++++++++++++++++------------ src/js/media-chrome-button.js | 2 +- 2 files changed, 195 insertions(+), 105 deletions(-) diff --git a/examples/themes/etch.html b/examples/themes/etch.html index e9cdf5e04..27fe58053 100644 --- a/examples/themes/etch.html +++ b/examples/themes/etch.html @@ -1,103 +1,195 @@ - - - Media Chrome Etch-a-Sketch Theme - - - - - -
-

Media Chrome Etch-a-Sketch Theme

- -
- - - - - - - - - - -
- -
- -
- - -
- - - + + + Media Chrome Etch-a-Sketch Theme + + + + + +
+

Media Chrome Etch-a-Sketch Theme

+ + + + + + + + +

+ + + +
+ + + + + + + + + + +
+ +
+ +
+
+ + -
- View more examples -
-
- + +
+ diff --git a/src/js/media-chrome-button.js b/src/js/media-chrome-button.js index cf6732bde..523276012 100644 --- a/src/js/media-chrome-button.js +++ b/src/js/media-chrome-button.js @@ -158,7 +158,7 @@ class MediaChromeButton extends window.HTMLElement { MediaStateReceiverAttributes.MEDIA_CONTROLLER ); if (mediaControllerId) { - const mediaControllerEl = document.getElementById(mediaControllerId); + const mediaControllerEl = this.getRootNode().getElementById(mediaControllerId); mediaControllerEl?.associateElement?.(this); } } From 5a134fcab2d4d2724abbb9f373a7cf2db4d0d2eb Mon Sep 17 00:00:00 2001 From: heff Date: Thu, 26 Jan 2023 15:59:07 -0800 Subject: [PATCH 3/3] Created theme elemment --- examples/themes/etch.html | 188 +-------------------- src/js/media-chrome-button.js | 11 +- src/js/themes/media-theme-etch-a-sketch.js | 99 +++++++++++ 3 files changed, 112 insertions(+), 186 deletions(-) create mode 100644 src/js/themes/media-theme-etch-a-sketch.js diff --git a/examples/themes/etch.html b/examples/themes/etch.html index 27fe58053..62bfe834e 100644 --- a/examples/themes/etch.html +++ b/examples/themes/etch.html @@ -4,202 +4,22 @@ Media Chrome Etch-a-Sketch Theme - +

Media Chrome Etch-a-Sketch Theme

- - - + - - - -

- - - -
- - - - - - - - - - -
- -
- -
-
- - +
diff --git a/src/js/media-chrome-button.js b/src/js/media-chrome-button.js index 523276012..e5dc55219 100644 --- a/src/js/media-chrome-button.js +++ b/src/js/media-chrome-button.js @@ -157,9 +157,16 @@ class MediaChromeButton extends window.HTMLElement { const mediaControllerId = this.getAttribute( MediaStateReceiverAttributes.MEDIA_CONTROLLER ); + if (mediaControllerId) { - const mediaControllerEl = this.getRootNode().getElementById(mediaControllerId); - mediaControllerEl?.associateElement?.(this); + const rootNode = this.getRootNode(); + + // @ts-ignore + if (rootNode?.getElementById) { + // @ts-ignore + const mediaControllerEl = rootNode.getElementById(mediaControllerId); + mediaControllerEl?.associateElement?.(this); + } } } diff --git a/src/js/themes/media-theme-etch-a-sketch.js b/src/js/themes/media-theme-etch-a-sketch.js new file mode 100644 index 000000000..38e4962c4 --- /dev/null +++ b/src/js/themes/media-theme-etch-a-sketch.js @@ -0,0 +1,99 @@ +/* + + + +*/ + +import { window } from '../utils/server-safe-globals.js'; +import { MediaThemeElement } from '../media-theme-element.js'; + +const template = document.createElement('template'); +template.innerHTML = ` + + +
+ + + + + + + + + + +
+ +
+ +
+
+`; + +class MediaThemeEtchASketch extends MediaThemeElement { + static template = template; +} + +if (!window.customElements.get('media-theme-etch-a-sketch')) { + window.customElements.define('media-theme-etch-a-sketch', MediaThemeEtchASketch); +} + +export default MediaThemeEtchASketch;