Function default

Example

import VueDijit from "apprt-vue/VueDijit";
import Graphic from "esri/Graphic";
import Layer from "esri/layers/Layer";
import { PopupDefinition, PopupTemplateDefinition } from "popups/api";
import ContentUpdateProxy, { WidgetProxy } from "popups/ContentUpdateProxy";
import { Store } from "store-api/api";
import Vue from "vue/types/umd.js";
import { CustomPopupWidget } from "./CustomPopupWidget.vue";

/**
 * Type allowing to access the popup widget of a layer or store.
 */
type PopupWidgetAware<T> = T & {
    _$popup_widget?: any;
}

function createWidget() {
    return VueDijit(new Vue(CustomPopupWidget));
}

export class CustomWidgetPopupDefinition implements PopupDefinition {
    resolvePopupTemplate(layerArg: Layer): PopupTemplateDefinition | undefined {
        const layer = layerArg as PopupWidgetAware<Layer>;
        return {
            // Declare which fields should be fetched
            // These are provided as attributes inside the graphic
            outFields: ["objectid", "Name", "Description"],

            // title may contain attributes from the fields array
            title: "This is {Name}",

            // Define a content function
            // NOTE:
            //  * Can return a Promise(dojo/Deferred required in 4.7)
            //  * This is global window, be careful about that!
            content({graphic}: {graphic: Graphic}): WidgetProxy {
                let widget = layer._$popup_widget;
                if (!widget) {
                    widget = layer._$popup_widget = createWidget();
                    // widget is a dijit Widget
                    widget.startup();
                }

                // Use the proxy to handle content updates
                // This ensures, that the correct content for every feature is shown,
                // if the popup handles multiple feature hits
                return ContentUpdateProxy(graphic, widget, (graphic) => {
                    // update the widget content
                });
            }
        };
    }
    resolvePopupTemplateForStore(
        store: Store,
        storeProperties: Record<string, any>
    ): PopupTemplateDefinition | undefined | Promise<PopupTemplateDefinition | undefined> {
        // analogue to resolvePopupTemplate(layer)
    }
    cleanupPopupTemplate?(layerOrStoreArg: Layer | Store): void {
        const layerOrStore = layerOrStoreArg as PopupWidgetAware<Layer | Store>;
        const widget = layerOrStore._$popup_widget;
        delete layerOrStore._$popup_widget;
        widget && widget.destroyRecursive();
    }
}
Copy