From 6f04cf5dd5d81c58f262b139972645cd45657ec1 Mon Sep 17 00:00:00 2001
From: Janne Koschinski <janne@kuschku.de>
Date: Mon, 27 Mar 2017 19:31:12 +0200
Subject: [PATCH] Updated JS files created by JSX
---
res/js/component/buffer.js | 47 ++++++++++++++++
res/js/component/context.js | 42 +++++++++++++++
res/js/component/history.js | 81 ++++++++++++++++++++++++++++
res/js/component/historyelement.js | 24 +++++++++
res/js/component/loadmore.js | 17 ++++++
res/js/component/message.js | 40 ++++++++++++++
res/js/component/messagePreview.js | 45 ++++++++++++++++
res/js/component/nav.js | 76 ++++++++++++++++++++++++++
res/js/component/nohistoryelement.js | 12 +++++
9 files changed, 384 insertions(+)
create mode 100644 res/js/component/buffer.js
create mode 100644 res/js/component/context.js
create mode 100644 res/js/component/history.js
create mode 100644 res/js/component/historyelement.js
create mode 100644 res/js/component/loadmore.js
create mode 100644 res/js/component/message.js
create mode 100644 res/js/component/messagePreview.js
create mode 100644 res/js/component/nav.js
create mode 100644 res/js/component/nohistoryelement.js
diff --git a/res/js/component/buffer.js b/res/js/component/buffer.js
new file mode 100644
index 0000000..b5aa4ad
--- /dev/null
+++ b/res/js/component/buffer.js
@@ -0,0 +1,47 @@
+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
diff --git a/res/js/component/context.js b/res/js/component/context.js
new file mode 100644
index 0000000..ba81735
--- /dev/null
+++ b/res/js/component/context.js
@@ -0,0 +1,42 @@
+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
diff --git a/res/js/component/history.js b/res/js/component/history.js
new file mode 100644
index 0000000..a744951
--- /dev/null
+++ b/res/js/component/history.js
@@ -0,0 +1,81 @@
+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
diff --git a/res/js/component/historyelement.js b/res/js/component/historyelement.js
new file mode 100644
index 0000000..11f165f
--- /dev/null
+++ b/res/js/component/historyelement.js
@@ -0,0 +1,24 @@
+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
diff --git a/res/js/component/loadmore.js b/res/js/component/loadmore.js
new file mode 100644
index 0000000..68404a0
--- /dev/null
+++ b/res/js/component/loadmore.js
@@ -0,0 +1,17 @@
+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
diff --git a/res/js/component/message.js b/res/js/component/message.js
new file mode 100644
index 0000000..1af906c
--- /dev/null
+++ b/res/js/component/message.js
@@ -0,0 +1,40 @@
+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
diff --git a/res/js/component/messagePreview.js b/res/js/component/messagePreview.js
new file mode 100644
index 0000000..831760c
--- /dev/null
+++ b/res/js/component/messagePreview.js
@@ -0,0 +1,45 @@
+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
diff --git a/res/js/component/nav.js b/res/js/component/nav.js
new file mode 100644
index 0000000..bdbb562
--- /dev/null
+++ b/res/js/component/nav.js
@@ -0,0 +1,76 @@
+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
diff --git a/res/js/component/nohistoryelement.js b/res/js/component/nohistoryelement.js
new file mode 100644
index 0000000..4d3e138
--- /dev/null
+++ b/res/js/component/nohistoryelement.js
@@ -0,0 +1,12 @@
+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
--
GitLab