mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-13 01:02:58 +00:00
only render route colours if the value is a valid color
addresses https://github.com/openstreetmap/iD/pull/9424#discussion_r1046495633
This commit is contained in:
@@ -245,3 +245,16 @@ export var osmFlowingWaterwayTagValues = {
|
||||
|
||||
// Tags which values should be considered case sensitive when offering tag suggestions
|
||||
export const allowUpperCaseTagValues = /network|taxon|genus|species|brand|grape_variety|royal_cypher|listed_status|booth|rating|stars|:output|_hours|_times|_ref|manufacturer|country|target|brewery|cai_scale|traffic_sign/;
|
||||
|
||||
// Returns whether a `colour` tag value looks like a valid color we can display
|
||||
export function isColourValid(value) {
|
||||
if (!value.match(/^(#([0-9a-fA-F]{3}){1,2}|\w+)$/)) {
|
||||
// OSM only supports hex or named colors
|
||||
return false;
|
||||
}
|
||||
if (!CSS.supports('color', value) || ['unset', 'inherit', 'initial', 'revert'].includes(value)) {
|
||||
// see https://stackoverflow.com/a/68217760/1627467
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
|
||||
@@ -11,6 +11,7 @@ import { geoSphericalDistance } from '../geo/geo';
|
||||
import { geoExtent } from '../geo';
|
||||
import { modeSelect } from '../modes/select';
|
||||
import { osmEntity } from '../osm/entity';
|
||||
import { isColourValid } from '../osm/tags';
|
||||
import { services } from '../services';
|
||||
import { svgIcon } from '../svg/icon';
|
||||
import { uiCmd } from './cmd';
|
||||
@@ -310,7 +311,7 @@ export function uiFeatureList(context) {
|
||||
label
|
||||
.append('span')
|
||||
.attr('class', 'entity-name')
|
||||
.classed('has-colour', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour)
|
||||
.classed('has-colour', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour && isColourValid(d.entity.tags.colour))
|
||||
.style('border-color', d => d.entity && d.entity.type === 'relation' && d.entity.tags.colour)
|
||||
.text(function(d) { return d.name; });
|
||||
|
||||
|
||||
@@ -9,6 +9,7 @@ import { t, localizer } from '../../core/localizer';
|
||||
import { utilDetect, utilGetSetValue, utilNoAuto, utilRebind, utilTotalExtent } from '../../util';
|
||||
import { svgIcon } from '../../svg/icon';
|
||||
import { cardinal } from '../../osm/node';
|
||||
import { isColourValid } from '../../osm/tags';
|
||||
import { uiLengthIndicator } from '..';
|
||||
import { uiTooltip } from '../tooltip';
|
||||
import { isEqual } from 'lodash-es';
|
||||
@@ -228,16 +229,6 @@ export function uiFieldText(field, context) {
|
||||
|
||||
|
||||
function 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;
|
||||
}
|
||||
wrap.selectAll('.colour-preview')
|
||||
.remove();
|
||||
|
||||
|
||||
@@ -11,6 +11,7 @@ import { actionMoveMember } from '../../actions/move_member';
|
||||
import { modeBrowse } from '../../modes/browse';
|
||||
import { modeSelect } from '../../modes/select';
|
||||
import { osmEntity } from '../../osm';
|
||||
import { isColourValid } from '../../osm/tags';
|
||||
import { svgIcon } from '../../svg/icon';
|
||||
import { services } from '../../services';
|
||||
import { uiCombobox } from '../combobox';
|
||||
@@ -198,7 +199,7 @@ export function uiSectionRawMemberEditor(context) {
|
||||
labelLink
|
||||
.append('span')
|
||||
.attr('class', 'member-entity-name')
|
||||
.classed('has-colour', d => d.member.type === 'relation' && d.member.tags.colour)
|
||||
.classed('has-colour', d => d.member.type === 'relation' && d.member.tags.colour && isColourValid(d.member.tags.colour))
|
||||
.style('border-color', d => d.member.type === 'relation' && d.member.tags.colour)
|
||||
.text(function(d) { return utilDisplayName(d.member); });
|
||||
|
||||
|
||||
@@ -12,6 +12,7 @@ import { actionDeleteMembers } from '../../actions/delete_members';
|
||||
|
||||
import { modeSelect } from '../../modes/select';
|
||||
import { osmEntity, osmRelation } from '../../osm';
|
||||
import { isColourValid } from '../../osm/tags';
|
||||
import { services } from '../../services';
|
||||
import { svgIcon } from '../../svg/icon';
|
||||
import { uiCombobox } from '../combobox';
|
||||
@@ -258,7 +259,7 @@ export function uiSectionRawMembershipEditor(context) {
|
||||
.text(presetName + ' ');
|
||||
selection
|
||||
.append('span')
|
||||
.classed('has-colour', entity.tags.colour)
|
||||
.classed('has-colour', entity.tags.colour && isColourValid(entity.tags.colour))
|
||||
.style('border-color', entity.tags.colour)
|
||||
.text(entityName);
|
||||
};
|
||||
@@ -371,7 +372,7 @@ export function uiSectionRawMembershipEditor(context) {
|
||||
labelLink
|
||||
.append('span')
|
||||
.attr('class', 'member-entity-name')
|
||||
.classed('has-colour', d => d.relation.tags.colour)
|
||||
.classed('has-colour', d => d.relation.tags.colour && isColourValid(d.relation.tags.colour))
|
||||
.style('border-color', d => d.relation.tags.colour)
|
||||
.text(function(d) { return utilDisplayName(d.relation); });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user