Skip to content

Commit

Permalink
Cleanup, less wordy.
Browse files Browse the repository at this point in the history
  • Loading branch information
gnat authored Jun 7, 2024
1 parent 8486143 commit b4eef1c
Showing 1 changed file with 10 additions and 10 deletions.
20 changes: 10 additions & 10 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -82,28 +82,28 @@ Or, 🌐 via CDN: `<script src="https://cdn.jsdelivr.net/gh/gnat/surreal@main/su
* Variables: `body`, `e`, `some_element`
* Events: `event.currentTarget` will be used.
* Surreal selectors: `me()`,`any()`
* Choose a start location in the DOM with the 2nd argument. Default is `document`
* Choose the start location in the DOM with the 2nd arg. (Default: `document`)
* ▶️ `any('button', me('#header')).classAdd('red')`
* Add `.red` to any `<button>` inside of `#header`
* `me()` Get current element for [Locality of Behavior](https://htmx.org/essays/locality-of-behaviour/) in `<script>` without an explicit **.class** or **#id**
* `me()` Get parent element of `<script>` without a **.class** or **#id** !
* `me("body")` Gets `<body>`
* `me(".button")` Gets the first `<div class="button">...</div>`. To get all of them use `any()`
* Select **one or more** elements as an array: `any(...)`
* Like `me()` but guaranteed to return an array (or empty array).
* `any(".foo")` Gets all matching elements.
* `any(".foo")` ⭐ Get all matching elements.
* Convert between arrays of elements and single elements: `any(me())`, `me(any(".something"))`

### 🔥 DOM Functions

* ♻️ All functions work on single elements or arrays of elements.
* 🔗 Start a chain using `me()` and `any()`
* 🟢 Style A `me().classAdd('red')` ⭐ Chain style, recommended!
* 🟢 Style A `me().classAdd('red')` ⭐ Chain style. Recommended!
* 🟠 Style B: `classAdd(me(), 'red')`
* 🌐 Global conveniences help you write less code.
* `globalsAdd()` will automatically warn about any clobbering issues.
* If you prefer no conveniences, or are a masochist, delete `globalsAdd()`
* `me().classAdd('red')` becomes: `surreal.me().classAdd('red')`
* `classAdd(me(), 'red')` becomes: `surreal.classAdd(surreal.me(), 'red')`
* `globalsAdd()` will automatically warn you of any clobbering issues!
* 💀🩸 If you want no conveniences, or are a masochist, delete `globalsAdd()`
* 🟢 `me().classAdd('red')` becomes: `surreal.me().classAdd('red')`
* 🟠 `classAdd(me(), 'red')` becomes: `surreal.classAdd(surreal.me(), 'red')`

See: [Quick Start](#quick-start) and [Reference](#reference) and [No Surreal Needed](#no-surreal)

Expand All @@ -114,7 +114,7 @@ See: [Quick Start](#quick-start) and [Reference](#reference) and [No Surreal Nee
* `any("button").classAdd('red')`
* Events
* `me().on("click", ev => me(ev).fadeOut() )`
* `on(any('button'), 'click', ev => { me(ev).styles('color: red') })`
* `any('button').on('click', ev => { me(ev).styles('color: red') })`
* Run functions over elements.
* `any('button').run(_ => { alert(_) })`
* Styles / CSS
Expand Down Expand Up @@ -180,7 +180,7 @@ See: [Quick Start](#quick-start) and [Reference](#reference) and [No Surreal Nee
</script>
```
#### Array methods
```html
```js
any('button')?.forEach(...)
any('button')?.map(...)
```
Expand Down

0 comments on commit b4eef1c

Please sign in to comment.