Merge pull request #655 from cobbspur/userprofile

User Profile Image Upload

core/client/models/uploadModal.js

@@ -0,0 +1,36 @@
+/*global Ghost, Backbone */
+(function () {
+    "use strict";
+    Ghost.Models.uploadModal = Backbone.Model.extend({
+
+        options: {
+            close: false,
+            type: "action",
+            style: "wide",
+            animation: 'fadeIn',
+            afterRender: function () {
+                this.$('.js-drop-zone').upload();
+            },
+            confirm: {
+                reject: {
+                    func: function () { // The function called on rejection
+                        return true;
+                    },
+                    buttonClass: true,
+                    text: "Cancel" // The reject button text
+                }
+            }
+        },
+        content: {
+            template: 'uploadImage'
+        },
+
+        initialize: function (options) {
+            this.options.id = options.id;
+            this.options.key = options.key;
+            this.options.src = options.src;
+            this.options.confirm.accept = options.accept;
+        }
+    });
+
+}());

core/client/tpl/modals/uploadImage.hbs

@@ -1,4 +1,4 @@
 <section class="js-drop-zone">
-    <img id="{{options.val}}" class="js-upload-target" src="{{options.src}}"{{#unless options.src}} style="display: none"{{/unless}} alt="logo">
+    <img id="{{options.id}}" class="js-upload-target" src="{{options.src}}"{{#unless options.src}} style="display: none"{{/unless}} alt="logo">
     <input data-url="upload" class="js-fileupload" type="file" name="uploadimage">
 </section>

core/client/tpl/settings/user-profile.hbs

@@ -8,14 +8,14 @@
     <header class="user-profile-header">
         <figure class="cover-image">
         <img id="user-cover-picture" src="{{#if cover_picture}}{{cover_picture}}{{else}}/shared/img/default-user-cover-picture.jpg{{/if}}" title="{{full_name}} Cover Image"/>
-            <button class="button-change-cover">Change Cover</button>
+            <button class="button-change-cover js-modal-cover-picture">Change Cover</button>
         </figure>
     </header>
     <form class="user-details-container" novalidate="novalidate">
         <fieldset class="user-details-top">
             <figure class="user-avatar-image">
                 <img id="user-profile-picture" src="{{#if profile_picture}}{{profile_picture}}{{else}}/shared/img/default-user-profile-picture.jpg{{/if}}" title="{{full_name}}"/>
-                <button class="button-change-avatar">Edit Picture</button>
+                <button class="button-change-avatar js-modal-profile-picture">Edit Picture</button>
             </figure>
             <label>
                 <input type="url" value="{{full_name}}" id="user-name" placeholder="Joe Bloggs" autocapitalize="off" autocorrect="off">

core/client/views/settings.js

@@ -181,47 +181,23 @@
             this.showUpload('#icon', 'icon', settings.icon);
         },
         showUpload: function (id, key, src) {
-            var self = this;
+            var self = this, upload = new Ghost.Models.uploadModal({'id': id, 'key': key, 'src': src, 'accept': {
+                func: function () { // The function called on acceptance
+                    var data = {};
+                    data[key] = this.$('.js-upload-target').attr('src');
+                    self.model.save(data, {
+                        success: self.saveSuccess,
+                        error: self.saveError
+                    });
+                    self.render();
+                    return true;
+                },
+                buttonClass: "button-save right",
+                text: "Save" // The accept button text
+            }});
+
             this.addSubview(new Ghost.Views.Modal({
-                model: {
-                    options: {
-                        close: false,
-                        type: "action",
-                        style: ["wide"],
-                        animation: 'fade',
-                        afterRender: function () {
-                            this.$('.js-drop-zone').upload();
-                        },
-                        confirm: {
-                            accept: {
-                                func: function () { // The function called on acceptance
-                                    var data = {};
-                                    data[key] = this.$('.js-upload-target').attr('src');
-                                    self.model.save(data, {
-                                        success: self.saveSuccess,
-                                        error: self.saveError
-                                    });
-                                    self.render();
-                                    return true;
-                                },
-                                buttonClass: "button-save right",
-                                text: "Save" // The accept button text
-                            },
-                            reject: {
-                                func: function () { // The function called on rejection
-                                    return true;
-                                },
-                                buttonClass: true,
-                                text: "Cancel" // The reject button text
-                            }
-                        },
-                        id: id,
-                        src: src
-                    },
-                    content: {
-                        template: 'uploadImage'
-                    }
-                }
+                model: upload
             }));
         },
         templateName: 'settings/general',
@@ -264,7 +240,7 @@
         }
     });
 
-     // ### User profile
+    // ### User profile
     Settings.user = Settings.Pane.extend({
         id: 'user',
 
@@ -274,7 +250,38 @@
 
         events: {
             'click .button-save': 'saveUser',
-            'click .button-change-password': 'changePassword'
+            'click .button-change-password': 'changePassword',
+            'click .js-modal-cover-picture': 'showCoverPicture',
+            'click .js-modal-profile-picture': 'showProfilePicture'
+        },
+        showCoverPicture: function () {
+            var user = this.model.toJSON();
+            this.showUpload('#user-cover-picture', 'cover_picture', user.cover_picture);
+        },
+        showProfilePicture: function (e) {
+            e.preventDefault();
+            var user = this.model.toJSON();
+            this.showUpload('#user-profile-picture', 'profile_picture', user.profile_picture);
+        },
+        showUpload: function (id, key, src) {
+            var self = this, upload = new Ghost.Models.uploadModal({'id': id, 'key': key, 'src': src, 'accept': {
+                func: function () { // The function called on acceptance
+                    var data = {};
+                    data[key] = this.$('.js-upload-target').attr('src');
+                    self.model.save(data, {
+                        success: self.saveSuccess,
+                        error: self.saveError
+                    });
+                    self.render();
+                    return true;
+                },
+                buttonClass: "button-save right",
+                text: "Save" // The accept button text
+            }});
+
+            this.addSubview(new Ghost.Views.Modal({
+                model: upload
+            }));
         },
 
 

core/server/views/default.hbs

@@ -81,8 +81,10 @@
         <script src="/public/models/widget.js"></script>
         <script src="/public/models/settings.js"></script>
         <script src="/public/models/themes.js"></script>
+        <script src="/public/models/uploadModal.js"></script>
         <!-- // require '/public/views/*' -->
         <script src="/public/views/base.js"></script>
+    <script src="/public/models/uploadModal.js"></script>
         <script src="/public/views/dashboard.js"></script>
         <script src="/public/views/blog.js"></script>
         <script src="/public/views/editor.js"></script>