Skip to content

refactor: some cleanup / refactoring #1

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

Merged
merged 2 commits into from
Feb 27, 2014
Merged

refactor: some cleanup / refactoring #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ae36e2
refactor: some cleanup / refactoring
vicb Feb 12, 2014
2157332
fix(animate): fix tests
vicb Feb 25, 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
26 changes: 11 additions & 15 deletions demo/animate_demo/animate_demo.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import 'dart:mirrors';

@NgController(
selector: '[animation-demo]',
publishAs: 'adc'
)
publishAs: 'adc')
class AnimationDemoController {
final dom.Element rootElement;
final NgAnimate animate;
Expand All @@ -26,14 +25,14 @@ class AnimationDemoController {

dom.Element _boxElement;
dom.Element _hostElement;
List<dom.Element> _animatedBoxes = [];
List<String> listOfThings = [];
final _animatedBoxes = <dom.Element>[];
final listOfThings = <String>[];

AnimationDemoController(this.animate, this.rootElement) {
_boxElement = rootElement.querySelector(".animated-box");
_hostElement = rootElement.querySelector(".animated-host");
}

animateABox() {
if(_boxElement != null) {
if(boxToggle) {
Expand All @@ -50,8 +49,7 @@ class AnimationDemoController {
if(!areThingsVisible && _animatedBoxes.length == 0) {

for(int i = 0; i < 1000; i++) {
var element = new dom.Element.div();
element.classes.add("magic-box");
var element = new dom.Element.div()..classes.add("magic-box");
_animatedBoxes.add(element);
}
animate.insert(_animatedBoxes, _hostElement);
Expand All @@ -65,21 +63,19 @@ class AnimationDemoController {
areThingsVisible = !areThingsVisible;
}
}

addThing() {
listOfThings.add("Thing-$thingNumber");
thingNumber++;
}

removeThing() {
if(listOfThings.length > 0) {
listOfThings.removeLast();
}
if (listOfThings.isNotEmpty) listOfThings.removeLast();
}
}

main() {
ngBootstrap(module: new Module()
..install(new NgAnimateModule())
..type(AnimationDemoController));
..install(new NgAnimateModule())
..type(AnimationDemoController));
}
90 changes: 44 additions & 46 deletions demo/animate_demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,51 @@
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
<link type="text/css" rel="stylesheet" href="style.css" />
<title>Hello, World!</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body ng-app animation-demo ng-cloak>

<h2><code>ng-repeat</code> Demo</h2>
<button ng-click="adc.addThing()">Add Thing {{adc.thingNumber}}</button>
<button ng-click="adc.removeThing()">Remove Thing</button>
<ul>
<li class="thingy" ng-repeat="thing in adc.listOfThings">
<ul>
<li class="thingy" ng-repeat="thing2 in adc.listOfThings">
{{thing2}}
</li>
</ul>
</li>
</ul>


<h2><code>ng-switch</code> Demo</h2>
<button ng-click="adc.currentThing = 'a'">Set A</button>
<button ng-click="adc.currentThing = 'b'">Set B</button>
<button ng-click="adc.currentThing = 'c'">Set C</button>
<button ng-click="adc.currentThing = null">Clear</button>
<div ng-switch="adc.currentThing">
<div class="thingy" ng-switch-when="a">I'm THING A</div>
<div class="thingy" ng-switch-when="b">I'm THING B</div>
<div class="thingy" ng-switch-when="c">I'm THING C</div>
<div class="thingy" ng-switch-default>Uhhh I'm NoThing</div>
</div>


<h2><code>ng-if</code> Demo</h2>
<button ng-click="adc.ifToggle = !adc.ifToggle">Toggle</button>
<div class="some-div" ng-if="adc.ifToggle">
I am a div with content. Just your standared <code>ng-if</code>.
</div>
<hr />

<h2>Animate Demos</h2>
<button ng-click="adc.animateABox()"><h3>Animate a box</h3></button>
<div class="animated-box"></div>

<button ng-click="adc.toggleABunchOfThings()"><h3>Animate 1,000 boxes</h3></button>
<div class="animated-host"></div>

<script type="application/dart" src="animate_demo.dart"></script>
<script src="packages/browser/dart.js"></script>
<h2><code>ng-repeat</code> Demo</h2>
<button ng-click="adc.addThing()">Add Thing {{adc.thingNumber}}</button>
<button ng-click="adc.removeThing()">Remove Thing</button>
<ul>
<li class="thingy" ng-repeat="thing in adc.listOfThings">
<ul>
<li class="thingy" ng-repeat="thing2 in adc.listOfThings">
{{thing2}}
</li>
</ul>
</li>
</ul>

<h2><code>ng-switch</code> Demo</h2>
<button ng-click="adc.currentThing = 'a'">Set A</button>
<button ng-click="adc.currentThing = 'b'">Set B</button>
<button ng-click="adc.currentThing = 'c'">Set C</button>
<button ng-click="adc.currentThing = null">Clear</button>
<div ng-switch="adc.currentThing">
<div class="thingy" ng-switch-when="a">I'm THING A</div>
<div class="thingy" ng-switch-when="b">I'm THING B</div>
<div class="thingy" ng-switch-when="c">I'm THING C</div>
<div class="thingy" ng-switch-default>Uhhh I'm NoThing</div>
</div>


<h2><code>ng-if</code> Demo</h2>
<button ng-click="adc.ifToggle = !adc.ifToggle">Toggle</button>
<div class="some-div" ng-if="adc.ifToggle">
I am a div with content. Just your standared <code>ng-if</code>.
</div>
<hr />

<h2>Animate Demos</h2>
<button ng-click="adc.animateABox()">Animate a box</button>
<div class="animated-box"></div>

<button ng-click="adc.toggleABunchOfThings()">Animate 1,000 boxes</button>
<div class="animated-host"></div>

<script type="application/dart" src="animate_demo.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
10 changes: 8 additions & 2 deletions demo/animate_demo/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,12 @@ body {
opacity: 0;
}

button {
padding: 10px;
font-weight: bold;
font-size: 1.1em;
}

.some-div {
height: 100px;
opacity: 1;
Expand All @@ -79,7 +85,7 @@ body {

.some-div.ng-remove.ng-remove-active {
opacity: 0;
height: 0px;
height: 0;
}

.animated-box {
Expand Down Expand Up @@ -134,7 +140,7 @@ body {
transform: scale(0.0, 0.0);
-webkit-transform: scale(0.0,0.0);
opacity: 0.0000001; /* Zero doesn't work???!!!! */
/* Chrome bug filed:
/* Chrome bug filed:
https://code.google.com/p/chromium/issues/detail?id=345894
*/
transition: all 800ms linear;
Expand Down
30 changes: 15 additions & 15 deletions lib/animate/animation.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@ class AnimationResult {

/// A [CANCELED] animation should not procced with it's final effects.
static const CANCELED = const AnimationResult._('CANCELED');
/// Convienence method if you don't care exactly how an animation completed

/// Convenience method if you don't care exactly how an animation completed
/// only that it did.
bool get isCompleted => this == COMPLETED || this == COMPLETED_IGNORED;

Expand Down Expand Up @@ -42,13 +42,13 @@ class AnimationResult {
*
* 4. read() - Every animation frame you may read computed state here.
*
* 5. detatch() - After update returns false, detach will be executed and you
* 5. detach() - After update returns false, detach will be executed and you
* should physically detach from the dom and execute onCompleted futures
* so that external code that depends on your animation can do dom
* mutates as well.
*
*
* Additionally, interruptAndCancel() and interruptAndComplete are used to
* forcibly interupt an animation, and the implementation should immediatly
* forcibly interrupt an animation, and the implementation should immediately
* detach from [element].
*/
abstract class Animation {
Expand All @@ -64,14 +64,14 @@ abstract class Animation {
* Perform dom mutations to attach an initialize the animation on [element].
* The animation should not modify the [element] until this method is called.
*/
attach() { }
void attach() { }

/**
* This performs DOM reads to compute information about the animation, and
* will occur after attach. [time] is a date time representation of the
* current time, and [offsetMs] is the time since the last animation frame.
*/
start(num time) { }
void start(num time) { }

/**
* Occurs every animation frame. Return false to stop receiving animation
Expand All @@ -89,28 +89,28 @@ abstract class Animation {
* [time] is a [DateTime] representation of the current time
* [offsetMs] is the time since the last animation frame.
*/
read(num time) { }
void read(num time) { }

/**
* When [update] returns false, this will be called on the same animation
* frame. Any temporary classes or element modifications should be removed
* from the element and the onCompleted future should be executed.
*/
detach(num time) { }
void detach(num time) { }

/**
* This occurs when another animation interupts this animation or the cancel()
* method is called on the AnimationHandel. The animation should remove any
* temporary classes or element modifications and the onCompleted future
* should be executed with a result of [CANCELED].
* This occurs when another animation interrupts this animation or the
* cancel() method is called on the AnimationHandel. The animation should
* remove any temporary classes or element modifications and the onCompleted
* future should be executed with a result of [CANCELED].
*/
interruptAndCancel() { }
void interruptAndCancel() { }

/**
* This occurs when the complete() method is called on the AnimationHandel.
* The animation should remove any temporary classes or element modifications,
* finish any final permanent modifications and the onCompleted future
* should be executed with a result of [COMPLETED].
*/
interruptAndComplete() { }
void interruptAndComplete() { }
}
12 changes: 6 additions & 6 deletions lib/animate/animation_handle.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,10 +65,10 @@ class _MultiAnimationHandle extends AnimationHandle {
// animations were completed, COMPLETED_IGNORED will be returned.
// if any animation was canceled, the result will be CANCELED
var rtrn = AnimationResult.COMPLETED;
for(var result in results) {
if(result == AnimationResult.CANCELED)
for (var result in results) {
if (result == AnimationResult.CANCELED)
return AnimationResult.CANCELED;
if(result == AnimationResult.COMPLETED_IGNORED)
if (result == AnimationResult.COMPLETED_IGNORED)
rtrn = result;
}
return rtrn;
Expand All @@ -77,14 +77,14 @@ class _MultiAnimationHandle extends AnimationHandle {

/// For each of the tracked [AnimationHandle]s, call complete().
complete() {
for(var handle in _animationHandles) {
for (var handle in _animationHandles) {
handle.complete();
}
}

/// For each of the tracked [AnimationHandle]s, call cancel().
cancel() {
for(var handle in _animationHandles) {
for (var handle in _animationHandles) {
handle.cancel();
}
}
Expand All @@ -97,7 +97,7 @@ class _MultiAnimationHandle extends AnimationHandle {
class _CompletedAnimationHandle extends AnimationHandle {
Future<AnimationResult> _future;
get onCompleted {
if(_future == null) {
if (_future == null) {
var completer = new Completer<AnimationResult>();
completer.complete(AnimationResult.COMPLETED_IGNORED);
_future = completer.future;
Expand Down
Loading