Refactor icon element create and constrast

umap/static/umap/base.css

@@ -584,6 +584,8 @@ i.info {
     text-align: center;
     margin-bottom: 5px;
     display: block;
+    color: black;
+    font-weight: bold;
 }
 .umap-pictogram-choice img {
     vertical-align: middle;

umap/static/umap/js/umap.browser.js

@@ -13,7 +13,7 @@ L.U.Browser = L.Class.extend({
       zoom_to = L.DomUtil.create('i', 'feature-zoom_to', feature_li),
       edit = L.DomUtil.create('i', 'show-on-edit feature-edit', feature_li),
       del = L.DomUtil.create('i', 'show-on-edit feature-delete', feature_li),
-      color = L.DomUtil.create('i', 'feature-color', feature_li),
+      colorBox = L.DomUtil.create('i', 'feature-color', feature_li),
       title = L.DomUtil.create('span', 'feature-title', feature_li),
       symbol = feature._getIconUrl
         ? L.U.Icon.prototype.formatUrl(feature._getIconUrl(), feature)
@@ -22,8 +22,12 @@ L.U.Browser = L.Class.extend({
     edit.title = L._('Edit this feature')
     del.title = L._('Delete this feature')
     title.textContent = feature.getDisplayName() || '—'
-    color.style.backgroundColor = feature.getOption('color')
+    const bgcolor = feature.getOption('color')
-    if (symbol) color.style.backgroundImage = `url(${symbol})`
+    colorBox.style.backgroundColor = bgcolor
+    if (symbol && symbol !== this.map.options.default_iconUrl) {
+      const icon = L.U.Icon.makeIconElement(symbol, colorBox)
+      L.U.Icon.setIconContrast(icon, colorBox, symbol, bgcolor)
+    }
     L.DomEvent.on(
       zoom_to,
       'click',

umap/static/umap/js/umap.forms.js

@@ -597,13 +597,6 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
     this.body.innerHTML = ''
   },
 
-  isImg: function () {
-    const value = this.value()
-    return (
-      L.Util.isPath(value) || L.Util.isRemoteUrl(value) || L.Util.isDataImage(value)
-    )
-  },
-
   updatePreview: function () {
     this.buttons.innerHTML = ''
     if (this.isDefault()) return
@@ -611,13 +604,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
       // Do not try to render URL with variables
       const box = L.DomUtil.create('div', 'umap-pictogram-choice', this.buttons)
       L.DomEvent.on(box, 'click', this.onDefine, this)
-      if (this.isImg()) {
+      const icon = L.U.Icon.makeIconElement(this.value(), box)
-        const img = L.DomUtil.create('img', '', box)
-        img.src = this.value()
-      } else {
-        const el = L.DomUtil.create('span', '', box)
-        el.textContent = this.value()
-      }
     }
     this.button = L.DomUtil.createButton(
       'button action-button',
@@ -717,7 +704,7 @@ L.FormBuilder.IconUrl = L.FormBuilder.BlurInput.extend({
 
   showCharsTab: function () {
     this.openTab('chars')
-    const value = !this.isImg() ? this.value() : null
+    const value = !L.U.Icon.isImg(this.value()) ? this.value() : null
     const input = this.buildInput(this.body, value)
     input.placeholder = L._('Type char or paste emoji')
     input.type = 'text'

umap/static/umap/js/umap.icon.js

@@ -67,15 +67,8 @@ L.U.Icon.Default = L.U.Icon.extend({
 
   onAdd: function () {
     const src = this._getIconUrl('icon')
-    // Decide whether to switch svg to white or not, but do it
+    const bgcolor = this._getColor()
-    // only for internal SVG, as invert could do weird things
+    L.U.Icon.setIconContrast(this.elements.icon, this.elements.container, src, bgcolor)
-    if (src.startsWith('/') && src.endsWith('.svg')) {
-      const bgcolor = this._getColor()
-      // Must be called after icon container is added to the DOM
-      if (L.DomUtil.contrastedColor(this.elements.container, bgcolor)) {
-        this.elements.img.style.filter = 'invert(1)'
-      }
-    }
   },
 
   createIcon: function () {
@@ -89,18 +82,7 @@ L.U.Icon.Default = L.U.Icon.extend({
     this.elements.arrow = L.DomUtil.create('div', 'icon_arrow', this.elements.main)
     const src = this._getIconUrl('icon')
     if (src) {
-      // An url.
+      this.elements.icon = L.U.Icon.makeIconElement(src, this.elements.container)
-      if (
-        src.startsWith('http') ||
-        src.startsWith('/') ||
-        src.startsWith('data:image')
-      ) {
-        this.elements.img = L.DomUtil.create('img', null, this.elements.container)
-        this.elements.img.src = src
-      } else {
-        this.elements.span = L.DomUtil.create('span', null, this.elements.container)
-        this.elements.span.textContent = src
-      }
     }
     this._setIconStyles(this.elements.main, 'icon')
     return this.elements.main
@@ -208,3 +190,44 @@ L.U.Icon.Cluster = L.DivIcon.extend({
     return color || L.DomUtil.TextColorFromBackgroundColor(el, backgroundColor)
   },
 })
+
+L.U.Icon.isImg = function (src) {
+  return L.Util.isPath(src) || L.Util.isRemoteUrl(src) || L.Util.isDataImage(src)
+}
+
+L.U.Icon.makeIconElement = function (src, parent) {
+  let icon
+  if (L.U.Icon.isImg(src)) {
+    icon = L.DomUtil.create('img')
+    icon.src = src
+  } else {
+    icon = L.DomUtil.create('span')
+    icon.textContent = src
+  }
+  parent.appendChild(icon)
+  return icon
+}
+
+L.U.Icon.setIconContrast = function (el, parent, src, bgcolor) {
+  /*
+   * el: the element we'll adapt the style, it can be an image or text
+   * parent: the element we'll consider to decide whether to adapt the style,
+   * by looking at its background color
+   * src: the raw "icon" value, can be an URL, a path, text, emoticon, etc.
+   * bgcolor: the background color, used for caching and in case we cannot guess the
+   * parent background color
+   */
+
+  if (L.DomUtil.contrastedColor(parent, bgcolor)) {
+    // Decide whether to switch svg to white or not, but do it
+    // only for internal SVG, as invert could do weird things
+    if (L.Util.isPath(src) && src.endsWith('.svg')) {
+      // Must be called after icon container is added to the DOM
+      // An image
+      el.style.filter = 'invert(1)'
+    } else if (!el.src) {
+      // Text icon
+      el.style.color = 'white'
+    }
+  }
+}

umap/static/umap/js/umap.popup.js

@@ -270,24 +270,9 @@ L.U.PopupTemplate.OSM = L.U.PopupTemplate.Default.extend({
     const color = this.feature.getDynamicOption('color')
     title.style.backgroundColor = color
     const iconUrl = this.feature.getDynamicOption('iconUrl')
-    let icon
+    let icon = L.U.Icon.makeIconElement(iconUrl, title)
-    if (
+    L.U.Icon.setIconContrast(icon, title, iconUrl, color)
-      L.Util.isPath(iconUrl) ||
+    if (L.DomUtil.contrastedColor(title, color)) title.style.color = 'white'
-      L.Util.isRemoteUrl(iconUrl) ||
-      L.Util.isDataImage(iconUrl)
-    ) {
-      icon = L.DomUtil.add('img', 'popup-icon', title)
-      icon.src = iconUrl
-    } else {
-      icon = L.DomUtil.add('span', 'popup-icon', title)
-      icon.textContent = iconUrl
-    }
-    if (L.DomUtil.contrastedColor(title, color)) {
-      if (L.Util.isPath(iconUrl) && iconUrl.endsWith('.svg')) {
-        icon.style.filter = 'invert(1)'
-      }
-      title.style.color = 'white'
-    }
     L.DomUtil.add('span', '', title, this.getName())
     const street = props['addr:street']
     if (street) {

umap/static/umap/map.css

@@ -1010,29 +1010,36 @@ a.add-datalayer:hover,
     background-color: #f8f8f3;
 }
 .umap-browse-features .feature-color {
-    box-shadow: 0 0 4px 0 black inset;
+    box-shadow: 0 0 2px 0 black inset;
-    background-size: 70% 70%;
-    border: 4px solid #f8f8f3;
     cursor: inherit;
     -moz-box-sizing:border-box;
     -webkit-box-sizing:border-box;
     box-sizing: border-box;
-    background-position: center;
+    background: none;
     display: inline-block;
     padding: 0;
     width: 24px;
+    text-align: center;
+    margin-left: 5px;
+}
+.umap-browse-features .feature-color img {
+    width: 24px;
+}
+.umap-browse-features .feature-color span {
+    font-style: normal;
+    font-weight: bold;
 }
 .umap-browse-features .polygon .feature-color,
 .umap-browse-features .polyline .feature-color {
-    box-shadow: 0 0 4px 0 black inset;
+    box-shadow: 0 0 2px 0 black inset;
     background-image: url('./img/24.svg');
     background-size: 500%;
 }
 .umap-browse-features .polyline .feature-color {
-    background-position: -48px -16px;
+    background-position: -72px -23px;
 }
 .umap-browse-features .polygon .feature-color {
-    background-position: -32px -16px;
+    background-position: -48px -25px;
 }
 .show-on-edit {
     display: none!important;
@@ -1379,7 +1386,6 @@ span.popup-icon {
 .umap-div-icon .icon_container span,
 .umap-drop-icon .icon_container span {
     vertical-align: middle;
-    color: white;
     font-weight: bold;
 }
 .umap-circle-icon {