mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
docs: add expiry to the top banner (#57981)
Adding an expiry date to the banner similarly to aio so we can automatically hide it when we reach a certain date. PR Close #57981
This commit is contained in:
parent
fbd5579a68
commit
bb747f144a
1 changed files with 20 additions and 3 deletions
|
|
@ -27,15 +27,21 @@ export class TopLevelBannerComponent implements OnInit {
|
|||
link = input<string>();
|
||||
// Text content to be displayed in the banner.
|
||||
text = input.required<string>();
|
||||
|
||||
// Whether the user has closed the banner.
|
||||
// Optional expiry date. Setting the default expiry as a future date so we
|
||||
// don't have to deal with undefined signal values.
|
||||
expiry = input(new Date('3000-01-01'), {transform: parseDate});
|
||||
// Whether the user has closed the banner or the survey has expired.
|
||||
hasClosed = signal<boolean>(false);
|
||||
|
||||
ngOnInit(): void {
|
||||
const expired = Date.now() > this.expiry().getTime();
|
||||
|
||||
// Needs to be in a try/catch, because some browsers will
|
||||
// throw when using `localStorage` in private mode.
|
||||
try {
|
||||
this.hasClosed.set(this.localStorage?.getItem(this.getBannerStorageKey()) === 'true');
|
||||
this.hasClosed.set(
|
||||
this.localStorage?.getItem(this.getBannerStorageKey()) === 'true' || expired,
|
||||
);
|
||||
} catch {
|
||||
this.hasClosed.set(false);
|
||||
}
|
||||
|
|
@ -50,3 +56,14 @@ export class TopLevelBannerComponent implements OnInit {
|
|||
return `${STORAGE_KEY_PREFIX}${this.id()}`;
|
||||
}
|
||||
}
|
||||
|
||||
const parseDate = (inputDate: string | Date): Date => {
|
||||
if (inputDate instanceof Date) {
|
||||
return inputDate;
|
||||
}
|
||||
const outputDate = new Date(inputDate);
|
||||
if (isNaN(outputDate.getTime())) {
|
||||
throw new Error(`Invalid date string: ${inputDate}`);
|
||||
}
|
||||
return outputDate;
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in a new issue