export default function fade(dimension, direction, opts, offset=20) {
const oldParams = { opacity: 0 },
newParams = { opacity: [(opts.maxOpacity || 1), 0] },
fadingElement = findFadingElement(this);
let outOpts = opts,
firstStep;
if (dimension.toLowerCase() === 'x') {
oldParams.translateX = `${(direction * offset)}px`;
newParams.translateX = ['0px', `${(direction * offset)}px`];
} else {
oldParams.translateY = `${(direction * offset)}px`;
newParams.translateY = ['0px', `${(direction * offset)}px`];
}
if (fadingElement) {
// We still have some older version that is in the process of
// fading out, so out first step is waiting for it to finish.
firstStep = finish(fadingElement, 'fade-out');
} else {
if (isAnimating(this.oldElement, 'fade-in')) {
// if the previous view is partially faded in, scale its
// fade-out duration appropriately.
outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
}
stop(this.oldElement);
firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
}
return firstStep.then(() => {
return animate(this.newElement, newParams, opts, 'fade-in');
});
}
export default function moveOver(dimension, direction, opts) {
var oldParams = {},
newParams = {},
firstStep,
property,
measure;
if (dimension.toLowerCase() === 'x') {
property = 'translateX';
measure = 'width';
} else {
property = 'translateY';
measure = 'height';
}
if (isAnimating(this.oldElement, 'moving-in')) {
firstStep = finish(this.oldElement, 'moving-in');
} else {
stop(this.oldElement);
firstStep = Promise.resolve();
}
return firstStep.then(() => {
var bigger = biggestSize(this, measure);
oldParams[property] = (bigger * direction) + 'px';
newParams[property] = ["0px", (-1 * bigger * direction) + 'px'];
return Promise.all([
animate(this.oldElement, oldParams, opts),
animate(this.newElement, newParams, opts, 'moving-in')
]);
});
}
export default function crossFade(opts={}) {
stop(this.oldElement);
return Promise.all([
animate(this.oldElement, {opacity: 0}, opts),
animate(this.newElement, {opacity: [(opts.maxOpacity || 1), 0]}, opts)
]);
}
this.use(function(oldView, insertNewView, opts) {
stop(oldView);
return animate(oldView, {opacity: 0}, opts)
.then(insertNewView)
.then(function(newView){
return animate(newView, {opacity: [1, 0]}, opts);
});
})
export default function moveOverHalf(dimension, direction, opts) {
var oldParams = {};
var newParams = {};
var overlayParams = {};
var firstStep;
var property;
var measure;
var elementToOverlay;
var darkOpacity = 0.75;
if (direction > 0) {
// moving right
overlayParams = {
opacity: [0, darkOpacity]
};
elementToOverlay = this.newElement;
} else {
// moving left
overlayParams = {
opacity: [darkOpacity, 0]
};
elementToOverlay = this.oldElement;
}
var overlay = jQuery('<div class="transition-overlay"></div>');
elementToOverlay.append(overlay);
if (dimension.toLowerCase() === 'x') {
property = 'translateX';
measure = 'width';
} else {
property = 'translateY';
measure = 'height';
}
if (isAnimating(this.oldElement, 'moving-in')) {
firstStep = finish(this.oldElement, 'moving-in');
} else {
stop(this.oldElement);
firstStep = Promise.resolve();
}
return firstStep.then(() => {
var bigger = biggestSize(this, measure);
this.oldElement[0].style.zIndex = direction > 0 ? 5 : 0;
this.newElement[0].style.zIndex = direction > 0 ? 0 : 5;
oldParams[property] = (bigger * (direction > 0 ? 1 : -0.5)) + 'px';
newParams[property] = ["0px", (bigger * (direction > 0 ? -0.5 : 1)) + 'px'];
return Promise.all([
animate(overlay, overlayParams, opts),
animate(this.oldElement, oldParams, opts),
animate(this.newElement, newParams, opts, 'moving-in')
]).then(() => overlay.remove());
});
}
export default function crossFade(oldView, insertNewView, opts) {
stop(oldView);
return insertNewView().then(function(newView) {
return Promise.all([
animate(oldView, {opacity: 0}, opts),
animate(newView, {opacity: [1, 0]}, opts)
]);
});
}
export default function rotateBelow() {
stop(this.oldElement);
if (this.oldElement) {
this.oldElement.css('transform-origin', '70% 200%');
}
if (this.newElement) {
this.newElement.css('transform-origin', '70% 200%');
}
return Promise.all([
animate(this.oldElement, { rotateZ: -90 + 'deg', opacity: [0, 1] }),
animate(this.newElement, { rotateZ: ['0deg', 90 + 'deg'] })
]);
}
export default function rotateBelow(opts={}) {
var direction = 1;
if (opts.direction === 'cw') {
direction = -1;
}
stop(this.oldElement);
if (this.oldElement) {
this.oldElement.css('transform-origin', '50% 150%');
}
if (this.newElement) {
this.newElement.css('transform-origin', '50% 150%');
}
return Promise.all([
animate(this.oldElement, { rotateZ: -90*direction + 'deg' }, opts),
animate(this.newElement, { rotateZ: ['0deg', 90*direction+'deg'] }, opts),
]);
}
export default function rotateBelow(oldView, insertNewView, opts) {
var direction = 1;
if (opts && opts.direction === 'cw') {
direction = -1;
}
stop(oldView);
return insertNewView().then(function(newView) {
if (oldView) {
oldView.$().css('transform-origin', '50% 150%');
}
if (newView) {
newView.$().css('transform-origin', '50% 150%');
}
return Promise.all([
animate(oldView, { rotateZ: -90*direction + 'deg' }, opts),
animate(newView, { rotateZ: ['0deg', 90*direction+'deg'] }, opts)
]);
});
}
export default function wipe() {
stop(this.oldElement);
if (this.oldElement) {
this.oldElement.css({
'overflow': 'hidden',
'minHeight': '100vh',
'height': '100vh',
'backgroundColor': '#ffffff',
'zIndex': 1000
});
}
if (this.newElement) {
this.newElement.css({
opacity: 1
});
}
return Promise.all([
animate(this.oldElement, {minHeight: 0, height: '0' }, {duration: 400}),
animate(this.newElement, {opacity: [1, 1]}, {duration: 1}),
]);
}
adaptSize: function() {
stop(this);
var elt = this.$();
if (!elt) { return; }
// Measure new size.
var newSize = getSize(elt);
if (typeof(this._cachedSize) === 'undefined') {
this._cachedSize = newSize;
}
// Now that measurements have been taken, lock the size
// before the invoking the scaling transition.
elt.width(this._cachedSize.width);
elt.height(this._cachedSize.height);
this._scaling = Promise.all([
this._adaptDimension('width', this._cachedSize, newSize),
this._adaptDimension('height', this._cachedSize, newSize),
]);
}
export default function fade(opts={}) {
var firstStep;
var outOpts = opts;
var fadingElement = findFadingElement(this);
if (fadingElement) {
// We still have some older version that is in the process of
// fading out, so out first step is waiting for it to finish.
firstStep = finish(fadingElement, 'fade-out');
} else {
if (isAnimating(this.oldElement, 'fade-in')) {
// if the previous view is partially faded in, scale its
// fade-out duration appropriately.
outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
}
stop(this.oldElement);
firstStep = animate(this.oldElement, {opacity: 0}, outOpts, 'fade-out');
}
return firstStep.then(() => {
return animate(this.newElement, {opacity: [(opts.maxOpacity || 1), 0]}, opts, 'fade-in');
});
}
export default function(opts={}) {
const fadingElement = findFadingElement(this);
let firstStep;
let outOpts = opts;
let $w = $('.wrap');
if ($w.hasClass('add-transition')) {
$w.removeClass('add-transition');
}
if ($w.hasClass('loaded')) {
$w.removeClass('loaded');
}
if (fadingElement) {
// We still have some older version that is in the process of
// fading out, so out first step is waiting for it to finish.
firstStep = finish(fadingElement, 'dino');
} else {
if (isAnimating(this.oldElement, 'dino')) {
// if the previous view is partially faded in, scale its
// dindinoo-in duration appropriately.
outOpts = { duration: timeSpent(this.oldElement, 'dino') };
}
stop(this.oldElement);
firstStep = animate(this.oldElement, {opacity: 1}, {duration: 1}, 'dino');
}
return firstStep.then(() => {
run.later(function () {
$w.addClass('add-transition loaded');
}, 300);
return animate(this.newElement, {opacity: 1}, {duration: 1}, 'dino');
});
}
export default function(/*options*/) {
stop(this.oldElement);
const animations = Ember.A([]);
const oldPrevious = $(this.oldElement).find('.ui-panel--ios-titlebar-action--label--previous');
const oldPreviousIcon = $(this.oldElement).find('.ui-panel--ios-titlebar-action--icon');
const oldTitle = $(this.oldElement).find('.ui-panel--ios-titlebar-title');
const oldAction = $(this.oldElement).find('.ui-panel--ios-titlebar-action--label--action');
const oldContent = $(this.oldElement).find('.ui-panel--ios-content');
animations.pushObject(animate(oldPrevious, {
opacity: 0,
translateX: ['-30vw', '0vw']
}, {
duration: 500
}));
animations.pushObject(animate(oldPreviousIcon, {
opacity: 0
}, {
duration: 500
}));
animations.pushObject(animate(oldTitle, {
opacity: 0,
translateX: ['-30vw', '0vw']
}, {
duration: 500
}));
animations.pushObject(animate(oldContent, {
opacity: 0,
translateX: ['-100vw', '0vw']
}, {
duration: 500
}));
animations.pushObject(animate(oldAction, {
opacity: 0
}, {
duration: 500
}));
const newPrevious = $(this.newElement).find('.ui-panel--ios-titlebar-action--label--previous');
const newPreviousIcon = $(this.newElement).find('.ui-panel--ios-titlebar-action--icon');
const newTitle = $(this.newElement).find('.ui-panel--ios-titlebar-title');
const newAction = $(this.newElement).find('.ui-panel--ios-titlebar-action--label--action');
const newContent = $(this.newElement).find('.ui-panel--ios-content');
animations.pushObject(animate(this.newElement, { opacity: 1 }, { duration: 0 }));
animations.pushObject(animate(newPrevious, {
opacity: 1,
translateX: ['0vw', '30vw']
}, {
duration: 500
}));
animations.pushObject(animate(newPreviousIcon, {
opacity: 1
}, {
duration: 500
}));
animations.pushObject(animate(newTitle, {
opacity: 1,
translateX: ['0vw', '30vw']
}, {
duration: 500
}));
animations.pushObject(animate(newContent, {
opacity: 1,
translateX: ['0vw', '100vw']
}, {
duration: 500
}));
animations.pushObject(animate(newAction, {
opacity: 1,
translateX: '0px'
}, {
duration: 500
}));
return Ember.RSVP.all(animations);
}