Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Modal Component
import Ember from 'ember';
export default Ember.Component.extend({
hasName: Ember.computed.notEmpty('name'),
actions: {
log(message) {
console.log(message);
}
}
});
import Ember from 'ember';
let Item = Ember.Object.extend({
title: 'Untitled',
isComplete: false,
showSidebar: false
});
export default Ember.Component.extend({
init() {
this._super(...arguments);
this.set('items', [
Item.create({ title: 'Buy milk' }),
Item.create({ title: 'Run 10k' }),
Item.create({ title: 'Have a pint', isComplete: true }),
]);
},
outstandingItems: Ember.computed.filterBy('items', 'isComplete', false),
completedItems: Ember.computed.filterBy('items', 'isComplete', true),
actions: {
log(message) {
window.alert(message);
},
toggleSidebar() {
this.toggleProperty('showSidebar');
},
add() {
this.get('items').pushObject(
Item.create({ title: 'Have another pint' }),
);
},
clear() {
let completed = this.get('completedItems');
let items = this.get('items');
items.removeObjects(completed);
},
clearAll() {
this.set('items', Ember.A());
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
tagName: 'button',
classNameBindings: ['type'],
attributeBindings: ['disabled'],
type: 'normal',
label: 'Untitled Button',
isEnabled: true,
disabled: Ember.computed('isEnabled', function() {
let isEnabled = this.get('isEnabled');
if(isEnabled === undefined) {
return false;
} else {
return !isEnabled;
}
}),
click() {
let action = this.get('onClick');
if(action) {
action();
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
});
import Ember from 'ember';
export default Ember.Component.extend({
actions: {
onCancel() {
let action = this.get('onCancel');
if(action) {
action();
}
},
onConfirm() {
let action = this.get('onConfirm');
if(action) {
action();
}
}
}
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: 'body'
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: 'header',
title: '<untitled>'
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: 'sidebar'
});
import Ember from 'ember';
export default Ember.Component.extend({
classNames: 'modal',
confirmButtonText: 'OK',
cancelButtonText: 'Cancel',
confirmButtonType: 'positive',
cancelButtonType: 'cancel',
sidebarIsVisible: false,
init() {
this._super(...arguments);
this.publicActions = {
showSidebar: () => this.send('showSidebar'),
hideSidebar: () => this.send('hideSidebar')
};
},
publicAPI: Em.computed('sidebarIsVisible', function() {
return {
sidebarIsVisible: this.get('sidebarIsVisible'),
actions: this.get('publicActions')
};
}),
actions: {
showSidebar() {
this.set('sidebarIsVisible', true);
},
hideSidebar() {
this.set('sidebarIsVisible', false);
}
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
actions: {
log(message) {
window.alert(message);
}
}
});
//from https://github.com/cibernox/ember-assign-helper/blob/master/addon/helpers/assign.js
import Ember from 'ember';
const eAssign = Ember.assign || Object.assign;
export function assign(params) {
return eAssign({}, ...params);
}
export default Ember.Helper.helper(assign);
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14pt;
background-color: #f7fafc;
color: #37474F;
}
h2 {
font-size: 16px;
line-height: 24px;
font-weight: 700;
color: #37474f;
margin: 0;
padding: 0;
}
hr {
margin: 40px;
}
.modal {
width: 100%;
max-width: 520px;
background: #fff;
border-radius: 3px;
box-shadow: 0 1px 20px 0 rgba(0,0,0,.2);
margin: 0 auto;
}
.header {
padding: 12px;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.header .left {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
min-width: -webkit-min-content;
min-width: -moz-min-content;
min-width: min-content;
}
.header .button {
float: left;
position:relative;
}
.header .title {
padding: 4px 10px;
text-align: center;
}
.header .right {
flex: 1;
min-width: min-content;
}
.header .right a {
float: right !important;
}
.footer {
padding: 12px;
text-align: right;
}
.body-container {
display: flex;
}
.sidebar {
border-right: 1px solid #ccc;
padding: 10px;
width: 120px;
padding: 30px;
font-size: 14px;
background-color: #f7fafc;
text-align: center;
box-shadow: inset 0 1px 1px 0 rgba(9,23,30,.15), inset 0 -1px 0 0 rgba(9,23,30,.12);
}
.body {
padding: 30px;
font-size: 14px;
background-color: #f7fafc;
flex: 1;
box-shadow: inset 0 1px 1px 0 rgba(9,23,30,.15), inset 0 -1px 0 0 rgba(9,23,30,.12);
}
button {
border: 1px solid rgba(0,0,0,.2);
border-radius: 3px;
padding: 5px 18px 7px;
display: inline-block;
cursor: pointer;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
box-sizing: border-box;
transition: box-shadow linear 40ms;
}
button:disabled {
opacity: .5;
pointer-events: none;
}
button.normal {
background-color: #fff;
}
button.cancel {
background-color: #f5f5f5;
}
button.destructive {
background-color: red;
color: white;
}
button.positive{
color: white;
background-color: #1f8ceb;
}
button.positive:hover {
background-color: #1271c4;
}
{{x-modal
title="Simplest"
body="Simplest"
onConfirm=(action 'log' 'confirmed!')
onCancel=(action 'log' 'cancelled!')
}}
<hr />
{{todo-list-modal}}
<hr />
{{create-segment-modal}}
<hr />
{{x-modal
title="Delete this company?"
body="Deleting a company is permanent and you will no longer be able to message or segment using this company."
showCloser=false
confirmButtonText="Delete"
confirmButtonType="destructive"
onConfirm=(action 'log' 'confirmed!')
onCancel=(action 'log' 'cancelled!')
onDismiss=(action 'log' 'dismissed!')
}}
<hr />
{{x-modal
title="Close without saving?"
body="You'll lose any changes you've made if you close this article."
confirmButtonText="Close without saving"
cancelButtonText="Go back to article"
onConfirm=(action 'log' 'confirmed!')
onCancel=(action 'log' 'cancelled!')
onDismiss=(action 'log' 'dismissed!')
}}
<hr />
{{#x-modal
onConfirm=(action 'log' 'confirmed!')
onCancel=(action 'log' 'cancelled!')
as |modal|
}}
{{modal.header title='Simplest 2'}}
{{modal.body body='Simplest 2'}}
{{/x-modal}}
<hr />
{{#x-modal
onConfirm=(action 'log' 'confirmed!')
onCancel=(action 'log' 'cancelled!')
as |modal|
}}
{{#modal.header}}
<i>Simplest</i> 3
{{/modal.header}}
{{#modal.sidebar}}
<h1>SIDEBAR!</h1>
{{/modal.sidebar}}
{{#modal.body as |body|}}
{{body.buttons
confirmButtonText="Delete"
confirmButtonType="destructive"
}}
<h2>Simplest 3</h2>
<button onclick={{action 'log' 'cancelled!'}}>Also Cancel</button>
{{/modal.body}}
{{/x-modal}}
<hr />
{{#x-modal
footerButtonLabel="Button 4a"
footerButtonOnClick=(action 'log' 'button4a!')
as |modal|
}}
{{#modal.header}}
<h3 style="color: lightgreen">Delete this company?</h3>
<h3 style="color: pink">Delete this company?</h3>
<h3 style="color: orange">Delete this company?</h3>
{{/modal.header}}
{{#modal.body as |body|}}
Deleting a company is permanent and you will no longer
be able to message or segment using this company.
<hr />
<h2>some html...</h2>
<br />
{{body.buttons
confirmButtonText="Delete"
confirmButtonType="destructive"
onConfirm=(action 'log' 'confirmed!')
onCancel=(action 'log' 'cancelled!')
onDismiss=(action 'log' 'dismissed!')
}}
{{#body.buttons as |buttons|}}
{{buttons.button
label="Button 1a"
onClick=(action 'log' 'button1a')
}}
{{buttons.button
label="Button 2a"
onClick=(action 'log' 'button2a')
}}
{{buttons.button
label="Button 3a"
onClick=(action 'log' 'button3a')
}}
{{/body.buttons}}
{{#body.buttons as |buttons|}}
{{buttons.button
label="Button 1b"
onClick=(action 'log' 'button1b')
}}
{{buttons.button
label="Button 2b"
onClick=(action 'log' 'button2b')
}}
{{buttons.button
label="Button 3b"
onClick=(action 'log' 'button3b')
}}
{{/body.buttons}}
{{/modal.body}}
{{/x-modal}}
{{#x-modal
title="Create Segment"
headerButtonText="Manage segments"
onHeaderButtonClick=(action 'log' 'header!')
footerButtonLabel="Create segment"
footerButtonOnClick=(action 'log' 'footer!')
footerButtonIsEnabled=hasName
as |x-modal|
}}
{{#x-modal.body}}
Segment name:
{{input value=name}}
{{/x-modal.body}}
{{/x-modal}}
{{#x-modal
footerButtonLabel="Footer button"
footerButtonOnClick=(action 'log' 'footer button')
as |modal|
}}
{{#modal.header}}
Todo List ({{outstandingItems.length}} left)
{{/modal.header}}
{{#modal.sidebar as |sidebar|}}
this is the side bar
<hr />
{{x-button
label="Hide"
onClick=modal.actions.hideSidebar
}}
<hr />
{{x-button
label="Clear All"
type="destructive"
onClick=(action 'clearAll')
}}
{{/modal.sidebar}}
{{#modal.body as |body|}}
{{#if outstandingItems}}
Outstanding:
<ul>
{{#each outstandingItems as |item|}}
<li>
{{input type='checkbox' checked=item.isComplete}}
{{item.title}}
</li>
{{/each}}
</ul>
{{/if}}
{{#if completedItems}}
Done:
<ul>
{{#each completedItems as |item|}}
<li>
{{input type='checkbox' checked=item.isComplete}}
{{item.title}}
</li>
{{/each}}
</ul>
{{/if}}
{{#body.buttons as |buttons|}}
{{buttons.button
label="New"
type="positive"
onClick=(action 'add')
}}
{{#if completedItems}}
{{buttons.button
label="Clear Completed"
onClick=(action 'clear')
}}
{{/if}}
{{/body.buttons}}
{{#unless body.sidebarIsVisible}}
{{#body.buttons as |buttons|}}
{{buttons.button
label="Show sidebar"
onClick=buttons.actions.showSidebar
}}
{{/body.buttons}}
{{/unless}}
{{/modal.body}}
{{/x-modal}}
<p align="center">
{{#if hasBlock}}
{{yield
(assign
publicAPI
(hash button=(component 'x-button')
)
)}}
{{else}}
{{x-button
label=cancelButtonText
type=cancelButtonType
onClick=onCancel
}}
{{x-button
label=confirmButtonText
type=confirmButtonType
onClick=onConfirm
}}
{{/if}}
</p>
{{#with
(component 'x-modal-body-buttons'
confirmButtonText=confirmButtonText
confirmButtonType=confirmButtonType
cancelButtonText=cancelButtonText
cancelButtonType=cancelButtonType
onConfirm=onConfirm
onCancel=onCancel
onDismiss=onDismiss
publicAPI=publicAPI
) as |x-modal-body-buttons|
}}
{{#if hasBlock}}
{{yield
(assign
publicAPI
(hash
buttons=(component x-modal-body-buttons)
)
)
}}
{{else}}
<p align="center">{{body}}</p>
{{component x-modal-body-buttons}}
{{/if}}
{{/with}}
<div class="left">
{{#if headerButtonText}}
{{x-button
label=headerButtonText
onClick=onHeaderButtonClick
}}
{{/if}}
</div>
<div class="title">
<h2>
{{#if hasBlock}}
{{yield}}
{{else}}
{{title}}
{{/if}}
</h2>
</div>
<div class="right">
<a><i class="i o__close o__16">x</i></a>
</div>
{{#with
(component
'x-modal-header'
title=title
headerButtonText=headerButtonText
onHeaderButtonClick=onHeaderButtonClick
) as |x-modal-header|
}}
{{#if title}}
{{component x-modal-header}}
{{else}}
{{yield
(assign
publicAPI
(hash header=(component x-modal-header))
)
}}
{{/if}}
{{/with}}
<div class="body-container">
{{#if sidebarIsVisible}}
{{yield
(assign
publicAPI
(hash sidebar=(component 'x-modal-sidebar'))
)
}}
{{/if}}
{{#with
(component
'x-modal-body'
body=body
confirmButtonText=confirmButtonText
confirmButtonType=confirmButtonType
cancelButtonText=cancelButtonText
cancelButtonType=cancelButtonType
onConfirm=onConfirm
onCancel=onCancel
onDismiss=onDismiss
publicAPI=publicAPI
) as |x-modal-body|
}}
{{#if body}}
{{component x-modal-body}}
{{else}}
{{yield (hash body=(component x-modal-body))}}
{{/if}}
{{/with}}
</div>
{{#if footerButtonLabel}}
{{component
'x-modal-footer'
buttonLabel=footerButtonLabel
buttonOnClick=footerButtonOnClick
buttonIsEnabled=footerButtonIsEnabled
}}
{{/if}}
{
"version": "0.11.0",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
"ember": "2.18.2",
"ember-data": "2.11.0",
"ember-template-compiler": "2.18.2",
"ember-testing": "2.18.2"
},
"addons": {
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment