add types definition

ZanyMonk · Oct 12, 2021 · 66c1f30 · 66c1f30
1 parent 6eefaf0
commit 66c1f30
Show file tree

Hide file tree

Showing 17 changed files with 442 additions and 172 deletions.
diff --git a/public/index.html b/public/index.html
@@ -5,11 +5,11 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
+    <title>Decodapz</title>
   </head>
   <body>
     <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+      <strong>We're sorry but this application require JavaScript. Please enable it to continue.</strong>
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->

diff --git a/src/components/AutoDecoder.vue b/src/components/AutoDecoder.vue
@@ -14,9 +14,9 @@
         <CheckboxSetting v-for="(setting, name) in booleanSettings" :key="name"
                      :setting="setting" @input="settingChanged(setting, $event)"
         />
-<!--        <DropdownSetting v-for="(setting, name) in complexSettings" :key="name"-->
-<!--                     :setting="setting" @input="settingChanged(setting, $event)"-->
-<!--        />-->
+        <DropdownSetting v-for="(setting, name) in objectSettings" :key="name"
+                     :setting="setting" @input="settingChanged(setting, $event)"
+        />
       </div>
     </div>
   </div>
@@ -29,18 +29,6 @@ import TextSetting from './TextSetting.vue'
 import DropdownSetting from './DropdownSetting.vue'
 import CheckboxSetting from './CheckboxSetting.vue'
 
-function pick(obj, predicate) {
-  if (!obj || typeof obj !== 'object') return obj
-
-  const newObj = {}
-
-  for (const [name, value] of Object.entries(obj)) {
-    if (!predicate(name, value)) continue
-    newObj[name] = value
-  }
-  return newObj
-}
-
 export default {
   name: 'AutoDecoder',
   components: {
@@ -60,13 +48,12 @@ export default {
   },
   data() {
     const encoder = this.getEncoder(this.type)
-
     Promise.resolve(encoder.encode(this.value)).then((value) => {
       this.encodedValue = value
     })
 
     return {
-      encoder: encoder,
+      encoder,
       encodedValue: '',
       hasError: false,
       isFocused: false
@@ -90,6 +77,17 @@ export default {
     }
   },
   methods: {
+    pick(obj, predicate) {
+      if (!obj || typeof obj !== 'object') return obj
+
+      const newObj = {}
+
+      for (const [name, value] of Object.entries(obj)) {
+        if (!predicate(name, value)) continue
+        newObj[name] = value
+      }
+      return newObj
+    },
     async decode(string) {
       return await this.decodeValue(this.type.toLowerCase(), string)
     },
@@ -118,13 +116,13 @@ export default {
   },
   computed: {
     stringSettings() {
-      return pick(this.encoder.settings, (name, setting) => setting.type === String)
+      return this.encoder.stringSettings
     },
     booleanSettings() {
-      return pick(this.encoder.settings, (name, setting) => setting.type === Boolean)
+      return this.encoder.booleanSettings
     },
-    complexSettings() {
-      return pick(this.encoder.settings, (name, setting) => setting.type === Object)
+    objectSettings() {
+      return this.encoder.objectSettings
     }
   },
   mounted() {

diff --git a/src/components/DropdownSetting.vue b/src/components/DropdownSetting.vue
@@ -1,42 +1,113 @@
 <template>
-  <div class="setting setting-boolean">
-    <button :class="[('btn-' + (setting.value ? 'primary' : 'dark')), 'btn btn-sm']"
-            @click="$emit('input', setting.choices.urlSafe)"
+  <div :class="[{open: visible}, 'setting setting-string']">
+    <button :class="['btn-' + (visible ? 'primary' : 'dark'), 'btn btn-sm']"
+            @click="onButtonClicked()"
+            @focus="onButtonClicked()"
             data-bs-toggle="tooltip" data-bs-placement="bottom" :title="setting.label || setting.name"
     >
-      <i :class="setting.icon ? 'bi-' + setting.icon : 'bi-sliders'"></i>
+      <i :class="setting.icon ? 'bi-' + setting.icon : 'bi-hash'"></i>
     </button>
+    <div class="field" v-show="visible">
+      <input type="text" ref="fieldInput"
+             v-model="value"
+             :placeholder="placeholder"
+             @keyup.esc="close()"
+             @blur="close()"
+             @focusin="dropdownVisible = true"
+      >
+      <div :class="[{active: dropdownVisible}, 'arrow']"
+           @click="dropdownVisible = !dropdownVisible"
+      >
+        <i class="bi-chevron-down"></i>
+      </div>
+      <div class="dropdown" v-show="dropdownVisible">
+        <div class="choice" v-for="(choice, name) in filteredChoices" :key="name"
+             @click="choose(choice)"
+        >
+          {{ choice.label }} ({{ choice.value }})
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
+import {debounce} from 'debounce';
+
 export default {
   name: 'DropdownSetting',
   props: {
     setting: {
       type: Object,
       required: true
     }
+  },
+  data() {
+    return {
+      value: '',
+      placeholder: '',
+      visible: false,
+      closedRecently: false,
+      dropdownVisible: true
+    }
+  },
+  computed: {
+    filteredChoices() {
+      if (!this.value) return this.setting.choices
+
+      const choices = {}
+      for (const [name, choice] of Object.entries(this.setting.choices)) {
+        if (choice.label.toLowerCase().includes(this.value.toLowerCase())){
+          choices[name] = choice
+        }
+      }
+
+      return choices
+    }
+  },
+  methods: {
+    open() {
+      if (!this.closedRecently) {
+        this.visible = true
+        this.$nextTick(() => {
+          this.$refs.fieldInput.select()
+        })
+      }
+    },
+    close() {
+      this.visible = false
+
+      if (this.closedRecently) clearTimeout(this.closedRecently)
+      this.closedRecently = setTimeout(() => {
+        this.closedRecently = false
+      }, 500)
+    },
+    choose(choice) {
+      this.$emit('input', choice)
+      this.placeholder = `${choice.label} (${choice.value})`
+      this.value = ''
+      this.dropdownVisible = false
+      this.close()
+    },
+    onButtonClicked: debounce(function () {
+      if (this.visible) this.close()
+      else this.open()
+    }, 200, true)
   }
 }
 </script>
 
 <style lang="scss" scoped>
 @import './src/scss/variables';
 
-.setting-boolean {
-  button {
-    bottom: 0;
-  }
-
+.setting-string {
   button {
+    transition: background-color .3s;
+    padding: 0 2px;
+    height: $setting-height;
+    width: $setting-height;
     z-index: 2;
-
-    &.open {
-      position: absolute;
-      left: 0;
-      border-radius: 3px 0 0 3px;
-    }
+    border-radius: .3rem;
 
     i {
       font-size: 16px;
@@ -48,22 +119,76 @@ export default {
     }
   }
 
+  .field {
+    display: flex;
+    width: 100%;
+    z-index: 1;
+    background-color: $decoder-bg-color;
+  }
+
   input {
-    position: absolute;
-    left: 0;
-    transition: all .5s, bottom .5s;
     height: $setting-height;
-    width: $setting-height;
+    width: 100%;
     font-size: 14px;
-    border: 1px solid #d4d4d4;
+    border: 1px solid $decoder-border-color;
     border-left: none;
-    border-radius: 5px 3px 3px 5px;
-    padding-left: $setting-height + 5px;
-    z-index: 1;
+    border-right: none;
+    outline: none;
+  }
+
+  .arrow {
+    color: $decoder-color;
+    font-size: .8rem;
+    line-height: $setting-height;
+    height: $setting-height;
+    width: 20px;
+    border: 1px solid $decoder-border-color;
+    border-left: none;
+    border-left: none;
+    text-align: center;
+    cursor: pointer;
+    border-radius: 0 3px 3px 0;
+
+    i::before {
+      transform-origin: center 40%;
+      transition: transform .5s;
+    }
+
+    &.active i::before {
+      transform: rotate(-180deg);
+    }
+  }
+
+  .dropdown {
+    color: $decoder-color;
+    position: absolute;
+    top: $setting-height;
+    left: $setting-height;
+    right: 0;
+    background-color: $decoder-bg-color;
+    border: 1px solid $decoder-border-color;
+    border-top: none;
+    border-radius: 0 0 3px 3px;
+
+    .choice {
+      cursor: pointer;
+
+      &:hover {
+        background: $decoder-border-color;
+      }
+    }
+  }
+
+  &.open {
+    position: absolute;
+    display: flex;
+    left: 0;
+    right: 0;
+    bottom: 0;
 
-    &:focus {
-      outline: none;
-      width: 100%;
+    button {
+      flex: 0 0 $setting-height;
+      border-radius: .2rem 0 0 .2rem;
     }
   }
 }

diff --git a/src/components/TextSetting.vue b/src/components/TextSetting.vue
@@ -9,8 +9,8 @@
     </button>
     <input type="text" ref="fieldInput"
            v-bind:value="setting.value" v-show="visible"
-           @keyup.esc="close()"
            @input="$emit('input', $event)"
+           @keyup.esc="close()"
            @blur="close()"
     >
   </div>
@@ -27,6 +27,9 @@ export default {
       required: true
     }
   },
+  created() {
+    console.log('MEH ?', this)
+  },
   data() {
     return {
       visible: false,
@@ -62,11 +65,6 @@ export default {
 @import './src/scss/variables';
 
 .setting-string {
-  button,
-  input {
-    bottom: 0;
-  }
-
   button {
     transition: background-color .3s;
     padding: 0 2px;

diff --git a/src/encoders/ascii.ts b/src/encoders/ascii.ts
@@ -1,11 +1,15 @@
-module.exports = {
-  label: 'ASCII/UTF-8',
+import Encoder from '@/types/Encoder'
 
-  encode(string: string) {
-    return string;
-  },
+export class Ascii extends Encoder {
+  label = 'ASCII/UTF-8'
 
-  decode(string: string) {
-    return string;
+  encode(input: string): string {
+    return input;
   }
-}
+
+  decode(input: string): string {
+    return input;
+  }
+}
+
+export default Ascii