From ae26c49f4bdec4b07ee80ae6f6d83444a53bb172 Mon Sep 17 00:00:00 2001 From: Sumit Zarkar Date: Thu, 18 Jan 2024 16:22:51 +0530 Subject: [PATCH 1/3] Updated popupUtils ## Updated popupUtils - To resolve the Arcade expression involving map and layer - To use async executor - Updated related components using this utils --- src/components/feature-list/feature-list.tsx | 2 +- src/components/info-card/info-card.tsx | 2 +- src/utils/interfaces.ts | 2 +- src/utils/popupUtils.ts | 62 ++++++++++---------- 4 files changed, 33 insertions(+), 35 deletions(-) diff --git a/src/components/feature-list/feature-list.tsx b/src/components/feature-list/feature-list.tsx index f7d24fae0..7d5c85522 100644 --- a/src/components/feature-list/feature-list.tsx +++ b/src/components/feature-list/feature-list.tsx @@ -260,7 +260,7 @@ export class FeatureList { protected async createFeatureItem(featureSet: any): Promise { const currentFeatures = featureSet?.features; const items = currentFeatures.map(async (feature) => { - const popupTitle = await this._popupUtils.getPopupTitle(feature); + const popupTitle = await this._popupUtils.getPopupTitle(feature, this.mapView.map); return this.getFeatureItem(feature, popupTitle); }); return Promise.all(items); diff --git a/src/components/info-card/info-card.tsx b/src/components/info-card/info-card.tsx index b9df7884c..2676e9ad8 100644 --- a/src/components/info-card/info-card.tsx +++ b/src/components/info-card/info-card.tsx @@ -450,7 +450,7 @@ export class InfoCard { if (this.graphics.length > 0) { this._layer = (this.graphics[0]?.layer as __esri.FeatureLayer); this._editEnabled = this._layer.editingEnabled && this._layer.capabilities.operations.supportsUpdate; - this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]); + this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map); this._features.open({ features: this.graphics }); diff --git a/src/utils/interfaces.ts b/src/utils/interfaces.ts index f43d674af..81634c526 100644 --- a/src/utils/interfaces.ts +++ b/src/utils/interfaces.ts @@ -546,5 +546,5 @@ export interface ILayerAndTableIds { export interface IPopupUtils { arcade: typeof import("esri/arcade"); - getPopupTitle(graphic: __esri.Graphic): Promise; + getPopupTitle(graphic: __esri.Graphic, map: __esri.Map): Promise; } diff --git a/src/utils/popupUtils.ts b/src/utils/popupUtils.ts index 598fe8c60..10f5b40ea 100644 --- a/src/utils/popupUtils.ts +++ b/src/utils/popupUtils.ts @@ -23,15 +23,17 @@ export class PopupUtils { */ arcade: typeof import("esri/arcade"); - /** - * Get the popup title that honors arcade expressions - * - * @returns Promise resolving with the popup title - * - * @protected - */ + /** + * Get the popup title that honors arcade expressions + * @param graphic selected graphic + * @param map __esri.Map + * @returns Promise resolving with the popup title + * + * @protected + */ public async getPopupTitle( - graphic: __esri.Graphic + graphic: __esri.Graphic, + map: __esri.Map ): Promise { if (!this.arcade) { await this._initModules() @@ -48,21 +50,17 @@ export class PopupUtils { if (popupTitle.includes("{expression/expr") && layer?.popupTemplate?.expressionInfos != null) { for (let i = 0; i < layer.popupTemplate?.expressionInfos.length; i++) { const info = layer.popupTemplate.expressionInfos[i]; - const profile = { - variables: [ - { - name: "$feature", - type: "feature" - } - ] - } as __esri.Profile; + //create arcade profile for popup + const profile = this.arcade.createArcadeProfile('popup'); try { const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile); - const arcadeTitle = arcadeExecutor.execute({ $feature: graphic }); + const arcadeTitle = await arcadeExecutor.executeAsync({ $feature: graphic, $layer: layer, $map: map }); if (arcadeTitle != null || arcadeTitle !== "") { attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle; } - } catch { + } catch (e) { + //log error in console to understand if the arcade expressions are failing + console.error(e); continue; } } @@ -73,13 +71,13 @@ export class PopupUtils { }); } - /** - * Remove any tags from the title - * - * @returns title string without tags - * - * @protected - */ + /** + * Remove any tags from the title + * + * @returns title string without tags + * + * @protected + */ protected _removeTags(str: string): string { if (str == null || str === "") { return ""; @@ -87,13 +85,13 @@ export class PopupUtils { return str.toString().replace(/(<([^>]+)>)/gi, ""); } - /** - * Load esri javascript api modules - * - * @returns Promise resolving when function is done - * - * @protected - */ + /** + * Load esri javascript api modules + * + * @returns Promise resolving when function is done + * + * @protected + */ protected async _initModules(): Promise { const [arcade] = await loadModules([ "esri/arcade" From 37366706a181368068512cda304b6e1edd465e24 Mon Sep 17 00:00:00 2001 From: Sumit Zarkar Date: Thu, 18 Jan 2024 16:32:58 +0530 Subject: [PATCH 2/3] Implemented code review comments from previous pull request ## Implemented - Working sample for Feature-list - Working sample for Layer-list - More than one attribute to list on separate lines --- .../crowdsource-reporter.tsx | 79 +++++++++++----- src/components/feature-list/feature-list.tsx | 89 ++++++++++++++----- src/components/layer-list/layer-list.tsx | 18 ++-- src/demos/feature-list.html | 82 +++++++++++++---- src/demos/layer-list.html | 46 +++++++++- 5 files changed, 246 insertions(+), 68 deletions(-) diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.tsx b/src/components/crowdsource-reporter/crowdsource-reporter.tsx index eff4b6d78..bb3c708d1 100644 --- a/src/components/crowdsource-reporter/crowdsource-reporter.tsx +++ b/src/components/crowdsource-reporter/crowdsource-reporter.tsx @@ -299,9 +299,9 @@ export class CrowdsourceReporter { case "feature-list": renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName)); break; - case "feature-details": - renderLists.push(this.getFeatureDetailsFlowItem()); - break; + case "feature-details": + renderLists.push(this.getFeatureDetailsFlowItem()); + break; } }); @@ -329,17 +329,30 @@ export class CrowdsourceReporter { */ protected getLayerListFlowItem(): Node { return ( - - {this._hasValidLayers && } - {this._hasValidLayers && } + + {this._hasValidLayers && + } + {this._hasValidLayers && + } {this.isMobile && this.getActionToExpandCollapsePanel()} - {this._hasValidLayers && this.enableNewReports && - {this.reportButtonText} - } + {this._hasValidLayers && this.enableNewReports && + + {this.reportButtonText} + } - - + - {this.isMobile && this.getActionToExpandCollapsePanel()} - {this.enableNewReports && - {this.reportButtonText} - } + {this.enableNewReports && + + {this.reportButtonText} + } - {} @@ -432,9 +457,15 @@ export class CrowdsourceReporter { */ protected getFeatureDetailsFlowItem(): Node { return ( - + {this.isMobile && this.getActionToExpandCollapsePanel()} - + ); } diff --git a/src/components/feature-list/feature-list.tsx b/src/components/feature-list/feature-list.tsx index 7d5c85522..a4a6ea71a 100644 --- a/src/components/feature-list/feature-list.tsx +++ b/src/components/feature-list/feature-list.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Component, Element, Prop, VNode, h, State, Event, EventEmitter } from "@stencil/core"; +import { Component, Element, Prop, VNode, h, State, Event, Watch, EventEmitter } from "@stencil/core"; import { PopupUtils } from "../../utils/popupUtils"; import { IPopupUtils } from "../../utils/interfaces"; import { getFeatureLayerView, getLayerOrTable, highlightFeatures } from "../../utils/mapViewUtils"; @@ -120,6 +120,15 @@ export class FeatureList { // //-------------------------------------------------------------------------- + /** + * Watch for selectedLayerId change and update layer instance and features list for new layerId + */ + @Watch("selectedLayerId") + async selectedLayerWatchHandler(): Promise { + this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId); + await this.initializeFeatureItems(); + } + //-------------------------------------------------------------------------- // // Methods (public) @@ -151,18 +160,16 @@ export class FeatureList { await this._getTranslations(); this._isLoading = true; this._popupUtils = new PopupUtils(); - this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId); + if(this.mapView && this.selectedLayerId){ + this._selectedLayer = await getLayerOrTable(this.mapView, this.selectedLayerId); + } } /** * StencilJS: Called once just after the component is fully loaded and the first render() occurs. */ async componentDidLoad() { - if (this._selectedLayer) { - this._featureItems = await this.queryPage(0); - this._featuresCount = await this._selectedLayer.queryFeatureCount(); - this._isLoading = false; - } + await this.initializeFeatureItems() } /** @@ -170,17 +177,33 @@ export class FeatureList { */ render() { return ( - + {this._isLoading && } - {this._featureItems.length === 0 && !this._isLoading && -
{this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg}
- } - + {this._featureItems.length === 0 && !this._isLoading && + +
+ {this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg} +
+ } + {!this._isLoading && this._featureItems.length > 0 && this._featureItems} {this._featuresCount > this.pageSize && -
- +
} @@ -193,6 +216,18 @@ export class FeatureList { // //-------------------------------------------------------------------------- + /** + * Initialize the features list using the selected layer + */ + protected async initializeFeatureItems(): Promise { + if (this._selectedLayer) { + this._isLoading = true; + this._featureItems = await this.queryPage(0); + this._featuresCount = await this._selectedLayer.queryFeatureCount(); + this._isLoading = false; + } + } + /** * On page change get the next updated feature list * @param event page change event @@ -239,14 +274,19 @@ export class FeatureList { */ protected async queryPage(page: number): Promise { const featureLayer = this._selectedLayer; - const query = { + const objectIdField = featureLayer.objectIdField; + const query: any = { start: page, num: this.pageSize, outFields: ["*"], - orderByFields: [featureLayer.objectIdField + " DESC"], returnGeometry: true, - where: featureLayer.definitionExpression + where: featureLayer.definitionExpression, + outSpatialReference: this.mapView.spatialReference.toJSON() }; + //sort only when objectId field is found + if (objectIdField) { + query.orderByFields = [objectIdField.toString() + " DESC"]; + } const featureSet = await featureLayer.queryFeatures(query); return await this.createFeatureItem(featureSet); } @@ -279,10 +319,19 @@ export class FeatureList { //use object id if popupTitle is null or undefined popupTitle = popupTitle ?? oId; return ( - { void this.featureClicked(e, selectedFeature) }} value={oId}> + { void this.featureClicked(e, selectedFeature) }} + value={oId}> {/* --TODO ellipsis-- */} -
{popupTitle}
- +
+ {popupTitle} +
+ ); } diff --git a/src/components/layer-list/layer-list.tsx b/src/components/layer-list/layer-list.tsx index 842c4ae8b..6551f648d 100644 --- a/src/components/layer-list/layer-list.tsx +++ b/src/components/layer-list/layer-list.tsx @@ -161,10 +161,15 @@ export class LayerList { return ( {this._isLoading && } - {!this._isLoading && this.mapView && this._noLayersToDisplay && -
{this._translations.error}
-
{this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg}
- } + {!this._isLoading && this.mapView && this._noLayersToDisplay && + +
{this._translations.error}
+
{this.noLayerErrorMsg ? this.noLayerErrorMsg : this._translations.noLayerToDisplayErrorMsg}
+ } {!this._isLoading && this.mapView && {this.renderLayerList()} @@ -283,7 +288,10 @@ export class LayerList { {/* --TODO ellipsis--*/}
{layerName}
{featureCount !== "" &&
{"(" + featureCount + ")"}
} - + ); } diff --git a/src/demos/feature-list.html b/src/demos/feature-list.html index 242a71351..de686ea5d 100644 --- a/src/demos/feature-list.html +++ b/src/demos/feature-list.html @@ -7,24 +7,51 @@ /> Feature list + | Copyright 2022 Esri + | + | Licensed under the Apache License, Version 2.0 (the "License"); + | you may not use this file except in compliance with the License. + | You may obtain a copy of the License at + | + | http://www.apache.org/licenses/LICENSE-2.0 + | + | Unless required by applicable law or agreed to in writing, software + | distributed under the License is distributed on an "AS IS" BASIS, + | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + | See the License for the specific language governing permissions and + | limitations under the License. + --> - + @@ -33,11 +60,32 @@ - - +
+ diff --git a/src/demos/layer-list.html b/src/demos/layer-list.html index cf1be00a9..a0629f55e 100644 --- a/src/demos/layer-list.html +++ b/src/demos/layer-list.html @@ -22,9 +22,32 @@ | limitations under the License. --> - + @@ -33,11 +56,28 @@ - - +
+ + From f6eaa7937a5757e69ef8beb64280990c85ad2afe Mon Sep 17 00:00:00 2001 From: Sumit Zarkar Date: Thu, 18 Jan 2024 16:37:25 +0530 Subject: [PATCH 3/3] Updated Reporter ## Implemented - Emit event togglePanel - Removed extra code related to map container - Updated Sample to pass mobile prop and listen togglePanel event --- src/components.d.ts | 19 +++ .../crowdsource-reporter.css | 21 --- .../crowdsource-reporter.tsx | 17 +- src/demos/crowdsource-reporter.html | 150 +++++++++++------- 4 files changed, 119 insertions(+), 88 deletions(-) diff --git a/src/components.d.ts b/src/components.d.ts index a066aaf63..e8b44723e 100644 --- a/src/components.d.ts +++ b/src/components.d.ts @@ -1260,6 +1260,10 @@ export interface BufferToolsCustomEvent extends CustomEvent { detail: T; target: HTMLBufferToolsElement; } +export interface CrowdsourceReporterCustomEvent extends CustomEvent { + detail: T; + target: HTMLCrowdsourceReporterElement; +} export interface DeductCalculatorCustomEvent extends CustomEvent { detail: T; target: HTMLDeductCalculatorElement; @@ -1396,7 +1400,18 @@ declare global { prototype: HTMLCrowdsourceManagerElement; new (): HTMLCrowdsourceManagerElement; }; + interface HTMLCrowdsourceReporterElementEventMap { + "togglePanel": boolean; + } interface HTMLCrowdsourceReporterElement extends Components.CrowdsourceReporter, HTMLStencilElement { + addEventListener(type: K, listener: (this: HTMLCrowdsourceReporterElement, ev: CrowdsourceReporterCustomEvent) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; + addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLCrowdsourceReporterElement, ev: CrowdsourceReporterCustomEvent) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void; + removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void; } var HTMLCrowdsourceReporterElement: { prototype: HTMLCrowdsourceReporterElement; @@ -2234,6 +2249,10 @@ declare namespace LocalJSX { * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */ "mapView"?: __esri.MapView; + /** + * Emitted when toggle panel button is clicked in reporter + */ + "onTogglePanel"?: (event: CrowdsourceReporterCustomEvent) => void; /** * string: The word(s) to display in the reports submit button */ diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.css b/src/components/crowdsource-reporter/crowdsource-reporter.css index bce60a699..a366cc5c4 100644 --- a/src/components/crowdsource-reporter/crowdsource-reporter.css +++ b/src/components/crowdsource-reporter/crowdsource-reporter.css @@ -44,27 +44,6 @@ border: 1px solid var(--calcite-color-border-3); } -.map-container { - position: absolute; - width: calc(100% - 390px); - left: 390px; -} - -.side-panel { - padding: 2px; - width: 390px; - height: 100%; - position: absolute; - top: 0; - left: 0; - z-index: 60; -} - .error-msg{ padding: 10px; } - -.collapsed-side-panel { - top: calc(100% - 55px); - height: 54px; -} diff --git a/src/components/crowdsource-reporter/crowdsource-reporter.tsx b/src/components/crowdsource-reporter/crowdsource-reporter.tsx index bb3c708d1..d44c4eb6b 100644 --- a/src/components/crowdsource-reporter/crowdsource-reporter.tsx +++ b/src/components/crowdsource-reporter/crowdsource-reporter.tsx @@ -14,7 +14,7 @@ * limitations under the License. */ -import { Component, Element, Host, h, Prop, VNode, State, Watch } from "@stencil/core"; +import { Component, Element, Host, h, Prop, VNode, State, Watch, Event, EventEmitter } from "@stencil/core"; import { IMapChange, IMapInfo, ISearchConfiguration, theme } from "../../utils/interfaces"; import { getLocaleComponentStrings } from "../../utils/locale"; import CrowdsourceReporter_T9n from "../../assets/t9n/crowdsource-reporter/resources.json"; @@ -222,9 +222,7 @@ export class CrowdsourceReporter { */ @Watch("isMobile") async isMobileWatchHandler(): Promise { - if (this.isMobile) { this._sidePanelCollapsed = false; - } } /** @@ -249,6 +247,11 @@ export class CrowdsourceReporter { // //-------------------------------------------------------------------------- + /** + * Emitted when toggle panel button is clicked in reporter + */ + @Event() togglePanel: EventEmitter; + //-------------------------------------------------------------------------- // // Functions (lifecycle) @@ -305,14 +308,9 @@ export class CrowdsourceReporter { } }); - let sidePanelClass = "side-panel"; - //in case of mobile handle for collapsed styles of the panel - if (this.isMobile && this._sidePanelCollapsed) { - sidePanelClass += " collapsed-side-panel"; - } const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light"; return ( - + {this.mapView ? {renderLists?.length > 0 && renderLists} @@ -398,6 +396,7 @@ export class CrowdsourceReporter { */ protected toggleSidePanel(): void { this._sidePanelCollapsed = !this._sidePanelCollapsed; + this.togglePanel.emit(this._sidePanelCollapsed) } /** diff --git a/src/demos/crowdsource-reporter.html b/src/demos/crowdsource-reporter.html index c2eb4fc8c..63bf77b99 100644 --- a/src/demos/crowdsource-reporter.html +++ b/src/demos/crowdsource-reporter.html @@ -27,10 +27,10 @@ top: 0px; right: 0px; bottom: 0px; - left: 390px; + left: 361px; } #viewDiv[dir="rtl"] { - right: 390px; + right: 361px; left: 0px; } .over-map { @@ -43,7 +43,6 @@ } .column { width: 360px; - padding: 1rem; border: 1px solid var(--calcite-color-border-2); height: -webkit-fill-available; height: 100%; @@ -51,6 +50,29 @@ .column[dir="rtl"] { float: right; } + + @media screen and (max-width: 600px) { + #viewDiv { + left: 0; + height: 50%; + width: 100%; + } + + .column { + height: 50%; + top: 50%; + width: calc(100% - 2px); + } + + .map-with-panel-collapsed { + height: calc(100% - 100px) !important; + } + + .column-collapsed { + top: calc(100% - 100px); + height: 100px; + } + } @@ -69,52 +91,44 @@ esriConfig ) => { const demo = document.getElementById("demo"); - - // let headerSet = false; - // let custom = []; - // let portal; - // //Support id and portal URL parameter - // var vars = window.location.search.substring(1).split("&"); - // vars.forEach((param) => { - // let vals = param.split("="); - // const v = vals[1]; - // switch (vals[0]) { - // case "id": - // custom = [{ - // id: v, - // name: "Map from URL" - // }]; - // break; - // case "portal": - // portal = v; - // default: - // break; - // } - // }); - - // if (portal) { - // esriConfig.portalUrl = portal; - // } - - // demo.mapInfos = [{ - // //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers - // //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping - // //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers - // //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features - // //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers - // id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content - // }]; - // //if id is passed in the url parameter use that mapInfos - // if (custom?.length > 0) { - // demo.mapInfos = custom; - // } - - //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com"; - var webMap = new WebMap({ - portalItem: { - id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" + let custom = null; + let portal; + //Support webmap and portal URL parameter + var vars = window.location.search.substring(1).split("&"); + vars.forEach((param) => { + let vals = param.split("="); + const v = vals[1]; + switch (vals[0]) { + case "webmap": + custom = { + id: v + }; + break; + case "portal": + portal = v; + default: + break; } }); + //update the portalUrl if found in urlParams + //esriConfig.portalUrl = "https://solutions.mapsdevext.arcgis.com"; + if (portal) { + esriConfig.portalUrl = portal; + } + + let portalItem = { + //id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" + //id: "f8c4d99deb3c483cac296cc261e18a25", //blank no layers + //id: "a7e880f7afbb471991d43c8c4f1438ac" // Se mapping + //id: "c720e337ff814fe4a83bc244c46f8e43" //15 Layers + //id: "f5186c798b9e40dab1078658ddbc28cf" // 30K features + //id: "dda88d905a6748a5ab46bea5be795f33" // screening layers + id: "b5bdcb1e5d684dd3b21a2d44b8e4f928" //Popup content + //id: "d399ec39959a4aac8617ae4f05dd6785" //Arcade + } + const webMap = new WebMap({ + portalItem: custom ?? portalItem + }); demo.mapView = new MapView({ container: "viewDiv", @@ -122,24 +136,44 @@ }); demo.mapView.when(() => { - // const legend = new Legend({ - // view: demo.mapView - // }); - // demo.mapView.ui.add(legend, "top-left"); + // const legend = new Legend({ + // view: demo.mapView + // }); + // demo.mapView.ui.add(legend, "top-left"); }); - - // demo.enableHome = true; - // demo.enableSearch = true; - // demo.enableZoom = true; demo.reportsHeader = "Reports"; demo.reportButtonText = "Report an incident"; demo.enableNewReports = true; - //Select reporting layers - - //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; - //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers demo.theme = "light"; demo.reportSubmittedMessage = "Thank you"; + //Select reporting layers - + //demo.layers = ['SE_field_mapping_9688', 'SE_field_mapping_5784', 'SE_field_mapping_1853']; //Se mapping + //demo.layers = ['Three_Layers_nested_4042', 'SE_sort_2889', 'SE_sort_756']; //screening layers + + //Update isMobile property of the reporter component + const mediaQueryList = window.matchMedia("screen and (max-width: 600px)"); + demo.isMobile = mediaQueryList.matches; + //on change update the prop for is mobile + mediaQueryList.onchange = (e) => { + demo.isMobile = e.matches; + togglePanel({detail:false}) + } + //listen to togglePanel event + demo.addEventListener('togglePanel', togglePanel); }); + + function togglePanel(evt){ + const state = evt.detail; + const viewDiv = document.getElementById("viewDiv"); + const demo = document.getElementById("demo"); + if(state){ + demo.classList.add("column-collapsed"); + viewDiv.classList.add("map-with-panel-collapsed"); + } else{ + demo.classList.remove("column-collapsed"); + viewDiv.classList.remove("map-with-panel-collapsed"); + } + }