EVOgeek
/
Vmeda.Online
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3947 progressbar: Fix progress bar strict types

main
Pau Ferrer Ocaña 2023-11-16 15:22:23 +01:00
parent 6569547cdd
commit 7a4bf21d3c
2 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/core/components/progress-bar/core-progress-bar.html
View File

@ -1,6 +1,6 @@
<ng-container *ngIf="progress >= 0"> <ng-container *ngIf="progressNumber >= 0">
<progress max="100" [value]="progress" role="progressbar" [attr.aria-valuenow]="progress" [attr.aria-valuetext]="progressBarValueText" <progress max="100" [value]="progressNumber" role="progressbar" [attr.aria-valuenow]="progressNumber"
[attr.aria-describedby]="ariaDescribedBy"> [attr.aria-valuetext]="progressBarValueText" [attr.aria-describedby]="ariaDescribedBy">
</progress> </progress>
<div class="core-progress-text"> <div class="core-progress-text">
<span class="sr-only" *ngIf="a11yText">{{ a11yText | translate }}</span> <span class="sr-only" *ngIf="a11yText">{{ a11yText | translate }}</span>
@ -8,4 +8,4 @@
</div> </div>
</ng-container> </ng-container>
<ion-progress-bar *ngIf="progress < 0" [color]="color" type="indeterminate"></ion-progress-bar> <ion-progress-bar *ngIf="progressNumber < 0" [color]="color" type="indeterminate"></ion-progress-bar>

60
src/core/components/progress-bar/progress-bar.ts
View File

@ -12,7 +12,7 @@
// See the License for the specific language governing permissions and // See the License for the specific language governing permissions and
// limitations under the License. // limitations under the License.
import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy, ElementRef, OnInit } from '@angular/core'; import { Component, Input, OnChanges, SimpleChange, ChangeDetectionStrategy, ElementRef } from '@angular/core';
import { SafeStyle } from '@angular/platform-browser'; import { SafeStyle } from '@angular/platform-browser';
import { DomSanitizer, Translate } from '@singletons'; import { DomSanitizer, Translate } from '@singletons';
@ -28,7 +28,7 @@ import { DomSanitizer, Translate } from '@singletons';
styleUrls: ['progress-bar.scss'], styleUrls: ['progress-bar.scss'],
changeDetection: ChangeDetectionStrategy.OnPush, changeDetection: ChangeDetectionStrategy.OnPush,
}) })
export class CoreProgressBarComponent implements OnInit, OnChanges { export class CoreProgressBarComponent implements OnChanges {
@Input() progress!: number | string; // Percentage from 0 to 100. Negative number will show an indeterminate progress bar. @Input() progress!: number | string; // Percentage from 0 to 100. Negative number will show an indeterminate progress bar.
@Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used. @Input() text?: string; // Percentage in text to be shown at the right. If not defined, progress will be used.
@ -38,6 +38,7 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
width?: SafeStyle; width?: SafeStyle;
progressBarValueText?: string; progressBarValueText?: string;
progressNumber = 0;
protected textSupplied = false; protected textSupplied = false;
protected element: HTMLElement; protected element: HTMLElement;
@ -46,21 +47,14 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
this.element = elementRef.nativeElement; this.element = elementRef.nativeElement;
} }
/**
* @inheritdoc
*/
ngOnInit(): void {
if (this.color) {
this.element.classList.add('ion-color', 'ion-color-' + this.color);
}
}
/** /**
* @inheritdoc * @inheritdoc
*/ */
ngOnChanges(changes: { [name: string]: SimpleChange }): void { ngOnChanges(changes: { [name: string]: SimpleChange }): void {
if (changes.color) { if (changes.color) {
this.element.classList.remove('ion-color', 'ion-color-' + changes.color.previousValue); if (changes.color.previousValue) {
this.element.classList.remove('ion-color', 'ion-color-' + changes.color.previousValue);
}
if (changes.color.currentValue) { if (changes.color.currentValue) {
this.element.classList.add('ion-color', 'ion-color-' + changes.color.currentValue); this.element.classList.add('ion-color', 'ion-color-' + changes.color.currentValue);
} }
@ -73,24 +67,7 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
if (changes.progress) { if (changes.progress) {
// Progress has changed. // Progress has changed.
if (typeof this.progress == 'string') { this.updateProgress();
this.progress = parseInt(this.progress, 10);
}
if (this.progress < 0 || isNaN(this.progress)) {
this.progress = -1;
}
if (this.progress != -1) {
// Remove decimals.
this.progress = Math.floor(this.progress);
if (!this.textSupplied) {
this.text = Translate.instant('core.percentagenumber', { $a: this.progress });
}
this.width = DomSanitizer.bypassSecurityTrustStyle(this.progress + '%');
}
} }
if (changes.text || changes.progress || changes.a11yText) { if (changes.text || changes.progress || changes.a11yText) {
@ -98,4 +75,27 @@ export class CoreProgressBarComponent implements OnInit, OnChanges {
} }
} }
/**
* Update progress because it has changed.
*/
protected updateProgress(): void {
// Progress has changed.
this.progressNumber = Number(this.progress);
if (this.progressNumber < 0 || isNaN(this.progressNumber)) {
this.progressNumber = -1;
return;
}
// Remove decimals.
this.progressNumber = Math.floor(this.progressNumber);
if (!this.textSupplied) {
this.text = Translate.instant('core.percentagenumber', { $a: this.progressNumber });
}
this.width = DomSanitizer.bypassSecurityTrustStyle(this.progressNumber + '%');
}
} }