69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
|
// (C) Copyright 2015 Moodle Pty 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 { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Directive to observe mutations on some attributes and propagate them inside.
|
||
|
|
* Current supported attributes: ion-button.aria-label
|
||
|
|
*
|
||
|
|
* This is necessary in order to update some attributes that are not reactive, for example aria-label.
|
||
|
|
*
|
||
|
|
* @see https://github.com/ionic-team/ionic-framework/issues/21534
|
||
|
|
*/
|
||
|
|
@Directive({
|
||
|
|
selector: 'ion-button',
|
||
|
|
})
|
||
|
|
export class CoreUpdateNonReactiveAttributesDirective implements OnInit, OnDestroy {
|
||
|
|
|
||
|
|
protected element: HTMLIonButtonElement;
|
||
|
|
protected mutationObserver: MutationObserver;
|
||
|
|
|
||
|
|
constructor(element: ElementRef<HTMLIonButtonElement>) {
|
||
|
|
this.element = element.nativeElement;
|
||
|
|
this.mutationObserver = new MutationObserver(() => {
|
||
|
|
const ariaLabel = this.element.getAttribute('aria-label');
|
||
|
|
if (!ariaLabel) {
|
||
|
|
// Aria label unset by ionButton component (when first created).
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
// Propagate label to button.
|
||
|
|
const button = this.element.shadowRoot?.querySelector('button');
|
||
|
|
button?.setAttribute('aria-label', ariaLabel);
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @inheritdoc
|
||
|
|
*/
|
||
|
|
async ngOnInit(): Promise<void> {
|
||
|
|
await this.element.componentOnReady();
|
||
|
|
|
||
|
|
if (!this.element.getAttribute('aria-label')) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
this.mutationObserver.observe(this.element, { attributes: true, attributeFilter: ['aria-label'] });
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* @inheritdoc
|
||
|
|
*/
|
||
|
|
ngOnDestroy(): void {
|
||
|
|
this.mutationObserver.disconnect();
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|