Modernise AutoSuggest and TagAutoSuggest classes.

public/js/autosuggest.js

@@ -13,8 +13,10 @@ provided that the following conditions are met:
 
 'use strict';
 
-function AutoSuggest(opt) {
+class AutoSuggest {
-    if (typeof opt.inputElement === "undefined" || typeof opt.listElement === "undefined" || typeof opt.baseUrl === "undefined" || typeof opt.appendCallback === "undefined") {
+    constructor(opt) {
+        if (typeof opt.inputElement === "undefined" || typeof opt.listElement === "undefined" ||
+            typeof opt.baseUrl === "undefined" || typeof opt.appendCallback === "undefined") {
             return;
         }
 
@@ -24,16 +26,11 @@ function AutoSuggest(opt) {
         this.appendCallback = opt.appendCallback;
         this.baseurl = opt.baseUrl;
 
-    var self = this;
+        this.input.addEventListener('keydown', event => this.doSelection(event), false);
-    this.input.addEventListener('keydown', function(event) {
+        this.input.addEventListener('keyup', event => this.onType(event), false);
-        self.doSelection(event);
+    }
-    }, false);
-    this.input.addEventListener('keyup', function(event) {
-        self.onType(this, event);
-    }, false);
-}
 
-AutoSuggest.prototype.doSelection = function(event) {
+    doSelection(event) {
         if (typeof this.container === "undefined" || this.container.children.length === 0) {
             return;
         }
@@ -54,23 +51,21 @@ AutoSuggest.prototype.doSelection = function(event) {
                 } else if (this.selectedIndex === this.container.children.length) {
                     this.selectedIndex = 0;
                 }
-            var new_el = this.findSelectedElement().className = 'selected';
+                let new_el = this.findSelectedElement().className = 'selected';
                 break;
         }
-};
+    };
 
-AutoSuggest.prototype.findSelectedElement = function() {
+    findSelectedElement() {
         return this.container.children[this.selectedIndex];
-};
+    };
 
-AutoSuggest.prototype.onType = function(input, event) {
+    onType(event) {
         if (event.keyCode === 13 || event.keyCode === 38 || event.keyCode === 40) {
             return;
         }
 
-    var tokens = input.value.split(/\s+/).filter(function(token) {
+        let tokens = event.target.value.split(/\s+/).filter(token => token.length >= 2);
-        return token.length >= 2;
-    });
 
         if (tokens.length === 0) {
             if (typeof this.container !== "undefined") {
@@ -79,17 +74,17 @@ AutoSuggest.prototype.onType = function(input, event) {
             return false;
         }
 
-    var request_uri = this.baseurl + '/suggest/?type=tags&data=' + window.encodeURIComponent(tokens.join(" "));
+        let request_uri = this.baseurl + '/suggest/?type=tags&data=' + window.encodeURIComponent(tokens.join(" "));
-    var request = new HttpRequest('get', request_uri, {}, this.onReceive, this);
+        let request = new HttpRequest('get', request_uri, {}, this.onReceive, this);
-};
+    };
 
-AutoSuggest.prototype.onReceive = function(response, self) {
+    onReceive(response, self) {
         self.openContainer();
         self.clearContainer();
         self.fillContainer(response);
-};
+    };
 
-AutoSuggest.prototype.openContainer = function() {
+    openContainer() {
         if (this.container) {
             if (!this.container.parentNode) {
                 this.input.parentNode.appendChild(this.container);
@@ -101,76 +96,71 @@ AutoSuggest.prototype.openContainer = function() {
         this.container.className = 'autosuggest';
         this.input.parentNode.appendChild(this.container);
         return this.container;
-};
+    };
 
-AutoSuggest.prototype.clearContainer = function() {
+    clearContainer() {
         while (this.container.children.length > 0) {
             this.container.removeChild(this.container.children[0]);
         }
-};
+    };
 
-AutoSuggest.prototype.clearInput = function() {
+    clearInput() {
         this.input.value = "";
         this.input.focus();
-};
+    };
 
-AutoSuggest.prototype.closeContainer = function() {
+    closeContainer() {
         this.container.parentNode.removeChild(this.container);
-};
+    };
 
-AutoSuggest.prototype.fillContainer = function(response) {
+    fillContainer(response) {
-    var self = this;
         this.selectedIndex = 0;
-    response.items.forEach(function(item, i) {
+
-        var node = document.createElement('li');
+        response.items.forEach((item, i) => {
-        var text = document.createTextNode(item.label);
+            let node = document.createElement('li');
+            let text = document.createTextNode(item.label);
             node.jsondata = item;
-        node.addEventListener('click', function(event) {
+            node.addEventListener('click', event => {
-            self.appendCallback(this.jsondata);
+                this.appendCallback(event.target.jsondata);
-            self.closeContainer();
+                this.closeContainer();
-            self.clearInput();
+                this.clearInput();
             });
             node.appendChild(text);
-        self.container.appendChild(node);
+            this.container.appendChild(node);
-        if (self.container.children.length === 1) {
+            if (this.container.children.length === 1) {
                 node.className = 'selected';
             }
         });
-};
+    };
-
-
-function TagAutoSuggest(opt) {
-    AutoSuggest.prototype.constructor.call(this, opt);
-    this.type = "tags";
 }
 
-TagAutoSuggest.prototype = Object.create(AutoSuggest.prototype);
+class TagAutoSuggest extends AutoSuggest {
+    constructor(opt) {
+        super(opt);
+        this.type = "tags";
+    }
 
-TagAutoSuggest.prototype.constructor = TagAutoSuggest;
+    fillContainer(response) {
-
-TagAutoSuggest.prototype.fillContainer = function(response) {
         if (response.items.length > 0) {
-        AutoSuggest.prototype.fillContainer.call(this, response);
+            super.fillContainer.call(this, response);
         } else {
-        var node = document.createElement('li')
+            let node = document.createElement('li')
             node.innerHTML = "<em>Tag does not exist yet. Create it?</em>";
 
-        var self = this;
+            node.addEventListener('click', event => {
-        node.addEventListener('click', function(event) {
+                this.createNewTag(response => this.appendCallback(response));
-            self.createNewTag(function(response) {
+                this.closeContainer();
-                self.appendCallback(response);
+                this.clearInput();
-            });
-            self.closeContainer();
-            self.clearInput();
             });
 
-        self.container.appendChild(node);
+            this.container.appendChild(node);
             this.selectedIndex = 0;
             node.className = 'selected';
         }
-};
+    };
 
-TagAutoSuggest.prototype.createNewTag = function(callback) {
+    createNewTag(callback) {
-    var request_uri = this.baseurl + '/suggest/?type=createtag';
+        let request_uri = this.baseurl + '/suggest/?type=createtag';
-    var request = new HttpRequest('post', request_uri, 'tag=' + encodeURIComponent(this.input.value), callback, this);
+        let request = new HttpRequest('post', request_uri, 'tag=' + encodeURIComponent(this.input.value), callback, this);
+    }
 }