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> <!doctype html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>ExtJS• TodoMVC</title> <title>ExtJS • TodoMVC</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="../assets/base.css">
<link rel="stylesheet" href="css/app.css">
<!--[if IE]> <!--[if IE]>
<script src="../assets/ie.js"></script> <script src="../assets/ie.js"></script>
<![endif]--> <![endif]-->
</head> </head>
<body> <body>
<div id="todo"> <div id="todoapp">
<header>
<h1>Todos</h1> <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>
<div class="credits"> <div id="instructions">
Credits:<br /><a href="http://revolunet.com/">Revolunet</a> 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> </div>
<script src="../../assets/base.js"></script> <script src="../../assets/base.js"></script>
<script src="http://extjs.cachefly.net/ext-4.0.2a/bootstrap.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({ ...@@ -6,16 +6,21 @@ Ext.application({
controllers: ['Tasks'], controllers: ['Tasks'],
launch: function() { launch: function() {
Ext.create('Ext.container.Container', { Ext.create('Todo.view.TaskField', {
renderTo: 'todo', renderTo: Ext.select('header').first(),
items: [{ contentEl: 'new-todo'
xtype: 'taskField', });
contentEl: 'taskfield'
}, { Ext.create('Todo.view.CheckAllBox', {
xtype: 'taskList' renderTo: 'main'
}, { });
xtype: 'taskToolbar'
}] 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', { ...@@ -10,7 +10,8 @@ Ext.define('Todo.controller.Tasks', {
refs: [ refs: [
{ref: 'taskList', selector: 'taskList'}, {ref: 'taskList', selector: 'taskList'},
{ref: 'taskToolbar', selector: 'taskToolbar'} {ref: 'taskToolbar', selector: 'taskToolbar'},
{ref: 'checkAllBox', selector: 'checkAllBox'}
], ],
init: function() { init: function() {
...@@ -19,10 +20,16 @@ Ext.define('Todo.controller.Tasks', { ...@@ -19,10 +20,16 @@ Ext.define('Todo.controller.Tasks', {
keyup: this.onTaskFieldKeyup keyup: this.onTaskFieldKeyup
}, },
'taskList': { 'taskList': {
itemclick: this.onListItemClick todoChecked: this.onTodoChecked,
itemdblclick: this.onTodoDblClicked,
onTaskEditKeyup: this.onTaskEditKeyup,
todoRemoveSelected: this.onTodoRemoveSelected
}, },
'taskToolbar > button': { 'completeButton': {
click: this.onClearButtonClick click: this.onClearButtonClick
},
'checkAllBox': {
click: this.onCheckAllClick
} }
}); });
...@@ -34,8 +41,9 @@ Ext.define('Todo.controller.Tasks', { ...@@ -34,8 +41,9 @@ Ext.define('Todo.controller.Tasks', {
}, },
onTaskFieldKeyup: function(field, event) { onTaskFieldKeyup: function(field, event) {
var value = field.getValue(); var ENTER_KEY_CODE = 13;
if (event.keyCode === 13 && value !== '') { var value = field.getValue().trim();
if (event.keyCode === ENTER_KEY_CODE && value !== '') {
var store = this.getTasksStore(); var store = this.getTasksStore();
store.add({label: value, checked: false}); store.add({label: value, checked: false});
field.reset(); field.reset();
...@@ -43,12 +51,46 @@ Ext.define('Todo.controller.Tasks', { ...@@ -43,12 +51,46 @@ Ext.define('Todo.controller.Tasks', {
} }
}, },
onListItemClick: function(list, record, el) { onTodoChecked: function(record) {
record.set('checked', !record.get('checked')); record.set('checked', !record.get('checked'));
record.store.sync(); record.store.sync();
record.commit(); 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() { onClearButtonClick: function() {
var records = [], var records = [],
store = this.getTasksStore(); store = this.getTasksStore();
...@@ -62,6 +104,14 @@ Ext.define('Todo.controller.Tasks', { ...@@ -62,6 +104,14 @@ Ext.define('Todo.controller.Tasks', {
store.sync(); store.sync();
}, },
onCheckAllClick: function(checked) {
var store = this.getTasksStore();
store.each(function(record) {
record.set('checked', checked);
});
store.sync();
},
onStoreDataChanged: function() { onStoreDataChanged: function() {
var info = '', text = '', var info = '', text = '',
store = this.getTasksStore(), store = this.getTasksStore(),
...@@ -83,6 +133,7 @@ Ext.define('Todo.controller.Tasks', { ...@@ -83,6 +133,7 @@ Ext.define('Todo.controller.Tasks', {
text = 'Clear '+ checkedCount +' completed item' + (checkedCount > 1 ? 's' : ''); text = 'Clear '+ checkedCount +' completed item' + (checkedCount > 1 ? 's' : '');
} }
this.getCheckAllBox().updateCheckedState(totalCount, checkedCount);
container.update(info); container.update(info);
button.setText(text); button.setText(text);
button.setVisible(checkedCount); 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' , { Ext.define('Todo.view.TaskList' , {
store: 'Tasks', store: 'Tasks',
loadMask: false, loadMask: false,
itemSelector: 'div.row', itemSelector: 'li',
extend: 'Ext.view.View', extend: 'Ext.view.View',
alias : 'widget.taskList', alias : 'widget.taskList',
autoEl: '<ul id="todo-list" />',
tpl: Ext.create('Ext.XTemplate', tpl: Ext.create('Ext.XTemplate',
'<tpl for=".">', '<tpl for=".">',
'<div class="row">', '<li class="<tpl if="checked">done</tpl> <tpl if="editing">editing</tpl>">',
'<input type="checkbox" {[values.checked ? "checked" : ""]} />', '<div class="view">',
'<span class="{[values.checked ? "checked" : ""]}">{label}</span>', '<input type="checkbox" <tpl if="checked">checked</tpl> /> ',
'<label>{label}</label>',
'<a class="destroy"></a>',
'</div>', '</div>',
'<input class="edit" type="text" value="{label}">',
'</li>',
'</tpl>', '</tpl>',
{compiled: true} {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' , { ...@@ -2,9 +2,10 @@ Ext.define('Todo.view.TaskToolbar' , {
hidden: true, hidden: true,
extend: 'Ext.Toolbar', extend: 'Ext.Toolbar',
alias : 'widget.taskToolbar', alias : 'widget.taskToolbar',
autoEl: {tag: 'footer'},
requires: ['Todo.view.TaskCompleteButton'],
items: [{ items: [{
xtype: 'button', xtype: 'completeButton'
hidden: true
}, { }, {
xtype: 'container' 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