From 76e605568e219eb9868a074daf4f9c0d018205ff Mon Sep 17 00:00:00 2001 From: Bryan Housel Date: Fri, 4 Aug 2017 17:45:47 -0400 Subject: [PATCH] WIP: refactor bridge/tunnel layer field to use uiField --- data/presets.yaml | 2 + data/presets/fields.json | 5 +- data/presets/fields/layer.json | 7 +- dist/locales/en.json | 3 +- modules/ui/fields/radio.js | 314 ++++++++++++++++++--------------- 5 files changed, 184 insertions(+), 147 deletions(-) diff --git a/data/presets.yaml b/data/presets.yaml index 9b503802e..8ad29bdbf 100644 --- a/data/presets.yaml +++ b/data/presets.yaml @@ -634,6 +634,8 @@ en: layer: # layer=* label: Layer + # layer field placeholder + placeholder: '0' leaf_cycle: # leaf_cycle=* label: Leaf Cycle diff --git a/data/presets/fields.json b/data/presets/fields.json index ead82bb63..2f6ce6767 100644 --- a/data/presets/fields.json +++ b/data/presets/fields.json @@ -883,8 +883,9 @@ }, "layer": { "key": "layer", - "type": "combo", - "label": "Layer" + "type": "number", + "label": "Layer", + "placeholder": "0" }, "leaf_cycle_singular": { "key": "leaf_cycle", diff --git a/data/presets/fields/layer.json b/data/presets/fields/layer.json index d66d60c0a..29039f46a 100644 --- a/data/presets/fields/layer.json +++ b/data/presets/fields/layer.json @@ -1,5 +1,6 @@ { "key": "layer", - "type": "combo", - "label": "Layer" -} \ No newline at end of file + "type": "number", + "label": "Layer", + "placeholder": "0" +} diff --git a/dist/locales/en.json b/dist/locales/en.json index 39d7c52c7..18d65d682 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -1624,7 +1624,8 @@ "placeholder": "1, 2, 3..." }, "layer": { - "label": "Layer" + "label": "Layer", + "placeholder": "0" }, "leaf_cycle_singular": { "label": "Leaf Cycle", diff --git a/modules/ui/fields/radio.js b/modules/ui/fields/radio.js index eca522493..17db4e6cb 100644 --- a/modules/ui/fields/radio.js +++ b/modules/ui/fields/radio.js @@ -1,11 +1,12 @@ import * as d3 from 'd3'; import { t } from '../../util/locale'; -import { d3combobox } from '../../lib/d3.combobox.js'; -import { services } from '../../services/index'; +// import { d3combobox } from '../../lib/d3.combobox.js'; +// import { services } from '../../services'; +import { uiField } from '../field'; import { utilGetSetValue, - utilNoAuto, + // utilNoAuto, utilRebind } from '../../util'; @@ -15,13 +16,14 @@ export { uiFieldRadio as uiFieldStructureRadio }; export function uiFieldRadio(field, context) { var dispatch = d3.dispatch('change'), - taginfo = services.taginfo, + // taginfo = services.taginfo, placeholder = d3.select(null), wrap = d3.select(null), labels = d3.select(null), radios = d3.select(null), - typeInput = d3.select(null), - layerInput = d3.select(null), + // typeInput = d3.select(null), + // layerInput = d3.select(null), + layerField, oldType = {}, entity; @@ -32,31 +34,31 @@ export function uiFieldRadio(field, context) { return !node.empty() && node.datum(); } - // returns the tag value for a display value - function tagValue(dispVal) { - dispVal = snake(clean(dispVal || '')); - return dispVal.toLowerCase() || 'yes'; - } + // // returns the tag value for a display value + // function tagValue(dispVal) { + // dispVal = snake(clean(dispVal || '')); + // return dispVal.toLowerCase() || 'yes'; + // } - // returns the display value for a tag value - function displayValue(tagVal) { - tagVal = tagVal || ''; - return tagVal.toLowerCase() === 'yes' ? '' : unsnake(tagVal); - } + // // returns the display value for a tag value + // function displayValue(tagVal) { + // tagVal = tagVal || ''; + // return tagVal.toLowerCase() === 'yes' ? '' : unsnake(tagVal); + // } - function snake(s) { - return s.replace(/\s+/g, '_'); - } + // function snake(s) { + // return s.replace(/\s+/g, '_'); + // } - function unsnake(s) { - return s.replace(/_+/g, ' '); - } + // function unsnake(s) { + // return s.replace(/_+/g, ' '); + // } - function clean(s) { - return s.split(';') - .map(function(s) { return s.trim(); }) - .join(';'); - } + // function clean(s) { + // return s.split(';') + // .map(function(s) { return s.trim(); }) + // .join(';'); + // } function radio(selection) { @@ -101,10 +103,11 @@ export function uiFieldRadio(field, context) { radios = labels.selectAll('input') .on('change', changeRadio); + } - function structureExtras(selection) { + function structureExtras(selection, tags) { var selected = selectedKey(); var extrasWrap = selection.selectAll('.structure-extras-wrap') @@ -118,152 +121,183 @@ export function uiFieldRadio(field, context) { .attr('class', 'structure-extras-wrap') .merge(extrasWrap); - var list = extrasWrap.selectAll('ul') - .data([0]); + // var list = extrasWrap.selectAll('ul') + // .data([0]); - list = list.enter() - .append('ul') - .merge(list); + // list = list.enter() + // .append('ul') + // .merge(list); - // Type - var typeItem = list.selectAll('.structure-type-item') - .data([0]); + // // Type + // var typeItem = list.selectAll('.structure-type-item') + // .data([0]); - var typeEnter = typeItem.enter() - .append('li') - .attr('class', 'cf structure-type-item'); + // var typeEnter = typeItem.enter() + // .append('li') + // .attr('class', 'cf structure-type-item'); - typeEnter - .append('span') - .attr('class', 'col6 label structure-label-type') - .attr('for', 'structure-input-type') - .text(t('inspector.radio.structure.type')); + // typeEnter + // .append('span') + // .attr('class', 'col6 label structure-label-type') + // .attr('for', 'structure-input-type') + // .text(t('inspector.radio.structure.type')); - typeEnter - .append('div') - .attr('class', 'col6 structure-input-type-wrap') - .append('input') - .attr('type', 'text') - .attr('class', 'structure-input-type') - .attr('placeholder', t('inspector.radio.structure.default')) - .call(utilNoAuto); + // typeEnter + // .append('div') + // .attr('class', 'col6 structure-input-type-wrap') + // .append('input') + // .attr('type', 'text') + // .attr('class', 'structure-input-type') + // .attr('placeholder', t('inspector.radio.structure.default')) + // .call(utilNoAuto); - typeItem = typeItem - .merge(typeEnter); + // typeItem = typeItem + // .merge(typeEnter); - typeInput = typeItem.selectAll('.structure-input-type'); + // typeInput = typeItem.selectAll('.structure-input-type'); - if (taginfo) { - typeInput - .call(d3combobox() - .container(context.container()) - .fetcher(typeFetcher) - ); - } + // if (taginfo) { + // typeInput + // .call(d3combobox() + // .container(context.container()) + // .fetcher(typeFetcher) + // ); + // } - typeInput - .on('change', changeType) - .on('blur', changeType); + // typeInput + // .on('change', changeType) + // .on('blur', changeType); // Layer var showLayer = (selected === 'bridge' || selected === 'tunnel'); + if (!layerField) { + var field = context.presets().field('layer'); + layerField = uiField(context, field, entity, true) + .on('change', changeLayer); + } - var layerItem = list.selectAll('.structure-layer-item') - .data(showLayer ? [0] : []); + layerField.tags(tags); + + var layerItem = extrasWrap.selectAll('.structure-layer-item') + .data(layerField && showLayer ? [0] : []); + + // Exit layerItem.exit() .remove(); + // Enter var layerEnter = layerItem.enter() - .append('li') + .append('div') .attr('class', 'cf structure-layer-item'); - layerEnter - .append('span') - .attr('class', 'col6 label structure-label-layer') - .attr('for', 'structure-input-layer') - .text(t('inspector.radio.structure.layer')); - - layerEnter - .append('div') - .attr('class', 'col6 structure-input-layer-wrap') - .append('input') - .attr('type', 'text') - .attr('class', 'structure-input-layer') - .attr('placeholder', '0') - .call(utilNoAuto); - - var spin = layerEnter - .append('div') - .attr('class', 'spin-control'); - - spin - .append('button') - .datum(-1) - .attr('class', 'decrement') - .attr('tabindex', -1); - - spin - .append('button') - .datum(1) - .attr('class', 'increment') - .attr('tabindex', -1); - + // Update layerItem = layerItem .merge(layerEnter); - layerInput = layerItem.selectAll('.structure-input-layer') - .on('change', changeLayer) - .on('blur', changeLayer); + layerItem + .call(layerField.render); - layerItem.selectAll('button') - .on('click', function(d) { - d3.event.preventDefault(); - var num = parseInt(layerInput.node().value || 0, 10); - if (!isNaN(num)) layerInput.node().value = num + d; - changeLayer(); - }); + + // var layerItem = list.selectAll('.structure-layer-item') + // .data(showLayer ? [0] : []); + + // layerItem.exit() + // .remove(); + + // var layerEnter = layerItem.enter() + // .append('li') + // .attr('class', 'cf structure-layer-item'); + + // layerEnter + // .append('span') + // .attr('class', 'col6 label structure-label-layer') + // .attr('for', 'structure-input-layer') + // .text(t('inspector.radio.structure.layer')); + + // layerEnter + // .append('div') + // .attr('class', 'col6 structure-input-layer-wrap') + // .append('input') + // .attr('type', 'text') + // .attr('class', 'structure-input-layer') + // .attr('placeholder', '0') + // .call(utilNoAuto); + + // var spin = layerEnter + // .append('div') + // .attr('class', 'spin-control'); + + // spin + // .append('button') + // .datum(-1) + // .attr('class', 'decrement') + // .attr('tabindex', -1); + + // spin + // .append('button') + // .datum(1) + // .attr('class', 'increment') + // .attr('tabindex', -1); + + // layerItem = layerItem + // .merge(layerEnter); + + // layerInput = layerItem.selectAll('.structure-input-layer') + // .on('change', changeLayer) + // .on('blur', changeLayer); + + // layerItem.selectAll('button') + // .on('click', function(d) { + // d3.event.preventDefault(); + // var num = parseInt(layerInput.node().value || 0, 10); + // if (!isNaN(num)) layerInput.node().value = num + d; + // changeLayer(); + // }); } - function typeFetcher(q, callback) { - taginfo.values({ - debounce: true, - key: selectedKey(), - query: q - }, function(err, data) { - if (err) return; - var comboData = data.map(function(d) { - return { - key: d.value, - value: unsnake(d.value), - title: d.title - }; - }); - if (callback) callback(comboData); - }); - } + // function typeFetcher(q, callback) { + // taginfo.values({ + // debounce: true, + // key: selectedKey(), + // query: q + // }, function(err, data) { + // if (err) return; + // var comboData = data.map(function(d) { + // return { + // key: d.value, + // value: unsnake(d.value), + // title: d.title + // }; + // }); + // if (callback) callback(comboData); + // }); + // } - function changeType() { - var key = selectedKey(), - t = {}; + // function changeType() { + // var key = selectedKey(), + // t = {}; - if (!key) return; - var val = tagValue(utilGetSetValue(typeInput)); - t[key] = val; - if (val !== 'no') oldType[key] = val; - dispatch.call('change', this, t); - } + // if (!key) return; + // var val = tagValue(utilGetSetValue(typeInput)); + // t[key] = val; + // if (val !== 'no') oldType[key] = val; + // dispatch.call('change', this, t); + // } - function changeLayer() { + function changeLayer(t, onInput) { // note: don't use utilGetSetValue here because we want 0 to be falsy. - var t = { layer: layerInput.node().value || undefined }; - dispatch.call('change', this, t); + // var t = { layer: layerInput.node().value || undefined }; + if (t.layer === '0') { + t.layer = undefined; + } + dispatch.call('change', this, t, onInput); } @@ -324,9 +358,7 @@ export function uiFieldRadio(field, context) { } if (field.type === 'structureRadio') { - wrap.call(structureExtras); - utilGetSetValue(typeInput, displayValue(typeVal) || ''); - utilGetSetValue(layerInput, tags.layer || ''); + wrap.call(structureExtras, tags); } };