Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Merge pull request #525 from stephenplusplus/derby

derby updated to use bower
  • Loading branch information...
commit feb84b19329cf6a245dc910d8ceff5da724743a1 2 parents 8c29cf8 + 9218182
@addyosmani addyosmani authored
View
3  labs/architecture-examples/derby/.bowerrc
@@ -0,0 +1,3 @@
+{
+ "directory": "public/components"
+}
View
7 labs/architecture-examples/derby/component.json
@@ -0,0 +1,7 @@
+{
+ "name": "todomvc-derby",
+ "version": "0.0.0",
+ "dependencies": {
+ "todomvc-common": "~0.1.3"
+ }
+}
View
1  labs/architecture-examples/derby/public/base.css
View
1  labs/architecture-examples/derby/public/bg.png
View
414 labs/architecture-examples/derby/public/components/todomvc-common/base.css
@@ -0,0 +1,414 @@
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+button {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ background: none;
+ font-size: 100%;
+ vertical-align: baseline;
+ font-family: inherit;
+ color: inherit;
+ -webkit-appearance: none;
+ /*-moz-appearance: none;*/
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+
+body {
+ font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
+ line-height: 1.4em;
+ background: #eaeaea url('bg.png');
+ color: #4d4d4d;
+ width: 550px;
+ margin: 0 auto;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ -ms-font-smoothing: antialiased;
+ -o-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+#todoapp {
+ background: #fff;
+ background: rgba(255, 255, 255, 0.9);
+ margin: 130px 0 40px 0;
+ border: 1px solid #ccc;
+ position: relative;
+ border-top-left-radius: 2px;
+ border-top-right-radius: 2px;
+ box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2),
+ 0 25px 50px 0 rgba(0, 0, 0, 0.15);
+}
+
+#todoapp:before {
+ content: '';
+ border-left: 1px solid #f5d6d6;
+ border-right: 1px solid #f5d6d6;
+ width: 2px;
+ position: absolute;
+ top: 0;
+ left: 40px;
+ height: 100%;
+}
+
+#todoapp input::-webkit-input-placeholder {
+ font-style: italic;
+}
+
+#todoapp input:-moz-placeholder {
+ font-style: italic;
+ color: #a9a9a9;
+}
+
+#todoapp h1 {
+ position: absolute;
+ top: -120px;
+ width: 100%;
+ font-size: 70px;
+ font-weight: bold;
+ text-align: center;
+ color: #b3b3b3;
+ color: rgba(255, 255, 255, 0.3);
+ text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
+ -webkit-text-rendering: optimizeLegibility;
+ -moz-text-rendering: optimizeLegibility;
+ -ms-text-rendering: optimizeLegibility;
+ -o-text-rendering: optimizeLegibility;
+ text-rendering: optimizeLegibility;
+}
+
+#header {
+ padding-top: 15px;
+ border-radius: inherit;
+}
+
+#header:before {
+ content: '';
+ position: absolute;
+ top: 0;
+ right: 0;
+ left: 0;
+ height: 15px;
+ z-index: 2;
+ border-bottom: 1px solid #6c615c;
+ background: #8d7d77;
+ background: -webkit-gradient(linear, left top, left bottom, from(rgba(132, 110, 100, 0.8)),to(rgba(101, 84, 76, 0.8)));
+ background: -webkit-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -moz-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -o-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: -ms-linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ background: linear-gradient(top, rgba(132, 110, 100, 0.8), rgba(101, 84, 76, 0.8));
+ filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#9d8b83', EndColorStr='#847670');
+ border-top-left-radius: 1px;
+ border-top-right-radius: 1px;
+}
+
+#new-todo,
+.edit {
+ position: relative;
+ margin: 0;
+ width: 100%;
+ font-size: 24px;
+ font-family: 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);
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ -ms-box-sizing: border-box;
+ -o-box-sizing: border-box;
+ box-sizing: border-box;
+ -webkit-font-smoothing: antialiased;
+ -moz-font-smoothing: antialiased;
+ -ms-font-smoothing: antialiased;
+ -o-font-smoothing: antialiased;
+ font-smoothing: antialiased;
+}
+
+#new-todo {
+ padding: 16px 16px 16px 60px;
+ border: none;
+ background: rgba(0, 0, 0, 0.02);
+ z-index: 2;
+ box-shadow: none;
+}
+
+#main {
+ position: relative;
+ z-index: 2;
+ border-top: 1px dotted #adadad;
+}
+
+label[for='toggle-all'] {
+ display: none;
+}
+
+#toggle-all {
+ position: absolute;
+ top: -42px;
+ left: -4px;
+ width: 40px;
+ text-align: center;
+ border: none; /* Mobile Safari */
+}
+
+#toggle-all:before {
+ content: '»';
+ font-size: 28px;
+ color: #d9d9d9;
+ padding: 0 25px 7px;
+}
+
+#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 dotted #ccc;
+}
+
+#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;
+ /*-moz-appearance: none;*/
+ -ms-appearance: none;
+ -o-appearance: none;
+ appearance: none;
+}
+
+#todo-list li .toggle:after {
+ content: '';
+ line-height: 43px; /* 40 + a couple of pixels visual adjustment */
+ font-size: 20px;
+ color: #d9d9d9;
+ text-shadow: 0 -1px 0 #bfbfbf;
+}
+
+#todo-list li .toggle:checked:after {
+ color: #85ada7;
+ text-shadow: 0 1px 0 #669991;
+ bottom: 1px;
+ position: relative;
+}
+
+#todo-list li label {
+ word-break: break-word;
+ padding: 15px;
+ margin-left: 45px;
+ display: block;
+ line-height: 1.2;
+ -webkit-transition: color 0.4s;
+ -moz-transition: color 0.4s;
+ -ms-transition: color 0.4s;
+ -o-transition: color 0.4s;
+ transition: color 0.4s;
+}
+
+#todo-list li.completed label {
+ color: #a9a9a9;
+ 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: 22px;
+ color: #a88a8a;
+ -webkit-transition: all 0.2s;
+ -moz-transition: all 0.2s;
+ -ms-transition: all 0.2s;
+ -o-transition: all 0.2s;
+ transition: all 0.2s;
+}
+
+#todo-list li .destroy:hover {
+ text-shadow: 0 0 1px #000,
+ 0 0 10px rgba(199, 107, 107, 0.8);
+ -webkit-transform: scale(1.3);
+ -moz-transform: scale(1.3);
+ -ms-transform: scale(1.3);
+ -o-transform: scale(1.3);
+ transform: scale(1.3);
+}
+
+#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: 0 15px;
+ position: absolute;
+ right: 0;
+ bottom: -31px;
+ left: 0;
+ height: 20px;
+ z-index: 1;
+ text-align: center;
+}
+
+#footer:before {
+ content: '';
+ position: absolute;
+ right: 0;
+ bottom: 31px;
+ left: 0;
+ height: 50px;
+ z-index: -1;
+ box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3),
+ 0 6px 0 -3px rgba(255, 255, 255, 0.8),
+ 0 7px 1px -3px rgba(0, 0, 0, 0.3),
+ 0 43px 0 -6px rgba(255, 255, 255, 0.8),
+ 0 44px 2px -6px rgba(0, 0, 0, 0.2);
+}
+
+#todo-count {
+ float: left;
+ text-align: left;
+}
+
+#filters {
+ margin: 0;
+ padding: 0;
+ list-style: none;
+ position: absolute;
+ right: 0;
+ left: 0;
+}
+
+#filters li {
+ display: inline;
+}
+
+#filters li a {
+ color: #83756f;
+ margin: 2px;
+ text-decoration: none;
+}
+
+#filters li a.selected {
+ font-weight: bold;
+}
+
+#clear-completed {
+ float: right;
+ position: relative;
+ line-height: 20px;
+ text-decoration: none;
+ background: rgba(0, 0, 0, 0.1);
+ font-size: 11px;
+ padding: 0 10px;
+ border-radius: 3px;
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.2);
+}
+
+#clear-completed:hover {
+ background: rgba(0, 0, 0, 0.15);
+ box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
+}
+
+#info {
+ margin: 65px auto 0;
+ color: #a6a6a6;
+ font-size: 12px;
+ text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
+ text-align: center;
+}
+
+#info a {
+ color: inherit;
+}
+
+/*
+ Hack to remove background from Mobile Safari.
+ Can't use it globally since it destroys checkboxes in Firefox and Opera
+*/
+@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 {
+ top: -56px;
+ left: -15px;
+ width: 65px;
+ height: 41px;
+ -webkit-transform: rotate(90deg);
+ transform: rotate(90deg);
+ -webkit-appearance: none;
+ appearance: none;
+ }
+}
+
+.hidden{
+ display:none;
+}
View
40 labs/architecture-examples/derby/public/components/todomvc-common/base.js
@@ -0,0 +1,40 @@
+(function () {
+ 'use strict';
+
+ if (location.hostname === 'todomvc.com') {
+ window._gaq = [['_setAccount','UA-31081062-1'],['_trackPageview']];(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];g.src='//www.google-analytics.com/ga.js';s.parentNode.insertBefore(g,s)}(document,'script'));
+ }
+
+ function getSourcePath() {
+ // If accessed via addyosmani.github.com/todomvc/, strip the project
+ // path.
+ if (location.hostname.indexOf('github.com') > 0) {
+ return location.pathname.replace(/todomvc\//, '');
+ }
+ return location.pathname;
+ }
+
+ function appendSourceLink() {
+ var sourceLink = document.createElement('a');
+ var paragraph = document.createElement('p');
+ var footer = document.getElementById('info');
+ var urlBase = 'https://github.com/addyosmani/todomvc/tree/gh-pages';
+
+ if (footer) {
+ sourceLink.href = urlBase + getSourcePath();
+ sourceLink.appendChild(document.createTextNode('Check out the source'));
+ paragraph.appendChild(sourceLink);
+ footer.appendChild(paragraph);
+ }
+ }
+
+ function redirect() {
+ if (location.hostname === 'addyosmani.github.com') {
+ location.href = location.href.replace('addyosmani.github.com/todomvc',
+ 'todomvc.com');
+ }
+ }
+
+ appendSourceLink();
+ redirect();
+})();
View
BIN  labs/architecture-examples/derby/public/components/todomvc-common/bg.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
View
1  labs/architecture-examples/derby/public/ie.js
View
9 labs/architecture-examples/derby/src/todos/index.coffee
@@ -30,6 +30,8 @@ get '/:groupName', (page, model, {groupName}) ->
.where('group').equals(groupName)
.where('completed').notEquals(true)
+ model.set '_list.filterName', 'all'
+
# model.set '_filter', 'all'
# model.ref '_list.shown', '_list', '_filter'
# XXX 2012-12-04 Calling .get on keyed ref returns getter fn.
@@ -43,12 +45,15 @@ get '/:groupName', (page, model, {groupName}) ->
# Transitional route for enabling a filter
get from: '/:groupName', to: '/:groupName/:filterName',
forward: (model, {filterName}) ->
+ model.set '_list.filterName', filterName
model.ref '_list.shown', "_list.#{filterName}"
back: (model, params) ->
+ model.set '_list.filterName', filterName
model.ref '_list.shown', "_list.all"
get from: '/:groupName/:filterName', to: '/:groupName/:filterName',
forward: (model, {filterName}) ->
+ model.set '_list.filterName', filterName
model.ref '_list.shown', "_list.#{filterName}"
ready (model) ->
@@ -82,6 +87,10 @@ ready (model) ->
item = model.at(el)
item.set '_editing', true
+ input = el.parentElement.parentElement.lastChild.firstChild
+ input.value = item.get('text')
+ input.focus()
+
exports.endEdit = (e, el) ->
item = model.at(el)
item.set '_editing', false
View
1  labs/architecture-examples/derby/styles/404.styl
@@ -1 +0,0 @@
-@import './base';
View
51 labs/architecture-examples/derby/styles/todos/index.styl
@@ -1,51 +0,0 @@
-#todo-list li input.text {
- word-break: break-word;
- margin: 15px 15px 15px 60px;
- line-height: 1.2;
- -webkit-transition: color 0.4s;
- -moz-transition: color 0.4s;
- -ms-transition: color 0.4s;
- -o-transition: color 0.4s;
- transition: color 0.4s;
- font-size: 24px;
- color: inherit;
- background-color: transparent;
- display: block;
- border: none;
- width: 506px;
- padding: 13px 17px 12px 17px;
- margin: 0 0 0 43px;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- -o-font-smoothing: antialiased;
- font-smoothing: antialiased;
-}
-#todo-list li input.text:focus {
- border: 1px solid #999;
- box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- -ms-box-sizing: border-box;
- -o-box-sizing: border-box;
- box-sizing: border-box;
- -webkit-font-smoothing: antialiased;
- -moz-font-smoothing: antialiased;
- -ms-font-smoothing: antialiased;
- -o-font-smoothing: antialiased;
- font-smoothing: antialiased;
- outline: none;
-}
-
-#todo-list li.completed input.text {
- color: #a9a9a9;
- text-decoration: line-through;
-}
-
-section.empty-list, footer.empty-list,
-section.empty-list #toggle-all,
-button#clear-completed.non-completed,
-#todo-list li.editing input.toggle,
-#todo-list li.editing button.destroy {
- display: none;
-}
View
33 labs/architecture-examples/derby/views/todos/index.html
@@ -1,8 +1,8 @@
<Head:>
- <link href="/base.css" rel="stylesheet">
+ <link href="/components/todomvc-common/base.css" rel="stylesheet">
<Title:>
- DerbyJS • TodoMVC
+ DerbyJS • TodoMVC
<Header:>
<ui:connectionAlert>
@@ -11,7 +11,7 @@
<section id="todoapp">
<app:todoHeader>
- <section id="main" class="{#unless _list.shown}empty-list{/}">
+ <section id="main" class="{#unless _list.shown}hidden{/}">
<input id="toggle-all" type="checkbox" checked="{noItems(_list.active)}" x-bind=click:clickToggleAll>
<label for="toggle-all">Mark all as complete</label>
<ul id="todo-list">{#each _list.shown}<app:todo>{/}</ul>
@@ -29,27 +29,28 @@
<todo:>
<li data-id={{id}} class="{#if .completed}completed{else}active{/}{#if ._editing} editing{/}">
- <div>
+ <div class="view">
<input class="toggle" type="checkbox" checked="{.completed}">
- <form x-bind=submit:submitEdit>
- <input class="text" x-bind="focus:startEdit, blur:endEdit" value="{.text}">
- </form>
+ <label x-bind=dblclick:startEdit>{.text}</label>
<button class="destroy" x-bind=click:del></button>
</div>
- </li>
+ <form x-bind=submit:submitEdit>
+ <input class="edit" x-bind=blur:endEdit value="{.text}">
+ </form>
+ </li>
<todoFooter:>
- <footer id="footer" class="{#unless _list.all}empty-list{/}">
- <span id="todo-count"><strong>{_list.active.length}</strong> item{#unless oneItem(_list.active)}s{/} left</span>
+ <footer id="footer" class="{#unless _list.all}hidden{/}">
+ <span id="todo-count"><strong>{_list.active.length}</strong> item{#unless oneItem(_list.active)}s{/} left</span>
<ul id="filters">
- <li class="all">
- <a href="/{{_groupName}}" class="{#if equal(_filter, 'all')}selected{/}">All</a>
+ <li>
+ <a href="/{{_groupName}}" class="{#if equal(_list.filterName, 'all')}selected{/}">All</a>
</li>
- <li class="active">
- <a href="/{{_groupName}}/active" class="{#if equal(_filter, 'active')}selected{/}">Active</a>
+ <li>
+ <a href="/{{_groupName}}/active" class="{#if equal(_list.filterName, 'active')}selected{/}">Active</a>
</li>
- <li class="completed">
- <a href="/{{_groupName}}/completed" class="{#if equal(_filter, 'completed')}selected{/}">Completed</a>
+ <li>
+ <a href="/{{_groupName}}/completed" class="{#if equal(_list.filterName, 'completed')}selected{/}">Completed</a>
</li>
</ul>
<button x-bind=click:clearCompleted id="clear-completed" class="{#unless _list.completed}non-completed{/}">
Please sign in to comment.
Something went wrong with that request. Please try again.