clean and fix

README.md

@@ -1,18 +1,19 @@
 # Decodapz
 
 ## @TODO
+- [ ] Add history (store only decoded/ASCII values)
 - [ ] Add options for each encoder
   - [x] `Hex`
     - [x] Allow separator selection
     - [x] Allow prefix selection
   - [ ] `Base64`
     - [ ] Generalize in `BaseN`
+    - [ ] Allow custom charset (String or RegExp)
     - [ ] Allow charset selection from predefined charsets
       - [ ] Standard
       - [ ] URL-safe
       - [ ] All (bruteforce)
       - [ ] Research for more ...
-    - [ ] Allow custom charset (String or RegExp)
 - [ ] Add encoders
   - [ ] `RotX`
   - [x] `URL`
@@ -23,7 +24,7 @@
   - [x] Length in words (spaces)
   - [ ] CRC32
   - [ ] Hashes
-    - [ ] MD5
+    - [x] MD5
     - [x] SHA-1
     - [x] SHA-256
     - [x] SHA-512

src/components/AutoDecoder.vue

@@ -14,6 +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)"-->
+<!--        />-->
       </div>
     </div>
   </div>
@@ -23,24 +26,26 @@
 import { Tooltip } from 'bootstrap';
 
 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 = {};
+  const newObj = {}
 
   for (const [name, value] of Object.entries(obj)) {
     if (!predicate(name, value)) continue
     newObj[name] = value
   }
-  return newObj;
+  return newObj
 }
 
 export default {
   name: 'AutoDecoder',
   components: {
     TextSetting,
+    DropdownSetting,
     CheckboxSetting
   },
   props: {
@@ -72,15 +77,15 @@ export default {
       this.hasError = false
       const decoded = await this.decode(this.encodedValue)
 
-      if (newValue === oldValue                                      // Value has not changed
+      if (   newValue === oldValue                                      // Value has not changed
           || newValue.length === decoded.length && newValue === decoded // Own modification
-      ) return;
+      ) return
 
       if (newValue === false) {
-        this.encodedValue = 'Could not decode';
-        this.hasError = true;
+        this.encodedValue = 'Could not decode'
+        this.hasError = true
       } else {
-        this.encodedValue = await this.encode(newValue);
+        this.encodedValue = await this.encode(newValue)
       }
     }
   },
@@ -93,19 +98,19 @@ export default {
     },
     async settingChanged(setting, value) {
       setting.value = value
-      this.encodedValue = await this.encode(this.value);
+      this.encodedValue = await this.encode(this.value)
     },
     async valueChanged(value) {
-      if (value.length === this.value.length && value === this.value) return false;
+      if (value.length === this.value.length && value === this.value) return false
 
       this.hasError = false
       const decoded = await this.decode(value)
 
       if (decoded === false) {
         this.hasError = true
         this.$emit('error')
-        return false;
-      }
+        return false
+      } else if (decoded === true) return
 
       this.$emit('value-changed', decoded)
       return decoded
@@ -117,6 +122,9 @@ export default {
     },
     booleanSettings() {
       return pick(this.encoder.settings, (name, setting) => setting.type === Boolean)
+    },
+    complexSettings() {
+      return pick(this.encoder.settings, (name, setting) => setting.type === Object)
     }
   },
   mounted() {

src/components/CheckboxSetting.vue

@@ -12,7 +12,7 @@
 
 <script>
 export default {
-  name: 'TextSetting',
+  name: 'CheckboxSetting',
   props: {
     setting: {
       type: Object,

src/components/DropdownSetting.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="setting setting-boolean">
+    <button :class="[('btn-' + (setting.value ? 'primary' : 'dark')), 'btn btn-sm']"
+            @click="$emit('input', setting.choices.urlSafe)"
+            data-bs-toggle="tooltip" data-bs-placement="bottom" :title="setting.label || setting.name"
+    >
+      <i :class="setting.icon ? 'bi-' + setting.icon : 'bi-sliders'"></i>
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'DropdownSetting',
+  props: {
+    setting: {
+      type: Object,
+      required: true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import './src/scss/variables';
+
+.setting-boolean {
+  button {
+    bottom: 0;
+  }
+
+  button {
+    z-index: 2;
+
+    &.open {
+      position: absolute;
+      left: 0;
+      border-radius: 3px 0 0 3px;
+    }
+
+    i {
+      font-size: 16px;
+
+      &.bi-paint-bucket {
+        padding-left: 1px;
+        margin-right: -1px;
+      }
+    }
+  }
+
+  input {
+    position: absolute;
+    left: 0;
+    transition: all .5s, bottom .5s;
+    height: $setting-height;
+    width: $setting-height;
+    font-size: 14px;
+    border: 1px solid #d4d4d4;
+    border-left: none;
+    border-radius: 5px 3px 3px 5px;
+    padding-left: $setting-height + 5px;
+    z-index: 1;
+
+    &:focus {
+      outline: none;
+      width: 100%;
+    }
+  }
+}
+</style>

src/components/TextSetting.vue

@@ -1,23 +1,23 @@
 <template>
-  <div class="setting setting-string">
-    <button :class="[{open: visible}, ('btn-' + (visible ? 'primary' : 'dark')), 'btn btn-sm']"
-            @click="debouncedOnButtonClicked()"
-            @focus="debouncedOnButtonClicked()"
+  <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-hash'"></i>
     </button>
     <input type="text" ref="fieldInput"
            v-bind:value="setting.value" v-show="visible"
-           @keyup.esc="onInputBlur()"
+           @keyup.esc="close()"
            @input="$emit('input', $event)"
-           @blur="onInputBlur()"
+           @blur="close()"
     >
   </div>
 </template>
 
 <script>
-import { debounce } from "debounce";
+import { debounce } from 'debounce';
 
 export default {
   name: 'TextSetting',
@@ -27,32 +27,33 @@ export default {
       required: true
     }
   },
-  created() {
-    this.debouncedOnButtonClicked = debounce(this.onButtonClicked, 200)
-  },
   data() {
     return {
-      visible: false
+      visible: false,
+      closedRecently: false
     }
   },
   methods: {
-    onButtonClicked() {
-      console.log('onButtonClicked');
-      if (this.visible) {
-        this.visible = false;
-      } else {
+    open() {
+      if (!this.closedRecently) {
         this.visible = true
         this.$nextTick(() => {
           this.$refs.fieldInput.select()
         })
       }
     },
-    onInputBlur() {
-      console.log('onInputBlur');
-      setTimeout(() => {
-        this.visible = false
-      }, 300)
-    }
+    close() {
+      this.visible = false
+
+      if (this.closedRecently) clearTimeout(this.closedRecently)
+      this.closedRecently = setTimeout(() => {
+        this.closedRecently = false
+      }, 500)
+    },
+    onButtonClicked: debounce(function () {
+      if (this.visible) this.close()
+      else this.open()
+    }, 200, true),
   }
 }
 </script>
@@ -67,17 +68,12 @@ export default {
   }
 
   button {
-    transition: all .5s;
+    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;
@@ -90,21 +86,27 @@ export default {
   }
 
   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-left: none;
-    border-radius: 5px 3px 3px 5px;
-    padding-left: $setting-height + 5px;
+    border-radius: 0 3px 3px 0;
     z-index: 1;
+    outline: none;
+  }
+
+
+  &.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;
     }
   }
 }