From 0048d393ac06870359b6877dec8eb85ad4bbb28b Mon Sep 17 00:00:00 2001
From: Felix Rieseberg <felix@felixrieseberg.com>
Date: Mon, 15 Sep 2014 15:46:40 -0700
Subject: [PATCH] PSM: Cover Images

closes #3885
---
 .../assets/sass/components/uploader.scss      |  1 -
 .../sass/layouts/post-settings-menu.scss      | 14 +++++++-
 core/client/components/gh-uploader.js         | 33 +++++++++++++++++++
 core/client/controllers/post-settings-menu.js | 32 +++++++++++++++++-
 .../templates/components/gh-uploader.hbs      |  6 ++++
 core/client/templates/post-settings-menu.hbs  | 10 +-----
 6 files changed, 84 insertions(+), 12 deletions(-)
 create mode 100644 core/client/components/gh-uploader.js
 create mode 100644 core/client/templates/components/gh-uploader.hbs

diff --git a/core/client/assets/sass/components/uploader.scss b/core/client/assets/sass/components/uploader.scss
index 21ee1d7c87..fce5d1f80e 100644
--- a/core/client/assets/sass/components/uploader.scss
+++ b/core/client/assets/sass/components/uploader.scss
@@ -67,7 +67,6 @@
         position:relative;
         z-index: 700;
         color: #fff;
-        padding-left:5px;
     }
     .btn-blue {
       margin: 0 0 0 10px;
diff --git a/core/client/assets/sass/layouts/post-settings-menu.scss b/core/client/assets/sass/layouts/post-settings-menu.scss
index e1750bcff3..73b34dc642 100644
--- a/core/client/assets/sass/layouts/post-settings-menu.scss
+++ b/core/client/assets/sass/layouts/post-settings-menu.scss
@@ -62,7 +62,11 @@
     .image-uploader {
         padding-top: 35px;
         padding-bottom: 35px;
-        margin: 0 0 1.5rem 0;
+        margin: 0 0 1.6rem 0;
+
+        input {
+            width: auto;
+        }
     }
 
     .form-group {
@@ -76,8 +80,16 @@
     .nav-list {
         margin-top: 3rem;
     }
+
+    .pre-image-uploader {
+        width: auto;
+        min-height: 50px;
+        max-height: 250px;
+    }
+
 }
 
+
 .seo-preview {
     font-family: Arial, sans-serif;
     line-height: 1.46;
diff --git a/core/client/components/gh-uploader.js b/core/client/components/gh-uploader.js
new file mode 100644
index 0000000000..f0de6bfa9b
--- /dev/null
+++ b/core/client/components/gh-uploader.js
@@ -0,0 +1,33 @@
+import uploader from 'ghost/assets/lib/uploader';
+
+var PostImageUploader = Ember.Component.extend({
+    classNames: ['image-uploader', 'js-post-image-upload'],
+
+    setup: function () {
+        var $this = this.$(),
+            self = this;
+
+        uploader.call($this, {
+            editor: true,
+            fileStorage: this.get('config.fileStorage')
+        });
+
+        $this.on('uploadsuccess', function (event, result) {
+            if (result && result !== '' && result !== 'http://') {
+                self.sendAction('uploaded', result);
+            }
+        });
+
+        $this.find('.js-cancel').on('click', function () {
+            self.sendAction('canceled');
+        });
+    }.on('didInsertElement'),
+
+    removeListeners: function () {
+        var $this = this.$();
+        $this.off();
+        $this.find('.js-cancel').off();
+    }.on('willDestroyElement')
+});
+
+export default PostImageUploader;
\ No newline at end of file
diff --git a/core/client/controllers/post-settings-menu.js b/core/client/controllers/post-settings-menu.js
index 27c87391cc..e11193945b 100644
--- a/core/client/controllers/post-settings-menu.js
+++ b/core/client/controllers/post-settings-menu.js
@@ -19,7 +19,7 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
     selectedAuthor: null,
     initializeSelectedAuthor: function () {
         var self = this;
-        
+
         return this.get('author').then(function (author) {
             self.set('selectedAuthor', author);
             return author;
@@ -259,6 +259,36 @@ var PostSettingsMenuController = Ember.ObjectController.extend({
                 return;
             }
 
+            this.get('model').save(this.get('saveOptions')).catch(function (errors) {
+                self.showErrors(errors);
+                self.get('model').rollback();
+            });
+        },
+
+        setCoverImage: function (image) {
+            var self = this;
+
+            this.set('image', image);
+
+            if (this.get('isNew')) {
+                return;
+            }
+
+            this.get('model').save(this.get('saveOptions')).catch(function (errors) {
+                self.showErrors(errors);
+                self.get('model').rollback();
+            });
+        },
+
+        clearCoverImage: function () {
+            var self = this;
+
+            this.set('image', '');
+
+            if (this.get('isNew')) {
+                return;
+            }
+
             this.get('model').save(this.get('saveOptions')).catch(function (errors) {
                 self.showErrors(errors);
                 self.get('model').rollback();
diff --git a/core/client/templates/components/gh-uploader.hbs b/core/client/templates/components/gh-uploader.hbs
new file mode 100644
index 0000000000..dfd9759abf
--- /dev/null
+++ b/core/client/templates/components/gh-uploader.hbs
@@ -0,0 +1,6 @@
+<span class="media">
+    <span class="hidden">Image Upload</span>
+</span>
+<img class="js-upload-target" {{bind-attr src=image}}>
+<div class="description">Add post image <strong></strong></div>
+<input data-url="upload" class="js-fileupload main fileupload" type="file" name="uploadimage">
\ No newline at end of file
diff --git a/core/client/templates/post-settings-menu.hbs b/core/client/templates/post-settings-menu.hbs
index b8d43dcd17..e64956dd2e 100644
--- a/core/client/templates/post-settings-menu.hbs
+++ b/core/client/templates/post-settings-menu.hbs
@@ -6,15 +6,7 @@
             <button class="close icon-x post-settings-header-action" {{action "closePostSettings"}}><span class="hidden">Close</span></button>
         </div>
         <div class="post-settings-content">
-            <!--
-            <section class="image-uploader">
-                <span class="media">
-                    <span class="hidden">Image Upload</span>
-                </span>
-                <img class="js-upload-target" style="display: none;" src="">
-                <div class="description">Add image of <strong></strong></div>
-            </section>
-            -->
+            {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" image=image tagName="section"}}
             <form>
             <div class="form-group">
                 <label for="blog-title">Post URL</label>