Merge pull request #1835 from umap-project/classif-to-toggle

chore: replace DomUtil.classIf by classList.toggle

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

@@ -87,7 +87,7 @@ export default class Browser {
     const parent = DomUtil.get(this.datalayerId(datalayer))
     // Panel is not open
     if (!parent) return
-    DomUtil.classIf(parent, 'off', !datalayer.isVisible())
+    parent.classList.toggle('off', !datalayer.isVisible())
     const container = parent.querySelector('ul')
     const headline = parent.querySelector('h5')
     const toggleList = () => parent.classList.toggle('show-list')

umap/static/umap/js/umap.controls.js

@@ -614,8 +614,8 @@ U.DataLayer.include({
     }
     L.DomEvent.on(toggle, 'click', this.toggle, this)
     L.DomEvent.on(zoomTo, 'click', this.zoomTo, this)
-    L.DomUtil.addClass(container, this.getHidableClass())
-    L.DomUtil.classIf(container, 'off', !this.isVisible())
+    container.classList.add(this.getHidableClass())
+    container.classList.toggle('off', !this.isVisible())
   },
 
   getHidableElements: function () {
@@ -628,8 +628,8 @@ U.DataLayer.include({
 
   propagateRemote: function () {
     const els = this.getHidableElements()
-    for (let i = 0; i < els.length; i++) {
-      L.DomUtil.classIf(els[i], 'remotelayer', this.isRemoteLayer())
+    for (const el of els) {
+      el.classList.toggle('remotelayer', this.isRemoteLayer())
     }
   },
 
@@ -820,7 +820,7 @@ const ControlsMixin = {
       L.DomUtil.createIcon(row, 'icon-drag', L._('Drag to reorder'))
       datalayer.renderToolbox(row)
       const title = L.DomUtil.add('span', '', row, datalayer.options.name)
-      L.DomUtil.classIf(row, 'off', !datalayer.isVisible())
+      row.classList.toggle('off', !datalayer.isVisible())
       title.textContent = datalayer.options.name
       row.dataset.id = L.stamp(datalayer)
     })

umap/static/umap/js/umap.core.js

@@ -162,11 +162,6 @@ L.DomUtil.createCopiableInput = (parent, label, value) => {
   return input
 }
 
-L.DomUtil.classIf = (el, className, bool) => {
-  if (bool) L.DomUtil.addClass(el, className)
-  else L.DomUtil.removeClass(el, className)
-}
-
 L.DomUtil.element = ({ tagName, parent, ...attrs }) => {
   const el = document.createElement(tagName)
   if (attrs.innerHTML) {

umap/static/umap/js/umap.js

@@ -390,17 +390,10 @@ U.Map = L.Map.extend({
   },
 
   renderControls: function () {
-    L.DomUtil.classIf(
-      document.body,
-      'umap-caption-bar-enabled',
-      this.options.captionBar ||
-        (this.options.slideshow && this.options.slideshow.active)
-    )
-    L.DomUtil.classIf(
-      document.body,
-      'umap-slideshow-enabled',
-      this.options.slideshow && this.options.slideshow.active
-    )
+    const hasSlideshow = Boolean(this.options.slideshow && this.options.slideshow.active)
+    const barEnabled = this.options.captionBar || hasSlideshow
+    document.body.classList.toggle('umap-caption-bar-enabled', barEnabled)
+    document.body.classList.toggle('umap-slideshow-enabled', hasSlideshow)
     for (const control of Object.values(this._controls)) {
       this.removeControl(control)
     }
@@ -968,7 +961,7 @@ U.Map = L.Map.extend({
   },
 
   checkDirty: function () {
-    L.DomUtil.classIf(this._container, 'umap-is-dirty', this.isDirty)
+    this._container.classList.toggle('umap-is-dirty', this.isDirty)
   },
 
   addDirtyDatalayer: function (datalayer) {

umap/static/umap/js/umap.layer.js

@@ -863,7 +863,7 @@ U.DataLayer = L.Evented.extend({
   },
 
   isRemoteLayer: function () {
-    return !!(
+    return Boolean(
       this.options.remoteData &&
       this.options.remoteData.url &&
       this.options.remoteData.format
@@ -1528,7 +1528,7 @@ U.DataLayer = L.Evented.extend({
   },
 
   isVisible: function () {
-    return this.layer && this.map.hasLayer(this.layer)
+    return Boolean(this.layer && this.map.hasLayer(this.layer))
   },
 
   getFeatureByIndex: function (index) {