@brightspot/ui 3.0.1-cms-ui-migration.2 → 3.0.1-cms-ui-migration.3

package/src/legacy/tool-ui/src/main/webapp/v4/PubSub.js

@@ -1,47 +0,0 @@
-// Taken from: https://davidwalsh.name/pubsub-javascript
-/**
- * A rudimentary Pub/Sub service.
- *
- * @example To Publish
- * PubSub.publish('/page/load', {
- *  url: '/some/url/path' // any argument
- * });
- * @example To Subscribe
- * events.subscribe('/page/load', function(obj) {
- *  console.log(obj)
- * });
- * @example To Unsubscribe
- * subscription.remove();
- */
-const PubSub = (function () {
-  let topics = {}
-  let hOP = topics.hasOwnProperty
-
-  return {
-    subscribe: function (topic, listener) {
-      // Create the topic's object if not yet created
-      if (!hOP.call(topics, topic)) topics[topic] = []
-
-      // Add the listener to queue
-      let index = topics[topic].push(listener) - 1
-
-      // Provide handle back for removal of topic
-      return {
-        remove: function () {
-          delete topics[topic][index]
-        },
-      }
-    },
-    publish: function (topic, info) {
-      // If the topic doesn't exist, or there's no listeners in queue, just leave
-      if (!hOP.call(topics, topic)) return
-
-      // Cycle through topics queue, fire!
-      topics[topic].forEach(function (item) {
-        item(info !== void 0 ? info : {})
-      })
-    },
-  }
-})()
-
-window.PubSub = PubSub

package/src/legacy/tool-ui/src/main/webapp/v4/QueryField.js

@@ -1,211 +0,0 @@
-/* eslint-disable no-debugger */
-/* global QF_STRING */
-/* global QF_VISIBILITIES */
-/* global QF_PUBLISH_DATE */
-/* global QF_PUBLISH_START */
-/* global QF_PUBLISH_END */
-/* global QF_CONJUNCTION */
-
-import onFind from './dom/onFind'
-import getZindex from '../script/v3/plugin/popup'
-
-function writeQueryString(queryField, queryToggle) {
-  if (queryField.querySelector('.Message.is-error')) {
-    return queryField.querySelector('.Message.is-error').textContent
-  }
-
-  const queryString = queryField.querySelector('.QueryField-keyword')
-  const currentQuery = queryField.querySelector(
-    '.QueryField-queryString',
-  ).textContent
-  let queryLabel = ''
-
-  if (queryString.textContent) {
-    queryLabel += '"' + queryString.textContent + '" ' + QF_STRING + ' '
-  }
-
-  let contentTypeLabel
-  let contentTypeLabelEl
-  const typeSelector = queryField.querySelector('.SearchWidget-type')
-  if (typeSelector.querySelector('.ComboInput-selected')) {
-    contentTypeLabelEl = typeSelector.querySelector('.ComboInput-selected')
-  } else if (typeSelector.querySelector('option[selected]')) {
-    contentTypeLabelEl = typeSelector.querySelector('option[selected]')
-  } else if (typeSelector.querySelector('select > option')) {
-    contentTypeLabelEl = typeSelector.querySelector('select > option')
-  } else if (queryField.querySelector('[data-selected-type-label]')) {
-    contentTypeLabel = queryField.querySelector('[data-selected-type-label]')
-      .dataset.selectedTypeLabel
-  } else {
-    contentTypeLabelEl = queryToggle
-      .closest('.CIG-row')
-      .querySelector('.CIG-label label')
-  }
-
-  queryLabel += contentTypeLabel
-    ? contentTypeLabel
-    : contentTypeLabelEl.textContent
-
-  const visibilities = queryField.querySelector(
-    '.SearchWidget-filter.searchFilter-visibilities',
-  )
-  const comboInputVisibilities = visibilities.querySelectorAll(
-    '.ComboInput-selected',
-  )
-  const selectVisibilities = visibilities.querySelectorAll(
-    'option[selected="selected"]',
-  )
-
-  if (
-    comboInputVisibilities.length > 0 ||
-    (selectVisibilities.length > 0 &&
-      !visibilities.querySelector('.ComboInput-label'))
-  ) {
-    queryLabel += ' ' + QF_VISIBILITIES + ' '
-    if (comboInputVisibilities.length > 0) {
-      comboInputVisibilities.forEach((label) => {
-        queryLabel += label.textContent + ', '
-      })
-    } else if (
-      // Before ComboInput is initialized (on page load), gets most recently saved selections.
-      selectVisibilities.length > 0 &&
-      !visibilities.querySelector('.ComboInput-label')
-    ) {
-      selectVisibilities.forEach((label) => {
-        queryLabel += label.textContent + ', '
-      })
-    }
-    queryLabel = queryLabel.substring(0, queryLabel.length - 2)
-  }
-
-  const publishDate = currentQuery.match(/cms.content.publishDate/)
-  if (publishDate) {
-    queryLabel += ' ' + QF_PUBLISH_DATE + ' '
-    const labelOptions = {
-      weekday: 'short',
-      year: 'numeric',
-      month: 'short',
-      day: 'numeric',
-      hour: 'numeric',
-      minute: 'numeric',
-    }
-    const startString = currentQuery.match(
-      /cms.content.publishDate greaterthanorequals \d+/,
-    )
-    const endString = currentQuery.match(
-      /cms.content.publishDate lessthanorequals \d+/,
-    )
-    if (startString) {
-      const startTime = startString[0].match(/\d+/)[0]
-      const convertedStart = new Date(parseInt(startTime))
-      queryLabel +=
-        QF_PUBLISH_START +
-        ' ' +
-        convertedStart.toLocaleString(undefined, labelOptions)
-    }
-    if (startString && endString) {
-      queryLabel += ' ' + QF_CONJUNCTION + ' '
-    }
-    if (endString) {
-      const endTime = endString[0].match(/\d+/)[0]
-      const convertedEnd = new Date(parseInt(endTime))
-      queryLabel +=
-        QF_PUBLISH_END +
-        ' ' +
-        convertedEnd.toLocaleString(undefined, labelOptions)
-    }
-  }
-
-  return queryLabel
-}
-
-function writeQueryElements(queryInstance) {
-  const queryToggle = document.createElement('div')
-  queryToggle.classList.add('QueryField-toggle')
-  // Associate the toggle and frame with each other by setting as properties.
-  queryToggle.frame = queryInstance.frame
-  queryInstance.frame.queryToggle = queryToggle
-
-  const queryIcon = document.createElement('span')
-  queryIcon.classList.add('QueryField-icon')
-
-  const queryLabel = document.createElement('span')
-  queryLabel.classList.add('QueryField-label')
-
-  const queryRow = queryInstance.closest('.CIG-row')
-  queryRow.appendChild(queryToggle)
-  queryToggle.appendChild(queryLabel)
-  queryToggle.appendChild(queryIcon)
-  queryToggle.label = queryLabel
-}
-
-onFind('.QueryField input', (loadingQuery) => {
-  loadingQuery.closest('.CIG.TC').classList.add('is-query')
-})
-
-// Kicks off setup of query toggle elements. Updates to the input element are returned from
-// Javascript embedded in QueryFieldResult.java servlet response as invoked from query.js.
-onFind('.QueryField input[data-initialized]', (activeQuery) => {
-  writeQueryElements(activeQuery.closest('.QueryField'))
-})
-
-// Updates query label as frame refreshes
-onFind('.QueryField-frame .SearchWidget-result.loaded', (innerFrame) => {
-  const queryFrame = innerFrame.closest('.QueryField-frame')
-  const queryToggle = queryFrame.queryToggle
-  if (queryToggle) {
-    queryToggle.label.textContent = writeQueryString(
-      innerFrame.closest('.widget-queryField'),
-      queryToggle,
-    )
-    if (queryToggle.closest('.QueryField-toggle.is-open')) {
-      innerFrame
-        .closest('.Popup.is-fromRight.popup-show')
-        .classList.add('is-visible')
-    }
-  }
-
-  queryFrame.style['z-index'] = getZindex()
-})
-
-// Closes popup and updates query label.
-onFind('.QueryField-button', (queryClose) => {
-  queryClose.addEventListener('click', (event) => {
-    event.preventDefault()
-    const queryFrame = queryClose.closest('.QueryField-frame')
-    const queryToggle = queryFrame.queryToggle
-    const queryField = queryClose.closest('.widget-queryField')
-    if (queryToggle) {
-      queryToggle.label.textContent = writeQueryString(queryField, queryToggle)
-      queryToggle.classList.remove('is-open')
-
-      const nearestCombo =
-        queryToggle.closest('.CIG-row')?.querySelector('.ComboInput') ||
-        queryToggle
-          .closest('.CIG-row')
-          ?.parentElement?.closest('.CIG-row')
-          ?.querySelector('.ComboInput')
-      nearestCombo?.focus()
-    }
-
-    queryClose.closest('.Popup').classList.remove('is-visible')
-    document
-      .querySelector('.QueryField-frame > .Popup')
-      .classList.remove('is-visible')
-  })
-})
-
-// Handles click event to open correct popup.
-onFind('.QueryField-toggle', (queryToggle) => {
-  queryToggle.addEventListener('click', () => {
-    const queryFrame = queryToggle.frame
-    queryToggle.classList.add('is-open')
-    const queryPopup = queryFrame.querySelector('.Popup.is-ready')
-    queryPopup.classList.add('is-visible')
-    queryPopup.querySelector('.SearchWidget-query input')?.focus()
-  })
-})
-
-onFind('.widget-queryField > .SearchWidget-title', (querySearchTitle) => {
-  querySearchTitle.textContent = 'Edit Dynamic Query'
-})

package/src/legacy/tool-ui/src/main/webapp/v4/RegionMap.js

@@ -1,215 +0,0 @@
-import 'leaflet/dist/leaflet.css'
-import 'leaflet-geosearch/assets/css/leaflet.css'
-import 'leaflet.locatecontrol'
-import 'leaflet-draw'
-import 'leaflet-draw/dist/leaflet.draw.css'
-import L from 'leaflet'
-import { GeoSearchControl, OpenStreetMapProvider } from 'leaflet-geosearch'
-import find from './dom/find'
-
-export default class RegionMap {
-  constructor(container) {
-    this._zoomInput = find(container, '.regionMapZoom')
-    this._centerInput = find(container, '.regionMapCenter')
-    this._geoJsonInput = find(container, '.regionMapGeoJson')
-
-    if (!this._zoomInput || !this._centerInput || !this._geoJsonInput) return
-
-    const center = JSON.parse(this._centerInput.value)
-    const geoJson = JSON.parse(this._geoJsonInput.value)
-
-    this._map = L.map(container, {
-      center,
-      zoom: parseFloat(this._zoomInput.value),
-      layers: [
-        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-          attribution:
-            '© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors',
-        }),
-      ],
-    })
-
-    this._regionLayer = new L.FeatureGroup()
-    this._map.addLayer(this._regionLayer)
-
-    const myStyle = {
-      color: '#3a87ad',
-      opacity: 1,
-      weight: 4,
-      fillColor: '#3a87ad',
-      fillOpacity: 0.5,
-    }
-
-    // Leaflet/GeoJSON doesn't support Circles, so convert to Leaflet Points for geometryToLayer()
-    if (geoJson.geometries) {
-      geoJson.geometries.forEach((geometry, index) => {
-        if (geometry.type === 'MultiPolygon') {
-          // Convert to individual polygons because leaflet.draw does
-          // not understand MultiPolygon.
-          const multi = geoJson.geometries.splice(index, 1)
-          multi[0].coordinates.forEach((coords) => {
-            const polygon = {
-              type: 'Polygon',
-              coordinates: coords,
-            }
-            geoJson.geometries.push(polygon)
-          })
-        }
-        if (geometry.type === 'Circle') {
-          geometry.type = 'Point'
-          // Convert an array of coordinate arrays to Leaflet's format
-          if (
-            Array.isArray(geometry.coordinates) &&
-            geometry.coordinates.length > 0 &&
-            Array.isArray(geometry.coordinates[0]) &&
-            geometry.coordinates[0].length > 1
-          ) {
-            geometry.coordinates = [
-              geometry.coordinates[0][1],
-              geometry.coordinates[0][0],
-            ]
-          }
-        }
-      })
-    }
-
-    const savedItems = L.GeoJSON.geometryToLayer(geoJson, {
-      pointToLayer: (feature, latlng) => {
-        // If a point has a radius, draw as a Circle
-        if (
-          feature.geometry &&
-          feature.geometry.type === 'Point' &&
-          feature.geometry.radius > 0
-        ) {
-          return new L.Circle(latlng, feature.geometry.radius)
-        } else {
-          return new L.Marker(latlng)
-        }
-      },
-    })
-
-    for (const item in savedItems.getLayers()) {
-      const layer = savedItems.getLayers()[item]
-      if (layer.setStyle) {
-        layer.setStyle(myStyle)
-      }
-      this._regionLayer.addLayer(layer)
-    }
-
-    this._regionLayer.setStyle(myStyle)
-
-    this._map.addControl(
-      new L.Control.Draw({
-        draw: {
-          polyline: false,
-          rectangle: false,
-          marker: false,
-          circlemarker: false,
-          polygon: { allowIntersection: false, shapeOptions: myStyle },
-          circle: { shapeOptions: myStyle },
-        },
-        edit: {
-          featureGroup: this._regionLayer,
-          remove: true,
-        },
-      }),
-    )
-
-    // --- Geocoder Address Search
-    new GeoSearchControl({
-      provider: new OpenStreetMapProvider(),
-      retainZoomLevel: true,
-      showMarker: false,
-    }).addTo(this._map)
-
-    this._map.on('geosearch/showlocation', (e) => {
-      if (e.location) {
-        this.updateMarker(
-          new L.LatLng(parseFloat(e.location.y), parseFloat(e.location.x)),
-          e.location.label,
-        )
-      }
-    })
-
-    // Add a button to mark to user's current location, using HTML5 geolocation
-    L.control
-      .locate({
-        drawCircle: false,
-        markerStyle: {
-          weight: 2,
-          radius: 6,
-        },
-        keepCurrentZoomLevel: true,
-        icon: 'LocationMap-locateControl',
-        iconLoading: 'LocationMap-locateControl is-loading',
-        strings: {
-          title: 'Set marker to your current location',
-          popup: '<b>Current location</b><br/>(within {distance} {unit})',
-        },
-      })
-      .addTo(this._map)
-
-    // Add custom circle JSON serialization since GeoJSON doesn't support circles
-    var circleToGeoJSON = L.Circle.prototype.toGeoJSON
-    L.Circle.include({
-      toGeoJSON() {
-        var feature = circleToGeoJSON.call(this)
-        feature.geometry = {
-          type: 'Circle',
-          coordinates: [[this.getLatLng().lat, this.getLatLng().lng]],
-          radius: this.getRadius(),
-        }
-        return feature
-      },
-    })
-
-    this._map.on('draw:created', (event) => {
-      this._regionLayer.addLayer(event.layer)
-      this.updateGeoJSON()
-    })
-
-    this._map.on('draw:deleted', this.updateGeoJSON.bind(this))
-
-    this._map.on('draw:edited', this.updateGeoJSON.bind(this))
-
-    this._map.on('dragend', this.updateMapPosition.bind(this))
-
-    this._map.on('zoomend', this.updateMapPosition.bind(this))
-  }
-
-  updateGeoJSON() {
-    const geojson = this._regionLayer.toGeoJSON()
-    this._geoJsonInput.value = JSON.stringify(geojson)
-  }
-
-  updateMarker(latlng, label) {
-    if (this._marker) {
-      this._marker.setLatLng(latlng)
-      this._marker.bindPopup(label || latlng.toString())
-    } else {
-      const icon = L.divIcon({
-        className: 'LocationMap-marker',
-        iconSize: [36, 36],
-        iconAnchor: [18, 36],
-        popupAnchor: [0, -30],
-      })
-
-      this._marker = L.marker(latlng, {
-        draggable: true,
-        autoPan: true,
-        icon: icon,
-      }).bindPopup(label || latlng.toString())
-
-      this._marker.on('moveend', (e) => {
-        this._marker.bindPopup(e.target._latlng.toString())
-      })
-
-      this._marker.addTo(this._map)
-    }
-  }
-
-  updateMapPosition() {
-    this._zoomInput.value = this._map.getZoom()
-    this._centerInput.value = JSON.stringify(this._map.getCenter())
-  }
-}

package/src/legacy/tool-ui/src/main/webapp/v4/RepeatableContentInputGroup.js

@@ -1,160 +0,0 @@
-import create from './dom/create'
-import find from './dom/find'
-import findAll from './dom/findAll'
-import insertFirst from './dom/insertFirst'
-import onFind from './dom/onFind'
-import onVisible from './dom/onVisible'
-
-const tooltips = window.BRIGHTSPOT?.ui.tooltips
-const expandTextConst = tooltips?.expandAll
-const collapseTextConst = tooltips?.collapseAll
-
-// TODO: In 5.1+, delete this code. No longer needed since plus icon moved inside ComboInput.
-// Transfer the click from RCIG-addSelect into the ComboInput within.
-window.addEventListener('click', (e) => {
-  const target = e.target
-  const add = target.closest('.RCIG-addSelect')
-
-  if (add) {
-    const combo = find(add, ':scope > .ComboInput')
-
-    if (combo && !combo.contains(target)) {
-      combo.click()
-    }
-  }
-})
-
-// Add aria attributes to RCIG items for expand/collapse.
-onVisible('.RCIG-list > .RCIG-item', (child) => {
-  onFind(child, ':scope > .RCIG-title', (title) => {
-    title.role = 'button'
-    title.ariaExpanded = 'false'
-    title.ariaLabel = `${title.textContent}`
-
-    if (!child.hasAttribute('data-empty')) {
-      title.ariaExpanded = 'false'
-
-      title.addEventListener('click', () => {
-        const ariaExpanded = !child.classList.contains('is-collapsed')
-
-        title.ariaExpanded = ariaExpanded ? 'true' : 'false'
-      })
-    }
-  })
-})
-
-// Expand all button.
-onVisible('.RCIG', (rcig) => {
-  const rcigList = rcig.querySelector(':scope > .RCIG-list')
-  if (!rcigList) {
-    return
-  }
-  let rcigSize = rcigList.children.length
-
-  for (const child of rcigList.children) {
-    onFind(child, ':scope > .RCIG-title', (title) => {
-      title.role = 'button'
-      title.ariaExpanded = 'false'
-      title.ariaLabel = `${title.textContent}`
-
-      if (!child.hasAttribute('data-empty')) {
-        title.ariaExpanded = 'false'
-
-        title.addEventListener('click', () => {
-          const ariaExpanded = !child.classList.contains('is-collapsed')
-
-          title.ariaExpanded = ariaExpanded ? 'true' : 'false'
-        })
-      }
-    })
-  }
-
-  rcig.dataset.rcigSize = rcigSize
-
-  const fieldLabel =
-    rcig.previousElementSibling?.querySelector('.CIG-label label')?.textContent
-
-  let expandText = expandTextConst
-  let collapseText = collapseTextConst
-  if (fieldLabel) {
-    expandText += ` ${fieldLabel}`
-    collapseText += ` ${fieldLabel}`
-  }
-
-  rcig.addEventListener('repeatable.add', () => {
-    rcig.dataset.rcigSize = ++rcigSize
-    rcig.closest('.CIG-row')?.classList.add('is-expandable')
-  })
-
-  rcig.addEventListener('repeatable.remove', () => {
-    rcig.dataset.rcigSize = --rcigSize
-    if (rcigSize === 0) {
-      rcig.closest('.CIG-row')?.classList.remove('is-expandable')
-    }
-  })
-
-  const list = rcig.querySelector(':scope > ol, :scope > ul')
-
-  if (Array.from(list.children).some((c) => !c.hasAttribute('data-empty'))) {
-    rcig.addEventListener('repeatable.toggle', () => {
-      const collapsed = rcigList.querySelectorAll(
-        ':scope > li.is-collapsed',
-      ).length
-
-      if (collapsed === 0) {
-        button.classList.add('is-expanded')
-        button.title = collapseText
-        button.setAttribute('aria-label', collapseText)
-      } else if (collapsed === rcigSize) {
-        button.classList.remove('is-expanded')
-        button.title = expandText
-        button.setAttribute('aria-label', expandText)
-      }
-    })
-
-    const button = create('button', {
-      className: 'RCIG-expandAll',
-      type: 'button',
-      title: expandText,
-      'aria-label': expandText,
-      onclick: (e) => {
-        const isExpanding = button.classList.toggle('is-expanded')
-
-        if (isExpanding) {
-          button.title = collapseText
-          button.setAttribute('aria-label', collapseText)
-          buttonLiveRegion.textContent = tooltips?.expandedAll
-        } else {
-          button.title = expandText
-          button.setAttribute('aria-label', expandText)
-          buttonLiveRegion.textContent = tooltips?.collapsedAll
-        }
-
-        for (const title of findAll(
-          rcig,
-          ':scope > .RCIG-list > .RCIG-item > .RCIG-title',
-        )) {
-          const isCollapsed =
-            title.parentElement.classList.contains('is-collapsed')
-          if ((isExpanding && isCollapsed) || (!isExpanding && !isCollapsed)) {
-            title.click()
-          }
-        }
-      },
-    })
-
-    const buttonLiveRegion = create('div', {
-      className: 'screen-reader-only',
-      'aria-live': 'polite',
-    })
-
-    if (rcigSize === 0) {
-      button.classList.add('is-expanded')
-    } else {
-      rcig.closest('.CIG-row')?.classList.add('is-expandable')
-    }
-
-    insertFirst(buttonLiveRegion, rcig)
-    insertFirst(button, rcig)
-  }
-})