chore: cleanup a11y and add demo page

apps/toolbox/src/pages/root-layout.ts

@@ -0,0 +1,122 @@
+import { EventData, Page, Observable, RootLayoutOptions, getRootLayout, StackLayout, View } from '@nativescript/core';
+import { Enums } from '@nativescript/core';
+
+export function navigatingTo(args: EventData) {
+	const page = <Page>args.object;
+	page.bindingContext = new BoxShadowModel();
+}
+
+export class BoxShadowModel extends Observable {
+	popupViews: { view: View; options: RootLayoutOptions; extra?: any }[] = [
+		{
+			view: this.getPopup('#EA5936', 110, -30),
+			options: {
+				shadeCover: {
+					color: '#FFF',
+					opacity: 0.7,
+					tapToClose: true,
+				},
+				animation: {
+					enterFrom: {
+						opacity: 0,
+						translateY: 500,
+						duration: 500,
+					},
+					exitTo: {
+						opacity: 0,
+						duration: 300,
+					},
+				},
+			},
+			extra: {
+				customExitAnimation: {
+					opacity: 0,
+					translate: { x: 0, y: -500 },
+				},
+			},
+		},
+		{
+			view: this.getPopup('#232652', 110, 0),
+			options: {
+				shadeCover: {
+					color: 'pink',
+					opacity: 0.7,
+					tapToClose: false,
+					animation: {
+						exitTo: {
+							scaleX: 0,
+						},
+					},
+				},
+			},
+		},
+		{
+			view: this.getPopup('#E1E4E8', 110, 30),
+			options: {
+				shadeCover: {
+					color: '#ffffdd',
+					opacity: 0.5,
+					tapToClose: true,
+					ignoreShadeRestore: true,
+					animation: {
+						enterFrom: {
+							translateX: -1000,
+							duration: 500,
+						},
+						exitTo: {
+							rotate: -180,
+							duration: 500,
+						},
+					},
+				},
+				animation: {
+					enterFrom: {
+						rotate: 180,
+						duration: 300,
+					},
+					exitTo: {
+						rotate: 180,
+						opacity: 0,
+						duration: 300,
+						curve: Enums.AnimationCurve.spring,
+					},
+				},
+			},
+		},
+	];
+
+	open(args: EventData): void {
+		getRootLayout()
+			.open(this.popupViews[(<any>args.object).popupIndex].view, this.popupViews[(<any>args.object).popupIndex].options)
+			.catch((ex) => console.error(ex));
+	}
+
+	bringToFront(args: EventData): void {
+		getRootLayout()
+			.bringToFront(this.popupViews[(<any>args.object).popupIndex].view, true)
+			.catch((ex) => console.error(ex));
+	}
+
+	close(args: EventData): void {
+		if (this.popupViews[(<any>args.object).popupIndex]?.extra?.customExitAnimation) {
+			getRootLayout()
+				.close(this.popupViews[(<any>args.object).popupIndex].view, this.popupViews[(<any>args.object).popupIndex].extra.customExitAnimation)
+				.catch((ex) => console.error(ex));
+		} else {
+			getRootLayout()
+				.close(this.popupViews[(<any>args.object).popupIndex].view)
+				.catch((ex) => console.error(ex));
+		}
+	}
+
+	getPopup(color: string, size: number, offset: number): View {
+		const layout = new StackLayout();
+		layout.height = size;
+		layout.width = size;
+		layout.marginTop = offset;
+		layout.marginLeft = offset;
+		layout.backgroundColor = color;
+		layout.borderRadius = 10;
+		return layout;
+	}
+}