From 2dbc47733cb17bd10991530aef5691712f06231b Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Fri, 1 Jul 2022 12:21:45 +0200
Subject: [PATCH 1/3] refactor(ms-word-addin): reading tools in DialogBox

---
 apps/ms-word-addin/src/views/DialogBox.vue | 198 +++++++++------------
 1 file changed, 82 insertions(+), 116 deletions(-)

diff --git a/apps/ms-word-addin/src/views/DialogBox.vue b/apps/ms-word-addin/src/views/DialogBox.vue
index debd864a..7c0c5636 100644
--- a/apps/ms-word-addin/src/views/DialogBox.vue
+++ b/apps/ms-word-addin/src/views/DialogBox.vue
@@ -1,6 +1,6 @@
 <script lang="ts">
 /* global Office */
-import { computed, defineComponent, onMounted, ref } from '@vue/composition-api'
+import { computed, defineComponent, onMounted, ref, unref } from '@vue/composition-api'
 import { BButton, BFormCheckbox, BFormSelect, BTableSimple, BTbody, BTr, BTd, BTh, BIconList, BSidebar } from 'bootstrap-vue'
 
 import {
@@ -12,6 +12,7 @@ import {
   lineSpacingOptions,
   languageOptions,
   thicknessOptions,
+  opacityOptions,
   SettingsKey,
   Option
 } from '@readapt/settings'
@@ -43,24 +44,13 @@ const DialogBox = defineComponent({
     const rulerActivated = ref(false)
     const maskActivated = ref(false)
 
-    let heightMask = 25
-    let heightRuler = 1
+    const heightMask = 25
+    const BASE_COLOR = '#000000'
 
-    let opacityMask = 0.2
-    let opacityRuler = 0.2
-
-    const opacityOptions: Option[] = [
-      { value: '1', text: '1' },
-      { value: '2', text: '2' },
-      { value: '3', text: '3' },
-      { value: '4', text: '4' },
-      { value: '5', text: '5' }
-    ]
-
-    const opacityMaskSelected = ref<string>('1')
-    const opacityRulerSelected = ref<string>('1')
-    const heightMaskSelected = ref<string>('1')
-    const heightRulerSelected = ref<string>('1')
+    const opacityMaskSelected = ref<string>(opacityOptions[0].value)
+    const opacityRulerSelected = ref<string>(opacityOptions[0].value)
+    const heightMaskSelected = ref<string>(thicknessOptions[0].value)
+    const heightRulerSelected = ref<string>(thicknessOptions[0].value)
 
     const settings = computed<Settings>(() => store.getters.getSettings)
     const allItemsLettersActive = computed<boolean>(() => settings.value.lettersActive)
@@ -71,19 +61,15 @@ const DialogBox = defineComponent({
       return shadeAlternateLinesActive ? lineSpacingOptions.slice(1) : lineSpacingOptions
     })
 
-    let ruler = document.getElementById('ruler')
-    let mask = document.getElementById('mask')
-    let maskBeforeReadingZone = document.getElementById('before-readingzone')
-    let topBarZone = document.getElementById('topbar')
+    const ruler = ref<HTMLDivElement>()
+    const mask = ref<HTMLDivElement>()
+    const maskBeforeReadingZone = ref<HTMLDivElement>()
+    const maskReadingZone = ref<HTMLDivElement>()
+    const maskAfterReadingZone = ref<HTMLDivElement>()
+    const topBarZone = ref<HTMLDivElement>()
 
     const docHtml = ref<string>('')
 
-    const onReady = () => {
-      // Setting the default height of the Mask
-      const maskReadingZone = document.getElementById('mask-readingzone') as HTMLElement
-      maskReadingZone.style.height = `${heightMask}px`
-    }
-
     const onMessage = (event: Office.DialogParentMessageReceivedEventArgs) => {
       try {
         const message = event.message
@@ -108,10 +94,26 @@ const DialogBox = defineComponent({
     }
 
     onMounted(() => {
-      Office.onReady().then((info: { platform: Office.PlatformType }) => {
+      Office.onReady((info: { platform: Office.PlatformType }) => {
         Office.context.ui.addHandlerAsync(Office.EventType.DialogParentMessageReceived, onMessage, onRegister)
         userPlatform.value = info.platform
       })
+
+      document.addEventListener('mousemove', (event: MouseEvent) => {
+        if (mask.value) {
+          const heightMax = document.body.scrollHeight
+          mask.value.style.height = `${heightMax.toString()}px`
+        }
+
+        if (topBarZone.value && event.pageY > topBarZone.value.offsetHeight) {
+          if (ruler.value && rulerActivated.value) {
+            ruler.value.style.top = `${event.pageY - 2}px`
+          }
+          if (maskBeforeReadingZone.value && maskActivated.value) {
+            maskBeforeReadingZone.value.style.height = `${event.pageY - topBarZone.value.offsetHeight - 20}px`
+          }
+        }
+      })
     })
 
     const print = () => {
@@ -130,34 +132,15 @@ const DialogBox = defineComponent({
       document.body.className = maskActivated.value ? 'showmask' : ''
     }
 
-    document.body.onmousemove = (event) => {
-      if (!ruler) ruler = document.getElementById('ruler') as HTMLElement
-      if (!mask) mask = document.getElementById('mask') as HTMLElement
-      if (!maskBeforeReadingZone) maskBeforeReadingZone = document.getElementById('before-readingzone') as HTMLElement
-      if (!topBarZone) topBarZone = document.getElementById('topbar')
-      const heightMax = document.body.scrollHeight
-      mask.style.height = `${heightMax.toString()}px`
-
-      if (topBarZone && event.pageY > topBarZone.offsetHeight) {
-        if (ruler && rulerActivated.value) {
-          ruler.style.top = `${event.pageY - 2}px`
-        }
-        if (mask && maskActivated.value) {
-          // clientY - (top zone height) - (mask height/2)
-          maskBeforeReadingZone.style.height = `${event.pageY - topBarZone.offsetHeight - 20}px`
-        }
-      }
-    }
-
     const maskHeightChange = (size: string) => {
-      let maskReadingZone = document.getElementById('mask-readingzone') as HTMLElement
-      maskReadingZone.style.height = `${(heightMask * parseInt(size)).toString()}px`
+      const maskReadingZoneElem = unref(maskReadingZone) as HTMLDivElement
+      maskReadingZoneElem.style.height = `${(heightMask * parseInt(size)).toString()}px`
       heightMaskSelected.value = size
     }
 
     const rulerHeightChange = (size: string) => {
-      let ruler = document.getElementById('ruler') as HTMLElement
-      ruler.style.borderTop = `${(heightRuler * parseInt(size)).toString()}px solid black`
+      const rulerElem = unref(ruler) as HTMLDivElement
+      rulerElem.style.borderTopWidth = `${size}px`
       heightRulerSelected.value = size
     }
 
@@ -171,20 +154,20 @@ const DialogBox = defineComponent({
       }
     }
 
-    const opacityMaskChange = (options: number) => {
-      let beforeReadingZone = document.getElementById('before-readingzone') as HTMLElement
-      let afterReadingZone = document.getElementById('after-readingzone') as HTMLElement
+    const opacityMaskChange = (opacity: string) => {
+      const maskBeforeReadingZoneElem = unref(maskBeforeReadingZone) as HTMLElement
+      const maskAfterReadingZoneElem = unref(maskAfterReadingZone) as HTMLElement
 
-      beforeReadingZone.style.opacity = (opacityMask * options).toString()
-      afterReadingZone.style.opacity = (opacityMask * options).toString()
-      opacityMaskSelected.value = opacityOptions[options - 1].value
+      maskBeforeReadingZoneElem.style.backgroundColor = BASE_COLOR + opacity
+      maskAfterReadingZoneElem.style.backgroundColor = BASE_COLOR + opacity
+      opacityMaskSelected.value = opacity
     }
 
-    const opacityRulerChange = (options: number) => {
-      let ruler = document.getElementById('ruler') as HTMLElement
+    const opacityRulerChange = (opacity: string) => {
+      const ruleElem = unref(ruler) as HTMLDivElement
 
-      ruler.style.opacity = (opacityRuler * options).toString()
-      opacityRulerSelected.value = opacityOptions[options - 1].value
+      ruleElem.style.borderColor = BASE_COLOR + opacity
+      opacityRulerSelected.value = opacity
     }
 
     return {
@@ -193,7 +176,6 @@ const DialogBox = defineComponent({
       docHtml,
       print,
       userPlatform,
-      onReady,
       toggleRuler,
       toggleMask,
       maskHeightChange,
@@ -217,7 +199,13 @@ const DialogBox = defineComponent({
       thicknessOptions,
       heightRulerSelected,
       heightMaskSelected,
-      rulerHeightChange
+      rulerHeightChange,
+      topBarZone,
+      mask,
+      maskBeforeReadingZone,
+      maskReadingZone,
+      maskAfterReadingZone,
+      ruler
     }
   }
 })
@@ -228,10 +216,10 @@ export default DialogBox
   <div>
     <div v-if="error">{{ error }}</div>
     <div class="container-fluid">
-      <div id="topbar" class="sticky-top top-bar">
-        <b-button v-if="userPlatform !== 'Mac'" size="sm" variant="primary" @click="print()" style="margin-right: 10px">{{
-          $t('DIALOG_BOX.PRINT')
-        }}</b-button>
+      <div id="topbar" ref="topBarZone" class="sticky-top top-bar">
+        <b-button v-if="userPlatform !== 'Mac'" size="sm" variant="primary" @click="print()" style="margin-right: 10px">
+          {{ $t('DIALOG_BOX.PRINT') }}
+        </b-button>
         <b-form-checkbox :checked="maskActivated" @change="toggleMask()" inline switch>{{ $t('DIALOG_BOX.MASK') }}</b-form-checkbox>
         <b-form-checkbox :checked="rulerActivated" @change="toggleRuler()" inline switch>{{ $t('DIALOG_BOX.RULER') }}</b-form-checkbox>
 
@@ -241,27 +229,21 @@ export default DialogBox
             <b-table-simple striped responsive class="mb-0">
               <b-tbody>
                 <b-tr>
-                  <b-th rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.FONT') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.FONT') }} </b-th>
                   <b-td>
                     <b-form-select :options="fontFamilyOptions" :value="settings.fontFamily" @change="updateOption('fontFamily', $event)" />
                   </b-td>
                   <b-td />
                 </b-tr>
                 <b-tr>
-                  <b-th rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.FONT_SIZE') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.FONT_SIZE') }} </b-th>
                   <b-td>
                     <SelectPercentage :options="fontSizeOptions" :value="settings.fontSize" @change="updateOption('fontSize', $event)" />
                   </b-td>
                   <b-td />
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.LETTER_SPACING') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.LETTER_SPACING') }} </b-th>
                   <b-td>
                     <SelectPercentage
                       :options="letterSpacingOptions"
@@ -272,18 +254,14 @@ export default DialogBox
                   <b-td />
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.WORD_SPACING') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.WORD_SPACING') }} </b-th>
                   <b-td>
                     <SelectPercentage :options="wordSpacingOptions" :value="settings.wordSpacing" @change="updateOption('wordSpacing', $event)" />
                   </b-td>
                   <b-td />
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.LINE_SPACING') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.LINE_SPACING') }} </b-th>
                   <b-td>
                     <SelectPercentage
                       :options="lineSpacingOptionsOptimized"
@@ -294,59 +272,49 @@ export default DialogBox
                   <b-td />
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.HIGHLIGHT_ALTERNATING_SYLLABLES') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.HIGHLIGHT_ALTERNATING_SYLLABLES') }} </b-th>
                   <b-td />
                   <b-td class="text-right">
                     <b-form-checkbox :checked="settings.syllableActive" @change="updateOption('syllableActive', $event)" switch />
                   </b-td>
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.GREY_SILENT_LETTERS') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.GREY_SILENT_LETTERS') }} </b-th>
                   <b-td />
                   <b-td class="text-right">
                     <b-form-checkbox :checked="settings.silentLetterActive" @change="updateOption('silentLetterActive', $event)" switch />
                   </b-td>
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('SETTINGS.ALL_PHONEMES_SETTINGS') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('SETTINGS.ALL_PHONEMES_SETTINGS') }} </b-th>
                   <b-td />
                   <b-td class="text-right">
                     <b-form-checkbox :checked="allItemsPhonemesActive" @change="updateOption('phonemesActive', $event)" switch />
                   </b-td>
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('SETTINGS.ALL_LETTERS_SETTINGS') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('SETTINGS.ALL_LETTERS_SETTINGS') }} </b-th>
                   <b-td />
                   <b-td class="text-right">
                     <b-form-checkbox :checked="allItemsLettersActive" @change="updateOption('lettersActive', $event)" switch />
                   </b-td>
                 </b-tr>
                 <b-tr v-if="settings.language === 'fr'">
-                  <b-th :rowspan="1" class="bg-white">{{ $t('GENERAL.SHOW_LIAISONS') }}</b-th>
+                  <b-th class="bg-white">{{ $t('GENERAL.SHOW_LIAISONS') }}</b-th>
                   <b-td />
                   <b-td class="text-right">
                     <b-form-checkbox :checked="settings.liaisonsActive" @change="updateOption('liaisonsActive', $event)" switch />
                   </b-td>
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="1" class="bg-white">
-                    {{ $t('GENERAL.SHADE_ALTERNATE_LINES') }}
-                  </b-th>
+                  <b-th class="bg-white"> {{ $t('GENERAL.SHADE_ALTERNATE_LINES') }} </b-th>
                   <b-td />
                   <b-td class="text-right">
                     <b-form-checkbox :checked="settings.shadeAlternateLinesActive" @change="updateShadeAlternateLines" switch />
                   </b-td>
                 </b-tr>
                 <b-tr>
-                  <b-th class="bg-white" :rowspan="2">{{ $t('DIALOG_BOX.READING_MASK') }}</b-th>
+                  <b-th class="bg-white" rowspan="2">{{ $t('DIALOG_BOX.READING_MASK') }}</b-th>
                   <b-td>{{ $t('GENERAL.OPACITY') }}</b-td>
                   <b-td>
                     <RangeBar :value="opacityMaskSelected" :options="opacityOptions" @change="opacityMaskChange($event)" />
@@ -359,7 +327,7 @@ export default DialogBox
                   </b-td>
                 </b-tr>
                 <b-tr>
-                  <b-th :rowspan="2" class="bg-white bt-0">{{ $t('DIALOG_BOX.READING_RULER') }}</b-th>
+                  <b-th class="bg-white bt-0" rowspan="2">{{ $t('DIALOG_BOX.READING_RULER') }}</b-th>
                   <b-td>{{ $t('GENERAL.OPACITY') }}</b-td>
                   <b-td>
                     <RangeBar :value="opacityRulerSelected" :options="opacityOptions" @change="opacityRulerChange($event)" />
@@ -377,13 +345,13 @@ export default DialogBox
         </div>
       </div>
 
-      <AdaptContainer :settings="settings" :content-to-adapt="docHtml" @ready="onReady" />
+      <AdaptContainer :settings="settings" :content-to-adapt="docHtml" />
     </div>
-    <div id="ruler"></div>
-    <div id="mask">
-      <div id="before-readingzone"></div>
-      <div id="mask-readingzone"></div>
-      <div id="after-readingzone"></div>
+    <div id="ruler" ref="ruler"></div>
+    <div id="mask" ref="mask">
+      <div id="before-reading-zone" ref="maskBeforeReadingZone"></div>
+      <div id="mask-reading-zone" ref="maskReadingZone"></div>
+      <div id="after-reading-zone" ref="maskAfterReadingZone"></div>
     </div>
   </div>
 </template>
@@ -394,8 +362,7 @@ export default DialogBox
   display: none;
   z-index: 3;
   width: 100%;
-  border-top: 1px solid black;
-  opacity: 0.2;
+  border-top: 1px solid #00000033;
 }
 .showruler #ruler {
   display: block;
@@ -410,17 +377,16 @@ export default DialogBox
   z-index: 3;
   width: 100%;
 }
-#before-readingzone,
-#after-readingzone {
-  background: #202020;
-  opacity: 0.2;
+#before-reading-zone,
+#after-reading-zone {
+  background: #20202033;
 }
-#after-readingzone {
+#after-reading-zone {
   flex-grow: 2;
 }
-#mask-readingzone {
+#mask-reading-zone {
   width: 100%;
-  height: 40px; /* should be equal to line-height or max line height */
+  height: 25px;
 }
 .showmask #mask {
   display: flex;

From 2b42e8c696cc2e95193e7379dbeb34fbfc3601d9 Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Fri, 1 Jul 2022 14:18:20 +0200
Subject: [PATCH 2/3] refactor: remove unused emit in AdaptContainer

---
 apps/chrome-extension/src/components/AdaptContainer.vue | 3 +--
 apps/ms-word-addin/src/components/AdaptContainer.vue    | 3 +--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/apps/chrome-extension/src/components/AdaptContainer.vue b/apps/chrome-extension/src/components/AdaptContainer.vue
index 3c04710c..99d172a5 100644
--- a/apps/chrome-extension/src/components/AdaptContainer.vue
+++ b/apps/chrome-extension/src/components/AdaptContainer.vue
@@ -12,7 +12,7 @@ const AdaptContainer = defineComponent({
     settings: { type: Object as PropType<Settings>, required: true },
     scope: { type: String, default: 'preview' }
   },
-  setup(props, { emit }) {
+  setup(props) {
     const isLoading = ref(true)
     const containerElement = ref<HTMLDivElement>()
 
@@ -21,7 +21,6 @@ const AdaptContainer = defineComponent({
         containerElement.value.innerHTML = props.contentToAdapt
         await adaptHtmlElementAsync(containerElement.value, props.settings, props.scope)
         isLoading.value = false
-        emit('ready') // Only for ms-word addin
       }
     }
 
diff --git a/apps/ms-word-addin/src/components/AdaptContainer.vue b/apps/ms-word-addin/src/components/AdaptContainer.vue
index 3c04710c..99d172a5 100644
--- a/apps/ms-word-addin/src/components/AdaptContainer.vue
+++ b/apps/ms-word-addin/src/components/AdaptContainer.vue
@@ -12,7 +12,7 @@ const AdaptContainer = defineComponent({
     settings: { type: Object as PropType<Settings>, required: true },
     scope: { type: String, default: 'preview' }
   },
-  setup(props, { emit }) {
+  setup(props) {
     const isLoading = ref(true)
     const containerElement = ref<HTMLDivElement>()
 
@@ -21,7 +21,6 @@ const AdaptContainer = defineComponent({
         containerElement.value.innerHTML = props.contentToAdapt
         await adaptHtmlElementAsync(containerElement.value, props.settings, props.scope)
         isLoading.value = false
-        emit('ready') // Only for ms-word addin
       }
     }
 

From bbe43686c85efba2e3f0a35b97feabde82e1a07c Mon Sep 17 00:00:00 2001
From: Elias Boukamza <elias.boukamza@contentsquare-ext.com>
Date: Fri, 1 Jul 2022 14:34:42 +0200
Subject: [PATCH 3/3] fix(ms-word-addin): PreviewContainer size

---
 apps/ms-word-addin/src/components/PreviewContainer.vue | 2 --
 apps/ms-word-addin/src/views/SettingsMenu.vue          | 2 +-
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/apps/ms-word-addin/src/components/PreviewContainer.vue b/apps/ms-word-addin/src/components/PreviewContainer.vue
index e075b599..93886faa 100644
--- a/apps/ms-word-addin/src/components/PreviewContainer.vue
+++ b/apps/ms-word-addin/src/components/PreviewContainer.vue
@@ -51,8 +51,6 @@ export default PreviewContainer
 
 <style lang="scss" scoped>
 .adapt-container {
-  max-height: 67vh;
-  overflow-y: scroll;
   cursor: pointer;
 
   &:hover {
diff --git a/apps/ms-word-addin/src/views/SettingsMenu.vue b/apps/ms-word-addin/src/views/SettingsMenu.vue
index 9526649b..a46db71d 100644
--- a/apps/ms-word-addin/src/views/SettingsMenu.vue
+++ b/apps/ms-word-addin/src/views/SettingsMenu.vue
@@ -52,7 +52,7 @@ export default SettingsMenu
         <router-view />
       </b-col>
       <b-col lg="3" class="m-1" style="max-height: 32vh">
-        <PreviewContainer :settings="settings" :content-to-adapt="contentToAdapt" />
+        <PreviewContainer class="text-preview" :settings="settings" :content-to-adapt="contentToAdapt" />
 
         <div style="max-height: 8vh">
           <div class="mt-3 d-flex justify-content-between">