From 2d9327c5b935defe2aaae2928ff9d54d38b1be0d Mon Sep 17 00:00:00 2001 From: Peter Dobratz Date: Mon, 25 Apr 2016 12:13:01 -0700 Subject: [PATCH] phone placeholder from country being edited MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Prefer to pull in phone placeholder text based on the country currently being edited. Fallback to using placeholder text based on user’s locale settings. rename phone placeholders to phone formats add Germany example phone number See [German Wikipedia article E.123](https://de.wikipedia.org/wiki/E.123) check for null in focus check that input.node() is not null in i.focus() --- build.js | 3 +- data/data_dev.js | 6 ++- data/phone-formats.json | 52 ++++++++++++++++++ js/id/ui/preset/input.js | 111 +++++++++++++++++++++++++++------------ 4 files changed, 135 insertions(+), 37 deletions(-) create mode 100644 data/phone-formats.json diff --git a/build.js b/build.js index b99c51eea..4c74977d5 100644 --- a/build.js +++ b/build.js @@ -295,7 +295,8 @@ fs.writeFileSync('data/data.js', 'iD.data = ' + JSON.stringify({ locales: r('locales.json'), en: read('dist/locales/en.json'), suggestions: r('name-suggestions.json'), - addressFormats: r('address-formats.json') + addressFormats: r('address-formats.json'), + phoneFormats: r('phone-formats.json') }) + ';'); fs.writeFileSync('dist/presets.js', 'iD.data.presets = ' + JSON.stringify({ diff --git a/data/data_dev.js b/data/data_dev.js index 28b05691c..8e9f352f0 100644 --- a/data/data_dev.js +++ b/data/data_dev.js @@ -18,7 +18,8 @@ iD.data = { path + 'data/locales.json', path + 'dist/locales/en.json', path + 'data/name-suggestions.json', - path + 'data/address-formats.json' + path + 'data/address-formats.json', + path + 'data/phone-formats.json' ], d3.json, function (err, data) { iD.data = { @@ -37,7 +38,8 @@ iD.data = { locales: data[10], en: data[11], suggestions: data[12], - addressFormats: data[13] + addressFormats: data[13], + phoneFormats: data[14] }; callback(); diff --git a/data/phone-formats.json b/data/phone-formats.json new file mode 100644 index 000000000..6fa1b365f --- /dev/null +++ b/data/phone-formats.json @@ -0,0 +1,52 @@ +{ + "us": "+1-202-555-1234", + "ca": "+1-226-555-1234", + "bs": "+1-242-555-1234", + "bb": "+1-246-555-1234", + "ai": "+1-264-555-1234", + "ag": "+1-268-555-1234", + "vg": "+1-284-555-1234", + "vi": "+1-340-555-1234", + "ky": "+1-345-555-1234", + "bm": "+1-441-555-1234", + "gd": "+1-473-555-1234", + "tc": "+1-649-555-1234", + "ms": "+1-664-555-1234", + "mp": "+1-670-555-1234", + "gu": "+1-671-555-1234", + "as": "+1-684-555-1234", + "sx": "+1-721-555-1234", + "lc": "+1-758-555-1234", + "dm": "+1-767-555-1234", + "vc": "+1-784-555-1234", + "pr": "+1-787-555-1234", + "do": "+1-809-555-1234", + "tt": "+1-868-555-1234", + "kn": "+1-869-555-1234", + "jm": "+1-876-555-1234", + "za": "+27 11 907 1111", + "nl": "+31 42 123 4567", + "fr": "+33 1 23 45 67 89", + "es": "+34 989 12 34 56", + "pt": "+351 211 123456", + "fi": "+358 40 123 4567", + "hu": "+36 1 123 45 67", + "hr": "+385 01 123 4567", + "si": "+386 31 123 4567", + "it": "+39 01 123 456", + "va": "+39 01 123 456", + "gb": "+44 207 123456", + "gg": "+44 207 123456", + "im": "+44 207 123456", + "je": "+44 207 123456", + "se": "+46 31 123 4567", + "no": "+47 22 12 34 56", + "sj": "+47 22 12 34 56", + "pl": "+48 42 123 4567", + "de": "+49 89 1234567", + "br": "+55 11 0982 1098", + "ru": "+7 495 1234567", + "kz": "+7 495 1234567", + "vn": "+84 1 234 5678", + "hk": "+852 12345678" +} diff --git a/js/id/ui/preset/input.js b/js/id/ui/preset/input.js index cba65395c..cb9a4ee8b 100644 --- a/js/id/ui/preset/input.js +++ b/js/id/ui/preset/input.js @@ -2,51 +2,81 @@ iD.ui.preset.text = iD.ui.preset.number = iD.ui.preset.tel = iD.ui.preset.email = -iD.ui.preset.url = function(field) { +iD.ui.preset.url = function(field, context) { - var dispatch = d3.dispatch('change'), - input; + var dispatch = d3.dispatch('init', 'change'), + input, + entity, + isInitialized; function i(selection) { + isInitialized = false; + input = selection.selectAll('input') .data([0]); - input.enter().append('input') - .attr('type', field.type) - .attr('id', 'preset-input-' + field.id) - .attr('placeholder', field.placeholder() || t('inspector.unknown')); + if (field.type === 'tel') { + var center = entity.extent(context.graph()).center(); - input - .on('input', change(true)) - .on('blur', change()) - .on('change', change()); + iD.services.nominatim().countryCode(center, function (err, countryCode) { - if (field.type === 'number') { - input.attr('type', 'text'); + input.enter().append('input') + .attr('type', field.type) + .attr('id', 'preset-input-' + field.id) + .attr('placeholder', + iD.data.phoneFormats[countryCode] || + field.placeholder() || + t('inspector.unknown')); - var spinControl = selection.selectAll('.spin-control') - .data([0]); + input + .on('input', change(true)) + .on('blur', change()) + .on('change', change()); - var enter = spinControl.enter().append('div') - .attr('class', 'spin-control'); + dispatch.init(); + isInitialized = true; + }); + } else { + input.enter().append('input') + .attr('type', field.type) + .attr('id', 'preset-input-' + field.id) + .attr('placeholder', field.placeholder() || t('inspector.unknown')); - enter.append('button') - .datum(1) - .attr('class', 'increment') - .attr('tabindex', -1); + input + .on('input', change(true)) + .on('blur', change()) + .on('change', change()); - enter.append('button') - .datum(-1) - .attr('class', 'decrement') - .attr('tabindex', -1); + if (field.type === 'number') { + input.attr('type', 'text'); - spinControl.selectAll('button') - .on('click', function(d) { - d3.event.preventDefault(); - var num = parseInt(input.node().value || 0, 10); - if (!isNaN(num)) input.node().value = num + d; - change()(); - }); + var spinControl = selection.selectAll('.spin-control') + .data([0]); + + var enter = spinControl.enter().append('div') + .attr('class', 'spin-control'); + + enter.append('button') + .datum(1) + .attr('class', 'increment') + .attr('tabindex', -1); + + enter.append('button') + .datum(-1) + .attr('class', 'decrement') + .attr('tabindex', -1); + + spinControl.selectAll('button') + .on('click', function(d) { + d3.event.preventDefault(); + var num = parseInt(input.node().value || 0, 10); + if (!isNaN(num)) input.node().value = num + d; + change()(); + }); + } + + dispatch.init(); + isInitialized = true; } } @@ -58,12 +88,25 @@ iD.ui.preset.url = function(field) { }; } + i.entity = function(_) { + if (!arguments.length) return entity; + entity = _; + return i; + }; + i.tags = function(tags) { - input.value(tags[field.key] || ''); + if (isInitialized) { + input.value(tags[field.key] || ''); + } else { + dispatch.on('init', function () { + input.value(tags[field.key] || ''); + }); + } }; i.focus = function() { - input.node().focus(); + var node = input.node(); + if (node) node.focus(); }; return d3.rebind(i, dispatch, 'on');