Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
New Twiddle
import Ember from 'ember';
import { A } from '@ember/array';
import { parallel } from 'ember-animated';
import move from 'ember-animated/motions/move';
import scale from 'ember-animated/motions/scale';
import { fadeIn, fadeOut } from 'ember-animated/motions/opacity';
import adjustCSS from 'ember-animated/motions/adjust-css';
import { easeIn, easeOut, easeInAndOut } from 'ember-animated/easings/cosine';
export default Ember.Controller.extend({
appName: 'Ember Twiddle',
// change this to modify the animation speed
duration: 2500,
// a list of would be models or items
things: null,
totalThings: 0,
// sortedThings: Ember.computed('things.[]', function() {
// return this.things.reverse();
// }),
init() {
this.things = A([this.getNextItem()]);
this.selectedThings = A([]);
this.totalThings = 1;
},
actions: {
addItem() {
if(this.totalThings >= ITEMS.length) return;
let item = this.getNextItem();
if (item) {
this.totalThings++;
this.things.unshiftObject(item);
}
},
select(thing) {
this.selectedThings.addObject(thing);
this.things.removeObject(thing);
},
deselect(thing) {
this.things.unshiftObject(thing);
this.selectedThings.removeObject(thing);
},
dismiss(thing) {
this.selectedThings.removeObject(thing);
}
},
*mainTransition({ insertedSprites, keptSprites, removedSprites, sentSprites, receivedSprites }) {
console.log('MAIN', arguments[0]);
for (let sprite of insertedSprites) {
let finalBounds = sprite.finalBounds;
// sprite.startAtPixel({ x: 0, y: 0 });
sprite.startTranslatedBy(0, -finalBounds.height*3);
// sprite.scale(1.25, 1.25);
// sprite.applyStyles({
// // 'transform': scale(1.5)
// // 'width': finalBounds.width * 1.2,
// // 'height': finalBounds.height * 1.2,
// });
parallel(move(sprite, scale(sprite)), fadeIn(sprite));
// scale(sprite);
}
keptSprites.forEach(move);
receivedSprites.forEach(move);
// sentSprites.forEach(move);
},
*selectedTransition({ keptSprites, removedSprites, sentSprites, receivedSprites }) {
console.log('SELECTED', arguments[0]);
keptSprites.forEach(move);
receivedSprites.forEach(move);
removedSprites.forEach(fadeOut);
},
// // manages vertical motion during list sorting
// *transition({ keptSprites, duration }) {
// for (let sprite of keptSprites) {
// adjustCSS.property('margin-left');
// adjustCSS.property('margin-right');
// move(sprite, { duration, easing: easeOut });
// }
// },
getNextItem() {
return ITEMS[this.totalThings] || null;
},
});
const ITEMS = [
{ name: "Dwight", image: 'https://pbs.twimg.com/profile_images/118888142/Brian_Baumgartner_134198_400x400.jpg' },
{ name: "Stanley", image: 'https://pbs.twimg.com/profile_images/1839546020/florida_stanley_400x400.jpg' },
{ name: "Kelly", image: 'https://pbs.twimg.com/profile_images/71405458/2928282474_24807334d7_400x400.jpg' },
{ name: "Edward", image: 'https://pbs.twimg.com/profile_images/908888965511557120/RchEuRgc_400x400.jpg' },
];
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.example {
position: fixed;
bottom: 1rem;
}
.wrap {
display: flex;
}
.thing {
width: 70vw;
padding: 1rem;
margin: 0.5rem 0;
font-size: 1.25rem;
color: white;
background: steelblue;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
border: 0;
border-radius: 6px;
}
.thing img {
width: 60px;
border-radius: 50%;
}
.thing--selected {
background-color: salmon;
}
.hide-overflow .thing {
overflow: hidden;
}
.thing-1, .thing-3, .thing-5 {
background: orange;
}
.thing.selected {
margin-left: 2rem;
margin-right: 2rem;
}
<h1>Nested Animator Offset</h1>
<div class="{{if hideOverflow 'hide-overflow'}}">
<div class="example">
<h2>Stacked List Example</h2>
<p>This example uses two lists, stacked vertically on top of each other. Clicking an item will transition it into the other list.</p>
<button {{action 'addItem'}}>Add Item</button>
<AnimatedContainer>
<h3>Selected Things</h3>
{{#animated-each this.selectedThings duration=duration use=this.selectedTransition as |thing|}}
<div class="wrap">
<button {{action 'deselect' thing}} class="thing thing--selected">
{{thing.name}}
<img src={{thing.image}} alt="" height="60" />
</button>
<button {{action 'dismiss' thing}}>x</button>
</div>
{{/animated-each}}
</AnimatedContainer>
<AnimatedContainer>
<h3>Things</h3>
{{#animated-each this.things duration=duration use=this.mainTransition as |thing|}}
<button {{action 'select' thing}} class="thing">
{{thing.name}}
<img src={{thing.image}} alt="" height="60" />
</button>
{{/animated-each}}
</AnimatedContainer>
</div>
</div>
<br>
<br>
{{outlet}}
<br>
<br>
import { run } from '@ember/runloop';
export default function destroyApp(application) {
run(application, 'destroy');
}
import Ember from 'ember';
import Application from '../../app';
import config from '../../config/environment';
const { run } = Ember;
const assign = Ember.assign || Ember.merge;
export default function startApp(attrs) {
let application;
let attributes = assign({rootElement: "#test-root"}, config.APP);
attributes.autoboot = true;
attributes = assign(attributes, attrs); // use defaults, but you can override;
run(() => {
application = Application.create(attributes);
application.setupForTesting();
application.injectTestHelpers();
});
return application;
}
import Application from '../app';
import config from '../config/environment';
import { setApplication } from '@ember/test-helpers';
import { start } from 'ember-qunit';
import { assign } from '@ember/polyfills';
let attributes = assign({ rootElement: '#main' }, config.APP);
setApplication(Application.create(attributes));
start();
{
"version": "0.15.1",
"EmberENV": {
"FEATURES": {}
},
"options": {
"use_pods": false,
"enable-testing": false
},
"dependencies": {
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
"ember": "3.4.3",
"ember-template-compiler": "3.4.3",
"ember-testing": "3.4.3"
},
"addons": {
"ember-animated": "0.6.1",
"ember-truth-helpers": "2.1.0"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment