Skip to content

T
todomvc
Commit 9454892b authored by Pascal Hartig's avatar Pascal Hartig
Browse files
Options

Add JS/C2JS/Labs menu to TodoMVC

parent 89acc6ab
Show whitespace changes
Inline Side-by-side
Showing with 194 additions and 192 deletions
bower.json
View file @ 9454892b
......@@ -2,7 +2,8 @@
"name": "todomvc",
"dependencies": {
"jquery": "~2.1.0",
"bootstrap": "~3.2.0"
"bootstrap": "~3.2.0",
"paper-tabs": "Polymer/paper-tabs#~0.3.5"
},
"devDependencies": {
"prefixfree": "91790e8aff6d807cd62018479db2307e1972b92a"
......
index.html
View file @ 9454892b
......@@ -15,6 +15,7 @@
<meta property="og:image" content="https://raw.github.com/tastejs/todomvc/gh-pages/site-assets/screenshot.png">
<meta property="og:description" content="Helping you select an MV* framework - Todo apps for Backbone.js, Ember.js, AngularJS, Spine and many more">
<link rel="shortcut icon" href="site-assets/favicon.ico">
<script src="bower_components/platform/platform.js"></script>
<!-- build:remove -->
<script src="bower_components/prefixfree/prefixfree.min.js"></script>
<!-- endbuild -->
......@@ -22,6 +23,7 @@
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="site-assets/main.css">
<!-- endbuild -->
<link rel="import" href="bower_components/paper-tabs/paper-tabs.html">
</head>
<body>
<div class="container">
......@@ -50,7 +52,34 @@
<div class="g-plusone" data-size="medium" data-annotation="none" data-href="http://todomvc.com"></div>
</div>
<div class="col-md-8">
<h2>JavaScript Apps</h2>
<h2>Examples</h2>
<style shim-shadowdom>
paper-tabs, core-toolbar {
color: rgb(53, 53, 53);
background-color: #f4f4f4;
font-family: 'Helvetica Neue', Helvetica, Arial;
box-shadow: 0px 3px 2px rgba(0, 0, 0, 0.2);
}
paper-tabs::shadow #selectionBar {
background-color: #b12d2b;
}
paper-tab::shadow paper-ripple#ink {
color: #b12d2b;
}
</style>
<paper-tabs selected="js" class="js-app-tabs">
<paper-tab name="js">JavaScript</paper-tab>
<paper-tab name="c2js">Compile-to-JS</paper-tab>
<paper-tab name="labs">Labs</paper-tab>
</paper-tabs>
<div class="app-lists">
<div class="js-app-list" data-app-list="js">
<p class="applist-intro">
These are examples written in pure JavaScript.
</p>
<ul class="applist js">
<li class="routing">
<a href="architecture-examples/backbone/" data-source="http://documentcloud.github.com/backbone/" data-content="Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface.">Backbone.js</a>
......@@ -76,6 +105,14 @@
<li class="routing">
<a href="architecture-examples/knockback/" data-source="http://kmalakoff.github.com/knockback/" data-content="Knockback.js provides Knockout.js magic for Backbone.js Models and Collections.">Knockback.js</a>
</li>
</ul>
</div>
<div class="js-app-list" data-app-list="c2js">
<p class="applist-intro">
These are applications written in programming
languages that compile to JavaScript.
</p>
<ul class="applist js">
<li class="routing">
<a href="architecture-examples/canjs/" data-source="http://canjs.us" data-content="CanJS with jQuery. CanJS is a client-side, JavaScript framework that makes building rich web applications easy. It provides can.Model (for connecting to RESTful JSON interfaces), can.View (for template loading and caching), can.Observe (for key-value binding), can.EJS (live binding templates), can.Control (declarative event bindings) and can.route (routing support).">CanJS</a>
</li>
......@@ -161,87 +198,10 @@
<a href="labs/architecture-examples/react-backbone/" data-source="http://facebook.github.io/react/" data-content="This React example integrates Backbone for its model and router. It is a showcase of third-party library integration for developers wishing to use React together with a different JavaScript framework.">React + <br>Backbone.js</a>
</li>
</ul>
</div>
</div>
<ul class="legend">
<li><b>*</b> <span class="label">R</span> = App also demonstrates routing</li>
<li><b>*</b> <strong>Maroon</strong> = App requires further work to comply with <a href="https://github.com/tastejs/todomvc/blob/master/app-spec.md">the spec</a></li>
</ul>
<hr>
<h2>Compile To JavaScript</h2>
<ul class="applist ctojs">
<li class="routing">
<a href="architecture-examples/spine/" data-source="http://spinejs.com" data-content="Spine is a lightweight framework for building JavaScript web applications. Spine gives you an MVC structure and then gets out of your way, allowing you to concentrate on the fun stuff, building awesome web applications.">Spine</a>
</li>
<li class="routing">
<a href="vanilla-examples/vanilladart/build/" data-source="http://dartlang.org" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. It has two run modes : it can be compiled to JS, and will later run in native VM in compliant browsers (just in a dedicated Chromium provided with Dart SDK for the moment).">Dart</a>
</li>
<li class="routing">
<a href="architecture-examples/gwt/" data-source="https://developers.google.com/web-toolkit/" data-content="Google Web Toolkit (GWT) is an MVP development toolkit for building and optimizing complex browser-based applications. GWT is used by many products at Google, including Google AdWords.">GWT</a>
</li>
<li class="routing">
<a href="architecture-examples/closure/" data-source="http://code.google.com/closure/library/" data-content="The Closure Library is a broad, well-tested, modular, and cross-browser JavaScript library. You can pull just what you need from a large set of reusable UI widgets and controls, and from lower-level utilities for DOM manipulation, server communication, animation, data structures, unit testing, rich-text editing, and more.">Closure</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/angular-dart/web/" data-source="https://github.com/angular/angular.dart" data-content="Dart firstly targets the development of modern and large scale browser-side web apps. It's an object oriented language with a C-style syntax. AngularDart is a port of Angular to Dart.">AngularDart</a>
</li>
<li class="routing labs">
<a href="labs/architecture-examples/batman/" data-source="http://batmanjs.org" data-content="Batman.js is a framework for building rich web applications with CoffeeScript or JavaScript. App code is concise and declarative, thanks to a powerful system of view bindings and observable properties. The API is designed with developer and designer happiness as its first priority.">Batman.js</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/typescript-backbone/" data-source="http://typescriptlang.org" data-content="TypeScript is a language for application-scale JavaScript development. It offers classes, modules, interfaces and type-checking at compile time to help you build robust components.">TypeScript <br>+ Backbone.js</a>
</li>
<li class="labs routing">
<a href="labs/architecture-examples/typescript-angular/" data-source="http://typescriptlang.org" data-content="An AngularJS + TypeScript implementation of TodoMVC. The only significant difference between this and the vanilla Angular app is that dependency injection is done via annotated constructors, which allows minification of JavaScript.">TypeScript <br>+ AngularJS</a>
</li>
<li class="labs">
<a href="labs/architecture-examples/serenadejs/" data-source="https://github.com/elabs/serenade.js" data-content="Serenade.js is yet another MVC client side JavaScript framework. Why do we indulge in recreating the wheel? We believe that Serenade.js more closely follows the ideas of classical MVC than competing frameworks.">Serenade.js</a>
</li>
</ul>
<hr>
<h2>MVC Extension Frameworks</h2>
<ul class="applist">
<li class="routing">
<a href="labs/architecture-examples/backbone_marionette/" data-source="http://marionettejs.com" data-content="Backbone.Marionette is a composite application library for Backbone.js that aims to simplify the construction of large scale JavaScript applications.">MarionetteJS</a>
</li>
<li class="routing labs">
<a href="labs/architecture-examples/thorax/" data-source="http://thoraxjs.org" data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications.">Thorax</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/chaplin-brunch/public/" data-source="http://chaplinjs.org" data-content="Chaplin is an architecture for JavaScript applications using the Backbone.js library. Chaplin addresses Backbone’s limitations by providing a lightweight and flexible structure that features well-proven design patterns and best practises.">Chaplin + Brunch</a>
</li>
</ul>
<hr>
<h2>Module Loaders</h2>
<ul class="applist">
<li class="routing">
<a href="dependency-examples/backbone_require/" data-source="http://requirejs.org" data-content="RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.">Backbone.js + RequireJS</a>
</li>
<li class="routing">
<a href="dependency-examples/flight/" data-source="http://twitter.github.com/flight" data-content="Flight is a lightweight, component-based JavaScript framework that maps behavior to DOM nodes. Twitter uses it for their web applications.">Flight</a>
</li>
<li class="labs">
<a href="labs/dependency-examples/knockoutjs_require/" data-source="http://knockoutjs.com" data-content="This project is an adaptation of /architecture-examples/knockoutjs with require.js.">KnockoutJS + RequireJS</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/angularjs_require/" data-source="http://angularjs.org" data-content="What HTML would have been had it been designed for web apps. This is an example of using it with AMD modules.">AngularJS + RequireJS</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/canjs_require/" data-source="http://canjs.us" data-content="CanJS is a client-side, JavaScript framework that makes building rich web applications easy. The AMD version lets you use the framework in a fully modular fashion and will only what you actually need.">CanJS + RequireJS</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/troopjs_require/" data-source="https://github.com/troopjs/" data-content="TroopJS attempts to package popular front-end technologies and bind them with minimal effort for the developer. It includes jQuery for DOM manipulation, When.js for promises, RequireJS for modularity and Has.js for feature detection. On top, it includes Pub/Sub support, templating, weaving (widgets to DOM) and auto-wiring.">TroopJS + RequireJS</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/thorax_lumbar/public/" data-source="http://walmartlabs.github.com/lumbar" data-content="An opinionated, battle tested Backbone + Handlebars framework to build large scale web applications. This implementation uses Lumbar, a route based module loader.">Thorax + Lumbar</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/somajs_require/" data-source="http://somajs.github.com/somajs" data-content="soma.js is a framework created to build scalable and maintainable javascript applications.">soma.js + RequireJS</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/durandal/" data-source="http://durandaljs.com/" data-content="Single Page Apps Done Right">Durandal</a>
</li>
<li class="routing labs">
<a href="labs/dependency-examples/lavaca_require/" data-source="http://getlavaca.com" data-content="A curated collection of tools for building mobile web applications.">Lavaca + RequireJS</a>
</li>
<li><span class="label">R</span> = App also demonstrates routing</li>
</ul>
<hr>
<h2>Real-time</h2>
......
site-assets/main.css
View file @ 9454892b
......@@ -118,6 +118,10 @@ header nav a:not(:last-child) {
left: -20px;
}
.app-lists {
overflow: hidden;
}
.applist {
list-style: none;
margin: 0;
......@@ -136,6 +140,11 @@ header nav a:not(:last-child) {
column-break-inside: avoid;
}
.applist-intro {
margin: 10px 0 10px;
font-style: italic;
}
.applist .routing::after,
.applist .label,
.legend .label {
......@@ -323,6 +332,15 @@ a.zocial {
border-radius: .3em;
}
@keyframes swoosh-in {
from { opacity: 0; transform: translateX(-500px); }
to { opacity: 1; transform: translateX(0); }
}
.anim-swoosh-in {
animation: swoosh-in 0.5s;
}
@media (max-width: 480px) {
body .applist {
column-count: auto !important;
......
site-assets/main.js
View file @ 9454892b
......@@ -183,4 +183,27 @@
}
}]);
function AppTabs() {
document.querySelector(AppTabs.selectors.tabs).addEventListener(
'core-select', this.onSelect.bind(this));
}
AppTabs.selectors = {
'tabs': '.js-app-tabs',
'list': '.js-app-list'
};
AppTabs.prototype.onSelect = function (e) {
var selected = e.target.selected;
[].slice.call(document.querySelectorAll(AppTabs.selectors.list)).forEach(
function (e) {
var isSelected = e.dataset.appList === selected;
e.style.display = isSelected ? 'block' : 'none';
e.classList.toggle('anim-swoosh-in', isSelected);
}
);
};
new AppTabs();
}());
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