npm - playhtml - Versions diffs - 0.1.5 → 0.1.7 - Mend

playhtml 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/LICENSE ADDED Viewed

@@ -0,0 +1,21 @@
+MIT License
+Copyright (c) 2023 Spencer Chang
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md CHANGED Viewed

@@ -5,7 +5,7 @@ _interactive, collaborative html elements with a single data attribute_
 playhtml is a library for magically creating collaborative interactive HTML elements that persist their state across sessions. For example, you can create a movable piece of HTML "furniture" by adding the `can-move` attribute:
 ```html
-<div can-move style="font-size: 80px">🛋</div>
+<div id="couch" can-move style="font-size: 80px">🛋</div>
 ```
 This is designed as an open library for anyone to add on new interactions and capabilities. To get started, see the [New Capabilities](#new-capabilities).
@@ -14,11 +14,19 @@ https://github.com/spencerc99/playhtml/assets/14796580/00e84e15-2c1c-4b4b-8e15-2
 ## Usage
-To use this library, you can import the library and the associated styles from a CDN (in this case we will use [unpkg.com](https://unpkg.com)). Please make sure to do this after all the HTML elements on the page.
+To use this library, you can import the library and the associated styles from a CDN (in this case we will use [unpkg.com](https://unpkg.com)). Please make sure to do this after all the HTML elements on the page and ensure that the HTML elements you are "magic-ifying" have an `id` set.
 ```html
 <body>
   <!-- ... html elements here -->
+  <!-- valid example -->
+  <img
+    src="https://media2.giphy.com/media/lL7A3Li0YtFHq/giphy.gif?cid=ecf05e47ah89o71gzz7ke7inrgb1ai1xcbrjnqdf7o890118&ep=v1_stickers_search&rid=giphy.gif"
+    can-move
+  />
+  id="openSign"
+  <!-- INVALID EXAMPLE <img src="https://media2.giphy.com/media/lL7A3Li0YtFHq/giphy.gif?cid=ecf05e47ah89o71gzz7ke7inrgb1ai1xcbrjnqdf7o890118&ep=v1_stickers_search&rid=giphy.gif" can-move /> -->
+  <!-- import the script -->
   <script type="module" src="https://unpkg.com/playhtml"></script>
   <link rel="stylesheet" href="https://unpkg.com/playhtml/dist/style.css" />
 </body>
@@ -46,4 +54,4 @@ Outside of contributing new capabilities, feel free to submit any issues or PRs
 ## Support & Maintenance
-If you enjoy the idea of this library or like using it, please consider [sponsoring the project](https://github.com/sponsors/spencerc99). This will help ensure that the library is maintained and improved over time.
+If you enjoy the idea of this library or like using it, please consider [sponsoring the project](https://github.com/sponsors/spencerc99). This helps ensure that the library is maintained and improved over time and funds the hosting costs for the syncing and persistence services.

package/dist/elements.d.ts CHANGED Viewed

@@ -1,34 +1,46 @@
 /// <reference lib="dom" />
 import { TagType } from "./types";
 type ModifierKey = "ctrlKey" | "altKey" | "shiftKey" | "metaKey";
-interface ElementInitializer<T = any> {
+interface ElementInitializer<T = any, U = any> {
     defaultData: T;
-    updateElement: (element: HTMLElement, data: T) => void;
-    onClick?: (e: MouseEvent, data: T, element: HTMLElement) => T;
-    onDrag?: (e: MouseEvent, data: T, element: HTMLElement) => T;
-    onDragStart?: (e: MouseEvent, data: T, element: HTMLElement) => T;
-    onMouseEnter?: (e: MouseEvent, data: T, element: HTMLElement) => T;
-    onKeyDown?: (e: KeyboardEvent, data: T, element: HTMLElement) => T;
-    onKeyUp?: (e: KeyboardEvent, data: T, element: HTMLElement) => T;
+    defaultLocalData?: U;
+    updateElement: (data: ElementEventHandlerData<T, U>) => void;
+    onClick?: (e: MouseEvent, eventData: ElementEventHandlerData<T, U>) => void;
+    onDrag?: (e: MouseEvent, eventData: ElementEventHandlerData<T, U>) => void;
+    onDragStart?: (e: MouseEvent, eventData: ElementEventHandlerData<T, U>) => void;
+    onMouseEnter?: (e: MouseEvent, eventData: ElementEventHandlerData<T, U>) => void;
+    onKeyDown?: (e: KeyboardEvent, eventData: ElementEventHandlerData<T, U>) => void;
+    onKeyUp?: (e: KeyboardEvent, eventData: ElementEventHandlerData<T, U>) => void;
+    onSubmit?: (e: SubmitEvent, eventData: ElementEventHandlerData<T, U>) => void;
     resetShortcut?: ModifierKey;
     debounceMs?: number;
 }
-export interface ElementData<T = any> extends ElementInitializer<T> {
+export interface ElementData<T = any, U = any> extends ElementInitializer<T> {
     data?: T;
+    localData?: U;
     element: HTMLElement;
     onChange: (data: T) => void;
 }
+interface ElementEventHandlerData<T = any, U = any> {
+    data: T;
+    localData: U;
+    element: HTMLElement;
+    setData: (data: T) => void;
+    setLocalData: (data: U) => void;
+}
 export declare const TagTypeToElement: Record<TagType, ElementInitializer>;
-export declare class ElementHandler<T = any> {
+export declare class ElementHandler<T = any, U = any> {
     defaultData: T;
+    localData: U;
     element: HTMLElement;
     _data: T;
     onChange: (data: T) => void;
     debouncedOnChange: (data: T) => void;
     resetShortcut?: ModifierKey;
-    updateElement: (element: HTMLElement, data: T) => void;
-    constructor({ element, onChange, defaultData, data, updateElement, onClick, onDrag, onDragStart, onMouseEnter, onKeyDown, onKeyUp, resetShortcut, debounceMs, }: ElementData<T>);
+    updateElement: (data: ElementEventHandlerData<T, U>) => void;
+    constructor({ element, onChange, defaultData, defaultLocalData, data, updateElement, onClick, onDrag, onDragStart, onMouseEnter, onKeyDown, onKeyUp, onSubmit, resetShortcut, debounceMs, }: ElementData<T>);
     get data(): T;
+    setLocalData(localData: U): void;
     /**
      * // PRIVATE USE ONLY \\
      *
@@ -37,10 +49,11 @@ export declare class ElementHandler<T = any> {
      * (e.g. calling `updateElement` and `onChange`)
      */
     set __data(data: T);
+    getEventHandlerData(): ElementEventHandlerData<T, U>;
     /**
      * Public-use setter for data that makes the change to all clients.
      */
-    set data(data: T);
+    setData(data: T): void;
     setDataDebounced(data: T): void;
     /**
      * Resets the element to its default state.

package/dist/main.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 /// <reference lib="dom" />
 import * as Y from "yjs";
 export declare const globalData: Y.Map<Y.Map<any>>;
+export declare function getElementFromId(id: string): HTMLElement | null;
 /**
  * Sets up any playhtml elements that are currently on the page.
  * Can be repeatedly called to set up new elements without affecting existing ones.

package/dist/noguchi-akari-a1.png ADDED Viewed

Binary file