/*
* Copyright (C) 2022 Huawei Device Co., Ltd.
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { BaseElement, element } from '../BaseElement';
import { replacePlaceholders } from '../utils/Template';
let css = `
`;
const initHtmlStyle = (padding: string, width: string): string => {
return replacePlaceholders(css, padding, width);
};
@element('lit-drawer')
export class LitDrawer extends BaseElement {
static get observedAttributes(): string[] {
return [
'drawer-title',
'visible',
'placement',
'mask',
'mask-closable',
'closeable',
'content-padding',
'content-width',
];
}
initHtml(): string {
return `
${initHtmlStyle(this.contentPadding, this.contentWidth)}
`;
}
get contentWidth(): string {
return this.getAttribute('content-width') || '400px';
}
set contentWidth(value) {
this.shadowRoot!.querySelector('.drawer')!.style.width = value;
this.setAttribute('content-width', value);
}
get contentPadding(): string {
return this.getAttribute('content-padding') || '20px';
}
set contentPadding(value) {
this.shadowRoot!.querySelector('slot')!.style.padding = value;
this.setAttribute('content-padding', value);
}
get placement(): string | null {
return this.getAttribute('placement');
}
set placement(value: unknown) {
// @ts-ignore
this.setAttribute('placement', value);
}
get drawerTitle(): string {
return this.getAttribute('drawer-title') || '';
}
set drawerTitle(value) {
this.shadowRoot!.querySelector('#drawer-tittle-text')!.textContent = value;
this.setAttribute('drawer-title', value);
}
get visible(): boolean {
return this.getAttribute('visible') !== null;
}
set visible(value: unknown) {
if (value) {
// @ts-ignore
this.setAttribute('visible', value);
} else {
this.removeAttribute('visible');
}
}
get mask(): boolean {
return this.getAttribute('mask') !== null;
}
set mask(value) {
if (value) {
this.setAttribute('mask', '');
} else {
this.removeAttribute('mask');
}
}
get maskCloseable(): boolean {
return this.getAttribute('mask-closeable') !== null;
}
set maskCloseable(value) {
if (value) {
this.setAttribute('mask-closeable', '');
} else {
this.removeAttribute('mask-closeable');
}
}
get closeable(): boolean {
return this.getAttribute('closeable') !== null;
}
set closeable(value) {
if (value) {
this.setAttribute('closeable', '');
} else {
this.removeAttribute('closeable');
}
}
//当 custom element首次被插入文档DOM时，被调用。
initElements(): void {
let bg: HTMLDivElement | null = this.shadowRoot!.querySelector('.bg');
if (this.maskCloseable) {
bg!.onclick = (e: unknown): void => {
// @ts-ignore
e.stopPropagation();
this.visible = false; // @ts-ignore
this.dispatchEvent(new CustomEvent('onClose', e));
};
}
if (this.closeable) {
// @ts-ignore
(this.shadowRoot!.querySelector('.close-icon') as unknown).onclick = (e: unknown): void => {
this.visible = false; // @ts-ignore
this.dispatchEvent(new CustomEvent('onClose', e));
};
}
}
set onClose(fn: unknown) {
// @ts-ignore
this.addEventListener('onClose', fn);
}
//当 custom element从文档DOM中删除时，被调用。
disconnectedCallback(): void {}
//当 custom element被移动到新的文档时，被调用。
adoptedCallback(): void {}
//当 custom element增加、删除、修改自身属性时，被调用。
attributeChangedCallback(name: string, oldValue: string, newValue: string): void {
if (this.mask) {
if (name === 'visible') {
if (newValue !== null) {
this.style.pointerEvents = 'all';
} else {
this.style.pointerEvents = 'none';
}
} else if (name === 'placement') {
if (newValue === 'bottom') {
let el = this.shadowRoot!.querySelector('.drawer');
}
}
}
}
}
if (!customElements.get('lit-drawer')) {
customElements.define('lit-drawer', LitDrawer);
}