Code Refactoring (#173)

Code Refactoring

components/autocomplete.vue

@@ -1,181 +1,207 @@
 <template>
   <div class="autocomplete-wrapper">
     <label>
-      <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
-      <ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
-        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }" :key="index">{{ suggestion }}</li>
+      <input
+        type="text"
+        :placeholder="placeholder"
+        v-model="value"
+        @input="updateSuggestions"
+        @keyup="updateSuggestions"
+        @click="updateSuggestions"
+        @keydown="handleKeystroke"
+        ref="acInput"
+        :spellcheck="spellcheck"
+        :autocapitalize="spellcheck"
+        :autocorrect="spellcheck"
+      />
+      <ul
+        class="suggestions"
+        v-if="suggestions.length > 0 && suggestionsVisible"
+        :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
+      >
+        <li
+          v-for="(suggestion, index) in suggestions"
+          @click.prevent="forceSuggestion(suggestion)"
+          :class="{ active: currentSuggestionIndex === index }"
+          :key="index"
+        >{{ suggestion }}</li>
       </ul>
     </label>
   </div>
 </template>
 
 <style lang="scss" scoped>
-  .autocomplete-wrapper {
-    position: relative;
+.autocomplete-wrapper {
+  position: relative;
 
-    input:focus+ul.suggestions,
-    ul.suggestions:hover {
+  input:focus + ul.suggestions,
+  ul.suggestions:hover {
+    display: block;
+  }
+
+  ul.suggestions {
+    display: none;
+    background-color: var(--atc-color);
+    position: absolute;
+    top: 90%;
+    margin: 0 4px;
+    left: 0;
+    padding: 0;
+    border-radius: 0 0 4px 4px;
+    z-index: 9999;
+    transition: transform 200ms ease-out;
+
+    li {
+      width: 100%;
       display: block;
-    }
+      padding: 8px 16px;
+      font-weight: 700;
+      font-size: 18px;
+      font-family: monospace;
+      white-space: pre-wrap;
 
-    ul.suggestions {
-      display: none;
-      background-color: var(--atc-color);
-      position: absolute;
-      top: 90%;
-      margin: 0 4px;
-      left: 0;
-      padding: 0;
-      border-radius: 0 0 4px 4px;
-      z-index: 9999;
-      transition: transform 200ms ease-out;
+      &:last-child {
+        border-radius: 0 0 4px 4px;
+      }
 
-      li {
-        width: 100%;
-        display: block;
-        padding: 8px 16px;
-        font-weight: 700;
-        font-size: 18px;
-        font-family: monospace;
-        white-space: pre-wrap;
-
-        &:last-child {
-          border-radius: 0 0 4px 4px;
-        }
-
-        &:hover,
-        &.active {
-          background-color: var(--ac-color);
-          color: var(--act-color);
-          cursor: pointer;
-        }
+      &:hover,
+      &.active {
+        background-color: var(--ac-color);
+        color: var(--act-color);
+        cursor: pointer;
       }
     }
   }
-
+}
 </style>
 
 <script>
-  const KEY_TAB = 9;
-  const KEY_ESC = 27;
+const KEY_TAB = 9;
+const KEY_ESC = 27;
 
-  const KEY_ARROW_UP = 38;
-  const KEY_ARROW_DOWN = 40;
+const KEY_ARROW_UP = 38;
+const KEY_ARROW_DOWN = 40;
 
-  export default {
-    props: {
-      spellcheck: {
-        type: Boolean,
-        default: true,
-        required: false
-      },
-
-      placeholder: {
-        type: String,
-        default: 'Start typing...',
-        required: false
-      },
-
-      source: {
-        type: Array,
-        required: true
-      }
+export default {
+  props: {
+    spellcheck: {
+      type: Boolean,
+      default: true,
+      required: false
     },
 
-    watch: {
-      value() {
-        this.$emit('input', this.value);
-      }
+    placeholder: {
+      type: String,
+      default: "Start typing...",
+      required: false
     },
 
-    data() {
-      return {
-        value: "application/json",
-        selectionStart: 0,
-        suggestionsOffsetLeft: 0,
-        currentSuggestionIndex: -1,
-        suggestionsVisible: false
-      }
-    },
+    source: {
+      type: Array,
+      required: true
+    }
+  },
 
-    methods: {
-      updateSuggestions(event) {
-        // Hide suggestions if ESC pressed.
-        if (event.which && event.which === KEY_ESC) {
-          event.preventDefault();
-          this.suggestionsVisible = false;
-          this.currentSuggestionIndex = -1;
-          return;
-        }
+  watch: {
+    value() {
+      this.$emit("input", this.value);
+    }
+  },
 
-        // As suggestions is a reactive property, this implicitly
-        // causes suggestions to update.
-        this.selectionStart = this.$refs.acInput.selectionStart;
-        this.suggestionsOffsetLeft = (12 * this.selectionStart);
-        this.suggestionsVisible = true;
-      },
+  data() {
+    return {
+      value: "application/json",
+      selectionStart: 0,
+      suggestionsOffsetLeft: 0,
+      currentSuggestionIndex: -1,
+      suggestionsVisible: false
+    };
+  },
 
-      forceSuggestion(text) {
-        let input = this.value.substring(0, this.selectionStart);
-        this.value = input + text;
-
-        this.selectionStart = this.value.length;
-        this.suggestionsVisible = true;
+  methods: {
+    updateSuggestions(event) {
+      // Hide suggestions if ESC pressed.
+      if (event.which && event.which === KEY_ESC) {
+        event.preventDefault();
+        this.suggestionsVisible = false;
         this.currentSuggestionIndex = -1;
-      },
+        return;
+      }
 
-      handleKeystroke(event) {
-        if (event.which === KEY_ARROW_UP) {
+      // As suggestions is a reactive property, this implicitly
+      // causes suggestions to update.
+      this.selectionStart = this.$refs.acInput.selectionStart;
+      this.suggestionsOffsetLeft = 12 * this.selectionStart;
+      this.suggestionsVisible = true;
+    },
+
+    forceSuggestion(text) {
+      let input = this.value.substring(0, this.selectionStart);
+      this.value = input + text;
+
+      this.selectionStart = this.value.length;
+      this.suggestionsVisible = true;
+      this.currentSuggestionIndex = -1;
+    },
+
+    handleKeystroke(event) {
+      switch (event.which) {
+
+        case KEY_ARROW_UP:
           event.preventDefault();
+          this.currentSuggestionIndex =this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0;
+          break;
 
-          this.currentSuggestionIndex = this.currentSuggestionIndex - 1 >= 0 ?
-            this.currentSuggestionIndex - 1 :
-            0;
-        } else if (event.which === KEY_ARROW_DOWN) {
+        case KEY_ARROW_DOWN:
           event.preventDefault();
+          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1  ? this.currentSuggestionIndex + 1
+              : this.suggestions.length - 1;
+          break;
 
-          this.currentSuggestionIndex = this.currentSuggestionIndex < this.suggestions.length - 1 ?
-            this.currentSuggestionIndex + 1 :
-            this.suggestions.length - 1;
-        }
-
-        if (event.which === KEY_TAB) {
+        case KEY_TAB:
           event.preventDefault();
-
           let activeSuggestion = this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0];
           if (activeSuggestion) {
             let input = this.value.substring(0, this.selectionStart);
             this.value = input + activeSuggestion;
           }
-        }
+          break;
+
+        default:
+          break;
       }
-    },
+    }
+  },
 
-    computed: {
-      /**
-       * Gets the suggestions list to be displayed under the input box.
-       *
-       * @returns {default.props.source|{type, required}}
-       */
-      suggestions() {
-        let input = this.value.substring(0, this.selectionStart);
+  computed: {
+    /**
+     * Gets the suggestions list to be displayed under the input box.
+     *
+     * @returns {default.props.source|{type, required}}
+     */
+    suggestions() {
+      let input = this.value.substring(0, this.selectionStart);
 
-        return this.source.filter((entry) => {
-            return entry.toLowerCase().startsWith(input.toLowerCase()) &&
-              input.toLowerCase() !== entry.toLowerCase();
+      return (
+        this.source
+          .filter(entry => {
+            return (
+              entry.toLowerCase().startsWith(input.toLowerCase()) &&
+              input.toLowerCase() !== entry.toLowerCase()
+            );
           })
           // Cut off the part that's already been typed.
-          .map((entry) => entry.substring(this.selectionStart))
+          .map(entry => entry.substring(this.selectionStart))
           // We only want the top 3 suggestions.
-          .slice(0, 3);
-      }
-    },
-
-    mounted() {
-      this.updateSuggestions({
-        target: this.$refs.acInput
-      });
+          .slice(0, 3)
+      );
     }
-  }
+  },
 
+  mounted() {
+    this.updateSuggestions({
+      target: this.$refs.acInput
+    });
+  }
+};
 </script>