Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,63 @@
|
||||
// Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview A collection of CSS3 targeted animation, based on
|
||||
* {@code goog.fx.css3.Transition}.
|
||||
*
|
||||
* @author chrishenry@google.com (Chris Henry)
|
||||
*/
|
||||
|
||||
goog.provide('goog.fx.css3');
|
||||
|
||||
goog.require('goog.fx.css3.Transition');
|
||||
|
||||
|
||||
/**
|
||||
* Creates a transition to fade the element.
|
||||
* @param {Element} element The element to fade.
|
||||
* @param {number} duration Duration in seconds.
|
||||
* @param {string} timing The CSS3 timing function.
|
||||
* @param {number} startOpacity Starting opacity.
|
||||
* @param {number} endOpacity Ending opacity.
|
||||
* @return {!goog.fx.css3.Transition} The transition object.
|
||||
*/
|
||||
goog.fx.css3.fade = function(
|
||||
element, duration, timing, startOpacity, endOpacity) {
|
||||
return new goog.fx.css3.Transition(
|
||||
element, duration, {'opacity': startOpacity}, {'opacity': endOpacity},
|
||||
{property: 'opacity', duration: duration, timing: timing, delay: 0});
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Creates a transition to fade in the element.
|
||||
* @param {Element} element The element to fade in.
|
||||
* @param {number} duration Duration in seconds.
|
||||
* @return {!goog.fx.css3.Transition} The transition object.
|
||||
*/
|
||||
goog.fx.css3.fadeIn = function(element, duration) {
|
||||
return goog.fx.css3.fade(element, duration, 'ease-out', 0, 1);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Creates a transition to fade out the element.
|
||||
* @param {Element} element The element to fade out.
|
||||
* @param {number} duration Duration in seconds.
|
||||
* @return {!goog.fx.css3.Transition} The transition object.
|
||||
*/
|
||||
goog.fx.css3.fadeOut = function(element, duration) {
|
||||
return goog.fx.css3.fade(element, duration, 'ease-in', 1, 0);
|
||||
};
|
||||
@@ -0,0 +1,201 @@
|
||||
// Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview CSS3 transition base library.
|
||||
*
|
||||
* @author chrishenry@google.com (Chris Henry)
|
||||
*/
|
||||
|
||||
goog.provide('goog.fx.css3.Transition');
|
||||
|
||||
goog.require('goog.Timer');
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.fx.TransitionBase');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.style.transition');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* A class to handle targeted CSS3 transition. This class
|
||||
* handles common features required for targeted CSS3 transition.
|
||||
*
|
||||
* Browser that does not support CSS3 transition will still receive all
|
||||
* the events fired by the transition object, but will not have any transition
|
||||
* played. If the browser supports the final state as set in setFinalState
|
||||
* method, the element will ends in the final state.
|
||||
*
|
||||
* Transitioning multiple properties with the same setting is possible
|
||||
* by setting Css3Property's property to 'all'. Performing multiple
|
||||
* transitions can be done via setting multiple initialStyle,
|
||||
* finalStyle and transitions. Css3Property's delay can be used to
|
||||
* delay one of the transition. Here is an example for a transition
|
||||
* that expands on the width and then followed by the height:
|
||||
*
|
||||
* <pre>
|
||||
* initialStyle: {width: 10px, height: 10px}
|
||||
* finalStyle: {width: 100px, height: 100px}
|
||||
* transitions: [
|
||||
* {property: width, duration: 1, timing: 'ease-in', delay: 0},
|
||||
* {property: height, duration: 1, timing: 'ease-in', delay: 1}
|
||||
* ]
|
||||
* </pre>
|
||||
*
|
||||
* @param {Element} element The element to be transitioned.
|
||||
* @param {number} duration The duration of the transition in seconds.
|
||||
* This should be the longest of all transitions.
|
||||
* @param {Object} initialStyle Initial style properties of the element before
|
||||
* animating. Set using {@code goog.style.setStyle}.
|
||||
* @param {Object} finalStyle Final style properties of the element after
|
||||
* animating. Set using {@code goog.style.setStyle}.
|
||||
* @param {goog.style.transition.Css3Property|
|
||||
* Array<goog.style.transition.Css3Property>} transitions A single CSS3
|
||||
* transition property or an array of it.
|
||||
* @extends {goog.fx.TransitionBase}
|
||||
* @constructor
|
||||
*/
|
||||
goog.fx.css3.Transition = function(
|
||||
element, duration, initialStyle, finalStyle, transitions) {
|
||||
goog.fx.css3.Transition.base(this, 'constructor');
|
||||
|
||||
/**
|
||||
* @type {Element}
|
||||
* @private
|
||||
*/
|
||||
this.element_ = element;
|
||||
|
||||
/**
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
this.duration_ = duration;
|
||||
|
||||
/**
|
||||
* @type {Object}
|
||||
* @private
|
||||
*/
|
||||
this.initialStyle_ = initialStyle;
|
||||
|
||||
/**
|
||||
* @type {Object}
|
||||
* @private
|
||||
*/
|
||||
this.finalStyle_ = finalStyle;
|
||||
|
||||
/**
|
||||
* @type {Array<goog.style.transition.Css3Property>}
|
||||
* @private
|
||||
*/
|
||||
this.transitions_ = goog.isArray(transitions) ? transitions : [transitions];
|
||||
};
|
||||
goog.inherits(goog.fx.css3.Transition, goog.fx.TransitionBase);
|
||||
|
||||
|
||||
/**
|
||||
* Timer id to be used to cancel animation part-way.
|
||||
* @type {number}
|
||||
* @private
|
||||
*/
|
||||
goog.fx.css3.Transition.prototype.timerId_;
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.fx.css3.Transition.prototype.play = function() {
|
||||
if (this.isPlaying()) {
|
||||
return false;
|
||||
}
|
||||
|
||||
this.onBegin();
|
||||
this.onPlay();
|
||||
|
||||
this.startTime = goog.now();
|
||||
this.setStatePlaying();
|
||||
|
||||
if (goog.style.transition.isSupported()) {
|
||||
goog.style.setStyle(this.element_, this.initialStyle_);
|
||||
// Allow element to get updated to its initial state before installing
|
||||
// CSS3 transition.
|
||||
this.timerId_ = goog.Timer.callOnce(this.play_, undefined, this);
|
||||
return true;
|
||||
} else {
|
||||
this.stop_(false);
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Helper method for play method. This needs to be executed on a timer.
|
||||
* @private
|
||||
*/
|
||||
goog.fx.css3.Transition.prototype.play_ = function() {
|
||||
// This measurement of the DOM element causes the browser to recalculate its
|
||||
// initial state before the transition starts.
|
||||
goog.style.getSize(this.element_);
|
||||
goog.style.transition.set(this.element_, this.transitions_);
|
||||
goog.style.setStyle(this.element_, this.finalStyle_);
|
||||
this.timerId_ = goog.Timer.callOnce(
|
||||
goog.bind(this.stop_, this, false), this.duration_ * 1000);
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.fx.css3.Transition.prototype.stop = function() {
|
||||
if (!this.isPlaying()) return;
|
||||
|
||||
this.stop_(true);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Helper method for stop method.
|
||||
* @param {boolean} stopped If the transition was stopped.
|
||||
* @private
|
||||
*/
|
||||
goog.fx.css3.Transition.prototype.stop_ = function(stopped) {
|
||||
goog.style.transition.removeAll(this.element_);
|
||||
|
||||
// Clear the timer.
|
||||
goog.Timer.clear(this.timerId_);
|
||||
|
||||
// Make sure that we have reached the final style.
|
||||
goog.style.setStyle(this.element_, this.finalStyle_);
|
||||
|
||||
this.endTime = goog.now();
|
||||
this.setStateStopped();
|
||||
|
||||
if (stopped) {
|
||||
this.onStop();
|
||||
} else {
|
||||
this.onFinish();
|
||||
}
|
||||
this.onEnd();
|
||||
};
|
||||
|
||||
|
||||
/** @override */
|
||||
goog.fx.css3.Transition.prototype.disposeInternal = function() {
|
||||
this.stop();
|
||||
goog.fx.css3.Transition.base(this, 'disposeInternal');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Pausing CSS3 Transitions in not supported.
|
||||
* @override
|
||||
*/
|
||||
goog.fx.css3.Transition.prototype.pause = function() {
|
||||
goog.asserts.assert(false, 'Css3 transitions does not support pause action.');
|
||||
};
|
||||
@@ -0,0 +1,25 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<!--
|
||||
Author: chrishenry@google.com (Chris Henry)
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
Closure Unit Tests - goog.fx.css3.Transition
|
||||
</title>
|
||||
<script src="../../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.fx.css3.TransitionTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,219 @@
|
||||
// Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
goog.provide('goog.fx.css3.TransitionTest');
|
||||
goog.setTestOnly('goog.fx.css3.TransitionTest');
|
||||
|
||||
goog.require('goog.dispose');
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.fx.Transition');
|
||||
goog.require('goog.fx.css3.Transition');
|
||||
goog.require('goog.style.transition');
|
||||
goog.require('goog.testing.MockClock');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.testing.recordFunction');
|
||||
|
||||
var transition;
|
||||
var element;
|
||||
var mockClock;
|
||||
|
||||
|
||||
function createTransition(element, duration) {
|
||||
return new goog.fx.css3.Transition(
|
||||
element, duration, {'opacity': 0}, {'opacity': 1},
|
||||
{property: 'opacity', duration: duration, timing: 'ease-in', delay: 0});
|
||||
}
|
||||
|
||||
|
||||
function setUp() {
|
||||
mockClock = new goog.testing.MockClock(true);
|
||||
element = goog.dom.createElement('div');
|
||||
document.body.appendChild(element);
|
||||
}
|
||||
|
||||
|
||||
function tearDown() {
|
||||
goog.dispose(transition);
|
||||
goog.dispose(mockClock);
|
||||
goog.dom.removeNode(element);
|
||||
}
|
||||
|
||||
|
||||
function testPlayEventFiredOnPlay() {
|
||||
if (!goog.style.transition.isSupported()) return;
|
||||
|
||||
transition = createTransition(element, 10);
|
||||
var handlerCalled = false;
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.PLAY,
|
||||
function() {
|
||||
handlerCalled = true;
|
||||
});
|
||||
|
||||
transition.play();
|
||||
assertTrue(handlerCalled);
|
||||
}
|
||||
|
||||
|
||||
function testBeginEventFiredOnPlay() {
|
||||
if (!goog.style.transition.isSupported()) return;
|
||||
|
||||
transition = createTransition(element, 10);
|
||||
var handlerCalled = false;
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.BEGIN,
|
||||
function() {
|
||||
handlerCalled = true;
|
||||
});
|
||||
|
||||
transition.play();
|
||||
assertTrue(handlerCalled);
|
||||
}
|
||||
|
||||
|
||||
function testFinishEventsFiredAfterFinish() {
|
||||
if (!goog.style.transition.isSupported()) return;
|
||||
|
||||
transition = createTransition(element, 10);
|
||||
var finishHandlerCalled = false;
|
||||
var endHandlerCalled = false;
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.FINISH,
|
||||
function() {
|
||||
finishHandlerCalled = true;
|
||||
});
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.END,
|
||||
function() {
|
||||
endHandlerCalled = true;
|
||||
});
|
||||
|
||||
transition.play();
|
||||
|
||||
mockClock.tick(10000);
|
||||
|
||||
assertTrue(finishHandlerCalled);
|
||||
assertTrue(endHandlerCalled);
|
||||
}
|
||||
|
||||
|
||||
function testEventsWhenTransitionIsUnsupported() {
|
||||
if (goog.style.transition.isSupported()) return;
|
||||
|
||||
transition = createTransition(element, 10);
|
||||
|
||||
var stopHandlerCalled = false;
|
||||
var finishHandlerCalled = false, endHandlerCalled = false;
|
||||
var beginHandlerCalled = false, playHandlerCalled = false;
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.BEGIN,
|
||||
function() {
|
||||
beginHandlerCalled = true;
|
||||
});
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.PLAY,
|
||||
function() {
|
||||
playHandlerCalled = true;
|
||||
});
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.FINISH,
|
||||
function() {
|
||||
finishHandlerCalled = true;
|
||||
});
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.END,
|
||||
function() {
|
||||
endHandlerCalled = true;
|
||||
});
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.STOP,
|
||||
function() {
|
||||
stopHandlerCalled = true;
|
||||
});
|
||||
|
||||
assertFalse(transition.play());
|
||||
|
||||
assertTrue(beginHandlerCalled);
|
||||
assertTrue(playHandlerCalled);
|
||||
assertTrue(endHandlerCalled);
|
||||
assertTrue(finishHandlerCalled);
|
||||
|
||||
transition.stop();
|
||||
|
||||
assertFalse(stopHandlerCalled);
|
||||
}
|
||||
|
||||
|
||||
function testCallingStopDuringAnimationWorks() {
|
||||
if (!goog.style.transition.isSupported()) return;
|
||||
|
||||
transition = createTransition(element, 10);
|
||||
|
||||
var stopHandler = goog.testing.recordFunction();
|
||||
var endHandler = goog.testing.recordFunction();
|
||||
var finishHandler = goog.testing.recordFunction();
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.STOP,
|
||||
stopHandler);
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.END,
|
||||
endHandler);
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.FINISH,
|
||||
finishHandler);
|
||||
|
||||
transition.play();
|
||||
mockClock.tick(1);
|
||||
transition.stop();
|
||||
assertEquals(1, stopHandler.getCallCount());
|
||||
assertEquals(1, endHandler.getCallCount());
|
||||
mockClock.tick(10000);
|
||||
assertEquals(0, finishHandler.getCallCount());
|
||||
}
|
||||
|
||||
|
||||
function testCallingStopImmediatelyWorks() {
|
||||
if (!goog.style.transition.isSupported()) return;
|
||||
|
||||
transition = createTransition(element, 10);
|
||||
|
||||
var stopHandler = goog.testing.recordFunction();
|
||||
var endHandler = goog.testing.recordFunction();
|
||||
var finishHandler = goog.testing.recordFunction();
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.STOP,
|
||||
stopHandler);
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.END,
|
||||
endHandler);
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.FINISH,
|
||||
finishHandler);
|
||||
|
||||
transition.play();
|
||||
transition.stop();
|
||||
assertEquals(1, stopHandler.getCallCount());
|
||||
assertEquals(1, endHandler.getCallCount());
|
||||
mockClock.tick(10000);
|
||||
assertEquals(0, finishHandler.getCallCount());
|
||||
}
|
||||
|
||||
function testCallingStopAfterAnimationDoesNothing() {
|
||||
if (!goog.style.transition.isSupported()) return;
|
||||
|
||||
transition = createTransition(element, 10);
|
||||
|
||||
var stopHandler = goog.testing.recordFunction();
|
||||
var endHandler = goog.testing.recordFunction();
|
||||
var finishHandler = goog.testing.recordFunction();
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.STOP,
|
||||
stopHandler);
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.END,
|
||||
endHandler);
|
||||
goog.events.listen(transition, goog.fx.Transition.EventType.FINISH,
|
||||
finishHandler);
|
||||
|
||||
transition.play();
|
||||
mockClock.tick(10000);
|
||||
transition.stop();
|
||||
assertEquals(0, stopHandler.getCallCount());
|
||||
assertEquals(1, endHandler.getCallCount());
|
||||
assertEquals(1, finishHandler.getCallCount());
|
||||
}
|
||||
Reference in New Issue
Block a user