Skip to content

Commit

Permalink
Separate logic in another file: uiSourceSubfield
Browse files Browse the repository at this point in the history
  • Loading branch information
@pedromml
pedromml committed Jun 4, 2024
1 parent c3833ee commit 54811c8
Show file tree
Hide file tree
Showing 4 changed files with 181 additions and 181 deletions.
2 changes: 1 addition & 1 deletion data/core.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -800,7 +800,7 @@ en:
edtf_placeholder: 1849~, 1804?, 189X, 1906/1908, 1814-23, 1960-05-01T13:00...
field_source: Add Source
field_source_label: Source
field_source_placeholder: https://...
field_source_placeholder: URL, newspaper article, book...
max_length_reached: "This string is longer than the maximum length of {maxChars} characters. Anything exceeding that length will be truncated."
set_today: "Sets the value to today."
background:
Expand Down
189 changes: 9 additions & 180 deletions modules/ui/field.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,8 @@ import { geoExtent } from '../geo/extent';
import { uiFieldHelp } from './field_help';
import { uiFields } from './fields';
import { uiTagReference } from './tag_reference';
import { utilGetSetValue, utilRebind, utilUniqueDomId } from '../util';
import { utilRebind, utilUniqueDomId } from '../util';
import { uiSourceSubfield } from './source_subfield';


export function uiField(context, presetField, entityIDs, options) {
Expand All @@ -27,9 +28,6 @@ export function uiField(context, presetField, entityIDs, options) {
var _show = options.show;
var _state = '';
var _tags = {};
let sourceInput = d3_select(null);
let _sourceValue;
let sourceKey = field.key + ':source';

options.source = field.source !== undefined ? field.source : true;

Expand Down Expand Up @@ -129,150 +127,6 @@ export function uiField(context, presetField, entityIDs, options) {
dispatch.call('change', d, t);
}


function renderSourceInput(selection) {
console.log('renderSourceInput');
let entries = selection.selectAll('div.entry')
.data((typeof _sourceValue === 'string' || Array.isArray(_sourceValue)) ? [_sourceValue] : []);

entries.exit()
.style('top', '0')
.style('max-height', '240px')
.transition()
.duration(200)
.style('opacity', '0')
.style('max-height', '0px')
.remove();

let entriesEnter = entries.enter()
.append('div')
.attr('class', 'entry')
.each(function() {
var wrap = d3_select(this);

let domId = utilUniqueDomId('source-' + field.safeid);
let label = wrap
.append('label')
.attr('class', 'field-label')
.attr('for', domId);

let text = label
.append('span')
.attr('class', 'label-text');

text
.append('span')
.attr('class', 'label-textvalue')
.call(t.append('inspector.field_source_label'));

text
.append('span')
.attr('class', 'label-textannotation');

label
.append('button')
.attr('class', 'remove-icon-source') // 'remove-icon-edtf'
.attr('title', t('icons.remove'))
.on('click', function(d3_event) {
d3_event.preventDefault();

// remove the UI item manually
_sourceValue = undefined;

if (sourceKey && sourceKey in _tags) {
delete _tags[sourceKey];
// remove from entity tags
let t = {};
t[sourceKey] = undefined;
dispatch.call('change', this, t);
return;
}

renderSourceInput(selection);
})
.call(svgIcon('#iD-operation-delete'));

wrap
.append('input')
.attr('type', 'text')
.attr('class', 'field-source-value')
.on('blur', changeSourceValue)
.on('change', changeSourceValue);
});

entriesEnter
.style('margin-top', '0px')
.style('max-height', '0px')
.style('opacity', '0')
.transition()
.duration(200)
.style('margin-top', '10px')
.style('max-height', '240px')
.style('opacity', '1')
.on('end', function() {
d3_select(this)
.style('max-height', '')
.style('overflow', 'visible');
});

entries = entries.merge(entriesEnter);

entries.order();

// allow removing the entry UIs even if there isn't a tag to remove
entries.classed('present', true);

utilGetSetValue(entries.select('.field-source-value'), function(d) {
return typeof d === 'string' ? d : '';
})
.attr('title', function(d) {
return Array.isArray(d) ? d.filter(Boolean).join('\n') : null;
})
.attr('placeholder', function(d) {
return Array.isArray(d) ? t('inspector.multiple_values') : t('inspector.field_source_placeholder');
})
.classed('mixed', function(d) {
return Array.isArray(d);
});
}

function changeSourceValue(d3_event, d) {
console.log('changeSourceValue');
let value = context.cleanTagValue(utilGetSetValue(d3_select(this))) || undefined;
console.log('sourceTagValue');
console.log(value);
// don't override multiple values with blank string
if (!value && Array.isArray(d.value)) return;

let t = {};
t[sourceKey] = value;
d.value = value;
dispatch.call('change', this, t);
}

function addSource(d3_event, d) {
console.log('addSource');
d3_event.preventDefault();

if (typeof _sourceValue !== 'string' && !Array.isArray(_sourceValue)) {
_sourceValue = '';

sourceInput.call(renderSourceInput);
}

}

function calcSourceValue(tags) {
console.log('calcSourceValue');
if (_sourceValue && !tags[sourceKey]) {
// Don't unset the variable based on deleted tags, since this makes the UI
// disappear unexpectedly when clearing values - #8164
_sourceValue = '';
} else {
_sourceValue = tags[sourceKey];
}
}

field.render = function(selection) {
var container = selection.selectAll('.form-field')
.data([field]);
Expand Down Expand Up @@ -319,36 +173,22 @@ export function uiField(context, presetField, entityIDs, options) {
}
}

if(options.source){
let sourceButtonTip = uiTooltip()
.title(() => t.append('inspector.field_source'))
.placement('left');

labelEnter
.append('button')
.attr('class', 'source-icon')
.attr('title', 'source-button')
.call(sourceButtonTip)
.call(svgIcon('#iD-icon-note'));
}

if (_tags && _sourceValue === undefined) {
calcSourceValue(_tags);
}
var sourceSubfield = uiSourceSubfield(field, _tags, dispatch);

// Update
container = container
.merge(enter);
.merge(enter);

if(options.source){
sourceSubfield.button(labelEnter, container);
}

container.select('.field-label > .remove-icon') // propagate bound data
.on('click', remove);

container.select('.field-label > .modified-icon') // propagate bound data
.on('click', revert);

container.select('.field-label > .source-icon') // propagate bound data
.on('click', addSource);

container
.each(function(d) {
var selection = d3_select(this);
Expand Down Expand Up @@ -427,16 +267,7 @@ export function uiField(context, presetField, entityIDs, options) {
container.call(_locked ? _lockedTip : _lockedTip.destroy);

if(options.source){
sourceInput = selection.selectChild().selectAll('.field-source')
.data([0]);

sourceInput = sourceInput.enter()
.append('div')
.attr('class', 'field-source')
.merge(sourceInput);

sourceInput
.call(renderSourceInput);
sourceSubfield.body(selection);
}
};

Expand All @@ -460,8 +291,6 @@ export function uiField(context, presetField, entityIDs, options) {
}
}

calcSourceValue(_tags);

return field;
};

Expand Down
1 change: 1 addition & 0 deletions modules/ui/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,6 +49,7 @@ export { uiPresetList } from './preset_list';
export { uiRestore } from './restore';
export { uiScale } from './scale';
export { uiSidebar } from './sidebar';
export { uiSourceSubfield } from './source_subfield';
export { uiSourceSwitch } from './source_switch';
export { uiSpinner } from './spinner';
export { uiSplash } from './splash';
Expand Down
Loading

0 comments on commit 54811c8

Please sign in to comment.