public
Created

Ember Modal Bootstrap Pane with layout

  • Download Gist
gistfile1.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111
var get = Ember.get;
 
var modalPaneBackdrop = '<div class="modal-backdrop"></div>';
 
App.ModalPane = Ember.View.extend(Ember.TextSupport, {
layoutName: "shared/modal_pane",
classNames: 'modal',
heading: null,
message: null,
primary: null,
secondary: null,
showBackdrop: true,
isModalInParent: false,
autoFocus: true,
destroyOnClose: true, // Set to false when using this as the view of a state manager
headerViewClass: Ember.View.extend({
tagName: 'h3',
template: Ember.Handlebars.compile('{{parentView.heading}}')
}),
primaryClassNames: function(){
var classNames = ['btn', 'btn-primary'];
if (this.get('primaryDisabled'))
classNames.push('disabled');
return classNames.join(" ");
}.property('primaryDisabled'),
secondaryClassNames: function(){
var classNames = ['btn', 'btn-secondary'];
if (this.get('secondaryDisabled'))
classNames.push('disabled');
return classNames.join(" ");
}.property('secondaryDisabled'),
 
didInsertElement: function() {
if (get(this, 'showBackdrop')) this._appendBackdrop();
if (get(this, 'autoFocus')){
this.focusDialog();
}
this._setupDocumentKeyHandler();
},
 
focusDialog: function(){
this.$('input[type=text],textarea').first().focus();
},
 
willDestroyElement: function() {
if (this._backdrop) this._backdrop.remove();
this._removeDocumentKeyHandler();
},
 
insertNewline: function(event){
this._triggerCallbackAndDestroy({ primary: true }, event);
},
 
keyPress: function(event) {
if (event.keyCode === 27) {
this._triggerCallbackAndDestroy({ close: true }, event);
}
},
 
click: function(event) {
var target = $(event.target),
targetRel = target.attr('rel');
if (targetRel === 'close') {
this._triggerCallbackAndDestroy({ close: true }, event);
} else if (targetRel === 'primary') {
this._triggerCallbackAndDestroy({ primary: true }, event);
} else if (targetRel === 'secondary') {
this._triggerCallbackAndDestroy({ secondary: true }, event);
}
},
 
_appendBackdrop: function() {
var parentLayer = this.$().parent(),
backdrop = $(modalPaneBackdrop);
if (this.get('isModalInParent')) {
backdrop.addClass('is-modal-in-parent');
}
this._backdrop = backdrop.appendTo(parentLayer);
},
 
_setupDocumentKeyHandler: function() {
var cc = this,
handler = function(event) {
cc.keyPress(event);
};
jQuery(window.document).bind('keyup', handler);
this._keyUpHandler = handler;
},
 
_removeDocumentKeyHandler: function() {
jQuery(window.document).unbind('keyup', this._keyUpHandler);
},
 
_triggerCallbackAndDestroy: function(options, event) {
if (this.callback) this.callback(options, event);
if (get(this, 'destroyOnClose')){
this.destroy();
}
event.preventDefault();
}
});
 
App.ModalPane.reopenClass({
popup: function(options) {
var modalPane;
if (!options) options = {};
modalPane = this.create(options);
modalPane.append();
return modalPane;
}
});
modal_pane.handlebars
Handlebars
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
{{#if heading}}
<div class="modal-header">
<a href="#" class="close" rel="close">×</a>
{{view headerViewClass}}
</div>
{{/if}}
<div class="modal-body">
{{# if message }}
{{{message}}}
{{else}}
{{yield}}
{{/if}}
</div>
<div class="modal-footer">
{{#if primary}}
<a href="#" {{bindAttr class="primaryClassNames"}} rel="primary">{{primary}}</a>
{{/if}}
{{#if secondary}}
<a href="#" {{bindAttr class="secondaryClassNames"}} rel="secondary">{{secondary}}</a>
{{/if}}
</div>

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.