Skip to content
Browse files

Merge branch 'grid-mouse' of git://github.com/SitePenKenFranqueiro/dg…

…rid into maint-0.3
  • Loading branch information...
2 parents 77f9fde + 5bac31d commit f4aab3c40d67c5d91a239a5f5ee0a182e1968cd4 Kenneth G. Franqueiro committed May 25, 2012
Showing with 139 additions and 0 deletions.
  1. +104 −0 test/Grid_mouseevents.html
  2. +35 −0 util/mouse.js
View
104 test/Grid_mouseevents.html
@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <title>Test delegated mouse events</title>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=570">
+ <style type="text/css">
+ @import "../../dojo/resources/dojo.css";
+ @import "../css/skins/claro.css";
+ .heading {
+ font-weight: bold;
+ padding-bottom: 0.25em;
+ }
+ .dgrid {
+ height: 20em;
+ margin: 10px;
+ }
+
+ /* add styles to size this grid appropriately */
+ #grid .field-order {
+ width: 7%;
+ }
+ #grid .field-name {
+ width: 18%;
+ }
+ </style>
+ <script type="text/javascript" src="../../dojo/dojo.js"
+ data-dojo-config="async: true"></script>
+ <script type="text/javascript">
+ var columns = {
+ order: "step", // give column a custom name
+ name: {},
+ description: {label: "what to do", sortable: false}
+ };
+ require(["dgrid/Grid", "dgrid/OnDemandGrid", "dgrid/tree", "dgrid/util/mouse", "dojo/on",
+ "dgrid/test/data/base", "dojo/query", "dojo/domReady!"],
+ function(Grid, OnDemandGrid, tree, mouseUtil, on){
+ var data = [
+ {order: 1, name:"preheat", description:"Preheat your oven to 350F"},
+ {order: 2, name:"mix dry", description:"In a medium bowl, combine flour, salt, and baking soda"},
+ {order: 3, name:"mix butter", description:"In a large bowl, beat butter, then add the brown sugar and white sugar then mix"},
+ {order: 4, name:"mix together", description:"Slowly add the dry ingredients from the medium bowl to the wet ingredients in the large bowl, mixing until the dry ingredients are totally combined"},
+ {order: 5, name:"chocolate chips", description:"Add chocolate chips"},
+ {order: 6, name:"make balls", description:"Scoop up a golf ball size amount of dough with a spoon and drop in onto a cookie sheet"},
+ {order: 7, name:"bake", description:"Put the cookies in the oven and bake for about 10-14 minutes"},
+ {order: 8, name:"remove", description:"Using a spatula, lift cookies off onto wax paper or a cooling rack"},
+ {order: 9, name:"eat", description:"Eat and enjoy!"}
+ ];
+
+ var grid = window.grid = new Grid({
+ columns: columns
+ }, "grid");
+ grid.renderArray(data);
+
+ function makeHandler(grid, type, dir){
+ return function(evt){
+ var obj = grid[type](evt),
+ str = obj.column ? obj.row.id + " " + obj.column.id : obj.id;
+ console.log(grid.id + " " + type + " " + dir + ": " + str);
+ };
+ }
+ function makeHeaderCellHandler(grid, dir){
+ return function(evt){
+ console.log(grid.id + " header cell " + dir + ": " +
+ grid.cell(evt).column.id);
+ };
+ }
+
+ grid.on(mouseUtil.enterRow, makeHandler(grid, "row", "entered"));
+ grid.on(mouseUtil.leaveRow, makeHandler(grid, "row", "left"));
+ grid.on(mouseUtil.enterCell, makeHandler(grid, "cell", "entered"));
+ grid.on(mouseUtil.leaveCell, makeHandler(grid, "cell", "left"));
+ grid.on(mouseUtil.enterHeaderCell, makeHeaderCellHandler(grid, "entered"));
+ grid.on(mouseUtil.leaveHeaderCell, makeHeaderCellHandler(grid, "left"));
+
+ var treegrid = window.treegrid = new OnDemandGrid({
+ store: testCountryStore,
+ query: {type: "continent"},
+ columns: [
+ tree({label: "Name", field:"name", sortable: false}),
+ {label:"Type", field:"type", sortable: false},
+ {label:"Population", field:"population"},
+ {label:"Timezone", field:"timezone"}
+ ]
+ }, "treegrid");
+
+ treegrid.on(mouseUtil.enterRow, makeHandler(treegrid, "row", "entered"));
+ treegrid.on(mouseUtil.leaveRow, makeHandler(treegrid, "row", "left"));
+ treegrid.on(mouseUtil.enterCell, makeHandler(treegrid, "cell", "entered"));
+ treegrid.on(mouseUtil.leaveCell, makeHandler(treegrid, "cell", "left"));
+ // specifically only hooking up leaveHeaderCell, to ensure that leave events
+ // work independently (in earlier dev, this wasn't the case)
+ treegrid.on(mouseUtil.leaveHeaderCell, makeHeaderCellHandler(treegrid, "left"));
+ });
+
+ </script>
+ </head>
+ <body class="claro">
+ <h2>A basic grid rendered from an array, with simulated mouseover events</h2>
+ <div id="grid"></div>
+ <h2>A grid with a tree column</h2>
+ <div id="treegrid"></div>
+ </body>
+</html>
View
35 util/mouse.js
@@ -0,0 +1,35 @@
+define(["dojo/on", "dojo/dom", "dojo/query"], function(on, dom){
+ function handler(selector, type){
+ // summary:
+ // Creates a handler function usable as a simulated event to dojo/on,
+ // which fires only if the mouse is moving into or out of the node of
+ // interest indicated by the selector.
+ // This is similar, but not identical, to what dojo/mouse does.
+ // selector: String
+ // Query selector for event delegation.
+ // type: String
+ // Event to delegate on (mouseover or mouseout).
+
+ return function(node, listener){
+ return on(node, selector + ":" + type, function(evt){
+ if(!dom.isDescendant(evt.relatedTarget, this)){
+ return listener.call(this, evt);
+ }
+ });
+ };
+ }
+
+ return {
+ // Provide enter/leave events for rows, cells, and header cells.
+ // (Header row is trivial since there's only one.)
+ enterRow: handler(".dgrid-content .dgrid-row", "mouseover"),
+ enterCell: handler(".dgrid-content .dgrid-cell", "mouseover"),
+ enterHeaderCell: handler(".dgrid-header .dgrid-cell", "mouseover"),
+ leaveRow: handler(".dgrid-content .dgrid-row", "mouseout"),
+ leaveCell: handler(".dgrid-content .dgrid-cell", "mouseout"),
+ leaveHeaderCell: handler(".dgrid-header .dgrid-cell", "mouseout"),
+
+ // Also expose the handler function, so people can do what they want.
+ createDelegatingHandler: handler
+ };
+});

0 comments on commit f4aab3c

Please sign in to comment.
Something went wrong with that request. Please try again.