Skip to content

Commit

Permalink
feat: improved doc, resizable observer on root element and slight dis…
Browse files Browse the repository at this point in the history
…play improvements (#82)
  • Loading branch information
quentinderoubaix authored Aug 17, 2023
1 parent 44be31d commit 4c71c4a
Show file tree
Hide file tree
Showing 35 changed files with 188 additions and 265 deletions.
2 changes: 1 addition & 1 deletion angular/demo/src/app/samples/alert/icon.route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ export default class IconAlertComponent {
providers: [SlotDirective],
template: `
<ng-template #iconDemo let-state="state" let-widget="widget">
<span class="d-flex align-items-center svg icon-20 me-1" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
<span class="d-flex align-items-center me-2" [innerHTML]="sanitizer.bypassSecurityTrustHtml(typeIcon[state.type])"> </span>
<div class="d-flex w-100 alert-body">
<ng-template [auSlot]="state.slotDefault" [auSlotProps]="{widget, state}"></ng-template>
<button
Expand Down
6 changes: 3 additions & 3 deletions angular/demo/src/app/samples/pagination/custom.route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,15 +10,15 @@ const FILTER_PAG_REGEX = /[^0-9]/g;
imports: [AgnosUIAngularModule, NgIf],
template: `
<p>A pagination with customized links:</p>
<nav au-pagination [collectionSize]="70" [(page)]="customPage" ariaLabel="Page navigation with customized links">
<nav au-pagination [collectionSize]="60" [(page)]="customPage" ariaLabel="Page navigation with customized links">
<ng-template auPaginationPrevious>Prev</ng-template>
<ng-template auPaginationNext>Next</ng-template>
<ng-template auPaginationNumber let-displayedPage="displayedPage">{{ getPageSymbol(displayedPage) }}</ng-template>
</nav>
<hr />
<p>A pagination with customized pages:</p>
<nav au-pagination [collectionSize]="70" [(page)]="customPage" ariaLabel="Page navigation with customized pages">
<nav au-pagination [collectionSize]="60" [(page)]="customPage" ariaLabel="Page navigation with customized pages">
<ng-template auPaginationPages let-widget="widget" let-state="state">
<li class="au-custom-pages-item" *ngIf="state.pages.length > 0">
<div class="mb-3 d-flex flex-nowrap px-2">
Expand Down Expand Up @@ -48,7 +48,7 @@ export default class PaginationComponent {
customPage = 4;

getPageSymbol(displayedPage: number) {
return ['A', 'B', 'C', 'D', 'E', 'F', 'G'][displayedPage - 1];
return ['A', 'B', 'C', 'D', 'E', 'F'][displayedPage - 1];
}

formatInput(input: HTMLInputElement) {
Expand Down
8 changes: 4 additions & 4 deletions angular/demo/src/app/samples/pagination/default.route.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,20 +6,20 @@ import {Component} from '@angular/core';
imports: [AgnosUIAngularModule],
template: `
<h5>Default pagination:</h5>
<nav au-pagination [(page)]="page" [collectionSize]="70"></nav>
<nav au-pagination [(page)]="page" [collectionSize]="60"></nav>
<h5>No direction links:</h5>
<nav au-pagination [collectionSize]="70" [(page)]="page" [directionLinks]="false"></nav>
<nav au-pagination [collectionSize]="60" [(page)]="page" [directionLinks]="false"></nav>
<h5>With boundary links:</h5>
<nav au-pagination [collectionSize]="70" [(page)]="page" [boundaryLinks]="true"></nav>
<nav au-pagination [collectionSize]="60" [(page)]="page" [boundaryLinks]="true"></nav>
<div class="mb-3">
Current page: <span id="defaultPage">{{ page }}</span>
</div>
<h5>Disabled pagination:</h5>
<nav au-pagination [collectionSize]="70" [(page)]="pageAlone" ariaLabel="Disabled pagination" [disabled]="true"></nav>
<nav au-pagination [collectionSize]="60" [(page)]="pageAlone" ariaLabel="Disabled pagination" [disabled]="true"></nav>
`,
})
export default class DefaultPaginationComponent {
Expand Down
4 changes: 3 additions & 1 deletion angular/demo/src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<app-root id="root"></app-root>
<div id="root">
<app-root></app-root>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion angular/lib/src/lib/alert/alert.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ const defaultConfig: Partial<AlertProps> = {
export class AlertComponent implements OnChanges, AfterContentChecked {
/**
* Type of the alert.
* The are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
* There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
*/
@Input()
type: string | undefined;
Expand Down
2 changes: 1 addition & 1 deletion core/lib/alert.ts
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export interface AlertCommonPropsAndState {

/**
* Type of the alert.
* The are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
* There are the following types: 'success', 'info', 'warning', 'danger', 'primary', 'secondary', 'light' and 'dark'.
*/
type: string;

Expand Down
65 changes: 48 additions & 17 deletions demo/src/lib/layout/Sample.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,8 @@
*/
export let sample: SampleInfo;
export let height: number | undefined = undefined;
export let noresize = false;
export let height: number;
/**
* Object to be stringified and sent in the parameter of the iframe url.
Expand Down Expand Up @@ -82,13 +83,13 @@
const baseId = `sample-${id}`;
$: sampleBaseUrl = `${$pathToRoot$}${$selectedFramework$}/samples/#/${path}`;
$: sampleUrl = sampleBaseUrl + (urlParameters ? `#${JSON.stringify(urlParameters)}` : '');
$: sampleBaseUrl, (iframeLoaded = false);
let iframeLoaded = false;
let iframeLoaded = true;
let resizeObserver: ResizeObserver;
let iframeHeight = 50;
function onLoad(event: Event) {
iframeLoaded = true;
let iframeHeight = 0;
const setupObserver = (iframe: HTMLIFrameElement) => {
if (!resizeObserver) {
resizeObserver = new ResizeObserver((entries) => {
if (entries.length === 1) {
Expand All @@ -97,16 +98,40 @@
});
}
resizeObserver.disconnect();
if (event.target instanceof HTMLIFrameElement && event.target.contentDocument) {
resizeObserver.observe(event.target.contentDocument.body);
const root = iframe.contentDocument?.getElementById('root');
if (root) {
resizeObserver.observe(root);
}
};
const updateLoaded = (iframe: HTMLIFrameElement, baseSrc: string) => {
const update = (baseSrc: string) => {
if (!iframe.contentWindow?.location?.href?.startsWith(baseSrc)) {
iframeLoaded = false;
}
};
update(baseSrc);
// the onLoad event is never called when loading a tab that was discarded through Chrome Tab Discarding
// so we use the first execution of this directive to check if the iframe is loaded and if we can setup a resize observer
if (iframe.contentDocument?.getElementById('root')) {
setupObserver(iframe);
}
return {
update,
};
};
function onLoad(event: Event) {
iframeLoaded = true;
if (event.target instanceof HTMLIFrameElement) {
setupObserver(event.target);
}
}
onDestroy(() => {
resizeObserver?.disconnect();
});
</script>

<div class="my-4 py-2 px-0 px-sm-3">
<div class="mb-4 py-2 px-0 px-sm-3">
<div class="btn-toolbar d-flex align-items-center" role="toolbar" aria-label="Toolbar with button groups">
{#if showCodeButton}
<div class="btn-group btn-group-sm me-2" role="group" aria-label="Toggle code">
Expand Down Expand Up @@ -136,25 +161,31 @@
</div>
<div class="row">
{#if showCode}
<div class="col-auto my-2">
<div class="col-12 my-2">
<Lazy component={() => import('./Code.svelte')} {code} {fileName}>
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</Lazy>
</div>
{/if}
<div class="col-sm-12">
<div class="col-sm-12 position-relative mt-3">
{#if !iframeLoaded}
<div class="position-relative">
<div class="position-absolute start-50 translate-middle-x iframeSpinner">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
<div class="position-absolute top-50 start-50 translate-middle iframeSpinner">
<div class="spinner-border text-primary" role="status">
<span class="visually-hidden">Loading...</span>
</div>
</div>
{/if}
<iframe class="demo-sample border rounded mt-3" use:iframeSrc={sampleUrl} {title} height={height ?? iframeHeight} on:load={onLoad} />
<iframe
class="demo-sample border rounded"
use:iframeSrc={sampleUrl}
{title}
height={noresize ? height : iframeHeight || height}
use:updateLoaded={sampleBaseUrl}
on:load={onLoad}
loading="lazy"
/>
</div>
</div>
</div>
Expand Down
5 changes: 3 additions & 2 deletions demo/src/lib/layout/playground/Playground.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -10,14 +10,15 @@
export let config: Record<string, any>;
export let doc: WidgetDoc;
export let types: Record<string, string> = {};
export let height: number | undefined = undefined;
export let height = 100;
export let noresize = false;
const {values$, sampleParameters$, help$} = createPlayground({config, types, doc});
</script>

<div class="row">
<div class="col">
<Sample title="Configuration" {sample} urlParameters={$sampleParameters$} showCodeButton={false} {height} />
<Sample title="Configuration" {sample} urlParameters={$sampleParameters$} showCodeButton={false} {height} {noresize} />
</div>
</div>
<div class="row">
Expand Down
2 changes: 1 addition & 1 deletion demo/src/lib/layout/playground/PlaygroundLine.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
</script>

<tr>
<td class="align-middle"> <button class="btn btn-link align-middle" on:click={() => showHelp(key)}>{key}</button></td>
<td> <button class="btn btn-link align-middle" on:click={() => showHelp(key)}>{key}</button></td>
<PlaygroundValue {type} {defaultValue} api={config} placeholder={defaultValue} ariaLabel="property {key} config input" />
<PlaygroundValue {type} {defaultValue} api={prop} ariaLabel="property {key} value input" />
</tr>
Expand Down
4 changes: 1 addition & 3 deletions demo/src/lib/layout/playground/playground.ts
Original file line number Diff line number Diff line change
Expand Up @@ -137,9 +137,7 @@ export function createPlayground({config: defautConfig, types, doc}: PlaygroundP
sampleParameters$,
help$,
showHelp(key: string) {
helpKey$.update((helpKey) => {
return helpKey === key ? undefined : key;
});
helpKey$.update((helpKey) => (helpKey === key ? undefined : key));
},
};
setPlaygroundContext(api);
Expand Down
8 changes: 4 additions & 4 deletions demo/src/routes/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
</script>

<svelte:head>
<title>AgsnoUI - Home page</title>
<title>AgnosUI - Home page</title>
<meta name="description" content="Svelte demo app" />
</svelte:head>

Expand Down Expand Up @@ -42,13 +42,13 @@

<h4 class="text-center mt-4 mt-md-5">For a comprehensive understanding of AgnosUI's features and usage,<br />feel free to explore our demo</h4>
<div class="d-flex links d-flex justify-content-evenly">
<a href="angular/components/alert/examples" aria-label="link to angular examples" title="Angular">
<a href="angular/components/accordion/examples" aria-label="link to angular examples" title="Angular">
<Svg svg={angularLogo} className="framework-logo" />
</a>
<a href="react/components/alert/examples" aria-label="link to react examples" title="React">
<a href="react/components/accordion/examples" aria-label="link to react examples" title="React">
<Svg svg={reactLogo} className="framework-logo" />
</a>
<a href="svelte/components/alert/examples" aria-label="link to svelte examples" title="Svelte">
<a href="svelte/components/accordion/examples" aria-label="link to svelte examples" title="Svelte">
<Svg svg={sveteLogo} className="framework-logo" />
</a>
</div>
Expand Down
2 changes: 1 addition & 1 deletion demo/src/routes/[framework]/+layout.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@
</ul>
</nav>
</aside>
<div>
<div class="pb-4">
<slot />
</div>
</div>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,9 @@
</script>

<LinkHeading label="Default" id="default" level={2} />
<Sample title="Default example" sample={sampleDefault} />
<Sample title="Default example" sample={sampleDefault} height={395} />

<LinkHeading label="Accessibility" id="accessibility" level={2} />
<p>
The accordion properly sets up <strong>aria-controls</strong> and <strong>aria-expanded</strong> on the collapsable items.
</p>
4 changes: 0 additions & 4 deletions demo/src/routes/[framework]/components/alert/api/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,4 @@
import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
</script>

<svelte:head>
<title>Pagination API</title>
<meta name="description" content="Pagination API for " />
</svelte:head>
<ApiDoc doc={widgetDoc} defaultValues={getAlertDefaultConfig()} />
18 changes: 11 additions & 7 deletions demo/src/routes/[framework]/components/alert/examples/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,20 +1,24 @@
<script lang="ts">
import Sample from '../../../../../lib/layout/Sample.svelte';
import sampleGeneric from '@agnos-ui/samples/alert/generic';
import sampleConfig from '@agnos-ui/samples/alert/config';
import sampleIcon from '@agnos-ui/samples/alert/icon';
import sampleDynamic from '@agnos-ui/samples/alert/dynamic';
import LinkHeading from '$lib/link-heading/LinkHeading.svelte';
</script>

<LinkHeading label="Simple alert" id="default" level={2} />
<Sample title="Generic example" sample={sampleGeneric} />

<LinkHeading label="Configurable alert" id="config" level={2} />
<Sample title="Config example" sample={sampleConfig} />
<Sample title="Generic example" sample={sampleGeneric} height={627} />

<LinkHeading label="Customizable icon" id="custom" level={2} />
<Sample title="Customizable icon example" sample={sampleIcon} />
<Sample title="Customizable icon example" sample={sampleIcon} height={405} />

<LinkHeading label="Dynamic alert generation" id="dynamic" level={2} />
<Sample title="Dynamic generation example" sample={sampleDynamic} />
<p>This example showcases how an application would typically generate and handle dismissable alerts.</p>
<Sample title="Dynamic generation example" sample={sampleDynamic} height={113} />

<LinkHeading label="Accessibility" id="accessibility" level={2} />
<p>
The alert component implements the <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/alert_role" target="_blank"
>ARIA alert role</a
>.
</p>
4 changes: 0 additions & 4 deletions demo/src/routes/[framework]/components/modal/api/+page.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,4 @@
import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
</script>

<svelte:head>
<title>Modal API</title>
<meta name="description" content="" />
</svelte:head>
<ApiDoc doc={widgetDoc} defaultValues={getModalDefaultConfig()} />
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,13 @@
</script>

<LinkHeading label="Default modal" id="default" level={2} />
<Sample title="Default example" sample={sampleDefault} height={300} />
<Sample title="Default example" sample={sampleDefault} height={300} noresize />

<LinkHeading label="Modal stack" id="stack" level={2} />
<Sample title="Modal stack example" sample={sampleStack} height={400} />
<p>
It is possible to stack modals on top of each other. Note that for better User Experience, stacking modals should be avoided as much as possible.
</p>
<Sample title="Modal stack example" sample={sampleStack} height={400} noresize />

<LinkHeading label="Accessibility" id="accessibility" level={2} />
<p>TODO</p>
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,4 @@
import doc from '../../../../../../../core/dist/api.json?modal&extractApi';
</script>

<Playground {sample} config={getModalDefaultConfig()} height={250} {doc} />
<Playground {sample} config={getModalDefaultConfig()} height={250} noresize {doc} />
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,4 @@
import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
</script>

<svelte:head>
<title>Pagination API</title>
<meta name="description" content="Pagination API for " />
</svelte:head>
<ApiDoc doc={widgetDoc} defaultValues={getPaginationDefaultConfig()} />
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,11 @@
</script>

<LinkHeading label="Default pagination" id="default" level={2} />
<Sample title="Pagination example" sample={sampleDefault} />
<Sample title="Pagination example" sample={sampleDefault} height={419} />

<LinkHeading label="Customization" id="custom" level={2} />
<Sample title="Custom Pagination example" sample={sampleCustom} />
<p>The pagination widget is fully customizable, from the page numbers to the arrows.</p>
<Sample title="Custom Pagination example" sample={sampleCustom} height={256} />

<LinkHeading label="Accessibility" id="accessibility" level={2} />
<p>TODO</p>
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,4 @@
import ApiDoc from '../../../../../lib/layout/doc/ApiDoc.svelte';
</script>

<svelte:head>
<title>Rating API</title>
<meta name="description" content="Rating API for " />
</svelte:head>
<ApiDoc doc={widgetDoc} defaultValues={getRatingDefaultConfig()} />
Loading

0 comments on commit 4c71c4a

Please sign in to comment.