Merge pull request #2786 from novaugust/ember-editor-save-and-publish

Ember editor save and publish button functionality

ghost/admin/controllers/posts/post.js

@@ -1,12 +1,17 @@
+/* global console */
 import {parseDateString, formatDate} from 'ghost/utils/date-formatting';
 
 var equal = Ember.computed.equal;
 
 var PostController = Ember.ObjectController.extend({
+    //## Editor state properties
+    isEditingSettings: false,
+    isViewingSaveTypes: false,
 
+    //## Computed post properties
     isPublished: equal('status', 'published'),
     isDraft: equal('status', 'draft'),
-    isEditingSettings: false,
+    willPublish: Ember.computed.oneWay('isPublished'),
     isStaticPage: function (key, val) {
         if (arguments.length > 1) {
             this.set('model.page', val ? 1 : 0);
@@ -51,11 +56,31 @@ var PostController = Ember.ObjectController.extend({
     publishedAtChanged: function () {
         this.set('publishedAt', formatDate(this.get('model.published_at')));
     }.observes('model.published_at'),
-        
+
     actions: {
+        save: function () {
+            var status = this.get('willPublish') ? 'published' : 'draft',
+                self = this;
+            this.set('model.status', status);
+            this.get('model').save().then(function () {
+                self.notifications.showSuccess('Post status saved as <strong>' + this.get('model.status') + '</strong>.');
+            }, this.notifications.showErrors);
+        },
+        viewSaveTypes: function () {
+            this.toggleProperty('isViewingSaveTypes');
+        },
+        setSaveType: function (newType) {
+            if (newType === 'publish') {
+                this.set('willPublish', true);
+            } else if (newType === 'draft') {
+                this.set('willPublish', false);
+            } else {
+                console.warn('Received invalid save type; ignoring.');
+            }
+        },
         editSettings: function () {
-            this.toggleProperty('isEditingSettings');
-            if (this.get('isEditingSettings')) {
+            var isEditing = this.toggleProperty('isEditingSettings');
+            if (isEditing) {
                 //Stop editing if the user clicks outside the settings view
                 Ember.run.next(this, function () {
                     var self = this;
@@ -71,9 +96,9 @@ var PostController = Ember.ObjectController.extend({
                 slug = this.get('model.slug'),
                 placeholder = this.get('slugPlaceholder'),
                 self = this;
-            
+
             newSlug = (!newSlug && placeholder) ? placeholder : newSlug;
-            
+
             // Ignore unchanged slugs
             if (slug === newSlug) {
                 return;
@@ -93,7 +118,7 @@ var PostController = Ember.ObjectController.extend({
             if (!this.get('isOnServer')) {
                 return;
             }
-            
+
             this.get('model').save('slug').then(function () {
                 self.notifications.showSuccess('Permalink successfully changed to <strong>' + this.get('model.slug') + '</strong>.');
             }, this.notifications.showErrors);
@@ -165,7 +190,7 @@ var PostController = Ember.ObjectController.extend({
             if (!this.get('isOnServer')) {
                 return;
             }
-            
+
             this.get('model').save('published_at').then(function () {
                 this.notifications.showSuccess('Publish date successfully changed to <strong>' + this.get('publishedAt') + '</strong>.');
             }, this.notifications.showErrors);
@@ -173,4 +198,4 @@ var PostController = Ember.ObjectController.extend({
     }
 });
 
-export default PostController;
+export default PostController;

ghost/admin/routes/new.js

@@ -1,12 +1,18 @@
-import styleBody from 'ghost/mixins/style-body';
 import AuthenticatedRoute from 'ghost/routes/authenticated';
+import styleBody from 'ghost/mixins/style-body';
+import Post from 'ghost/models/post';
 
 var NewRoute = AuthenticatedRoute.extend(styleBody, {
+    controllerName: 'posts/post',
     classNames: ['editor'],
 
     renderTemplate: function () {
         this.render('editor');
+    },
+
+    model: function () {
+        return Post.create();
     }
 });
 
-export default NewRoute;
+export default NewRoute;

ghost/admin/templates/-publish-bar.hbs

@@ -15,15 +15,7 @@
                 {{view "post-settings-menu-view"}}
             </section>
 
-            <section id="entry-actions" class="js-publish-splitbutton splitbutton-save">
-                <button type="button" class="js-publish-button button-save">Save Draft</button>
-                <a class="options up" data-toggle="ul" href="#" title="Post Settings"><span class="hidden">Post Settings</span></a>
-                {{!-- @TODO: implement popover --}}
-                <ul class="editor-options overlay" style="display:none">
-                    <li data-set-status="published"><a href="#"></a></li>
-                    <li data-set-status="draft"><a href="#"></a></li>
-                </ul>
-            </section>
+            {{view "editor-save-button" id="entry-actions"}}
         </div>
     </nav>
 </footer>

ghost/admin/templates/editor-save-button.hbs

@@ -0,0 +1,12 @@
+<button type="button" {{action "save"}} {{bind-attr class="view.isDangerous:button-delete:button-save :js-publish-button" }}>{{view.save-text}}</button>
+<button {{action 'viewSaveTypes'}} {{bind-attr class="controller.isViewingSaveTypes:active :options :up" }} title="Post Settings"><span class="hidden">Post Settings</span>
+</button>
+{{!-- @TODO: implement popover --}}
+<ul {{bind-attr class="controller.isViewingSaveTypes::hidden :editor-options :overlay" }}>
+    <li {{bind-attr class="controller.willPublish:active"}}>
+        <a {{action "setSaveType" "publish"}} href="#">{{view.publish-text}}</a>
+    </li>
+    <li {{bind-attr class="controller.willPublish::active"}}>
+        <a {{action "setSaveType" "draft"}} href="#">{{view.draft-text}}</a>
+    </li>
+</ul>

ghost/admin/views/editor-save-button.js

@@ -0,0 +1,23 @@
+export default Ember.View.extend({
+    templateName: 'editor-save-button',
+    tagName: 'section',
+    classNames: ['js-publish-splitbutton'],
+    classNameBindings: ['isDangerous:splitbutton-delete:splitbutton-save'],
+
+    //Tracks whether we're going to change the state of the post on save
+    isDangerous: function () {
+        return this.get('controller.isPublished') !== this.get('controller.willPublish');
+    }.property('controller.isPublished', 'controller.willPublish'),
+
+    'save-text': function () {
+        return this.get('controller.willPublish') ? this.get('publish-text') : this.get('draft-text');
+    }.property('controller.willPublish'),
+
+    'publish-text': function () {
+        return this.get('controller.isPublished') ? 'Update Post' : 'Publish Now';
+    }.property('controller.isPublished'),
+
+    'draft-text': function () {
+        return this.get('controller.isPublished') ? 'Unpublish' : 'Save Draft';
+    }.property('controller.isPublished')
+});