Skip to content

T
todomvc
Commit 352327f7 authored by Aaron Boushley's avatar Aaron Boushley Committed by Sindre Sorhus
Browse files
Options

Merge ExtJS branch into master

parent a2f8f05c
Show whitespace changes
Inline Side-by-side
Showing with 510 additions and 165 deletions
architecture-examples/extjs/css/app.css 0 → 100755
View file @ 352327f7
html,
body {
margin: 0;
padding: 0;
}
:focus {
outline: none;
}
body {
font: 14px "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.4em;
background: #eeeeee;
color: #333333;
width: 520px;
margin: 0 auto;
-webkit-font-smoothing: antialiased;
}
#todoapp {
background: #fff;
padding: 20px;
margin-bottom: 40px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 6px 0;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#todoapp h1 {
font-size: 36px;
font-weight: bold;
text-align: center;
padding: 0 0 10px 0;
}
#todoapp input[type="text"] {
width: 466px;
font-size: 24px;
font-family: inherit;
line-height: 1.4em;
border: 0;
outline: none;
padding: 6px;
border: 1px solid #999999;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 2px 0 inset;
}
#todoapp input::-webkit-input-placeholder {
font-style: italic;
}
#todo-list {
margin: 10px 0;
padding: 0;
list-style: none;
}
#todo-list li {
padding: 18px 20px 18px 0;
position: relative;
font-size: 24px;
border-bottom: 1px solid #cccccc;
}
#todo-list li:last-child {
border-bottom: none;
}
#todo-list li.done label {
color: #777777;
text-decoration: line-through;
}
#todo-list li .destroy {
display: none;
position: absolute;
top: 20px;
right: 10px;
cursor: pointer;
width: 20px;
height: 20px;
background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUBAMAAAB/pwA+AAAABGdBTUEAALGPC/xhBQAAACdQTFRFzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMzMAAAA////zMzMhnu0WAAAAAt0Uk5T5u3pqtV3jFQEKAC0bVelAAAAfUlEQVQI12NYtWpFsc8R865VqxhWrZpyBgg8QcylZ8AgCsjMgTCPrWJYfgYKqhjWwJgaDDVnzpw+c2bPmTPHGWzOnNm95/TuM2cOM/AARXfvBooeZAAp270bRCIz4QoOIGtDMqwJZoUEQzvCYrhzuhhWtUKYEahOX7UK6iEA3A6NUGwCTZIAAAAASUVORK5CYII=') no-repeat center center;
}
#todo-list li:hover .destroy {
display: block;
}
#todo-list li.editing {
border-bottom: none;
margin-top: -1px;
padding: 0;
}
#todo-list li.editing:last-child {
margin-bottom: -1px;
}
#todo-list li.editing .edit {
display: block;
width: 444px;
padding: 13px 15px 14px 20px;
margin: 0;
}
#todo-list li.editing .view {
display: none;
}
#todo-list li .view label {
word-break: break-word;
}
#todo-list li .edit {
display: none;
}
#todoapp footer {
margin: 0 -20px -20px -20px;
overflow: hidden;
color: #555555;
background: #f4fce8;
border-top: 1px solid #ededed;
padding: 0 20px;
line-height: 37px;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
-ms-border-radius: 0 0 5px 5px;
-o-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
#clear-completed {
float: right;
line-height: 20px;
text-decoration: none;
background: rgba(0, 0, 0, 0.1);
color: #555555;
font-size: 11px;
margin-top: 8px;
margin-bottom: 8px;
padding: 0 10px 1px;
cursor: pointer;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
-ms-border-radius: 12px;
-o-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.2) 0 -1px 0 0;
}
#clear-completed:hover {
background: rgba(0, 0, 0, 0.15);
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-moz-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-ms-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
-o-box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
box-shadow: rgba(0, 0, 0, 0.3) 0 -1px 0 0;
}
#clear-completed:active {
position: relative;
top: 1px;
}
#todo-count span {
font-weight: bold;
}
#instructions {
margin: 10px auto;
color: #777777;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#instructions a {
color: #336699;
}
#credits {
margin: 30px auto;
color: #999;
text-shadow: rgba(255, 255, 255, 0.8) 0 1px 0;
text-align: center;
}
#credits a {
color: #888;
}
architecture-examples/extjs/index.html
View file @ 352327f7
<!doctype html>
<html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ExtJS• TodoMVC</title>
<link rel="stylesheet" href="css/style.css">
<title>ExtJS • TodoMVC</title>
<link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE]>
<script src="../assets/ie.js"></script>
<![endif]-->
</head>
<body>
<div id="todo">
<div id="todoapp">
<header>
<h1>Todos</h1>
<input type="text" id="taskfield" placeholder="What needs to be done?" />
<input id="new-todo" type="text" placeholder="What needs to be done?">
</header>
<section id="main"></section>
</div>
<div class="credits">
Credits:<br /><a href="http://revolunet.com/">Revolunet</a>
<div id="instructions">
Double-click to edit a todo.
</div>
<div id="credits">
Created by <a href="http://revolunet.com/">Revolunet</a><br />
Updates by <a href="http://github.com/boushley">Aaron Boushley</a>
</div>
<script src="../../assets/base.js"></script>
<script src="http://extjs.cachefly.net/ext-4.0.2a/bootstrap.js"></script>
......
architecture-examples/extjs/js/app.js
View file @ 352327f7
......@@ -6,16 +6,21 @@ Ext.application({
controllers: ['Tasks'],
launch: function() {
Ext.create('Ext.container.Container', {
renderTo: 'todo',
items: [{
xtype: 'taskField',
contentEl: 'taskfield'
}, {
xtype: 'taskList'
}, {
xtype: 'taskToolbar'
}]
Ext.create('Todo.view.TaskField', {
renderTo: Ext.select('header').first(),
contentEl: 'new-todo'
});
Ext.create('Todo.view.CheckAllBox', {
renderTo: 'main'
});
Ext.create('Todo.view.TaskList', {
renderTo: 'main'
});
Ext.create('Todo.view.TaskToolbar', {
renderTo: 'todoapp'
});
}
......
architecture-examples/extjs/js/controller/Tasks.js
View file @ 352327f7
......@@ -10,7 +10,8 @@ Ext.define('Todo.controller.Tasks', {
refs: [
{ref: 'taskList', selector: 'taskList'},
{ref: 'taskToolbar', selector: 'taskToolbar'}
{ref: 'taskToolbar', selector: 'taskToolbar'},
{ref: 'checkAllBox', selector: 'checkAllBox'}
],
init: function() {
......@@ -19,10 +20,16 @@ Ext.define('Todo.controller.Tasks', {
keyup: this.onTaskFieldKeyup
},
'taskList': {
itemclick: this.onListItemClick
todoChecked: this.onTodoChecked,
itemdblclick: this.onTodoDblClicked,
onTaskEditKeyup: this.onTaskEditKeyup,
todoRemoveSelected: this.onTodoRemoveSelected
},
'taskToolbar > button': {
'completeButton': {
click: this.onClearButtonClick
},
'checkAllBox': {
click: this.onCheckAllClick
}
});
......@@ -34,8 +41,9 @@ Ext.define('Todo.controller.Tasks', {
},
onTaskFieldKeyup: function(field, event) {
var value = field.getValue();
if (event.keyCode === 13 && value !== '') {
var ENTER_KEY_CODE = 13;
var value = field.getValue().trim();
if (event.keyCode === ENTER_KEY_CODE && value !== '') {
var store = this.getTasksStore();
store.add({label: value, checked: false});
field.reset();
......@@ -43,12 +51,46 @@ Ext.define('Todo.controller.Tasks', {
}
},
onListItemClick: function(list, record, el) {
onTodoChecked: function(record) {
record.set('checked', !record.get('checked'));
record.store.sync();
record.commit();
},
onTodoDblClicked: function (list, record, el) {
record.set('editing', true);
record.store.sync();
record.commit();
},
onTodoRemoveSelected: function (record) {
var store = this.getTasksStore();
store.remove(record);
store.sync();
},
onTaskEditKeyup: function (keyEvent, record, extEl) {
var ENTER_KEY_CODE = 13;
if (event.keyCode === ENTER_KEY_CODE) {
this.finalizeTaskEdit(extEl, record);
}
},
finalizeTaskEdit: function (extEl, record) {
value = extEl.getValue().trim();
if (!value) {
var store = this.getTasksStore();
store.remove(record);
store.sync();
} else {
record.set('label', value);
record.set('editing', false);
record.store.sync();
record.commit();
}
},
onClearButtonClick: function() {
var records = [],
store = this.getTasksStore();
......@@ -62,6 +104,14 @@ Ext.define('Todo.controller.Tasks', {
store.sync();
},
onCheckAllClick: function(checked) {
var store = this.getTasksStore();
store.each(function(record) {
record.set('checked', checked);
});
store.sync();
},
onStoreDataChanged: function() {
var info = '', text = '',
store = this.getTasksStore(),
......@@ -83,6 +133,7 @@ Ext.define('Todo.controller.Tasks', {
text = 'Clear '+ checkedCount +' completed item' + (checkedCount > 1 ? 's' : '');
}
this.getCheckAllBox().updateCheckedState(totalCount, checkedCount);
container.update(info);
button.setText(text);
button.setVisible(checkedCount);
......
architecture-examples/extjs/js/view/CheckAllBox.js 0 → 100644
View file @ 352327f7
Ext.define('Todo.view.CheckAllBox' , {
extend: 'Ext.Component',
alias: 'widget.checkAllBox',
tpl: '<tpl if="hasContent"><input id="toggle-all" type="checkbox" <tpl if="allComplete">checked</tpl>> <label for="toggle-all">Mark all as complete</label></tpl>',
updateCheckedState: function (totalTasks, checkedTasks) {
this.update({
hasContent: !!totalTasks,
allComplete: checkedTasks == totalTasks
});
},
listeners: {
render: function (component) {
component.getEl().on('click', function (event, el) {
var checked = !!Ext.get(el).getAttribute('checked');
this.fireEvent('click', checked);
}, this, {
delegate: 'input'
});
}
}
});
architecture-examples/extjs/js/view/TaskCompleteButton.js 0 → 100644
View file @ 352327f7
Ext.define('Todo.view.TaskCompleteButton' , {
extend: 'Ext.Button',
alias: 'widget.completeButton',
tpl: Ext.create('Ext.XTemplate', '<a id="clear-completed">{text}</a>', {compiled: true}),
setText: function (text) {
this.update({text:text});
}
});
architecture-examples/extjs/js/view/TaskList.js
View file @ 352327f7
Ext.define('Todo.view.TaskList' , {
store: 'Tasks',
loadMask: false,
itemSelector: 'div.row',
itemSelector: 'li',
extend: 'Ext.view.View',
alias : 'widget.taskList',
autoEl: '<ul id="todo-list" />',
tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<div class="row">',
'<input type="checkbox" {[values.checked ? "checked" : ""]} />',
'<span class="{[values.checked ? "checked" : ""]}">{label}</span>',
'<li class="<tpl if="checked">done</tpl> <tpl if="editing">editing</tpl>">',
'<div class="view">',
'<input type="checkbox" <tpl if="checked">checked</tpl> /> ',
'<label>{label}</label>',
'<a class="destroy"></a>',
'</div>',
'<input class="edit" type="text" value="{label}">',
'</li>',
'</tpl>',
{compiled: true}
)
),
listeners: {
render: function () {
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'checkbox') {
parent = extEl.parent('li');
this.fireEvent('todoChecked', this.getRecord(parent));
}
}, this, {
// TODO I can't get this to delegate using something like div.view input or input[type="checkbox"]
// So this will have a bug with teh input.edit field... I need to figure that out so I don't have to
// do the if logic above.
delegate: 'input'
});
this.el.on('keyup', function (keyEvent, el) {
var extEl = Ext.get(el)
, parent;
if(extEl.getAttribute('type') === 'text') {
parent = extEl.parent('li');
this.fireEvent('onTaskEditKeyup', keyEvent, this.getRecord(parent), extEl);
}
}, this, {
delegate: 'input'
});
this.el.on('click', function (clickEvent, el) {
var extEl = Ext.get(el)
, record = this.getRecord(extEl.parent('li'))
, self = this;
// Todo this is clearly not the best way to do this, but without this we get an error when
// the item that was clicked is removed.
setTimeout(function () { self.fireEvent('todoRemoveSelected', record); }, 1);
}, this, {
delegate: 'a'
});
}
}
});
architecture-examples/extjs/js/view/TaskToolbar.js
View file @ 352327f7
......@@ -2,9 +2,10 @@ Ext.define('Todo.view.TaskToolbar' , {
hidden: true,
extend: 'Ext.Toolbar',
alias : 'widget.taskToolbar',
autoEl: {tag: 'footer'},
requires: ['Todo.view.TaskCompleteButton'],
items: [{
xtype: 'button',
hidden: true
xtype: 'completeButton'
}, {
xtype: 'container'
}]
......
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