@cocreate/elements 1.48.0 → 2.0.0

package/CONTRIBUTING.md

@@ -1,19 +1,19 @@
 # Contributing to CoCreate-elements
 
-This project is work of [many contributors](https://github.com/CoCreate-app/CoCreate-elements/graphs/contributors).
-You're encouraged to submit [pull requests](https://github.com/CoCreate-app/CoCreate-elements/pulls),
-[propose features and discuss issues](https://github.com/CoCreate-app/CoCreate-elements/issues).
+This project is work of [many contributors](https://github.com/CoCreateJS/elements/graphs/contributors).
+You're encouraged to submit [pull requests](https://github.com/CoCreateJS/elements/pulls),
+[propose features and discuss issues](https://github.com/CoCreateJS/elements/issues).
 
 In the examples below, substitute your Github username for `contributor` in URLs.
 
 ## Fork the Project
 
-Fork the [project on Github](https://github.com/CoCreate-app/CoCreate-elements) and check out your copy.
+Fork the [project on Github](https://github.com/CoCreateJS/elements) and check out your copy.
 
 ```
 git elements https://github.com/contributor/CoCreate-elements.git
 cd CoCreate-elements
-git remote add upstream https://gitlab.com/cocreatejs/CoCreate-elements.git
+git remote add upstream https://github.com/CoCreateJS/elements.git
 ```
 
 ## Create a Topic Branch
@@ -75,7 +75,7 @@ git push origin my-feature-branch
 
 ## Make a Pull Request
 
-Go to [https://github.com/CoCreate-app/CoCreate-elements](https://github.com/CoCreate-app/CoCreate-elements) and select your feature branch.
+Go to [https://github.com/CoCreateJS/elements](https://github.com/CoCreateJS/elements) and select your feature branch.
 Click the 'Pull Request' button and fill out the form. Pull requests are usually reviewed within a few days.
 
 ## Rebase

package/README.md

@@ -6,7 +6,7 @@ Bind any HTML element directly to your data using HTML5 attributes. An element d
 
 ## Documentation
 
-For a complete guide and working demo refer to the [documentation](https://cocreate.app/docs/elements).
+For a complete guide and working demo refer to the [documentation](https://CoCreateJS.com/docs/elements).
 
 ## Table of Contents
 
@@ -61,7 +61,7 @@ yarn add @cocreate/elements
 ### CDN
 
 ```html
-<script src="https://cdn.cocreate.app/elements/latest/CoCreate-elements.min.js"></script>
+<script src="https://cdn.CoCreateJS.com/elements/latest/CoCreate-elements.min.js"></script>
 ```
 
 ---
@@ -437,7 +437,7 @@ elements.init(document.querySelector("#profile"));
 
 ## Announcements
 
-All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreate-app/CoCreate-elements/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreate-app/CoCreate-elements/releases). You may also subscribe to email for releases and breaking changes.
+All updates to this library are documented in our [CHANGELOG](https://github.com/CoCreateJS/elements/blob/master/CHANGELOG.md) and [releases](https://github.com/CoCreateJS/elements/releases). You may also subscribe to email for releases and breaking changes.
 
 ---
 
@@ -451,15 +451,15 @@ Upcoming enhancements include:
 * Development mode diagnostics for unbound and misconfigured scopes
 * Devtools inspection of an element's scope and subscriptions
 
-If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreate-app/CoCreate-elements/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-elements/pulls). We would love to hear your feedback.
+If you are interested in the future direction of this project, please take a look at our open [issues](https://github.com/CoCreateJS/elements/issues) and [pull requests](https://github.com/CoCreateJS/elements/pulls). We would love to hear your feedback.
 
 ---
 
 ## How to Contribute
 
-We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreate-app/CoCreate-elements/blob/master/CONTRIBUTING.md) guide for details.
+We encourage contribution to our libraries (you might even score some nifty swag), please see our [CONTRIBUTING](https://github.com/CoCreateJS/elements/blob/master/CONTRIBUTING.md) guide for details.
 
-We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreate-app/CoCreate-elements/issues) and [pull requests](https://github.com/CoCreate-app/CoCreate-elements/pulls) or merely upvote or comment on existing issues or pull requests.
+We want this library to be community-driven, and CoCreate led. We need your help to realize this goal. To help make sure we are building the right things in the right order, we ask that you create [issues](https://github.com/CoCreateJS/elements/issues) and [pull requests](https://github.com/CoCreateJS/elements/pulls) or merely upvote or comment on existing issues or pull requests.
 
 We appreciate your continued support, thank you!
 
@@ -469,7 +469,7 @@ We appreciate your continued support, thank you!
 
 CoCreate-elements is guided and supported by the CoCreate Developer Experience Team.
 
-Please Email the Developer Experience Team [here](mailto:develop@cocreate.app) in case of any queries.
+Please Email the Developer Experience Team [here](mailto:develop@CoCreateJS.com) in case of any queries.
 
 CoCreate-elements is maintained and funded by CoCreate. The names and logos for CoCreate are trademarks of CoCreate, LLC.
 
@@ -479,9 +479,9 @@ CoCreate-elements is maintained and funded by CoCreate. The names and logos for
 
 This software is dual-licensed under the GNU Affero General Public License version 3 (AGPLv3) and a commercial license.
 
-* **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/CoCreate-app/CoCreate-elements/blob/master/LICENSE).
+* **Open Source Use**: For open-source projects and non-commercial use, this software is available under the AGPLv3. The AGPLv3 allows you to freely use, modify, and distribute this software, provided that all modifications and derivative works are also licensed under the AGPLv3. For the full license text, see the [LICENSE file](https://github.com/CoCreateJS/elements/blob/master/LICENSE).
 
-* **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://cocreate.app). This license permits proprietary use and modification of the software without the copyleft requirements of the AGPLv3. It is ideal for integrating this software into proprietary commercial products and applications.
+* **Commercial Use**: For-profit companies and individuals intending to use this software for commercial purposes must obtain a commercial license. The commercial license is available when you sign up for an API key on our [website](https://CoCreateJS.com). This license permits proprietary use and modification of the software without the copyleft requirements of the AGPLv3. It is ideal for integrating this software into proprietary commercial products and applications.
 
 If you have not purchased a commercial license and intend to use this software for commercial purposes, you are required to sign up for an API key on our website.
 

package/demo/index.html

@@ -195,6 +195,6 @@
 
 		<!-- <script src="../dist/CoCreate-elements.js"></script> -->
 		<!-- <script src="../../../CoCreateJS/dist/CoCreate.js"></script> -->
-		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
+		<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
 	</body>
 </html>

package/docs/index.html

@@ -13,7 +13,7 @@
 		<meta name="robots" content="index,follow" />
 		<meta
 			property="og:image"
-			content="https://cdn.cocreate.app/docs/elements.png" />
+			content="https://cdn.CoCreateJS.com/docs/elements.png" />
 
 		<title>CoCreate-elements Documentation | CoCreateJS</title>
 
@@ -22,7 +22,7 @@
 			rel="icon"
 			type="image/png"
 			sizes="32x32"
-			href="https://cocreate.app/images/favicon.ico" />
+			href="https://CoCreateJS.com/images/favicon.ico" />
 		<link
 			rel="stylesheet"
 			href="../index.css"
@@ -75,7 +75,7 @@
 						share-title="CoCreate elements"
 						share-height="600"
 						share-width="700"
-						share-media="https://cdn.cocreate.app/docs/elements.png"
+						share-media="https://cdn.CoCreateJS.com/docs/elements.png"
 						hover="display:block!important"
 						hover-query=".social-networks">
 						<div class="display:none social-networks">
@@ -106,7 +106,7 @@
 						></a>
 					</div>
 					<a
-						href="https://github.com/CoCreate-app/CoCreate-elements"
+						href="https://github.com/CoCreateJS/CoCreate-elements"
 						target="_blank"
 						class="margin-right:15px"
 						><i src="/assets/svg/github.svg"></i
@@ -145,7 +145,7 @@
 					<p class="padding:10px_0px line-height:1.5">
 						Or you can use cdn link:
 					</p>
-					<pre><code class="language-html">&lt;script&gt;https://cdn.cocreate.app/elements/latest/CoCreate-elements.min.js&lt;/script&gt;</code></pre>
+					<pre><code class="language-html">&lt;script&gt;https://cdn.CoCreateJS.com/elements/latest/CoCreate-elements.min.js&lt;/script&gt;</code></pre>
 
 					<div
 						id="elements-usage"
@@ -330,13 +330,13 @@
 				</div>
 			</div>
 			<button
-				href="https://github.com/CoCreate-app/CoCreate-elements/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
+				href="https://github.com/CoCreateJS/CoCreate-elements/tree/master/docs/index.html?message=docs%3A%20describe%20your%20change..."
 				target="_blank"
 				class="display:flex justify-content:center align-items:center position:fixed bottom:15px right:15px height:50px width:50px border-radius:50% box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4)">
 				<i src="../assets/svg/pencil-alt.svg"></i>
 			</button>
 		</main>
 
-		<script src="https://CoCreate.app/dist/CoCreate.js"></script>
+		<script src="https://CoCreateJS.com/dist/CoCreate.js"></script>
 	</body>
 </html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cocreate/elements",
-  "version": "1.48.0",
+  "version": "2.0.0",
   "description": "Fetch content into any html element by using html5 attributes to query data stored in CoCreate headless CMS. If data is changed it will instantly reflect in html tags as changes are broadcasted in realtime",
   "keywords": [
     "elements",
@@ -22,17 +22,17 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://gitlab.com/cocreatejs/CoCreate-elements.git"
+    "url": "git+https://github.com/CoCreateJS/elements.git"
   },
   "author": "CoCreate LLC",
   "license": "AGPL-3.0",
   "bugs": {
-    "url": "https://github.com/CoCreate-app/CoCreate-elements/issues"
+    "url": "https://github.com/CoCreateJS/elements/issues"
   },
-  "homepage": "https://cocreate.app/docs/elements",
+  "homepage": "https://CoCreateJS.com/docs/elements",
   "funding": {
     "type": "GitHub Sponsors ❤",
-    "url": "https://github.com/sponsors/CoCreate-app"
+    "url": "https://github.com/sponsors/CoCreateJS"
   },
   "main": "./src/index.js",
   "dependencies": {

package/src/crudHandler.js

@@ -205,7 +205,9 @@ export async function save(element, action) {
                 array: data[i].array,
                 key: data[i].key,
                 object: data[i].object._id,
-                value
+                value,
+                realtime: true,
+                commit: true
             });
         }
 

package/src/dataHandler.js

@@ -0,0 +1,7 @@
+// CRUD runtime. Loaded by data selectors, CRUD actions, or an Elements API call.
+import "@cocreate/element-prototype";
+
+export { init } from "./initHandler.js";
+export { read, save } from "./crudHandler.js";
+export { getData } from "./getDataHandler.js";
+export { setDataType } from "./setDataHandler.js";

package/src/dataObject.js

@@ -0,0 +1,54 @@
+import { getAttributes, checkValue } from "@cocreate/utils";
+
+export const environment = localStorage.getItem("environment");
+
+/**
+ * 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;
+
+        if (data[crudType[i]] && data[crudType[i]].includes(",")) {
+            const array = data[crudType[i]].split(",");
+            data[crudType[i]] = [];
+
+            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);
+                }
+            }
+        }
+    }
+
+    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";
+
+    if (
+        environment &&
+        !data.database &&
+        ["array", "index", "object"].includes(data.type)
+    )
+        data.database = environment;
+
+    delete data.isRealtime;
+    return data;
+}

package/src/formHandler.js

@@ -2,6 +2,7 @@ import Observer from "@cocreate/observer";
 import { getAttributeNames, ObjectId, queryElements } from "@cocreate/utils";
 import Action from "@cocreate/actions";
 import elementPrototype from "@cocreate/element-prototype";
+import { formSelector } from "./formSelectors.js";
 
 /**
  * Initializes form elements. If no parameter is provided, or null is passed, it queries and initializes all form elements.
@@ -13,7 +14,7 @@ import elementPrototype from "@cocreate/element-prototype";
  *     - If an array of form elements is provided, each element in the array is initialized.
  */
 function init(elements) {
-    if (!elements) elements = document.querySelectorAll("form, fieldset");
+    if (!elements) elements = document.querySelectorAll(formSelector);
     else if (!Array.isArray(elements)) elements = [elements];
 
     for (let element of elements) {
@@ -242,7 +243,7 @@ function setValue(form) {
 Observer.init({
     name: "CoCreateForm",
     types: ["addedNodes"],
-    selector: "form, fieldset",
+    selector: formSelector,
     callback: (mutation) => init(mutation.target)
 });
 
@@ -258,7 +259,7 @@ Observer.init({
         "object",
         "index"
     ]),
-    selector: "form, fieldset",
+    selector: formSelector,
     callback: (mutation) => setAttribute(mutation.target, null, [mutation.attributeName])
 });
 

package/src/formSelectors.js

@@ -0,0 +1 @@
+export const formSelector = "form, fieldset";

package/src/getDataHandler.js

@@ -1,8 +1,3 @@
-import {
-    getAttributes,
-    checkValue
-} from "@cocreate/utils";
-
 import {
     elements,
     forms,
@@ -13,7 +8,8 @@ import {
 import { getSubscription } from "./subscribeHandler.js";
 import { read, save } from "./crudHandler.js";
 
-const environment = localStorage.getItem("environment");
+import { environment, getDataObject } from "./dataObject.js";
+export { getDataObject } from "./dataObject.js";
 
 function registerFormElement(form, element, data) {
     if (!form || !data?.type) return;
@@ -37,57 +33,6 @@ function registerFormElement(form, element, data) {
     formObject.types.get(data.type).set(element, data);
 }
 
-/**
- * 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;
-
-        if (data[crudType[i]] && data[crudType[i]].includes(",")) {
-            const array = data[crudType[i]].split(",");
-            data[crudType[i]] = [];
-
-            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);
-                }
-            }
-        }
-    }
-
-    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";
-
-    if (
-        environment &&
-        !data.database &&
-        ["array", "index", "object"].includes(data.type)
-    )
-        data.database = environment;
-
-    delete data.isRealtime;
-    return data;
-}
-
 /**
  * Registers an element and its generated dataKey into local client maps.
  * Binds element save/read helper methods and associates form context.

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]);
+    }
+});