Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-18 02:21:47 -05:00
Code Issues Activity

Merge pull request #2546 from hswolff/ember-modals

Browse source 
Creates Ember Modal infastructure
This commit is contained in:
Hannah Wolfe 2014-04-06 22:36:47 +01:00
commit d4389c580d
17 changed files with 351 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

59
core/client/components/modal-dialog.js Normal file
View file

@ -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;

32
core/client/components/upload-modal.js Normal file
View file

@ -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;

55
core/client/controllers/modals/delete-all.js Normal file
View file

@ -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;

42
core/client/controllers/modals/delete-post.js Normal file
View file

@ -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;

14
core/client/controllers/modals/upload.js Normal file
View file

@ -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;

8
core/client/controllers/settings/user.js
View file

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

25
core/client/routes/application.js Normal file
View file

@ -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;

4
core/client/templates/application.hbs
View file

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

22
core/client/templates/components/modal-dialog.hbs Normal file
View file

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

2
core/client/templates/editor.hbs
View file

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

6
core/client/templates/modals/delete-all.hbs Normal file
View file

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

6
core/client/templates/modals/delete-post.hbs Normal file
View file

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

72
core/client/templates/modals/markdown.hbs Normal file
View file

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

9
core/client/templates/modals/upload.hbs Normal file
View file

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

2
core/client/templates/settings/debug.hbs
View file

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

4
core/client/templates/settings/general.hbs
View file

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

4
core/client/templates/settings/user.hbs
View file

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