<!DOCTYPE html>
|
<html>
|
<head>
|
<meta charset="utf-8">
|
<title>Test Keyboard Mixin</title>
|
<meta name="viewport" content="width=570">
|
<style>
|
@import "../../dojo/resources/dojo.css";
|
@import "../css/dgrid.css";
|
@import "../css/skins/claro.css";
|
/* add styles to size this grid appropriately */
|
.dgrid {
|
height: 15em;
|
float: left;
|
width: 40%;
|
margin: 1em 0.5%;
|
}
|
.field-order {
|
width: 3em;
|
}
|
.field-name {
|
width: 8em;
|
}
|
#list {
|
width: 15%;
|
}
|
|
.clear {
|
clear: both;
|
}
|
</style>
|
<script src="../../dojo/dojo.js"
|
data-dojo-config="async: true"></script>
|
<script>
|
var getFirstTarget; // function, defined within require callback
|
|
require(["dgrid/OnDemandList", "dgrid/OnDemandGrid", "dgrid/Keyboard", "dojo/_base/declare", "dojo/on", "dojo/query", "dgrid/test/data/testStore", "dojo/domReady!"],
|
function(OnDemandList, OnDemandGrid, Keyboard, declare, on, query, testStore){
|
var columns = {
|
col1: "Column 1",
|
col3: "Column 3",
|
col5: "Column 5"
|
},
|
KeyboardList = declare([OnDemandList, Keyboard]),
|
KeyboardGrid = declare([OnDemandGrid, Keyboard]),
|
list = window.list = new KeyboardList({
|
collection: testStore,
|
renderRow: function (item) {
|
var div = document.createElement('div');
|
div.appendChild(document.createTextNode(item.col5));
|
return div;
|
}
|
}, "list"),
|
grid = window.grid = new KeyboardGrid({
|
collection: testStore,
|
columns: columns
|
}, "grid"),
|
rowGrid = window.rowGrid = new KeyboardGrid({
|
collection: testStore,
|
columns: columns,
|
cellNavigation: false
|
}, "rowGrid");
|
|
getFirstTarget = function(grid){
|
return query(".dgrid-content .dgrid-cell", grid.domNode)[0] ||
|
query(".dgrid-content .dgrid-row", grid.domNode)[0];
|
};
|
|
on(document.body, "dgrid-cellfocusin,dgrid-cellfocusout",
|
function(event){
|
var msg = "focus " + (event.type == "dgrid-cellfocusin" ? "gained" : "lost");
|
console.log(event.grid.id + ": " + msg +
|
(event.parentType ? " (via " + event.parentType + "): " : ": "),
|
event.cell || event.row
|
);
|
}
|
);
|
});
|
</script>
|
</head>
|
<body class="claro">
|
<h2>Keyboard/focus-enabled List and Grids</h2>
|
<div id="list"></div>
|
<div id="grid"></div>
|
<div id="rowGrid"></div>
|
<div class="clear">
|
<h3>Buttons to test programmatic focus</h3>
|
<div>Focus, no argument:
|
<button onclick="list.focus();">List</button>
|
<button onclick="grid.focus();">Cell-navigation Grid</button>
|
<button onclick="rowGrid.focus();">Row-navigation Grid</button>
|
</div>
|
<div>Focus first row/cell:
|
<button onclick="list.focus(getFirstTarget(list));">List</button>
|
<button onclick="grid.focus(getFirstTarget(grid));">Cell-navigation Grid</button>
|
<button onclick="rowGrid.focus(getFirstTarget(rowGrid));">Row-navigation Grid</button>
|
</div>
|
<div>Focus header (no argument):
|
<button onclick="grid.focusHeader();">Cell-navigation Grid</button>
|
<button onclick="grid.set('columns', grid.columns); grid.focusHeader();">
|
Reset columns, then focus</button>
|
</div>
|
</div>
|
</body>
|
</html>
|
