Updated JS files created by JSX

res/js/component/buffer.js

+class Buffer extends Component {
+    constructor(id, name, network, contextList = []) {
+        super();
+        this.id = id;
+        this.name = name;
+        this.network = network;
+        this.contextList = contextList;
+        this.render();
+        this.contextList.forEach(context => this.insert(context));
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.setAttribute('class', 'buffer');
+            var $$b = document.createElement('div');
+            $$b.setAttribute('class', 'title');
+            $$a.appendChild($$b);
+            var $$c = document.createElement('h2');
+            $$b.appendChild($$c);
+            $$c.appendChildren(this.network);
+            var $$e = document.createTextNode(' \u2013 ');
+            $$c.appendChild($$e);
+            $$c.appendChildren(this.name);
+            var $$g = document.createElement('button');
+            $$g.addEventListener('click', () => this.selected());
+            $$b.appendChild($$g);
+            $$a.appendChildren(this.insertContainer = function () {
+                var $$i = document.createElement('div');
+                $$i.setAttribute('class', 'container');
+                $$i.appendChildren((this.loadMoreBtn = new LoadMore(translation.results.show_more, this.loadMore)).elem);
+                return $$i;
+            }.call(this));
+            return $$a;
+        }.call(this);
+    }
+    loadMore() {
+    }
+    selected(isSelected) {
+        if (isSelected === undefined)
+            isSelected = !this.elem.classList.contains('selected');
+        this.elem.classList.toggle('selected', isSelected);
+        this.sendEvent('expanded', isSelected);
+    }
+    insert(context) {
+        this.insertContainer.insertBefore(context.elem, this.loadMoreBtn.elem);
+    }
+}
\ No newline at end of file

res/js/component/context.js

+class Context {
+    constructor(preview, beforeList = [], afterList = []) {
+        this.preview = preview;
+        this.beforeList = beforeList;
+        this.afterList = afterList;
+        this.render();
+        this.insertAfterTarget = this.loadAfterBtn;
+        this.beforeList.forEach(this.insertBefore);
+        this.afterList.forEach(this.insertAfter);
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.setAttribute('class', 'context');
+            $$a.appendChildren(this.containerBefore = function () {
+                var $$c = document.createElement('div');
+                $$c.setAttribute('class', 'container before');
+                $$c.appendChildren((this.loadBeforeBtn = new LoadMore(translation.context.load_earlier, this.loadBefore)).elem);
+                return $$c;
+            }.call(this));
+            $$a.appendChildren(this.preview.elem);
+            $$a.appendChildren(this.containerAfter = function () {
+                var $$g = document.createElement('div');
+                $$g.setAttribute('class', 'container after');
+                $$g.appendChildren((this.loadAfterBtn = new LoadMore(translation.context.load_later, this.loadAfter)).elem);
+                return $$g;
+            }.call(this));
+            return $$a;
+        }.call(this);
+    }
+    loadBefore() {
+    }
+    insertBefore(message) {
+        this.containerBefore.insertBefore(message.elem, this.insertBeforeTarget);
+        this.insertBeforeTarget = message.elem;
+    }
+    loadAfter() {
+    }
+    insertAfter(message) {
+        this.containerAfter.insertBefore(message.elem, this.insertAfterTarget);
+    }
+}
\ No newline at end of file

res/js/component/history.js

+const HISTORY_KEY = 'history';
+const HISTORY_MAX_LENGTH = 4;
+class HistoryView {
+    constructor() {
+        this.index = -1;
+        this.elements = this.load().map(function (query) {
+            return new HistoryElement(query);
+        });
+        this.render();
+        this.elements.reverse().forEach(elem => this.insert(elem));
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.setAttribute('class', 'history');
+            $$a.appendChildren(this.list = function () {
+                var $$c = document.createElement('ul');
+                $$c.appendChildren((this.noHistory = new NoHistoryElement()).elem);
+                return $$c;
+            }.call(this));
+            return $$a;
+        }.call(this);
+    }
+    insert(item) {
+        this.list.insertBefore(item.elem, this.list.firstChild);
+        if (this.noHistory.elem.parentNode === this.list)
+            this.list.removeChild(this.noHistory.elem);
+    }
+    add(item) {
+        if (item.query == '')
+            return;
+        const idx = this.elements.map(item => item.query).indexOf(item.query);
+        if (idx !== -1) {
+            this.list.removeChild(this.elements[idx].elem);
+            this.elements.splice(idx, 1);
+        }
+        this.elements.unshift(item);
+        this.insert(item);
+        this.truncate();
+        this.store();
+    }
+    clear() {
+        while (this.elements.length) {
+            this.list.removeChild(this.elements.pop().elem);
+        }
+        this.store();
+        this.list.appendChild(this.noHistory.elem);
+    }
+    load() {
+        const loaded = localStorage[HISTORY_KEY];
+        return JSON.parse(loaded === undefined ? '[]' : loaded);
+    }
+    store() {
+        localStorage[HISTORY_KEY] = JSON.stringify(this.elements.map(item => item.query));
+    }
+    navigateBefore() {
+        if (this.elements[this.index])
+            this.elements[this.index].selected(false);
+        this.index++;
+        this.index %= this.elements.length;
+        if (this.elements[this.index])
+            this.elements[this.index].selected(true);
+        console.log(this.index);
+    }
+    navigateLater() {
+        if (this.elements[this.index])
+            this.elements[this.index].selected(false);
+        this.index--;
+        if (this.index < 0)
+            this.index = -1;
+        else
+            this.index %= this.elements.length;
+        if (this.elements[this.index])
+            this.elements[this.index].selected(true);
+        console.log(this.index);
+    }
+    truncate() {
+        while (this.elements.length > HISTORY_MAX_LENGTH)
+            this.list.removeChild(this.elements.shift().elem);
+    }
+}
\ No newline at end of file

res/js/component/historyelement.js

+class HistoryElement {
+    constructor(query) {
+        this.query = query;
+        this.render();
+        this.elem.addEventListener('click', () => {
+            window.location.href = '#' + encodeURIComponent(this.query);
+        });
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('li');
+            var $$b = document.createElement('span');
+            $$b.setAttribute('class', 'icon');
+            $$a.appendChild($$b);
+            var $$c = document.createTextNode('history');
+            $$b.appendChild($$c);
+            $$a.appendChildren(this.query);
+            return $$a;
+        }.call(this);
+    }
+    selected(value) {
+        this.elem.classList.toggle('selected', value);
+    }
+}
\ No newline at end of file

res/js/component/loadmore.js

+class LoadMore extends Component {
+    constructor(text, eventListener) {
+        super();
+        this.render(text);
+        if (eventListener)
+            this.addEventListener('click', eventListener);
+    }
+    render(text) {
+        return this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.setAttribute('class', 'inline-button');
+            $$a.addEventListener('click', event => this.sendEvent('click', [event]));
+            $$a.appendChildren(text);
+            return $$a;
+        }.call(this);
+    }
+}
\ No newline at end of file

res/js/component/message.js

+class Message {
+    constructor(id, time, sender, content) {
+        this.id = id;
+        this.time = time;
+        this.sender = sender;
+        this.content = content;
+        this.render();
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.setAttribute('class', 'message');
+            var $$b = document.createElement('time');
+            $$a.appendChild($$b);
+            $$b.appendChildren(new Date(this.time.replace(' ', 'T') + 'Z').toLocaleString());
+            var $$d = document.createElement('div');
+            $$d.setAttribute('class', 'container');
+            $$a.appendChild($$d);
+            var $$e = document.createElement('div');
+            $$e.setAttribute('class', 'sender');
+            $$e.setAttribute('data-sendercolor', SenderColorHandler.nickToColor(this.getNick()));
+            $$d.appendChild($$e);
+            $$e.appendChildren(this.getNick());
+            var $$g = document.createElement('div');
+            $$g.setAttribute('class', 'content');
+            $$d.appendChild($$g);
+            $$g.appendChildren(MircColorHandler.render(this.content));
+            return $$a;
+        }.call(this);
+    }
+    getNick() {
+        return this.sender.split('!')[0];
+    }
+    getIdent() {
+        return this.sender.split('@')[0].split('!')[1];
+    }
+    getHost() {
+        return this.sender.split('@')[1];
+    }
+}
\ No newline at end of file

res/js/component/messagePreview.js

+class MessagePreview {
+    constructor(id, time, sender, content, preview) {
+        this.id = id;
+        this.time = time;
+        this.sender = sender;
+        this.content = content;
+        this.preview = preview;
+        this.render();
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.setAttribute('class', 'message preview');
+            var $$b = document.createElement('time');
+            $$a.appendChild($$b);
+            $$b.appendChildren(new Date(this.time.replace(' ', 'T') + 'Z').toLocaleString());
+            var $$d = document.createElement('div');
+            $$d.setAttribute('class', 'container');
+            $$a.appendChild($$d);
+            var $$e = document.createElement('div');
+            $$e.setAttribute('class', 'sender');
+            $$e.setAttribute('data-sendercolor', SenderColorHandler.nickToColor(this.getNick()));
+            $$d.appendChild($$e);
+            $$e.appendChildren(this.getNick());
+            var $$g = document.createElement('div');
+            $$g.setAttribute('class', 'content');
+            $$d.appendChild($$g);
+            $$g.appendChildren(MircColorHandler.render(this.content));
+            var $$i = document.createElement('div');
+            $$i.setAttribute('class', 'preview');
+            $$d.appendChild($$i);
+            $$i.appendChildren(MircColorHandler.highlight(this.preview));
+            return $$a;
+        }.call(this);
+    }
+    getNick() {
+        return this.sender.split('!')[0];
+    }
+    getIdent() {
+        return this.sender.split('@')[0].split('!')[1];
+    }
+    getHost() {
+        return this.sender.split('@')[1];
+    }
+}
\ No newline at end of file

res/js/component/nav.js

+const keyMapping = {
+    13: 'Enter',
+    27: 'Escape',
+    38: 'ArrowUp',
+    40: 'ArrowDown'
+};
+class Navigation extends Component {
+    constructor() {
+        super();
+        this.render();
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('div');
+            $$a.setAttribute('class', 'nav');
+            var $$b = document.createElement('div');
+            $$b.setAttribute('class', 'bar');
+            $$a.appendChild($$b);
+            var $$c = document.createElement('div');
+            $$c.setAttribute('class', 'container');
+            $$b.appendChild($$c);
+            var $$d = document.createElement('div');
+            $$d.setAttribute('class', 'searchBar');
+            $$c.appendChild($$d);
+            var $$e = document.createElement('p');
+            $$e.setAttribute('class', 'icon');
+            $$d.appendChild($$e);
+            var $$f = document.createTextNode('search');
+            $$e.appendChild($$f);
+            $$d.appendChildren(this.input = function () {
+                var $$h = document.createElement('input');
+                $$h.setAttribute('class', 'search');
+                $$h.setAttribute('placeholder', translation.search);
+                $$h.setAttribute('type', 'text');
+                $$h.setAttribute('autoComplete', 'off');
+                $$h.addEventListener('focus', () => this.elem.classList.add('focus'));
+                $$h.addEventListener('blur', () => this.elem.classList.remove('focus'));
+                $$h.addEventListener('keydown', e => this.inputKeyDown(e));
+                return $$h;
+            }.call(this));
+            var $$i = document.createElement('div');
+            $$i.setAttribute('class', 'actions');
+            $$c.appendChild($$i);
+            var $$j = document.createElement('a');
+            $$j.setAttribute('href', 'login.php?action=logout');
+            $$j.setAttribute('title', translation.logout);
+            $$j.setAttribute('class', 'icon');
+            $$i.appendChild($$j);
+            var $$k = document.createTextNode('exit_to_app');
+            $$j.appendChild($$k);
+            $$a.appendChildren((this.historyView = new HistoryView()).elem);
+            return $$a;
+        }.call(this);
+    }
+    inputKeyDown(event) {
+        switch (event.key || keyMapping[event.keyCode]) {
+        case 'ArrowUp':
+            this.historyView.navigateLater();
+            event.preventDefault();
+            break;
+        case 'ArrowDown':
+            this.historyView.navigateBefore();
+            event.preventDefault();
+            break;
+        case 'Enter':
+            this.sendEvent('search', [this.historyView.index === -1 ? this.input.value : this.historyView.elements[this.historyView.index].query]);
+            this.input.blur();
+            event.preventDefault();
+            break;
+        case 'Escape':
+            this.input.blur();
+            event.preventDefault();
+            break;
+        }
+    }
+}
\ No newline at end of file

res/js/component/nohistoryelement.js

+class NoHistoryElement {
+    constructor() {
+        this.render();
+    }
+    render() {
+        return this.elem = function () {
+            var $$a = document.createElement('p');
+            $$a.appendChildren(translation.history.error_unavailable);
+            return $$a;
+        }.call(this);
+    }
+}
\ No newline at end of file