jobiqo-cl
Version:
[](https://circleci.com/gh/jobiqo/jobiqo-cl)
681 lines (665 loc) • 23.7 kB
JavaScript
import { __rest, __assign } from '../../tslib/tslib.es6.js';
import '../../hey-listen/dist/hey-listen.es.js';
import sync, { cancelSync, getFrameData } from '../../framesync/dist/framesync.es.js';
import { color, complex, px, percent, degrees, vh, vw, number } from '../../style-value-types/dist/style-value-types.es.js';
import { easeOut, linear, createReversedEasing } from '../../@popmotion/easing/dist/easing.es.js';
import { pipe, clamp as clamp$1, mix, progress, mixComplex, mixColor, velocityPerSecond } from '../../@popmotion/popcorn/dist/popcorn.es.js';
var Observer = /*#__PURE__*/function () {
function Observer(_a, observer) {
var _this = this;
var middleware = _a.middleware,
onComplete = _a.onComplete;
this.isActive = true;
this.update = function (v) {
if (_this.observer.update) _this.updateObserver(v);
};
this.complete = function () {
if (_this.observer.complete && _this.isActive) _this.observer.complete();
if (_this.onComplete) _this.onComplete();
_this.isActive = false;
};
this.error = function (err) {
if (_this.observer.error && _this.isActive) _this.observer.error(err);
_this.isActive = false;
};
this.observer = observer;
this.updateObserver = function (v) {
return observer.update(v);
};
this.onComplete = onComplete;
if (observer.update && middleware && middleware.length) {
middleware.forEach(function (m) {
return _this.updateObserver = m(_this.updateObserver, _this.complete);
});
}
}
return Observer;
}();
var createObserver = function (observerCandidate, _a, onComplete) {
var middleware = _a.middleware;
if (typeof observerCandidate === 'function') {
return new Observer({ middleware: middleware, onComplete: onComplete }, { update: observerCandidate });
} else {
return new Observer({ middleware: middleware, onComplete: onComplete }, observerCandidate);
}
};
var Action = /*#__PURE__*/function () {
function Action(props) {
if (props === void 0) {
props = {};
}
this.props = props;
}
Action.prototype.create = function (props) {
return new Action(props);
};
Action.prototype.start = function (observerCandidate) {
if (observerCandidate === void 0) {
observerCandidate = {};
}
var isComplete = false;
var subscription = {
stop: function () {
return undefined;
}
};
var _a = this.props,
init = _a.init,
observerProps = __rest(_a, ["init"]);
var observer = createObserver(observerCandidate, observerProps, function () {
isComplete = true;
subscription.stop();
});
var api = init(observer);
subscription = api ? __assign({}, subscription, api) : subscription;
if (isComplete) subscription.stop();
return subscription;
};
Action.prototype.applyMiddleware = function (middleware) {
return this.create(__assign({}, this.props, { middleware: this.props.middleware ? [middleware].concat(this.props.middleware) : [middleware] }));
};
Action.prototype.pipe = function () {
var funcs = [];
for (var _i = 0; _i < arguments.length; _i++) {
funcs[_i] = arguments[_i];
}
var pipedUpdate = funcs.length === 1 ? funcs[0] : pipe.apply(void 0, funcs);
return this.applyMiddleware(function (update) {
return function (v) {
return update(pipedUpdate(v));
};
});
};
return Action;
}();
var action = function (init) {
return new Action({ init: init });
};
var createVectorTests = function (typeTests) {
var testNames = Object.keys(typeTests);
var isVectorProp = function (prop, key) {
return prop !== undefined && !typeTests[key](prop);
};
var getVectorKeys = function (props) {
return testNames.reduce(function (vectorKeys, key) {
if (isVectorProp(props[key], key)) vectorKeys.push(key);
return vectorKeys;
}, []);
};
var testVectorProps = function (props) {
return props && testNames.some(function (key) {
return isVectorProp(props[key], key);
});
};
return { getVectorKeys: getVectorKeys, testVectorProps: testVectorProps };
};
var unitTypes = [px, percent, degrees, vh, vw];
var findUnitType = function (prop) {
return unitTypes.find(function (type) {
return type.test(prop);
});
};
var isUnitProp = function (prop) {
return Boolean(findUnitType(prop));
};
var createAction = function (action, props) {
return action(props);
};
var createUnitAction = function (action, _a) {
var from = _a.from,
to = _a.to,
props = __rest(_a, ["from", "to"]);
var unitType = findUnitType(from) || findUnitType(to);
var transform = unitType.transform,
parse = unitType.parse;
return action(__assign({}, props, { from: typeof from === 'string' ? parse(from) : from, to: typeof to === 'string' ? parse(to) : to })).pipe(transform);
};
var createMixerAction = function (mixer) {
return function (action, _a) {
var from = _a.from,
to = _a.to,
props = __rest(_a, ["from", "to"]);
return action(__assign({}, props, { from: 0, to: 1 })).pipe(mixer(from, to));
};
};
var createColorAction = /*#__PURE__*/createMixerAction(mixColor);
var createComplexAction = /*#__PURE__*/createMixerAction(mixComplex);
var createVectorAction = function (action, typeTests) {
var _a = createVectorTests(typeTests),
testVectorProps = _a.testVectorProps,
getVectorKeys = _a.getVectorKeys;
var vectorAction = function (props) {
var isVector = testVectorProps(props);
if (!isVector) return action(props);
var vectorKeys = getVectorKeys(props);
var testKey = vectorKeys[0];
var testProp = props[testKey];
return getActionCreator(testProp)(action, props, vectorKeys);
};
return vectorAction;
};
var getActionCreator = function (prop) {
if (typeof prop === 'number') {
return createAction;
} else if (isUnitProp(prop)) {
return createUnitAction;
} else if (color.test(prop)) {
return createColorAction;
} else if (complex.test(prop)) {
return createComplexAction;
} else {
return createAction;
}
};
var decay = function (props) {
if (props === void 0) {
props = {};
}
return action(function (_a) {
var complete = _a.complete,
update = _a.update;
var _b = props.velocity,
velocity = _b === void 0 ? 0 : _b,
_c = props.from,
from = _c === void 0 ? 0 : _c,
_d = props.power,
power = _d === void 0 ? 0.8 : _d,
_e = props.timeConstant,
timeConstant = _e === void 0 ? 350 : _e,
_f = props.restDelta,
restDelta = _f === void 0 ? 0.5 : _f,
modifyTarget = props.modifyTarget;
var elapsed = 0;
var amplitude = power * velocity;
var idealTarget = Math.round(from + amplitude);
var target = typeof modifyTarget === 'undefined' ? idealTarget : modifyTarget(idealTarget);
var process = sync.update(function (_a) {
var frameDelta = _a.delta;
elapsed += frameDelta;
var delta = -amplitude * Math.exp(-elapsed / timeConstant);
var isMoving = delta > restDelta || delta < -restDelta;
var current = isMoving ? target + delta : target;
update(current);
if (!isMoving) {
cancelSync.update(process);
complete();
}
}, true);
return {
stop: function () {
return cancelSync.update(process);
}
};
});
};
var vectorDecay = /*#__PURE__*/createVectorAction(decay, {
from: number.test,
modifyTarget: function (func) {
return typeof func === 'function';
},
velocity: number.test
});
var spring = function (props) {
if (props === void 0) {
props = {};
}
return action(function (_a) {
var update = _a.update,
complete = _a.complete;
var _b = props.velocity,
velocity = _b === void 0 ? 0.0 : _b;
var _c = props.from,
from = _c === void 0 ? 0.0 : _c,
_d = props.to,
to = _d === void 0 ? 0.0 : _d,
_e = props.stiffness,
stiffness = _e === void 0 ? 100 : _e,
_f = props.damping,
damping = _f === void 0 ? 10 : _f,
_g = props.mass,
mass = _g === void 0 ? 1.0 : _g,
_h = props.restSpeed,
restSpeed = _h === void 0 ? 0.01 : _h,
_j = props.restDelta,
restDelta = _j === void 0 ? 0.01 : _j;
var initialVelocity = velocity ? -(velocity / 1000) : 0.0;
var t = 0;
var delta = to - from;
var position = from;
var prevPosition = position;
var process = sync.update(function (_a) {
var timeDelta = _a.delta;
t += timeDelta;
var dampingRatio = damping / (2 * Math.sqrt(stiffness * mass));
var angularFreq = Math.sqrt(stiffness / mass) / 1000;
prevPosition = position;
if (dampingRatio < 1) {
var envelope = Math.exp(-dampingRatio * angularFreq * t);
var expoDecay = angularFreq * Math.sqrt(1.0 - dampingRatio * dampingRatio);
position = to - envelope * ((initialVelocity + dampingRatio * angularFreq * delta) / expoDecay * Math.sin(expoDecay * t) + delta * Math.cos(expoDecay * t));
} else {
var envelope = Math.exp(-angularFreq * t);
position = to - envelope * (delta + (initialVelocity + angularFreq * delta) * t);
}
velocity = velocityPerSecond(position - prevPosition, timeDelta);
var isBelowVelocityThreshold = Math.abs(velocity) <= restSpeed;
var isBelowDisplacementThreshold = Math.abs(to - position) <= restDelta;
if (isBelowVelocityThreshold && isBelowDisplacementThreshold) {
position = to;
update(position);
cancelSync.update(process);
complete();
} else {
update(position);
}
}, true);
return {
stop: function () {
return cancelSync.update(process);
}
};
});
};
var vectorSpring = /*#__PURE__*/createVectorAction(spring, {
from: number.test,
to: number.test,
stiffness: number.test,
damping: number.test,
mass: number.test,
velocity: number.test
});
var inertia = function (_a) {
var _b = _a.from,
from = _b === void 0 ? 0 : _b,
_c = _a.velocity,
velocity = _c === void 0 ? 0 : _c,
min = _a.min,
max = _a.max,
_d = _a.power,
power = _d === void 0 ? 0.8 : _d,
_e = _a.timeConstant,
timeConstant = _e === void 0 ? 700 : _e,
_f = _a.bounceStiffness,
bounceStiffness = _f === void 0 ? 500 : _f,
_g = _a.bounceDamping,
bounceDamping = _g === void 0 ? 10 : _g,
_h = _a.restDelta,
restDelta = _h === void 0 ? 1 : _h,
modifyTarget = _a.modifyTarget;
return action(function (_a) {
var update = _a.update,
complete = _a.complete;
var prev = from;
var current = from;
var activeAnimation;
var isSpring = false;
var isLessThanMin = function (v) {
return min !== undefined && v <= min;
};
var isMoreThanMax = function (v) {
return max !== undefined && v >= max;
};
var isOutOfBounds = function (v) {
return isLessThanMin(v) || isMoreThanMax(v);
};
var isTravellingAwayFromBounds = function (v, currentVelocity) {
return isLessThanMin(v) && currentVelocity < 0 || isMoreThanMax(v) && currentVelocity > 0;
};
var onUpdate = function (v) {
update(v);
prev = current;
current = v;
velocity = velocityPerSecond(current - prev, getFrameData().delta);
if (activeAnimation && !isSpring && isTravellingAwayFromBounds(v, velocity)) {
startSpring({ from: v, velocity: velocity });
}
};
var startAnimation = function (animation, next) {
activeAnimation && activeAnimation.stop();
activeAnimation = animation.start({
update: onUpdate,
complete: function () {
if (next) {
next();
return;
}
complete();
}
});
};
var startSpring = function (props) {
isSpring = true;
startAnimation(vectorSpring(__assign({}, props, { to: isLessThanMin(props.from) ? min : max, stiffness: bounceStiffness, damping: bounceDamping, restDelta: restDelta })));
};
if (isOutOfBounds(from)) {
startSpring({ from: from, velocity: velocity });
} else if (velocity !== 0) {
var animation = vectorDecay({
from: from,
velocity: velocity,
timeConstant: timeConstant,
power: power,
restDelta: isOutOfBounds(from) ? 20 : restDelta,
modifyTarget: modifyTarget
});
startAnimation(animation, function () {
if (isOutOfBounds(current)) {
startSpring({ from: current, velocity: velocity });
} else {
complete();
}
});
} else {
complete();
}
return {
stop: function () {
return activeAnimation && activeAnimation.stop();
}
};
});
};
var index = /*#__PURE__*/createVectorAction(inertia, {
from: number.test,
velocity: number.test,
min: number.test,
max: number.test,
damping: number.test,
stiffness: number.test,
modifyTarget: function (func) {
return typeof func === 'function';
}
});
var scrubber = function (_a) {
var _b = _a.from,
from = _b === void 0 ? 0 : _b,
_c = _a.to,
to = _c === void 0 ? 1 : _c,
_d = _a.ease,
ease = _d === void 0 ? linear : _d,
_e = _a.reverseEase,
reverseEase = _e === void 0 ? false : _e;
if (reverseEase) {
ease = createReversedEasing(ease);
}
return action(function (_a) {
var update = _a.update;
return {
seek: function (progress) {
return update(progress);
}
};
}).pipe(ease, function (v) {
return mix(from, to, v);
});
};
var vectorScrubber = /*#__PURE__*/createVectorAction(scrubber, {
ease: function (func) {
return typeof func === 'function';
},
from: number.test,
to: number.test
});
var clampProgress = /*#__PURE__*/clamp$1(0, 1);
var tween = function (props) {
if (props === void 0) {
props = {};
}
return action(function (_a) {
var update = _a.update,
complete = _a.complete;
var _b = props.duration,
duration = _b === void 0 ? 300 : _b,
_c = props.ease,
ease = _c === void 0 ? easeOut : _c,
_d = props.flip,
flip = _d === void 0 ? 0 : _d,
_e = props.loop,
loop = _e === void 0 ? 0 : _e,
_f = props.yoyo,
yoyo = _f === void 0 ? 0 : _f,
_g = props.repeatDelay,
repeatDelay = _g === void 0 ? 0 : _g;
var _h = props.from,
from = _h === void 0 ? 0 : _h,
_j = props.to,
to = _j === void 0 ? 1 : _j,
_k = props.elapsed,
elapsed = _k === void 0 ? 0 : _k,
_l = props.flipCount,
flipCount = _l === void 0 ? 0 : _l,
_m = props.yoyoCount,
yoyoCount = _m === void 0 ? 0 : _m,
_o = props.loopCount,
loopCount = _o === void 0 ? 0 : _o;
var playhead = vectorScrubber({ from: from, to: to, ease: ease }).start(update);
var currentProgress = 0;
var process;
var isActive = false;
var reverseAnimation = function (reverseEase) {
var _a;
if (reverseEase === void 0) {
reverseEase = false;
}
_a = [to, from], from = _a[0], to = _a[1];
playhead = vectorScrubber({ from: from, to: to, ease: ease, reverseEase: reverseEase }).start(update);
};
var isTweenComplete = function () {
var isComplete = isActive && elapsed > duration + repeatDelay;
if (!isComplete) return false;
if (isComplete && !loop && !flip && !yoyo) return true;
var overtime = elapsed - duration;
elapsed = overtime - repeatDelay;
if (loop && loopCount < loop) {
loopCount++;
return false;
} else if (flip && flipCount < flip) {
flipCount++;
reverseAnimation();
return false;
} else if (yoyo && yoyoCount < yoyo) {
yoyoCount++;
reverseAnimation(yoyoCount % 2 !== 0);
return false;
}
return true;
};
var updateTween = function () {
currentProgress = clampProgress(progress(0, duration, elapsed));
playhead.seek(currentProgress);
};
var startTimer = function () {
isActive = true;
process = sync.update(function (_a) {
var delta = _a.delta;
elapsed += delta;
updateTween();
if (isTweenComplete()) {
cancelSync.update(process);
complete && sync.update(complete, false, true);
}
}, true);
};
var stopTimer = function () {
isActive = false;
if (process) cancelSync.update(process);
};
startTimer();
return {
isActive: function () {
return isActive;
},
getElapsed: function () {
return clamp$1(0, duration, elapsed);
},
getProgress: function () {
return currentProgress;
},
stop: function () {
stopTimer();
},
pause: function () {
stopTimer();
return this;
},
resume: function () {
if (!isActive) startTimer();
return this;
},
seek: function (newProgress) {
elapsed = mix(0, duration, newProgress);
sync.update(updateTween, false, true);
return this;
},
reverse: function () {
reverseAnimation();
return this;
}
};
});
};
var clampProgress$1 = /*#__PURE__*/clamp$1(0, 1);
var defaultEasings = function (values, easing) {
return values.map(function () {
return easing || easeOut;
}).splice(0, values.length - 1);
};
var defaultTimings = function (values) {
var numValues = values.length;
return values.map(function (value, i) {
return i !== 0 ? i / (numValues - 1) : 0;
});
};
var interpolateScrubbers = function (input, scrubbers, update) {
var rangeLength = input.length;
var finalInputIndex = rangeLength - 1;
var finalScrubberIndex = finalInputIndex - 1;
var subs = scrubbers.map(function (scrub) {
return scrub.start(update);
});
return function (v) {
if (v <= input[0]) {
subs[0].seek(0);
}
if (v >= input[finalInputIndex]) {
subs[finalScrubberIndex].seek(1);
}
var i = 1;
for (; i < rangeLength; i++) {
if (input[i] > v || i === finalInputIndex) break;
}
var progressInRange = progress(input[i - 1], input[i], v);
subs[i - 1].seek(clampProgress$1(progressInRange));
};
};
var keyframes = function (_a) {
var easings = _a.easings,
_b = _a.ease,
ease = _b === void 0 ? linear : _b,
times = _a.times,
values = _a.values,
tweenProps = __rest(_a, ["easings", "ease", "times", "values"]);
easings = Array.isArray(easings) ? easings : defaultEasings(values, easings);
times = times || defaultTimings(values);
var scrubbers = easings.map(function (easing, i) {
return vectorScrubber({
from: values[i],
to: values[i + 1],
ease: easing
});
});
return tween(__assign({}, tweenProps, { ease: ease })).applyMiddleware(function (update) {
return interpolateScrubbers(times, scrubbers, update);
});
};
var listen = function (element, events, options) {
return action(function (_a) {
var update = _a.update;
var eventNames = events.split(' ').map(function (eventName) {
element.addEventListener(eventName, update, options);
return eventName;
});
return {
stop: function () {
return eventNames.forEach(function (eventName) {
return element.removeEventListener(eventName, update, options);
});
}
};
});
};
var defaultPointerPos = function () {
return {
clientX: 0,
clientY: 0,
pageX: 0,
pageY: 0,
x: 0,
y: 0
};
};
var eventToPoint = function (e, point) {
if (point === void 0) {
point = defaultPointerPos();
}
point.clientX = point.x = e.clientX;
point.clientY = point.y = e.clientY;
point.pageX = e.pageX;
point.pageY = e.pageY;
return point;
};
var points = [/*#__PURE__*/defaultPointerPos()];
if (typeof document !== 'undefined') {
var updatePointsLocation = function (_a) {
var touches = _a.touches;
var numTouches = touches.length;
points.length = 0;
for (var i = 0; i < numTouches; i++) {
var thisTouch = touches[i];
points.push(eventToPoint(thisTouch));
}
};
listen(document, 'touchstart touchmove', {
passive: true,
capture: true
}).start(updatePointsLocation);
}
var point = /*#__PURE__*/defaultPointerPos();
if (typeof document !== 'undefined') {
var updatePointLocation = function (e) {
eventToPoint(e, point);
};
listen(document, 'mousedown mousemove', true).start(updatePointLocation);
}
var delay = function (timeToDelay) {
return action(function (_a) {
var complete = _a.complete;
var timeout = setTimeout(complete, timeToDelay);
return {
stop: function () {
return clearTimeout(timeout);
}
};
});
};
export { Action, action, vectorDecay as decay, delay, index as inertia, keyframes, listen, vectorSpring as spring, tween };