Skip to content

Instantly share code, notes, and snippets.

@szalishchuk
Forked from avaz/index.js
Last active August 29, 2015 14:10
Show Gist options
  • Save szalishchuk/b8944c9b1634a364eaeb to your computer and use it in GitHub Desktop.
Save szalishchuk/b8944c9b1634a364eaeb to your computer and use it in GitHub Desktop.
import Ember from 'ember';
import ModalSupport from '../mixins/modal-support';
export default Ember.Controller.extend(ModalSupport, {
actions: {
tryModal: function() {
var _this = this;
_this.modalFor({template: 'some-template',
title: 'Some Title'})
.then(function(){
console.log('action ok was clicked');
})
.catch(function() {
console.log('action cancel was clicked');
});
}
}
});
import Ember from 'ember';
export default Ember.Mixin.create({
modal: null,
okDecision: null,
cancelDecision: null,
okDisabled: false,
cancelDisabled: false,
title: '',
okLabel: '',
cancelLabel: '',
toggleOk: function() {
this.toggleProperty('okDisabled');
},
toggleCancel: function() {
this.toggleProperty('cancelDisabled');
},
modalFor: function(options) {
this.set('title', options.title || '');
this.set('okLabel', options.okLabel || 'Confirmar');
this.set('okDisabled', options.okDisabled || false);
this.set('cancelLabel', options.cancelLabel || 'Cancelar');
this.set('cancelDisabled', options.cancelDisabled || false);
var modal = this.container.lookup('view:modal');
modal.set('controller', this);
modal.set('templateName', options.template);
modal.append();
var self = this;
self.set('modal', modal);
return new Ember.RSVP.Promise(function(resolve, reject) {
self.set('okDecision', resolve);
self.set('cancelDecision', reject);
});
},
disposeModal: function() {
this.get('modal').hide();
this.set('okDecision', null);
this.set('cancelDecision', null);
this.set('modal', null);
},
actions: {
okAction: function() {
this.get('okDecision')();
this.disposeModal();
},
cancelAction: function() {
this.get('cancelDecision')();
this.disposeModal();
}
}
});
<div class="modal fade" id="modal-id">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" {{action 'cancelAction'}}>&times;</button>
<h4 class="modal-title">{{title}}</h4>
</div>
<div class="modal-body">
{{yield}}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" {{action 'cancelAction'}} {{bind-attr disabled=cancelDisabled}}>{{cancelLabel}}</button>
<button type="button" class="btn btn-primary" {{action 'okAction'}} {{bind-attr disabled=okDisabled}}>{{okLabel}}</button>
</div>
</div>
</div>
</div>
import Ember from 'ember';
export default Ember.View.extend({
layoutName: 'modal',
hide: function() {
this.$('.modal').modal('hide');
},
show: function() {
this.$('.modal').modal({backdrop:'static'}).on('hidden.bs.modal', function() {
this.destroy();
}.bind(this));
}.on('didInsertElement')
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment