Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

WIP -- Fix esc and double commits #13

Merged
merged 5 commits into from
Jan 18, 2017
Merged

WIP -- Fix esc and double commits #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b93a0b7
Add further logs to debugging exmaple.
gabrielmontagne Jan 10, 2017
bf6c066
0.6.1-fix-esc-and-double-commits.1
gabrielmontagne Jan 10, 2017
164fa5c
Add example.
gabrielmontagne Jan 11, 2017
8679be2
Merge branch 'fix-esc-and-double-commits' of github.com:zambezi/grid-…
gabrielmontagne Jan 11, 2017
8bf1b91
Cleanup.
gabrielmontagne Jan 11, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
107 changes: 107 additions & 0 deletions examples/edit-cells-lock-on-edit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,107 @@
<!doctype html>
<head><meta charset="utf-8" /></head>
<body>
<h1>Edit cell values -- cancel while editing</h1>

<p>
On this example, we use cell editing start / end to stop and restart fake "updates".
</p>

<h2>Configuration</h2>

<p>
Some extra example configuration has been added:
</p>

<dl>
<dt>Validation</dt>
<dd>Username cannot be empty</dd>
<dd>Username cannot use only one letter </dd>
<dt>Character class for input</dt><dd>Only uppercase and lower case ASCII characters and numbers between 0 and 5 can used to input usernames.</dd>
<dt>Non editable cells</dt><dd>Cells for rows in which the username begins with "Zac" cannot be edited</dd>
<dt>Processing</dt><dd>Client can decide how to consolidate the change; in this case, it is turned into upper case</dd>
</dl>

<div class="grid-target"></div>
<link rel="stylesheet" type="text/css" href="../node_modules/normalize.css/normalize.css">
<script src="../node_modules/underscore/underscore.js"></script>
<script src="../node_modules/d3/build/d3.js"></script>
<script src="../node_modules/@zambezi/d3-utils/dist/d3-utils.js"></script>
<script src="../node_modules/@zambezi/fun/dist/fun.js"></script>
<script src="../node_modules/faker/faker.js"></script>
<script src="../node_modules/@zambezi/grid/dist/grid.js"></script>
<script src="../dist/grid-components.js"></script>
<script>

let locked = false
const table = grid.createGrid()
.columns(
[
{ key: 'name', locked: 'left', width: 200 }
, {
key: 'username'
, components: [
gridComponents.createEditCellValue()
.on('change', onUsernameChange)
.on('validationerror', console.error.bind(console, 'VALIDATION'))
.on('editstart.clear', () => console.clear())
.on('editstart.lock', () => locked = true)
.on('editstart.debug', d => console.debug('EDIT START', d))
.on('editend.unlock', () => locked = false)
.on('editend.redraw', () => {draw(); draw(); draw()})
.on('editend.debug', d => console.debug('EDIT END', d))
.characterClass('A-Za-z0-5')
.validate(validateUserName)
.editable(isNotZack)

, grid.updateTextIfChanged
]
}
, { key: 'email', sortDescending: true }
, { key: 'phone' }
]
)
.on('draw', () => console.log('grid drawn'))

, i = setInterval(draw, 1000)

draw()

function draw() {

if (locked) return

console.log('draw!')

const rows = _.range(1, 10).map(faker.Helpers.createCard)
d3.select('.grid-target')
.style('height', '500px')
.datum(rows)
.call(table)
}

function onUsernameChange(row, value) {
console.warn('CHANGE!')
row.username = value.toUpperCase()
}

function validateUserName(row, value) {
if (!value) return 'Username cannot be empty'
if (!value.split('').some(isDifferentCharacter())) return 'Cannot all be the same character'
}

function isDifferentCharacter() {
let found
return function check(ch) {
if (found && !~found.indexOf(ch)) return true
found = ch
return false
}
}

function isNotZack(cell) {
return cell.row.username.indexOf('Zac') !== 0
}

</script>
</body>
44 changes: 21 additions & 23 deletions examples/edit-cells.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,30 +35,28 @@ <h2>Configuration</h2>
<script src="../dist/grid-components.js"></script>
<script>

var table = grid.createGrid()
.columns(
[
{ key: 'name', locked: 'left', width: 200 }
, {
key: 'username'
, components: [
gridComponents.createEditCellValue()
.on('change', onUsernameChange)
.on('validationerror', console.error.bind(console, 'VALIDATION'))
.on('editstart', d => console.debug('edit start', d))
.on('editend', d => console.debug('edit end', d))
.characterClass('A-Za-z0-5')
.validate(validateUserName)
.editable(isNotZack)
const rows = _.range(1, 10).map(faker.Helpers.createCard)
, table = grid.createGrid()
.columns(
[
{ key: 'name', locked: 'left', width: 200 }
, {
key: 'username'
, components: [
gridComponents.createEditCellValue()
.on('change', onUsernameChange)
.on('validationerror', console.error.bind(console, 'VALIDATION'))
.characterClass('A-Za-z0-5')
.validate(validateUserName)
.editable(isNotZack)

, grid.updateTextIfChanged
]
}
, { key: 'email', sortDescending: true }
, { key: 'phone' }
]
)
, rows = _.range(1, 2000).map(faker.Helpers.createCard)
, grid.updateTextIfChanged
]
}
, { key: 'email', sortDescending: true }
, { key: 'phone' }
]
)

d3.select('.grid-target')
.style('height', '500px')
Expand Down
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@zambezi/grid-components",
"version": "0.6.0",
"version": "0.6.1-fix-esc-and-double-commits.1",
"description": "Components for the Zambezi Grids",
"keywords": [
"d3",
Expand Down