aboutsummaryrefslogtreecommitdiff
path: root/client/js/views
diff options
context:
space:
mode:
Diffstat (limited to 'client/js/views')
-rw-r--r--client/js/views/endless_page_view.js25
-rw-r--r--client/js/views/manual_page_view.js38
-rw-r--r--client/js/views/posts_header_view.js57
-rw-r--r--client/js/views/tags_header_view.js19
-rw-r--r--client/js/views/users_header_view.js20
5 files changed, 87 insertions, 72 deletions
diff --git a/client/js/views/endless_page_view.js b/client/js/views/endless_page_view.js
index 2728047..6e6787f 100644
--- a/client/js/views/endless_page_view.js
+++ b/client/js/views/endless_page_view.js
@@ -9,27 +9,22 @@ const pageTemplate = views.getTemplate('endless-pager-page');
class EndlessPageView {
constructor(ctx) {
this._hostNode = document.getElementById('content-holder');
+ views.replaceContent(this._hostNode, holderTemplate());
+ }
+
+ run(ctx) {
this._active = true;
this._working = 0;
this._init = false;
+ views.emptyContent(this._pagesHolderNode);
+
this.threshold = window.innerHeight / 3;
this.minPageShown = null;
this.maxPageShown = null;
this.totalPages = null;
this.currentPage = null;
- const sourceNode = holderTemplate();
- const pageHeaderHolderNode
- = sourceNode.querySelector('.page-header-holder');
- this._pagesHolderNode = sourceNode.querySelector('.pages-holder');
- views.replaceContent(this._hostNode, sourceNode);
-
- ctx.headerContext.hostNode = pageHeaderHolderNode;
- if (ctx.headerRenderer) {
- ctx.headerRenderer(ctx.headerContext);
- }
-
this._loadPage(ctx, ctx.parameters.page, true).then(pageNode => {
if (ctx.parameters.page !== 1) {
pageNode.scrollIntoView();
@@ -40,6 +35,14 @@ class EndlessPageView {
views.monitorNodeRemoval(this._pagesHolderNode, () => this._destroy());
}
+ get pageHeaderHolderNode() {
+ return this._hostNode.querySelector('.page-header-holder');
+ }
+
+ get _pagesHolderNode() {
+ return this._hostNode.querySelector('.pages-holder');
+ }
+
_destroy() {
this._active = false;
}
diff --git a/client/js/views/manual_page_view.js b/client/js/views/manual_page_view.js
index c4ce34f..3507fd7 100644
--- a/client/js/views/manual_page_view.js
+++ b/client/js/views/manual_page_view.js
@@ -56,25 +56,17 @@ function _getPages(currentPage, pageNumbers, ctx) {
class ManualPageView {
constructor(ctx) {
this._hostNode = document.getElementById('content-holder');
+ views.replaceContent(this._hostNode, holderTemplate());
+ }
- const sourceNode = holderTemplate();
- const pageContentHolderNode
- = sourceNode.querySelector('.page-content-holder');
- const pageHeaderHolderNode
- = sourceNode.querySelector('.page-header-holder');
- const pageNavNode = sourceNode.querySelector('.page-nav');
+ run(ctx) {
const currentPage = ctx.parameters.page;
-
- ctx.headerContext.hostNode = pageHeaderHolderNode;
- if (ctx.headerRenderer) {
- ctx.headerRenderer(ctx.headerContext);
- }
-
- views.replaceContent(this._hostNode, sourceNode);
+ this.clearMessages();
+ views.emptyContent(this._pageNavNode);
ctx.requestPage(currentPage).then(response => {
Object.assign(ctx.pageContext, response);
- ctx.pageContext.hostNode = pageContentHolderNode;
+ ctx.pageContext.hostNode = this._pageContentHolderNode;
ctx.pageRenderer(ctx.pageContext);
const totalPages = Math.ceil(response.total / response.pageSize);
@@ -94,7 +86,7 @@ class ManualPageView {
if (response.total) {
views.replaceContent(
- pageNavNode,
+ this._pageNavNode,
navTemplate({
prevLink: ctx.getClientUrlForPage(currentPage - 1),
nextLink: ctx.getClientUrlForPage(currentPage + 1),
@@ -114,6 +106,22 @@ class ManualPageView {
});
}
+ get pageHeaderHolderNode() {
+ return this._hostNode.querySelector('.page-header-holder');
+ }
+
+ get _pageContentHolderNode() {
+ return this._hostNode.querySelector('.page-content-holder');
+ }
+
+ get _pageNavNode() {
+ return this._hostNode.querySelector('.page-nav');
+ }
+
+ clearMessages() {
+ views.clearMessages(this._hostNode);
+ }
+
showSuccess(message) {
views.showSuccess(this._hostNode, message);
}
diff --git a/client/js/views/posts_header_view.js b/client/js/views/posts_header_view.js
index 649ed46..07f3fe0 100644
--- a/client/js/views/posts_header_view.js
+++ b/client/js/views/posts_header_view.js
@@ -1,41 +1,34 @@
'use strict';
-const router = require('../router.js');
+const events = require('../events.js');
const settings = require('../models/settings.js');
const keyboard = require('../util/keyboard.js');
const misc = require('../util/misc.js');
+const search = require('../util/search.js');
const views = require('../util/views.js');
const TagAutoCompleteControl =
require('../controls/tag_auto_complete_control.js');
const template = views.getTemplate('posts-header');
-class PostsHeaderView {
+class PostsHeaderView extends events.EventTarget {
constructor(ctx) {
+ super();
+
ctx.settings = settings.get();
this._ctx = ctx;
this._hostNode = ctx.hostNode;
views.replaceContent(this._hostNode, template(ctx));
- if (this._queryInputNode) {
- new TagAutoCompleteControl(this._queryInputNode, {addSpace: true});
- }
+ this._queryAutoCompleteControl = new TagAutoCompleteControl(
+ this._queryInputNode, {addSpace: true});
if (this._massTagInputNode) {
- new TagAutoCompleteControl(
+ this._masstagAutoCompleteControl = new TagAutoCompleteControl(
this._massTagInputNode, {addSpace: false});
}
- keyboard.bind('q', () => {
- this._formNode.querySelector('input:first-of-type').focus();
- });
-
- keyboard.bind('p', () => {
- const firstPostNode =
- document.body.querySelector('.post-list li:first-child a');
- if (firstPostNode) {
- firstPostNode.focus();
- }
- });
+ keyboard.bind('p', () => this._focusFirstPostNode());
+ search.searchInputNodeFocusHelper(this._queryInputNode);
for (let safetyButtonNode of this._safetyButtonNodes) {
safetyButtonNode.addEventListener(
@@ -51,8 +44,6 @@ class PostsHeaderView {
}
this._stopMassTagLinkNode.addEventListener(
'click', e => this._evtStopTaggingClick(e));
- // this._massTagFormNode.addEventListener(
- // 'submit', e => this._evtMassTagFormSubmit(e));
this._toggleMassTagVisibility(!!ctx.parameters.tag);
}
}
@@ -93,10 +84,11 @@ class PostsHeaderView {
_evtStopTaggingClick(e) {
e.preventDefault();
- router.show('/posts/' + misc.formatUrlParameters({
+ this._toggleMassTagVisibility(false);
+ this.dispatchEvent(new CustomEvent('navigate', {detail: {parameters: {
query: this._ctx.parameters.query,
page: this._ctx.parameters.page,
- }));
+ }}}));
}
_evtSafetyButtonClick(e, url) {
@@ -107,20 +99,35 @@ class PostsHeaderView {
browsingSettings.listPosts[safety] =
!browsingSettings.listPosts[safety];
settings.save(browsingSettings, true);
- router.show(router.url);
+ this.dispatchEvent(
+ new CustomEvent(
+ 'navigate', {detail: {parameters: this._ctx.parameters}}));
}
_evtFormSubmit(e) {
e.preventDefault();
- let params = {
+ this._queryAutoCompleteControl.hide();
+ if (this._masstagAutoCompleteControl) {
+ this._masstagAutoCompleteControl.hide();
+ }
+ let parameters = {
query: this._queryInputNode.value,
page: this._ctx.parameters.page,
};
if (this._massTagInputNode) {
- params.tag = this._massTagInputNode.value;
+ parameters.tag = this._massTagInputNode.value;
this._massTagInputNode.blur();
}
- router.show('/posts/' + misc.formatUrlParameters(params));
+ this.dispatchEvent(
+ new CustomEvent('navigate', {detail: {parameters: parameters}}));
+ }
+
+ _focusFirstPostNode() {
+ const firstPostNode =
+ document.body.querySelector('.post-list li:first-child a');
+ if (firstPostNode) {
+ firstPostNode.focus();
+ }
}
}
diff --git a/client/js/views/tags_header_view.js b/client/js/views/tags_header_view.js
index a9babc2..a395d4f 100644
--- a/client/js/views/tags_header_view.js
+++ b/client/js/views/tags_header_view.js
@@ -1,16 +1,18 @@
'use strict';
-const router = require('../router.js');
-const keyboard = require('../util/keyboard.js');
+const events = require('../events.js');
const misc = require('../util/misc.js');
+const search = require('../util/search.js');
const views = require('../util/views.js');
const TagAutoCompleteControl =
require('../controls/tag_auto_complete_control.js');
const template = views.getTemplate('tags-header');
-class TagsHeaderView {
+class TagsHeaderView extends events.EventTarget {
constructor(ctx) {
+ super();
+
this._hostNode = ctx.hostNode;
views.replaceContent(this._hostNode, template(ctx));
@@ -18,9 +20,7 @@ class TagsHeaderView {
new TagAutoCompleteControl(this._queryInputNode);
}
- keyboard.bind('q', () => {
- form.querySelector('input').focus();
- });
+ search.searchInputNodeFocusHelper(this._queryInputNode);
this._formNode.addEventListener('submit', e => this._evtSubmit(e));
}
@@ -36,10 +36,9 @@ class TagsHeaderView {
_evtSubmit(e) {
e.preventDefault();
this._queryInputNode.blur();
- router.show(
- '/tags/' + misc.formatUrlParameters({
- query: this._queryInputNode.value,
- }));
+ this.dispatchEvent(new CustomEvent('navigate', {detail: {parameters: {
+ query: this._queryInputNode.value,
+ }}}));
}
}
diff --git a/client/js/views/users_header_view.js b/client/js/views/users_header_view.js
index 8678025..21ba1f1 100644
--- a/client/js/views/users_header_view.js
+++ b/client/js/views/users_header_view.js
@@ -1,20 +1,20 @@
'use strict';
-const router = require('../router.js');
-const keyboard = require('../util/keyboard.js');
+const events = require('../events.js');
const misc = require('../util/misc.js');
+const search = require('../util/search.js');
const views = require('../util/views.js');
const template = views.getTemplate('users-header');
-class UsersHeaderView {
+class UsersHeaderView extends events.EventTarget {
constructor(ctx) {
+ super();
+
this._hostNode = ctx.hostNode;
views.replaceContent(this._hostNode, template(ctx));
- keyboard.bind('q', () => {
- this._formNode.querySelector('input').focus();
- });
+ search.searchInputNodeFocusHelper(this._queryInputNode);
this._formNode.addEventListener('submit', e => this._evtSubmit(e));
}
@@ -29,11 +29,9 @@ class UsersHeaderView {
_evtSubmit(e) {
e.preventDefault();
- this._queryInputNode.blur();
- router.show(
- '/users/' + misc.formatUrlParameters({
- query: this._queryInputNode.value,
- }));
+ this.dispatchEvent(new CustomEvent('navigate', {detail: {parameters: {
+ query: this._queryInputNode.value,
+ }}}));
}
}

© 2015 - 2026 Jakob L. Kreuze