|
import Ember from 'ember'; |
|
// import fade from 'ember-animated/transitions/fade'; |
|
import move from 'ember-animated/motions/move'; |
|
import { fadeIn, fadeOut } from 'ember-animated/motions/opacity'; |
|
import { easeIn, easeOut, easeInAndOut } from 'ember-animated/easings/cosine'; |
|
|
|
export default Ember.Controller.extend({ |
|
appName: 'Ember Twiddle', |
|
|
|
isThingActive: false, |
|
|
|
showThingActions: true, |
|
|
|
duration: 1000, |
|
|
|
things: null, |
|
|
|
init() { |
|
this.set('things', this.makeItems(2)); |
|
this.initialThings = [...this.things]; |
|
}, |
|
|
|
actions: { |
|
activate(thing) { |
|
this.set('selectedThing', thing.id); |
|
|
|
// mock a change in the list sorting |
|
if (thing.id % 2 === 0) { |
|
this.set('things', this.get('things').sortBy('message')); |
|
} else { |
|
this.set('things', this.get('things').sortBy('id')); |
|
} |
|
} |
|
}, |
|
|
|
*transition({ keptSprites, duration }) { |
|
// console.log(arguments[0]); |
|
|
|
for (let sprite of keptSprites) { |
|
move(sprite, { duration, easing: easeInAndOut }); |
|
} |
|
}, |
|
|
|
// iconTransition: fade |
|
*iconTransition({ insertedSprites, keptSprites, removedSprites, duration }) { |
|
console.log(arguments[0]); |
|
for (let sprite of insertedSprites) { |
|
// sprite.startTranslatedBy(20, 1); |
|
let x = sprite.absoluteFinalBounds.left + 100; |
|
let y = sprite.absoluteFinalBounds.top; |
|
sprite.startAtPixel({ x, y }); |
|
console.log(sprite.element.offsetParent, sprite.finalBounds); |
|
move(sprite, { duration, easing: easeInAndOut }); |
|
fadeIn(sprite, { duration }); |
|
} |
|
|
|
for (let sprite of removedSprites) { |
|
// sprite.endTranslatedBy(20, null); |
|
// move(sprite, { duration, easing: easeInAndOut }); |
|
fadeOut(sprite, { duration }); |
|
} |
|
}, |
|
|
|
makeItems(count = 5) { |
|
let result = Ember.A(); |
|
for (let i = 0; i < count; i++) { |
|
result.push(makeRandomItem(i)); |
|
} |
|
return (result); |
|
}, |
|
}); |
|
|
|
function makeRandomItem(index) { |
|
var messages = ["Z Dwight", "Y Stanley", "X Kelly", "W Ryan", "V Kevin"]; |
|
var images = ['https://pbs.twimg.com/profile_images/549268771484229632/WnatiHzT_400x400.jpeg', 'https://pbs.twimg.com/profile_images/1839546020/florida_stanley_400x400.jpg', 'https://pbs.twimg.com/profile_images/71405458/2928282474_24807334d7_400x400.jpg', 'https://pbs.twimg.com/profile_images/740436182107049984/y0N8Sqbi_400x400.jpg', 'https://pbs.twimg.com/profile_images/118888142/Brian_Baumgartner_134198_400x400.jpg']; |
|
return { id: index, message: messages[index], image: images[index] }; |
|
// Math.round(Math.random()*1000) |
|
} |