Skip to content

T
todomvc
Commit f119e6b9 authored by Chris Price's avatar Chris Price
Browse files
Options

Update closure UI and add ESC to revert functionality

parent c3c83045
Show whitespace changes
Inline Side-by-side
Showing with 756 additions and 150 deletions
examples/closure/.gitignore 0 → 100644
View file @ f119e6b9
node_modules/.bin
node_modules/plovr
node_modules/todomvc-app-css/*
!node_modules/todomvc-app-css/index.css
node_modules/todomvc-common/*
!node_modules/todomvc-common/base.css
!node_modules/todomvc-common/base.js
examples/closure/bower.json deleted 100644 → 0
View file @ c3c83045
{
"name": "todomvc-closure",
"version": "0.0.0",
"dependencies": {
"todomvc-common": "~0.3.0"
}
}
examples/closure/index.html
View file @ f119e6b9
......@@ -2,8 +2,10 @@
<html lang="en" data-framework="closure">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Closure • TodoMVC</title>
<link rel="stylesheet" href="bower_components/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-common/base.css">
<link rel="stylesheet" href="node_modules/todomvc-app-css/index.css">
</head>
<body>
<section id="todoapp">
......@@ -36,12 +38,12 @@
<p>Created by <a href="http://www.scottlogic.co.uk/blog/chris/">Chris Price</a></p>
<p>Part of <a href="http://todomvc.com">TodoMVC</a></p>
</footer>
<script src="bower_components/todomvc-common/base.js"></script>
<!-- The compiled version (to update run java -jar build/plovr.jar build plovr.json > js/compiled.js) -->
<script src="node_modules/todomvc-common/base.js"></script>
<!-- The compiled version (see readme.md) -->
<script type="text/javascript" src="js/compiled.js"></script>
<!-- The RAW development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=RAW"></script> -->
<!-- The COMPILED development version (to serve the files run java -jar build/plovr.jar serve plovr.json) -->
<!-- The RAW development version (see readme.md) -->
<!--<script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=RAW"></script>-->
<!-- The COMPILED development version (see readme.md) -->
<!-- <script type="text/javascript" src="http://localhost:9810/compile?id=todomvc&mode=ADVANCED"></script> -->
</body>
</html>
examples/closure/js/app.js
View file @ f119e6b9
......@@ -29,8 +29,7 @@ goog.require('todomvc.view.ToDoListContainer');
* @type {todomvc.model.ToDoItemStore}
*/
var itemStore = new todomvc.model.ToDoItemStore();
itemStore.addEventListener(todomvc.model.ToDoItemStore.ChangeEventType,
redraw);
itemStore.listen(todomvc.model.ToDoItemStore.ChangeEventType, redraw);
/**
* @type {todomvc.view.ToDoListContainer}
......@@ -110,8 +109,8 @@ var currentRoute = todomvc.Route.ALL;
/**
* @type {!goog.History}
*/
var history = new goog.History();
goog.events.listen(history, goog.history.EventType.NAVIGATE,
var historyObj = new goog.History();
goog.events.listen(historyObj, goog.history.EventType.NAVIGATE,
function(e) {
// constrain the route to be one of the enum values
switch (e.token) {
......@@ -124,7 +123,7 @@ goog.events.listen(history, goog.history.EventType.NAVIGATE,
}
break;
default:
history.replaceToken(todomvc.Route.ALL);
historyObj.replaceToken(todomvc.Route.ALL);
break;
}
});
......@@ -163,14 +162,13 @@ function redraw() {
itemCountControl.setContent(remainingCount.toString());
clearCompletedControl.setContent(doneCount.toString());
clearCompletedControl.setVisible(doneCount > 0);
goog.style.showElement(main, items.length > 0);
goog.style.showElement(footer, items.length > 0);
goog.style.setElementShown(main, items.length > 0);
goog.style.setElementShown(footer, items.length > 0);
/**
* @type {Array.<Element>}
* @type {NodeList}
*/
var routeLinks = /** @type {Array.<Element>} */
(goog.dom.query('#filters a'));
var routeLinks = document.querySelectorAll('#filters a');
goog.array.forEach(routeLinks, function(link, i) {
if ((currentRoute === todomvc.Route.ALL && i === 0) ||
(currentRoute === todomvc.Route.ACTIVE && i === 1) ||
......@@ -199,8 +197,8 @@ goog.events.listen(container,
* @type {!todomvc.model.ToDoItem}
*/
var updatedModel = new todomvc.model.ToDoItem(
(/**@type {!string} */ control.getContent()),
(/**@type {!boolean} */ control.isChecked()),
/**@type {!string} */ (control.getContent()),
/**@type {!boolean} */ (control.isChecked()),
originalModel.getId());
itemStore.addOrUpdate(updatedModel);
......@@ -216,7 +214,7 @@ goog.events.listen(container,
/**
* @type {todomvc.model.ToDoItem}
*/
var model = (/**@type {todomvc.model.ToDoItem} */ control.getModel());
var model = /**@type {todomvc.model.ToDoItem} */ (control.getModel());
if (model !== null) {
itemStore.remove(model);
}
......@@ -242,4 +240,4 @@ goog.events.listen(newToDo, goog.events.EventType.KEYUP, function(e) {
});
itemStore.load();
history.setEnabled(true);
historyObj.setEnabled(true);
examples/closure/js/compiled.js
View file @ f119e6b9
This source diff could not be displayed because it is too large. You can view the blob instead.
examples/closure/js/todomvc/model/ToDoItemStore.js
View file @ f119e6b9
......@@ -16,6 +16,8 @@ goog.require('todomvc.model.ToDoItem');
* @extends {goog.events.EventTarget}
*/
todomvc.model.ToDoItemStore = function() {
goog.events.EventTarget.call(this);
var mechanism = goog.storage.mechanism.mechanismfactory
.createHTML5LocalStorage();
/**
......
examples/closure/js/todomvc/view/ClearCompletedControlRenderer.js
View file @ f119e6b9
......@@ -25,10 +25,11 @@ goog.addSingletonGetter(todomvc.view.ClearCompletedControlRenderer);
*/
todomvc.view.ClearCompletedControlRenderer.prototype.createDom =
function(control) {
var html = todomvc.view.clearCompleted({
var sanitizedHtml = todomvc.view.clearCompleted({
number: control.getContent()
});
var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
var element = /**@type {!Element}*/ (goog.dom.htmlToDocumentFragment(
sanitizedHtml.toString()));
this.setAriaStates(control, element);
return element;
};
......
examples/closure/js/todomvc/view/ItemCountControlRenderer.js
View file @ f119e6b9
......@@ -23,10 +23,11 @@ goog.addSingletonGetter(todomvc.view.ItemCountControlRenderer);
* @return {Element} Root element for the control.
*/
todomvc.view.ItemCountControlRenderer.prototype.createDom = function(control) {
var html = todomvc.view.itemCount({
var sanitizedHtml = todomvc.view.itemCount({
number: control.getContent()
});
var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
var element = /**@type {!Element}*/ (goog.dom.htmlToDocumentFragment(
sanitizedHtml.toString()));
this.setAriaStates(control, element);
return element;
};
......
examples/closure/js/todomvc/view/ToDoItemControl.js
View file @ f119e6b9
......@@ -71,8 +71,19 @@ todomvc.view.ToDoItemControl.prototype.enterDocument = function() {
this.getHandler().listen(inputElement, goog.events.EventType.KEYUP,
function(e) {
var be = e.getBrowserEvent();
if (be.keyCode === goog.events.KeyCodes.ENTER) {
switch (be.keyCode) {
case goog.events.KeyCodes.ENTER:
this.setFocused(false);
break;
case goog.events.KeyCodes.ESC:
/**
* @type {Element}
*/
var inputElement = this.getRenderer().getInputElement(
this.getElement());
inputElement.value = this.getContent();
this.setFocused(false);
break;
}
});
};
......@@ -85,7 +96,8 @@ todomvc.view.ToDoItemControl.prototype.enterDocument = function() {
* component.
*/
todomvc.view.ToDoItemControl.prototype.getRenderer = function() {
return (/**@type {todomvc.view.ToDoItemControlRenderer}*/ this.renderer_);
return /**@type {todomvc.view.ToDoItemControlRenderer}*/ (
this.getRenderer());
};
/**
......
examples/closure/js/todomvc/view/ToDoItemControlRenderer.js
View file @ f119e6b9
......@@ -23,11 +23,12 @@ goog.addSingletonGetter(todomvc.view.ToDoItemControlRenderer);
* @return {Element} Root element for the control.
*/
todomvc.view.ToDoItemControlRenderer.prototype.createDom = function(control) {
var html = todomvc.view.toDoItem({
var sanitizedHtml = todomvc.view.toDoItem({
content: control.getContent(),
checked: control.isChecked()
});
var element = (/**@type {!Element}*/ goog.dom.htmlToDocumentFragment(html));
var element = /**@type {!Element}*/ (goog.dom.htmlToDocumentFragment(
sanitizedHtml.toString()));
this.setAriaStates(control, element);
this.setState(control, /** @type {goog.ui.Component.State} */
(control.getState()), true);
......
examples/closure/js/todomvc/view/ToDoListContainer.js
View file @ f119e6b9
......@@ -31,7 +31,7 @@ goog.inherits(todomvc.view.ToDoListContainer, goog.ui.Container);
* @param {goog.events.BrowserEvent} e Mousedown event to handle.
*/
todomvc.view.ToDoListContainer.prototype.handleMouseDown = function(e) {
if (this.enabled_) {
if (this.isEnabled()) {
this.setMouseButtonPressed(true);
}
};
examples/closure/js/todomvc/view/ToDoListContainerRenderer.js
View file @ f119e6b9
......@@ -34,11 +34,11 @@ todomvc.view.ToDoListContainerRenderer.prototype.canDecorate =
*/
todomvc.view.ToDoListContainerRenderer.prototype.initializeDom =
function(container) {
var elem = (/**@type {!Element}*/ container.getElement());
var elem = /**@type {!Element}*/ (container.getElement());
// Set the ARIA role.
var ariaRole = this.getAriaRole();
if (ariaRole) {
goog.dom.a11y.setRole(elem, ariaRole);
goog.a11y.aria.setRole(elem, ariaRole);
}
};
examples/closure/bower_components/todomvc-common/base.css → examples/closure/node_modules/todomvc-app-css/index.css
View file @ f119e6b9
......@@ -12,25 +12,30 @@ button {
font-size: 100%;
vertical-align: baseline;
font-family: inherit;
font-weight: inherit;
color: inherit;
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
font-smoothing: antialiased;
}
body {
font: 14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #eaeaea url('bg.png');
background: #f5f5f5;
color: #4d4d4d;
width: 550px;
min-width: 230px;
max-width: 550px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-ms-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
font-smoothing: antialiased;
font-weight: 300;
}
button,
......@@ -38,78 +43,50 @@ input[type="checkbox"] {
outline: none;
}
.hidden {
display: none;
}
#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%;
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;
color: #a9a9a9;
font-weight: 300;
color: #e6e6e6;
}
#todoapp input::input-placeholder {
font-style: italic;
font-weight: 300;
color: #e6e6e6;
}
#todoapp h1 {
position: absolute;
top: -120px;
top: -155px;
width: 100%;
font-size: 70px;
font-weight: bold;
font-size: 100px;
font-weight: 100;
text-align: center;
color: #b3b3b3;
color: rgba(255, 255, 255, 0.3);
text-shadow: -1px -1px rgba(0, 0, 0, 0.2);
color: rgba(175, 47, 47, 0.15);
-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: 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;
......@@ -117,6 +94,7 @@ input[type="checkbox"] {
width: 100%;
font-size: 24px;
font-family: inherit;
font-weight: inherit;
line-height: 1.4em;
border: 0;
outline: none;
......@@ -124,29 +102,25 @@ input[type="checkbox"] {
padding: 6px;
border: 1px solid #999;
box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
-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;
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 dotted #adadad;
border-top: 1px solid #e6e6e6;
}
label[for='toggle-all'] {
......@@ -155,19 +129,19 @@ label[for='toggle-all'] {
#toggle-all {
position: absolute;
top: -42px;
left: -4px;
width: 40px;
top: -55px;
left: -12px;
width: 60px;
height: 34px;
text-align: center;
/* Mobile Safari */
border: none;
border: none; /* Mobile Safari */
}
#toggle-all:before {
content: '»';
font-size: 28px;
color: #d9d9d9;
padding: 0 25px 7px;
content: '❯';
font-size: 22px;
color: #e6e6e6;
padding: 10px 27px 10px 27px;
}
#toggle-all:checked:before {
......@@ -183,7 +157,7 @@ label[for='toggle-all'] {
#todo-list li {
position: relative;
font-size: 24px;
border-bottom: 1px dotted #ccc;
border-bottom: 1px solid #ededed;
}
#todo-list li:last-child {
......@@ -215,28 +189,18 @@ label[for='toggle-all'] {
top: 0;
bottom: 0;
margin: auto 0;
/* Mobile Safari */
border: none;
border: none; /* Mobile Safari */
-webkit-appearance: none;
-ms-appearance: none;
-o-appearance: none;
appearance: none;
}
#todo-list li .toggle:after {
content: '✔';
/* 40 + a couple of pixels visual adjustment */
line-height: 43px;
font-size: 20px;
color: #d9d9d9;
text-shadow: 0 -1px 0 #bfbfbf;
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 {
color: #85ada7;
text-shadow: 0 1px 0 #669991;
bottom: 1px;
position: relative;
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 {
......@@ -246,12 +210,11 @@ label[for='toggle-all'] {
margin-left: 45px;
display: block;
line-height: 1.2;
-webkit-transition: color 0.4s;
transition: color 0.4s;
}
#todo-list li.completed label {
color: #a9a9a9;
color: #d9d9d9;
text-decoration: line-through;
}
......@@ -264,21 +227,18 @@ label[for='toggle-all'] {
width: 40px;
height: 40px;
margin: auto 0;
font-size: 22px;
color: #a88a8a;
-webkit-transition: all 0.2s;
transition: all 0.2s;
font-size: 30px;
color: #cc9a9a;
margin-bottom: 11px;
transition: color 0.2s ease-out;
}
#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);
transform: scale(1.3);
color: #af5b5e;
}
#todo-list li .destroy:after {
content: '✖';
content: '×';
}
#todo-list li:hover .destroy {
......@@ -295,29 +255,25 @@ label[for='toggle-all'] {
#footer {
color: #777;
padding: 0 15px;
position: absolute;
right: 0;
bottom: -31px;
left: 0;
padding: 10px 15px;
height: 20px;
z-index: 1;
text-align: center;
border-top: 1px solid #e6e6e6;
}
#footer:before {
content: '';
position: absolute;
right: 0;
bottom: 31px;
bottom: 0;
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);
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 {
......@@ -325,6 +281,10 @@ label[for='toggle-all'] {
text-align: left;
}
#todo-count strong {
font-weight: 300;
}
#filters {
margin: 0;
padding: 0;
......@@ -339,49 +299,72 @@ label[for='toggle-all'] {
}
#filters li a {
color: #83756f;
margin: 2px;
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 {
font-weight: bold;
border-color: rgba(175, 47, 47, 0.2);
}
#clear-completed {
#clear-completed,
html #clear-completed:active {
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);
cursor: pointer;
visibility: hidden;
position: relative;
}
#clear-completed::after {
visibility: visible;
content: 'Clear completed';
position: absolute;
right: 0;
white-space: nowrap;
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
box-shadow: 0 -1px 0 0 rgba(0, 0, 0, 0.3);
#clear-completed:hover::after {
text-decoration: underline;
}
#info {
margin: 65px auto 0;
color: #a6a6a6;
font-size: 12px;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
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 and Opera
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 {
......@@ -393,10 +376,6 @@ label[for='toggle-all'] {
}
#toggle-all {
top: -56px;
left: -15px;
width: 65px;
height: 41px;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
-webkit-appearance: none;
......@@ -404,151 +383,12 @@ label[for='toggle-all'] {
}
}
.hidden {
display: none;
}
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;
}
.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);
-webkit-transition-property: left;
transition-property: left;
-webkit-transition-duration: 500ms;
transition-duration: 500ms;
}
@media (min-width: 899px) {
.learn-bar {
width: auto;
margin: 0 0 0 300px;
}
.learn-bar > .learn {
left: 8px;
@media (max-width: 430px) {
#footer {
height: 50px;
}
.learn-bar #todoapp {
width: 550px;
margin: 130px auto 40px auto;
#filters {
bottom: 10px;
}
}
examples/closure/node_modules/todomvc-common/base.css 0 → 100644
View file @ f119e6b9
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/closure/bower_components/todomvc-common/base.js → examples/closure/node_modules/todomvc-common/base.js
View file @ f119e6b9
/* global _ */
(function () {
'use strict';
/* jshint ignore:start */
// Underscore's Template Module
// Courtesy of underscorejs.org
var _ = (function (_) {
......@@ -114,6 +116,7 @@
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'));
}
/* jshint ignore:end */
function redirect() {
if (location.hostname === 'tastejs.github.io') {
......@@ -175,13 +178,17 @@
if (learnJSON.backend) {
this.frameworkJSON = learnJSON.backend;
this.frameworkJSON.issueLabel = framework;
this.append({
backend: true
});
} else if (learnJSON[framework]) {
this.frameworkJSON = learnJSON[framework];
this.frameworkJSON.issueLabel = framework;
this.append();
}
this.fetchIssueCount();
}
Learn.prototype.append = function (opts) {
......@@ -212,6 +219,26 @@
document.body.insertAdjacentHTML('afterBegin', aside.outerHTML);
};
Learn.prototype.fetchIssueCount = function () {
var issueLink = document.getElementById('issue-count-link');
if (issueLink) {
var url = issueLink.href.replace('https://github.com', 'https://api.github.com/repos');
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onload = function (e) {
var parsedResponse = JSON.parse(e.target.responseText);
if (parsedResponse instanceof Array) {
var count = parsedResponse.length
if (count !== 0) {
issueLink.innerHTML = 'This app has ' + count + ' open issues';
document.getElementById('issue-count').style.display = 'inline';
}
}
};
xhr.send();
}
};
redirect();
getFile('learn.json', Learn);
})();
examples/closure/package.json 0 → 100644
View file @ f119e6b9
{
"private": true,
"dependencies": {
"todomvc-app-css": "^1.0.0",
"todomvc-common": "^1.0.1"
},
"devDependencies": {
"plovr": "^3.0.0"
},
"scripts": {
"serve": "plovr serve plovr.json",
"build": "plovr build plovr.json > js/compiled.js"
}
}
examples/closure/readme.md
View file @ f119e6b9
......@@ -37,9 +37,10 @@ Note this project breaks with the convention of the others and uses spaces in pl
## Running
A third party build tool called [Plovr](http://plovr.com/) is used to make running and compiling the code easier. To serve the code for development purposes (the example should run in compiled mode without using Plovr), first download the latest stable version from the [Plovr Google Code project](http://code.google.com/p/plovr/downloads/list) (at the time of writing plovr-eba786b34df9.jar). Copy the file into the build folder, rename it plovr.jar and run the following command from this folder -
A third party build tool called [Plovr](http://plovr.com/) is used to make running and compiling the code easier. To serve the code for development purposes (the example should run in compiled mode without using Plovr), run the following command from this folder -
`java -jar build/plovr.jar serve plovr.json`
`npm install`
`npm run serve`
You'll also need to change the HTML file so that it references the served files instead of the compiled version (**make sure you comment out the compiled version otherwise it will not work**), to do this remove the compiled script reference and add the following -
......@@ -56,16 +57,17 @@ Whilst Plovr features many of the tools from the Closure toolkit, one very usefu
The linter must be installed before use, the installation package is included in the build folder and the instructions are available on the [linter homepage](https://developers.google.com/closure/utilities/). Once installed run the following to check for errors -
`find . -name *.js | xargs gjslint`
`find . -path ./node_modules -prune -o -name *.js | xargs gjslint`
(or whatever floats your OSs boat)
## Compiling
To compile the code from the command line run Plovr like so -
To compile the code from the command line run -
`java -jar build/plovr.jar build plovr.json > js/compiled.js`
`npm install`
`npm run build`
This will overwrite the js/compiled.js file with the new version, be sure to change the script tag reference in the HTML page.
......
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