diff --git a/res/css/_content.sass b/res/css/_content.sass index 3a54a1d80ce3ff15d68a5008d59167c04bc8f34b..8e3fbe7c9690ef727a81479f11c1b9470f8af98e 100644 --- a/res/css/_content.sass +++ b/res/css/_content.sass @@ -177,8 +177,8 @@ &:before content: "" display: inline-block - height: 20px - width: 20px + height: 24px + width: 24px background-image: url(../icons/dots-horizontal.svg) background-size: cover vertical-align: top diff --git a/res/css/search.css b/res/css/search.css index 24ee91484ff32e911cc7f55d8b0a10aa4bed53b3..7101bccda0e063a65a53907c8a35b3c48de51c6a 100644 --- a/res/css/search.css +++ b/res/css/search.css @@ -550,8 +550,8 @@ body { .results .buffer .container > .inline-button:before { content: ""; display: inline-block; - height: 20px; - width: 20px; + height: 24px; + width: 24px; background-image: url(../icons/dots-horizontal.svg); background-size: cover; vertical-align: top; diff --git a/res/js/component/app.js b/res/js/component/app.js new file mode 100644 index 0000000000000000000000000000000000000000..60a3597425688a45f60aef6cda74e8029fb67c69 --- /dev/null +++ b/res/js/component/app.js @@ -0,0 +1,91 @@ +const statehandler = new StateHandler(); + +class App { + constructor() { + this.navigation = new Navigation(); + this.buffers = []; + this.loadingQuery = 0; + this.render(); + this.navigation.addEventListener('search', query => { + this.search(query); + }); + statehandler.addEventListener('update', query => { + this.search(query); + }); + statehandler.init(); + } + + render() { + this.elem = function () { + var $$a = document.createElement('div'); + $$a.appendChildren(this.navigation.elem); + $$a.appendChildren(this.resultContainer = function () { + var $$d = document.createElement('div'); + $$d.setAttribute('class', 'results'); + return $$d; + }.call(this)); + return $$a; + }.call(this); + this.buffers.forEach(buffer => this.insert(buffer)); + } + + search(query, sender, buffer, network, before, since) { + this.clear(); + this.navigation.input.blur(); + this.navigation.historyView.resetNavigation(); + this.navigation.historyView.add(new HistoryElement(query)); + this.navigation.input.value = query; + statehandler.replace(query, sender, buffer, network, before, since); + if (query.trim() === '') + return; + this.loadingQuery++; + const queryId = this.loadingQuery; + load('web/search/', statehandler.parse()).then(result => { + if (this.loadingQuery !== queryId) + return; + this.buffers = result.map(buffer => { + return new Buffer(buffer.bufferid, buffer.buffername, buffer.networkname, buffer.hasmore, buffer.messages.map(msg => { + return new Context(new Message(msg.messageid, msg.time, msg.sender, msg.message)); + })); + }); + this.buffers.forEach(buffer => this.insert(buffer)); + }); + } + + clear() { + while (this.buffers.length) { + const buffer = this.buffers.pop(); + this.resultContainer.removeChild(buffer.elem); + } + } + + clearAll() { + this.clear(); + this.navigation.historyView.clear(); + statehandler.clear(); + } + + insert(buffer) { + this.resultContainer.appendChild(buffer.elem); + buffer.addEventListener('loadMore', () => this.bufferLoadMore(buffer)); + } + + bufferLoadMore(buffer) { + if (buffer.loading) + return; + buffer.setLoading(true); + const offset = buffer.count(); + console.log(offset); + load('web/searchbuffer/', statehandler.parse({ + buffer: buffer.id, + offset: offset + })).then(result => { + buffer.load(result); + buffer.setLoading(false); + }); + } +} + +moment.locale(navigator.languages || navigator.language); +const app = new App(); +document.body.insertBefore(app.elem, document.body.firstChild); \ No newline at end of file