Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Wrap players in maxifill #124

Merged
merged 3 commits into from
Jul 1, 2014
Merged

Wrap players in maxifill #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
223840f
Wrap players in maxifill
dstoc Jun 30, 2014
961e1c1
Add Player._updateChildren helper
dstoc Jun 30, 2014
2d58c4f
Fix failing tests
dstoc Jul 1, 2014
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
160 changes: 43 additions & 117 deletions src/animation-constructor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,18 @@
};

var pendingGroups = [];
function addPendingGroup(group) {
scope.awaitStartTime = function(groupPlayer) {
if (!isNaN(groupPlayer.startTime) || !groupPlayer._isGroup)
return;
if (pendingGroups.length == 0) {
requestAnimationFrame(updatePendingGroups);
}
pendingGroups.push(group);
}
pendingGroups.push(groupPlayer);
};
function updatePendingGroups() {
var updated = false;
while (pendingGroups.length) {
pendingGroups.shift()();
pendingGroups.shift()._updateChildren();
updated = true;
}
return updated;
Expand All @@ -66,18 +68,44 @@
},
});

// TODO: Call into this less frequently.
scope.Player.prototype._updateChildren = function() {
if (isNaN(this.startTime) || !this.source || !this._isGroup)
return;
var offset = 0;
for (var i = 0; i < this.source.children.length; i++) {
var child = this.source.children[i];
var childPlayer;

if (i >= this._childPlayers.length) {
childPlayer = window.document.timeline.play(child);
child.player = this.source.player;
this._childPlayers.push(childPlayer);
} else {
childPlayer = this._childPlayers[i];
}

if (childPlayer.startTime != this.startTime + offset) {
childPlayer.startTime = this.startTime + offset;
childPlayer._updateChildren();
}

if (this.playbackRate == -1 && this.currentTime < offset && childPlayer.currentTime !== -1) {
childPlayer.currentTime = -1;
}

if (this.source instanceof window.AnimationSequence)
offset += child.activeDuration;
}
};

window.document.timeline.play = function(source) {
// TODO: Handle effect callback.
if (source instanceof window.Animation) {
// TODO: Handle null target.
var player = source.target.animate(source._effect, source.timing);
// TODO: make source setter call cancel.
player.source = source;
source.player = player;
source._nativePlayer = player;
var cancel = player.cancel;
player.cancel = function() {
player.source = null;
cancel.call(this);
};
return player;
}
// FIXME: Move this code out of this module
Expand All @@ -89,122 +117,20 @@
player._removePlayers();
return;
}
if (isNaN(player._startTime))
if (isNaN(player.startTime))
return;

updateChildPlayers(player);
player._updateChildren();
};

function updateChildPlayers(updatingPlayer) {
var offset = 0;

// TODO: Call into this less frequently.

for (var i = 0; i < updatingPlayer.source.children.length; i++) {
var child = updatingPlayer.source.children[i];

if (i >= updatingPlayer._childPlayers.length) {
var newPlayer = window.document.timeline.play(child);
newPlayer.startTime = updatingPlayer.startTime + offset;
child.player = updatingPlayer.source.player;
updatingPlayer._childPlayers.push(newPlayer);
if (!(child instanceof window.Animation))
updateChildPlayers(newPlayer);
}

var childPlayer = updatingPlayer._childPlayers[i];
if (updatingPlayer.playbackRate == -1 && updatingPlayer.currentTime < offset && childPlayer.currentTime !== -1) {
childPlayer.currentTime = -1;
}

if (updatingPlayer.source instanceof window.AnimationSequence)
offset += child.activeDuration;
}
};

addPendingGroup(function() {
if (player.source)
updateChildPlayers(player);
});

// TODO: Use a single static element rather than one per group.
var player = document.createElement('div').animate(ticker, source.timing);
player._childPlayers = [];
player.source = source;
source._nativePlayer = player;
player._isGroup = true;
source.player = player;

player._removePlayers = function() {
while (this._childPlayers.length)
this._childPlayers.pop().cancel();
};

scope.awaitStartTime(player);
return player;
}
};

function isGroupPlayer(player) {
return !!player._childPlayers;
}

var playerProto = Object.getPrototypeOf(document.documentElement.animate([]));
scope.hookMethod(playerProto, 'reverse', function() {
if (isGroupPlayer(this)) {
var offset = 0;
this._childPlayers.forEach(function(child) {
child.reverse();
child.startTime = this.startTime + offset * this.playbackRate;
child.currentTime = this.currentTime + offset * this.playbackRate;
if (this.source instanceof window.AnimationSequence)
offset += child.source.activeDuration;
}.bind(this));
}
});

scope.hookMethod(playerProto, 'pause', function() {
if (isGroupPlayer(this)) {
this._childPlayers.forEach(function(child) {
child.pause();
});
}
});

scope.hookMethod(playerProto, 'play', function() {
if (isGroupPlayer(this)) {
this._childPlayers.forEach(function(child) {
var time = child.currentTime;
child.play();
child.currentTime = time;
});
}
});

scope.hookMethod(playerProto, 'cancel', function() {
if (isGroupPlayer(this)) {
this.source = null;
this._removePlayers();
}
});

scope.hookSetter(playerProto, 'currentTime', function(v) {
if (isGroupPlayer(this)) {
var offset = 0;
this._childPlayers.forEach(function(child) {
child.currentTime = v - offset;
if (this.source instanceof window.AnimationSequence)
offset += child.source.activeDuration;
}.bind(this));
}
});

scope.hookSetter(playerProto, 'startTime', function(v) {
if (isGroupPlayer(this)) {
var offset = 0;
this._childPlayers.forEach(function(child) {
child.startTime = v + offset;
if (this.source instanceof window.AnimationSequence)
offset += child.source.activeDuration;
}.bind(this));
}
});
}(webAnimationsShared, webAnimationsMaxifill, webAnimationsTesting));
17 changes: 3 additions & 14 deletions src/effect-callback.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,11 +18,11 @@

Element.prototype.animate = function(effect, timing) {
if (typeof effect == 'function') {
var player = originalAnimate.call(element, [], timing);
var player = new scope.Player(originalAnimate.call(element, [], timing));
bind(player, this, effect, timing);
return player;
}
return originalAnimate.call(this, effect, timing);
return new scope.Player(originalAnimate.call(this, effect, timing));
};

var sequenceNumber = 0;
Expand Down Expand Up @@ -88,20 +88,9 @@
}
}

var playerProto = Object.getPrototypeOf(document.documentElement.animate([]));
function registerHook() {
scope.Player.prototype._register = function() {
if (this._callback)
register(this._callback);
};
scope.hookMethod(playerProto, 'play', registerHook);
scope.hookMethod(playerProto, 'reverse', registerHook);
scope.hookMethod(playerProto, 'cancel', function() {
if (this._callback) {
register(this._callback);
this._callback._player = null;
}
});
scope.hookSetter(playerProto, 'currentTime', registerHook);
scope.hookSetter(playerProto, 'startTime', registerHook);

})(webAnimationsShared, webAnimationsMaxifill, webAnimationsTesting);
36 changes: 0 additions & 36 deletions src/hooks.js
View file
Open in desktop

This file was deleted.

Loading