temp

css/80_app.css

@@ -2495,6 +2495,28 @@ div.combobox {
     z-index: 10;
 }
 
+
+/* Field - Iframe
+------------------------------------------------------- */
+.form-field > iframe {
+    box-sizing: border-box;
+    border: 1px solid #ccc;
+    border-top: 0;
+
+    width: 100%;
+    height: 300px;
+}
+.form-field > iframe.full-screen {
+    width: 100vw;
+    height: 100vh;
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1000;
+}
+
 /* Field Help
 ------------------------------------------------------- */
 .field-help-body {

modules/presets/index.js

@@ -106,6 +106,13 @@ export function presetIndex() {
 
     // Merge Fields
     if (d.fields) {
+
+      // TEMP: merge custom fields
+      d.fields['Platform Exit Map'] = {
+        type: 'iframe',
+        url: 'https://kyle.kiwi/temp'
+      };
+
       Object.keys(d.fields).forEach(fieldID => {
         let f = d.fields[fieldID];
 
@@ -122,6 +129,14 @@ export function presetIndex() {
 
     // Merge Presets
     if (d.presets) {
+
+      // TEMP: merge custom presets
+      for (const id in d.presets) {
+        if (id.startsWith('public_transport/stop_position')) {
+          d.presets[id].fields.push('Platform Exit Map');
+        }
+      }
+
       Object.keys(d.presets).forEach(presetID => {
         let p = d.presets[presetID];
 

modules/ui/fields/iframe.js

@@ -0,0 +1,63 @@
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+import { select as d3_select } from 'd3-selection';
+import { utilRebind } from '../../util';
+
+export function uiFieldIframe(field, context) {
+    const id = Math.round(Math.random() * 1e15);
+    const dispatch = d3_dispatch('change');
+    let wrap = d3_select(null);
+    let _tags;
+
+    const frameOrigin = new URL(field.url).origin;
+    const frameUrl = new URL(field.url);
+    frameUrl.hash = window.location.origin;
+
+    /** @returns {HTMLIFrameElement=} */
+    const getIframe = () => document.querySelector(`.iframe-${field.safeid}`);
+
+    function sendToIframe() {
+        getIframe().contentWindow.postMessage({
+            tags: _tags,
+            locale: context.locale(),
+        }, frameOrigin);
+    }
+
+    /** @param {MessageEvent<unknown>} event */
+    function onMessage(event) {
+        if (+getIframe()?.dataset.instanceId !== id) {
+            console.log(`unsubsribe from ${id}`);
+            // this component has been unmounted, so unsubscribe
+            window.removeEventListener('message', onMessage);
+            return;
+        }
+
+        if (event.origin === frameOrigin) {
+            console.log('got', event.data);
+            if (typeof event.data === 'object' && typeof event.data.tags === 'object') {
+                dispatch.call('change', this, () => event.data.tags);
+            } else if (event.data === 'hydrate') {
+                sendToIframe();
+            }
+        }
+    };
+    window.addEventListener('message', onMessage);
+
+    function iframe(selection) {
+        wrap = selection.selectAll('.form-field-input-wrap')
+            .data([0]);
+
+        wrap = wrap.enter()
+            .append('iframe')
+            .attr('class', `form-field-input-wrap iframe-${field.safeid}`)
+            .attr('data-instance-id', id)
+            .attr('src', frameUrl.toString())
+            .merge(wrap);
+    }
+
+    iframe.tags = (tags) => {
+        _tags = tags;
+        sendToIframe();
+    };
+
+    return utilRebind(iframe, dispatch, 'on');
+}

modules/ui/fields/index.js

@@ -48,6 +48,7 @@ import {
 import { uiFieldAccess } from './access';
 import { uiFieldAddress } from './address';
 import { uiFieldDirectionalCombo } from './directional_combo';
+import { uiFieldIframe } from './iframe';
 import { uiFieldLanes } from './lanes';
 import { uiFieldLocalized } from './localized';
 import { uiFieldRoadheight } from './roadheight';
@@ -67,6 +68,7 @@ export var uiFields = {
     date: uiFieldText,
     defaultCheck: uiFieldDefaultCheck,
     directionalCombo: uiFieldDirectionalCombo,
+    iframe: uiFieldIframe,
     email: uiFieldEmail,
     identifier: uiFieldIdentifier,
     lanes: uiFieldLanes,