Refactor modals

refs #5798, closes #5018
- adds new `gh-fullscreen-modal` component - modals are now specified in-context so that they can have deeper interaction with their surrounding components/controller/route, i.e. a modal component can be a thin confirm/deny wrapper over the underlying controller action keeping all context-sensitive logic in one place
- adds spin-buttons to all modals with async behaviour
- adds/improves behaviour of inline-validation in modals
- improves re-authenticate modal to properly handle validation and authentication errors

core/client/app/components/gh-ed-editor.js

@@ -57,5 +57,11 @@ export default TextArea.extend(EditorAPI, EditorShortcuts, EditorScroll, {
     enable() {
         let textarea = this.get('element');
         textarea.removeAttribute('readonly');
+    },
+
+    actions: {
+        toggleCopyHTMLModal(generatedHTML) {
+            this.attrs.toggleCopyHTMLModal(generatedHTML);
+        }
     }
 });

core/client/app/components/gh-editor.js

@@ -7,6 +7,9 @@ export default Component.extend({
     tagName: 'section',
     classNames: ['gh-view'],
 
+    showCopyHTMLModal: false,
+    copyHTMLModalContent: null,
+
     // updated when gh-ed-editor component scrolls
     editorScrollInfo: null,
     // updated when markdown is rendered
@@ -58,6 +61,11 @@ export default Component.extend({
     actions: {
         selectTab(tab) {
             this.set('activeTab', tab);
+        },
+
+        toggleCopyHTMLModal(generatedHTML) {
+            this.set('copyHTMLModalContent', generatedHTML);
+            this.toggleProperty('showCopyHTMLModal');
         }
     }
 });

core/client/app/components/gh-fullscreen-modal.js

@@ -0,0 +1,76 @@
+import Ember from 'ember';
+import LiquidTether from 'liquid-tether/components/liquid-tether';
+
+const {RSVP, isBlank, on, run} = Ember;
+const emberA = Ember.A;
+
+const FullScreenModalComponent = LiquidTether.extend({
+    to: 'fullscreen-modal',
+    target: 'document.body',
+    targetModifier: 'visible',
+    targetAttachment: 'top center',
+    attachment: 'top center',
+    tetherClass: 'fullscreen-modal',
+    overlayClass: 'fullscreen-modal-background',
+    modalPath: 'unknown',
+
+    dropdown: Ember.inject.service(),
+
+    init() {
+        this._super(...arguments);
+        this.modalPath = `modals/${this.get('modal')}`;
+    },
+
+    setTetherClass: on('init', function () {
+        let tetherClass = this.get('tetherClass');
+        let modifiers = (this.get('modifier') || '').split(' ');
+        let tetherClasses = emberA([tetherClass]);
+
+        modifiers.forEach((modifier) => {
+            if (!isBlank(modifier)) {
+                let className = `${tetherClass}-${modifier}`;
+                tetherClasses.push(className);
+            }
+        });
+
+        this.set('tetherClass', tetherClasses.join(' '));
+    }),
+
+    closeDropdowns: on('didInsertElement', function () {
+        run.schedule('afterRender', this, function () {
+            this.get('dropdown').closeDropdowns();
+        });
+    }),
+
+    actions: {
+        close() {
+            if (this.attrs.close) {
+                return this.attrs.close();
+            }
+
+            return new RSVP.Promise((resolve) => {
+                resolve();
+            });
+        },
+
+        confirm() {
+            if (this.attrs.confirm) {
+                return this.attrs.confirm();
+            }
+
+            return new RSVP.Promise((resolve) => {
+                resolve();
+            });
+        },
+
+        clickOverlay() {
+            this.send('close');
+        }
+    }
+});
+
+FullScreenModalComponent.reopenClass({
+    positionalParams: ['modal']
+});
+
+export default FullScreenModalComponent;

core/client/app/components/gh-nav-menu.js

@@ -21,8 +21,8 @@ export default Component.extend({
             this.sendAction('toggleMaximise');
         },
 
-        openModal(modal) {
-            this.sendAction('openModal', modal);
+        showMarkdownHelp() {
+            this.sendAction('showMarkdownHelp');
         },
 
         closeMobileMenu() {

core/client/app/components/gh-tag-settings-form.js

@@ -125,7 +125,7 @@ export default Component.extend({
         },
 
         deleteTag() {
-            this.sendAction('openModal', 'delete-tag', this.get('tag'));
+            this.attrs.showDeleteTagModal();
         }
     }
 

core/client/app/components/gh-user-invited.js

@@ -31,8 +31,7 @@ export default Component.extend({
                     notifications.showAlert('Invitation email was not sent.  Please try resending.', {type: 'error', key: 'invite.resend.not-sent'});
                 } else {
                     user.set('status', result.users[0].status);
-                    notifications.showNotification(notificationText);
-                    notifications.closeAlerts('invite.resend');
+                    notifications.showNotification(notificationText, {key: 'invite.resend.success'});
                 }
             }).catch((error) => {
                 notifications.showAPIError(error, {key: 'invite.resend'});
@@ -51,8 +50,7 @@ export default Component.extend({
                 if (user.get('invited')) {
                     user.destroyRecord().then(() => {
                         let notificationText = `Invitation revoked. (${email})`;
-                        notifications.showNotification(notificationText);
-                        notifications.closeAlerts('invite.revoke');
+                        notifications.showNotification(notificationText, {key: 'invite.revoke.success'});
                     }).catch((error) => {
                         notifications.showAPIError(error, {key: 'invite.revoke'});
                     });

core/client/app/components/modals/base.js

@@ -0,0 +1,45 @@
+/* global key */
+import Ember from 'ember';
+
+const {Component, on, run} = Ember;
+
+export default Component.extend({
+    tagName: 'section',
+    classNames: 'modal-content',
+
+    _previousKeymasterScope: null,
+
+    setupShortcuts: on('didInsertElement', function () {
+        run(function () {
+            document.activeElement.blur();
+        });
+        this._previousKeymasterScope = key.getScope();
+
+        key('enter', 'modal', () => {
+            this.send('confirm');
+        });
+
+        key('escape', 'modal', () => {
+            this.send('closeModal');
+        });
+
+        key.setScope('modal');
+    }),
+
+    removeShortcuts: on('willDestroyElement', function () {
+        key.unbind('enter', 'modal');
+        key.unbind('escape', 'modal');
+
+        key.setScope(this._previousKeymasterScope);
+    }),
+
+    actions: {
+        confirm() {
+            throw new Error('You must override the "confirm" action in your modal component');
+        },
+
+        closeModal() {
+            this.attrs.closeModal();
+        }
+    }
+});

core/client/app/components/modals/copy-html.js

@@ -0,0 +1,9 @@
+import Ember from 'ember';
+import ModalComponent from 'ghost/components/modals/base';
+
+const {computed} = Ember;
+const {alias} = computed;
+
+export default ModalComponent.extend({
+    generatedHtml: alias('model')
+});