Skip to content

T
todomvc
Commit 1dd17f9c authored by Arthur Verschaeve's avatar Arthur Verschaeve
Browse files
Options

Merge pull request #1304 from tastejs/sjs/angular2 

angular2: App Example
parents 11c77bd9 f774572d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 29850 additions and 4 deletions
examples/angular2/.gitignore 0 → 100644
View file @ 1dd17f9c
node_modules/.bin
node_modules/node-uuid
!node_modules/node-uuid/uuid.js
node_modules/store.js
node_modules/store.js/store.js
node_modules/systemjs/bower.json
node_modules/systemjs/.npmignore
node_modules/systemjs/.agignore
node_modules/systemjs/test
node_modules/systemjs/package.json
node_modules/systemjs/LICENSE
node_modules/systemjs/Makefile
node_modules/systemjs/README.md
node_modules/systemjs/lib
node_modules/systemjs/node_modules
node_modules/systemjs/dist/
!node_modules/systemjs/dist/system.js.map
!node_modules/systemjs/dist/system.js
!node_modules/systemjs/dist/es6-module-loader.js
node_modules/tsd
node_modules/typescript
node_modules/todomvc-app-css
!node_modules/todomvc-app-css/index.css
node_modules/todomvc-common
!node_modules/todomvc-common/base.css
node_modules/bower-traceur-runtime
node_modules/bower-traceur-runtime/traceur-runtime.js
typings
examples/angular2/app.js 0 → 100644
View file @ 1dd17f9c
if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
if (typeof __metadata !== "function") __metadata = function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
/// <reference path="typings/angular2/angular2.d.ts" />
var angular2_1 = require('angular2/angular2');
var store_1 = require('services/store');
var ESC_KEY = 27;
var ENTER_KEY = 13;
var TodoApp = (function () {
function TodoApp() {
this.todoStore = new store_1.TodoStore();
}
TodoApp.prototype.stopEditing = function (todo, editedTitle) {
todo.setTitle(editedTitle.value);
todo.editing = false;
};
TodoApp.prototype.cancelEditingTodo = function (todo) { todo.editing = false; };
TodoApp.prototype.updateEditingTodo = function (editedTitle, todo) {
editedTitle = editedTitle.value.trim();
todo.editing = false;
if (editedTitle.length === 0) {
return this.todoStore.remove(todo.uid);
}
todo.setTitle(editedTitle);
};
TodoApp.prototype.editTodo = function (todo) {
todo.editing = true;
};
TodoApp.prototype.removeCompleted = function () {
this.todoStore.removeCompleted();
};
TodoApp.prototype.toggleCompletion = function (uid) {
this.todoStore.toggleCompletion(uid);
};
TodoApp.prototype.remove = function (uid) {
this.todoStore.remove(uid);
};
TodoApp.prototype.addTodo = function ($event, newtodo) {
if ($event.which === ENTER_KEY && newtodo.value.trim().length) {
this.todoStore.add(newtodo.value);
newtodo.value = '';
}
};
TodoApp = __decorate([
angular2_1.Component({
selector: 'todo-app',
}),
angular2_1.View({
directives: [angular2_1.NgIf, angular2_1.NgFor],
template: "\n\t\t<section class=\"todoapp\">\n\t\t\t<header class=\"header\">\n\t\t\t\t<h1>todos</h1>\n\t\t\t\t<input class=\"new-todo\" placeholder=\"What needs to be done?\" autofocus=\"\" #newtodo (keyup)=\"addTodo($event, newtodo)\">\n\t\t\t</header>\n\t\t\t<section class=\"main\" *ng-if=\"todoStore.todos.length > 0\">\n\t\t\t\t<input class=\"toggle-all\" type=\"checkbox\" *ng-if=\"todoStore.todos.length\" #toggleall [checked]=\"todoStore.allCompleted()\" (click)=\"todoStore.setAllTo(toggleall)\">\n\t\t\t\t<ul class=\"todo-list\">\n\t\t\t\t\t<li *ng-for=\"#todo of todoStore.todos\" [class.completed]=\"todo.completed\" [class.editing]=\"todo.editing\">\n\t\t\t\t\t\t<div class=\"view\">\n\t\t\t\t\t\t\t<input class=\"toggle\" type=\"checkbox\" (click)=\"toggleCompletion(todo.uid)\" [checked]=\"todo.completed\">\n\t\t\t\t\t\t\t<label (dblclick)=\"editTodo(todo)\">{{todo.title}}</label>\n\t\t\t\t\t\t\t<button class=\"destroy\" (click)=\"remove(todo.uid)\"></button>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<input class=\"edit\" *ng-if=\"todo.editing\" [value]=\"todo.title\" #editedtodo (blur)=\"stopEditing(todo, editedtodo)\" (keyup.enter)=\"updateEditingTodo(editedtodo, todo)\" (keyup.escape)=\"cancelEditingTodo(todo)\">\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</section>\n\t\t\t<footer class=\"footer\" *ng-if=\"todoStore.todos.length > 0\">\n\t\t\t\t<span class=\"todo-count\"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>\n\t\t\t\t<button class=\"clear-completed\" *ng-if=\"todoStore.getCompleted().length > 0\" (click)=\"removeCompleted()\">Clear completed</button>\n\t\t\t</footer>\n\t\t</section>"
}),
__metadata('design:paramtypes', [])
], TodoApp);
return TodoApp;
})();
angular2_1.bootstrap(TodoApp);
examples/angular2/app.ts 0 → 100644
View file @ 1dd17f9c
/// <reference path="typings/angular2/angular2.d.ts" />
import {Component, View, bootstrap, NgIf, NgFor} from 'angular2/angular2';
import {TodoStore, Todo} from 'services/store';
const ESC_KEY = 27;
const ENTER_KEY = 13;
@Component({
selector: 'todo-app',
})
@View({
directives: [NgIf, NgFor],
template: `
<section class="todoapp">
<header class="header">
<h1>todos</h1>
<input class="new-todo" placeholder="What needs to be done?" autofocus="" #newtodo (keyup)="addTodo($event, newtodo)">
</header>
<section class="main" *ng-if="todoStore.todos.length > 0">
<input class="toggle-all" type="checkbox" *ng-if="todoStore.todos.length" #toggleall [checked]="todoStore.allCompleted()" (click)="todoStore.setAllTo(toggleall)">
<ul class="todo-list">
<li *ng-for="#todo of todoStore.todos" [class.completed]="todo.completed" [class.editing]="todo.editing">
<div class="view">
<input class="toggle" type="checkbox" (click)="toggleCompletion(todo.uid)" [checked]="todo.completed">
<label (dblclick)="editTodo(todo)">{{todo.title}}</label>
<button class="destroy" (click)="remove(todo.uid)"></button>
</div>
<input class="edit" *ng-if="todo.editing" [value]="todo.title" #editedtodo (blur)="stopEditing(todo, editedtodo)" (keyup.enter)="updateEditingTodo(editedtodo, todo)" (keyup.escape)="cancelEditingTodo(todo)">
</li>
</ul>
</section>
<footer class="footer" *ng-if="todoStore.todos.length > 0">
<span class="todo-count"><strong>{{todoStore.getRemaining().length}}</strong> {{todoStore.getRemaining().length == 1 ? 'item' : 'items'}} left</span>
<button class="clear-completed" *ng-if="todoStore.getCompleted().length > 0" (click)="removeCompleted()">Clear completed</button>
</footer>
</section>`
})
class TodoApp {
todoStore: TodoStore;
constructor() {
this.todoStore = new TodoStore();
}
stopEditing(todo: Todo, editedTitle) {
todo.setTitle(editedTitle.value);
todo.editing = false;
}
cancelEditingTodo(todo: Todo) { todo.editing = false; }
updateEditingTodo(editedTitle, todo: Todo) {
editedTitle = editedTitle.value.trim();
todo.editing = false;
if (editedTitle.length === 0) {
return this.todoStore.remove(todo.uid);
}
todo.setTitle(editedTitle);
}
editTodo(todo: Todo) {
todo.editing = true;
}
removeCompleted() {
this.todoStore.removeCompleted();
}
toggleCompletion(uid: String) {
this.todoStore.toggleCompletion(uid);
}
remove(uid: String){
this.todoStore.remove(uid);
}
addTodo($event, newtodo) {
if ($event.which === ENTER_KEY && newtodo.value.trim().length) {
this.todoStore.add(newtodo.value);
newtodo.value = '';
}
}
}
bootstrap(TodoApp);
examples/angular2/index.html 0 → 100644
View file @ 1dd17f9c
<!doctype html>
<html lang="en" data-framework="angular2">
<head>
<meta charset="utf-8">
<title>Angular2 • TodoMVC</title>
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
<script src="node_modules/bower-traceur-runtime/traceur-runtime.js"></script>
<script src="node_modules/systemjs/dist/system.js"></script>
<script src="node_modules/store.js/store.js"></script>
<script src="vendor/angular2.dev.js"></script>
</head>
<body>
<todo-app></todo-app>
<footer class="info">
<p>Double-click to edit a todo</p>
<p>
Created by <a href="http://github.com/samccone">Sam Saccone</a>
using <a href="http://angular.io">Angular2</a>
</p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script>
System.paths['node-uuid'] = 'node_modules/node-uuid/uuid.js';
System.import('app');
</script>
</body>
</html>
examples/angular2/node_modules/bower-traceur-runtime/traceur-runtime.js 0 → 100644
View file @ 1dd17f9c
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/angular2/node_modules/node-uuid/uuid.js 0 → 100644
View file @ 1dd17f9c
// uuid.js
//
// Copyright (c) 2010-2012 Robert Kieffer
// MIT License - http://opensource.org/licenses/mit-license.php
(function() {
var _global = this;
// Unique ID creation requires a high quality random # generator. We feature
// detect to determine the best RNG source, normalizing to a function that
// returns 128-bits of randomness, since that's what's usually required
var _rng;
// Node.js crypto-based RNG - http://nodejs.org/docs/v0.6.2/api/crypto.html
//
// Moderately fast, high quality
if (typeof(_global.require) == 'function') {
try {
var _rb = _global.require('crypto').randomBytes;
_rng = _rb && function() {return _rb(16);};
} catch(e) {}
}
if (!_rng && _global.crypto && crypto.getRandomValues) {
// WHATWG crypto-based RNG - http://wiki.whatwg.org/wiki/Crypto
//
// Moderately fast, high quality
var _rnds8 = new Uint8Array(16);
_rng = function whatwgRNG() {
crypto.getRandomValues(_rnds8);
return _rnds8;
};
}
if (!_rng) {
// Math.random()-based (RNG)
//
// If all else fails, use Math.random(). It's fast, but is of unspecified
// quality.
var _rnds = new Array(16);
_rng = function() {
for (var i = 0, r; i < 16; i++) {
if ((i & 0x03) === 0) r = Math.random() * 0x100000000;
_rnds[i] = r >>> ((i & 0x03) << 3) & 0xff;
}
return _rnds;
};
}
// Buffer class to use
var BufferClass = typeof(_global.Buffer) == 'function' ? _global.Buffer : Array;
// Maps for number <-> hex string conversion
var _byteToHex = [];
var _hexToByte = {};
for (var i = 0; i < 256; i++) {
_byteToHex[i] = (i + 0x100).toString(16).substr(1);
_hexToByte[_byteToHex[i]] = i;
}
// **`parse()` - Parse a UUID into it's component bytes**
function parse(s, buf, offset) {
var i = (buf && offset) || 0, ii = 0;
buf = buf || [];
s.toLowerCase().replace(/[0-9a-f]{2}/g, function(oct) {
if (ii < 16) { // Don't overflow!
buf[i + ii++] = _hexToByte[oct];
}
});
// Zero out remaining bytes if string was short
while (ii < 16) {
buf[i + ii++] = 0;
}
return buf;
}
// **`unparse()` - Convert UUID byte array (ala parse()) into a string**
function unparse(buf, offset) {
var i = offset || 0, bth = _byteToHex;
return bth[buf[i++]] + bth[buf[i++]] +
bth[buf[i++]] + bth[buf[i++]] + '-' +
bth[buf[i++]] + bth[buf[i++]] + '-' +
bth[buf[i++]] + bth[buf[i++]] + '-' +
bth[buf[i++]] + bth[buf[i++]] + '-' +
bth[buf[i++]] + bth[buf[i++]] +
bth[buf[i++]] + bth[buf[i++]] +
bth[buf[i++]] + bth[buf[i++]];
}
// **`v1()` - Generate time-based UUID**
//
// Inspired by https://github.com/LiosK/UUID.js
// and http://docs.python.org/library/uuid.html
// random #'s we need to init node and clockseq
var _seedBytes = _rng();
// Per 4.5, create and 48-bit node id, (47 random bits + multicast bit = 1)
var _nodeId = [
_seedBytes[0] | 0x01,
_seedBytes[1], _seedBytes[2], _seedBytes[3], _seedBytes[4], _seedBytes[5]
];
// Per 4.2.2, randomize (14 bit) clockseq
var _clockseq = (_seedBytes[6] << 8 | _seedBytes[7]) & 0x3fff;
// Previous uuid creation time
var _lastMSecs = 0, _lastNSecs = 0;
// See https://github.com/broofa/node-uuid for API details
function v1(options, buf, offset) {
var i = buf && offset || 0;
var b = buf || [];
options = options || {};
var clockseq = options.clockseq != null ? options.clockseq : _clockseq;
// UUID timestamps are 100 nano-second units since the Gregorian epoch,
// (1582-10-15 00:00). JSNumbers aren't precise enough for this, so
// time is handled internally as 'msecs' (integer milliseconds) and 'nsecs'
// (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00.
var msecs = options.msecs != null ? options.msecs : new Date().getTime();
// Per 4.2.1.2, use count of uuid's generated during the current clock
// cycle to simulate higher resolution clock
var nsecs = options.nsecs != null ? options.nsecs : _lastNSecs + 1;
// Time since last uuid creation (in msecs)
var dt = (msecs - _lastMSecs) + (nsecs - _lastNSecs)/10000;
// Per 4.2.1.2, Bump clockseq on clock regression
if (dt < 0 && options.clockseq == null) {
clockseq = clockseq + 1 & 0x3fff;
}
// Reset nsecs if clock regresses (new clockseq) or we've moved onto a new
// time interval
if ((dt < 0 || msecs > _lastMSecs) && options.nsecs == null) {
nsecs = 0;
}
// Per 4.2.1.2 Throw error if too many uuids are requested
if (nsecs >= 10000) {
throw new Error('uuid.v1(): Can\'t create more than 10M uuids/sec');
}
_lastMSecs = msecs;
_lastNSecs = nsecs;
_clockseq = clockseq;
// Per 4.1.4 - Convert from unix epoch to Gregorian epoch
msecs += 12219292800000;
// `time_low`
var tl = ((msecs & 0xfffffff) * 10000 + nsecs) % 0x100000000;
b[i++] = tl >>> 24 & 0xff;
b[i++] = tl >>> 16 & 0xff;
b[i++] = tl >>> 8 & 0xff;
b[i++] = tl & 0xff;
// `time_mid`
var tmh = (msecs / 0x100000000 * 10000) & 0xfffffff;
b[i++] = tmh >>> 8 & 0xff;
b[i++] = tmh & 0xff;
// `time_high_and_version`
b[i++] = tmh >>> 24 & 0xf | 0x10; // include version
b[i++] = tmh >>> 16 & 0xff;
// `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant)
b[i++] = clockseq >>> 8 | 0x80;
// `clock_seq_low`
b[i++] = clockseq & 0xff;
// `node`
var node = options.node || _nodeId;
for (var n = 0; n < 6; n++) {
b[i + n] = node[n];
}
return buf ? buf : unparse(b);
}
// **`v4()` - Generate random UUID**
// See https://github.com/broofa/node-uuid for API details
function v4(options, buf, offset) {
// Deprecated - 'format' argument, as supported in v1.2
var i = buf && offset || 0;
if (typeof(options) == 'string') {
buf = options == 'binary' ? new BufferClass(16) : null;
options = null;
}
options = options || {};
var rnds = options.random || (options.rng || _rng)();
// Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
rnds[6] = (rnds[6] & 0x0f) | 0x40;
rnds[8] = (rnds[8] & 0x3f) | 0x80;
// Copy bytes to buffer, if provided
if (buf) {
for (var ii = 0; ii < 16; ii++) {
buf[i + ii] = rnds[ii];
}
}
return buf || unparse(rnds);
}
// Export public API
var uuid = v4;
uuid.v1 = v1;
uuid.v4 = v4;
uuid.parse = parse;
uuid.unparse = unparse;
uuid.BufferClass = BufferClass;
if (typeof(module) != 'undefined' && module.exports) {
// Publish as node.js module
module.exports = uuid;
} else if (typeof define === 'function' && define.amd) {
// Publish as AMD module
define(function() {return uuid;});
} else {
// Publish as global (in browsers)
var _previousRoot = _global.uuid;
// **`noConflict()` - (browser only) to reset global 'uuid' var**
uuid.noConflict = function() {
_global.uuid = _previousRoot;
return uuid;
};
_global.uuid = uuid;
}
}).call(this);
examples/angular2/node_modules/store.js/store.js 0 → 100644
View file @ 1dd17f9c
/* Copyright (c) 2010 Marcus Westin
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in
* all copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
* THE SOFTWARE.
*/
var store = (function(){
var api = {},
win = window,
doc = win.document,
localStorageName = 'localStorage',
globalStorageName = 'globalStorage',
storage
api.disabled = false
api.set = function(key, value) {}
api.get = function(key) {}
api.remove = function(key) {}
api.clear = function() {}
api.transact = function(key, transactionFn) {
var val = api.get(key)
if (typeof val == 'undefined') { val = {} }
transactionFn(val)
api.set(key, val)
}
api.serialize = function(value) {
return JSON.stringify(value)
}
api.deserialize = function(value) {
if (typeof value != 'string') { return undefined }
return JSON.parse(value)
}
// Functions to encapsulate questionable FireFox 3.6.13 behavior
// when about.config::dom.storage.enabled === false
// See https://github.com/marcuswestin/store.js/issues#issue/13
function isLocalStorageNameSupported() {
try { return (localStorageName in win && win[localStorageName]) }
catch(err) { return false }
}
function isGlobalStorageNameSupported() {
try { return (globalStorageName in win && win[globalStorageName] && win[globalStorageName][win.location.hostname]) }
catch(err) { return false }
}
if (isLocalStorageNameSupported()) {
storage = win[localStorageName]
api.set = function(key, val) { storage.setItem(key, api.serialize(val)) }
api.get = function(key) { return api.deserialize(storage.getItem(key)) }
api.remove = function(key) { storage.removeItem(key) }
api.clear = function() { storage.clear() }
} else if (isGlobalStorageNameSupported()) {
storage = win[globalStorageName][win.location.hostname]
api.set = function(key, val) { storage[key] = api.serialize(val) }
api.get = function(key) { return api.deserialize(storage[key] && storage[key].value) }
api.remove = function(key) { delete storage[key] }
api.clear = function() { for (var key in storage ) { delete storage[key] } }
} else if (doc.documentElement.addBehavior) {
var storage = doc.createElement('div')
function withIEStorage(storeFunction) {
return function() {
var args = Array.prototype.slice.call(arguments, 0)
args.unshift(storage)
// See http://msdn.microsoft.com/en-us/library/ms531081(v=VS.85).aspx
// and http://msdn.microsoft.com/en-us/library/ms531424(v=VS.85).aspx
doc.body.appendChild(storage)
storage.addBehavior('#default#userData')
storage.load(localStorageName)
var result = storeFunction.apply(api, args)
doc.body.removeChild(storage)
return result
}
}
api.set = withIEStorage(function(storage, key, val) {
storage.setAttribute(key, api.serialize(val))
storage.save(localStorageName)
})
api.get = withIEStorage(function(storage, key) {
return api.deserialize(storage.getAttribute(key))
})
api.remove = withIEStorage(function(storage, key) {
storage.removeAttribute(key)
storage.save(localStorageName)
})
api.clear = withIEStorage(function(storage) {
var attributes = storage.XMLDocument.documentElement.attributes
storage.load(localStorageName)
for (var i=0, attr; attr = attributes[i]; i++) {
storage.removeAttribute(attr.name)
}
storage.save(localStorageName)
})
} else {
api.disabled = true
}
return api
})();
examples/angular2/node_modules/systemjs/dist/system.js 0 → 100644
View file @ 1dd17f9c
This diff is collapsed.
examples/angular2/node_modules/systemjs/dist/system.js.map 0 → 100644
View file @ 1dd17f9c
This diff is collapsed.
examples/angular2/node_modules/todomvc-app-css/index.css 0 → 100644
View file @ 1dd17f9c
html,
body {
margin: 0;
padding: 0;
}
button {
margin: 0;
padding: 0;
border: 0;
background: none;
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #f5f5f5;
color: #4d4d4d;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
button,
input[type="checkbox"] {
outline: none;
}
.hidden {
display: none;
}
.todoapp {
background: #fff;
margin: 130px 0 40px 0;
position: relative;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2),
0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.todoapp input::-webkit-input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::-moz-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
.todoapp h1 {
position: absolute;
top: -155px;
width: 100%;
font-size: 100px;
font-weight: 100;
text-align: center;
color: rgba(175, 47, 47, 0.15);
-webkit-text-rendering: optimizeLegibility;
-moz-text-rendering: optimizeLegibility;
text-rendering: optimizeLegibility;
}
.new-todo,
.edit {
position: relative;
margin: 0;
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
outline: none;
color: inherit;
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
box-sizing: border-box;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
font-smoothing: antialiased;
}
.new-todo {
padding: 16px 16px 16px 60px;
border: none;
background: rgba(0, 0, 0, 0.003);
box-shadow: inset 0 -2px 1px rgba(0,0,0,0.03);
}
.main {
position: relative;
z-index: 2;
border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {
display: none;
}
.toggle-all {
position: absolute;
top: -55px;
left: -12px;
width: 60px;
height: 34px;
text-align: center;
border: none; /* Mobile Safari */
}
.toggle-all:before {
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
.toggle-all:checked:before {
color: #737373;
}
.todo-list {
margin: 0;
padding: 0;
list-style: none;
}
.todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px solid #ededed;
}
.todo-list li:last-child {
border-bottom: none;
}
.todo-list li.editing {
border-bottom: none;
padding: 0;
}
.todo-list li.editing .edit {
display: block;
width: 506px;
padding: 13px 17px 12px 17px;
margin: 0 0 0 43px;
}
.todo-list li.editing .view {
display: none;
}
.todo-list li .toggle {
text-align: center;
width: 40px;
/* auto, since non-WebKit browsers doesn't support input styling */
height: auto;
position: absolute;
top: 0;
bottom: 0;
margin: auto 0;
border: none; /* Mobile Safari */
-webkit-appearance: none;
appearance: none;
}
.todo-list li .toggle:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#ededed" stroke-width="3"/></svg>');
}
.todo-list li .toggle:checked:after {
content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="-10 -18 100 135"><circle cx="50" cy="50" r="50" fill="none" stroke="#bddad5" stroke-width="3"/><path fill="#5dc2af" d="M72 25L42 71 27 56l-4 4 20 20 34-52z"/></svg>');
}
.todo-list li label {
white-space: pre;
word-break: break-word;
padding: 15px 60px 15px 15px;
margin-left: 45px;
display: block;
line-height: 1.2;
transition: color 0.4s;
}
.todo-list li.completed label {
color: #d9d9d9;
text-decoration: line-through;
}
.todo-list li .destroy {
display: none;
position: absolute;
top: 0;
right: 10px;
bottom: 0;
width: 40px;
height: 40px;
margin: auto 0;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
.todo-list li .destroy:hover {
color: #af5b5e;
}
.todo-list li .destroy:after {
content: '×';
}
.todo-list li:hover .destroy {
display: block;
}
.todo-list li .edit {
display: none;
}
.todo-list li.editing:last-child {
margin-bottom: -1px;
}
.footer {
color: #777;
padding: 10px 15px;
height: 20px;
text-align: center;
border-top: 1px solid #e6e6e6;
}
.footer:before {
content: '';
position: absolute;
right: 0;
bottom: 0;
left: 0;
height: 50px;
overflow: hidden;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
0 8px 0 -3px #f6f6f6,
0 9px 1px -3px rgba(0, 0, 0, 0.2),
0 16px 0 -6px #f6f6f6,
0 17px 2px -6px rgba(0, 0, 0, 0.2);
}
.todo-count {
float: left;
text-align: left;
}
.todo-count strong {
font-weight: 300;
}
.filters {
margin: 0;
padding: 0;
list-style: none;
position: absolute;
right: 0;
left: 0;
}
.filters li {
display: inline;
}
.filters li a {
color: inherit;
margin: 3px;
padding: 3px 7px;
text-decoration: none;
border: 1px solid transparent;
border-radius: 3px;
}
.filters li a.selected,
.filters li a:hover {
border-color: rgba(175, 47, 47, 0.1);
}
.filters li a.selected {
border-color: rgba(175, 47, 47, 0.2);
}
.clear-completed,
html .clear-completed:active {
float: right;
position: relative;
line-height: 20px;
text-decoration: none;
cursor: pointer;
position: relative;
}
.clear-completed:hover {
text-decoration: underline;
}
.info {
margin: 65px auto 0;
color: #bfbfbf;
font-size: 10px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
text-align: center;
}
.info p {
line-height: 1;
}
.info a {
color: inherit;
text-decoration: none;
font-weight: 400;
}
.info a:hover {
text-decoration: underline;
}
/*
Hack to remove background from Mobile Safari.
Can't use it globally since it destroys checkboxes in Firefox
*/
@media screen and (-webkit-min-device-pixel-ratio:0) {
.toggle-all,
.todo-list li .toggle {
background: none;
}
.todo-list li .toggle {
height: 40px;
}
.toggle-all {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-appearance: none;
appearance: none;
}
}
@media (max-width: 430px) {
.footer {
height: 50px;
}
.filters {
bottom: 10px;
}
}
examples/angular2/node_modules/todomvc-common/base.css 0 → 100644
View file @ 1dd17f9c
hr {
margin: 20px 0;
border: 0;
border-top: 1px dashed #c5c5c5;
border-bottom: 1px dashed #f7f7f7;
}
.learn a {
font-weight: normal;
text-decoration: none;
color: #b83f45;
}
.learn a:hover {
text-decoration: underline;
color: #787e7e;
}
.learn h3,
.learn h4,
.learn h5 {
margin: 10px 0;
font-weight: 500;
line-height: 1.2;
color: #000;
}
.learn h3 {
font-size: 24px;
}
.learn h4 {
font-size: 18px;
}
.learn h5 {
margin-bottom: 0;
font-size: 14px;
}
.learn ul {
padding: 0;
margin: 0 0 30px 25px;
}
.learn li {
line-height: 20px;
}
.learn p {
font-size: 15px;
font-weight: 300;
line-height: 1.3;
margin-top: 0;
margin-bottom: 0;
}
#issue-count {
display: none;
}
.quote {
border: none;
margin: 20px 0 60px 0;
}
.quote p {
font-style: italic;
}
.quote p:before {
content: '“';
font-size: 50px;
opacity: .15;
position: absolute;
top: -20px;
left: 3px;
}
.quote p:after {
content: '”';
font-size: 50px;
opacity: .15;
position: absolute;
bottom: -42px;
right: 3px;
}
.quote footer {
position: absolute;
bottom: -40px;
right: 0;
}
.quote footer img {
border-radius: 3px;
}
.quote footer a {
margin-left: 5px;
vertical-align: middle;
}
.speech-bubble {
position: relative;
padding: 10px;
background: rgba(0, 0, 0, .04);
border-radius: 5px;
}
.speech-bubble:after {
content: '';
position: absolute;
top: 100%;
right: 30px;
border: 13px solid transparent;
border-top-color: rgba(0, 0, 0, .04);
}
.learn-bar > .learn {
position: absolute;
width: 272px;
top: 8px;
left: -300px;
padding: 10px;
border-radius: 5px;
background-color: rgba(255, 255, 255, .6);
transition-property: left;
transition-duration: 500ms;
}
@media (min-width: 899px) {
.learn-bar {
width: auto;
padding-left: 300px;
}
.learn-bar > .learn {
left: 8px;
}
}
examples/angular2/package.json 0 → 100644
View file @ 1dd17f9c
{
"private": true,
"scripts": {
"postinstall": "cp node_modules/systemjs/node_modules/es6-module-loader/dist/es6-module-loader.js node_modules/systemjs/dist && ./node_modules/.bin/tsd query angular2 node-uuid storejs node --action install",
"dev": "tsc --watch -m commonjs -t es5 --emitDecoratorMetadata app.ts"
},
"devDependencies": {
"tsd": "^0.6.0",
"typescript": "^1.5.0-beta"
},
"dependencies": {
"bower-traceur-runtime": "git://github.com/jmcriffey/bower-traceur-runtime#0.0.87",
"node-uuid": "^1.4.3",
"store.js": "^1.0.4",
"systemjs": "^0.16.11",
"todomvc-app-css": "^2.0.0",
"todomvc-common": "^1.0.1"
}
}
examples/angular2/readme.md 0 → 100644
View file @ 1dd17f9c
# Angular 2 • [TodoMVC](http://todomvc.com)
> Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.
## Resources
- [Website](https://angular.io/)
- [Documentation](https://angular.io/docs/js/latest/)
### Articles
- [Angular 2 Status preview](http://ng-learn.org/2014/03/AngularJS-2-Status-Preview/)
### Support
- [StackOverflow](http://stackoverflow.com/questions/tagged/angular2)
- [Google Groups](https://groups.google.com/forum/#!forum/angular)
- [Twitter](http://twitter.com/angularjs)
- [Google+](https://plus.sandbox.google.com/+AngularJS/posts)
*Let us [know](https://github.com/tastejs/todomvc/issues) if you discover anything worth sharing.*
## Implementation
This app was built using typescript and angular2. To make changes simply
* `npm i`
* `npm run dev`
## Credit
Created by [Sam Saccone](http://github.com/samcone)
examples/angular2/services/store.js 0 → 100644
View file @ 1dd17f9c
/// <reference path="../typings/node-uuid/node-uuid.d.ts" />
/// <reference path="../typings/storejs/storejs.d.ts" />
/// <reference path="../typings/angular2/angular2.d.ts" />
if (typeof __decorate !== "function") __decorate = function (decorators, target, key, desc) {
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") return Reflect.decorate(decorators, target, key, desc);
switch (arguments.length) {
case 2: return decorators.reduceRight(function(o, d) { return (d && d(o)) || o; }, target);
case 3: return decorators.reduceRight(function(o, d) { return (d && d(target, key)), void 0; }, void 0);
case 4: return decorators.reduceRight(function(o, d) { return (d && d(target, key, o)) || o; }, desc);
}
};
var angular2_1 = require('angular2/angular2');
var uuid = require('node-uuid');
var Todo = (function () {
function Todo(title) {
this.uid = uuid.v4();
this.completed = false;
this.editing = false;
this.title = title.trim();
}
Todo.prototype.setTitle = function (title) {
this.title = title.trim();
};
return Todo;
})();
exports.Todo = Todo;
var TodoStore = (function () {
function TodoStore() {
var persistedTodos = store.get('angular2-todos') || [];
// Normalize back into classes
this.todos = persistedTodos.map(function (todo) {
var ret = new Todo(todo.title);
ret.completed = todo.completed;
ret.uid = todo.uid;
return ret;
});
}
TodoStore.prototype._updateStore = function () {
store.set('angular2-todos', this.todos);
};
TodoStore.prototype.get = function (state) {
return this.todos.filter(function (todo) { return todo.completed === state.completed; });
};
TodoStore.prototype.allCompleted = function () {
return this.todos.length === this.getCompleted().length;
};
TodoStore.prototype.setAllTo = function (toggler) {
this.todos.forEach(function (t) { return t.completed = toggler.checked; });
this._updateStore();
};
TodoStore.prototype.removeCompleted = function () {
this.todos = this.get({ completed: false });
};
TodoStore.prototype.getRemaining = function () {
return this.get({ completed: false });
};
TodoStore.prototype.getCompleted = function () {
return this.get({ completed: true });
};
TodoStore.prototype.toggleCompletion = function (uid) {
for (var _i = 0, _a = this.todos; _i < _a.length; _i++) {
var todo = _a[_i];
if (todo.uid === uid) {
todo.completed = !todo.completed;
break;
}
}
;
this._updateStore();
};
TodoStore.prototype.remove = function (uid) {
for (var _i = 0, _a = this.todos; _i < _a.length; _i++) {
var todo = _a[_i];
if (todo.uid === uid) {
this.todos.splice(this.todos.indexOf(todo), 1);
break;
}
}
this._updateStore();
};
TodoStore.prototype.add = function (title) {
this.todos.push(new Todo(title));
this._updateStore();
};
TodoStore = __decorate([
angular2_1.Injectable()
], TodoStore);
return TodoStore;
})();
exports.TodoStore = TodoStore;
examples/angular2/services/store.ts 0 → 100644
View file @ 1dd17f9c
/// <reference path="../typings/node-uuid/node-uuid.d.ts" />
/// <reference path="../typings/storejs/storejs.d.ts" />
/// <reference path="../typings/angular2/angular2.d.ts" />
import {Injectable} from 'angular2/angular2';
import * as uuid from 'node-uuid';
export class Todo {
completed: Boolean;
editing: Boolean;
title: String;
uid: String;
setTitle(title: String) {
this.title = title.trim();
}
constructor(title: String) {
this.uid = uuid.v4();
this.completed = false;
this.editing = false;
this.title = title.trim();
}
}
@Injectable()
export class TodoStore {
todos: Array<Todo>;
constructor() {
let persistedTodos = store.get('angular2-todos') || [];
// Normalize back into classes
this.todos = persistedTodos.map( (todo: {title: String, completed: Boolean, uid: String}) => {
let ret = new Todo(todo.title);
ret.completed = todo.completed;
ret.uid = todo.uid;
return ret;
});
}
_updateStore() {
store.set('angular2-todos', this.todos);
}
get(state: {completed: Boolean}) {
return this.todos.filter((todo: Todo) => todo.completed === state.completed);
}
allCompleted() {
return this.todos.length === this.getCompleted().length;
}
setAllTo(toggler) {
this.todos.forEach((t: Todo) => t.completed = toggler.checked);
this._updateStore();
}
removeCompleted() {
this.todos = this.get({completed: false});
}
getRemaining() {
return this.get({completed: false});
}
getCompleted() {
return this.get({completed: true});
}
toggleCompletion(uid: String) {
for (let todo of this.todos) {
if (todo.uid === uid) {
todo.completed = !todo.completed;
break;
}
};
this._updateStore();
}
remove(uid: String) {
for (let todo of this.todos) {
if (todo.uid === uid) {
this.todos.splice(this.todos.indexOf(todo), 1);
break;
}
}
this._updateStore();
}
add(title: String) {
this.todos.push(new Todo(title));
this._updateStore();
}
}
examples/angular2/vendor/angular2.dev.js 0 → 100644
View file @ 1dd17f9c
This diff is collapsed.
index.html
View file @ 1dd17f9c
......@@ -278,6 +278,9 @@
<li class="routing">
<a href="examples/webrx/" data-source="http://webrxjs.org" data-content="WebRx is a Javascript MVVM-Framework that combines functional-reactive programming with declarative Data-Binding, Templating and Client-Side Routing. The framework is built on top of ReactiveX for Javascript (RxJs) which is a powerful set of libraries for processing and querying asynchronous data-streams that can originate from diverse sources such as Http-Requests, Input-Events, Timers and much more.">WebRx</a>
</li>
<li>
<a href="examples/angular2/" data-source="http://angular.io" data-content="Angular is a development platform for building mobile and desktop web applications">Angular 2.0</a>
</li>
</ul>
</div>
......
learn.json
View file @ 1dd17f9c
......@@ -20,6 +20,9 @@
"url": "http://gcloud-todos.appspot.com",
"source_url": "https://github.com/GoogleCloudPlatform/gcloud-node-todos",
"type": "backend"
}, {
"name": "Angular2",
"url": "examples/angular2"
}],
"link_groups": [{
"heading": "Official Resources",
......@@ -2281,10 +2284,26 @@
"name": "WebRx on Stack Overflow",
"url": "http://stackoverflow.com/questions/tagged/webrx"
}, {
"name": "WebRx on Twitter",
"url": "http://twitter.com/webrxjs"
}]
}]
"name": "WebRx on Twitter",
"url": "http://twitter.com/webrxjs"
}]
}, {
"angular2": {
"name": "Angular2",
"description": "Angular is a development platform for building mobile and desktop web applications",
"homepage": "https://angular.io/",
"examples": [{
"name": "Example",
"url": "examples/angular2"
}],
"link_groups": [{
"heading": "Official Resources",
"links": [{
"name": "Tutorial",
"url": "https://angular.io/docs/js/latest/quickstart.html"
}]
}]
}}]
},
"templates": {
"todomvc": "<header> <h3><%= name %></h3> <span class=\"source-links\"> <% if (typeof examples !== 'undefined') { %> <% examples.forEach(function (example) { %> <h5><%= example.name %></h5> <% if (!location.href.match(example.url + '/')) { %> <a class=\"demo-link\" data-type=\"<%= example.type === 'backend' ? 'external' : 'local' %>\" href=\"<%= example.url %>\">Demo</a>, <% } if (example.type === 'backend') { %><a href=\"<%= example.source_url %>\"><% } else { %><a href=\"https://github.com/tastejs/todomvc/tree/gh-pages/<%= example.source_url ? example.source_url : example.url %>\"><% } %>Source</a> <% }); %> <% } %> </span> </header> <hr> <blockquote class=\"quote speech-bubble\"> <p><%= description %></p> <footer> <a href=\"http://<%= homepage %>\"><%= name %></a> </footer> </blockquote> <% if (typeof link_groups !== 'undefined') { %> <hr> <% link_groups.forEach(function (link_group) { %> <h4><%= link_group.heading %></h4> <ul> <% link_group.links.forEach(function (link) { %> <li> <a href=\"<%= link.url %>\"><%= link.name %></a> </li> <% }); %> </ul> <% }); %> <% } %> <footer> <hr> <em>If you have other helpful links to share, or find any of the links above no longer work, please <a href=\"https://github.com/tastejs/todomvc/issues\">let us know</a>.</em> </footer>"
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7