Add truncate directive, Modularize slide toc buttons

[IshavSohal]

Related Item(s)

#416
#488

Changes

• Added the truncate directive, so that slide buttons in the ToC have a tooltip only if their text is truncated
• Created a new component for slide ToC buttons, due to lots of repetition between the en and fr buttons

Testing

Steps:

1. Load any product into editor-main
2. Hover over the buttons in the slide ToC
3. Ensure that a tooltip for a button only appears if the text is truncated
4. Also ensure that the text is at most two lines for each button
5. Click on the options (...) button for a slide ToC button, and ensure that the Clear content and Copy from other config features still work correctly
6. Introduce a new slide in one of the configs (would have to edit the json) but not the other, and ensure that you can correctly copy the content of the opposite config or create a new config
7. Ensure that reordering slides doesn't have any issues
8. Ensure that when renaming a slide, the slides name is correctly updated in the corresponding slide ToC button
9. Ensure that the Copy Slide feature still works correctly
10. Ensure that the above steps also work for a mobile ToC

---

This change is 

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/storylines-editor/issue-416

[gordlin]

Reviewable status: 0 of 6 files reviewed, 1 unresolved discussion (waiting on @IshavSohal)

---

a discussion (no related file):
Very nice work! Honestly, this should've been done in the original PR, sorry for offloading it.

An issue I noticed is that highlighting seems to be broken. The EN/FR config buttons don't get a highlight when selected, and the slide option buttons (copy, delete, move up/down) don't highlight upon hover.

[RyanCoulsonCA]

Code looks a lot cleaner, nice work!

Reviewed 5 of 6 files at r1, all commit messages.
Reviewable status: 5 of 6 files reviewed, 4 unresolved discussions (waiting on @gordlin and @IshavSohal)

---

src/components/helpers/slide-toc-button.vue line 42 at r1 (raw file):

        <!-- Options for ::lang:: items with missing configs (e.g. one language has config, other doesn't) -->
        <div v-if="!element[lang]" class="ml-auto flex my-auto">
            <!-- Create a new blank config -->

The Create new blank config button doesn't seem to be working when clicked!

---

src/components/helpers/slide-toc-button.vue line 128 at r1 (raw file):

        // assigning the content using a ternary expression prevents the 'editor.slide.toc.noFRSlide'
        // from being detected
        if (this.element[this.lang]?.title) {

I'm thinking that since this code block is repeated twice, it may be beneficial to just create a function for it and then call it in mounted() and updated().

---

src/components/helpers/slide-toc-button.vue line 132 at r1 (raw file):

        } else if (this.element[this.lang]?.title === '') {
            if (this.lang === 'en') {
                this.content = this.$t('editor.slides.toc.newENGSlideText');

Totally up to you, but this can also be written as the following to remove the extra if block:

this.content = this.lang === 'en' ? this.$t('editor.slides.toc.newENGSlideText') : this.$t('editor.slides.toc.newFRSlideText');

Same applies to the else block below.

[IshavSohal]

Reviewable status: 4 of 6 files reviewed, 4 unresolved discussions (waiting on @gordlin and @RyanCoulsonCA)

---

a discussion (no related file):

Previously, gordlin (Gordon Lin) wrote…

Very nice work! Honestly, this should've been done in the original PR, sorry for offloading it.

An issue I noticed is that highlighting seems to be broken. The EN/FR config buttons don't get a highlight when selected, and the slide option buttons (copy, delete, move up/down) don't highlight upon hover.

Donethanks

---

src/components/helpers/slide-toc-button.vue line 42 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

The Create new blank config button doesn't seem to be working when clicked!

Donethanks

---

src/components/helpers/slide-toc-button.vue line 128 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

I'm thinking that since this code block is repeated twice, it may be beneficial to just create a function for it and then call it in mounted() and updated().

Donethanks

---

src/components/helpers/slide-toc-button.vue line 132 at r1 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

Totally up to you, but this can also be written as the following to remove the extra if block:

this.content = this.lang === 'en' ? this.$t('editor.slides.toc.newENGSlideText') : this.$t('editor.slides.toc.newFRSlideText');

Same applies to the else block below.

Donethanks

[gordlin]

Reviewable status: 4 of 6 files reviewed, 4 unresolved discussions (waiting on @IshavSohal and @RyanCoulsonCA)

---

a discussion (no related file):

Previously, IshavSohal (Ishav Sohal) wrote…

Donethanks

Button highlighting is fixed, but the EN/FR config highlighting still seems to be broken:

[IshavSohal]

Reviewable status: 4 of 6 files reviewed, 4 unresolved discussions (waiting on @gordlin and @RyanCoulsonCA)

---

a discussion (no related file):

Previously, gordlin (Gordon Lin) wrote…

Button highlighting is fixed, but the EN/FR config highlighting still seems to be broken:

Donethanks

[gordlin]

Reviewed 4 of 6 files at r1, 1 of 2 files at r2, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 3 unresolved discussions (waiting on @RyanCoulsonCA)