From 38cdfa0dc391c04f04a799225e6eb783c1bf3832 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 11 Dec 2012 11:20:18 -0500 Subject: [PATCH 1/2] Hide ls on click --- js/id/ui/layerswitcher.js | 89 ++++++++++++++++++++++----------------- 1 file changed, 51 insertions(+), 38 deletions(-) diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js index bec3db02c..b29bcf5e1 100644 --- a/js/id/ui/layerswitcher.js +++ b/js/id/ui/layerswitcher.js @@ -25,26 +25,39 @@ iD.layerswitcher = function(map) { }]; function layerswitcher(selection) { - selection + + var content = selection + .append('div').attr('class', 'content map-overlay hide'); + + var toggle = selection .append('button') .attr('class', 'narrow') .text('Layers') - .on('click', function() { + .on('click.toggle', function() { d3.select(this) - .classed('active', function() { - if ( !content.classed('hide')) { - return false; - } else { - return true; - } - }) + .classed('active', function() { + return content.classed('hide'); + }); content.classed('hide', function() { + if (content.classed('hide')) clickoutside(selection); + else { + d3.select('body').on('click.outside', null); + selection.on('click.inside', null); + } return !content.classed('hide'); }); }); - var content = selection - .append('div').attr('class', 'content map-overlay hide'); + function clickoutside(selection) { + selection + .on('click.inside', function() { + return d3.event.stopPropagation(); + }); + d3.select('body') + .on('click.outside', function() { + toggle.on('click.toggle').apply(toggle.node(), d3.event); + }); + } opa = content .append('div') @@ -65,9 +78,9 @@ iD.layerswitcher = function(map) { .style('opacity', d.level) .attr('data-opacity', d.level); d3.selectAll('.opacity-options li') - .classed('selected', false) + .classed('selected', false); d3.select(this) - .classed('selected', true) + .classed('selected', true); }) .html("
") .call(bootstrap.tooltip().placement('top')) @@ -77,7 +90,7 @@ iD.layerswitcher = function(map) { return d.level; }); // Make sure there is an active selection by default - d3.select('.opacity-options li').classed('selected', true) + d3.select('.opacity-options li').classed('selected', true); function selectLayer(d) { content.selectAll('a.layer') @@ -87,31 +100,31 @@ iD.layerswitcher = function(map) { } content - .append('ul') - .attr('class', 'toggle-list') + .append('ul') + .attr('class', 'toggle-list') + .selectAll('a.layer') + .data(sources) + .enter() + .append('li') + .append('a') + .attr('data-original-title', function(d) { + return d.description; + }) + .attr('href', '#') + .attr('class', 'layer') + .text(function(d) { + return d.name; + }) + .call(bootstrap.tooltip().placement('right')) + .on('click', function(d) { + d3.event.preventDefault(); + map.background.source(d.source); + map.redraw(); + selectLayer(d); + }) + .insert('span') + .attr('class','icon toggle'); - .selectAll('a.layer') - .data(sources) - .enter() - .append('li') - .append('a') - .attr('data-original-title', function(d) { - return d.description; - }) - .attr('href', '#') - .attr('class', 'layer') - .text(function(d) { - return d.name; - }) - .call(bootstrap.tooltip().placement('right')) - .on('click', function(d) { - d3.event.preventDefault(); - map.background.source(d.source); - map.redraw(); - selectLayer(d); - }) - .insert('span') - .attr('class','icon toggle'); selectLayer(map.background.source()); } From 435b7f46fcd7feb7078ecf0fe2b0cc7ba1b3fcf8 Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Tue, 11 Dec 2012 12:02:01 -0500 Subject: [PATCH 2/2] Namespace all events --- js/id/modes/draw_road.js | 1 + js/id/modes/select.js | 6 +++--- js/id/renderer/map.js | 4 ++-- js/id/ui/commit.js | 4 ++-- js/id/ui/confirm.js | 2 +- js/id/ui/layerswitcher.js | 4 ++-- js/id/ui/modal.js | 2 +- js/id/ui/userpanel.js | 2 +- 8 files changed, 13 insertions(+), 12 deletions(-) diff --git a/js/id/modes/draw_road.js b/js/id/modes/draw_road.js index 56058e017..81f00a0cf 100644 --- a/js/id/modes/draw_road.js +++ b/js/id/modes/draw_road.js @@ -4,6 +4,7 @@ iD.modes.DrawRoad = function(wayId, direction) { }; mode.enter = function() { + var map = mode.map, history = mode.history, controller = mode.controller, diff --git a/js/id/modes/select.js b/js/id/modes/select.js index 4a704652b..02553663d 100644 --- a/js/id/modes/select.js +++ b/js/id/modes/select.js @@ -53,7 +53,7 @@ iD.modes.Select = function (entity) { mode.enter = function () { iD.modes._dragFeatures(mode); - target = mode.map.surface.selectAll("*") + target = mode.map.surface.selectAll('*') .filter(function (d) { return d === entity; }); d3.select('.inspector-wrap') @@ -88,7 +88,7 @@ iD.modes.Select = function (entity) { target.call(dragWay); } - mode.map.surface.on("click.browse", function () { + mode.map.surface.on('click.browse', function () { var datum = d3.select(d3.event.target).datum(); if (datum instanceof iD.Entity) { mode.controller.enter(iD.modes.Select(datum)); @@ -116,7 +116,7 @@ iD.modes.Select = function (entity) { .on('touchstart.drag', null); } - mode.map.surface.on("click.browse", null); + mode.map.surface.on('click.browse', null); mode.map.keybinding().on('⌫.browse', null); mode.map.selection(null); diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js index f83e5487a..61e9b7069 100644 --- a/js/id/renderer/map.js +++ b/js/id/renderer/map.js @@ -33,8 +33,8 @@ iD.Map = function() { .call(zoom); surface = supersurface.append('svg') - .on('mouseup', resetTransform) - .on('touchend', resetTransform); + .on('mouseup.reset-transform', resetTransform) + .on('touchend.reset-transform', resetTransform); defs = surface.append('defs'); defs.append('clipPath') diff --git a/js/id/ui/commit.js b/js/id/ui/commit.js index e5f3de828..40a6a2e98 100644 --- a/js/id/ui/commit.js +++ b/js/id/ui/commit.js @@ -40,14 +40,14 @@ iD.commit = function() { body.append('button').text('Save') .attr('class', 'save') - .on('click', function() { + .on('click.save', function() { event.save({ comment: d3.select('textarea.changeset-comment').node().value }); }); body.append('button').text('Cancel') .attr('class', 'cancel') - .on('click', function() { + .on('click.cancel', function() { event.cancel(); }); } diff --git a/js/id/ui/confirm.js b/js/id/ui/confirm.js index b0ea340d9..dbddae9db 100644 --- a/js/id/ui/confirm.js +++ b/js/id/ui/confirm.js @@ -6,7 +6,7 @@ iD.confirm = function(message) { modal.select('.content') .append('button') .text('OK') - .on('click', function() { + .on('click.confirm', function() { modal.remove(); }); diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js index ae0d313ff..14c6bb142 100644 --- a/js/id/ui/layerswitcher.js +++ b/js/id/ui/layerswitcher.js @@ -72,7 +72,7 @@ iD.layerswitcher = function(map) { .attr('data-original-title', function(d) { return d.label + " opacity"; }) - .on('click', function(d) { + .on('click.set-opacity', function(d) { d3.select('#tile-g') .transition() .style('opacity', d.level) @@ -116,7 +116,7 @@ iD.layerswitcher = function(map) { return d.name; }) .call(bootstrap.tooltip().placement('right')) - .on('click', function(d) { + .on('click.set-source', function(d) { d3.event.preventDefault(); map.background.source(d.source); map.redraw(); diff --git a/js/id/ui/modal.js b/js/id/ui/modal.js index 6b74504c8..f4ad5ea01 100644 --- a/js/id/ui/modal.js +++ b/js/id/ui/modal.js @@ -7,7 +7,7 @@ iD.modal = function() { var shaded = d3.select(document.body) .append('div').attr('class', 'shaded') .style('opacity', 0) - .on('click', function() { + .on('click.remove-modal', function() { if (d3.event.target == this) this.remove(); }); diff --git a/js/id/ui/userpanel.js b/js/id/ui/userpanel.js index 1904e0a7c..6c126898a 100644 --- a/js/id/ui/userpanel.js +++ b/js/id/ui/userpanel.js @@ -19,7 +19,7 @@ iD.userpanel = function(connection) { .attr('class', 'logout') .attr('href', '#') .text('logout') - .on('click', function() { + .on('click.logout', function() { d3.event.preventDefault(); event.logout(); });