Extending halfdan’s work for UX settings improvements

hswolff · hswolff · commit a1f64d2f1fd8 · 2014-01-06T21:33:24.000-05:00
#1351 - prevent a new post (not saved on server) from updating its slug/date to the server - fix jshint - add back creation of a posts slug upon a post creation - update for rebasing - hide ability to ‘delete this post’ from post settings menu when a post hasn’t yet been saved to the server
diff --git a/core/client/assets/sass/layouts/editor.scss b/core/client/assets/sass/layouts/editor.scss
@@ -634,6 +634,20 @@ body.zen {
     position: relative;
     padding: 0;
     z-index: 1;
+
+    &.unsaved {
+        .post-settings-menu {
+            padding-bottom: 0;
+
+            .post-setting:nth-child(3) td {
+                border-bottom: none;
+            }
+
+            .delete {
+                display: none;
+            }
+        }
+    }
 }
 
 #entry-actions {
diff --git a/core/client/views/post-settings.js b/core/client/views/post-settings.js
@@ -28,9 +28,10 @@
         render: function () {
             var slug = this.model ? this.model.get('slug') : '',
                 pubDate = this.model ? this.model.get('published_at') : 'Not Published',
-                $pubDateEl = this.$('.post-setting-date');
+                $pubDateEl = this.$('.post-setting-date'),
+                $postSettingSlugEl = this.$('.post-setting-slug');
 
-            $('.post-setting-slug').val(slug);
+            $postSettingSlugEl.val(slug);
 
             // Update page status test if already a page.
             if (this.model && this.model.get('page')) {
@@ -47,20 +48,40 @@
                 this.$('.delete').removeClass('hidden');
             }
 
+            // Apply different style for model's that aren't
+            // yet persisted to the server.
+            // Mostly we're hiding the delete post UI
+            if (this.model.id === undefined) {
+                this.$el.addClass('unsaved');
+            } else {
+                this.$el.removeClass('unsaved');
+            }
+
             $pubDateEl.val(pubDate);
         },
 
         // Requests a new slug when the title was changed
         updateSlugPlaceholder: function () {
-            var title = this.model.get('title');
-
-            $.ajax({
-                url: Ghost.paths.apiRoot + '/posts/getSlug/' + encodeURIComponent(title),
-                success: function (result){
-                    // ToDo: Find better selector
-                    $('.post-setting-slug')[0].placeholder = result;
-                }
-            });
+            var title = this.model.get('title'),
+                $postSettingSlugEl = this.$('.post-setting-slug');
+
+            // If there's a title present we want to
+            // validate it against existing slugs in the db
+            // and then update the placeholder value.
+            if (title) {
+                $.ajax({
+                    url: Ghost.paths.apiRoot + '/posts/getSlug/' + encodeURIComponent(title) + '/',
+                    success: function (result) {
+                        $postSettingSlugEl.attr('placeholder', result);
+                    }
+                });
+            } else {
+                // If there's no title set placeholder to blank
+                // and don't make an ajax request to server
+                // for a proper slug (as there won't be any).
+                $postSettingSlugEl.attr('placeholder', '');
+                return;
+            }
         },
 
         selectSlug: function (e) {
@@ -74,6 +95,16 @@
                 slugEl = e.currentTarget,
                 newSlug = slugEl.value;
 
+            // If the model doesn't currently
+            // exist on the server (aka has no id)
+            // then just update the model's value
+            if (self.model.id === undefined) {
+                this.model.set({
+                    slug: newSlug
+                });
+                return;
+            }
+
             // Ignore unchanged slugs
             if (slug === newSlug) {
                 slugEl.value = slug === undefined ? '' : slug;
@@ -116,6 +147,11 @@
                 pubDateMoment,
                 newPubDateMoment;
 
+            // if there is no new pub date do nothing
+            if (!newPubDate) {
+                return;
+            }
+
             // Check for missing time stamp on new data
             // If no time specified, add a 12:00
             if (newPubDate && !newPubDate.slice(-5).match(/\d+:\d\d/)) {
@@ -164,6 +200,16 @@
                 return;
             }
 
+            // If the model doesn't currently
+            // exist on the server (aka has no id)
+            // then just update the model's value
+            if (self.model.id === undefined) {
+                this.model.set({
+                    published_at: newPubDateMoment.toDate()
+                });
+                return;
+            }
+
             // Save new 'Published' date
             this.model.save({
                 published_at: newPubDateMoment.toDate()
@@ -192,6 +238,16 @@
             var pageEl = $(e.currentTarget),
                 page = pageEl.prop('checked');
 
+            // Don't try to save
+            // if the model doesn't currently
+            // exist on the server
+            if (this.model.id === undefined) {
+                this.model.set({
+                    page: page
+                });
+                return;
+            }
+
             this.model.save({
                 page: page
             }, {
@@ -218,6 +274,11 @@
         deletePost: function (e) {
             e.preventDefault();
             var self = this;
+            // You can't delete a post
+            // that hasn't yet been saved
+            if (this.model.id === undefined) {
+                return;
+            }
             this.addSubview(new Ghost.Views.Modal({
                 model: {
                     options: {
diff --git a/core/server/api/posts.js b/core/server/api/posts.js
@@ -53,7 +53,7 @@ posts = {
                 return slug;
             }
             return when.reject({errorCode: 500, message: 'Could not generate slug'});
-        })
+        });
     },
 
     // #### Edit
diff --git a/core/server/models/base.js b/core/server/models/base.js
@@ -182,7 +182,7 @@ ghostBookshelf.Model = ghostBookshelf.Model.extend({
     generateSlug: function (Model, base, readOptions) {
         var slug,
             slugTryCount = 1,
-        // Look for a post with a matching slug, append an incrementing number if so
+            // Look for a post with a matching slug, append an incrementing number if so
             checkIfSlugExists = function (slugToFind) {
                 var args = {slug: slugToFind};
                 //status is needed for posts
diff --git a/core/server/models/post.js b/core/server/models/post.js
@@ -84,6 +84,16 @@ Post = ghostBookshelf.Model.extend({
         }
 
         ghostBookshelf.Model.prototype.creating.call(this);
+
+        // We require a slug be set when creating a new post
+        // as the database doesn't allow null slug values.
+        if (!this.get('slug')) {
+            // Generating a slug requires a db call to look for conflicting slugs
+            return ghostBookshelf.Model.generateSlug(Post, this.get('title'), {status: 'all', transacting: options.transacting})
+                .then(function (slug) {
+                    self.set({slug: slug});
+                });
+        }
     },
 
     updateTags: function (newTags, attr, options) {
@@ -389,11 +399,7 @@ Post = ghostBookshelf.Model.extend({
 
             return post.destroy(options);
         });
-    },
-    getSlug: function(options) {
-
     }
-
 });
 
 Posts = ghostBookshelf.Collection.extend({
diff --git a/core/server/models/tag.js b/core/server/models/tag.js
@@ -24,7 +24,7 @@ Tag = ghostBookshelf.Model.extend({
 
         if (!this.get('slug')) {
             // Generating a slug requires a db call to look for conflicting slugs
-            return this.generateSlug(Tag, this.get('name'))
+            return ghostBookshelf.Model.generateSlug(Tag, this.get('name'))
                 .then(function (slug) {
                     self.set({slug: slug});
                 });
diff --git a/core/server/models/user.js b/core/server/models/user.js
@@ -58,7 +58,7 @@ User = ghostBookshelf.Model.extend({
 
         if (!this.get('slug')) {
             // Generating a slug requires a db call to look for conflicting slugs
-            return this.generateSlug(User, this.get('name'))
+            return ghostBookshelf.Model.generateSlug(User, this.get('name'))
                 .then(function (slug) {
                     self.set({slug: slug});
                 });
diff --git a/core/server/views/editor.hbs b/core/server/views/editor.hbs
@@ -40,7 +40,7 @@
             <ul class="suggestions overlay"></ul>
         </section>
         <div class="right">
-            
+
             <section id="entry-controls">
                 <a class="post-settings" href="#" data-toggle=".post-settings-menu" title="Post Settings"><span class="hidden">Post Settings</span></a>
                 <div class="post-settings-menu menu-right overlay">
@@ -51,7 +51,7 @@
                                     <label for="url">URL</label>
                                 </td>
                                 <td class="post-setting-field">
-                                    <input id="url" class="post-setting-slug" type="text" placeholder="your-post-title" value="" />
+                                    <input id="url" class="post-setting-slug" type="text" placeholder="" value="" />
                                 </td>
                             </tr>
                             <tr class="post-setting">

Original file line number	Diff line number	Diff line change
`@@ -53,7 +53,7 @@ posts = {`
`53`	`53`	`return slug;`
`54`	`54`	`}`
`55`	`55`	`return when.reject({errorCode: 500, message: 'Could not generate slug'});`
`56`		`- })`
	`56`	`+ });`
`57`	`57`	`},`
`58`	`58`
`59`	`59`	`// #### Edit`