client/posts: add simple thumbnail editing

client/html/post_edit_sidebar.tpl

@@ -65,6 +65,14 @@
                     <div class='dropper-container'></div>
                 </section>
             <% } %>
+
+            <% if (ctx.canEditPostThumbnail) { %>
+                <section class='post-thumbnail'>
+                    <label>Thumbnail</label>
+
+                    <div class='dropper-container'></div>
+                </section>
+            <% } %>
         </div>
 
         <div class='messages'></div>

client/js/controllers/post_controller.js

@@ -118,6 +118,9 @@ class PostController {
         if (e.detail.content !== undefined) {
             post.content = e.detail.content;
         }
+        if (e.detail.thumbnail !== undefined) {
+            post.thumbnail = e.detail.thumbnail;
+        }
         post.save()
             .then(() => {
                 misc.disableExitConfirmation();

client/js/controls/post_edit_sidebar_control.js

@@ -19,13 +19,13 @@ class PostEditSidebarControl extends events.EventTarget {
 
         views.replaceContent(this._hostNode, template({
             post: this._post,
-            canEditPostContent: api.hasPrivilege('posts:edit:content'),
-            canEditPostFlags: api.hasPrivilege('posts:edit:flags'),
-            canEditPostNotes: api.hasPrivilege('posts:edit:notes'),
-            canEditPostRelations: api.hasPrivilege('posts:edit:relations'),
             canEditPostSafety: api.hasPrivilege('posts:edit:safety'),
             canEditPostSource: api.hasPrivilege('posts:edit:source'),
             canEditPostTags: api.hasPrivilege('posts:edit:tags'),
+            canEditPostRelations: api.hasPrivilege('posts:edit:relations'),
+            canEditPostNotes: api.hasPrivilege('posts:edit:notes'),
+            canEditPostFlags: api.hasPrivilege('posts:edit:flags'),
+            canEditPostContent: api.hasPrivilege('posts:edit:content'),
             canEditPostThumbnail: api.hasPrivilege('posts:edit:thumbnail'),
             canCreateAnonymousPosts: api.hasPrivilege('posts:create:anonymous'),
             canDeletePosts: api.hasPrivilege('posts:delete'),
@@ -51,14 +51,32 @@ class PostEditSidebarControl extends events.EventTarget {
                 });
         }
 
+        if (this._thumbnailInputNode) {
+            this._thumbnailFileDropper = new FileDropperControl(
+                this._thumbnailInputNode,
+                {
+                    lock: true,
+                    resolve: files => {
+                        this._newPostThumbnail = files[0];
+                    },
+                });
+        }
+
         this._post.addEventListener(
             'changeContent', e => this._evtPostContentChange(e));
+
+        this._post.addEventListener(
+            'changeThumbnail', e => this._evtPostThumbnailChange(e));
     }
 
     _evtPostContentChange(e) {
         this._contentFileDropper.reset();
     }
 
+    _evtPostThumbnailChange(e) {
+        this._thumbnailFileDropper.reset();
+    }
+
     _evtSubmit(e) {
         e.preventDefault();
         this.dispatchEvent(new CustomEvent('submit', {
@@ -86,6 +104,10 @@ class PostEditSidebarControl extends events.EventTarget {
                 content: this._newPostContent ?
                     this._newPostContent :
                     undefined,
+
+                thumbnail: this._newPostThumbnail ?
+                    this._newPostThumbnail :
+                    undefined,
             },
         }));
     }
@@ -117,6 +139,11 @@ class PostEditSidebarControl extends events.EventTarget {
     get _contentInputNode() {
         return this._formNode.querySelector('.post-content .dropper-container');
     }
+
+    get _thumbnailInputNode() {
+        return this._formNode.querySelector(
+            '.post-thumbnail .dropper-container');
+    }
 };
 
 module.exports = PostEditSidebarControl;

client/js/models/post.js

@@ -25,6 +25,7 @@ class Post extends events.EventTarget {
     get canvasHeight()   { return this._canvasHeight || 450; }
     get fileSize()       { return this._fileSize || 0; }
     get content()        { throw 'Invalid operation'; }
+    get thumbnail()      { throw 'Invalid operation'; }
 
     get flags()          { return this._flags; }
     get tags()           { return this._tags; }
@@ -42,6 +43,7 @@ class Post extends events.EventTarget {
     set safety(value)    { this._safety = value; }
     set relations(value) { this._relations = value; }
     set content(value)   { this._content = value; }
+    set thumbnail(value) { this._thumbnail = value; }
 
     static fromResponse(response) {
         const ret = new Post();
@@ -99,6 +101,10 @@ class Post extends events.EventTarget {
         if (this._content) {
             files.content = this._content;
         }
+        if (this._thumbnail) {
+            files.thumbnail = this._thumbnail;
+        }
+
 
         let promise = this._id ?
             api.put('/post/' + this._id, detail, files) :
@@ -112,6 +118,10 @@ class Post extends events.EventTarget {
                 this.dispatchEvent(
                     new CustomEvent('changeContent', {detail: {post: this}}));
             }
+            if (this._thumbnail) {
+                this.dispatchEvent(
+                    new CustomEvent('changeThumbnail', {detail: {post: this}}));
+            }
             return Promise.resolve();
         }, response => {
             return Promise.reject(response.description);