ulysia/szurubooru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

client/merge: add search button

Browse source
This commit is contained in:
rr- 2017-01-03 21:58:32 +01:00
parent 9edaaffec2
commit 58fabc6e36
3 changed files with 46 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
client/css/post-detail-view.styl
View file

@ -14,9 +14,6 @@
.right-post-container
width: 47%
float: right
input[type=text]
width: 8em
margin-top: -2px
.post-mirror
margin-bottom: 1em
&:after
@ -31,3 +28,10 @@
margin-right: 0.35em
.target-post, .target-post-content
margin: 1em 0
header
margin-bottom: 1em
label
display: inline-block
margin-top: 2px
input[type=text]
width: 6em

14
client/html/post_merge_side.tpl
View file

@ -1,8 +1,12 @@
<% if (ctx.editable) { %>
<p>Post # <input type='text' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>'/></p>
<% } else { %>
<p>Post # <input type='text' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>' readonly/></p>
<% } %>
<header>
<label for='merge-id-<%- ctx.name %>'>Post #</label>
<% if (ctx.editable) { %>
<input type='text' id='merge-id-<%-ctx.name %>' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>'/>
<input type='button' value='Search'/>
<% } else { %>
<input type='text' id='merge-id-<%-ctx.name %>' pattern='^[0-9]+$' value='<%- ctx.post ? ctx.post.id : '' %>' readonly/>
<% } %>
</header>
<% if (ctx.post) { %>
<div class='post-thumbnail'>

52
client/js/views/post_merge_view.js
View file

@ -53,25 +53,28 @@ class PostMergeView extends events.EventTarget {
}
_refreshLeftSide() {
views.replaceContent(
this._leftSideNode,
sideTemplate(Object.assign({}, this._ctx, {
post: this._leftPost,
name: 'left',
editable: false})));
this._refreshSide(this._leftPost, this._leftSideNode, 'left', false);
}
_refreshRightSide() {
views.replaceContent(
this._rightSideNode,
sideTemplate(Object.assign({}, this._ctx, {
post: this._rightPost,
name: 'right',
editable: true})));
this._refreshSide(this._rightPost, this._rightSideNode, 'right', true);
}
if (this._targetPostFieldNode) {
this._targetPostFieldNode.addEventListener(
'keydown', e => this._evtTargetPostFieldKeyDown(e));
_refreshSide(post, sideNode, sideName, isEditable) {
views.replaceContent(
sideNode,
sideTemplate(Object.assign({}, this._ctx, {
post: post,
name: sideName,
editable: isEditable})));
let postIdNode = sideNode.querySelector('input[type=text]');
let searchButtonNode = sideNode.querySelector('input[type=button]');
if (isEditable) {
postIdNode.addEventListener(
'keydown', e => this._evtPostSearchFieldKeyDown(e));
searchButtonNode.addEventListener(
'click', e => this._evtPostSearchButtonClick(e, postIdNode));
}
}
@ -94,7 +97,7 @@ class PostMergeView extends events.EventTarget {
}));
}
_evtTargetPostFieldKeyDown(e) {
_evtPostSearchFieldKeyDown(e) {
const key = e.which;
if (key !== KEY_RETURN) {
return;
@ -103,7 +106,17 @@ class PostMergeView extends events.EventTarget {
e.preventDefault();
this.dispatchEvent(new CustomEvent('select', {
detail: {
postId: this._targetPostFieldNode.value,
postId: e.target.value,
},
}));
}
_evtPostSearchButtonClick(e, textNode) {
e.target.blur();
e.preventDefault();
this.dispatchEvent(new CustomEvent('select', {
detail: {
postId: textNode.value,
},
}));
}
@ -119,11 +132,6 @@ class PostMergeView extends events.EventTarget {
get _rightSideNode() {
return this._hostNode.querySelector('.right-post-container');
}
get _targetPostFieldNode() {
return this._formNode.querySelector(
'.post-mirror input:not([readonly])[type=text]');
}
}
module.exports = PostMergeView;