@nysds/playground 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +20 -10
  2. package/dist/assets/{index-LO1tomgR.css → index-BuPgmhhR.css} +1 -1
  3. package/dist/assets/{index-bBtGCGL_.js → index-EthD3ZNJ.js} +370 -368
  4. package/dist/index.html +115 -141
  5. package/index.html +113 -139
  6. package/package.json +1 -1
  7. package/presets/16-themes.json +2 -2
  8. package/src/app.css +155 -111
  9. package/src/deck-model.ts +47 -0
  10. package/src/decks.test.ts +55 -0
  11. package/src/main.ts +91 -27
  12. package/src/present.ts +9 -0
  13. package/src/slide-list.ts +276 -0
package/dist/index.html CHANGED
@@ -51,8 +51,8 @@
51
51
  }
52
52
  }
53
53
  </style>
54
- <script type="module" crossorigin src="./assets/index-bBtGCGL_.js"></script>
55
- <link rel="stylesheet" crossorigin href="./assets/index-LO1tomgR.css">
54
+ <script type="module" crossorigin src="./assets/index-EthD3ZNJ.js"></script>
55
+ <link rel="stylesheet" crossorigin href="./assets/index-BuPgmhhR.css">
56
56
  </head>
57
57
  <body>
58
58
  <div id="splash" aria-hidden="true">
@@ -406,15 +406,6 @@
406
406
 
407
407
  <footer class="caption" id="caption" tabindex="-1">
408
408
  <div class="caption__left">
409
- <nys-button
410
- inverted
411
- id="prev-button"
412
- size="sm"
413
- variant="outline"
414
- circle
415
- icon="chevron_left"
416
- label="Previous slide"
417
- ></nys-button>
418
409
  <div class="caption__headline">
419
410
  <p class="caption__title">
420
411
  <span class="present-only">
@@ -425,145 +416,117 @@
425
416
  <select class="caption__select" id="slide-picker" aria-label="Go to slide"></select>
426
417
  <nys-icon class="caption__picker-icon" name="chevron_down" size="sm"></nys-icon>
427
418
  </span>
428
- <span class="caption__count caption__count--inline" data-count></span>
419
+ <span class="caption__count" id="caption-count" data-count></span>
429
420
  </p>
430
421
  <p class="caption__description" id="caption-description"></p>
431
422
  </div>
432
- </div>
433
-
434
- <div class="caption__center">
435
- <span class="caption__home" aria-hidden="true">
436
- <svg
437
- class="caption__mark"
438
- viewBox="13 3 205 205"
439
- fill="currentColor"
440
- aria-hidden="true"
441
- focusable="false"
442
- >
443
- <path
444
- d="M89.6599 110.894L56.3349 77.5558V48.4713H172.629L217.285 93.4372C211.299 42.5111 168.016 3 115.5 3C58.8907 3 13 48.908 13 105.538C13 128.627 20.6323 149.93 33.5051 167.07"
445
- />
446
- <path
447
- d="M172.629 48.3945V164.733H143.556V98.0323L54.072 187.55C71.191 200.39 92.4567 208 115.5 208C172.109 208 218 162.092 218 105.462C218 101.356 217.731 97.3158 217.262 93.3366L172.629 48.3945Z"
448
- />
449
- <path d="M56.3291 77.5552H122.979L89.6541 110.893L56.3291 77.5552Z" />
450
- </svg>
451
- </span>
423
+ <nys-tooltip class="edit-only deck-only" for="slide-settings-button" text="Slide settings" inverted></nys-tooltip>
424
+ <nys-button
425
+ class="edit-only deck-only"
426
+ inverted
427
+ id="slide-settings-button"
428
+ size="sm"
429
+ variant="ghost"
430
+ circle
431
+ icon="edit_square"
432
+ label="Slide settings"
433
+ ></nys-button>
452
434
  </div>
453
435
 
454
436
  <div class="caption__right">
455
- <p class="caption__count" id="caption-count" data-count></p>
456
- <div class="caption__actions">
457
- <nys-button
458
- class="edit-only deck-only"
459
- inverted
460
- id="add-slide-button"
461
- size="sm"
462
- variant="outline"
463
- label="Add slide"
464
- prefixIcon="add"
465
- ></nys-button>
466
- <nys-button
467
- class="edit-only deck-only"
468
- inverted
469
- id="slide-settings-button"
470
- size="sm"
471
- variant="ghost"
472
- label="Slide settings"
473
- prefixIcon="edit_square"
474
- ></nys-button>
475
- <nys-button
476
- class="edit-only deck-only"
477
- inverted
478
- id="move-slide-back-button"
479
- size="sm"
480
- variant="ghost"
481
- circle
482
- icon="arrow_back"
483
- label="Move slide earlier"
484
- ></nys-button>
485
- <nys-button
486
- class="edit-only deck-only"
487
- inverted
488
- id="move-slide-forward-button"
489
- size="sm"
490
- variant="ghost"
491
- circle
492
- icon="arrow_forward"
493
- label="Move slide later"
494
- ></nys-button>
495
- <nys-button
496
- class="edit-only deck-only"
497
- inverted
498
- id="duplicate-slide-button"
499
- size="sm"
500
- variant="ghost"
501
- circle
502
- icon="content_copy"
503
- label="Duplicate slide"
504
- ></nys-button>
505
- <nys-button
506
- class="edit-only deck-only"
507
- inverted
508
- id="delete-slide-button"
509
- size="sm"
510
- variant="ghost"
511
- circle
512
- icon="delete"
513
- label="Delete slide"
514
- ></nys-button>
515
- <nys-tooltip class="present-only" for="exit-present-button" text="Edit slides" inverted></nys-tooltip>
516
- <nys-button
517
- class="present-only"
518
- inverted
519
- id="exit-present-button"
520
- size="sm"
521
- variant="ghost"
522
- circle
523
- icon="edit_square"
524
- label="Edit slides"
525
- ></nys-button>
526
- <nys-tooltip class="caption__notes" for="notes-button" text="Presenter notes" inverted></nys-tooltip>
527
- <nys-button
528
- class="caption__notes"
529
- inverted
530
- id="notes-button"
531
- size="sm"
532
- variant="ghost"
533
- circle
534
- icon="info"
535
- label="Presenter notes"
536
- ></nys-button>
537
- <nys-tooltip class="present-only" for="reset-slide-button" text="Reset slide" inverted></nys-tooltip>
538
- <nys-button
539
- class="present-only"
540
- inverted
541
- id="reset-slide-button"
542
- size="sm"
543
- variant="ghost"
544
- circle
545
- icon="refresh"
546
- label="Reset slide"
547
- ></nys-button>
548
- <nys-tooltip class="present-only" for="present-settings-button" text="Settings" inverted></nys-tooltip>
549
- <nys-button
550
- class="present-only"
551
- inverted
552
- id="present-settings-button"
553
- size="sm"
554
- variant="ghost"
555
- circle
556
- icon="more_vert"
557
- label="Settings"
558
- ></nys-button>
559
- </div>
437
+ <nys-tooltip class="edit-only deck-only" for="add-slide-button" text="Add slide" inverted></nys-tooltip>
438
+ <nys-button
439
+ class="edit-only deck-only"
440
+ inverted
441
+ id="add-slide-button"
442
+ size="sm"
443
+ variant="ghost"
444
+ circle
445
+ icon="add"
446
+ label="Add slide"
447
+ ></nys-button>
448
+ <nys-tooltip class="edit-only deck-only" for="delete-slide-button" text="Delete slide" inverted></nys-tooltip>
449
+ <nys-button
450
+ class="edit-only deck-only"
451
+ inverted
452
+ id="delete-slide-button"
453
+ size="sm"
454
+ variant="ghost"
455
+ circle
456
+ icon="delete"
457
+ label="Delete slide"
458
+ ></nys-button>
459
+ <nys-tooltip class="edit-only deck-only" for="duplicate-slide-button" text="Duplicate slide" inverted></nys-tooltip>
460
+ <nys-button
461
+ class="edit-only deck-only"
462
+ inverted
463
+ id="duplicate-slide-button"
464
+ size="sm"
465
+ variant="ghost"
466
+ circle
467
+ icon="content_copy"
468
+ label="Duplicate slide"
469
+ ></nys-button>
470
+ <nys-tooltip class="present-only" for="exit-present-button" text="Edit slides" inverted></nys-tooltip>
471
+ <nys-button
472
+ class="present-only"
473
+ inverted
474
+ id="exit-present-button"
475
+ size="sm"
476
+ variant="ghost"
477
+ circle
478
+ icon="edit_square"
479
+ label="Edit slides"
480
+ ></nys-button>
481
+ <nys-tooltip class="caption__notes" for="notes-button" text="Presenter notes" inverted></nys-tooltip>
482
+ <nys-button
483
+ class="caption__notes"
484
+ inverted
485
+ id="notes-button"
486
+ size="sm"
487
+ variant="ghost"
488
+ circle
489
+ icon="info"
490
+ label="Presenter notes"
491
+ ></nys-button>
492
+ <nys-tooltip class="present-only" for="reset-slide-button" text="Reset slide" inverted></nys-tooltip>
493
+ <nys-button
494
+ class="present-only"
495
+ inverted
496
+ id="reset-slide-button"
497
+ size="sm"
498
+ variant="ghost"
499
+ circle
500
+ icon="refresh"
501
+ label="Reset slide"
502
+ ></nys-button>
503
+ <nys-tooltip class="present-only" for="present-settings-button" text="Settings" inverted></nys-tooltip>
504
+ <nys-button
505
+ class="present-only"
506
+ inverted
507
+ id="present-settings-button"
508
+ size="sm"
509
+ variant="ghost"
510
+ circle
511
+ icon="more_vert"
512
+ label="Settings"
513
+ ></nys-button>
514
+ <nys-button
515
+ inverted
516
+ id="prev-button"
517
+ size="sm"
518
+ variant="outline"
519
+ circle
520
+ icon="arrow_back"
521
+ label="Previous slide"
522
+ ></nys-button>
560
523
  <nys-button
561
524
  inverted
562
525
  id="next-button"
563
526
  size="sm"
564
527
  variant="outline"
565
528
  circle
566
- icon="chevron_right"
529
+ icon="arrow_forward"
567
530
  label="Next slide"
568
531
  ></nys-button>
569
532
  </div>
@@ -571,7 +534,7 @@
571
534
 
572
535
  <p class="present-hint" id="present-hint" hidden></p>
573
536
 
574
- <nys-modal id="deck-modal" heading="Deck settings" width="md">
537
+ <nys-modal id="deck-modal" heading="Deck settings" width="lg">
575
538
  <div class="settings">
576
539
  <nys-textinput
577
540
  id="deck-title-input"
@@ -584,6 +547,15 @@
584
547
  rows="2"
585
548
  description="One sentence. It shows on the home page and in the slide bar."
586
549
  ></nys-textarea>
550
+ <fieldset class="settings__fieldset">
551
+ <legend class="settings__legend">Slides</legend>
552
+ <p class="settings__hint">
553
+ Rename, regroup, reorder, or remove slides. Drag a row by its handle, press the up
554
+ and down keys on the handle, or use the arrows. Changes apply when you select Done.
555
+ </p>
556
+ <ol class="slide-list" id="slide-list"></ol>
557
+ <p class="visually-hidden" id="slide-list-status" role="status" aria-live="polite"></p>
558
+ </fieldset>
587
559
  <div class="settings__code">
588
560
  <div class="settings__legend" id="deck-base-css-label">Base CSS</div>
589
561
  <p class="settings__hint" id="deck-base-css-hint">
@@ -611,7 +583,7 @@
611
583
  <nys-textinput
612
584
  id="slide-group-input"
613
585
  label="Group"
614
- description="A section label, such as 1. Lock it down. Slides that share one are grouped."
586
+ description="Set a section label. Slides with matching labels are grouped automatically in the slide picker."
615
587
  ></nys-textinput>
616
588
  <nys-textarea id="slide-description-input" label="Description" rows="2"></nys-textarea>
617
589
  <nys-textarea
@@ -760,7 +732,9 @@
760
732
  <nys-button id="deck-missing-home" label="Go home" prefixIcon="arrow_back"></nys-button>
761
733
  </div>
762
734
 
763
- <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
735
+ <!-- Always in the page, never hidden, so the live region exists before
736
+ a toast lands in it and the change is what gets announced. -->
737
+ <div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
764
738
  </div>
765
739
 
766
740
  <playground-project id="project"></playground-project>
package/index.html CHANGED
@@ -404,15 +404,6 @@
404
404
 
405
405
  <footer class="caption" id="caption" tabindex="-1">
406
406
  <div class="caption__left">
407
- <nys-button
408
- inverted
409
- id="prev-button"
410
- size="sm"
411
- variant="outline"
412
- circle
413
- icon="chevron_left"
414
- label="Previous slide"
415
- ></nys-button>
416
407
  <div class="caption__headline">
417
408
  <p class="caption__title">
418
409
  <span class="present-only">
@@ -423,145 +414,117 @@
423
414
  <select class="caption__select" id="slide-picker" aria-label="Go to slide"></select>
424
415
  <nys-icon class="caption__picker-icon" name="chevron_down" size="sm"></nys-icon>
425
416
  </span>
426
- <span class="caption__count caption__count--inline" data-count></span>
417
+ <span class="caption__count" id="caption-count" data-count></span>
427
418
  </p>
428
419
  <p class="caption__description" id="caption-description"></p>
429
420
  </div>
430
- </div>
431
-
432
- <div class="caption__center">
433
- <span class="caption__home" aria-hidden="true">
434
- <svg
435
- class="caption__mark"
436
- viewBox="13 3 205 205"
437
- fill="currentColor"
438
- aria-hidden="true"
439
- focusable="false"
440
- >
441
- <path
442
- d="M89.6599 110.894L56.3349 77.5558V48.4713H172.629L217.285 93.4372C211.299 42.5111 168.016 3 115.5 3C58.8907 3 13 48.908 13 105.538C13 128.627 20.6323 149.93 33.5051 167.07"
443
- />
444
- <path
445
- d="M172.629 48.3945V164.733H143.556V98.0323L54.072 187.55C71.191 200.39 92.4567 208 115.5 208C172.109 208 218 162.092 218 105.462C218 101.356 217.731 97.3158 217.262 93.3366L172.629 48.3945Z"
446
- />
447
- <path d="M56.3291 77.5552H122.979L89.6541 110.893L56.3291 77.5552Z" />
448
- </svg>
449
- </span>
421
+ <nys-tooltip class="edit-only deck-only" for="slide-settings-button" text="Slide settings" inverted></nys-tooltip>
422
+ <nys-button
423
+ class="edit-only deck-only"
424
+ inverted
425
+ id="slide-settings-button"
426
+ size="sm"
427
+ variant="ghost"
428
+ circle
429
+ icon="edit_square"
430
+ label="Slide settings"
431
+ ></nys-button>
450
432
  </div>
451
433
 
452
434
  <div class="caption__right">
453
- <p class="caption__count" id="caption-count" data-count></p>
454
- <div class="caption__actions">
455
- <nys-button
456
- class="edit-only deck-only"
457
- inverted
458
- id="add-slide-button"
459
- size="sm"
460
- variant="outline"
461
- label="Add slide"
462
- prefixIcon="add"
463
- ></nys-button>
464
- <nys-button
465
- class="edit-only deck-only"
466
- inverted
467
- id="slide-settings-button"
468
- size="sm"
469
- variant="ghost"
470
- label="Slide settings"
471
- prefixIcon="edit_square"
472
- ></nys-button>
473
- <nys-button
474
- class="edit-only deck-only"
475
- inverted
476
- id="move-slide-back-button"
477
- size="sm"
478
- variant="ghost"
479
- circle
480
- icon="arrow_back"
481
- label="Move slide earlier"
482
- ></nys-button>
483
- <nys-button
484
- class="edit-only deck-only"
485
- inverted
486
- id="move-slide-forward-button"
487
- size="sm"
488
- variant="ghost"
489
- circle
490
- icon="arrow_forward"
491
- label="Move slide later"
492
- ></nys-button>
493
- <nys-button
494
- class="edit-only deck-only"
495
- inverted
496
- id="duplicate-slide-button"
497
- size="sm"
498
- variant="ghost"
499
- circle
500
- icon="content_copy"
501
- label="Duplicate slide"
502
- ></nys-button>
503
- <nys-button
504
- class="edit-only deck-only"
505
- inverted
506
- id="delete-slide-button"
507
- size="sm"
508
- variant="ghost"
509
- circle
510
- icon="delete"
511
- label="Delete slide"
512
- ></nys-button>
513
- <nys-tooltip class="present-only" for="exit-present-button" text="Edit slides" inverted></nys-tooltip>
514
- <nys-button
515
- class="present-only"
516
- inverted
517
- id="exit-present-button"
518
- size="sm"
519
- variant="ghost"
520
- circle
521
- icon="edit_square"
522
- label="Edit slides"
523
- ></nys-button>
524
- <nys-tooltip class="caption__notes" for="notes-button" text="Presenter notes" inverted></nys-tooltip>
525
- <nys-button
526
- class="caption__notes"
527
- inverted
528
- id="notes-button"
529
- size="sm"
530
- variant="ghost"
531
- circle
532
- icon="info"
533
- label="Presenter notes"
534
- ></nys-button>
535
- <nys-tooltip class="present-only" for="reset-slide-button" text="Reset slide" inverted></nys-tooltip>
536
- <nys-button
537
- class="present-only"
538
- inverted
539
- id="reset-slide-button"
540
- size="sm"
541
- variant="ghost"
542
- circle
543
- icon="refresh"
544
- label="Reset slide"
545
- ></nys-button>
546
- <nys-tooltip class="present-only" for="present-settings-button" text="Settings" inverted></nys-tooltip>
547
- <nys-button
548
- class="present-only"
549
- inverted
550
- id="present-settings-button"
551
- size="sm"
552
- variant="ghost"
553
- circle
554
- icon="more_vert"
555
- label="Settings"
556
- ></nys-button>
557
- </div>
435
+ <nys-tooltip class="edit-only deck-only" for="add-slide-button" text="Add slide" inverted></nys-tooltip>
436
+ <nys-button
437
+ class="edit-only deck-only"
438
+ inverted
439
+ id="add-slide-button"
440
+ size="sm"
441
+ variant="ghost"
442
+ circle
443
+ icon="add"
444
+ label="Add slide"
445
+ ></nys-button>
446
+ <nys-tooltip class="edit-only deck-only" for="delete-slide-button" text="Delete slide" inverted></nys-tooltip>
447
+ <nys-button
448
+ class="edit-only deck-only"
449
+ inverted
450
+ id="delete-slide-button"
451
+ size="sm"
452
+ variant="ghost"
453
+ circle
454
+ icon="delete"
455
+ label="Delete slide"
456
+ ></nys-button>
457
+ <nys-tooltip class="edit-only deck-only" for="duplicate-slide-button" text="Duplicate slide" inverted></nys-tooltip>
458
+ <nys-button
459
+ class="edit-only deck-only"
460
+ inverted
461
+ id="duplicate-slide-button"
462
+ size="sm"
463
+ variant="ghost"
464
+ circle
465
+ icon="content_copy"
466
+ label="Duplicate slide"
467
+ ></nys-button>
468
+ <nys-tooltip class="present-only" for="exit-present-button" text="Edit slides" inverted></nys-tooltip>
469
+ <nys-button
470
+ class="present-only"
471
+ inverted
472
+ id="exit-present-button"
473
+ size="sm"
474
+ variant="ghost"
475
+ circle
476
+ icon="edit_square"
477
+ label="Edit slides"
478
+ ></nys-button>
479
+ <nys-tooltip class="caption__notes" for="notes-button" text="Presenter notes" inverted></nys-tooltip>
480
+ <nys-button
481
+ class="caption__notes"
482
+ inverted
483
+ id="notes-button"
484
+ size="sm"
485
+ variant="ghost"
486
+ circle
487
+ icon="info"
488
+ label="Presenter notes"
489
+ ></nys-button>
490
+ <nys-tooltip class="present-only" for="reset-slide-button" text="Reset slide" inverted></nys-tooltip>
491
+ <nys-button
492
+ class="present-only"
493
+ inverted
494
+ id="reset-slide-button"
495
+ size="sm"
496
+ variant="ghost"
497
+ circle
498
+ icon="refresh"
499
+ label="Reset slide"
500
+ ></nys-button>
501
+ <nys-tooltip class="present-only" for="present-settings-button" text="Settings" inverted></nys-tooltip>
502
+ <nys-button
503
+ class="present-only"
504
+ inverted
505
+ id="present-settings-button"
506
+ size="sm"
507
+ variant="ghost"
508
+ circle
509
+ icon="more_vert"
510
+ label="Settings"
511
+ ></nys-button>
512
+ <nys-button
513
+ inverted
514
+ id="prev-button"
515
+ size="sm"
516
+ variant="outline"
517
+ circle
518
+ icon="arrow_back"
519
+ label="Previous slide"
520
+ ></nys-button>
558
521
  <nys-button
559
522
  inverted
560
523
  id="next-button"
561
524
  size="sm"
562
525
  variant="outline"
563
526
  circle
564
- icon="chevron_right"
527
+ icon="arrow_forward"
565
528
  label="Next slide"
566
529
  ></nys-button>
567
530
  </div>
@@ -569,7 +532,7 @@
569
532
 
570
533
  <p class="present-hint" id="present-hint" hidden></p>
571
534
 
572
- <nys-modal id="deck-modal" heading="Deck settings" width="md">
535
+ <nys-modal id="deck-modal" heading="Deck settings" width="lg">
573
536
  <div class="settings">
574
537
  <nys-textinput
575
538
  id="deck-title-input"
@@ -582,6 +545,15 @@
582
545
  rows="2"
583
546
  description="One sentence. It shows on the home page and in the slide bar."
584
547
  ></nys-textarea>
548
+ <fieldset class="settings__fieldset">
549
+ <legend class="settings__legend">Slides</legend>
550
+ <p class="settings__hint">
551
+ Rename, regroup, reorder, or remove slides. Drag a row by its handle, press the up
552
+ and down keys on the handle, or use the arrows. Changes apply when you select Done.
553
+ </p>
554
+ <ol class="slide-list" id="slide-list"></ol>
555
+ <p class="visually-hidden" id="slide-list-status" role="status" aria-live="polite"></p>
556
+ </fieldset>
585
557
  <div class="settings__code">
586
558
  <div class="settings__legend" id="deck-base-css-label">Base CSS</div>
587
559
  <p class="settings__hint" id="deck-base-css-hint">
@@ -609,7 +581,7 @@
609
581
  <nys-textinput
610
582
  id="slide-group-input"
611
583
  label="Group"
612
- description="A section label, such as 1. Lock it down. Slides that share one are grouped."
584
+ description="Set a section label. Slides with matching labels are grouped automatically in the slide picker."
613
585
  ></nys-textinput>
614
586
  <nys-textarea id="slide-description-input" label="Description" rows="2"></nys-textarea>
615
587
  <nys-textarea
@@ -758,7 +730,9 @@
758
730
  <nys-button id="deck-missing-home" label="Go home" prefixIcon="arrow_back"></nys-button>
759
731
  </div>
760
732
 
761
- <div class="toast" id="toast" role="status" aria-live="polite" hidden></div>
733
+ <!-- Always in the page, never hidden, so the live region exists before
734
+ a toast lands in it and the change is what gets announced. -->
735
+ <div class="toast" id="toast" role="status" aria-live="polite" aria-atomic="true"></div>
762
736
  </div>
763
737
 
764
738
  <playground-project id="project"></playground-project>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nysds/playground",
3
- "version": "0.1.0",
3
+ "version": "0.2.0",
4
4
  "description": "A browser playground for the New York State Design System.",
5
5
  "scripts": {
6
6
  "start": "node bin/cli.mjs",