npm - playhtml - Versions diffs - 0.1.6 → 0.1.8 - Mend

playhtml 0.1.6 → 0.1.8

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,20 +5,30 @@ _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).
 https://github.com/spencerc99/playhtml/assets/14796580/00e84e15-2c1c-4b4b-8e15-2af22f39db7a
+If you enjoy this, please consider [sponsoring the project or sending a small donation](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.
 ## 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>
@@ -32,18 +42,51 @@ If you have dynamic elements that are hydrated after the initial load, you can c
 </script>
 ```
-TODO: add import for React.
+## Capabilities
+A full list can be found in `types.ts` under `TagType`.
+### `can-move`
+Creates a movable object using 2D `translate` on the element. Dragging the element around will move it
+**troubleshooting**
+- This currently doesn't work on `inline` display elements.
+- This currently doesn't work on touch screens.
+### `can-spin`
+Creates a rotatable object using a `rotate` `transform` on the element. Dragging the element to the left or right will rotate it counter-clockwise and clockwise respectively.
+### `can-toggle`
+Creates an object that can be switched on and off. Clicking the element will toggle the `clicked` class on the element.
-## New Capabilities
+### `can-grow`
+Creates an object that can be resized using a `scale` `transform`. Clicking the object will grow it, clicking with <kbd>ALT</kbd> will shrink it. Currently, the max size is 2x the original size and the min size is 1/2 the original size.
+### `can-post`
+Creates a communal forum from a `form` element. The form will sync any new submissions including all the `input` elements in the form, using their `name` property as the key and their value as the value. New messages will be currently prepended to the element with the `guestbookMessages` ID. TODO: make this generic and take user input
+---
+To add new ones, please find contributor guidelines in [New Capabilities](#new-capabilities).
+## Contributing
+### New Capabilities
 `playhtml` is designed to be a collective library of magical capabilities that anyone can attach to arbitrary HTML elements. If you have an idea for a new capability, please first ensure that there is not a duplicate existing one in the current library (see `TagType` in `types.ts`). Please make a proposal for the capability you would like to add by opening an issue with the `new-capability` label.
 To contribute your capability, see sample PR (TODO: LINK).
-## Contributing
+---
 Outside of contributing new capabilities, feel free to submit any issues or PRs for bugs or improvements to the core of the library.
 ## 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.
+Thank you for considering reading this little README and browing this project! I'd love to see you share the library and what you've made with it to me and with your friends. And if you enjoy using this, please consider [sponsoring the project or sending a small donation](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