Skip to content

Commit

Permalink
Merge pull request #50 from christianp/hex-cartogram-keyboard
Browse files Browse the repository at this point in the history 
A useful set of improvements
  • Loading branch information
@slowe
slowe authored Apr 11, 2024
2 parents 74c1790 + 59a03ec commit b07f9b1
Show file tree
Hide file tree
Showing 3 changed files with 102 additions and 38 deletions.
77 changes: 77 additions & 0 deletions assets/js/map.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,89 @@
_obj.removeOutline();
};
}
if(typ == "hex-map") {
attr.coord_attributes = ["data-q", "data-r"];
}

function arrow_move(e, _alltips) {
var directions = {
"ArrowLeft": [-1,0],
"ArrowRight": [1,0],
"ArrowUp": [0,1],
"ArrowDown": [0,-1]
};

var direction = directions[e.key];
var dx = direction[0];
var dy = direction[1];

var idx = -1,t;

// If a tip in this group is active we use that
if(_alltips.active){
for(t = 0; t < this.tips.length; t++){
// Matched to an existing tip in this group
if(_alltips.active==this.tips[t]) idx = t;
}
}

if(e.shiftKey && this.tips[idx] && attr.coord_attributes !== undefined) {
var tip = this.tips[idx];
var x = tip.x + dx;
var y = tip.y + dy;
var closest = this.tips.map(function(t,i) {
return {t, i, d: [(t.x - x), (t.y - y)]};
}).filter(function(a) {
return dx != 0 ? a.d[0]*dx >= 0 : a.d[1]*dy >= 0;
})
.sort(function(a,b) {
var ax = a.d[0];
var ay = a.d[1];
var bx = b.d[0];
var by = b.d[1];
return dx != 0 ? (ay==by ? (ax-bx)*dx : Math.abs(ay)-Math.abs(by)) : (ax==bx ? (ay-by)*dy : Math.abs(ax) - Math.abs(bx));
});
if(closest.length > 0) {
idx = closest[0].i;
}
} else {

// Increment
if(e.key == "ArrowLeft" || e.key == "ArrowUp") idx--;
else if(e.key == "ArrowRight" || e.key == "ArrowDown") idx++;
}

// Limit range
if(idx < 0) idx += this.tips.length;
if(idx > this.tips.length-1) idx -= this.tips.length;


// Activate the tooltip
if(idx >= 0 && idx < this.tips.length){
this.tips[idx].el.focus();
_alltips.activate(this.tips[idx].el);
}
}

attr.keymap = {
"ArrowLeft": arrow_move,
"ArrowRight": arrow_move,
"ArrowUp": arrow_move,
"ArrowDown": arrow_move,
}

var groups = el.querySelectorAll('.data-layer .series, .oi-map-inner .markers');
// Add tooltip groups
for(var g = 0; g < groups.length; g++){
OI.Tooltips.addGroup(groups[g],'.area, .hex, .marker, .line',attr);
}

// Add description for keyboard navigation
var desc = svg.querySelector(':scope > desc');
if(desc) {
desc.textContent += ' Use left and right arrow keys to move between cells. Hold shift and use arrow keys to move to adjacent cells.';
}

return this;
}

Expand Down
54 changes: 19 additions & 35 deletions assets/js/tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,10 +59,10 @@
return undefined;
};

this.makeGroup = function(el){
this.makeGroup = function(el,attr){
var group = this.getGroup(el);
if(group===undefined){
group = new TooltipGroup(this,el);
group = new TooltipGroup(this,el,attr);
groups.push(group);
}
return group;
Expand All @@ -71,7 +71,7 @@
this.addGroup = function(el,selector,attr){
if(!attr) attr = {};
// Do we have this group?
var group = this.makeGroup(el);
var group = this.makeGroup(el,attr);
// If it is a string we convert it into an array of elements
if(typeof selector==="string") selector = el.querySelectorAll(selector);
// Add the selector to the group and then add the defined tips to our array
Expand Down Expand Up @@ -142,41 +142,12 @@
return this;
}

function TooltipGroup(_alltips,el){
function TooltipGroup(_alltips,el,attr){
this.el = el;
this.tips = [];
// Set a tab index on the group
el.setAttribute('tabindex',0);
addEv('keydown',el,{this:this},function(e){
if(e.key == "ArrowLeft" || e.key == "ArrowRight"){
e.preventDefault();
e.stopPropagation();
var idx = -1,t;

// If a tip in this group is active we use that
if(_alltips.active){
for(t = 0; t < this.tips.length; t++){
// Matched to an existing tip in this group
if(_alltips.active==this.tips[t]) idx = t;
}
}

// Increment
if(e.key == "ArrowLeft") idx--;
else if(e.key == "ArrowRight") idx++;

// Limit range
if(idx < 0) idx += this.tips.length;
if(idx > this.tips.length-1) idx -= this.tips.length;


// Activate the tooltip
if(idx >= 0 && idx < this.tips.length){
this.tips[idx].el.focus();
_alltips.activate(this.tips[idx].el);
}
}
});

this.create = function(pts,attr){
if(!attr) attr = {};
Expand All @@ -202,7 +173,15 @@
//}
return this;
};


addEv('keydown',el,{this:this},function(e){
if(e.key in attr.keymap){
e.preventDefault();
e.stopPropagation();
attr.keymap[e.key].apply(this, [e, _alltips]);
}
});

return this;
} // End of tooltip group class

Expand Down Expand Up @@ -255,8 +234,13 @@
return undefined;
};

if(attr.coord_attributes !== undefined) {
this.x = parseFloat(this.el.getAttribute(attr.coord_attributes[0]));
this.y = parseFloat(this.el.getAttribute(attr.coord_attributes[1]));
}

this.show = function(){
var tip,title,fill,bb,bbo,bbox,off,pad,box,arr,shift,wide,pt2;
var tip,title,fill,bb,bbo,bbox,off,pad,box,arr,shift,wide,pt2,tt;

pt2 = pt.querySelector('path,.marker');
if(!pt2) pt2 = pt;
Expand Down
9 changes: 6 additions & 3 deletions components/map/hex_cartogram.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ type HexmapOptions = {
matchKey?: string;
title?: string;
titleProp: string;
desc?: string;
value?: string;
colourValueProp?: string;
tools?: { filter?: { label?: string; }, slider?: boolean; };
Expand Down Expand Up @@ -101,6 +102,7 @@ export default function (input: { config: HexmapOptions }) {
matchKey,
tooltip = (label: string, value) => `${label}`,
title = "Hexmap",
desc = "",
titleProp = "n",
value = "",
colourValueProp,
Expand Down Expand Up @@ -522,7 +524,7 @@ export default function (input: { config: HexmapOptions }) {
fill = Colour(fill);

// TODO(@gilesdring) this only supports pointy-top hexes at the moment
var html = `<g class="hex" transform="translate(${roundNumber(x)} ${roundNumber(y)})" data-id="${config._id}" role="cell">`;
var html = `<g class="hex" data-q="${config.q}" data-r="${config.r}" transform="translate(${roundNumber(x)} ${roundNumber(y)})" data-id="${config._id}" role="cell">`;
html += `<path fill="${fill.hex}" d="${hexPath}"><title>${tooltipText}</title></path>`;
if(labelText) html += `<text fill="${fill.contast}" text-anchor="middle" dominant-baseline="middle" aria-hidden="true">${labelText}</text>`;
html += `</g>`;
Expand Down Expand Up @@ -591,8 +593,9 @@ export default function (input: { config: HexmapOptions }) {
xmlns:xlink="http://www.w3.org/1999/xlink"
data-type="hex-map"
vector-effect="non-scaling-stroke"
aria-labelledby="title-${uuid}">
<title id="title-${uuid}">${title}</title>`;
aria-labelledby="title-${uuid} desc-${uuid}">
<title id="title-${uuid}">${title}</title>
<desc id="desc-${uuid}">${desc}</desc>`;
html += '<g class="data-layer" role="table"><g class="series" role="row" tabindex="0" aria-label="Hexagons">';
// Sort by name
let sorted = sortBy(Object.values(hexes),'n',true);
Expand Down

0 comments on commit b07f9b1

Please sign in to comment.