@brightspot/ui 3.0.1-cms-ui-migration.4 → 5.0.0

package/src/legacy/tool-ui/src/v5.ts

@@ -1488,7 +1488,11 @@ onFind('.ContentEdit-workflowToggle', (toggle: HTMLElement) => {
 
 /* Query field modal */
 interface QueryInputHTMLElement extends HTMLElement {
-  frame?: HTMLElement
+  frame?: QueryFieldFrameElement
+}
+
+interface QueryFieldFrameElement extends HTMLElement {
+  _bspDialogSetup?: boolean
 }
 
 onFind('.QueryField-toggle', (toggle: HTMLElement) => {
@@ -1498,22 +1502,38 @@ onFind('.QueryField-toggle', (toggle: HTMLElement) => {
   const queryFieldFrame = queryField.frame
   if (!queryFieldFrame) return
 
+  // Multiple onFind registrations (v4/QueryField.js + v5.ts + others) each
+  // have their own data-ofc key, so the same toggle can be processed N times.
+  // Guard on the frame element so only the first registration sets up the Dialog.
+  if (queryFieldFrame._bspDialogSetup) return
+  queryFieldFrame._bspDialogSetup = true
+
   // Upgrade jQuery Popups to WebComponent.
   const dialog = new Dialog()
   dialog.removeOnClose = false
   dialog.autoOpen = false
 
-  dialog.addEventListener('btu-dialog-ready', () => {
-    onRemove.resume()
-  })
+  // Defer moving the frame and wiring handlers until the Popup is present.
+  // Uses a brightspot-frame-load listener scoped to this specific frame rather
+  // than a global onFind('.QueryField-frame > .Popup') registration, which
+  // would fire for every QueryField-frame Popup on the page and cause
+  // "insertBefore: new child contains the parent" errors when multiple query
+  // fields exist simultaneously.
+  const onFrameLoaded = () => {
+    const popup = queryFieldFrame.querySelector<HTMLElement>('.Popup')
+    if (!popup) return // early dispatch fired before form response; keep listening
+    queryFieldFrame.removeEventListener('brightspot-frame-load', onFrameLoaded)
 
-  /* This is to pause any onRemove callbacks specific to popup element while it's being moved */
-  onRemove.pause()
+    dialog.addEventListener('btu-dialog-ready', () => {
+      onRemove.resume()
+    })
+
+    /* This is to pause any onRemove callbacks specific to popup element while it's being moved */
+    onRemove.pause()
 
-  queryFieldFrame.parentNode?.insertBefore(dialog, queryFieldFrame)
-  dialog.append(queryFieldFrame)
+    queryFieldFrame.parentNode?.insertBefore(dialog, queryFieldFrame)
+    dialog.append(queryFieldFrame)
 
-  onFind('.QueryField-frame > .Popup', (popup: HTMLElement) => {
     toggle.addEventListener('click', (event) => {
       dialog.show()
     })
@@ -1528,7 +1548,9 @@ onFind('.QueryField-toggle', (toggle: HTMLElement) => {
     saveButton.addEventListener('click', (event) => {
       dialog.close(event)
     })
-  })
+  }
+
+  queryFieldFrame.addEventListener('brightspot-frame-load', onFrameLoaded)
 })
 
 /* Color picker modals */

package/dist/storybook/assets/if-defined-gbJXriW-.js

@@ -1 +0,0 @@
-import{E as r}from"./iframe-CyssRDCd.js";const m=o=>o??r;export{m as o};

package/src/legacy/tool-ui/src/main/webapp/dist/RegionMap.63f3b2303ab369a05073.js

@@ -1 +0,0 @@
-"use strict";(self.webpackChunkbrightspot_cms=self.webpackChunkbrightspot_cms||[]).push([[6379],{95628(e,t,o){function r(e,t){return e?(Array.isArray(t)&&(t=t.join(",")),e.querySelector(t)):null}o.d(t,{A:()=>r}),Object.defineProperty(r,"name",{value:"default",configurable:!0})},60021(e,t,o){function r(e,t){return e?(Array.isArray(t)&&(t=t.join(",")),e.querySelector(t)):null}o.d(t,{A:()=>r}),Object.defineProperty(r,"name",{value:"default",configurable:!0})},35657(e,t,o){o.d(t,{default:()=>s}),o(44764),o(50144),o(84978),o(25809),o(91672),o(92191),o(68690),o(45299),o(94768),o(62128);var r=o(53608),a=o.n(r),i=o(80907);if(7717==o.j)var n=o(95628);class s{constructor(e){if(this._zoomInput=(0,n.A)(e,".regionMapZoom"),this._centerInput=(0,n.A)(e,".regionMapCenter"),this._geoJsonInput=(0,n.A)(e,".regionMapGeoJson"),!this._zoomInput||!this._centerInput||!this._geoJsonInput)return;const t=JSON.parse(this._centerInput.value),o=JSON.parse(this._geoJsonInput.value);this._map=a().map(e,{center:t,zoom:parseFloat(this._zoomInput.value),layers:[a().tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'})]}),this._regionLayer=new(a().FeatureGroup),this._map.addLayer(this._regionLayer);const r={color:"#3a87ad",opacity:1,weight:4,fillColor:"#3a87ad",fillOpacity:.5};o.geometries&&o.geometries.forEach((e,t)=>{"MultiPolygon"===e.type&&o.geometries.splice(t,1)[0].coordinates.forEach(e=>{const t={type:"Polygon",coordinates:e};o.geometries.push(t)}),"Circle"===e.type&&(e.type="Point",Array.isArray(e.coordinates)&&e.coordinates.length>0&&Array.isArray(e.coordinates[0])&&e.coordinates[0].length>1&&(e.coordinates=[e.coordinates[0][1],e.coordinates[0][0]]))});const s=a().GeoJSON.geometryToLayer(o,{pointToLayer:(e,t)=>e.geometry&&"Point"===e.geometry.type&&e.geometry.radius>0?new(a().Circle)(t,e.geometry.radius):new(a().Marker)(t)});for(const e in s.getLayers()){const t=s.getLayers()[e];t.setStyle&&t.setStyle(r),this._regionLayer.addLayer(t)}this._regionLayer.setStyle(r),this._map.addControl(new(a().Control.Draw)({draw:{polyline:!1,rectangle:!1,marker:!1,circlemarker:!1,polygon:{allowIntersection:!1,shapeOptions:r},circle:{shapeOptions:r}},edit:{featureGroup:this._regionLayer,remove:!0}})),new i.Vn({provider:new i.F6,retainZoomLevel:!0,showMarker:!1}).addTo(this._map),this._map.on("geosearch/showlocation",e=>{e.location&&this.updateMarker(new(a().LatLng)(parseFloat(e.location.y),parseFloat(e.location.x)),e.location.label)}),a().control.locate({drawCircle:!1,markerStyle:{weight:2,radius:6},keepCurrentZoomLevel:!0,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);var p=a().Circle.prototype.toGeoJSON;a().Circle.include({toGeoJSON(){var e=p.call(this);return e.geometry={type:"Circle",coordinates:[[this.getLatLng().lat,this.getLatLng().lng]],radius:this.getRadius()},e}}),this._map.on("draw:created",e=>{this._regionLayer.addLayer(e.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 e=this._regionLayer.toGeoJSON();this._geoJsonInput.value=JSON.stringify(e)}updateMarker(e,t){if(this._marker)this._marker.setLatLng(e),this._marker.bindPopup(t||e.toString());else{const o=a().divIcon({className:"LocationMap-marker",iconSize:[36,36],iconAnchor:[18,36],popupAnchor:[0,-30]});this._marker=a().marker(e,{draggable:!0,autoPan:!0,icon:o}).bindPopup(t||e.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())}}},22848(e,t,o){o.d(t,{default:()=>s}),o(57573),o(62953),o(49371),o(96648),o(56065),o(79382),o(81499),o(80489),o(7577),o(74937);var r=o(66417),a=o.n(r),i=o(68098);if(3324==o.j)var n=o(60021);class s{constructor(e){if(this._zoomInput=(0,n.A)(e,".regionMapZoom"),this._centerInput=(0,n.A)(e,".regionMapCenter"),this._geoJsonInput=(0,n.A)(e,".regionMapGeoJson"),!this._zoomInput||!this._centerInput||!this._geoJsonInput)return;const t=JSON.parse(this._centerInput.value),o=JSON.parse(this._geoJsonInput.value);this._map=a().map(e,{center:t,zoom:parseFloat(this._zoomInput.value),layers:[a().tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{attribution:'© <a href="https://openstreetmap.org">OpenStreetMap</a> contributors'})]}),this._regionLayer=new(a().FeatureGroup),this._map.addLayer(this._regionLayer);const r={color:"#3a87ad",opacity:1,weight:4,fillColor:"#3a87ad",fillOpacity:.5};o.geometries&&o.geometries.forEach((e,t)=>{"MultiPolygon"===e.type&&o.geometries.splice(t,1)[0].coordinates.forEach(e=>{const t={type:"Polygon",coordinates:e};o.geometries.push(t)}),"Circle"===e.type&&(e.type="Point",Array.isArray(e.coordinates)&&e.coordinates.length>0&&Array.isArray(e.coordinates[0])&&e.coordinates[0].length>1&&(e.coordinates=[e.coordinates[0][1],e.coordinates[0][0]]))});const s=a().GeoJSON.geometryToLayer(o,{pointToLayer:(e,t)=>e.geometry&&"Point"===e.geometry.type&&e.geometry.radius>0?new(a().Circle)(t,e.geometry.radius):new(a().Marker)(t)});for(const e in s.getLayers()){const t=s.getLayers()[e];t.setStyle&&t.setStyle(r),this._regionLayer.addLayer(t)}this._regionLayer.setStyle(r),this._map.addControl(new(a().Control.Draw)({draw:{polyline:!1,rectangle:!1,marker:!1,circlemarker:!1,polygon:{allowIntersection:!1,shapeOptions:r},circle:{shapeOptions:r}},edit:{featureGroup:this._regionLayer,remove:!0}})),new i.Vn({provider:new i.F6,retainZoomLevel:!0,showMarker:!1}).addTo(this._map),this._map.on("geosearch/showlocation",e=>{e.location&&this.updateMarker(new(a().LatLng)(parseFloat(e.location.y),parseFloat(e.location.x)),e.location.label)}),a().control.locate({drawCircle:!1,markerStyle:{weight:2,radius:6},keepCurrentZoomLevel:!0,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);var p=a().Circle.prototype.toGeoJSON;a().Circle.include({toGeoJSON(){var e=p.call(this);return e.geometry={type:"Circle",coordinates:[[this.getLatLng().lat,this.getLatLng().lng]],radius:this.getRadius()},e}}),this._map.on("draw:created",e=>{this._regionLayer.addLayer(e.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 e=this._regionLayer.toGeoJSON();this._geoJsonInput.value=JSON.stringify(e)}updateMarker(e,t){if(this._marker)this._marker.setLatLng(e),this._marker.bindPopup(t||e.toString());else{const o=a().divIcon({className:"LocationMap-marker",iconSize:[36,36],iconAnchor:[18,36],popupAnchor:[0,-30]});this._marker=a().marker(e,{draggable:!0,autoPan:!0,icon:o}).bindPopup(t||e.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())}}}}]);