diff --git a/package-lock.json b/package-lock.json index a4d8cd14..c8ed528a 100644 --- a/package-lock.json +++ b/package-lock.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", @@ -2392,6 +2394,11 @@ "@types/mdurl": "*" } }, + "node_modules/@types/marked": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz", + "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==" + }, "node_modules/@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -12431,6 +12438,17 @@ "url": "https://github.com/fb55/entities?sponsor=1" } }, + "node_modules/marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 12" + } + }, "node_modules/md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -22820,6 +22838,11 @@ "@types/mdurl": "*" } }, + "@types/marked": { + "version": "4.3.2", + "resolved": "https://registry.npmjs.org/@types/marked/-/marked-4.3.2.tgz", + "integrity": "sha512-a79Yc3TOk6dGdituy8hmTTJXjOkZ7zsFYV10L337ttq/rec8lRMDBpV7fL3uLx6TgbFCa5DU/h8FmIBQPSbU0w==" + }, "@types/mdast": { "version": "3.0.15", "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.15.tgz", @@ -30550,6 +30573,11 @@ "resolved": "https://registry.npmjs.org/markdown-it-table-of-contents/-/markdown-it-table-of-contents-0.4.4.tgz", "integrity": "sha512-TAIHTHPwa9+ltKvKPWulm/beozQU41Ab+FIefRaQV1NRnpzwcV9QOe6wXQS5WLivm5Q/nlo0rl6laGkMDZE7Gw==" }, + "marked": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz", + "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==" + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", diff --git a/package.json b/package.json index 8724dd95..d44a4c7a 100644 --- a/package.json +++ b/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", diff --git a/public/help/respect-help-en.md b/public/help/respect-help-en.md new file mode 100644 index 00000000..491dd568 --- /dev/null +++ b/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 [applicationsdecartographieweb-webmappingapplications@ec.gc.ca](mailto:applicationsdecartographieweb-webmappingapplications@ec.gc.ca). + + +# 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. diff --git a/public/help/respect-help-fr.md b/public/help/respect-help-fr.md new file mode 100644 index 00000000..29d1ee6d --- /dev/null +++ b/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 [applicationsdecartographieweb-webmappingapplications@ec.gc.ca](mailto:applicationsdecartographieweb-webmappingapplications@ec.gc.ca). + + +# 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. \ No newline at end of file diff --git a/src/components/editor.vue b/src/components/editor.vue index bdadf0d7..dcf3ca85 100644 --- a/src/components/editor.vue +++ b/src/components/editor.vue @@ -78,6 +78,22 @@ + +
@@ -138,6 +154,7 @@
+ 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: { @@ -162,7 +183,9 @@ import ConfirmationModalV from './helpers/confirmation-modal.vue'; '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 `${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; +} diff --git a/src/components/help-panel.vue b/src/components/help-panel.vue new file mode 100644 index 00000000..ac7603fc --- /dev/null +++ b/src/components/help-panel.vue @@ -0,0 +1,136 @@ + + + + diff --git a/src/components/helpers/help-section.vue b/src/components/helpers/help-section.vue new file mode 100644 index 00000000..eeeb167e --- /dev/null +++ b/src/components/helpers/help-section.vue @@ -0,0 +1,66 @@ + + + diff --git a/src/components/metadata-editor.vue b/src/components/metadata-editor.vue index b38b12b3..d3e55d77 100644 --- a/src/components/metadata-editor.vue +++ b/src/components/metadata-editor.vue @@ -1359,6 +1359,9 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; .vfm__content { max-width: 80%; + min-width: 70%; + max-height: 90%; + padding: 12px; } .vfm__content label { diff --git a/src/definitions.ts b/src/definitions.ts index 45e9b5d9..a1036741 100644 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -41,6 +41,13 @@ export interface MetadataContent { dateModified: string; } +export interface HelpSection { + header: string; + info: string; + drawn: boolean; + expanded: boolean; +} + // unofficial interface: add properties as needed (just to make TS warnings disappear) export interface Highchart { toString(): string; diff --git a/src/lang/lang.csv b/src/lang/lang.csv index 9b4d8001..ed4f567d 100644 --- a/src/lang/lang.csv +++ b/src/lang/lang.csv @@ -145,4 +145,9 @@ editor.tocOrientation,Table of Contents Orientation,1,Orientation de la table de editor.tocOrientation.info,The table of contents orientation will be set to vertical in mobile view.,1,L'orientation de la table des matières sera définie sur verticale en vue mobile.,0 editor.tocOrientation.vertical,Vertical,1,Vertical,0 editor.tocOrientation.horizontal,Horizontal,1,Horizontal,0 -editor.landing.greeting,Hello,1,Bonjour,1 \ No newline at end of file +editor.landing.greeting,Hello,1,Bonjour,1 +help.title,Help,1,Aide,1 +help.search,Search Help,1,Aide à la recherche,1 +help.section.expand,Expand section,1,Développer une section,1 +help.section.collapse,Collapse section,1,Réduire une section,1 +help.noResults,Nothing is found. Please try a different search.,1,Aucun résultat. Veuillez essayer une autre recherche.,1 \ No newline at end of file