Ember: How to script with intervals - ember.js

Question

I have a span-area like this
<span class="blinky">I'm blinking</span>
and now I want it to blink.
In vanilla JS, I would write a simple piece of code using jQuery which starts an interval for this.
However: How can I implement this in ember in a proper way?

Answer 1

I write a full solution for blinking
First, let's create CSS for blinking
.blinky {
animation: changecolor 0.5s infinite;
-moz-animation: changecolor 0.5s infinite;
-webkit-animation: changecolor 0.5s infinite;
-ms-animation: changecolor 0.5s infinite;
-o-animation: changecolor 0.5s infinite;
}
#keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 2px solid #blink-bg;
}
}
/* Mozilla Browser */
#-moz-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
/* WebKit browser Safari and Chrome */
#-webkit-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
/* IE 9,10*/
#-ms-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
/* Opera Browser*/
#-o-keyframes changecolortask {
0% {
color: #pre-text-color;
}
100% {
color: #pre-text-color;
border: 4px solid #blink-bg;
}
}
#keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* Mozilla Browser */
#-moz-keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* WebKit browser Safari and Chrome */
#-webkit-keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* IE 9,10*/
#-ms-keyframes changecolor {
0% {
color: #pre-text-color;
background: #pre-bg;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
/* Opera Browser*/
#-o-keyframes changecolor {
0% {
color: #pre-text-color;
background: red;
}
100% {
color: #pre-text-color;
background: #blink-bg;
}
}
Then where you want to use this in the controller, route or Component declare
blinky: null,
now we need to have an action or you need to initialize it depends on how you want to use it, let's assume you want to add this Blinky class for 3seconds while clicking on a button so we would do the following code :
actions: {
myChangeColor: function() {
this.set('blinky', 'blinkery');//set your class to property
// remove blinker after 1 sec, it must be passed to reference for 'this' so easily we can bind that.
setTimeout(function() {
this.set('blink', ' ');
}.bind(this), 3000);
}
}
Now you need to use it in template for example in my example you simply add this property in your proper line of template like :
<div class="row well {{blinky}}"> //whatever </div>
now suppose you have a button which myChangeColor action
<button type="submit" class="btn btn-success btn-block" {{action "blinky"}}>make me blinky for 3 seconds !</button>
that's it.
Depends on what you want and how you want to use this action and class you can implement it in different ways, However, the way of implementation is the same.
Note: you can also use animation.css library to have more class either you can add your Vanilla javascript code in the action.
If you want to use this in a component depends on how you want to use, you may have to work with didInsertElement() {} and willDestroyElement() {} . As an example see the following code:
let blinker;
export default Ember.Component.extend({
tagName: 'span',
blink: null,
interval: 3000,
init() {
this._super(...arguments);
this.set('blink','');
},
didInsertElement() { // when you enter route
this._super(...arguments);
blinker = setInterval(function() {
this.set('blink', 'blinky');
}.bind(this), this.get('interval'));
},
willDestroyElement() { // when you leave route
this._super(...arguments);
clearInterval(blinker);
}
});
I hope this can help you.