client/merge: add search button

client/css/post-detail-view.styl

@@ -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

client/html/post_merge_side.tpl

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

client/js/views/post_merge_view.js

@@ -53,25 +53,28 @@ class PostMergeView extends events.EventTarget {
     }
 
     _refreshLeftSide() {
-        views.replaceContent(
+        this._refreshSide(this._leftPost, this._leftSideNode, 'left', false);
-            this._leftSideNode,
-            sideTemplate(Object.assign({}, this._ctx, {
-                post: this._leftPost,
-                name: 'left',
-                editable: false})));
     }
 
     _refreshRightSide() {
-        views.replaceContent(
+        this._refreshSide(this._rightPost, this._rightSideNode, 'right', true);
-            this._rightSideNode,
+    }
-            sideTemplate(Object.assign({}, this._ctx, {
-                post: this._rightPost,
-                name: 'right',
-                editable: true})));
 
-        if (this._targetPostFieldNode) {
+    _refreshSide(post, sideNode, sideName, isEditable) {
-            this._targetPostFieldNode.addEventListener(
+        views.replaceContent(
-                'keydown', e => this._evtTargetPostFieldKeyDown(e));
+            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;