From c1314da941d09bcce51570accc3ed7c5c12c2f15 Mon Sep 17 00:00:00 2001
From: Rich Boakes <rjb@port.ac.uk>
Date: Wed, 27 Sep 2023 09:14:49 +0100
Subject: [PATCH] help button and modal dialog

---
 i/help.svg |  7 +++++++
 index.html | 17 ++++++++++++++++-
 script.js  | 16 ++++++++++++++--
 styles.css | 48 ++++++++++++++++++++++++++++++++++++++++++++++++
 4 files changed, 85 insertions(+), 3 deletions(-)
 create mode 100644 i/help.svg

diff --git a/i/help.svg b/i/help.svg
new file mode 100644
index 0000000..ff5db3d
--- /dev/null
+++ b/i/help.svg
@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="34px" height="34px" viewBox="0 0 1000 1000" version="1.1" xmlns="http://www.w3.org/2000/svg" stroke="none">
+    <title>Help</title>
+    <circle id="Oval" fill="#669AE0" cx="500" cy="500" r="500"></circle>
+    <path d="M500,150 C610.5,150 700,239.5 700,350 C700,426.1 657.5,492.2 595,526 L595,526.1 C561.9,547.5 540,584.7 540,627 C540,628 540,629 540,630 L460,630 C460,629 460,628 460,627 C460,551 502.1,485.3 564.2,451.38 C597.75,430.1 620,392.6 620,350 C620,283.7 566.3,230 500,230 C433.7,230 380,283.7 380,350 L300,350 C300,239.5 389.54305,150 500,150 Z" id="Path" stroke="#FFFFFF" stroke-width="21" fill="#FFFFFF"></path>
+    <circle id="Oval" stroke="#FFFFFF" stroke-width="21" fill="#FFFFFF" cx="500" cy="770" r="80"></circle>
+</svg>
\ No newline at end of file
diff --git a/index.html b/index.html
index 94307cb..3913923 100644
--- a/index.html
+++ b/index.html
@@ -16,9 +16,10 @@
             <p id="mmd" contenteditable>edit</p>
         </div>
         <div>
-            <label for="mmd">Designed by</label>
+            <label for="by">Designed by</label>
             <p id="by" contenteditable>edit</p>
         </div>
+        <img id="help" src="i/help.svg" alt="help">
     </header>
 
     <div class="grid-item" id="kp"><h2 id="hkp">Key Partners <img aria-labelledby="hkp" src="i/kp.svg"></h2><section id="ekp" class="e" contenteditable="true"></section></div>
@@ -35,3 +36,17 @@
         <p><span>Designed by:</span> Strategyzer AG & Steve Blank.  Built for the web at Uni. of Portsmouth.
     </footer>
 </div>
+
+<dialog id="usage">
+    <h1>Using the Mission Model Canvas.</h1>
+    <p>The MMC comprises nine sections ("Key Partners", "Key Activities", etc).
+    <h2>Editing</h2>
+    <p><strong>Click</strong> a section to begin editing it: a highlight will appear and you'll see a flashing caret where you can enter text.
+    <p><strong>Click outside</strong> a section or press <span class="key">Escape</span> to stop editing.
+    <h2>Defocusing</h2>
+    <p><strong><span class="key">Shift</span>-click</strong> a section to defocus it (it will blend more into the background).
+    <p><strong>Type</strong> in any defocused area will automatically refocus it.
+    <h2>Reset</h2>
+    <p><span class="key">Ctrl</span>+<span class="key">Escape</span> opens a dialog that will allow you to remove all your text from the page.</p>
+    <button id="usage-close">OK</button>
+</dialog>
diff --git a/script.js b/script.js
index 19d300c..b3ec521 100644
--- a/script.js
+++ b/script.js
@@ -89,7 +89,7 @@ function handleFragment() {
 
 function keyboardHandler(event) {
   if (event.ctrlKey && event.key === 'Escape') {
-    const confirmed = confirm('Are you sure you want to reset the page?');
+    const confirmed = confirm('Are you sure you want to remove all text from this page?');
     if (confirmed) {
       for (const element of el.editableElements) {
         element.innerHTML = '';
@@ -111,6 +111,7 @@ function keyboardHandler(event) {
 function prep() {
   el.gridItems = document.querySelectorAll('.grid-item');
   el.editableElements = document.querySelectorAll('[contenteditable]');
+  el.help = document.querySelector('#help');
 
   loadContent();
 
@@ -123,7 +124,18 @@ function prep() {
   for (const element of el.editableElements) {
     element.addEventListener('input', saveContent);
   }
-  
+
+  el.help.addEventListener('click', openUsageDialog);
+
+
+}
+
+function openUsageDialog() {
+  const dialog = document.querySelector('#usage');
+  dialog.showModal();
+  dialog.addEventListener('click', () => {
+    dialog.remove();
+  });
 }
 
 window.addEventListener('load', prep);
diff --git a/styles.css b/styles.css
index 293943b..7ae2486 100644
--- a/styles.css
+++ b/styles.css
@@ -155,4 +155,52 @@ h2 img {
 
 .grid-item:has(*:focus) {
     box-shadow: inset 0 0 1em #F0F7;
+}
+
+dialog {
+    margin: auto;
+    padding: 2em;
+    display: flex;
+    flex-direction: column;
+}
+
+dialog p {
+    padding-block-start: 0.3em;
+}
+
+dialog h2 {
+    padding-block-start: 2em;
+}
+
+
+dialog::backdrop {
+    background: repeating-linear-gradient(
+      45deg,
+      #009EE277,
+      #62136077,
+      #0076A677,
+      #3C023877
+    );
+  }
+  
+dialog button {
+    align-self: flex-end;
+    padding: 0.5em;
+}
+
+#help {
+    transition: all 0.2s linear;
+    align-self: flex-start;
+}
+
+#help:hover {
+    transform: scale(1.2);
+}
+
+.key {
+    background: #00000022;
+    padding: 0.2em;
+    border: thin dashed #000;
+    border-radius: 0.2em;
+    font-weight: bold;
 }
\ No newline at end of file