WIP

seasketch · Jan 2, 2024 · c05937f · c05937f
1 parent 225ba56
commit c05937f
Show file tree

Hide file tree

Showing 17 changed files with 538 additions and 304 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/api/generated-schema.gql b/packages/api/generated-schema.gql
@@ -6535,6 +6535,7 @@ type InteractivitySetting implements Node {
   """
   nodeId: ID!
   shortTemplate: String
+  title: String!
   type: InteractivityType!
 }
 
@@ -6550,6 +6551,7 @@ input InteractivitySettingInput {
   layers: [String]
   longTemplate: String
   shortTemplate: String
+  title: String
   type: InteractivityType
 }
 
@@ -6567,6 +6569,7 @@ input InteractivitySettingPatch {
   layers: [String]
   longTemplate: String
   shortTemplate: String
+  title: String
   type: InteractivityType
 }
 
@@ -6576,6 +6579,7 @@ enum InteractivityType {
   FIXED_BLOCK
   NONE
   POPUP
+  SIDEBAR_OVERLAY
   TOOLTIP
 }
 

diff --git a/packages/api/migrations/current.sql b/packages/api/migrations/current.sql
@@ -1 +1,4 @@
 -- Enter migration here
+ALTER TYPE interactivity_type ADD VALUE IF NOT EXISTS 'SIDEBAR_OVERLAY';
+
+alter table interactivity_settings add column if not exists title text not null default '';
diff --git a/packages/client/src/admin/data/InteractivitySettings.tsx b/packages/client/src/admin/data/InteractivitySettings.tsx
@@ -50,6 +50,7 @@ export default function InteractivitySettings({
   const attributeNames = useSourcePropertyNames(dataSourceId || 0, sublayer);
   const [shortTemplate, setShortTemplate] = useState(settings?.shortTemplate);
   const [longTemplate, setLongTemplate] = useState(settings?.longTemplate);
+  const [title, setTitle] = useState(settings?.title);
   const [pickLayersOpen, setPickLayersOpen] = useState(false);
 
   useEffect(() => {
@@ -59,6 +60,9 @@ export default function InteractivitySettings({
     if (settings && settings.longTemplate && longTemplate === undefined) {
       setLongTemplate(settings.longTemplate);
     }
+    if (settings && settings.title && title === undefined) {
+      setTitle(settings.title);
+    }
     if (settings && type === undefined) {
       setType(settings.type);
     }
@@ -72,6 +76,7 @@ export default function InteractivitySettings({
           type,
           longTemplate,
           shortTemplate,
+          title
         },
       });
     }
@@ -90,7 +95,11 @@ export default function InteractivitySettings({
     return input;
   }
 
-  const sanitizeTemplate = (propName: "longTemplate" | "shortTemplate") => {
+  const sanitizeTemplate = (propName: "longTemplate" | "shortTemplate" | "title") => {
+    console.log('sanitize', propName);
+    if (propName === "title") {
+      setTitle(title || "");
+    }
     if (propName === "longTemplate") {
       setLongTemplate(sanitizeInput(longTemplate || ""));
     } else {
@@ -134,82 +143,82 @@ export default function InteractivitySettings({
             },
             ...(!sublayer
               ? [
-                  {
-                    label: t("Banner"),
-                    description: basemap
-                      ? t(
-                          "Short text can be displayed towards the top of the map when the user hovers over features in the selected basemap layers."
-                        )
-                      : t(
-                          "Short text can be displayed towards the top of the map when the user hovers over features."
-                        ),
-                    value: InteractivityType.Banner,
-                    children: (
-                      <>
-                        <TemplateEditor
-                          type={InteractivityType.Banner}
-                          selectedType={selectedType}
-                          propName={"shortTemplate"}
-                          templateValue={shortTemplate || undefined}
-                          onSave={sanitizeTemplate}
-                          onChange={(value) => setShortTemplate(value)}
-                          attributeNames={attributeNames}
-                          basemap={basemap}
-                          layers={data.interactivitySetting?.layers as string[]}
-                          onSelectLayers={() => setPickLayersOpen(true)}
-                        />
-                      </>
-                    ),
-                  },
-                  {
-                    label: t("Tooltip"),
-                    description:
-                      "Short text is displayed next to the mouse cursor.",
-                    value: InteractivityType.Tooltip,
-                    children: (
-                      <>
-                        <TemplateEditor
-                          type={InteractivityType.Tooltip}
-                          selectedType={selectedType}
-                          propName={"shortTemplate"}
-                          templateValue={shortTemplate || undefined}
-                          onSave={sanitizeTemplate}
-                          onChange={(value) => setShortTemplate(value)}
-                          attributeNames={attributeNames}
-                          basemap={basemap}
-                          layers={data.interactivitySetting?.layers as string[]}
-                          onSelectLayers={() => setPickLayersOpen(true)}
-                        />
-                      </>
+                {
+                  label: t("Banner"),
+                  description: basemap
+                    ? t(
+                      "Short text can be displayed towards the top of the map when the user hovers over features in the selected basemap layers."
+                    )
+                    : t(
+                      "Short text can be displayed towards the top of the map when the user hovers over features."
                     ),
-                  },
-                ]
+                  value: InteractivityType.Banner,
+                  children: (
+                    <>
+                      <TemplateEditor
+                        type={InteractivityType.Banner}
+                        selectedType={selectedType}
+                        propName={"shortTemplate"}
+                        templateValue={shortTemplate || undefined}
+                        onSave={sanitizeTemplate}
+                        onChange={(value) => setShortTemplate(value)}
+                        attributeNames={attributeNames}
+                        basemap={basemap}
+                        layers={data.interactivitySetting?.layers as string[]}
+                        onSelectLayers={() => setPickLayersOpen(true)}
+                      />
+                    </>
+                  ),
+                },
+                {
+                  label: t("Tooltip"),
+                  description:
+                    "Short text is displayed next to the mouse cursor.",
+                  value: InteractivityType.Tooltip,
+                  children: (
+                    <>
+                      <TemplateEditor
+                        type={InteractivityType.Tooltip}
+                        selectedType={selectedType}
+                        propName={"shortTemplate"}
+                        templateValue={shortTemplate || undefined}
+                        onSave={sanitizeTemplate}
+                        onChange={(value) => setShortTemplate(value)}
+                        attributeNames={attributeNames}
+                        basemap={basemap}
+                        layers={data.interactivitySetting?.layers as string[]}
+                        onSelectLayers={() => setPickLayersOpen(true)}
+                      />
+                    </>
+                  ),
+                },
+              ]
               : []),
             ...(!sublayer
               ? [
-                  {
-                    label: "Custom Popup",
-                    description:
-                      "Popup windows can be opened and closed to show detailed information.",
-                    value: InteractivityType.Popup,
-                    children: (
-                      <>
-                        <TemplateEditor
-                          type={InteractivityType.Popup}
-                          selectedType={selectedType}
-                          propName={"longTemplate"}
-                          templateValue={longTemplate || undefined}
-                          onSave={sanitizeTemplate}
-                          onChange={(value) => setLongTemplate(value)}
-                          attributeNames={attributeNames}
-                          basemap={basemap}
-                          layers={data.interactivitySetting?.layers as string[]}
-                          onSelectLayers={() => setPickLayersOpen(true)}
-                        />
-                      </>
-                    ),
-                  },
-                ]
+                {
+                  label: "Custom Popup",
+                  description:
+                    "Popup windows can be opened and closed to show detailed information.",
+                  value: InteractivityType.Popup,
+                  children: (
+                    <>
+                      <TemplateEditor
+                        type={InteractivityType.Popup}
+                        selectedType={selectedType}
+                        propName={"longTemplate"}
+                        templateValue={longTemplate || undefined}
+                        onSave={sanitizeTemplate}
+                        onChange={(value) => setLongTemplate(value)}
+                        attributeNames={attributeNames}
+                        basemap={basemap}
+                        layers={data.interactivitySetting?.layers as string[]}
+                        onSelectLayers={() => setPickLayersOpen(true)}
+                      />
+                    </>
+                  ),
+                },
+              ]
               : []),
             {
               label: "Popup with all columns",
@@ -233,6 +242,37 @@ export default function InteractivitySettings({
             //     />
             //   ),
             // },
+            {
+              label: "Sidebar",
+              description:
+                "Similar to a popup, but the content is displayed in a sidebar.",
+              value: InteractivityType.SidebarOverlay,
+              children: <div className="mt-4">
+                <h4 className="text-sm font-normal">{t("Sidebar title")}</h4><p className="text-sm text-gray-500">{t("You may reference feature properties in the title but html tags will not be rendered")}</p>
+                <TemplateEditor
+                  type={InteractivityType.SidebarOverlay}
+                  selectedType={selectedType}
+                  propName={"title"}
+                  templateValue={title || undefined}
+                  onSave={sanitizeTemplate}
+                  onChange={(value) => setTitle(value)}
+                  attributeNames={attributeNames}
+                  basemap={basemap}
+                  layers={data.interactivitySetting?.layers as string[]}
+                  onSelectLayers={() => setPickLayersOpen(true)}
+                />
+                <h4 className="mt-4 text-sm font-normal">{t("Sidebar content")}</h4><p className="text-sm text-gray-500">{t("Content can reference feature properties and include html content.")}</p>
+                <TemplateEditor
+                  type={InteractivityType.SidebarOverlay}
+                  selectedType={selectedType}
+                  propName={"longTemplate"}
+                  templateValue={longTemplate || undefined}
+                  onSave={sanitizeTemplate}
+                  onChange={(value) => setLongTemplate(value)}
+                  attributeNames={attributeNames}
+                />
+              </div>,
+            },
           ]}
           value={selectedType}
           onChange={(type) => {
@@ -247,9 +287,9 @@ export default function InteractivitySettings({
 function TemplateEditor(props: {
   type: InteractivityType;
   selectedType: InteractivityType;
-  propName: "shortTemplate" | "longTemplate";
+  propName: "shortTemplate" | "longTemplate" | "title";
   templateValue: string | undefined;
-  onSave: (propName: "shortTemplate" | "longTemplate") => void;
+  onSave: (propName: "shortTemplate" | "longTemplate" | "title") => void;
   onChange: (value: string) => void;
   attributeNames: string[];
   layers?: string[];
@@ -274,7 +314,7 @@ function TemplateEditor(props: {
           onBeforeChange={(editor, data, value) => {
             props.onChange(value);
           }}
-          onChange={(editor, data, value) => {}}
+          onChange={(editor, data, value) => { }}
         />
         <Button small label={t("save")} onClick={onSave} />
         {props.basemap && (