rebase help panel

package.json

@@ -11,6 +11,7 @@
         "@kangc/v-md-editor": "^2.3.17",
         "@tailwindcss/typography": "^0.4.0",
         "@types/highcharts": "^7.0.0",
+        "@types/marked": "^4.0.1",
         "axios": "^1.2.0",
         "clone-deep": "^4.0.1",
         "core-js": "^3.6.5",
@@ -21,6 +22,7 @@
         "jsonschema": "^1.4.1",
         "jszip": "^3.10.1",
         "markdown-it": "^12.0.6",
+        "marked": "^4.0.10",
         "nouislider": "^15.5.0",
         "ramp-config-editor_editeur-config-pcar": "^1.1.8",
         "throttle-debounce": "^5.0.0",

public/help/respect-help-en.md

@@ -0,0 +1,78 @@
+
+# General User Interface Guidance
+
+### Creating a new project
+
+- Brief explainer of what RESPECT is
+
+- Edit project metadata
+
+- Add & reorder slides
+
+- Preview your project
+
+(Likely unecessary now) Keep track of your UUID. This is how you will access your project if you need to leave your current editing session and return at a later time.
+
+For general or technical inquiries, feature feedback, and/or custom Storylines development regarding RAD's Enhanced Storylines Product Editor & Creation Tool, please contact [[email protected]](mailto:[email protected]).
+
+
+# Add & Edit Content
+
+- General info re: panel names, left, right, full slide (\*\*loss of existing work), selecting content types
+
+### Text
+
+- Uses Markdown, ribbon operates the same as many other text editors
+
+- Point to external Markdown resource
+
+### Image
+
+- Adding & reordering images
+
+- Adding alt tags & captions
+
+### Video
+
+- Adding video
+
+### Chart
+
+- Adding data
+
+- Designing the chart (labels, colours, chart type, etc.)
+
+- Using advanced customization & adding custom code
+
+### Map
+
+- Saving your map (loading a backup)
+
+**(Possibly) For further guidance on configuring maps, refer to the Help section in the Map editor.**
+
+### Dynamic
+
+- Adding panels, linking to panels
+
+The editing process for content in dynamic panels is the same as the content types above.
+
+
+# Advanced Editor
+
+Placeholder Text
+![](datatable/applyFilters.png)
+![](layer/reorderLayers.png)
+
+
+# Submit for review
+
+Placeholder Text
+
+
+# Accessibility
+
+RAD's Enhanced Storylines Product Editor & Creation Tool is designed to be used in a context that is WCAG 2.1 "AA" compliant. Due diligence for full compliance is the responsibility of the page owner.
+
+#### Keyboard Navigation
+
+Keyboard functionality is provided as an alternative for users who are unable to use a mouse. Use the Tab key to navigate forward to links and controls on the page. Press Shift+Tab to go back one step. Use the Enter or Spacebar keys to activate links and controls.

public/help/respect-help-fr.md

@@ -0,0 +1,77 @@
+# Guide général de l'interface utilisateur
+
+### Créer un nouveau projet
+
+- Brève explication de ce qu'est RESPECT
+
+- Modifier les métadonnées du projet
+
+- Ajouter et réorganiser les diapositives
+
+- Prévisualiser votre projet
+
+(Probablement inutile maintenant) Gardez une trace de votre UUID. C'est ainsi que vous accéderez à votre projet si vous devez quitter votre session d'édition actuelle et y revenir plus tard.
+
+Pour des questions générales ou techniques, des commentaires sur les fonctionnalités et/ou le développement de Storylines personnalisées concernant l'éditeur de produits et l'outil de création de Storylines améliorés de RAD, veuillez contacter [[email protected]](mailto:[email protected]).
+
+
+# Ajouter et modifier du contenu
+
+- Informations générales concernant les noms des panneaux, gauche, droite, diapositive complète (\*\*perte de travail existant), sélection des types de contenu
+
+### Texte
+
+- Utilise Markdown, le ruban fonctionne de la même manière que de nombreux autres éditeurs de texte
+
+- Pointer vers une ressource Markdown externe
+
+### Image
+
+- Ajout et réorganisation des images
+
+- Ajout de balises alt et de légendes
+
+### Vidéo
+
+- Ajout de vidéo
+
+### Graphique
+
+- Ajout de données
+
+- Conception du graphique (étiquettes, couleurs, type de graphique, etc.)
+
+- Utilisation de la personnalisation avancée et ajout de code personnalisé
+
+### Carte
+
+- Enregistrement de votre carte (chargement d'une sauvegarde)
+
+**(Éventuellement) Pour plus d'informations sur la configuration des cartes, reportez-vous à la section Aide de l'éditeur de cartes.**
+
+### Dynamique
+
+- Ajout de panneaux, création de liens vers des panneaux
+
+Le processus d'édition du contenu des panneaux dynamiques est le même que celui des types de contenu ci-dessus.
+
+
+# Éditeur avancé
+
+Texte d'espace réservé
+![](datatable/applyFilters.png)
+![](layer/reorderLayers.png)
+
+
+# Soumettre pour révision
+
+Texte d'espace réservé
+
+
+# Accessibilité
+
+L'outil d'édition et de création de produits Enhanced Storylines de RAD est conçu pour être utilisé dans un contexte conforme à la norme WCAG 2.1 « AA ». La diligence raisonnable pour une conformité totale est de la responsabilité du propriétaire de la page.
+
+#### Navigation au clavier
+
+La fonctionnalité du clavier est fournie comme alternative pour les utilisateurs qui ne peuvent pas utiliser une souris. Utilisez la touche Tab pour naviguer vers l'avant jusqu'aux liens et aux contrôles de la page. Appuyez sur Maj+Tab pour revenir à l'étape précédente. Utilisez les touches Entrée ou la barre d'espace pour activer les liens et les contrôles.

src/components/editor.vue

@@ -78,6 +78,22 @@
                     <spinner size="16px" color="#009cd1" class="ml-1 mb-1"></spinner>
                 </span>
             </button>
+            <link
+                rel="stylesheet"
+                href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200"
+            />
+            <button
+                @click="$vfm.open(`help-panel`)"
+                class="p-1 bg-white border border-black rounded-full w-9 h-9 hover:bg-gray-100"
+                v-tippy="{
+                    delay: '200',
+                    placement: 'top',
+                    content: $t('help.title'),
+                    animateFill: true
+                }"
+            >
+                <span class="material-symbols-outlined bottom-0"> question_mark </span>
+            </button>
         </div>
         <div class="flex">
             <div class="w-80 flex-shrink-0 border-r border-black editor-toc">
@@ -138,6 +154,7 @@
             </a>
         </div>
         <slot name="metadataModal"></slot>
+        <help-panel :helpSections="helpSections" :originalTextArray="originalTextArray"></help-panel>
         <confirmation-modal
             :name="`reload-config`"
             :message="$t('editor.refreshChanges.modal')"
@@ -148,21 +165,27 @@
 
 <script lang="ts">
 import { Options, Prop, Vue, Watch } from 'vue-property-decorator';
-import { ConfigFileStructure, MetadataContent, Slide, SourceCounts, StoryRampConfig } from '@/definitions';
+import { ConfigFileStructure, HelpSection, MetadataContent, Slide, SourceCounts, StoryRampConfig } from '@/definitions';
 import { VueSpinnerOval } from 'vue3-spinners';
+import axios from 'axios';
+import { marked } from 'marked';
 
 import SlideEditorV from './slide-editor.vue';
 import SlideTocV from './slide-toc.vue';
 import MetadataContentV from './helpers/metadata-content.vue';
 import ConfirmationModalV from './helpers/confirmation-modal.vue';
+import HelpPanelV from './help-panel.vue';
+import HelpSectionV from './helpers/help-section.vue';
 
 @Options({
     components: {
         'metadata-content': MetadataContentV,
         'confirmation-modal': ConfirmationModalV,
         spinner: VueSpinnerOval,
         'slide-editor': SlideEditorV,
-        'slide-toc': SlideTocV
+        'slide-toc': SlideTocV,
+        'help-panel': HelpPanelV,
+        'help-section': HelpSectionV
     }
 })
 export default class EditorV extends Vue {
@@ -183,6 +206,9 @@ export default class EditorV extends Vue {
     loadSlides: undefined | Slide[] = undefined;
     currentSlide: Slide | string = '';
     slideIndex = -1;
+    helpSections: HelpSection[] = [];
+    helpMd = '';
+    originalTextArray: string[] = [];
 
     @Watch('slides', { deep: true })
     onSlidesEdited(): void {
@@ -199,6 +225,8 @@ export default class EditorV extends Vue {
         this.uuid = this.$route.params.uid as string;
 
         window.addEventListener('beforeunload', this.beforeWindowUnload);
+
+        this.fetchMarkdown();
     }
 
     mounted(): void {
@@ -260,6 +288,38 @@ export default class EditorV extends Vue {
         this.slideIndex = this.loadSlides.indexOf(this.currentSlide as Slide);
     }
 
+    /**
+     * Fetch markdown content for help panel.
+     */
+    fetchMarkdown(): void {
+        const helpPath = process.env.NODE_ENV === 'development' ? `../../help/` : `./help/`;
+        const helpFile = `respect-help-${this.$route.params.lang}.md`;
+
+        axios.get(`${helpPath}${helpFile}`).then((r) => {
+            const reg = /^#\s(.*)\n{2}(?:.+|\n(?!\n{2,}))*/gm;
+            const renderer = new marked.Renderer();
+            renderer.image = (href: string, title: string, text: string) => {
+                if (href.indexOf('http') === -1) {
+                    href = helpPath + 'images/' + href;
+                }
+                return `<img src="${href}" alt="${text}">`;
+            };
+            this.helpMd = r.data.replace(new RegExp(String.fromCharCode(13), 'g'), '');
+            let section;
+            while ((section = reg.exec(this.helpMd))) {
+                const info_results = marked(section[0].split('\n').splice(2).join('\n'), { renderer }) as string;
+                this.helpSections.push({
+                    header: section[1],
+                    info: info_results,
+                    drawn: true,
+                    expanded: false
+                });
+                //copy of the original text to refer to after highlighting
+                this.originalTextArray.push(info_results);
+            }
+        });
+    }
+
     /**
      * Open current editor config as a new Storylines product in new tab.
      */
@@ -365,4 +425,8 @@ export default class EditorV extends Vue {
 .fade-leave-to {
     opacity: 0;
 }
+
+.material-symbols-outlined {
+    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
 </style>