playhtml 0.1.7 → 0.1.9
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.
- package/README.md +45 -4
- package/dist/playhtml.es.js +189 -189
- package/dist/playhtml.umd.js +6 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -12,6 +12,8 @@ This is designed as an open library for anyone to add on new interactions and ca
|
|
|
12
12
|
|
|
13
13
|
https://github.com/spencerc99/playhtml/assets/14796580/00e84e15-2c1c-4b4b-8e15-2af22f39db7a
|
|
14
14
|
|
|
15
|
+
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.
|
|
16
|
+
|
|
15
17
|
## Usage
|
|
16
18
|
|
|
17
19
|
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.
|
|
@@ -40,18 +42,57 @@ If you have dynamic elements that are hydrated after the initial load, you can c
|
|
|
40
42
|
</script>
|
|
41
43
|
```
|
|
42
44
|
|
|
43
|
-
|
|
45
|
+
## Capabilities
|
|
46
|
+
|
|
47
|
+
A full list can be found in `types.ts` under `TagType`.
|
|
48
|
+
|
|
49
|
+
### `can-move`
|
|
50
|
+
|
|
51
|
+
https://github.com/spencerc99/playhtml/assets/14796580/9c2b9bf6-142c-41e2-8c8f-93a3b121a73e
|
|
52
|
+
|
|
53
|
+
Creates a movable object using 2D `translate` on the element. Dragging the element around will move it
|
|
54
|
+
|
|
55
|
+
**troubleshooting**
|
|
56
|
+
|
|
57
|
+
- This currently doesn't work on `inline` display elements.
|
|
58
|
+
- This currently doesn't work on touch screens.
|
|
59
|
+
|
|
60
|
+
### `can-spin`
|
|
61
|
+
|
|
62
|
+
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.
|
|
63
|
+
|
|
64
|
+
### `can-toggle`
|
|
65
|
+
|
|
66
|
+
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">today i installed some lamps on the demos-and-chill website<br><br>then <a href="https://twitter.com/_jzhao?ref_src=twsrc%5Etfw">@_jzhao</a> and i fought on whether to keep them on or not. <a href="https://t.co/sCspTwmRpS">pic.twitter.com/sCspTwmRpS</a></p>— spencer chang ☀️ (spencerchang.me @ bsky) (@spencerc99) <a href="https://twitter.com/spencerc99/status/1681048824884895744?ref_src=twsrc%5Etfw">July 17, 2023</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
|
|
44
67
|
|
|
45
|
-
|
|
68
|
+
Creates an object that can be switched on and off. Clicking the element will toggle the `clicked` class on the element.
|
|
69
|
+
|
|
70
|
+
### `can-grow`
|
|
71
|
+
|
|
72
|
+
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.
|
|
73
|
+
|
|
74
|
+
### `can-post`
|
|
75
|
+
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
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
|
|
79
|
+
|
|
80
|
+
---
|
|
81
|
+
|
|
82
|
+
To add new ones, please find contributor guidelines in [New Capabilities](#new-capabilities).
|
|
83
|
+
|
|
84
|
+
## Contributing
|
|
85
|
+
|
|
86
|
+
### New Capabilities
|
|
46
87
|
|
|
47
88
|
`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.
|
|
48
89
|
|
|
49
90
|
To contribute your capability, see sample PR (TODO: LINK).
|
|
50
91
|
|
|
51
|
-
|
|
92
|
+
---
|
|
52
93
|
|
|
53
94
|
Outside of contributing new capabilities, feel free to submit any issues or PRs for bugs or improvements to the core of the library.
|
|
54
95
|
|
|
55
96
|
## Support & Maintenance
|
|
56
97
|
|
|
57
|
-
|
|
98
|
+
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.
|