Joost/pics
1
0
Fork 0
forked from Public/pics
Code Issues Pull Requests Projects Releases Wiki Activity

Modernise AutoSuggest and TagAutoSuggest classes.

Browse Source
This commit is contained in:
Aaron van Geffen 2021-02-15 11:55:08 +01:00
parent cae5c6e5cf
commit 889302cd36
1 changed files with 137 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

124
public/js/autosuggest.js
View File

@ -13,8 +13,10 @@ provided that the following conditions are met:
'use strict';
function AutoSuggest(opt) {
if (typeof opt.inputElement === "undefined" || typeof opt.listElement === "undefined" || typeof opt.baseUrl === "undefined" || typeof opt.appendCallback === "undefined") {
class AutoSuggest {
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', function(event) {
self.doSelection(event);
}, false);
this.input.addEventListener('keyup', function(event) {
self.onType(this, event);
}, false);
}
this.input.addEventListener('keydown', event => this.doSelection(event), false);
this.input.addEventListener('keyup', event => this.onType(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) {
return token.length >= 2;
});
let tokens = event.target.value.split(/\s+/).filter(token => 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(" "));
var request = new HttpRequest('get', request_uri, {}, this.onReceive, this);
};
let request_uri = this.baseurl + '/suggest/?type=tags&data=' + window.encodeURIComponent(tokens.join(" "));
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) {
var self = this;
fillContainer(response) {
this.selectedIndex = 0;
response.items.forEach(function(item, i) {
var node = document.createElement('li');
var text = document.createTextNode(item.label);
response.items.forEach((item, i) => {
let node = document.createElement('li');
let text = document.createTextNode(item.label);
node.jsondata = item;
node.addEventListener('click', function(event) {
self.appendCallback(this.jsondata);
self.closeContainer();
self.clearInput();
node.addEventListener('click', event => {
this.appendCallback(event.target.jsondata);
this.closeContainer();
this.clearInput();
});
node.appendChild(text);
self.container.appendChild(node);
if (self.container.children.length === 1) {
this.container.appendChild(node);
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;
TagAutoSuggest.prototype.fillContainer = function(response) {
fillContainer(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', function(event) {
self.createNewTag(function(response) {
self.appendCallback(response);
});
self.closeContainer();
self.clearInput();
node.addEventListener('click', event => {
this.createNewTag(response => this.appendCallback(response));
this.closeContainer();
this.clearInput();
});
self.container.appendChild(node);
this.container.appendChild(node);
this.selectedIndex = 0;
node.className = 'selected';
}
};
};
TagAutoSuggest.prototype.createNewTag = function(callback) {
var request_uri = this.baseurl + '/suggest/?type=createtag';
var request = new HttpRequest('post', request_uri, 'tag=' + encodeURIComponent(this.input.value), callback, this);
createNewTag(callback) {
let request_uri = this.baseurl + '/suggest/?type=createtag';
let request = new HttpRequest('post', request_uri, 'tag=' + encodeURIComponent(this.input.value), callback, this);
}
}