CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-14 21:28:11 +02:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'colour-preview' into develop

Browse Source
This commit is contained in:
Martin Raifer
2021-12-01 12:16:42 +01:00
parent 5761f53c41 e4008b4229
commit a3e65e553b
4 changed files with 95 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/ui/fields/input.js
+61 -1
View File
@@ -1,5 +1,6 @@
import { dispatch as d3_dispatch } from 'd3-dispatch';
import { select as d3_select } from 'd3-selection';
import _debounce from 'lodash-es/debounce';
import * as countryCoder from '@ideditor/country-coder';
import { presetManager } from '../../presets';
@@ -21,6 +22,7 @@ export function uiFieldText(field, context) {
var dispatch = d3_dispatch('change');
var input = d3_select(null);
var outlinkButton = d3_select(null);
var wrap = d3_select(null);
var _entityIDs = [];
var _tags;
var _phoneFormats = {};
@@ -62,7 +64,7 @@ export function uiFieldText(field, context) {
calcLocked();
var isLocked = field.locked();
var wrap = selection.selectAll('.form-field-input-wrap')
wrap = selection.selectAll('.form-field-input-wrap')
.data([0]);
wrap = wrap.enter()
@@ -167,9 +169,65 @@ export function uiFieldText(field, context) {
if (value) window.open(value, '_blank');
})
.merge(outlinkButton);
} else if (field.key.split(':').includes('colour')) {
input.attr('type', 'text');
updateColourPreview();
}
}
function isColourValid(colour) {
if (!colour.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
// OSM only supports hex or named colors
return false;
} else if (!CSS.supports('color', colour) || ['unset', 'inherit', 'initial', 'revert'].includes(colour)) {
// see https://stackoverflow.com/a/68217760/1627467
return false;
}
return true;
}
function updateColourPreview() {
wrap.selectAll('.colour-preview')
.remove();
const colour = utilGetSetValue(input);
if (!isColourValid(colour) && colour !== '') return;
var colourSelector = wrap.selectAll('.colour-selector')
.data([0]);
outlinkButton = wrap.selectAll('.colour-preview')
.data([colour]);
colourSelector
.enter()
.append('input')
.attr('type', 'color')
.attr('class', 'form-field-button colour-selector')
.attr('value', colour)
.on('input', _debounce(function(d3_event) {
d3_event.preventDefault();
var colour = this.value;
if (!isColourValid(colour)) return;
utilGetSetValue(input, this.value);
change()();
updateColourPreview();
}, 100));
outlinkButton = outlinkButton
.enter()
.append('div')
.attr('class', 'form-field-button colour-preview')
.append('div')
.style('background-color', d => d)
.attr('class', 'colour-box');
if (colour === '') outlinkButton = outlinkButton
.call(svgIcon('#iD-icon-edit'));
outlinkButton
.on('click', () => wrap.select('.colour-selector').node().click())
.merge(outlinkButton);
}
function updatePhonePlaceholder() {
if (input.empty() || !Object.keys(_phoneFormats).length) return;
@@ -253,6 +311,8 @@ export function uiFieldText(field, context) {
.attr('placeholder', isMixed ? t('inspector.multiple_values') : (field.placeholder() || t('inspector.unknown')))
.classed('mixed', isMixed);
if (field.key.split(':').includes('colour')) updateColourPreview();
if (outlinkButton && !outlinkButton.empty()) {
var disabled = !validIdentifierValueForLink();
outlinkButton.classed('disabled', disabled);