From 1ebdfac55d7a1c66e34083ee7e3cbae2657889b5 Mon Sep 17 00:00:00 2001
From: Kevin Ansfield <kevin@lookingsideways.co.uk>
Date: Thu, 31 May 2018 09:45:58 +0100
Subject: [PATCH] Koenig - Do not show image toolbar until image is uploaded

refs https://github.com/TryGhost/Ghost/issues/9623
- update `{{koenig-card}}` to show the toolbar immediately if it has changed
- update `{{koenig-card-image}}` to only add toolbar items when an image is present
---
 .../addon/components/koenig-card-image.js     | 46 ++++++++++---------
 .../addon/components/koenig-card.js           |  8 ++++
 2 files changed, 32 insertions(+), 22 deletions(-)

diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js
index 8833e259bb..8e19932e15 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card-image.js
@@ -50,28 +50,28 @@ export default Component.extend({
         let imageStyle = this.payload.imageStyle;
         let items = [];
 
-        items.push({
-            title: 'Regular',
-            icon: 'koenig/kg-img-regular',
-            iconClass: `${!imageStyle ? 'stroke-blue-l2' : 'stroke-white'}`,
-            action: run.bind(this, this._changeImageStyle, '')
-        });
-
-        items.push({
-            title: 'Wide',
-            icon: 'koenig/kg-img-wide',
-            iconClass: `${imageStyle === 'wide' ? 'stroke-blue-l2' : 'stroke-white'}`,
-            action: run.bind(this, this._changeImageStyle, 'wide')
-        });
-
-        items.push({
-            title: 'Full',
-            icon: 'koenig/kg-img-full',
-            iconClass: `${imageStyle === 'full' ? 'stroke-blue-l2' : 'stroke-white'}`,
-            action: run.bind(this, this._changeImageStyle, 'full')
-        });
-
         if (this.payload.src) {
+            items.push({
+                title: 'Regular',
+                icon: 'koenig/kg-img-regular',
+                iconClass: `${!imageStyle ? 'stroke-blue-l2' : 'stroke-white'}`,
+                action: run.bind(this, this._changeImageStyle, '')
+            });
+
+            items.push({
+                title: 'Wide',
+                icon: 'koenig/kg-img-wide',
+                iconClass: `${imageStyle === 'wide' ? 'stroke-blue-l2' : 'stroke-white'}`,
+                action: run.bind(this, this._changeImageStyle, 'wide')
+            });
+
+            items.push({
+                title: 'Full',
+                icon: 'koenig/kg-img-full',
+                iconClass: `${imageStyle === 'full' ? 'stroke-blue-l2' : 'stroke-white'}`,
+                action: run.bind(this, this._changeImageStyle, 'full')
+            });
+
             items.push({divider: true});
 
             items.push({
@@ -82,7 +82,9 @@ export default Component.extend({
             });
         }
 
-        return {items};
+        if (items.length > 0) {
+            return {items};
+        }
     }),
 
     init() {
diff --git a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
index 540ff0e887..6d53823ff8 100644
--- a/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
+++ b/ghost/admin/lib/koenig-editor/addon/components/koenig-card.js
@@ -90,8 +90,16 @@ export default Component.extend({
             }
         }
 
+        // show the toolbar immediately if it changes whilst the card is selected
+        // caters for situations such as only showing image style buttons once an
+        // image has been uploaded
+        if (isSelected && this._lastIsSelected && this.toolbar && this.toolbar !== this._lastToolbar) {
+            run.scheduleOnce('afterRender', this, this._showToolbar);
+        }
+
         this._lastIsSelected = isSelected;
         this._lastIsEditing = isEditing;
+        this._lastToolbar = this.toolbar;
     },
 
     didInsertElement() {