Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/plumatic/dommy
A tiny ClojureScript DOM manipulation and event library
https://github.com/plumatic/dommy
Last synced: 4 days ago
JSON representation
A tiny ClojureScript DOM manipulation and event library
- Host: GitHub
- URL: https://github.com/plumatic/dommy
- Owner: plumatic
- Created: 2013-01-13T08:30:11.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2018-01-07T00:14:06.000Z (about 7 years ago)
- Last Synced: 2024-10-30T01:59:43.926Z (3 months ago)
- Language: Clojure
- Homepage:
- Size: 337 KB
- Stars: 759
- Watchers: 63
- Forks: 73
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
- awesome-clojurescript - Dommy - nonsense ClojureScript templating and DOM manipulation library. (Awesome ClojureScript / Document Object Model)
README
A ClojureScript DOM manipulation and event library.
## Usage
Add the following dependency to your `project.clj`:
```clojure
[prismatic/dommy "1.1.0"]
```
#### Upgrading to 1.0.0+ from 0.X.Y
Version "1.0.0" includes breaking API changes. Here's a quick overview of what's
changed:
* `dommy.template` namespace and all related templating features
(`node`, `deftemplate`, etc) have been removed from the library.
* Simplified namespace structure.
Everything in `dommy.macros` and `dommy.attrs` has been moved into
`dommy.core`
See CHANGELOG.md or for more
details.
If you are looking for hiccup-style templating features, check out https://github.com/jeluard/hipo/
### Selection
DOM nodes are selected using macros, which expand to the correct native dom calls. Because selectors don't wrap returned nodes, there is a distinction between single and multiple selections. A selector can be a keyword, string or vector.
```clojure
(ns foo.bar
(:require
[dommy.core :refer-macros [sel sel1]]))
(sel1 :body) ; => document.body
(sel1 :#header) ; => document.getElementById("header")
(sel1 ".todo") ; => document.getElementsByClassName("todo")[0]
(sel [:#todos :li]) ; => document.querySelectorAll("#todos li")
```
Sometimes its useful to specify the base node from which the selection takes place.
```clojure
(sel1 todos-element :.todo)
```
### DOM Manipulation
Inspired by [jQuery](http://jquery.com), but adapted to be functional in order to better fit with ClojureScript core.
```clojure
(dommy/append! (sel1 :#todos) todo-element)
(doseq [todo (sel :.todo)]
(dommy/add-class! todo :complete))
(map dommy/text (sel :.todo))
```
Functions that modify take the target node as their first argument, and return the same modified node, allowing the use of threading macros to accomplish jQuery-like chaining.
```clojure
(-> (sel1 :#my-button)
(dommy/remove-attr! :disabled)
(dommy/add-class! :active)
(dommy/set-text! "Click me!"))
(->> (sel :.image)
(filter #(> (dommy/px % :width) 500))
(map #(dommy/add-class! % :big-image)))
```
### Events
Dommy's event API closely resembles the native JavaScript API.
```clojure
(ns foo.bar
(:require
[dommy.core :as dommy :refer-macros [sel1]]))
(defn click-handler [e]
(.log js/console "You clicked my button! Congratulations"))
(dommy/listen! (sel1 :#my-button) :click click-handler)
(dommy/unlisten! (sel1 :#my-button) :click click-handler)
```
If the first argument to `listen!` is a sequence, the handler will delegate events to the selected element defined by the sequence. A special property `selectedTarget` added to the event specifies the element selected.
```clojure
(defn todo-click-handler [e]
(.log js/console "The clicked todo is" (.-selectedTarget e)))
(dommy/listen! [todos-element :.todo] :click todo-click-handler))
```
## Testing
For all pull requests, please ensure your tests pass (or add test cases) before submitting.
$ lein cljsbuild test
## License
Copyright (C) 2014 Prismatic
Distributed under the Eclipse Public License, the same as Clojure.