From fa9bddb208ad6f2e0434af6021672e104586740e Mon Sep 17 00:00:00 2001
From: Harry Wolff <hswolff@gmail.com>
Date: Mon, 31 Mar 2014 00:07:05 -0400
Subject: [PATCH] Creates Ember Modal infastructure

resolves #2416

This is a pretty large commit but what it's adding are pretty fundamental to the admin app.

- Creates top level actions on the ApplicationRoute for opening and closing modals.  This allows sending the 'openModal' action from any template to open a modal.

- Every modal template lives in 'templates/modals/{{modalName}}'

- Each modal can have a backing controller of the same name that can provide additional control for that modal.  Those controllers reside in 'controllers/modals/{{modalName}}'

- Created the ModalDialog component which is where all the logic for the component resides.  It's not at 100% parity with the existing Ghost modal system but it has the foundation for further fleshing out.  It currently accepts parameters for styling how the modal should appear, which previously was defined in JS files in the Backbone admin.

- This creates the 'delete all posts', 'delete this post', 'markdown', and 'upload' modal.  Some are in more stages of completion than others, but I wanted to just get the foundation in place as fast as possible.

- This also creates the UploadModal component which is a subclass of the ModalDialog component.  The reason for this subclassing is that the UploadModal component directly accesses the DOM and when that occurs in Ember it should remain in a component definition.  It's ready for extending to reach parity.  Note: depending on needs the base ModalDialog class may need to be modified.
---
 core/client/components/modal-dialog.js        | 59 +++++++++++++++
 core/client/components/upload-modal.js        | 32 +++++++++
 core/client/controllers/modals/delete-all.js  | 55 ++++++++++++++
 core/client/controllers/modals/delete-post.js | 42 +++++++++++
 core/client/controllers/modals/upload.js      | 14 ++++
 core/client/controllers/settings/user.js      |  8 ---
 core/client/routes/application.js             | 25 +++++++
 core/client/templates/application.hbs         |  4 +-
 .../templates/components/modal-dialog.hbs     | 22 ++++++
 core/client/templates/editor.hbs              |  2 +-
 core/client/templates/modals/delete-all.hbs   |  6 ++
 core/client/templates/modals/delete-post.hbs  |  6 ++
 core/client/templates/modals/markdown.hbs     | 72 +++++++++++++++++++
 core/client/templates/modals/upload.hbs       |  9 +++
 core/client/templates/settings/debug.hbs      |  2 +-
 core/client/templates/settings/general.hbs    |  4 +-
 core/client/templates/settings/user.hbs       |  4 +-
 17 files changed, 351 insertions(+), 15 deletions(-)
 create mode 100644 core/client/components/modal-dialog.js
 create mode 100644 core/client/components/upload-modal.js
 create mode 100644 core/client/controllers/modals/delete-all.js
 create mode 100644 core/client/controllers/modals/delete-post.js
 create mode 100644 core/client/controllers/modals/upload.js
 create mode 100644 core/client/routes/application.js
 create mode 100644 core/client/templates/components/modal-dialog.hbs
 create mode 100644 core/client/templates/modals/delete-all.hbs
 create mode 100644 core/client/templates/modals/delete-post.hbs
 create mode 100644 core/client/templates/modals/markdown.hbs
 create mode 100644 core/client/templates/modals/upload.hbs

diff --git a/core/client/components/modal-dialog.js b/core/client/components/modal-dialog.js
new file mode 100644
index 0000000000..1fca4218f5
--- /dev/null
+++ b/core/client/components/modal-dialog.js
@@ -0,0 +1,59 @@
+var ModalDialog = Ember.Component.extend({
+    didInsertElement: function () {
+        this.$('#modal-container').fadeIn(50);
+
+        this.$('.modal-background').show().fadeIn(10, function () {
+            $(this).addClass('in');
+        });
+
+        this.$('.js-modal').addClass('in');
+    },
+
+    willDestroyElement: function () {
+
+        this.$('.js-modal').removeClass('in');
+
+        this.$('.modal-background').removeClass('in');
+
+        return this._super();
+    },
+
+    actions: {
+        closeModal: function () {
+            this.sendAction();
+        },
+        confirm: function (type) {
+            var func = this.get('confirm.' + type + '.func');
+            if (typeof func === 'function') {
+                func();
+            }
+            this.sendAction();
+        }
+    },
+
+    klass: function () {
+        var classNames = [];
+
+        classNames.push(this.get('type') ? 'modal-' + this.get('type') : 'modal');
+
+        if (this.get('style')) {
+            this.get('style').split(',').forEach(function (style) {
+                classNames.push('modal-style-' + style);
+            });
+        }
+
+        classNames.push(this.get('animation'));
+
+        return classNames.join(' ');
+    }.property('type', 'style', 'animation'),
+
+    acceptButtonClass: function () {
+        return this.get('confirm.accept.buttonClass') ? this.get('confirm.accept.buttonClass') : 'button-add';
+    }.property('confirm.accept.buttonClass'),
+
+    rejectButtonClass: function () {
+        return this.get('confirm.reject.buttonClass') ? this.get('confirm.reject.buttonClass') : 'button-delete';
+    }.property('confirm.reject.buttonClass')
+});
+
+export default ModalDialog;
diff --git a/core/client/components/upload-modal.js b/core/client/components/upload-modal.js
new file mode 100644
index 0000000000..9a11a63ed6
--- /dev/null
+++ b/core/client/components/upload-modal.js
@@ -0,0 +1,32 @@
+/*global console */
+
+import ModalDialog from 'ghost/components/modal-dialog';
+
+var UploadModal = ModalDialog.extend({
+    layoutName: 'components/modal-dialog',
+
+    didInsertElement: function () {
+        this._super();
+
+        // @TODO: get this real
+        console.log('UploadController:afterRender');
+        // var filestorage = $('#' + this.options.model.id).data('filestorage');
+        // this.$('.js-drop-zone').upload({fileStorage: filestorage});
+    },
+
+    actions: {
+        closeModal: function () {
+            this.sendAction();
+        },
+        confirm: function (type) {
+            var func = this.get('confirm.' + type + '.func');
+            if (typeof func === 'function') {
+                func();
+            }
+            this.sendAction();
+        }
+    },
+
+});
+
+export default UploadModal;
diff --git a/core/client/controllers/modals/delete-all.js b/core/client/controllers/modals/delete-all.js
new file mode 100644
index 0000000000..b3112fcdf4
--- /dev/null
+++ b/core/client/controllers/modals/delete-all.js
@@ -0,0 +1,55 @@
+/*global alert */
+
+var DeleteAllController = Ember.Controller.extend({
+    confirm: {
+        accept: {
+            func: function () {
+                // @TODO make the below real :)
+                alert('Deleting everything!');
+                // $.ajax({
+                //     url: Ghost.paths.apiRoot + '/db/',
+                //     type: 'DELETE',
+                //     headers: {
+                //         'X-CSRF-Token': $("meta[name='csrf-param']").attr('content')
+                //     },
+                //     success: function onSuccess(response) {
+                //         if (!response) {
+                //             throw new Error('No response received from server.');
+                //         }
+                //         if (!response.message) {
+                //             throw new Error(response.detail || 'Unknown error');
+                //         }
+
+                //         Ghost.notifications.addItem({
+                //             type: 'success',
+                //             message: response.message,
+                //             status: 'passive'
+                //         });
+
+                //     },
+                //     error: function onError(response) {
+                //         var responseText = JSON.parse(response.responseText),
+                //             message = responseText && responseText.error ? responseText.error : 'unknown';
+                //         Ghost.notifications.addItem({
+                //             type: 'error',
+                //             message: ['A problem was encountered while deleting content from your blog. Error: ', message].join(''),
+                //             status: 'passive'
+                //         });
+
+                //     }
+                // });
+            },
+            text: "Delete",
+            buttonClass: "button-delete"
+        },
+        reject: {
+            func: function () {
+                return true;
+            },
+            text: "Cancel",
+            buttonClass: "button"
+        }
+    }
+});
+
+export default DeleteAllController;
diff --git a/core/client/controllers/modals/delete-post.js b/core/client/controllers/modals/delete-post.js
new file mode 100644
index 0000000000..43d7d7687f
--- /dev/null
+++ b/core/client/controllers/modals/delete-post.js
@@ -0,0 +1,42 @@
+/*global alert */
+
+var DeletePostController = Ember.Controller.extend({
+    confirm: {
+        accept: {
+            func: function () {
+                // @TODO: make this real
+                alert('Deleting post');
+                // self.model.destroy({
+                //     wait: true
+                // }).then(function () {
+                //     // Redirect to content screen if deleting post from editor.
+                //     if (window.location.pathname.indexOf('editor') > -1) {
+                //         window.location = Ghost.paths.subdir + '/ghost/content/';
+                //     }
+                //     Ghost.notifications.addItem({
+                //         type: 'success',
+                //         message: 'Your post has been deleted.',
+                //         status: 'passive'
+                //     });
+                // }, function () {
+                //     Ghost.notifications.addItem({
+                //         type: 'error',
+                //         message: 'Your post could not be deleted. Please try again.',
+                //         status: 'passive'
+                //     });
+                // });
+            },
+            text: "Delete",
+            buttonClass: "button-delete"
+        },
+        reject: {
+            func: function () {
+                return true;
+            },
+            text: "Cancel",
+            buttonClass: "button"
+        }
+    },
+});
+
+export default DeletePostController;
diff --git a/core/client/controllers/modals/upload.js b/core/client/controllers/modals/upload.js
new file mode 100644
index 0000000000..67a4d67b01
--- /dev/null
+++ b/core/client/controllers/modals/upload.js
@@ -0,0 +1,14 @@
+
+var UploadController = Ember.Controller.extend({
+    confirm: {
+        reject: {
+            func: function () { // The function called on rejection
+                return true;
+            },
+            buttonClass: true,
+            text: "Cancel" // The reject button text
+        }
+    }
+});
+
+export default UploadController;
\ No newline at end of file
diff --git a/core/client/controllers/settings/user.js b/core/client/controllers/settings/user.js
index 6c8ff4b6f3..f53900f337 100644
--- a/core/client/controllers/settings/user.js
+++ b/core/client/controllers/settings/user.js
@@ -16,14 +16,6 @@ var SettingsUserController = Ember.Controller.extend({
     }.property('user.image'),
 
     actions: {
-        cover: function () {
-            alert('@TODO: Show Upload modal for cover');
-        },
-
-        image: function () {
-            alert('@TODO: Show Upload modal for image');
-        },
-
         save: function () {
             alert('@TODO: Saving user...');
 
diff --git a/core/client/routes/application.js b/core/client/routes/application.js
new file mode 100644
index 0000000000..a7403b0b4c
--- /dev/null
+++ b/core/client/routes/application.js
@@ -0,0 +1,25 @@
+var ApplicationRoute = Ember.Route.extend({
+    actions: {
+        openModal: function (modalName, model) {
+            modalName = 'modals/' + modalName;
+            // We don't always require a modal to have a controller
+            // so we're skipping asserting if one exists
+            if (this.controllerFor(modalName, true)) {
+                this.controllerFor(modalName).set('model', model);
+            }
+            return this.render(modalName, {
+                into: 'application',
+                outlet: 'modal'
+            });
+        },
+
+        closeModal: function () {
+            return this.disconnectOutlet({
+                outlet: 'modal',
+                parentView: 'application'
+            });
+        }
+    }
+});
+
+export default ApplicationRoute;
\ No newline at end of file
diff --git a/core/client/templates/application.hbs b/core/client/templates/application.hbs
index d457f81c51..94e993d2f8 100644
--- a/core/client/templates/application.hbs
+++ b/core/client/templates/application.hbs
@@ -4,4 +4,6 @@
 
 <main role="main" id="main">
     {{outlet}}
-</main>
\ No newline at end of file
+</main>
+
+{{outlet modal}}
\ No newline at end of file
diff --git a/core/client/templates/components/modal-dialog.hbs b/core/client/templates/components/modal-dialog.hbs
new file mode 100644
index 0000000000..4a1e973532
--- /dev/null
+++ b/core/client/templates/components/modal-dialog.hbs
@@ -0,0 +1,22 @@
+<div id="modal-container" {{action bubbles=false preventDefault=false}}>
+    <article {{bind-attr class="klass :js-modal"}}>
+        <section class="modal-content">
+            {{#if title}}<header class="modal-header"><h1>{{title}}</h1></header>{{/if}}
+            {{#if showClose}}<a class="close" href="" title="Close" {{action "closeModal"}}><span class="hidden">Close</span></a>{{/if}}
+            <section class="modal-body">
+                {{yield}}
+            </section>
+            {{#if confirm}}
+            <footer class="modal-footer">
+                <button {{bind-attr class="acceptButtonClass :js-button-accept"}} {{action "confirm" "accept"}}>
+                    {{confirm.accept.text}}
+                </button>
+                <button {{bind-attr class="rejectButtonClass :js-button-reject"}} {{action "confirm" "reject"}}>
+                    {{confirm.reject.text}}
+                </button>
+            </footer>
+            {{/if}}
+        </section>
+    </article>
+</div>
+<div class="modal-background fade" {{action "closeModal"}}></div>
diff --git a/core/client/templates/editor.hbs b/core/client/templates/editor.hbs
index ec61e7465b..35fe6c3523 100644
--- a/core/client/templates/editor.hbs
+++ b/core/client/templates/editor.hbs
@@ -8,7 +8,7 @@
     <section class="entry-markdown active">
         <header class="floatingheader">
             <small>Markdown</small>
-            <a class="markdown-help" href="#"><span class="hidden">What is Markdown?</span></a>
+            <a class="markdown-help" href="" {{action "openModal" "markdown"}}><span class="hidden">What is Markdown?</span></a>
         </header>
         <section id="entry-markdown-content" class="entry-markdown-content">
             {{-codemirror value=markdown scrollPosition=view.scrollPosition}}
diff --git a/core/client/templates/modals/delete-all.hbs b/core/client/templates/modals/delete-all.hbs
new file mode 100644
index 0000000000..251fd644a2
--- /dev/null
+++ b/core/client/templates/modals/delete-all.hbs
@@ -0,0 +1,6 @@
+{{#modal-dialog action="closeModal" type="action" style="wide,centered" animation="fade"
+    title="Would you really like to delete all content from your blog?" confirm=confirm}}
+
+    <p>This is permanent! No backups, no restores, no magic undo button. <br /> We warned you, ok?</p>
+
+{{/modal-dialog}}
diff --git a/core/client/templates/modals/delete-post.hbs b/core/client/templates/modals/delete-post.hbs
new file mode 100644
index 0000000000..742aa76525
--- /dev/null
+++ b/core/client/templates/modals/delete-post.hbs
@@ -0,0 +1,6 @@
+{{#modal-dialog action="closeModal" showClose=true type="action" style="wide,centered" animation="fade"
+    title="Are you sure you want to delete this post?" confirm=confirm}}
+
+    <p>This is permanent! No backups, no restores, no magic undo button. <br /> We warned you, ok?</p>
+
+{{/modal-dialog}}
diff --git a/core/client/templates/modals/markdown.hbs b/core/client/templates/modals/markdown.hbs
new file mode 100644
index 0000000000..25479a6d1d
--- /dev/null
+++ b/core/client/templates/modals/markdown.hbs
@@ -0,0 +1,72 @@
+{{#modal-dialog action="closeModal" showClose=true style="wide" animation="fade"
+    title="Markdown Help"}}
+    <section class="markdown-help-container">
+        <table class="modal-markdown-help-table">
+            <thead>
+            <tr>
+                <th>Result</th>
+                <th>Markdown</th>
+                <th>Shortcut</th>
+            </tr>
+            </thead>
+            <tbody>
+            <tr>
+                <td><strong>Bold</strong></td>
+                <td>**text**</td>
+                <td>Ctrl / Cmd + B</td>
+            </tr>
+            <tr>
+                <td><em>Emphasize</em></td>
+                <td>*text*</td>
+                <td>Ctrl / Cmd + I</td>
+            </tr>
+            <tr>
+                <td>Strike-through</td>
+                <td>~~text~~</td>
+                <td>Ctrl + Alt + U</td>
+            </tr>
+            <tr>
+                <td><a href="#">Link</a></td>
+                <td>[title](http://)</td>
+                <td>Ctrl + Shift + L</td>
+            </tr>
+            <tr>
+                <td>Image</td>
+                <td>![alt](http://)</td>
+                <td>Ctrl + Shift + I</td>
+            </tr>
+            <tr>
+                <td>List</td>
+                <td>* item</td>
+                <td>Ctrl + L</td>
+            </tr>
+            <tr>
+                <td>Blockquote</td>
+                <td>> quote</td>
+                <td>Ctrl + Q</td>
+            </tr>
+            <tr>
+                <td>H1</td>
+                <td># Heading</td>
+                <td>Ctrl + Alt + 1</td>
+            </tr>
+            <tr>
+                <td>H2</td>
+                <td>## Heading</td>
+                <td>Ctrl + Alt + 2</td>
+            </tr>
+            <tr>
+                <td>H3</td>
+                <td>### Heading</td>
+                <td>Ctrl + Alt + 3</td>
+            </tr>
+            <tr>
+                <td><code>Inline Code</code></td>
+                <td>`code`</td>
+                <td>Cmd + K / Ctrl + Shift + K</td>
+            </tr>
+            </tbody>
+        </table>
+        For further Markdown syntax reference: <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank">Markdown Documentation</a>
+    </section>
+{{/modal-dialog}}
diff --git a/core/client/templates/modals/upload.hbs b/core/client/templates/modals/upload.hbs
new file mode 100644
index 0000000000..cfac1c7711
--- /dev/null
+++ b/core/client/templates/modals/upload.hbs
@@ -0,0 +1,9 @@
+{{#upload-modal action="closeModal" close=true type="action" style="wide"
+   animation="fade"}}
+
+  <section class="js-drop-zone">
+      <img class="js-upload-target" {{bind-attr src=src}} alt="logo">
+      <input data-url="upload" class="js-fileupload main" type="file" name="uploadimage" {{#if options.acceptEncoding}}accept="{{options.acceptEncoding}}"{{/if}}>
+  </section>
+
+{{/upload-modal}}
diff --git a/core/client/templates/settings/debug.hbs b/core/client/templates/settings/debug.hbs
index 2950b9ea17..bde0ba063e 100644
--- a/core/client/templates/settings/debug.hbs
+++ b/core/client/templates/settings/debug.hbs
@@ -26,7 +26,7 @@
         <fieldset>
             <div class="form-group">
                 <label>Delete all Content</label>
-                <a href="javascript:void(0);" class="button-delete js-delete">Delete</a>
+                <a href="javascript:void(0);" class="button-delete js-delete" {{action "openModal" "deleteAll"}}>Delete</a>
                 <p>Delete all posts and tags from the database.</p>
             </div>
         </fieldset>
diff --git a/core/client/templates/settings/general.hbs b/core/client/templates/settings/general.hbs
index 51b2f8c191..d6f33ad816 100644
--- a/core/client/templates/settings/general.hbs
+++ b/core/client/templates/settings/general.hbs
@@ -31,7 +31,7 @@
                 {{#if logo}}
                     <a class="js-modal-logo" href="#"><img id="blog-logo" src="{{logo}}" alt="logo"></a>
                 {{else}}
-                    <a class="button-add js-modal-logo" >Upload Image</a>
+                    <a class="button-add js-modal-logo" {{action 'openModal' 'upload'}}>Upload Image</a>
                 {{/if}}
                 <p>Display a sexy logo for your publication</p>
             </div>
@@ -41,7 +41,7 @@
                 {{#if cover}}
                     <a class="js-modal-cover" href="#"><img id="blog-cover" src="{{cover}}" alt="cover photo"></a>
                 {{else}}
-                    <a class="button-add js-modal-cover">Upload Image</a>
+                    <a class="button-add js-modal-cover" {{action 'openModal' 'upload'}}>Upload Image</a>
                 {{/if}}
                 <p>Display a cover image on your site</p>
             </div>
diff --git a/core/client/templates/settings/user.hbs b/core/client/templates/settings/user.hbs
index 2b2abdd5eb..6679c1b449 100644
--- a/core/client/templates/settings/user.hbs
+++ b/core/client/templates/settings/user.hbs
@@ -11,7 +11,7 @@
     <header class="user-profile-header">
         <img id="user-cover" class="cover-image" {{bind-attr src=cover title=coverTitle}} />
 
-        <a class="edit-cover-image js-modal-cover button" {{action 'cover'}}>Change Cover</a>
+        <a class="edit-cover-image js-modal-cover button" {{action 'openModal' 'upload'}}>Change Cover</a>
     </header>
 
     <form class="user-profile" novalidate="novalidate">
@@ -20,7 +20,7 @@
 
             <figure class="user-image">
                 <div id="user-image" class="img" {{bind-attr style=image}} href="#"><span class="hidden">{{name}}'s Picture</span></div>
-                <a {{action 'image'}} class="edit-user-image js-modal-image">Edit Picture</a>
+                <a href="" {{action 'openModal' 'upload'}} class="edit-user-image js-modal-image">Edit Picture</a>
             </figure>
 
             <div class="form-group">