Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
T
todomvc
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
Analytics
Analytics
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Commits
Issue Boards
Open sidebar
Sven Franck
todomvc
Commits
2d258c72
Commit
2d258c72
authored
9 years ago
by
Olivier Scherrer
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Olives: fix editing isn't cancelled on ESC #789
parent
be58d7ce
Changes
2
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
2 changed files
with
690 additions
and
448 deletions
+690
-448
examples/olives/js/uis/list.js
examples/olives/js/uis/list.js
+26
-13
examples/olives/olives-todo.js
examples/olives/olives-todo.js
+664
-435
No files found.
examples/olives/js/uis/list.js
View file @
2d258c72
...
@@ -5,17 +5,19 @@ var BindPlugin = require('olives')['Bind.plugin'];
...
@@ -5,17 +5,19 @@ var BindPlugin = require('olives')['Bind.plugin'];
var
Tools
=
require
(
'
../lib/Tools
'
);
var
Tools
=
require
(
'
../lib/Tools
'
);
module
.
exports
=
function
listInit
(
view
,
model
,
stats
)
{
module
.
exports
=
function
listInit
(
view
,
model
,
stats
)
{
// The OObject (the controller) inits with a default model which is a simple store
// The OObject (the controller) init
ialize
s with a default model which is a simple store
// But it can be init
'
ed with any other store, like the LocalStore
// But it can be init
ializ
ed with any other store, like the LocalStore
var
list
=
new
OObject
(
model
);
var
list
=
new
OObject
(
model
);
var
modelPlugin
=
new
BindPlugin
(
model
,
{
toggleClass
:
Tools
.
toggleClass
});
var
ENTER_KEY
=
13
;
var
ENTER_KEY
=
13
;
var
ESC_KEY
=
27
;
// The plugins
// The plugins
list
.
seam
.
addAll
({
list
.
seam
.
addAll
({
event
:
new
EventPlugin
(
list
),
event
:
new
EventPlugin
(
list
),
model
:
new
BindPlugin
(
model
,
{
model
:
modelPlugin
,
toggleClass
:
Tools
.
toggleClass
}),
stats
:
new
BindPlugin
(
stats
,
{
stats
:
new
BindPlugin
(
stats
,
{
toggleClass
:
Tools
.
toggleClass
,
toggleClass
:
Tools
.
toggleClass
,
toggleCheck
:
function
(
value
)
{
toggleCheck
:
function
(
value
)
{
...
@@ -40,18 +42,18 @@ module.exports = function listInit(view, model, stats) {
...
@@ -40,18 +42,18 @@ module.exports = function listInit(view, model, stats) {
// Enter edit mode
// Enter edit mode
list
.
startEdit
=
function
(
event
,
node
)
{
list
.
startEdit
=
function
(
event
,
node
)
{
var
taskId
=
node
.
getAttribute
(
'
data-model_id
'
);
var
taskId
=
modelPlugin
.
getItemIndex
(
node
);
Tools
.
toggleClass
.
call
(
view
.
querySelector
(
'
li[data-model_id="
'
+
taskId
+
'
"]
'
),
true
,
'
editing
'
);
toggleEditing
(
taskId
,
true
);
view
.
querySelector
(
'
input.edit[data-model_id="
'
+
taskId
+
'
"]
'
).
focus
();
getElementByModelId
(
'
input.edit
'
,
taskId
).
focus
();
};
};
// Leave edit mode
// Leave edit mode
list
.
stopEdit
=
function
(
event
,
node
)
{
list
.
stopEdit
=
function
(
event
,
node
)
{
var
taskId
=
node
.
getAttribute
(
'
data-model_id
'
);
var
taskId
=
modelPlugin
.
getItemIndex
(
node
);
var
value
;
var
value
;
if
(
event
.
keyCode
===
ENTER_KEY
)
{
if
(
event
.
keyCode
===
ENTER_KEY
||
event
.
type
===
'
blur
'
)
{
value
=
node
.
value
.
trim
();
value
=
node
.
value
.
trim
();
if
(
value
)
{
if
(
value
)
{
...
@@ -62,13 +64,24 @@ module.exports = function listInit(view, model, stats) {
...
@@ -62,13 +64,24 @@ module.exports = function listInit(view, model, stats) {
// When task #n is removed, #n+1 becomes #n, the dom node is updated to the new value, so editing mode should exit anyway
// When task #n is removed, #n+1 becomes #n, the dom node is updated to the new value, so editing mode should exit anyway
if
(
model
.
has
(
taskId
))
{
if
(
model
.
has
(
taskId
))
{
Tools
.
toggleClass
.
call
(
view
.
querySelector
(
'
li[data-model_id="
'
+
taskId
+
'
"]
'
),
false
,
'
editing
'
);
toggleEditing
(
taskId
,
false
);
}
}
}
else
if
(
event
.
type
===
'
blur
'
)
{
}
else
if
(
event
.
keyCode
===
ESC_KEY
)
{
Tools
.
toggleClass
.
call
(
view
.
querySelector
(
'
li[data-model_id="
'
+
taskId
+
'
"]
'
),
false
,
'
editing
'
);
toggleEditing
(
taskId
,
false
);
// Also reset the input field to the previous value so that the blur event doesn't pick up the discarded one
node
.
value
=
model
.
get
(
taskId
).
title
;
}
}
};
};
// Alive applies the plugins to the HTML view
// Alive applies the plugins to the HTML view
list
.
alive
(
view
);
list
.
alive
(
view
);
function
toggleEditing
(
taskId
,
bool
)
{
var
li
=
getElementByModelId
(
'
li
'
,
taskId
);
Tools
.
toggleClass
.
call
(
li
,
bool
,
'
editing
'
);
}
function
getElementByModelId
(
selector
,
taskId
)
{
return
view
.
querySelector
(
selector
+
'
[data-model_id="
'
+
taskId
+
'
"]
'
);
}
};
};
This diff is collapsed.
Click to expand it.
examples/olives/olives-todo.js
View file @
2d258c72
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment