diff --git a/project.clj b/project.clj index 071f2b2..893215f 100644 --- a/project.clj +++ b/project.clj @@ -4,7 +4,7 @@ :dependencies [[org.clojure/clojure "1.3.0"] [goog-jar "1.0.0"]] :dev-dependencies [[lein-cljsbuild "0.0.11-SNAPSHOT"]] - :hooks [leiningen.cljsbuild] + ;; :hooks [leiningen.cljsbuild] :cljsbuild [{:source-path "src/cljs" :jar true :compiler {:libs ["goog/dom/query.js"] @@ -34,3 +34,12 @@ :pretty-print false :output-dir ".cljsbuild/advanced" :output-to "public/test_advanced.js"}}]) + +(comment + (do + (require '[cljs.repl :as repl]) + (require '[cljs.repl.browser :as browser]) + (def env (browser/repl-env)) + (repl/repl env)) + + ) \ No newline at end of file diff --git a/readme.md b/readme.md index c15095f..b4701d8 100644 --- a/readme.md +++ b/readme.md @@ -44,6 +44,27 @@ The `xpath` function also takes an optional first argument (which can be any `Do (xpath "span")) ``` +The `sel` function in the `domina.css` namespace works the same way for CSS selectors: + +```clojure +(sel ".my-class") +``` + +```clojure +(sel "#my-id") +``` + +```clojure +(-> (sel "body") + (sel "div") + (sel "p") + (sel "span")) +``` + +```clojure +(sel "body > div > p > span") +``` + Other selector functions include the core functions `by-id` and `by-class` which return a `DomContent` based on node id and node class, respectively. ## Examples diff --git a/src/cljs/domina/css.cljs b/src/cljs/domina/css.cljs index fe12f20..e99ed23 100644 --- a/src/cljs/domina/css.cljs +++ b/src/cljs/domina/css.cljs @@ -6,9 +6,14 @@ [] (aget (dom/getElementsByTagNameAndClass "html") 0)) + (defn sel "Returns content based on a css selector expression. Takes an optional content as a base; if none is given, uses the HTML element as a base." ([expr] (sel (root-element) expr)) ([base expr] (reify domina/DomContent - (nodes [_] (seq nil)) - (single-node [_] nil)))) \ No newline at end of file + (nodes [_] (mapcat #(dom/query expr %) + (domina/nodes base))) + (single-node [_] (first (filter + (complement nil?) + (mapcat #(dom/query expr %) + (domina/nodes base)))))))) \ No newline at end of file diff --git a/test/cljs/domina/test.cljs b/test/cljs/domina/test.cljs index 124f8de..10bce04 100644 --- a/test/cljs/domina/test.cljs +++ b/test/cljs/domina/test.cljs @@ -7,11 +7,10 @@ [domina.xpath :only [xpath]] [domina.css :only [sel]] [domina.events :only [listen! unlisten! remove-listeners! fire-listeners!]]) - (:require [goog.events :as events])) + (:require [goog.events :as events] + [clojure.browser.repl :as repl])) -(comment - (repl/connect "http://localhost:9000/repl") - ) +(repl/connect "http://localhost:9000/repl") (js* " window['tryfn'] = function(f) { @@ -47,6 +46,39 @@ "

P1

P2

P3

")) + +;;;;;; CSS selection tests + +(add-test "basic CSS selection" + #(do (reset) + (standard-fixture) + (assert (= 3 (count (nodes (sel "p"))))))) + +(add-test "basic CSS selection (single node)" + #(do (reset) + (standard-fixture) + (assert (instance? js/Element (single-node (sel "p")))))) + +(add-test "CSS selection with class specification" + #(do (reset) + (standard-fixture) + (assert (= 1 (count (nodes (sel ".d1"))))))) + +(add-test "a relative CSS selector" + #(do (reset) + (standard-fixture) + (assert (= 3 (count (nodes (-> (sel ".d1") + (sel "p")))))))) + +(add-test "extended CSS chaining" + #(do (reset) + (append! (sel "body") + "

some text

more text

") + (assert (= 2 (count (nodes (-> (sel "body") + (sel "div") + (sel "p") + (sel "span")))))))) + ;;;;;; DOM Manipulation Tests (add-test "basic xpath selection"