Skip to content

Instantly share code, notes, and snippets.

@joshsmith
Last active November 30, 2016 05:38
Show Gist options
  • Save joshsmith/bfa69aaaa87b1084db4ed6465f2b6903 to your computer and use it in GitHub Desktop.
Save joshsmith/bfa69aaaa87b1084db4ed6465f2b6903 to your computer and use it in GitHub Desktop.
High Five
import Ember from 'ember';
const {
Component,
computed,
get,
run,
set
} = Ember;
export default Component.extend({
classNames: ['raised-hands'],
classNameBindings: ['currentImage', 'initialAnimation', 'followOnAnimation', 'reset'],
images: [
"tone-1f3fb",
"tone-1f3fc",
"tone-1f3ff",
"tone-1f3fe",
"tone-1f3fd"
],
currentImage: null,
followOnAnimation: false,
initialAnimation: true,
reset: false,
init() {
this._super(...arguments);
this.selectImage();
},
availableImages: computed.setDiff('images', 'currentImageArray'),
currentImageArray: computed('currentImage', function() {
let currentImage = get(this, 'currentImage');
return [currentImage];
}),
selectImage() {
let images = get(this, 'availableImages');
let image = images[Math.floor(Math.random() * images.length)];
set(this, 'currentImage', image);
let that = this;
let followOnTimer = run.later((function() {
set(that, 'followOnAnimation', false);
}), 500);
set(this, 'timer', followOnTimer);
set(this, 'reset', true);
run.later((function() {
set(that, 'reset', false);
}), 1);
},
click() {
let that = this;
let timer = get(this, 'timer');
run.cancel(timer);
this.selectImage();
set(that, 'initialAnimation', false);
set(that, 'followOnAnimation', true);
}
});
import Ember from 'ember';
export default Ember.Controller.extend({
appName: 'Ember Twiddle'
});
body {
margin: 12px 16px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 12pt;
}
.raised-hands {
cursor: pointer;
position: absolute;
left: 100px;
top: 100px;
background-image: url('https://cl.ly/0R383N3B1U1L/emoji-1f64c-sprite.png');
background-repeat: no-repeat;
background-size: 500px 100px;
width: 100px;
height: 100px;
to {width: auto;}
}
.raised-hands.tone-1f3fb {
background-position: -400px 0;
}
.raised-hands.tone-1f3fc {
background-position: -300px 0;
}
.raised-hands.tone-1f3fd {
background-position: -200px 0;
}
.raised-hands.tone-1f3fe {
background-position: -100px 0;
}
.raised-hands.tone-1f3ff {
background-position: 0 0;
}
.initial-animation.raised-hands {
animation: pulsate 0.5s ease-out;
animation-delay: 0.75s;
}
.follow-on-animation.raised-hands {
animation: pulsate 0.5s ease-out;
animation-delay: 0;
}
.reset.raised-hands {
animation: emptyAnimation;
}
@keyframes emptyAnimation {}
@-webkit-keyframes pulsate {
25% {transform: scale(1.3, 1.3);}
100% {transform: scale(1.0, 1.0);}
}
@-webkit-keyframes reset {
100% {transform: scale(1.0, 1.0);}
}
{
"version": "0.10.6",
"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.9.0",
"ember-data": "2.9.0",
"ember-template-compiler": "2.9.0",
"ember-testing": "2.9.0"
},
"addons": {}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment