Merge pull request #2546 from hswolff/ember-modals

Creates Ember Modal infastructure

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;

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;

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;

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;

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;

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...');
 

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;

core/client/templates/application.hbs

@@ -4,4 +4,6 @@
 
 <main role="main" id="main">
     {{outlet}}
-</main>
+</main>
+
+{{outlet modal}}

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>

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}}

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}}

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}}

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}}

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}}

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>

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>

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">