New Twiddle

controllers.application.js

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' },
];

styles.app.css

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;
}

templates.application.hbs

<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>

tests.helpers.destroy-app.js

import { run } from '@ember/runloop';

export default function destroyApp(application) {
  run(application, 'destroy');
}

tests.helpers.start-app.js

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;
}

tests.test-helper.js

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();

twiddle.json

{
  "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"
  }
}