diff --git a/d2l-navigation-immersive.js b/d2l-navigation-immersive.js index eaffee6..db6d43d 100644 --- a/d2l-navigation-immersive.js +++ b/d2l-navigation-immersive.js @@ -1,47 +1,41 @@ import '@brightspace-ui/core/components/colors/colors.js'; -import '@brightspace-ui/typography/d2l-typography-shared-styles.js'; -import 'fastdom/fastdom.js'; import './d2l-navigation.js'; import './d2l-navigation-link-back.js'; -import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; -import { DirMixin } from '@polymer/polymer/lib/mixins/dir-mixin.js'; -import { dom } from '@polymer/polymer/lib/legacy/polymer.dom.js'; +import { css, html, LitElement } from 'lit'; +import { bodyCompactStyles } from '@brightspace-ui/core/components/typography/styles.js'; +import { classMap } from 'lit/directives/class-map.js'; import { navigationSharedStyle } from './d2l-navigation-shared-styles.js'; import ResizeObserver from 'resize-observer-polyfill/dist/ResizeObserver.es.js'; -/** -`d2l-navigation-immersive` -Polymer-based web component for the immersive navigation component - -@demo demo/navigation-immersive.html -*/ -class D2LNavigationImmsersive extends DirMixin(PolymerElement) { +class NavigationImmersive extends LitElement { static get properties() { return { allowOverflow: { + attribute: 'allow-overflow', type: Boolean, - reflectToAttribute: true + reflect: true }, backLinkHref: { - type: String, - reflectToAttribute: true + attribute: 'back-link-href', + type: String }, backLinkText: { - type: String, - reflectToAttribute: true + attribute: 'back-link-text', + type: String }, widthType: { + attribute: 'width-type', type: String, - reflectToAttribute: true - } + reflect: true + }, + _middleHidden: { state: true }, + _middleNoRightBorder: { state: true } }; } - static get template() { - const template = html` - ${navigationSharedStyle} - -
- -
-
-
- - - -
-
-
- -
-
-
-
- -
-
-
-
- -
-
- `; - template.setAttribute('strip-whitespace', ''); - return template; + constructor() { + super(); + this._middleHidden = false; + this._middleNoRightBorder = true; + this._middleObserver = new ResizeObserver(this._onMiddleResize.bind(this)); + this._rightObserver = new ResizeObserver(this._onRightResize.bind(this)); } connectedCallback() { super.connectedCallback(); - - this.middle = dom(this.root).querySelector('.d2l-navigation-immersive-middle-observer'); - this._middleObserver = new ResizeObserver(this._onMiddleResize); - this._middleObserver.observe(this.middle); - - this.right = dom(this.root).querySelector('.d2l-navigation-immersive-right-observer'); - this._rightObserver = new ResizeObserver(this._onRightResize); - this._rightObserver.observe(this.right); + this._startObserving(); } disconnectedCallback() { super.disconnectedCallback(); - if (this._middleObserver) { - this._middleObserver.unobserve(this.middle); - } - - if (this._rightObserver) { - this._rightObserver.unobserve(this.right); - } + if (this._middleObserver) this._middleObserver.disconnect(); + if (this._rightObserver) this._rightObserver.disconnect(); } - ready() { - super.ready(); - this._onMiddleResize = this._onMiddleResize.bind(this); - this._onRightResize = this._onRightResize.bind(this); + firstUpdated(changedProperties) { + super.firstUpdated(changedProperties); + this._startObserving(); } - _onMiddleResize(entries) { - this._onResize(entries, '.d2l-navigation-immersive-middle', 'd2l-navigation-immersive-middle-hidden'); + render() { + const middleContainerClasses = { + 'd2l-navigation-immersive-middle': true, + 'd2l-navigation-immersive-middle-hidden': this._middleHidden, + 'd2l-navigation-immersive-middle-no-right-border': this._middleNoRightBorder + }; + return html` +
+ +
+
+
+ + + +
+
+
+ +
+
+
+
+
+ +
+
+ `; } - _onResize(entries, slotContainerQuerySelector, containerClass) { + _onMiddleResize(entries) { if (!entries || entries.length === 0) { return; } + this._middleHidden = (entries[0].contentRect.height < 1); + } - const entry = entries[0]; - const container = dom(this.root).querySelector(slotContainerQuerySelector); - - if (entry.contentRect.height < 1) { - // nothing in slot - if (!container.classList.contains(containerClass)) { - fastdom.mutate(() => { - container.classList.add(containerClass); - }); - } - } else { - // stuff in slot - if (container.classList.contains(containerClass)) { - fastdom.mutate(() => { - container.classList.remove(containerClass); - }); - } + _onRightResize(entries) { + if (!entries || entries.length === 0) { + return; } + this._middleNoRightBorder = (entries[0].contentRect.height < 1); } - _onRightResize(entries) { - this._onResize(entries, '.d2l-navigation-immersive-middle', 'd2l-navigation-immersive-middle-no-right-border'); + _startObserving() { + const middle = this.shadowRoot?.querySelector('.d2l-navigation-immersive-middle-observer'); + if (middle) { + this._middleObserver.observe(middle); + } + const right = this.shadowRoot?.querySelector('.d2l-navigation-immersive-right-observer'); + if (right) { + this._rightObserver.observe(right); + } } } -customElements.define('d2l-navigation-immersive', D2LNavigationImmsersive); +customElements.define('d2l-navigation-immersive', NavigationImmersive); diff --git a/d2l-navigation-main-footer.js b/d2l-navigation-main-footer.js index 30c1d08..e0679b8 100644 --- a/d2l-navigation-main-footer.js +++ b/d2l-navigation-main-footer.js @@ -1,32 +1,27 @@ -import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; +import { css, html, LitElement } from 'lit'; import { navigationSharedStyle } from './d2l-navigation-shared-styles.js'; -/** -`d2l-navigation-main-footer` -Polymer-based web component for the smaller, lower section of the navigational element +class NavigationMainFooter extends LitElement { -@demo demo/navigation-main-footer.html -*/ -class D2LNavigationMainFooter extends PolymerElement { + static get styles() { + return [navigationSharedStyle, css` + :host { + border-bottom: 1px solid rgba(124, 134, 149, 0.18); + border-top: 1px solid rgba(124, 134, 149, 0.18); + display: block; + } + `]; + } - static get template() { - const template = html` - ${navigationSharedStyle} - + render() { + return html`
`; - template.setAttribute('strip-whitespace', ''); - return template; } + } -customElements.define('d2l-navigation-main-footer', D2LNavigationMainFooter); +customElements.define('d2l-navigation-main-footer', NavigationMainFooter); diff --git a/d2l-navigation-main-header.js b/d2l-navigation-main-header.js index 27fb384..d535846 100644 --- a/d2l-navigation-main-header.js +++ b/d2l-navigation-main-header.js @@ -1,61 +1,57 @@ -import { html, PolymerElement } from '@polymer/polymer/polymer-element.js'; +import { css, html, LitElement } from 'lit'; import { navigationSharedStyle } from './d2l-navigation-shared-styles.js'; -/** -`d2l-navigation-main-header` -Polymer-based web component for the larger, upper section of the navigational element +class NavigationMainHeader extends LitElement { -@demo demo/navigation-main-header.html -*/ -class D2LNavigationMainHeader extends PolymerElement { + static get styles() { + return [navigationSharedStyle, css` + :host { + display: block; + } - static get template() { - const template = html` - ${navigationSharedStyle} - + render() { + return html`
@@ -66,8 +62,6 @@ class D2LNavigationMainHeader extends PolymerElement {
`; - template.setAttribute('strip-whitespace', ''); - return template; } } -customElements.define('d2l-navigation-main-header', D2LNavigationMainHeader); +customElements.define('d2l-navigation-main-header', NavigationMainHeader); diff --git a/d2l-navigation-shared-styles.js b/d2l-navigation-shared-styles.js index d83feef..a6391aa 100644 --- a/d2l-navigation-shared-styles.js +++ b/d2l-navigation-shared-styles.js @@ -1,33 +1,32 @@ -import { html } from '@polymer/polymer/polymer-element.js'; -export const navigationSharedStyle = html` - - `; + @media (max-width: 615px) { + .d2l-navigation-gutters { + padding-left: 15px; + padding-right: 15px; + } + } + + @media (min-width: 1230px) { + .d2l-navigation-gutters { + padding-left: 30px; + padding-right: 30px; + } + } +`;