re-arranging options

virtualvinodh · May 20, 2022 · ef8b67f · ef8b67f
1 parent 4f59cc2
commit ef8b67f
Show file tree

Hide file tree

Showing 7 changed files with 76 additions and 74 deletions.
diff --git a/aksharamukha-front/src/components/ControlsIo.vue b/aksharamukha-front/src/components/ControlsIo.vue
@@ -31,67 +31,29 @@
       </span>
 
     </div>
-    <q-collapsible sublabel="<i>Options</i>" icon="settings" dense class="q-mb-sm q-mt-sm">
-          <div class="q-ma-sm" v-if="typeof preOptionsGroup[inputScript] !== 'undefined'"><i>{{inputScript}} options</i></div>
-      <q-option-group
-        color="dark"
-        type="checkbox"
-        inline
-        v-model="preOptions[inputScript]"
-        @input="update"
-        :options="typeof preOptionsGroup[inputScript] !== 'undefined' ? preOptionsGroup[inputScript] : []"
-      />
+    <input-options :inputScript="inputScript" :outputScript="outputScript[0]" :preOptionsInput="preOptions[inputScript]"
+    :hideSourcePreserve="true"
+      v-model="preOptions[inputScript]" @input="update"></input-options>
       <span v-if="!(outputScript instanceof Array)">
-          <div class="q-ma-sm"><i>{{outputScript}} options</i></div>
-        <q-option-group
-          color="dark"
-          type="checkbox"
-          inline
-          class="col-xs-12 col-lg-3 q-ml-md q-mr-md"
-          v-model="postOptions[outputScript]"
-          @input="update"
-          :options="typeof postOptionsGroup[outputScript] !== 'undefined' ? postOptionsGroup[outputScript] : []"
-        />
+    <output-options :inputScript="inputScript" :outputScript="outputScript" :postOptionsInput="postOptions[outputScript]"
+        :hideSourcePreserve="true" @input="update"
+        v-model="postOptions[outputScript]"></output-options>
       </span>
       <span v-else>
-        <span v-for="script in outputScript" :key="script" class="col-xs-12 col-lg-3 q-ml-md q-mr-md" v-if="typeof postOptionsGroup[script] !== 'undefined'">
-          <div class="q-ma-sm"><i>{{script}} options</i></div>
-        <q-option-group
-          color="dark"
-          type="checkbox"
-          inline
-          class="col-xs-12 col-lg-3 q-ml-md q-mr-md"
-          v-model="postOptions[script]"
-          @input="update"
-          :options="typeof postOptionsGroup[script] !== 'undefined' ? postOptionsGroup[script] : []"
-        />
+        <span v-for="script in outputScript" :key="script">
+          <output-options :inputScript="inputScript" :outputScript="script" :postOptionsInput="postOptions[script]"
+       :hideSourcePreserve="true" :showscriptName="true" @input="update"
+        v-model="postOptions[script]"></output-options>
         </span>
       </span>
-      <q-option-group
-        color="dark"
-        type="checkbox"
-        inline
-        class="col-xs-12 col-lg-3 q-ml-md q-mr-md"
-        v-model="preOptions"
-        @input="update"
-        :options="typeof preOptionsGroupSpecific[inputScript+outputScript] !== 'undefined' ? preOptionsGroupSpecific[inputScript+outputScript] : []"
-      />
-      <q-option-group
-        color="dark"
-        type="checkbox"
-        inline
-        class="col-xs-12 col-lg-3 q-ml-md q-mr-md"
-        v-model="postOptions"
-        @input="update"
-        :options="typeof postOptionsGroupSpecific[outputScript+inputScript] !== 'undefined' ? postOptionsGroupSpecific[outputScript+inputScript] : []"
-      />
-    </q-collapsible>
   </div>
 </template>
 
 <script>
 import {QRadio, QField, QBtnToggle, QToggle, QSelect, QBtn, QOptionGroup, QTooltip, QCollapsible} from 'quasar'
 import {ScriptMixin} from '../mixins/ScriptMixin'
+import InputOptions from '../components/InputOptions'
+import OutputOptions from '../components/OutputOptions'
 
 export default {
   // name: 'ComponentName',
@@ -106,7 +68,9 @@ export default {
     QBtn,
     QOptionGroup,
     QTooltip,
-    QCollapsible
+    QCollapsible,
+    InputOptions,
+    OutputOptions
   },
   data () {
     return {
@@ -129,6 +93,7 @@ export default {
   },
   methods: {
     update: function () {
+      console.log('here updating the thigns')
       var options = {}
 
       if (!this.multiple) {
@@ -145,6 +110,8 @@ export default {
         options['preOptions'] = this.preOptions
       }
 
+      console.log(options)
+
       this.$emit('input', options)
     }
   }

diff --git a/aksharamukha-front/src/components/InputOptions.vue b/aksharamukha-front/src/components/InputOptions.vue
@@ -1,6 +1,6 @@
 <template>
-      <q-collapsible :sublabel="'<i>Input Options (' + preOptionList.length + ')</i>'" icon="settings" dense class="q-mb-xs q-mt-xs"
-      :style="{'visibility': preOptionList.length === 0 ? 'hidden' : '' }" ref="collapse2"
+      <q-collapsible :sublabel="'<i>Input options (' + preOptionList.length + ')</i>'" icon="settings" dense class="q-mb-xs q-mt-xs"
+      :style="{'visibility': preOptionList.length === 0 ? 'hidden' : '', 'display': hideSourcePreserve  && preOptionList.length === 0 ? 'none' : '' }" ref="collapse2"
       >
       <q-option-group
         color="dark"
@@ -24,7 +24,7 @@ import {ScriptMixin} from '../mixins/ScriptMixin'
 export default {
   // name: 'ComponentName',
   mixins: [ScriptMixin],
-  props: ['inputScript', 'outputScript', 'preOptionsInput', 'postOptions'],
+  props: ['inputScript', 'outputScript', 'preOptionsInput', 'postOptions', 'hideSourcePreserve'],
   components: {
     QRadio,
     QField,

diff --git a/aksharamukha-front/src/components/OutputNotice.vue b/aksharamukha-front/src/components/OutputNotice.vue
@@ -53,7 +53,7 @@
       !semiticLatinList.includes(outputScript)">You're converting from a consonantal Abjad to an Indic romanization scheme. This may result in inclusion of 'a' with every consonant. Please choose a semitic romanization scheme like Roman (Semitic) to view the appropiate romanization.</div>
       <div class="notice q-ma-sm text-red" v-show="['Urdu', 'Hebrew', 'Punjabi', 'Hebrew'].includes(inputScript) && scriptLatinList.includes(outputScript) &&
       !semiticLatinList.includes(outputScript)">You're converting from a consonantal Abjad to an Indic romanization scheme. This may result in inclusion of 'a' with every consonant. Please choose a semitic romanization scheme like Roman (Semitic) to view the appropiate romanization.</div>
-      <div class="notice q-ma-sm" v-show="scriptIndicList.includes(inputScript) && scriptSemiticList.includes(outputScript) && !this.localized(outputScript)">You're converting from a vocalized script to a consonantal Abjad. Short vowels will be removed and long vowels will be shown as <i>Mater Lectionis</i>.</div>
+      <div class="notice q-ma-sm" v-show="scriptIndicList.includes(inputScript) && scriptSemiticList.includes(outputScript) && !vocalized(outputScript)">You're converting from a vocalized script to a consonantal Abjad. Short vowels will be removed and long vowels will be shown as <i>Mater Lectionis</i>.</div>
       <div class="notice q-ma-sm" v-show="scriptSemiticList.includes(inputScript) && scriptIndicList.includes(outputScript)">You're converting from a consonantal Abjad to a vocalized script. The consonantal skeleton will be padded with an inherent 'a' to aid readability, if no vowels diacritics are present.</div>
       <div class="notice q-ma-sm" v-show="outputScript === 'Latn' && String(convertText).includes('꞉')">꞉ indicates gemination of the preceding consonant. rak꞉a → rakka</div>
 

diff --git a/aksharamukha-front/src/components/OutputOptions.vue b/aksharamukha-front/src/components/OutputOptions.vue
@@ -1,6 +1,7 @@
 <template>
-     <q-collapsible :sublabel="'<i>Output Options (' + optionCount + ')</i>'" icon="settings" dense class="q-mb-xs q-mt-xs"
-        :style="{'visibility': optionCount === 0 ? 'hidden' : '' }" ref="collapse"
+     <q-collapsible :sublabel="label"
+         icon="settings" dense class="q-mb-xs q-mt-xs"
+        :style="{'visibility': optionCount === 0 ? 'none' : '', 'display': hideSourcePreserve  && optionCount === 0 ? 'none' : ''}" ref="collapse"
      >
     <div class="col-xs-12 col-md-12 print-hide">
       <q-option-group
@@ -13,7 +14,7 @@
         :options="postOptionList"
       />
     </div>
-      <span v-if="showSourcePreserve">
+      <span v-if="showSourcePreserve && !hideSourcePreserve">
         <span>
             <q-toggle color="dark" v-model="sourcePreserve" label="Preserve source" class="q-ml-sm q-mb-sm q-mt-md print-hide" @input="convert" /><q-tooltip>Preserve the source as-is and don't change the text to improve readability. May use archaic characters and/or diacritics. <br/><br/><div v-if="scriptSemiticList.includes(inputScript) || ['Urdu', 'Thaana', 'Hebrew', 'Shahmukhi', 'Sindhi'].includes(inputScript)">This also preserves the semitic consonants using the nukta (if present in the output script).</div></q-tooltip>
         </span>
@@ -30,7 +31,7 @@ import {ScriptMixin} from '../mixins/ScriptMixin'
 export default {
   // name: 'ComponentName',
   mixins: [ScriptMixin],
-  props: ['inputScript', 'outputScript', 'postOptionsInput', 'convertText', 'sourcePreserveInput'],
+  props: ['inputScript', 'outputScript', 'postOptionsInput', 'convertText', 'sourcePreserveInput', 'hideSourcePreserve', 'showscriptName'],
   components: {
     QRadio,
     QField,
@@ -53,8 +54,20 @@ export default {
   mounted: function () {
   },
   computed: {
+    label: function () {
+      if (this.showscriptName) {
+        return '<i>' + this.outputScript + ' output options (' + this.optionCount + ')</i>'
+      } else {
+        return '<i>Output options (' + this.optionCount + ')</i>'
+      }
+    },
     optionCount: function () {
-      var optionCount = this.showSourcePreserve + this.postOptionList.length
+      var optionCount
+      if (!this.hideSourcePreserve) {
+        optionCount = this.showSourcePreserve + this.postOptionList.length
+      } else {
+        optionCount = this.postOptionList.length
+      }
       return optionCount
     },
     showSourcePreserve: function () {
@@ -100,7 +113,11 @@ export default {
       this.postOptions = this.filterRadio(this.postOptions, this.outputScript)
 
       // console.log(this.postOptions)
-      this.$emit('input', [this.postOptions, this.sourcePreserve])
+      if (!this.hideSourcePreserve) {
+        this.$emit('input', [this.postOptions, this.sourcePreserve])
+      } else {
+        this.$emit('input', this.postOptions)
+      }
     }
   }
 }

diff --git a/aksharamukha-front/src/mixins/ScriptMixin.js b/aksharamukha-front/src/mixins/ScriptMixin.js
@@ -3036,6 +3036,10 @@ export const ScriptMixin = {
           label: 'Autodetect',
           value: 'osd'
         },
+        {
+          label: 'Arabic',
+          value: 'ara'
+        },
         {
           label: 'Assamese',
           value: 'asm'
@@ -3068,10 +3072,18 @@ export const ScriptMixin = {
           label: 'Gujarati',
           value: 'guj'
         },
+        {
+          label: 'Hebrew',
+          value: 'heb'
+        },
         {
           label: 'Javanese',
           value: 'jav'
         },
+        {
+          label: 'Japanese',
+          value: 'jpn'
+        },
         {
           label: 'Kannada',
           value: 'kan'
@@ -3096,6 +3108,10 @@ export const ScriptMixin = {
           label: 'Oriya',
           value: 'ori'
         },
+        {
+          label: 'Persian',
+          value: 'fas'
+        },
         {
           label: 'Punjabi',
           value: 'pan'
@@ -3104,6 +3120,10 @@ export const ScriptMixin = {
           label: 'Sinhala',
           value: 'sin'
         },
+        {
+          label: 'Syriac',
+          value: 'syr'
+        },
         {
           label: 'Tamil',
           value: 'tam'
@@ -3120,13 +3140,13 @@ export const ScriptMixin = {
           label: 'Tibetan',
           value: 'bod'
         },
-        {
-          label: 'Tibetan',
-          value: 'bod'
-        },
         {
           label: 'Urdu',
           value: 'urd'
+        },
+        {
+          label: 'Yiddish',
+          value: 'yid'
         }
       ]
     }

diff --git a/aksharamukha-front/src/pages/composer.vue b/aksharamukha-front/src/pages/composer.vue
@@ -141,20 +141,18 @@ In case of multiple outputs for the primary, the text is split into lines by def
        <q-btn icon="share" label="text" class="q-ma-sm" @click="shareCordovaText" v-if="$q.platform.is.cordova"/> <q-btn icon="share" label="image" class="q-ma-sm" @click="imageConvert(shareCordovaImage.bind(this))" v-if="$q.platform.is.cordova" /> <br/>
       <span><q-toggle color="dark" v-model="sourcePreserveComposer" label="Preserve source" class="q-ml-sm q-mb-sm q-mt-md print-hide" @input="convert" /><q-tooltip>Preserve the source as-is and don't change the text to improve readability</q-tooltip></span> <br/> <br/>
 
-    <br/><br/>
     <span v-for="scriptO in outputScript1" :key="'o'+scriptO" class="print-hide" v-if="typeof postOptionsGroup[scriptO] !== 'undefined'">
-          {{scriptO}} Options <br/>
 
     <output-options :inputScript="inputScriptComposer" :outputScript="scriptO" :postOptionsInput="postOptionsScriptComposer[scriptO]"
-       :convertText="convertText"
+       :convertText="convertText" :hideSourcePreserve="true" :showscriptName="true"
         v-model="postOptionsScriptComposer[scriptO]" @input="convert"></output-options>
 
     </span>
 
         <span v-for="scriptO in outputScript2" :key="scriptO" class="print-hide" v-if="typeof postOptionsGroup[scriptO] !== 'undefined'">
-          {{scriptO}} Options <br/>
-              <output-options :inputScriptComposer="inputScriptComposer" :outputScript="scriptO" :postOptionsInput="postOptionsScriptComposer[scriptO]"
-       :convertText="convertText"
+
+              <output-options :inputScript="inputScriptComposer" :outputScript="scriptO" :postOptionsInput="postOptionsScriptComposer[scriptO]"
+       :convertText="convertText" :hideSourcePreserve="true" :showscriptName="true"
         v-model="postOptionsScriptComposer[scriptO]" @input="convert"></output-options>
         </span>
       </div>

diff --git a/aksharamukha-front/src/pages/index.vue b/aksharamukha-front/src/pages/index.vue
@@ -29,7 +29,7 @@
       <q-icon name="history" size="25px" v-show="inputPast !== ''" class="print-hide"/>
       </div>
       <q-btn class="q-ma-sm q-mt-md btn2 print-hide col-xs-1 col-md-1" @click="copySource" :data-clipboard-text="textInput.replace(/<br\/>/g, '\n')"> <q-icon name="file_copy" /><q-tooltip>Copy source text</q-tooltip></q-btn>
-    <input-options :inputScript="inputScript" :outputScript="outputScript" :preOptionsInput="preOptions"
+    <input-options :inputScript="inputScript" :outputScript="outputScript" :preOptionsInput="preOptions" :showscriptName="false"
       :postOptions="postOptions" v-model="preOptions" @input="convert"></input-options>
     <q-input
       v-model.trim="textInput"
@@ -101,8 +101,8 @@
  <div class="q-mt-sm"><output-buttons @fontsizeinc="fontSize += 20" @fontsizedec="fontSize -= 20"
        @printdoc="printDocument" @screenshot="imageConvert(downloadImage.bind(this))" @copytext="copy" :convertText="convertText" :content="downHTML"></output-buttons></div>
       <q-btn icon="share" label="text" class="q-ma-sm" @click="shareCordovaText" v-if="$q.platform.is.cordova"/> <q-btn icon="share" label="image" class="q-ma-sm" @click="imageConvert(shareCordovaImage.bind(this))" v-if="$q.platform.is.cordova" />
-    <output-options :inputScript="inputScript" :outputScript="outputScript" :postOptionsInput="postOptions" :sourcePreserveInput="sourcePreserve"
-       :convertText="convertText"
+    <output-options :inputScript="inputScript" :outputScript="outputScript" :postOptionsInput="postOptions" :sourcePreserveInput="sourcePreserve" :showscriptName="false"
+       :convertText="convertText" :hideSourcePreserve="false"
         @input="convertOutputOptions($event)" ></output-options>
     <div
       ref="brahmiText"