Commit c6efeda0 authored by Christoph Burgdorf's avatar Christoph Burgdorf

cleanups

parent 6a8987ed
<!doctype html> <!doctype html>
<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org"> <html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
<!doctype html>
<html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title>AngularJS Todo App</title> <title>AngularJS - TodoMVC</title>
<link rel="stylesheet" href="css/app.css"/> <link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/overwrite.css">
</head> </head>
<body> <body>
<div ng:controller="App.Controllers.TodoController" id="todoapp"> <div ng:controller="App.Controllers.TodoController" id="todoapp">
<div class="title"> <header>
<h1> <h1>Todos</h1>
Todos
</h1>
</div>
<div class="content">
<div id="todo-form">
</div>
<form id="todo-form" ng:submit="addTodo()"> <form id="todo-form" ng:submit="addTodo()">
<input id="new-todo" name="newTodo" my:blur="addTodo()" placeholder="What needs to be done?" type="text"> <input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?">
<span class="ui-tooltip-top" ng:show="showHitEnterHint">
Press Enter to save this task
</span>
</form> </form>
<div id="todos"> </header>
<ul id="todo-list"> <!-- TODO: figure out if its spec compliant to remove the #main id if its getting into the way?-->
<li class="todo" ng:class="'editing-' + todo.editing + ' done-' + todo.done" ng:repeat="todo in todos"> <section id="main" ng:show="hasTodos()">
<div class="display"> <input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()">
<input class="check" type="checkbox" name="todo.done" / > <label for="toggle-all">Mark all as complete</label>
<div ng:click="editTodo(todo)" class="todo-content"> {{ todo.content }} </div> <ul id="todo-list">
<span class="todo-destroy" ng:click="removeTodo(todo)"></span> <li ng:repeat="todo in todos" my:dblclick="editTodo(todo)" ng:class="(todo.done && ' done ') + (todo.editing && ' editing ')">
</div> <div class="view">
<div class="edit"> <input class="toggle" type="checkbox" name="todo.done">
<label>{{ todo.content }}</label>
<a class="destroy" ng:click="removeTodo(todo)"></a>
</div>
<form ng:submit="finishEditing(todo)"> <form ng:submit="finishEditing(todo)">
<input class="todo-input" my:focus="todo.editing" my:blur="finishEditing(todo)" name="todo.content" type="text"> <input class="edit" type="text" name="todo.content" my:focus="todo.editing" my:blur="finishEditing(todo)">
</form> </form>
</div> </li>
</li> </ul>
</ul> </section>
</div> <footer ng:show="hasTodos()">
<div id="todo-stats"> <a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a>
<span class="todo-count" ng:show="hasTodos()"> <div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
<ng:pluralize count="remainingTodos()" when="{'0' : 'No items left.', '1': '1 item left.', 'other' : '{} items left.' }"> </footer>
</ng:pluralize> </div>
</span> <div id="instructions">
<span class="todo-clear" ng:show="hasFinishedTodos()"> Double-click to edit a todo.
<a ng:click="clearCompletedItems()">
Clear <ng:pluralize count="finishedTodos()" when="{'1': '1 completed item', 'other' : '{} completed items' }">
</ng:pluralize>
</a>
</span>
</div>
</div>
</div> </div>
<ul id="instructions">
<li>Click to edit a todo.</li>
</ul>
<div id="credits"> <div id="credits">
<p> Created by <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>.
Originally Created by
<br>
<a href="http://jgn.me/">Jérôme Gravel-Niquet</a>
</p>
<p>
Rewritten to use <a href="http://angularjs.org">AngularJS </a> by
<br>
<a href="http://cburgdorf.wordpress.com/">Christoph Burgdorf</a>
<br>Cleanup, edits: <a href="http://www.linkedin.com/pub/dan-doyon/2/1b0/a83">Dan Doyon</a>
</p>
</div> </div>
<script src="js/booter.js"></script> <script src="js/booter.js"></script>
<script src="lib/angular/angular.min.js" ng:autobind></script> <script src="js/lib/angular/angular.min.js" ng:autobind></script>
<script src="lib/rx/rx.js"></script>
<script src="lib/rx/rx.angular.js"></script>
<script src="js/controllers.js"></script> <script src="js/controllers.js"></script>
<script src="js/directive.js"></script> <script src="js/directive.js"></script>
</body> </body>
......
<!doctype html>
<html xmlns:ng="http://angularjs.org/" xmlns:my="http://rx.org">
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>AngularJS - TodoMVC</title>
<link rel="stylesheet" href="css/app.css">
<link rel="stylesheet" href="css/overwrite.css">
</head>
<body>
<div ng:controller="App.Controllers.TodoController" id="todoapp">
<header>
<h1>Todos</h1>
<form id="todo-form" ng:submit="addTodo()">
<input id="new-todo" name="newTodo" type="text" placeholder="What needs to be done?">
</form>
</header>
<!-- TODO: figure out if its spec compliant to remove the #main id if its getting into the way?-->
<section id="main" ng:show="hasTodos()">
<input id="toggle-all" type="checkbox" name="allChecked" ng:click="toggleAllStates()">
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">
<li ng:repeat="todo in todos" my:dblclick="editTodo(todo)" ng:class="(todo.done && ' done ') + (todo.editing && ' editing ')">
<div class="view">
<input class="toggle" type="checkbox" name="todo.done">
<label>{{ todo.content }}</label>
<a class="destroy" ng:click="removeTodo(todo)"></a>
</div>
<form ng:submit="finishEditing(todo)">
<input class="edit" type="text" name="todo.content" my:focus="todo.editing" my:blur="finishEditing(todo)">
</form>
</li>
</ul>
</section>
<footer ng:show="hasTodos()">
<a id="clear-completed" ng:click="clearCompletedItems()" ng:show="hasFinishedTodos()">{{ clearItemsText() }}</a>
<div id="todo-count"><b>{{ remainingTodos() }}</b> {{ itemsLeftText() }}</div>
</footer>
</div>
<div id="instructions">
Double-click to edit a todo.
</div>
<div id="credits">
Created by <a href="http://twitter.com/cburgdorf">Christoph Burgdorf</a>.
</div>
<script src="js/booter.js"></script>
<script src="lib/angular/angular.min.js" ng:autobind></script>
<script src="lib/rx/rx.js"></script>
<script src="lib/rx/rx.angular.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directive.js"></script>
</body>
</html>
(function () {
var global = this,
root = (typeof ProvideCustomRxRootObject == "undefined") ? global.Rx : ProvideCustomRxRootObject();
var observable = root.Observable;
var observableCreate = observable.Create;
observable.FromAngularScope = function (angularScope, propertyName) {
return observableCreate(function (observer) {
var unwatch = angularScope.$watch(function(){
return angularScope[propertyName];
},
function(){
observer.OnNext(angularScope[propertyName]);
});
return function () {
unwatch();
};
})
.Skip(1); //In AngularJS 0.10.x There is no way to avoid initial evaluation. So we take care about it!
};
observable.prototype.ToOutputProperty = function (scope, propertyName) {
var disposable = this.Subscribe(function (data) {
scope[propertyName] = data;
scope.$apply();
});
scope.$on('$destroy', function(event){
//we need to asure that we only dispose the observable when it's our scope that
//was destroyed.
//TODO: Figure out if thats enough to asure the above (e.g what happens when
//a child scope will be destroyed but ours won't be affected. Or the other way around,
//if a higher scope will be destroyed (and therefore ours as well) does it mean that $destroy()
//will be also called on our scope or will our scope get destroyed without actually
//calling $destroy() on it?
if (event.targetScope === scope){
disposable.Dispose();
}
});
};
})();
\ No newline at end of file
This diff is collapsed.
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment