Updates to modals

issue #432

- adds configurable button classes
- adds optional title
- added afterRender callback
- changed context for accept and reject methods
This commit is contained in:
cobbspur 2013-08-31 20:10:17 +01:00
parent 14d4145514
commit 65ce06faf3
2 changed files with 8 additions and 7 deletions

View File

@ -1,12 +1,12 @@
<aside class="modal-background"></aside>
<article class="modal{{#if options.type}}-{{options.type}}{{/if}} {{#if options.style}}modal-style-{{options.style}}{{/if}} {{options.animation}} js-modal">
<header class="modal-header"><h1>{{content.title}}</h1>{{#if options.close}}<a class="close" href="#"><span class="hidden">Close</span></a>{{/if}}</header>
{{#if content.title}}<header class="modal-header"><h1>{{content.title}}</h1>{{#if options.close}}<a class="close" href="#"><span class="hidden">Close</span></a>{{/if}}</header>{{/if}}
<section class="modal-content">
</section>
{{#if options.confirm}}
<footer class="modal-footer">
<button class="button-add js-button-accept">{{options.confirm.accept.text}}</button>
<button class="button-delete js-button-reject">{{options.confirm.reject.text}}</button>
<button class="js-button-accept {{#if options.confirm.accept.buttonClass}}{{options.confirm.accept.buttonClass}}{{else}}button-add{{/if}}">{{options.confirm.accept.text}}</button>
<button class="js-button-reject {{#if options.confirm.reject.buttonClass}}{{options.confirm.reject.buttonClass}}{{else}}button-delete{{/if}}">{{options.confirm.reject.text}}</button>
</footer>
{{/if}}
</article>

View File

@ -281,11 +281,11 @@
} else {
// Initiate functions for buttons here so models don't get tied up.
this.acceptModal = function () {
this.model.options.confirm.accept.func();
this.model.options.confirm.accept.func.call(this);
self.removeElement();
};
this.rejectModal = function () {
this.model.options.confirm.reject.func();
this.model.options.confirm.reject.func.call(this);
self.removeElement();
};
shortcut.remove("ESC");
@ -308,11 +308,12 @@
if (document.body.style.webkitFilter !== undefined) { // Detect webkit filters
$("body").addClass("blur");
}
if (_.isFunction(this.model.options.afterRender)) {
this.model.options.afterRender.call(this);
}
if (this.model.options.animation) {
this.animate(this.$el.children(".js-modal"));
}
var self = this;
$(window).on('resize', self.resize);