Skip to content

Commit 197de9a

Browse files
shadyvdshadyvd
committed
feat(mdc-drawer): component for "off screen" display
Sidebar component that can be hidden/displayed using a control element Signed-off-by:Vish Desai <shadyvd@hotmail.com>
1 parent f73652b commit 197de9a

File tree

8 files changed

+285
-0
lines changed

8 files changed

+285
-0
lines changed

‎packages/ember-mdc-web/addon/components/mdc-drawer/content/index.hbs

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
<div class='mdc-drawer__content' ...attributes>
2+
{{yield}}
3+
</div>

‎packages/ember-mdc-web/addon/components/mdc-drawer/content/index.js

+36
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
import Component from '@glimmer/component';
2+
import debugLogger from 'ember-debug-logger';
3+
4+
export default class MdcDrawerContentComponent extends Component {
5+
// #region Accessed Services
6+
// #endregion
7+
8+
// #region Tracked Attributes
9+
// #endregion
10+
11+
// #region Constructor
12+
constructor() {
13+
super(...arguments);
14+
this.#debug(`constructor`);
15+
}
16+
// #endregion
17+
18+
// #region Lifecycle Hooks
19+
// #endregion
20+
21+
// #region DOM Event Handlers
22+
// #endregion
23+
24+
// #region Computed Properties
25+
// #endregion
26+
27+
// #region Private Methods
28+
// #endregion
29+
30+
// #region Default Sub-components
31+
// #endregion
32+
33+
// #region Private Attributes
34+
#debug = debugLogger('component:mdc-drawer-content');
35+
// #endregion
36+
}

‎packages/ember-mdc-web/addon/components/mdc-drawer/header/index.hbs

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<div
2+
class='mdc-drawer__header'
3+
{{has-class-if @palette this.paletteStyle}}
4+
...attributes
5+
>
6+
{{#if (or (has-block 'headline') (has-block 'subheadline'))}}
7+
<article class='mdc-drawer__header--article'>
8+
{{#if (has-block 'headline')}}
9+
{{yield (component this.headlineComponent) to='headline'}}
10+
{{/if}}
11+
{{#if (has-block 'subheadline')}}
12+
{{yield (component this.subHeadlineComponent) to='subheadline'}}
13+
{{/if}}
14+
</article>
15+
{{/if}}
16+
</div>

‎packages/ember-mdc-web/addon/components/mdc-drawer/header/index.js

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import Component from '@glimmer/component';
2+
import debugLogger from 'ember-debug-logger';
3+
4+
export default class MdcDrawerHeaderComponent extends Component {
5+
// #region Accessed Services
6+
// #endregion
7+
8+
// #region Tracked Attributes
9+
// #endregion
10+
11+
// #region Constructor
12+
constructor() {
13+
super(...arguments);
14+
this.#debug(`constructor`);
15+
}
16+
// #endregion
17+
18+
// #region Lifecycle Hooks
19+
// #endregion
20+
21+
// #region DOM Event Handlers
22+
// #endregion
23+
24+
// #region Computed Properties
25+
get paletteStyle() {
26+
if (!this?.args?.palette) return null;
27+
28+
return `mdc-theme--${this?.args?.palette}-bg mdc-theme--on-${this?.args?.palette}`;
29+
}
30+
31+
get headlineComponent() {
32+
return this?._getComputedSubcomponent?.('headline');
33+
}
34+
35+
get subHeadlineComponent() {
36+
return this?._getComputedSubcomponent?.('subheadline');
37+
}
38+
// #endregion
39+
40+
// #region Private Methods
41+
_getComputedSubcomponent(componentName) {
42+
const subComponent =
43+
this?.args?.customComponents?.[componentName] ??
44+
this.#subComponents?.[componentName];
45+
this.#debug(`${componentName}-component`, subComponent);
46+
47+
return subComponent;
48+
}
49+
// //#endregion
50+
51+
// #region Default Sub-components
52+
#subComponents = {
53+
headline: 'mdc-headline',
54+
subheadline: 'mdc-sub-headline'
55+
};
56+
// #endregion
57+
58+
// #region Private Attributes
59+
#debug = debugLogger('component:mdc-drawer-header');
60+
// #endregion
61+
}

‎packages/ember-mdc-web/addon/components/mdc-drawer/index.hbs

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<aside
2+
class='mdc-drawer'
3+
{{has-class-if @modal 'mdc-drawer--modal' 'mdc-drawer--dismissible'}}
4+
{{has-class-if (or @locked this.isOpen) 'mdc-drawer--open'}}
5+
{{on-args-change this.registerWithControl @controlElement}}
6+
{{not-on 'click' this.onClickOutside}}
7+
{{store-element this.storeElement}}
8+
...attributes
9+
>
10+
{{#if (has-block 'header')}}
11+
{{yield (component this.headerComponent palette=@palette) to='header'}}
12+
<MdcDivider />
13+
{{/if}}
14+
{{#if (has-block 'content')}}
15+
{{yield (component this.contentComponent) to='content'}}
16+
{{/if}}
17+
</aside>

‎packages/ember-mdc-web/addon/components/mdc-drawer/index.js

+146
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,146 @@
1+
import Component from '@glimmer/component';
2+
import debugLogger from 'ember-debug-logger';
3+
4+
import { action } from '@ember/object';
5+
import { tracked } from '@glimmer/tracking';
6+
7+
export default class MdcDrawerComponent extends Component {
8+
// #region Accessed Services
9+
// #endregion
10+
11+
// #region Tracked Attributes
12+
@tracked isOpen = false;
13+
// #endregion
14+
15+
// #region Constructor
16+
constructor() {
17+
super(...arguments);
18+
this.#debug(`constructor`);
19+
20+
this.#controls.open = this?._open;
21+
this.#controls.close = this?._close;
22+
this.#controls.toggle = this?._toggle;
23+
this.#controls.name = this?.args?.name ?? 'mdc-sidebar';
24+
25+
if (this?.args?.open || this?.args?.locked) this.isOpen = true;
26+
}
27+
// #endregion
28+
29+
// #region Lifecycle Hooks
30+
willDestroy() {
31+
this.#debug(`willDestroy`);
32+
33+
if (this?.args?.controlElement) {
34+
this.#debug(`willDestroy: unregistering with control`);
35+
this?.args?.controlElement?.sidebarControls?.unregisterSidebar?.(
36+
this.#element
37+
);
38+
}
39+
40+
super.willDestroy(...arguments);
41+
}
42+
// #endregion
43+
44+
// #region DOM Event Handlers
45+
@action
46+
onClickOutside(event) {
47+
this.#debug(`onClickOutside: `, event);
48+
49+
const isEventOnControl =
50+
event.target === this?.args?.controlElement ||
51+
this?.args?.controlElement?.contains?.(event.target);
52+
53+
if (isEventOnControl) {
54+
this.#debug(
55+
`onClickOutside::isEventOnControl: ${isEventOnControl}`
56+
);
57+
return;
58+
}
59+
60+
this?._close?.();
61+
}
62+
63+
@action
64+
storeElement(element) {
65+
this.#debug(`storeElement: `, element);
66+
this.#element = element;
67+
68+
this?.registerWithControl?.();
69+
}
70+
71+
@action
72+
registerWithControl() {
73+
this.#debug(`registerWithControl`);
74+
75+
if (!this.#element) {
76+
this.#debug(`registerWithControl: element not in dom. aborting...`);
77+
return;
78+
}
79+
80+
this?.args?.controlElement?.sidebarControls?.registerSidebar?.(
81+
this.#element,
82+
this.#controls
83+
);
84+
}
85+
// #endregion
86+
87+
// #region Computed Properties
88+
get headerComponent() {
89+
return this?._getComputedSubcomponent?.('header');
90+
}
91+
92+
get contentComponent() {
93+
return this?._getComputedSubcomponent?.('content');
94+
}
95+
// #endregion
96+
97+
// #region Private Methods
98+
@action
99+
_open() {
100+
this.#debug(`_open`);
101+
this.isOpen = true;
102+
}
103+
104+
@action
105+
_close() {
106+
this.#debug(`_close`);
107+
108+
if (this?.args?.locked) {
109+
this.#debug(`_close: sidebar is locked. aborting...`);
110+
return;
111+
}
112+
113+
this.isOpen = false;
114+
}
115+
116+
@action
117+
_toggle() {
118+
this.#debug(`_toggle`);
119+
if (this?.isOpen) this?._close?.();
120+
else this?._open?.();
121+
}
122+
123+
_getComputedSubcomponent(componentName) {
124+
const subComponent =
125+
this?.args?.customComponents?.[componentName] ??
126+
this.#subComponents?.[componentName];
127+
this.#debug(`${componentName}-component`, subComponent);
128+
129+
return subComponent;
130+
}
131+
// #endregion
132+
133+
// #region Default Sub-components
134+
#subComponents = {
135+
header: 'mdc-drawer/header',
136+
content: 'mdc-drawer/content'
137+
};
138+
// #endregion
139+
140+
// #region Private Attributes
141+
#debug = debugLogger('component:mdc-drawer');
142+
#element = null;
143+
144+
#controls = {};
145+
// #endregion
146+
}

‎packages/ember-mdc-web/addon/styles/emdc-drawer.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mdc-drawer__header {
2+
padding-top: 0.5rem
3+
}

‎packages/ember-mdc-web/tailwindcss/emdc-drawer.css

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
.mdc-drawer__header {
2+
@apply pt-2;
3+
}

0 commit comments

Comments
 (0)