feat: replace alert with an illustrative toast

Use for Copy and Enter on a block.

This is closer to the interaction envisaged on #192

This implementation is illustrative to gather feedback on the interaction.

Author: microbit-matt-hillsdon

src/navigation.ts

@@ -18,6 +18,7 @@ import {
   FlyoutCursor,
 } from './flyout_cursor';
 import {PassiveFocus} from './passive_focus';
+import {toast} from './toast';
 
 /**
  * Class that holds all methods necessary for keyboard navigation to work.
@@ -544,7 +545,7 @@ export class Navigation {
    *  - Resume editing by returning the cursor to its previous location, if any.
    *  - Move the cursor to the top connection point on on the first top block.
    *  - Move the cursor to the default location on the workspace.
-   * 
+   *
    * @param workspace The main Blockly workspace.
    * @param keepPosition Whether to retain the cursor's previous position.
    */
@@ -1270,14 +1271,14 @@ export class Navigation {
     } else if (nodeType === Blockly.ASTNode.types.BLOCK) {
       const block = curNode.getLocation() as Blockly.Block;
       if (!tryShowFullBlockFieldEditor(block)) {
-        const metaKey = navigator.platform.startsWith('Mac') ? 'Cmd' : 'Ctrl';
+        const metaKey = navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl';
         const canMoveInHint = `Press right arrow to move in or ${metaKey} + Enter for more options`;
         const genericHint = `Press ${metaKey} + Enter for options`;
-        const hint =
+        const message =
           curNode.in()?.getSourceBlock() === block
             ? canMoveInHint
             : genericHint;
-        alert(hint);
+        toast(workspace, {message});
       }
     } else if (
       curNode.isConnection() ||

src/navigation_controller.ts

@@ -31,6 +31,7 @@ import {Navigation} from './navigation';
 import {Announcer} from './announcer';
 import {LineCursor} from './line_cursor';
 import {ShortcutDialog} from './shortcut_dialog';
+import {toast} from './toast';
 
 const KeyCodes = BlocklyUtils.KeyCodes;
 const createSerializedKey = ShortcutRegistry.registry.createSerializedKey.bind(
@@ -342,6 +343,12 @@ export class NavigationController {
     workspace.hideChaff();
     this.copyData = sourceBlock.toCopyData();
     this.copyWorkspace = sourceBlock.workspace;
+    if (this.copyData) {
+      toast(workspace, {
+        message: `Copied. Press ${navigator.platform.startsWith('Mac') ? '⌘' : 'Ctrl'} + V to paste.`,
+        duration: 3000,
+      });
+    }
     return !!this.copyData;
   }
 

src/toast.ts

@@ -0,0 +1,144 @@
+import {WorkspaceSvg} from 'blockly';
+
+/**
+ * Toast options.
+ */
+export interface ToastOptions {
+  /**
+   * Message text.
+   */
+  message: string;
+  /**
+   * Duration in milliseconds before the toast is removed.
+   * Defaults to 5000.
+   */
+  duration?: number;
+}
+
+/**
+ * Shows a message as a toast positioned over the workspace.
+ *
+ * This is illustrative to gather feedback on the interaction.
+ *
+ * If retained, we'd expect to allow applications to override with their own implementations.
+ *
+ * Further work is needed on the accessibility of this toast:
+ * - testing screen reader support
+ * - considering whether support for stacked toasts is needed
+ * - shortcut to focus? though it's the next tab stop currently
+ *
+ * @param workspace The workspace for positioning.
+ * @param options Options.
+ */
+export function toast(workspace: WorkspaceSvg, options: ToastOptions): void {
+  const {message, duration = 5000} = options;
+  const className = 'blocklyToast';
+  workspace.getInjectionDiv().querySelector(`.${className}`)?.remove();
+
+  const toast = document.createElement('div');
+  toast.className = className;
+  toast.setAttribute('role', 'status');
+  toast.setAttribute('aria-live', 'polite');
+  const {
+    FIELD_TEXT_FONTWEIGHT: fontWeight,
+    FIELD_TEXT_FONTFAMILY: fontFamily,
+    FIELD_TEXT_FONTSIZE: fontSizePt,
+  } = workspace.getRenderer().getConstants();
+  assignStyle(toast, {
+    fontFamily,
+    fontWeight,
+    fontSize: `${fontSizePt}pt`,
+    position: 'absolute',
+    maxWidth: '20em',
+    bottom: '2rem',
+    right: '-50rem',
+    padding: '1rem',
+    color: 'white',
+    backgroundColor: 'rebeccapurple',
+    borderRadius: '0.4rem',
+    zIndex: '999',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '0.8rem',
+    lineHeight: '1.5',
+    transition: 'right 0.3s ease-out',
+  });
+
+  toast.appendChild(
+    infoIcon({
+      width: '1.5em',
+      height: '1.5em',
+    }),
+  );
+  const messageElement = toast.appendChild(document.createElement('div'));
+  messageElement.innerText = message;
+  const closeButton = toast.appendChild(document.createElement('button'));
+  assignStyle(closeButton, {
+    margin: '0',
+    padding: '0.2rem',
+    backgroundColor: 'transparent',
+    color: 'white',
+    border: 'none',
+  });
+  closeButton.ariaLabel = 'Close';
+  closeButton.appendChild(
+    closeIcon({
+      width: '1.5em',
+      height: '1.5em',
+    }),
+  );
+  closeButton.addEventListener('click', () => {
+    toast.remove();
+    workspace.markFocused();
+  });
+
+  workspace.getInjectionDiv().appendChild(toast);
+  requestAnimationFrame(() => {
+    toast.style.right = '2rem';
+  });
+
+  let timeout: ReturnType<typeof setTimeout> | undefined;
+  const setToastTimeout = () => {
+    timeout = setTimeout(() => toast.remove(), duration);
+  };
+  const clearToastTimeout = () => clearTimeout(timeout);
+  toast.addEventListener('focusin', clearToastTimeout);
+  toast.addEventListener('focusout', setToastTimeout);
+  toast.addEventListener('mouseenter', clearToastTimeout);
+  toast.addEventListener('mousemove', clearToastTimeout);
+  toast.addEventListener('mouseleave', setToastTimeout);
+  setToastTimeout();
+}
+
+function icon(innerHTML: string, style: Partial<CSSStyleDeclaration> = {}) {
+  const icon = document.createElement('svg');
+  assignStyle(icon, style);
+  icon.innerHTML = innerHTML;
+  icon.ariaHidden = 'hidden';
+  return icon;
+}
+
+function infoIcon(style: Partial<CSSStyleDeclaration> = {}) {
+  return icon(
+    `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
+<rect x="11" y="9" width="2" height="9" fill="currentColor"/>
+<circle cx="12.0345" cy="7.03448" r="1.03448" fill="currentColor"/>
+</svg>`,
+    style,
+  );
+}
+
+function closeIcon(style: Partial<CSSStyleDeclaration> = {}) {
+  return icon(
+    `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="19.7782" y="2.80762" width="2" height="24" transform="rotate(45 19.7782 2.80762)" fill="currentColor"/>
+  <rect x="2.80762" y="4.22183" width="2" height="24" transform="rotate(-45 2.80762 4.22183)" fill="currentColor"/>
+  </svg>`,
+    style,
+  );
+}
+
+function assignStyle(target: HTMLElement, style: Partial<CSSStyleDeclaration>) {
+  return Object.assign(target.style, style);
+}