open-consul/ui/packages/consul-ui/app/utils/ticker/index.js
John Cowen c98130cc08
ui: Move to Workspaced Structure (#8994)
* ui: Add the most basic workspace root in /ui

* We already have a LICENSE file in the repository root

* Change directory path in build scripts ui-v2 -> ui

* Make yarn install flags configurable from elsewhere

* Minimal workspace root makefile

* Call the new docker specific target

* Update yarn in the docker build image

* Reconfigure the netlify target and move to the higher makefile

* Move ui-v2 -> ui/packages/consul-ui

* Change repo root to refleect new folder structure

* Temporarily don't hoist consul-api-double

* Fixup CI configuration

* Fixup lint errors

* Fixup Netlify target
2020-10-21 15:23:16 +01:00

210 lines
4.9 KiB
JavaScript

import EventTarget from 'consul-ui/utils/dom/event-target/rsvp';
import { set } from '@ember/object';
const IntervalTickerGroup = class extends EventTarget {
constructor(rate = 1000 / 60) {
super();
this.setRate(rate);
}
tick() {
this.dispatchEvent({ type: 'tick', target: this });
}
setRate(rate) {
clearInterval(this._interval);
this._interval = setInterval(() => this.tick(), rate);
}
destroy() {
clearInterval(this._interval);
}
};
export const Ticker = class extends EventTarget {
static destroy() {
if (typeof Ticker.defaultTickerGroup !== 'undefined') {
Ticker.defaultTickerGroup.destroy();
delete Ticker.defaultTickerGroup;
}
}
constructor(obj) {
super();
this.setTickable(obj);
}
tick() {
this._tickable.tick();
}
setTickable(tickable) {
this._tickable = tickable;
// this.addEventListener(this._tickable);
if (typeof this._tickable.getTicker === 'undefined') {
this._tickable.getTicker = () => this;
}
this.tick = this._tickable.tick.bind(this._tickable);
}
getTickable() {
return this._tickable;
}
isAlive() {
return this._isAlive;
}
start() {
this._isAlive = true;
this.getTickerGroup().addEventListener('tick', this.tick);
this.dispatchEvent({ type: 'start', target: this });
}
stop() {
this._isAlive = false;
this.getTickerGroup().removeEventListener('tick', this.tick);
this.dispatchEvent({ type: 'stop', target: this });
}
activeCount() {
return this.getTickerGroup().activeCount();
}
setTickerGroup(group) {
this._group = group;
}
getTickerGroup() {
if (typeof this._group === 'undefined') {
if (typeof Ticker.defaultTickerGroup === 'undefined') {
Ticker.defaultTickerGroup = new TickerGroup();
}
this._group = Ticker.defaultTickerGroup;
}
return this._group;
}
};
const TimelineAbstract = class {
constructor() {
this._currentframe = 1;
this.setIncrement(1);
}
isAtStart() {
return this._currentframe <= 1;
}
isAtEnd() {
return this._currentframe >= this._totalframes;
}
addEventListener() {
return this.getTicker().addEventListener(...arguments);
}
removeEventListener() {
return this.getTicker().removeEventListener(...arguments);
}
stop() {
return this.gotoAndStop(this._currentframe);
}
play() {
return this.gotoAndPlay(this._currentframe);
}
start() {
return this.gotoAndPlay(this._currentframe);
}
gotoAndStop(frame) {
this._currentframe = frame;
const ticker = this.getTicker();
if (ticker.isAlive()) {
ticker.stop();
}
return this;
}
gotoAndPlay(frame) {
this._currentframe = frame;
const ticker = this.getTicker();
if (!ticker.isAlive()) {
ticker.start();
}
return this;
}
getTicker() {
if (typeof this._ticker === 'undefined') {
this._ticker = new Ticker(this);
}
return this._ticker;
}
setFrames(frames) {
this._totalframes = frames;
return this;
}
setIncrement(inc) {
this._increment = inc;
return this;
}
};
const Cubic = {
easeOut: function(t, b, c, d) {
t /= d;
t--;
return c * (t * t * t + 1) + b;
},
};
const TickerGroup = IntervalTickerGroup;
export const Tween = class extends TimelineAbstract {
static destroy() {
Ticker.destroy();
}
static to(start, finish, frames, method) {
Object.keys(finish).forEach(function(key) {
finish[key] -= start[key];
});
return new Tween(start, finish, frames, method).play();
}
constructor(obj, props, frames = 12, method = Cubic.easeOut) {
super();
this.setMethod(method);
this.setProps(props);
this.setTarget(obj);
this.setFrames(frames);
this.tick = this.forwards;
}
_process() {
Object.keys(this._props).forEach(key => {
const num = this._method(
this._currentframe,
this._initialstate[key],
this._props[key],
this._totalframes
);
// this._target[key] = num;
set(this._target, key, num);
});
}
forwards() {
if (this._currentframe <= this._totalframes) {
this._process();
this._currentframe += this._increment;
} else {
this._currentframe = this._totalframes;
this.getTicker().stop();
}
}
backwards() {
this._currentframe -= this._increment;
if (this._currentframe >= 0) {
this._process();
} else {
this.run = this.forwards;
this._currentframe = 1;
this.getTicker().stop();
}
}
gotoAndPlay() {
if (typeof this._initialstate === 'undefined') {
this._initialstate = {};
Object.keys(this._props).forEach(key => {
this._initialstate[key] = this._target[key];
});
}
return super.gotoAndPlay(...arguments);
}
setTarget(target) {
this._target = target;
}
getTarget(target) {
return this._target;
}
setProps(props) {
this._props = props;
return this;
}
setMethod(method) {
this._method = method;
}
};