Skip to content

Commit

Permalink
feat: migrate some nav elements to Lit (#216)
Browse files Browse the repository at this point in the history
  • Loading branch information
@dlockhart
dlockhart committed Jun 17, 2024
1 parent 41bd822 commit 590974a
Show file tree
Hide file tree
Showing 4 changed files with 163 additions and 217 deletions.
202 changes: 80 additions & 122 deletions d2l-navigation-immersive.js
View file
Original file line number Diff line number Diff line change
@@ -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}
<style>
static get styles() {
return [bodyCompactStyles, navigationSharedStyle, css`
:host {
--d2l-navigation-immersive-height-main: 3.1rem;
--d2l-navigation-immersive-height-responsive: 2.8rem;
Expand Down Expand Up @@ -87,18 +81,7 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) {
height: var(--d2l-navigation-immersive-height-main);
}
/*
::slotted styles for Edge and IE11; styling all slotted children needs
to be applied explicitly.
*/
.d2l-navigation-immersive-left ::slotted(*) > *,
.d2l-navigation-immersive-middle ::slotted(*) > *,
.d2l-navigation-immersive-right ::slotted(*) > * {
height: var(--d2l-navigation-immersive-height-main);
}
.d2l-navigation-immersive-left {
@apply --d2l-body-compact-text;
color: var(--d2l-color-tungsten);
letter-spacing: 0.2px;
padding-left: 7px;
Expand All @@ -114,22 +97,17 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) {
}
.d2l-navigation-immersive-middle {
border-left: 1px solid var(--d2l-color-gypsum);
border-right: 1px solid var(--d2l-color-gypsum);
border-inline-end: 1px solid var(--d2l-color-gypsum);
border-inline-start: 1px solid var(--d2l-color-gypsum);
flex: 0 1 auto;
margin: 0 24px;
min-width: 0;
padding: 0 24px;
width: 100%;
min-width: 0;
}
.d2l-navigation-immersive-middle.d2l-navigation-immersive-middle-no-right-border {
border-right: none;
}
:host(:dir(rtl)) .d2l-navigation-immersive-middle.d2l-navigation-immersive-middle-no-right-border {
border-left: none;
border-right: 1px solid var(--d2l-color-gypsum);
border-inline-end: none;
}
div.d2l-navigation-immersive-middle-observer,
Expand Down Expand Up @@ -167,15 +145,6 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) {
.d2l-navigation-immersive-right ::slotted(*) {
height: var(--d2l-navigation-immersive-height-responsive);
}
/*
::slotted styles for Edge and IE11; styling all slotted children needs
to be applied explicitly.
*/
.d2l-navigation-immersive-left ::slotted(*) > *,
.d2l-navigation-immersive-middle ::slotted(*) > *,
.d2l-navigation-immersive-right ::slotted(*) > * {
height: var(--d2l-navigation-immersive-height-main);
}
.d2l-navigation-immersive-spacing {
height: calc(var(--d2l-navigation-immersive-height-responsive) + 5px);
}
Expand All @@ -184,98 +153,87 @@ class D2LNavigationImmsersive extends DirMixin(PolymerElement) {
padding: 0 18px;
}
}
`];
}

</style>
<div class="d2l-navigiation-immersive-fixed">
<d2l-navigation>
<div class="d2l-navigation-immersive-margin">
<div class="d2l-navigation-immersive-container">
<div class="d2l-navigation-immersive-left">
<slot name="left">
<d2l-navigation-link-back text="[[backLinkText]]" href="[[backLinkHref]]"></d2l-navigation-link-back>
</slot>
</div>
<div class="d2l-navigation-immersive-middle d2l-navigation-immersive-middle-no-right-border">
<div class="d2l-navigation-immersive-middle-observer">
<slot name="middle"></slot>
</div>
</div>
<div class="d2l-navigation-immersive-right">
<div class="d2l-navigation-immersive-right-observer">
<slot name="right"></slot>
</div>
</div>
</div>
</div>
</d2l-navigation>
</div>
<div class="d2l-navigation-immersive-spacing"></div>
`;
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`
<div class="d2l-navigiation-immersive-fixed">
<d2l-navigation>
<div class="d2l-navigation-immersive-margin">
<div class="d2l-navigation-immersive-container">
<div class="d2l-navigation-immersive-left d2l-body-compact">
<slot name="left">
<d2l-navigation-link-back text="${this.backLinkText}" href="${this.backLinkHref}"></d2l-navigation-link-back>
</slot>
</div>
<div class="${classMap(middleContainerClasses)}">
<div class="d2l-navigation-immersive-middle-observer">
<slot name="middle"></slot>
</div>
</div>
<div class="d2l-navigation-immersive-right"><div class="d2l-navigation-immersive-right-observer"><slot name="right"></slot></div></div>
</div>
</div>
</d2l-navigation>
</div>
<div class="d2l-navigation-immersive-spacing"></div>
`;
}

_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);
35 changes: 15 additions & 20 deletions d2l-navigation-main-footer.js
View file
Original file line number Diff line number Diff line change
@@ -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}
<style>
:host {
border-top: 1px solid rgba(124,134,149,0.18);
border-bottom: 1px solid rgba(124,134,149,0.18);
display: block;
}
</style>
render() {
return html`
<div class="d2l-navigation-centerer">
<div class="d2l-navigation-gutters">
<slot name="main"></slot>
</div>
</div>
`;
template.setAttribute('strip-whitespace', '');
return template;
}

}
customElements.define('d2l-navigation-main-footer', D2LNavigationMainFooter);
customElements.define('d2l-navigation-main-footer', NavigationMainFooter);
Loading

0 comments on commit 590974a

Please sign in to comment.