@cocreate/elements 1.46.0 → 2.0.0

package/src/getDataHandler.js

@@ -1,53 +1,36 @@
 import {
-    getAttributes,
-    checkValue
-} from "@cocreate/utils";
+    elements,
+    forms,
+    keys,
+    elementSubscriptions,
+    subscriptions
+} from "./mapRegistry.js";
+import { getSubscription } from "./subscribeHandler.js";
+import { read, save } from "./crudHandler.js";
 
-import { elements, forms, keys } from "./mapRegistry.js";
-import { subscribe } from "./subscribeHandler.js";
+import { environment, getDataObject } from "./dataObject.js";
+export { getDataObject } from "./dataObject.js";
 
-/**
- * Parses and normalizes HTML attributes from an element into a canonical CRUD data object.
- * Infers execution type (object, index, array, database, storage, data) dynamically.
- * 
- * @param {Element} element 
- * @returns {Object|undefined} Normalized data payload object
- */
-export function getDataObject(element) {
-    const data = getAttributes(element);
-    const crudType = ["storage", "database", "array", "index", "object"];
-
-    for (let i = 0; i < crudType.length; i++) {
-        if (!checkValue(data[crudType[i]])) return;
+function registerFormElement(form, element, data) {
+    if (!form || !data?.type) return;
 
-        if (data[crudType[i]] && data[crudType[i]].includes(",")) {
-            const array = data[crudType[i]].split(",");
-            data[crudType[i]] = [];
+    if (!form.save) form.save = () => save(form);
+    if (!form.getData) form.getData = () => getData(form);
 
-            for (let j = 0; j < array.length; j++) {
-                const item = array[j].trim();
-                if (crudType[i] === "object") {
-                    data[crudType[i]].push({ _id: item });
-                } else {
-                    data[crudType[i]].push(item);
-                }
-            }
-        }
+    let formObject = forms.get(form);
+    if (!formObject) {
+        formObject = {
+            elements: new Map(),
+            types: new Map()
+        };
+        forms.set(form, formObject);
     }
 
-    if (data.object || data.object === "" || data.key || data.key === "") {
-        if (!data.array || (data.array && !data.array.length)) return;
-        data.type = "object";
-    } else if (data.index || data.index === "") {
-        if (!data.array || (data.array && !data.array.length)) return;
-        data.type = "index";
-    } else if (data.array || data.array === "") data.type = "array";
-    else if (data.database || data.database === "") data.type = "database";
-    else if (data.storage || data.storage === "") data.type = "storage";
-    else if (data.data) data.type = "data";
-
-    delete data.isRealtime;
-    return data;
+    formObject.elements.set(element, data);
+    if (!formObject.types.has(data.type)) {
+        formObject.types.set(data.type, new Map());
+    }
+    formObject.types.get(data.type).set(element, data);
 }
 
 /**
@@ -59,7 +42,10 @@ export function getDataObject(element) {
  * @returns {{ string: string, object: Object }}
  */
 export function initDataKey(element, data) {
+    if (!data.database && environment) data.database = environment;
+
     const dataKey = getDataKey(data);
+    const subscription = getSubscription(data);
 
     if (keys.has(dataKey.string)) {
         keys.get(dataKey.string).elements.set(element, "");
@@ -69,34 +55,27 @@ export function initDataKey(element, data) {
             data,
             dataKey
         });
-        subscribe(dataKey, data);
     }
 
-    elements.set(element, dataKey.string);
-
-    if (element.parentElement) {
-        const form = element.closest("form");
-        if (form) {
-            if (!form.save) form.save = () => save(form);
-            if (!form.getData) form.getData = () => getData(form);
-
-            let formObject = forms.get(form);
-            if (formObject) {
-                formObject.elements.set(element, data);
-                if (formObject.types.has(data.type)) {
-                    formObject.types.get(data.type).set(element, data);
-                } else {
-                    formObject.types.set(data.type, new Map([[element, data]]));
-                }
-            } else {
-                forms.set(form, {
-                    elements: new Map([[element, data]]),
-                    types: new Map([[data.type, new Map([[element, data]])]])
-                });
-            }
+    if (subscription) {
+        let subscriptionEntry = subscriptions.get(subscription.string);
+        if (subscriptionEntry) {
+            subscriptionEntry.elements.add(element);
+        } else {
+            subscriptionEntry = {
+                elements: new Set([element]),
+                subscription
+            };
+            subscriptions.set(subscription.string, subscriptionEntry);
         }
+        elementSubscriptions.set(element, subscription.string);
     }
 
+    elements.set(element, dataKey.string);
+
+    const form = element.form || element.closest?.("form");
+    registerFormElement(form, element, data);
+
     if (!element.read) element.read = () => read(element);
     if (!element.save) element.save = () => save(element);
 
@@ -113,6 +92,8 @@ export function initDataKey(element, data) {
  */
 export function getDataKey(data) {
     const dataKey = {};
+    if (!data.database && environment) data.database = environment;
+
     const attributes = [
         "host",
         "organization_id",
@@ -126,13 +107,13 @@ export function getDataKey(data) {
         "object",
         "key",
         "updateKey",
-        "$filter",
+        "filter",
         "upsert",
         "namespace",
         "room",
         "broadcast",
         "broadcastSender",
-        "broadcastBrowser"
+        "broadcastClient"
     ];
 
     for (const attribute of attributes) {
@@ -193,7 +174,7 @@ export function getDataKeys(data) {
         "array",
         "index",
         "object",
-        "$filter"
+        "filter"
     ];
 
     for (const [keyString, sortedKey] of keys.entries()) {
@@ -201,8 +182,8 @@ export function getDataKeys(data) {
 
         for (const key of targetKeys) {
             if (
-                !data.$filter &&
-                key === "$filter" &&
+                !data.filter &&
+                key === "filter" &&
                 sortedKey.data.hasOwnProperty(key)
             ) {
                 hasMatch = true;
@@ -211,25 +192,28 @@ export function getDataKeys(data) {
                     hasMatch = false;
                     break;
                 }
+
+                // Filtered object elements watch a collection query, not one
+                // specific object. Creates and updates contain the affected
+                // object(s), so their object shape will not match the empty
+                // object scope used when the filtered element was registered.
+                if (key === "object" && sortedKey.data.filter) continue;
+
                 if (
                     Array.isArray(sortedKey.data[key]) &&
                     Array.isArray(data[key])
                 ) {
-                    if (key === "object" && sortedKey.data.$filter) {
-                        hasMatch = true;
-                    } else {
-                        const matches = sortedKey.data[key].some((value) => {
-                            if (key === "object") {
-                                return data[key].some((obj) => obj._id === value._id);
-                            } else {
-                                return data[key].includes(value);
-                            }
-                        });
-
-                        if (!matches) {
-                            hasMatch = false;
-                            break;
+                    const matches = sortedKey.data[key].some((value) => {
+                        if (key === "object") {
+                            return data[key].some((obj) => obj._id === value._id);
+                        } else {
+                            return data[key].includes(value);
                         }
+                    });
+
+                    if (!matches) {
+                        hasMatch = false;
+                        break;
                     }
                 } else if (sortedKey.data[key] !== data[key]) {
                     hasMatch = false;
@@ -264,7 +248,7 @@ function formatPayload(payload, value, element) {
                     } else payload.object = { ...payload.object, ...value };
                 } else payload.object[payload.key] = value;
             }
-            if (payload.isUpsert && payload.$filter)
+            if (payload.isUpsert && payload.filter)
                 payload.method = "object.update";
         } else payload[payload.type] = value;
     } else if (payload[payload.type] && payload.key) {
@@ -352,19 +336,27 @@ function formatPayload(payload, value, element) {
  */
 export async function getData(form) {
     const dataKeys = new Map();
-    const formObject = forms.get(form);
-
-    if (!formObject) {
-        const selector = "[storage], [database], [array], [object]";
-        const elementsInForm = form.querySelectorAll(selector);
-        await init(elementsInForm);
-        return await getData(form);
+    const selector = "[storage], [database], [array], [object]";
+
+    // form.elements includes controls associated through form="id", even when
+    // the controller lives elsewhere in the document.
+    for (const element of Array.from(form.elements || [])) {
+        if (!element.matches(selector) || element.closest("[template]")) continue;
+
+        // A dataKey identifies the document scope and intentionally excludes
+        // the field-level `key`. Reusing the registry entry's data here would
+        // therefore give every control the key of the first registered field.
+        const data = getDataObject(element);
+        registerFormElement(form, element, data);
     }
 
+    const formObject = forms.get(form);
+    if (!formObject) return [];
 
     for (const type of formObject.types.values()) {
         for (const [element, data] of type.entries()) {
             if (
+                element.closest("[template]") ||
                 !element.hasAttribute("key") ||
                 element.getAttribute("save") === "false"
             ) {
@@ -384,6 +376,17 @@ export async function getData(form) {
             const value = await element.getValue();
             if (value === undefined) continue;
 
+            // A form can expose multiple file sources (for example, device and
+            // camera) while only one source has a pending selection. An unused
+            // file input must not produce an empty object.create operation.
+            if (
+                element.matches('input[type="file"]') &&
+                Array.isArray(value) &&
+                value.length === 0
+            ) {
+                continue;
+            }
+
             const payload = { ...data };
             const dataKey = elements.get(element);
 
@@ -414,4 +417,4 @@ export default {
     getDataKeys,
     getData,
     getDataObject
-};
+};

package/src/hrefHandler.js

@@ -0,0 +1,104 @@
+import Actions from "@cocreate/actions";
+import { queryElements } from "@cocreate/utils";
+
+const selector = "[href], [target]";
+
+function init() {
+    document.link ||= { islink: "true" };
+    document.addEventListener("click", linkEvent, true);
+}
+
+// Delegation also handles links inserted after this feature loads.
+function linkEvent(event) {
+    const target = event.target.closest?.(selector);
+    if (!target || target.hasAttribute("download") || target.closest("[actions]")) return;
+    open(target, event);
+}
+
+function open(target, event) {
+    if (!target) return;
+    const doc = target.ownerDocument || document;
+    if (doc.link?.islink === "false" || doc.link?.islink === false) return;
+    if (!target.getAttribute("href")) return;
+    event?.preventDefault();
+    openLink(target);
+}
+
+function openLink(link) {
+    const href = link.getAttribute("href");
+    const target = link.getAttribute("target");
+
+    if (!target || target === "_self") {
+        const currentUrl = new URL(location.href);
+        const targetUrl = new URL(href, location.href);
+        const currentPath = currentUrl.pathname.replace("/index.html", "/");
+        const targetPath = targetUrl.pathname.replace("/index.html", "/");
+        if (currentPath !== targetPath || currentUrl.hash !== targetUrl.hash) {
+            location.href = href;
+        }
+    } else if (target === "_window") {
+        window.open(href, "_blank", "location=yes,height=570,width=520,scrollbars=yes,status=yes");
+    } else {
+        window.open(href, target);
+    }
+}
+
+// Actions passes its chain element; resolve its associated link before opening it.
+function href(element, context) {
+    const link = element.closest("[href], [target], [state_to]") ||
+        element.querySelector("[href], [target], [state_to]");
+    if (!link || link.hasAttribute("download")) return;
+    return open(link, context?.event);
+}
+
+function linkDocuments(element) {
+    const targets = element.hasAttribute("link-query")
+        ? queryElements({ element, prefix: "link" }) : [document];
+    return new Set(targets.map(target => target.nodeType === 9 ? target :
+        target.contentDocument || target.document || target.ownerDocument).filter(Boolean));
+}
+
+function disableHref(element) {
+    for (const doc of linkDocuments(element)) {
+        doc.link = { islink: "false" };
+        doc.removeEventListener("click", linkEvent, true);
+        doc.addEventListener("click", preventDefault, true);
+    }
+}
+
+function enableHref(element) {
+    for (const doc of linkDocuments(element)) {
+        doc.link = { islink: "true" };
+        doc.removeEventListener("click", preventDefault, true);
+        doc.addEventListener("click", linkEvent, true);
+    }
+}
+
+function preventDefault(event) {
+    event.preventDefault();
+}
+
+Actions.init([
+    {
+        name: "disableHref",
+        endEvent: "disableHref",
+        callback: action => {
+            disableHref(action.element);
+            action.end();
+        }
+    },
+    {
+        name: "enableHref",
+        endEvent: "enableHref",
+        callback: action => {
+            enableHref(action.element);
+            action.end();
+        }
+    }
+]);
+
+Actions.href = href;
+init();
+
+export { open, disableHref, enableHref };
+export default { open, disableHref, enableHref };

package/src/iframeHandler.js

@@ -0,0 +1,90 @@
+import observer from "@cocreate/observer";
+import { relayEvents } from "@cocreate/utils/iframe";
+
+export function clickedElement(frames) {
+    for (const frame of frames) {
+        try {
+            const frameDocument = frame.contentDocument;
+            if (frameDocument.clickedElement === undefined) {
+                frameDocument.addEventListener("click", (e) => {
+                    frame.clickedElement = e.target;
+                    frameDocument.clickedElement = e.target;
+                    const ClickedElementEvent = frame.ownerDocument.defaultView.CustomEvent;
+                    frame.dispatchEvent(new ClickedElementEvent("clickedElement", {
+                        bubbles: true,
+                        detail: {
+                            cursor: { x: e.clientX, y: e.clientY },
+                            document: frameDocument
+                        }
+                    }));
+                });
+                frameDocument.clickedElement = null;
+            }
+        } catch (iframeError) {
+            console.log(
+                `Cross-origin frame handling failed for: ${frame}`,
+                iframeError
+            );
+        }
+    }
+}
+
+export function hoveredElement(frames) {
+    for (const frame of frames) {
+        try {
+            const frameDocument = frame.contentDocument;
+            if (frameDocument.hoveredElement === undefined) {
+                frameDocument.hoveredElement = null;
+                frame.hoveredElement = null;
+
+                const emitHoveredElement = (event) => {
+                    const HoveredElementEvent = frame.ownerDocument.defaultView.CustomEvent;
+                    frame.dispatchEvent(new HoveredElementEvent("hoveredElement", {
+                        bubbles: true,
+                        detail: {
+                            cursor: { x: event.clientX, y: event.clientY },
+                            document: frameDocument
+                        }
+                    }));
+                };
+
+                frameDocument.addEventListener("mouseover", (event) => {
+                    frame.hoveredElement = event.target;
+                    frameDocument.hoveredElement = event.target;
+                    emitHoveredElement(event);
+                });
+                frameDocument.addEventListener("mouseout", (event) => {
+                    const nextElement = event.relatedTarget;
+                    frame.hoveredElement = nextElement;
+                    frameDocument.hoveredElement = nextElement;
+                    emitHoveredElement(event);
+                });
+                frameDocument.addEventListener("mousemove", (event) => {
+                    frame.hoveredElement = event.target;
+                    frameDocument.hoveredElement = event.target;
+                    emitHoveredElement(event);
+                });
+            }
+        } catch (iframeError) {
+            console.log(
+                `Cross-origin frame handling failed for: ${frame}`,
+                iframeError
+            );
+        }
+    }
+}
+
+clickedElement(document.querySelectorAll("iframe"));
+hoveredElement(document.querySelectorAll("iframe"));
+relayEvents(document.querySelectorAll("iframe"));
+
+observer.init({
+    name: "CoCreateIframes",
+    types: ["addedNodes"],
+    selector: "iframe",
+    callback: (mutation) => {
+        clickedElement([mutation.target]);
+        hoveredElement([mutation.target]);
+        relayEvents([mutation.target]);
+    }
+});