@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.1

package/src/legacy/tool-ui/src/main/webapp/v4/ProfileDropdown.less

@@ -0,0 +1,66 @@
+.ToolUserWorksInProgress,
+.ToolUserSharedPreviews {
+  .LinkTable {
+    padding-bottom: var(--gap-m);
+
+    li {
+      border-bottom: var(--borderWidth-thin) solid var(--color-gray3);
+      border-top: 0;
+      padding: var(--gap-m) 0;
+      position: relative;
+
+      a {
+        .Text.is-m;
+
+        padding: 0;
+      }
+
+      span {
+        .Text.is-s;
+
+        color: var(--color-gray5);
+      }
+
+      button[name='action-delete'],
+      button[name='deleteAction'] {
+        .IconButton;
+        .IconButton.is-red;
+
+        --IconButton-name: 'remove';
+
+        display: none;
+        position: absolute;
+        right: 0;
+        top: 24%;
+      }
+    }
+
+    li:hover > form > button[name='action-delete'],
+    li:hover > form > button[name='deleteAction'] {
+      display: block;
+    }
+  }
+}
+
+.ToolUserWorksInProgress-actions,
+.ToolUserSharedPreviews-actions {
+  text-align: right;
+
+  > button {
+    color: var(--color-red6);
+  }
+}
+
+.ProfileDropdown-user {
+  color: var(--color-black);
+}
+
+.ProfileDropdown-userEmail {
+  .Text.is-s;
+
+  color: var(--color-gray5);
+}
+
+.ProfileDropdown-items {
+  .LinkTable;
+}

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

@@ -0,0 +1,47 @@
+// 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

@@ -0,0 +1,211 @@
+/* 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/QueryField.less

@@ -0,0 +1,147 @@
+.QueryField-frame {
+  .QueryField-searchForm,
+  .QueryField-searchControls {
+    display: block;
+  }
+
+  .SearchWidget-controls {
+    width: 100%;
+  }
+
+  .SearchWidget-history,
+  .SearchWidget-reset {
+    display: none;
+  }
+
+  .SearchWidget-result {
+    display: flex;
+    flex-flow: row wrap;
+    height: min-content;
+    width: 100%;
+
+    & > h2 {
+      font-size: 100%;
+      margin-left: var(--gap-l);
+      margin-right: var(--gap-s);
+    }
+  }
+
+  .SearchResult-sorts {
+    flex-grow: 1;
+    margin-left: var(--gap-l);
+    margin-top: calc((var(--gap-l) - (var(--gap-s) + 1px)));
+
+    > form {
+      width: max-content;
+    }
+  }
+
+  .SearchResult-pagination {
+    margin-left: var(--gap-l);
+    margin-right: var(--gap-l);
+    margin-top: calc((var(--gap-l) - (var(--gap-s) + 1px)));
+    position: unset;
+    z-index: unset;
+  }
+
+  .SearchResult-items {
+    padding-top: var(--gap-l);
+    width: 100%;
+  }
+}
+
+.QueryField-queryString {
+  display: none;
+}
+
+.QueryField-toggle {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  .QueryField-label {
+    max-width: calc(100% - var(--Icon-size) - var(--gap-m) - 2 * var(--gap-s));
+  }
+
+  .QueryField-icon {
+    .IconButton;
+
+    --IconButton-name: 'edit';
+
+    margin-left: var(--gap-m);
+  }
+}
+
+.Popup[name='queryField'] {
+  .Popup-content {
+    display: flex;
+    flex-flow: column nowrap;
+
+    .ActionBar,
+    .SearchWidget-title {
+      flex-shrink: 0;
+    }
+
+    .SearchResult-pagination {
+      padding: 0;
+    }
+
+    .SearchWidget-form {
+      flex-grow: 1;
+      overflow: auto;
+    }
+
+    .SearchResult-items {
+      margin-top: 0;
+    }
+
+    .Taxonomy {
+      margin-top: 0;
+      width: 100%;
+
+      li {
+        padding-bottom: var(--gap-s);
+        padding-top: var(--gap-s);
+      }
+    }
+
+    .QueryField-queryString {
+      display: none !important;
+    }
+  }
+}
+
+@media (@mq-s) {
+  .Page-content.is-previewing ~ .QueryField-frame {
+    .QueryField-searchControls,
+    .QueryField-searchForm {
+      display: block;
+    }
+
+    .SearchWidget-controls {
+      width: 100%;
+    }
+  }
+}
+
+@media (@mq-l) {
+  .QueryField-frame {
+    .QueryField-searchControls,
+    .QueryField-searchForm {
+      display: flex;
+    }
+
+    .SearchWidget-controls {
+      width: 250px;
+    }
+
+    .SearchResult-sorts,
+    .SearchResult-pagination {
+      margin-top: calc((var(--gap-l) - (var(--gap-s) + 2px)));
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/RadialProgressBar.less

@@ -0,0 +1,20 @@
+:root {
+  --RPB-size: var(--gap-xl);
+}
+
+.RPB {
+  height: var(--RPB-size);
+  width: var(--RPB-size);
+}
+
+.RPB-bg {
+  fill: none;
+  stroke: var(--color-gray2);
+}
+
+.RPB-fg {
+  fill: none;
+  stroke: var(--color-dominant6);
+  transform: rotate(-90deg);
+  transform-origin: center;
+}

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

@@ -0,0 +1,215 @@
+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())
+  }
+}