Skip to content

Instantly share code, notes, and snippets.

@benoror
Last active July 5, 2016 01:14
Show Gist options
  • Save benoror/bd59a8e2839dd88e9a0adb2f7a660ead to your computer and use it in GitHub Desktop.
Save benoror/bd59a8e2839dd88e9a0adb2f7a660ead to your computer and use it in GitHub Desktop.
modal-message component pattern - part of post: https://medium.com/p/dc024bfa203c
<!--- ... --->
{{#if isShowingModal}}
{{modal-message
close=(route-action 'closeModalDialog')
options=modalOptions}}
{{/if}}
<!--- ... --->
import Ember from 'ember';
const {
Component,
get,
set,
computed
} = Ember;
export default Component.extend({
mainActionText: 'Ok',
mainActionPendingText: 'Ok',
secondActionText: 'Cancelar',
secondActionPendingText: 'Cancelar',
didReceiveAttrs() {
set(this, 'mainAction', get(this, 'close'));
set(this, 'secondAction', get(this, 'close'));
this.setProperties(get(this, 'options') || {});
},
showInput: computed('type', function() {
return get(this, 'type') === 'prompt';
}),
showCancel: computed('type', function() {
const type = get(this, 'type');
return type && type !== 'alert';
}),
actions: {
triggerMainAction() {
const mainAction = get(this, 'mainAction');
const type = get(this, 'type');
if(type === 'prompt') {
mainAction(get(this, 'prompt'));
} else if(type === 'confirm') {
mainAction(true);
}
return get(this, 'close')();
}
}
});
{{#modal-dialog close=close targetAttachment="center"}}
<div class="form-group">
{{#if title}}
<h3>{{title}}</h3>
{{/if}}
{{#if label}}
<div>{{label}}</div>
{{/if}}
{{#if showInput}}
<div class="col-md-12">
{{input value=prompt
data-autoid="modal-prompt-input"
class="form-control small"}}
</div>
{{/if}}
</div>
{{#if showCancel}}
{{async-button default=secondActionText
action=secondAction
class="btn btn-xs"
data-autoid="modal-second-action"
pending=secondActionPendingText}}
{{/if}}
{{async-button default=mainActionText
action="triggerMainAction"
class="btn btn-xs btn-secondary submit"
data-autoid="modal-main-action-submit"
pending=mainActionPendingText}}
{{/modal-dialog}}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment