From 239fa6258a375fe8fdc000e59d75c0393e29abd6 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Tue, 5 Mar 2013 11:46:43 -0800 Subject: [PATCH 1/5] layerswitcher -> background --- combobox.html | 2 +- css/app.css | 34 ++++++++++---------- index.html | 2 +- js/id/ui.js | 4 +-- js/id/ui/{layerswitcher.js => background.js} | 24 +++++++------- locale/da.js | 2 +- locale/de.js | 2 +- locale/en.js | 2 +- locale/es.js | 2 +- locale/fr.js | 2 +- locale/it.js | 2 +- locale/ja.js | 2 +- locale/lv.js | 2 +- locale/nl.js | 2 +- locale/pl.js | 2 +- locale/ru.js | 2 +- locale/tr.js | 2 +- locale/uk.js | 2 +- locale/vi.js | 2 +- test/index.html | 2 +- 20 files changed, 48 insertions(+), 48 deletions(-) rename js/id/ui/{layerswitcher.js => background.js} (90%) diff --git a/combobox.html b/combobox.html index 663355663..72c7ea538 100644 --- a/combobox.html +++ b/combobox.html @@ -61,7 +61,7 @@ - + diff --git a/css/app.css b/css/app.css index a573474d8..22c633e26 100644 --- a/css/app.css +++ b/css/app.css @@ -963,9 +963,9 @@ div.combobox { border-top:0; } -/* Layer Switcher */ +/* Background Settings */ -.layerswitcher-control { +.background-control { top:190px; } @@ -973,7 +973,7 @@ div.combobox { margin-top: 10px; } -.layerswitcher-control .adjustments button { +.background-control .adjustments button { height:30px; font-size:10px; padding:0 5px 3px 5px; @@ -982,7 +982,7 @@ div.combobox { font-weight: bold; } -.layerswitcher-control .adjustments button:hover { +.background-control .adjustments button:hover { background:#ececec; } @@ -1012,7 +1012,7 @@ div.combobox { border-left: 4px solid transparent; } -.layerswitcher-control .nudge { +.background-control .nudge { text-indent: -9999px; overflow: hidden; width:16.6666%; @@ -1021,7 +1021,7 @@ div.combobox { position: relative; } -.layerswitcher-control .nudge::after { +.background-control .nudge::after { content: ''; display: block; position: absolute; @@ -1031,35 +1031,35 @@ div.combobox { width: 0; } -.layerswitcher-control .nudge.left::after { +.background-control .nudge.left::after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid #222; } -.layerswitcher-control .nudge.right::after { +.background-control .nudge.right::after { border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid #222; } -.layerswitcher-control .nudge.top::after { +.background-control .nudge.top::after { border-right: 5px solid transparent; border-left: 5px solid transparent; border-bottom: 5px solid #222; } -.layerswitcher-control .nudge.bottom::after { +.background-control .nudge.bottom::after { border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 5px solid #222; } -.layerswitcher-control .nudge:first-child { +.background-control .nudge:first-child { border-radius: 4px 0 0 4px; } -.layerswitcher-control .reset { +.background-control .reset { width: 33.3333%; border-radius: 0 4px 4px 0; } @@ -1092,18 +1092,18 @@ div.combobox { z-index: 9999; } -.layerswitcher-control li:hover .select-box, -.layerswitcher-control li.selected .select-box { +.background-control li:hover .select-box, +.background-control li.selected .select-box { border: 2px solid #7092ff; background: rgba(89, 123, 231, .5); opacity: .5; } -.layerswitcher-control li.selected:hover .select-box, -.layerswitcher-control li.selected .select-box { +.background-control li.selected:hover .select-box, +.background-control li.selected .select-box { opacity: 1; } -.layerswitcher-control .opacity { +.background-control .opacity { background:#222; display:inline-block; width:20px; diff --git a/index.html b/index.html index 4894aed75..83b50cecc 100644 --- a/index.html +++ b/index.html @@ -72,7 +72,7 @@ - + diff --git a/js/id/ui.js b/js/id/ui.js index 1cb7bdd22..d4e0fa10a 100644 --- a/js/id/ui.js +++ b/js/id/ui.js @@ -57,8 +57,8 @@ iD.ui = function(context) { .call(iD.ui.Geocoder(context)); container.append('div') - .attr('class', 'map-control layerswitcher-control') - .call(iD.ui.LayerSwitcher(context)); + .attr('class', 'map-control background-control') + .call(iD.ui.Background(context)); container.append('div') .attr('class', 'map-control geolocate-control') diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/background.js similarity index 90% rename from js/id/ui/layerswitcher.js rename to js/id/ui/background.js index be25c9df8..cfbae499a 100644 --- a/js/id/ui/layerswitcher.js +++ b/js/id/ui/background.js @@ -1,4 +1,4 @@ -iD.ui.LayerSwitcher = function(context) { +iD.ui.Background = function(context) { var event = d3.dispatch('cancel', 'save'), opacities = [1, 0.5, 0]; @@ -12,7 +12,7 @@ iD.ui.LayerSwitcher = function(context) { }); } - function layerswitcher(selection) { + function background(selection) { var content = selection .append('div').attr('class', 'content fillD map-overlay hide'), @@ -24,8 +24,8 @@ iD.ui.LayerSwitcher = function(context) { .append('button') .attr('tabindex', -1) .attr('class', 'fillD') - .attr('title', t('layerswitcher.description')) - .on('click.layerswitcher-toggle', toggle) + .attr('title', t('background.description')) + .on('click.background-toggle', toggle) .call(tooltip); button.append('span') @@ -43,17 +43,17 @@ iD.ui.LayerSwitcher = function(context) { } function clickoutside(selection) { - selection.on('click.layerswitcher-inside', function() { + selection.on('click.background-inside', function() { return d3.event.stopPropagation(); }); - context.container().on('click.layerswitcher-outside', hide); + context.container().on('click.background-outside', hide); } var opa = content .append('div') .attr('class', 'opacity-options-wrapper'); - opa.append('h4').text(t('layerswitcher.title')); + opa.append('h4').text(t('background.title')); var opacityList = opa.append('ul') .attr('class', 'opacity-options'); @@ -74,7 +74,7 @@ iD.ui.LayerSwitcher = function(context) { .enter() .append('li') .attr('data-original-title', function(d) { - return t('layerswitcher.percent_brightness', { opacity: (d * 100) }); + return t('background.percent_brightness', { opacity: (d * 100) }); }) .on('click.set-opacity', setOpacity) .html("
") @@ -162,7 +162,7 @@ iD.ui.LayerSwitcher = function(context) { selectLayer(context.background().source()); } - context.map().on('move.layerswitcher-update', _.debounce(update, 1000)); + context.map().on('move.background-update', _.debounce(update, 1000)); var adjustments = content .append('div') @@ -180,7 +180,7 @@ iD.ui.LayerSwitcher = function(context) { } adjustments.append('a') - .text(t('layerswitcher.fix_misalignment')) + .text(t('background.fix_misalignment')) .attr('href', '#') .classed('hide-toggle', true) .classed('expanded', false) @@ -208,7 +208,7 @@ iD.ui.LayerSwitcher = function(context) { .on('click', nudge); nudge_container.append('button') - .text(t('layerswitcher.reset')) + .text(t('background.reset')) .attr('class', 'reset') .on('click', function() { context.background().offset([0, 0]); @@ -219,5 +219,5 @@ iD.ui.LayerSwitcher = function(context) { selectLayer(context.background().source()); } - return d3.rebind(layerswitcher, event, 'on'); + return d3.rebind(background, event, 'on'); }; diff --git a/locale/da.js b/locale/da.js index 9b290492d..65b7a1a64 100644 --- a/locale/da.js +++ b/locale/da.js @@ -188,7 +188,7 @@ locale.da = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Baggrund", description: "Baggrundsindstillinger", percent_brightness: "{opacity}% lysstyrke", diff --git a/locale/de.js b/locale/de.js index bd9978900..5881f9c60 100644 --- a/locale/de.js +++ b/locale/de.js @@ -188,7 +188,7 @@ locale.de = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Hintergrund", description: "Hintergrundeinstellungen", percent_brightness: "{opacity}% Helligkeit", diff --git a/locale/en.js b/locale/en.js index 55ef464ad..85365a339 100644 --- a/locale/en.js +++ b/locale/en.js @@ -188,7 +188,7 @@ locale.en = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Background", description: "Background Settings", percent_brightness: "{opacity}% brightness", diff --git a/locale/es.js b/locale/es.js index 76b66234c..baad4c2c1 100644 --- a/locale/es.js +++ b/locale/es.js @@ -188,7 +188,7 @@ locale.es = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Fondo", //"Background", description: "Configuración de fondo", //"Background Settings", percent_brightness: "{opacity}% brillo", //"{opacity}% brightness", diff --git a/locale/fr.js b/locale/fr.js index b4e568fd2..81dc39341 100644 --- a/locale/fr.js +++ b/locale/fr.js @@ -188,7 +188,7 @@ locale.fr = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Fond de carte", description: "Paramètres du fond de carte", percent_brightness: "{opacity}% luminosité", diff --git a/locale/it.js b/locale/it.js index fe144f233..916e5348f 100644 --- a/locale/it.js +++ b/locale/it.js @@ -188,7 +188,7 @@ locale.it = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Sfondo", description: "Impostazioni dello sfondo", percent_brightness: "{opacity}% opacità", diff --git a/locale/ja.js b/locale/ja.js index cf9475bfa..d94a78731 100644 --- a/locale/ja.js +++ b/locale/ja.js @@ -188,7 +188,7 @@ locale.ja = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "背景画像", description: "背景画像設定", percent_brightness: "{opacity}% 輝度", diff --git a/locale/lv.js b/locale/lv.js index 0878e3bff..aa27ced1e 100644 --- a/locale/lv.js +++ b/locale/lv.js @@ -188,7 +188,7 @@ locale.lv = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Fons", description: "Fona iestatījumi", percent_brightness: "{opacity}% caurspīdīgums", diff --git a/locale/nl.js b/locale/nl.js index ea61e7781..27479c00c 100644 --- a/locale/nl.js +++ b/locale/nl.js @@ -188,7 +188,7 @@ locale.nl = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Achtergrond", description: "Achtergrondinstellingen", percent_brightness: "{opacity}% helderheid", diff --git a/locale/pl.js b/locale/pl.js index 80dcfcd82..a84597559 100644 --- a/locale/pl.js +++ b/locale/pl.js @@ -188,7 +188,7 @@ locale.pl = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Tło", description: "Ustawienia tła", percent_brightness: "jasność {opacity}%", diff --git a/locale/ru.js b/locale/ru.js index 4b10adfdd..07a1b2f36 100644 --- a/locale/ru.js +++ b/locale/ru.js @@ -188,7 +188,7 @@ locale.ru = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Подложка", description: "Настройка подложки", percent_brightness: "яркость {opacity}%", diff --git a/locale/tr.js b/locale/tr.js index fcd0beef4..3c13690d2 100644 --- a/locale/tr.js +++ b/locale/tr.js @@ -188,7 +188,7 @@ locale.tr = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Arkaplan", description: "Arkaplan Ayarları", percent_brightness: "{opacity}% parlaklık", diff --git a/locale/uk.js b/locale/uk.js index 0b70fc811..66e761640 100644 --- a/locale/uk.js +++ b/locale/uk.js @@ -188,7 +188,7 @@ locale.uk = { results: "{n} results for {search}" }, - layerswitcher: { + background: { title: "Фон", description: "Налаштування фону", percent_brightness: "прозорість {opacity}%", diff --git a/locale/vi.js b/locale/vi.js index 3aef32938..504751f4a 100644 --- a/locale/vi.js +++ b/locale/vi.js @@ -188,7 +188,7 @@ locale.vi = { results: "{n} kết quả cho {search}" }, - layerswitcher: { + background: { title: "Hình nền", description: "Tùy chọn Hình nền", percent_brightness: "Sáng {opacity}%", diff --git a/test/index.html b/test/index.html index f4aabfd54..048672cf3 100644 --- a/test/index.html +++ b/test/index.html @@ -75,7 +75,7 @@ - + From 05279c3954756fab93a2b380851f27a0b4281697 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Tue, 5 Mar 2013 12:04:36 -0800 Subject: [PATCH 2/5] Fix background control initial state (fixes #904) --- js/id/ui/background.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js/id/ui/background.js b/js/id/ui/background.js index cfbae499a..225101f10 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -164,6 +164,8 @@ iD.ui.Background = function(context) { context.map().on('move.background-update', _.debounce(update, 1000)); + update(); + var adjustments = content .append('div') .attr('class', 'adjustments pad1'); @@ -216,7 +218,6 @@ iD.ui.Background = function(context) { }); selection.call(clickoutside); - selectLayer(context.background().source()); } return d3.rebind(background, event, 'on'); From b53014e50fb8be9b73faa33dd6485a9617c29726 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Tue, 5 Mar 2013 12:05:22 -0800 Subject: [PATCH 3/5] Cleanup --- js/id/ui/background.js | 118 +++++++++++++++++++++-------------------- 1 file changed, 61 insertions(+), 57 deletions(-) diff --git a/js/id/ui/background.js b/js/id/ui/background.js index 225101f10..69991430f 100644 --- a/js/id/ui/background.js +++ b/js/id/ui/background.js @@ -14,14 +14,14 @@ iD.ui.Background = function(context) { function background(selection) { - var content = selection - .append('div').attr('class', 'content fillD map-overlay hide'), + var content = selection.append('div') + .attr('class', 'content fillD map-overlay hide'), shown = false; - var tooltip = bootstrap.tooltip().placement('right'); + var tooltip = bootstrap.tooltip() + .placement('right'); - var button = selection - .append('button') + var button = selection.append('button') .attr('tabindex', -1) .attr('class', 'fillD') .attr('title', t('background.description')) @@ -31,8 +31,10 @@ iD.ui.Background = function(context) { button.append('span') .attr('class', 'layers icon'); - function hide() { setVisible(false); } - function toggle() { tooltip.hide(button); setVisible(content.classed('hide')); } + function toggle() { + tooltip.hide(button); + setVisible(content.classed('hide')); + } function setVisible(show) { if (show !== shown) { @@ -42,18 +44,20 @@ iD.ui.Background = function(context) { } } - function clickoutside(selection) { - selection.on('click.background-inside', function() { - return d3.event.stopPropagation(); - }); - context.container().on('click.background-outside', hide); - } + selection.on('click.background-inside', function() { + return d3.event.stopPropagation(); + }); + + context.container().on('click.background-outside', function() { + setVisible(false); + }); var opa = content .append('div') .attr('class', 'opacity-options-wrapper'); - opa.append('h4').text(t('background.title')); + opa.append('h4') + .text(t('background.title')); var opacityList = opa.append('ul') .attr('class', 'opacity-options'); @@ -73,18 +77,20 @@ iD.ui.Background = function(context) { .data(opacities) .enter() .append('li') - .attr('data-original-title', function(d) { - return t('background.percent_brightness', { opacity: (d * 100) }); - }) - .on('click.set-opacity', setOpacity) - .html("
") - .call(bootstrap.tooltip().placement('top')) - .append('div') - .attr('class', 'opacity') - .style('opacity', String); + .attr('data-original-title', function(d) { + return t('background.percent_brightness', { opacity: (d * 100) }); + }) + .on('click.set-opacity', setOpacity) + .html("
") + .call(bootstrap.tooltip() + .placement('top')) + .append('div') + .attr('class', 'opacity') + .style('opacity', String); // Make sure there is an active selection by default - opa.select('.opacity-options li:nth-child(2)').classed('selected', true); + opa.select('.opacity-options li:nth-child(2)') + .classed('selected', true); function selectLayer(d) { @@ -137,27 +143,33 @@ iD.ui.Background = function(context) { .data(getSources(), function(d) { return d.data.name; }); - layerLinks.exit().remove(); - var LayerInner = layerLinks.enter() + + var layerInner = layerLinks.enter() .append('li') - .append('a') - .attr('data-original-title', function(d) { - return d.data.description || ''; - }) - .attr('href', '#') - .attr('class', 'layer') - .each(function(d) { - // only set tooltips for layers with tooltips - if (d.data.description) { - d3.select(this).call(bootstrap.tooltip().placement('right')); - } - }) - .on('click.set-source', clickSetSource); - LayerInner.insert('span') - .attr('class','icon toggle'); - LayerInner.insert('span').text(function(d) { - return d.data.name; - }); + .append('a'); + + layerInner + .attr('href', '#') + .attr('class', 'layer') + .on('click.set-source', clickSetSource); + + // only set tooltips for layers with tooltips + layerInner + .filter(function(d) { return d.data.description; }) + .call(bootstrap.tooltip() + .title(function(d) { return d.data.description; }) + .placement('right') + ); + + layerInner.insert('span') + .attr('class', 'icon toggle'); + + layerInner.insert('span').text(function(d) { + return d.data.name; + }); + + layerLinks.exit() + .remove(); selectLayer(context.background().source()); } @@ -176,11 +188,6 @@ iD.ui.Background = function(context) { ['right', [1, 0]], ['bottom', [0, 1]]]; - function nudge(d) { - context.background().nudge(d[1], context.map().zoom()); - context.redraw(); - } - adjustments.append('a') .text(t('background.fix_misalignment')) .attr('href', '#') @@ -188,11 +195,7 @@ iD.ui.Background = function(context) { .classed('expanded', false) .on('click', function() { var exp = d3.select(this).classed('expanded'); - if (!exp) { - nudge_container.style('display', 'block'); - } else { - nudge_container.style('display', 'none'); - } + nudge_container.style('display', exp ? 'none' : 'block'); d3.select(this).classed('expanded', !exp); d3.event.preventDefault(); }); @@ -207,7 +210,10 @@ iD.ui.Background = function(context) { .append('button') .attr('class', function(d) { return d[0] + ' nudge'; }) .text(function(d) { return d[0]; }) - .on('click', nudge); + .on('click', function(d) { + context.background().nudge(d[1], context.map().zoom()); + context.redraw(); + }); nudge_container.append('button') .text(t('background.reset')) @@ -216,8 +222,6 @@ iD.ui.Background = function(context) { context.background().offset([0, 0]); context.redraw(); }); - - selection.call(clickoutside); } return d3.rebind(background, event, 'on'); From e106db76d4f6c531484bff28b4e38c56e209f4c1 Mon Sep 17 00:00:00 2001 From: John Firebaugh Date: Tue, 5 Mar 2013 12:28:56 -0800 Subject: [PATCH 4/5] Hidden tooltips should be `display: none` `display: block; opacity: 0` leads to odd mouse behavior. --- css/app.css | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/css/app.css b/css/app.css index 22c633e26..fecf8e61f 100644 --- a/css/app.css +++ b/css/app.css @@ -1528,16 +1528,14 @@ a.success-action { .tooltip { width: 200px; position: absolute; - z-index: -1000; - height: 0; - opacity: 0; - display: block; + display: none; } .tooltip.in { opacity: 0.8; z-index: 1030; height: auto; + display: block; } .tooltip.top { From 4fb8688d8373cd1dab3d737d5232a7007c12e801 Mon Sep 17 00:00:00 2001 From: Ansis Brammanis Date: Tue, 5 Mar 2013 15:37:34 -0500 Subject: [PATCH 5/5] add tests for iD.presets.Collection and .Category --- test/index.html | 2 + test/spec/presets/category.js | 41 ++++++++++++++++++++ test/spec/presets/collection.js | 68 +++++++++++++++++++++++++++++++++ 3 files changed, 111 insertions(+) create mode 100644 test/spec/presets/category.js create mode 100644 test/spec/presets/collection.js diff --git a/test/index.html b/test/index.html index 048672cf3..b130897cf 100644 --- a/test/index.html +++ b/test/index.html @@ -254,6 +254,8 @@ + +