diff --git a/packages/cxl-ui/package.json b/packages/cxl-ui/package.json index 230d69f02..6cc3b0bd9 100644 --- a/packages/cxl-ui/package.json +++ b/packages/cxl-ui/package.json @@ -15,6 +15,7 @@ }, "devDependencies": { "@conversionxl/normalize-wheel": "^1.0.1", + "@lit/context": "^1.0.1", "@vaadin/accordion": "^23.3.7", "@vaadin/button": "^23.3.7", "@vaadin/checkbox": "^23.3.7", diff --git a/packages/cxl-ui/src/components/cxl-app-layout.js b/packages/cxl-ui/src/components/cxl-app-layout.js index 8539b9b0e..e40e25b33 100644 --- a/packages/cxl-ui/src/components/cxl-app-layout.js +++ b/packages/cxl-ui/src/components/cxl-app-layout.js @@ -7,9 +7,11 @@ import '@conversionxl/cxl-lumo-styles'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; import normalizeWheel from '@conversionxl/normalize-wheel'; import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js'; +import { provide } from '@lit/context'; import cxlAppLayoutStyles from '../styles/cxl-app-layout-css.js'; import cxlAppLayoutGlobalStyles from '../styles/global/cxl-app-layout-css.js'; import '@vaadin/button'; +import { mediaContext } from '../media-context.js'; const ASIDE_LOCAL_STORAGE_KEY = 'cxl-app-layout-aside-opened'; @@ -54,14 +56,21 @@ export class CXLAppLayoutElement extends LitElement { @property() layout = '1c'; - // MediaQueryController. - @property({ type: Boolean, reflect: true }) - wide; + // @see https://github.com/vaadin/web-components/blob/de3db720ec8448a26d2f84d00965a9e369a1c3fb/packages/select/src/vaadin-select.js#L297 + _phoneMediaQuery = '(max-width: 568px), (max-height: 568px)'; // @TODO: Improve media query using shared state, possibly @lit/Context (https://lit.dev/docs/data/context/) // Device Detector media query. _wideMediaQuery = '(min-width: 528px)'; + @provide({ context: mediaContext }) + @property() + _phone = false; + + @provide({ context: mediaContext }) + @property() + _wide = false; + static get styles() { return [cxlAppLayoutStyles]; } @@ -116,9 +125,19 @@ export class CXLAppLayoutElement extends LitElement { this.addController( new MediaQueryController(this._wideMediaQuery, (matches) => { + if (this.wide !== undefined && this.wide !== matches) { + window.location.reload(); + } + this.wide = matches; }) ); + + this.addController( + new MediaQueryController(this._phoneMediaQuery, (matches) => { + this._phone = matches; + }) + ); } updated(changedProperties) { diff --git a/packages/cxl-ui/src/components/cxl-marketing-nav.js b/packages/cxl-ui/src/components/cxl-marketing-nav.js index 314eea50b..39cb84544 100644 --- a/packages/cxl-ui/src/components/cxl-marketing-nav.js +++ b/packages/cxl-ui/src/components/cxl-marketing-nav.js @@ -4,13 +4,14 @@ import { customElement, property, query } from 'lit/decorators.js'; import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import '@conversionxl/cxl-lumo-styles'; import { registerGlobalStyles } from '@conversionxl/cxl-lumo-styles/src/utils'; -import { MediaQueryController } from '@vaadin/component-base/src/media-query-controller.js'; import { throttle } from 'lodash-es'; +import { consume } from '@lit/context'; import cxlMarketingNavStyles from '../styles/cxl-marketing-nav-css.js'; import cxlMarketingNavGlobalStyles from '../styles/global/cxl-marketing-nav-css.js'; import '@vaadin/button'; import '@vaadin/tabs'; import '@vaadin/context-menu'; +import { mediaContext } from '../media-context.js'; @customElement('cxl-marketing-nav') export class CXLMarketingNavElement extends LitElement { @@ -40,19 +41,17 @@ export class CXLMarketingNavElement extends LitElement { @property({ type: Boolean, reflect: true }) minimal = false; - // MediaQueryController. - @property({ type: Boolean, reflect: true }) + @consume({ context: mediaContext, subscribe: true }) + @property({ type: Boolean }) + _phone; + + @consume({ context: mediaContext, subscribe: true }) + @property({ type: Boolean }) wide; // Device Detector media query. _wideMediaQuery = '(min-width: 568px)'; - @property({ type: Boolean, reflect: true }) - _phone; - - // @see https://github.com/vaadin/web-components/blob/de3db720ec8448a26d2f84d00965a9e369a1c3fb/packages/select/src/vaadin-select.js#L297 - _phoneMediaQuery = '(max-width: 568px), (max-height: 568px)'; - @property({ type: HTMLElement }) submenuOverlay = null; @@ -123,22 +122,6 @@ export class CXLMarketingNavElement extends LitElement { connectedCallback() { super.connectedCallback(); - this.addController( - new MediaQueryController(this._wideMediaQuery, (matches) => { - if (this.wide !== undefined && this.wide !== matches) { - window.location.reload(); - } - - this.wide = matches; - }) - ); - - this.addController( - new MediaQueryController(this._phoneMediaQuery, (matches) => { - this._phone = matches; - }) - ); - this._boundOnOverlayOpen = this._onOverlayOpen.bind(this); const overlaysWrapper = document.createElement('div'); overlaysWrapper.id = 'overlays-wrapper'; diff --git a/packages/cxl-ui/src/media-context.js b/packages/cxl-ui/src/media-context.js new file mode 100644 index 000000000..1e74cafa7 --- /dev/null +++ b/packages/cxl-ui/src/media-context.js @@ -0,0 +1,3 @@ +import { createContext } from '@lit/context'; + +export const mediaContext = createContext(Symbol('media-context')); diff --git a/yarn.lock b/yarn.lock index c93f37fe1..adf67731a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2365,6 +2365,18 @@ resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.1.tgz#64df34e2f12e68e78ac57e571d25ec07fa460ca9" integrity sha512-kXOeFbfCm4fFf2A3WwVEeQj55tMZa8c8/f9AKHMobQMkzNUfUj+antR3fRPaZJawsa1aZiP/Da3ndpZrwEe4rQ== +"@lit-labs/ssr-dom-shim@^1.1.2": + version "1.1.2" + resolved "https://registry.yarnpkg.com/@lit-labs/ssr-dom-shim/-/ssr-dom-shim-1.1.2.tgz#d693d972974a354034454ec1317eb6afd0b00312" + integrity sha512-jnOD+/+dSrfTWYfSXBXlo5l5f0q1UuJo3tkbMDCYA2lKUYq79jaxqtGEvnRoh049nt1vdo1+45RinipU6FGY2g== + +"@lit/context@^1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@lit/context/-/context-1.0.1.tgz#4f4293096d4a1c9386f4ef7c0dbadf418ab4ece6" + integrity sha512-ujQEV42vRjhNzCu/YNc+dy8eq48cEYO2SvEl7iCmMzt8X7ixUYcDt8DPV1UBr58FJ7EUe9vTLPv/0soAi9bfRw== + dependencies: + "@lit/reactive-element" "^1.6.2 || ^2.0.0" + "@lit/reactive-element@^1.1.0": version "1.6.3" resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-1.6.3.tgz#25b4eece2592132845d303e091bad9b04cdcfe03" @@ -2379,6 +2391,13 @@ dependencies: "@lit-labs/ssr-dom-shim" "^1.0.0" +"@lit/reactive-element@^1.6.2 || ^2.0.0": + version "2.0.1" + resolved "https://registry.yarnpkg.com/@lit/reactive-element/-/reactive-element-2.0.1.tgz#b17d8818d9c72ccc489f44e35d87cfa18a9c8c93" + integrity sha512-eu50SQXHRthFwWJMp0oAFg95Rvm6MTPjxSXWuvAu7It90WVFLFpNBoIno7XOXSDvVgTrtKnUV4OLJqys2Svn4g== + dependencies: + "@lit-labs/ssr-dom-shim" "^1.1.2" + "@mdx-js/mdx@^1.6.22": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba"