Skip to content

T
todomvc
Commit 300b76cd authored by Pascal Hartig's avatar Pascal Hartig
Browse files
Options

polymer: code style update

parent aad9dd5d
Hide whitespace changes
Inline Side-by-side
Showing with 60 additions and 59 deletions
architecture-examples/polymer/elements/td-input.html
View file @ 300b76cd
......@@ -4,14 +4,14 @@
var ENTER_KEY = 13;
var ESC_KEY = 27;
Polymer('td-input', {
keypressAction: function(e, detail, sender) {
keypressAction: function (e, detail, sender) {
// Listen for enter on keypress but esc on keyup, because
// IE doesn't fire keyup for enter.
if (e.keyCode === ENTER_KEY) {
this.fire('td-input-commit');
}
},
keyupAction: function(e, detail, sender) {
keyupAction: function (e, detail, sender) {
if (e.keyCode === ESC_KEY) {
this.fire('td-input-cancel');
}
......
architecture-examples/polymer/elements/td-item.css
View file @ 300b76cd
......@@ -124,8 +124,7 @@ label {
}
.destroy:hover {
text-shadow: 0 0 1px #000,
0 0 10px rgba(199, 107, 107, 0.8);
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);
......@@ -148,11 +147,11 @@ label {
@media screen and (-webkit-min-device-pixel-ratio:0) {
.toggle {
background: none;
/*
ShadowDOM Polyfill work around for webkit/blink bug
https://code.google.com/p/chromium/issues/detail?id=251510
*/
background-color: transparent;
/*
ShadowDOM Polyfill work around for webkit/blink bug
https://code.google.com/p/chromium/issues/detail?id=251510
*/
background-color: transparent;
}
.toggle {
......
architecture-examples/polymer/elements/td-item.html
View file @ 300b76cd
......@@ -10,12 +10,12 @@
<input is="td-input" id="edit" class="edit" value="{{title}}" hidden?="{{!editing}}" on-td-input-commit="commitAction" on-td-input-cancel="cancelAction">
</template>
<script>
(function() {
(function () {
var ENTER_KEY = 13;
var ESC_KEY = 27;
Polymer('td-item', {
editing: false,
editAction: function() {
editAction: function () {
this.editing = true;
// FIXME: Custom elements extended from <input> don't have
// <input> binding behavior.
......@@ -23,11 +23,11 @@
this.$.edit.value = this.title = this.item.title;
// schedule focus for the end of microtask, when the input will be visible
Platform.flush();
this.asyncMethod(function() {
this.asyncMethod(function () {
this.$.edit.focus();
});
},
commitAction: function() {
commitAction: function () {
// FIXME: Custom elements extended from <input> don't have
// <input> binding behavior.
// https://github.com/Polymer/polymer/issues/186
......@@ -38,7 +38,7 @@
if (this.item.title === '') {
this.destroyAction();
}
this.fire('td-item-changed');
this.fire('td-item-changed');
}
},
cancelAction: function() {
......
architecture-examples/polymer/elements/td-model.html
View file @ 300b76cd
......@@ -5,15 +5,15 @@
completedCount: 0,
activeCount: 0,
allCompleted: false,
ready: function() {
this.asyncMethod(function() {
ready: function () {
this.asyncMethod(function () {
this.items = this.items || [];
});
},
filterChanged: function() {
filterChanged: function () {
this.filterItems();
},
itemsChanged: function() {
itemsChanged: function () {
this.completedCount =
this.items.filter(this.filters.completed).length;
this.activeCount = this.items.length - this.completedCount;
......@@ -24,15 +24,17 @@
this.storage.save();
}
},
storageIdChanged: function() {
storageIdChanged: function () {
this.storage = document.querySelector('#' + this.storageId);
this.storage && (this.items = this.storage.value);
if (this.storage) {
this.items = this.storage.value;
}
},
filterItems: function() {
filterItems: function () {
var fn = this.filters[this.filter];
this.filtered = fn ? this.items.filter(fn) : this.items;
},
newItem: function(title) {
newItem: function (title) {
title = String(title).trim();
if (title) {
var item = {
......@@ -43,27 +45,27 @@
this.itemsChanged();
}
},
destroyItem: function(item) {
destroyItem: function (item) {
var i = this.items.indexOf(item);
if (i >= 0) {
this.items.splice(i, 1);
}
this.itemsChanged();
},
clearItems: function(){
clearItems: function () {
this.items = this.items.filter(this.filters.active);
},
setItemsCompleted: function(completed) {
this.items.forEach(function(item) {
setItemsCompleted: function (completed) {
this.items.forEach(function (item) {
item.completed = completed;
});
this.itemsChanged();
},
filters: {
active: function(item) {
active: function (item) {
return !item.completed;
},
completed: function(item) {
completed: function (item) {
return item.completed;
}
}
......
architecture-examples/polymer/elements/td-todos.css
View file @ 300b76cd
/* base.css overrides */
@host {
* {
@host {
* {
display: block;
position: relative;
}
......@@ -17,7 +17,6 @@ button {
font-family: inherit;
color: inherit;
-webkit-appearance: none;
/*-moz-appearance: none;*/
-ms-appearance: none;
-o-appearance: none;
appearance: none;
......@@ -40,7 +39,6 @@ input:-ms-input-placeholder, #new-todo:-ms-input-placeholder {
#todoapp {
background: #fff;
background: rgba(255, 255, 255, 0.9);
/*margin: 130px 0 40px 0;*/
margin: 0 0 40px 0;
border: 1px solid #ccc;
position: relative;
......@@ -247,11 +245,11 @@ label[for='toggle-all'] {
@media screen and (-webkit-min-device-pixel-ratio:0) {
#toggle-all {
background: none;
/*
ShadowDOM Polyfill work around for webkit/blink bug
https://code.google.com/p/chromium/issues/detail?id=251510
*/
background-color: transparent;
/*
ShadowDOM Polyfill work around for webkit/blink bug
https://code.google.com/p/chromium/issues/detail?id=251510
*/
background-color: transparent;
}
#toggle-all {
......
architecture-examples/polymer/elements/td-todos.html
View file @ 300b76cd
......@@ -39,35 +39,39 @@
</template>
<script>
(function() {
(function () {
var ENTER_KEY = 13;
var ESC_KEY = 27;
Polymer('td-todos', {
modelIdChanged: function() {
modelIdChanged: function () {
this.model = document.querySelector('#' + this.modelId);
},
routeChanged: function() {
this.model && (this.model.filter = this.route);
routeChanged: function () {
if (this.model) {
this.model.filter = this.route;
}
},
addTodoAction: function() {
addTodoAction: function () {
this.model.newItem(this.$['new-todo'].value);
// when polyfilling Object.observe, make sure we update immediately
Platform.flush();
this.$['new-todo'].value = '';
},
cancelAddTodoAction: function() {
cancelAddTodoAction: function () {
this.$['new-todo'].value = '';
},
itemChangedAction: function() {
this.model && this.model.itemsChanged();
itemChangedAction: function () {
if (this.model) {
this.model.itemsChanged();
}
},
destroyItemAction: function(e, detail) {
destroyItemAction: function (e, detail) {
this.model.destroyItem(detail);
},
toggleAllCompletedAction: function(e, detail, sender) {
toggleAllCompletedAction: function (e, detail, sender) {
this.model.setItemsCompleted(sender.checked);
},
clearCompletedAction: function() {
clearCompletedAction: function () {
this.model.clearItems();
}
});
......
architecture-examples/polymer/index.html
View file @ 300b76cd
<!doctype html>
<html lang="en">
<html lang="en" data-framework="polymer">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
......@@ -10,12 +10,14 @@
<link rel="import" href="elements/td-todos.html">
</head>
<body>
<header>
<h1>todos</h1>
</header>
<polymer-localstorage id="storage" name="todos-polymer"></polymer-localstorage>
<td-model id="model" storageId="storage"></td-model>
<td-todos modelId="model"></td-todos>
<section id="todoapp">
<header id="header">
<h1>todos</h1>
</header>
<polymer-localstorage id="storage" name="todos-polymer"></polymer-localstorage>
<td-model id="model" storageId="storage"></td-model>
<td-todos modelId="model"></td-todos>
</section>
<footer id="info">
<p>Double-click to edit a todo</p>
<p>Created by <a href="http://www.polymer-project.org">The Polymer Authors</a></p>
......
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