From 0b8500df1b26cac2582930620096518e140a9534 Mon Sep 17 00:00:00 2001 From: Mistry Date: Wed, 13 Mar 2024 16:33:14 -0400 Subject: [PATCH] Added option for horizontal table of contents --- package-lock.json | 10 +++++----- package.json | 2 +- .../editor/helpers/metadata-content.vue | 18 ++++++++++++++++++ src/components/editor/metadata-editor.vue | 18 ++++++++++++++++-- src/components/editor/preview.vue | 16 +++++++++++++++- src/definitions.ts | 2 ++ src/lang/lang.csv | 6 +++++- src/main.ts | 4 ++-- src/shims-vue.d.ts | 2 +- tailwind.config.js | 2 +- 10 files changed, 66 insertions(+), 14 deletions(-) diff --git a/package-lock.json b/package-lock.json index d27d34f7..1fbf6c6d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "jszip": "^3.10.1", "markdown-it": "^12.0.6", "nouislider": "^15.5.0", - "ramp-storylines": "^3.0.4", + "ramp-storylines_demo-scenarios-pcar": "^3.1.3", "uuid": "^9.0.0", "vue": "^3.3.4", "vue-class-component": "^8.0.0-rc.1", @@ -15004,10 +15004,10 @@ "url": "https://github.com/sponsors/sindresorhus" } }, - "node_modules/ramp-storylines": { - "version": "3.0.4", - "resolved": "https://registry.npmjs.org/ramp-storylines/-/ramp-storylines-3.0.4.tgz", - "integrity": "sha512-xTzhJvjeDRNd/6nQD3IvfUib/JcN4hmc7RUcSindiVCCFllzTXlb56+RIdoMaLQ0VpJ5Z1XBVNlVPhJZUAZ2vg==", + "node_modules/ramp-storylines_demo-scenarios-pcar": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/ramp-storylines_demo-scenarios-pcar/-/ramp-storylines_demo-scenarios-pcar-3.1.3.tgz", + "integrity": "sha512-0da9++y4oeuFcxmusi5N1hnrB4K5lQrLjal3XfMZP8OGyY/D3aYL7OGqx+Ez4h1iz2LdqlrGepTf04gDlc6iJA==", "dependencies": { "@tailwindcss/typography": "^0.4.0", "@types/highcharts": "^7.0.0", diff --git a/package.json b/package.json index d13f48fc..a45cd068 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "jszip": "^3.10.1", "markdown-it": "^12.0.6", "nouislider": "^15.5.0", - "ramp-storylines": "^3.0.4", + "ramp-storylines_demo-scenarios-pcar": "^3.1.3", "uuid": "^9.0.0", "vue": "^3.3.4", "vue-class-component": "^8.0.0-rc.1", diff --git a/src/components/editor/helpers/metadata-content.vue b/src/components/editor/helpers/metadata-content.vue index 008137ef..a994039b 100644 --- a/src/components/editor/helpers/metadata-content.vue +++ b/src/components/editor/helpers/metadata-content.vue @@ -71,6 +71,23 @@ {{ $t('editor.contextLabel.info') }}


+ + +
+ +

+ {{ $t('editor.tocOrientation.info') }} +

+


@@ -90,6 +107,7 @@ export default class MetadataEditorV extends Vue { logoAltText: string; contextLink: string; contextLabel: string; + tocOrientation: string; dateModified: string; }; diff --git a/src/components/editor/metadata-editor.vue b/src/components/editor/metadata-editor.vue index b3c84efb..aa0981c2 100644 --- a/src/components/editor/metadata-editor.vue +++ b/src/components/editor/metadata-editor.vue @@ -244,6 +244,7 @@ export default class MetadataEditorV extends Vue { logoAltText: '', contextLink: '', contextLabel: '', + tocOrientation: '', dateModified: '' }; // add more required metadata fields to here as needed @@ -272,6 +273,8 @@ export default class MetadataEditorV extends Vue { const month = (curDate.getMonth() + 1).toString().padStart(2, '0'); const day = curDate.getDate().toString().padStart(2, '0'); this.metadata.dateModified = `${year}-${month}-${day}`; + // set vertical as the default table of contents orientation + this.metadata.tocOrientation = 'vertical'; } // Find which view to render based on route @@ -379,6 +382,7 @@ export default class MetadataEditorV extends Vue { slides: [], contextLabel: this.metadata.contextLabel, contextLink: this.metadata.contextLink, + tocOrientation: this.metadata.tocOrientation, dateModified: this.metadata.dateModified }; } @@ -555,6 +559,7 @@ export default class MetadataEditorV extends Vue { this.metadata.introSubtitle = config.introSlide.subtitle; this.metadata.contextLink = config.contextLink; this.metadata.contextLabel = config.contextLabel; + this.metadata.tocOrientation = config.tocOrientation; this.metadata.dateModified = config.dateModified; // Conversion for individual image panels to slideshow for gallery display @@ -647,7 +652,14 @@ export default class MetadataEditorV extends Vue { } updateMetadata( - key: 'title' | 'introTitle' | 'introSubtitle' | 'contextLink' | 'contextLabel' | 'dateModified', + key: + | 'title' + | 'introTitle' + | 'introSubtitle' + | 'contextLink' + | 'contextLabel' + | 'tocOrientation' + | 'dateModified', value: string ): void { this.metadata[key] = value; @@ -667,6 +679,7 @@ export default class MetadataEditorV extends Vue { config.introSlide.subtitle = this.metadata.introSubtitle; config.contextLink = this.metadata.contextLink; config.contextLabel = this.metadata.contextLabel; + config.tocOrientation = this.metadata.tocOrientation; config.dateModified = this.metadata.dateModified; // If the logo section is missing, create it here before overwriting values. @@ -710,7 +723,8 @@ export default class MetadataEditorV extends Vue { dateModified: '', logoPreview: '', logoName: '', - logoAltText: '' + logoAltText: '', + tocOrientation: '' }; this.configs = { en: undefined, fr: undefined }; this.slides = []; diff --git a/src/components/editor/preview.vue b/src/components/editor/preview.vue index 518607d2..0b3e3c80 100644 --- a/src/components/editor/preview.vue +++ b/src/components/editor/preview.vue @@ -8,7 +8,10 @@
-
+
{{ config.title }}
@@ -22,6 +25,7 @@ :configFileStructure="configFileStructure" :lang="lang" :plugin="true" + :headerHeight="headerHeight" @step="updateActiveIndex" />
@@ -65,6 +69,7 @@ export default class StoryPreviewV extends Vue { loadStatus = 'loading'; activeChapterIndex = -1; lang = 'en'; + headerHeight = 0; uid = ''; created(): void { @@ -100,6 +105,11 @@ export default class StoryPreviewV extends Vue { updateActiveIndex(idx: number): void { this.activeChapterIndex = idx; + //determine header height + const headerH = document.getElementById('story-header'); + if (headerH) { + this.headerHeight = headerH.clientHeight; + } } } @@ -125,6 +135,10 @@ $font-list: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; border-bottom: 0px; } + .story-header { + z-index: 60; + } + .storyramp-modified { max-width: 1536px; margin: 0 auto; diff --git a/src/definitions.ts b/src/definitions.ts index d320b15c..13e23986 100644 --- a/src/definitions.ts +++ b/src/definitions.ts @@ -7,6 +7,7 @@ export interface StoryRampConfig { slides: Slide[]; contextLink: string; contextLabel: string; + tocOrientation: string; dateModified: string; } @@ -38,6 +39,7 @@ export interface MetadataContent { logoAltText: string; contextLink: string; contextLabel: string; + tocOrientation: string; dateModified: string; } diff --git a/src/lang/lang.csv b/src/lang/lang.csv index f564e256..48db8932 100644 --- a/src/lang/lang.csv +++ b/src/lang/lang.csv @@ -111,4 +111,8 @@ editor.slides.select,Please select a slide to edit,1,Veuillez sélectionner une editor.slides.panel.body,Panel body,1,Corps du panneau,1 editor.slides.panel.title,Panel title,1,Titre du panneau,1 editor.slides.intro,Intro subtitle,1,Sous-titre de l’introduction,1 -editor.slides.title,Intro title,1,Titre de l’introduction,1 \ No newline at end of file +editor.slides.title,Intro title,1,Titre de l’introduction,1 +editor.tocOrientation,Table of Contents Orientation,1,Orientation de la table des matières,0 +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 \ No newline at end of file diff --git a/src/main.ts b/src/main.ts index 98aa11f2..7b089643 100644 --- a/src/main.ts +++ b/src/main.ts @@ -30,8 +30,8 @@ import HighchartsVue from 'highcharts-vue'; import Message from 'vue-m-message'; import 'vue-m-message/dist/style.css'; -import StorylinesViewer from 'ramp-storylines'; -import 'ramp-storylines/dist/storylines-viewer.css'; +import StorylinesViewer from 'ramp-storylines_demo-scenarios-pcar'; +import 'ramp-storylines_demo-scenarios-pcar/dist/storylines-viewer.css'; const app = createApp(App); diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts index 0a5a4f0e..0ef9fd7f 100644 --- a/src/shims-vue.d.ts +++ b/src/shims-vue.d.ts @@ -6,7 +6,7 @@ declare module '*.vue' { declare module '@kangc/v-md-editor'; declare module '@kangc/v-md-editor/lib/lang/en-US'; declare module '@kangc/v-md-editor/lib/theme/github.js'; -declare module 'ramp-storylines'; +declare module 'ramp-storylines_demo-scenarios-pcar'; declare module 'vue-m-message'; declare module 'highcharts-vue'; declare module 'vue-tippy'; diff --git a/tailwind.config.js b/tailwind.config.js index e316636a..5df5cd3a 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -9,7 +9,7 @@ module.exports = { purge: [ './index.html', './src/**/*.{vue,js,ts,jsx,tsx}', - './node_modules/ramp-storylines/**/*.{vue,js,ts,jsx,tsx}' + './node_modules/ramp-storylines_demo-scenarios-pcar/**/*.{vue,js,ts,jsx,tsx}' ], darkMode: false, // or 'media' or 'class' theme: {