From fd0e66a773ad88a86b7b7602af05caddbe5d0632 Mon Sep 17 00:00:00 2001 From: Felix Rieseberg Date: Tue, 9 Dec 2014 09:27:20 -0800 Subject: [PATCH] Tag Cover Images Closes #4506 Works just like the Post Cover Images (and uses the same component) Tiny changes to the component ensures that we can reuse it across Ghost --- ghost/admin/assets/lib/uploader.js | 4 ++++ ghost/admin/components/gh-uploader.js | 2 +- ghost/admin/controllers/settings/tags.js | 8 ++++++++ ghost/admin/models/tag.js | 3 ++- ghost/admin/templates/components/gh-uploader.hbs | 2 +- ghost/admin/templates/post-settings-menu.hbs | 2 +- .../templates/settings/tags/settings-menu.hbs | 3 ++- ghost/admin/views/settings/tags/settings-menu.js | 15 +++++++++++++++ 8 files changed, 34 insertions(+), 5 deletions(-) diff --git a/ghost/admin/assets/lib/uploader.js b/ghost/admin/assets/lib/uploader.js index 6c41db7518..ef9f1072c0 100644 --- a/ghost/admin/assets/lib/uploader.js +++ b/ghost/admin/assets/lib/uploader.js @@ -147,6 +147,7 @@ UploadUi = function ($dropzone, settings) { // This is the start point if no image exists $dropzone.find('img.js-upload-target').css({display: 'none'}); + $dropzone.find('div.description').show(); $dropzone.removeClass('pre-image-uploader image-uploader-url').addClass('image-uploader'); this.removeExtras(); this.buildExtras(); @@ -170,6 +171,7 @@ UploadUi = function ($dropzone, settings) { $dropzone.find('.js-cancel').on('click', function () { $dropzone.find('.js-url').remove(); $dropzone.find('.js-fileupload').removeClass('right'); + $dropzone.trigger('imagecleared'); self.removeExtras(); self.initWithDropzone(); }); @@ -211,10 +213,12 @@ UploadUi = function ($dropzone, settings) { // This is the start point if an image already exists $dropzone.removeClass('image-uploader image-uploader-url').addClass('pre-image-uploader'); $dropzone.find('div.description').hide(); + $dropzone.find('img.js-upload-target').show(); $dropzone.append($cancel); $dropzone.find('.js-cancel').on('click', function () { $dropzone.find('img.js-upload-target').attr({src: ''}); $dropzone.find('div.description').show(); + $dropzone.trigger('imagecleared'); $dropzone.delay(2500).animate({opacity: 100}, 1000, function () { self.init(); }); diff --git a/ghost/admin/components/gh-uploader.js b/ghost/admin/components/gh-uploader.js index c1bbfa9cf9..7bec724ceb 100644 --- a/ghost/admin/components/gh-uploader.js +++ b/ghost/admin/components/gh-uploader.js @@ -18,7 +18,7 @@ var PostImageUploader = Ember.Component.extend({ } }); - $this.find('.js-cancel').on('click', function () { + $this.on('imagecleared', function () { self.sendAction('canceled'); }); }.on('didInsertElement'), diff --git a/ghost/admin/controllers/settings/tags.js b/ghost/admin/controllers/settings/tags.js index 5b83e9bfd3..ea6239cf82 100644 --- a/ghost/admin/controllers/settings/tags.js +++ b/ghost/admin/controllers/settings/tags.js @@ -153,6 +153,14 @@ var TagsController = Ember.ArrayController.extend(PaginationMixin, { closeSubview: function () { this.set('isViewingSubview', false); + }, + + setCoverImage: function (image) { + this.saveActiveTagProperty('image', image); + }, + + clearCoverImage: function () { + this.saveActiveTagProperty('image', ''); } } }); diff --git a/ghost/admin/models/tag.js b/ghost/admin/models/tag.js index bc16f8291d..a8053bbbd2 100644 --- a/ghost/admin/models/tag.js +++ b/ghost/admin/models/tag.js @@ -10,7 +10,8 @@ var Tag = DS.Model.extend(NProgressSaveMixin, ValidationEngine, { description: DS.attr('string'), parent_id: DS.attr('number'), meta_title: DS.attr('string'), - meta_description: DS.attr('string') + meta_description: DS.attr('string'), + image: DS.attr('string') }); export default Tag; diff --git a/ghost/admin/templates/components/gh-uploader.hbs b/ghost/admin/templates/components/gh-uploader.hbs index dfd9759abf..c4adb710e4 100644 --- a/ghost/admin/templates/components/gh-uploader.hbs +++ b/ghost/admin/templates/components/gh-uploader.hbs @@ -2,5 +2,5 @@ -
Add post image
+
{{description}}
\ No newline at end of file diff --git a/ghost/admin/templates/post-settings-menu.hbs b/ghost/admin/templates/post-settings-menu.hbs index ae581942fa..1468243f46 100644 --- a/ghost/admin/templates/post-settings-menu.hbs +++ b/ghost/admin/templates/post-settings-menu.hbs @@ -7,7 +7,7 @@
- {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" image=image uploaderReference=uploaderReference tagName="section"}} + {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" description="Add post image" image=image uploaderReference=uploaderReference tagName="section"}}
diff --git a/ghost/admin/templates/settings/tags/settings-menu.hbs b/ghost/admin/templates/settings/tags/settings-menu.hbs index 0ae8c811bd..8aaac494d2 100644 --- a/ghost/admin/templates/settings/tags/settings-menu.hbs +++ b/ghost/admin/templates/settings/tags/settings-menu.hbs @@ -8,6 +8,7 @@
+ {{gh-uploader uploaded="setCoverImage" canceled="clearCoverImage" description="Add tag image" image=activeTag.image uploaderReference=uploaderReference tagName="section"}}
@@ -72,4 +73,4 @@
{{! .settings-menu-content }} {{/gh-tab-pane}}
{{! .settings-menu-pane }} -{{/gh-tabs-manager}} \ No newline at end of file +{{/gh-tabs-manager}} diff --git a/ghost/admin/views/settings/tags/settings-menu.js b/ghost/admin/views/settings/tags/settings-menu.js index a655914635..5d2906be9a 100644 --- a/ghost/admin/views/settings/tags/settings-menu.js +++ b/ghost/admin/views/settings/tags/settings-menu.js @@ -3,6 +3,21 @@ var TagsSettingsMenuView = Ember.View.extend({ return this.get('controller.model.isNew') ? 'Add Tag' : 'Save Tag'; + }), + + // This observer loads and resets the uploader whenever the active tag changes, + // ensuring that we can reuse the whole settings menu. + updateUploader: Ember.observer('controller.activeTag.image', 'controller.uploaderReference', function () { + var uploader = this.get('controller.uploaderReference'), + image = this.get('controller.activeTag.image'); + + if (uploader && uploader[0]) { + if (image) { + uploader[0].uploaderUi.initWithImage(); + } else { + uploader[0].uploaderUi.initWithDropzone(); + } + } }) });