Skip to content

Commit

Permalink
we now can manage styles now and event (add-style, remove-style, add-…
Browse files Browse the repository at this point in the history 
…event, remove-event)
  • Loading branch information
@ckirkendall
ckirkendall committed Dec 14, 2011
1 parent 40590eb commit 21b390c
Show file tree
Hide file tree
Showing 5 changed files with 138 additions and 52 deletions.
85 changes: 63 additions & 22 deletions cljs-src/enfocus/core.cljs
View file
@@ -1,10 +1,12 @@
(ns enfocus.core
(:require [goog.net.XhrIo :as xhr]
[goog.dom.query :as query]
[goog.style :as style]
[goog.events :as events]
[goog.dom :as dom]
[goog.events :as events]
[clojure.string :as string]))
(declare css-syms select create-sel-str)
(declare css-syms css-select create-sel-str)



Expand Down Expand Up @@ -35,6 +37,15 @@
:else (nodes->coll %)) values))


(defn- style-set
"Sets property name to a value on a javascript object
Returns the original object (js-set obj :attr value) "
([obj values]
(do (doseq [[attr value] (apply hash-map values)]
(style/setStyle obj (name attr) value))
obj)))



;####################################################
; The following functions are used to transform
Expand Down Expand Up @@ -89,7 +100,7 @@
"before adding the transformed dom back into the live dom we
reset the ids back to their original values"
[sym nod]
(let [id-nodes (select nod "*[id]")
(let [id-nodes (css-select nod "*[id]")
nod-col (nodes->coll id-nodes)]
(doall (map #(let [id (. % (getAttribute "id"))
rid (. id (replace sym ""))]
Expand All @@ -107,7 +118,7 @@
(let [text (. req (getResponseText))
[sym txt] (replace-ids text)
data (dom/htmlToDocumentFragment txt)
body (first (nodes->coll (select data "body")))]
body (first (nodes->coll (css-select data "body")))]
(if body
(let [frag (. js/document (createDocumentFragment))
childs (.childNodes frag)]
Expand All @@ -134,9 +145,9 @@
(let [sel-str (create-sel-str sel)
cache (@tpl-cache (str (uri sel-str)))]
(if cache [(first cache) (. (second cache) (cloneNode true))]
(let [[sym tdom] (get-cached-dom uri)
(let [[sym tdom] (get-cached-dom uri)
dom (create-hidden-dom tdom)
tsnip (select dom sel-str)
tsnip (css-select dom sel-str)
snip (if (instance? js/Array tsnip) (first tsnip) tsnip)]
(remove-node-return-child dom)
(assoc @tpl-cache (str uri sel-str) [sym snip])
Expand Down Expand Up @@ -173,7 +184,7 @@
(func pnod frag))))))


(defn content
(defn en-content
"Replaces the content of the element. Values can be nodes or collection of nodes."
[& values]
(content-based-trans
Expand All @@ -182,7 +193,7 @@
(dom/removeChildren pnod)
(dom/appendChild pnod frag))))

(defn html-content
(defn en-html-content
"Replaces the content of the element with the dom structure
represented by the html string passed"
[txt]
Expand All @@ -193,7 +204,7 @@
(dom/append pnod frag)))))


(defn set-attr
(defn en-set-attr
"Assocs attributes and values on the selected element."
[& values]
(let [at-lst (partition 2 values)]
Expand All @@ -202,7 +213,7 @@
(doall (map (fn [[a v]] (. pnod (setAttribute (name a) v))) at-lst))))))


(defn remove-attr
(defn en-remove-attr
"Dissocs attributes on the selected element."
[& values]
(multi-node-proc
Expand All @@ -218,7 +229,7 @@
(. cur-cls (match regex))))


(defn add-class
(defn en-add-class
"Adds the specified classes to the selected element."
[ & values]
(multi-node-proc
Expand All @@ -229,7 +240,7 @@
values))))))


(defn remove-class
(defn en-remove-class
"Removes the specified classes from the selected element."
[ & values]
(multi-node-proc
Expand All @@ -240,13 +251,13 @@
(set! (.className pnod) (. cur (replace regex " ")))))
values))))))

(defn do-> [ & forms]
(defn en-do-> [ & forms]
"Chains (composes) several transformations. Applies functions from left to right."
(multi-node-proc
(fn [pnod]
(doall (map #(% pnod) forms)))))

(defn append
(defn en-append
"Appends the content of the element. Values can be nodes or collection of nodes."
[& values]
(content-based-trans
Expand All @@ -255,7 +266,7 @@
(dom/appendChild pnod frag))))


(defn prepend
(defn en-prepend
"Prepends the content of the element. Values can be nodes or collection of nodes."
[& values]
(content-based-trans
Expand All @@ -265,7 +276,7 @@
(. pnod (insertBefore frag nod))))))


(defn before
(defn en-before
"inserts the content before the selected node. Values can be nodes or collection of nodes"
[& values]
(content-based-trans
Expand All @@ -274,7 +285,7 @@
(dom/insertSiblingBefore frag pnod))))


(defn after
(defn en-after
"inserts the content after the selected node. Values can be nodes or collection of nodes"
[& values]
(content-based-trans
Expand All @@ -283,22 +294,52 @@
(dom/insertSiblingAfter frag pnod))))



(defn substitute
(defn en-substitute
"substitutes the content for the selected node. Values can be nodes or collection of nodes"
[& values]
(content-based-trans
values
(fn [pnod frag]
(dom/replaceNode frag pnod))))

(defn remove-all
"removes the selected nodes from the dom"
(defn en-remove-node
"removes the selected nodes from the dom"
[& values]
(multi-node-proc
(fn [pnod]
(dom/removeNode pnod))))

(defn en-set-style
"set a list of style elements from the selected nodes"
[& values]
(multi-node-proc
(fn [pnod]
(style-set pnod values))))

(defn en-remove-style
"remove a list style elements from the selected nodes
note: you can only remove styles that are inline styles
set in css need to overridden through set-style"
[& values]
(multi-node-proc
(fn [pnod]
(doall
(map #(. (.style pnod) (removeProperty (name %))) values)))))

(defn en-add-event
"adding an event to the selected nodes"
[event func]
(multi-node-proc
(fn [pnod]
(events/listen pnod (name event) func))))

(defn en-remove-event
"adding an event to the selected nodes"
[& event-list]
(multi-node-proc
(fn [pnod]
(doall (map #(events/removeAll pnod (name %)) event-list)))))


;##################################################################
; functions involved in processing the selectors
Expand All @@ -318,10 +359,10 @@
(string? %) (.replace % "#" (str "#" id-scope-sym)))
css-sel))))

(defn select
(defn css-select
"takes either an enlive selector or a css3 selector and
returns a set of nodes that match the selector"
([dom-node css-sel] (select "" dom-node css-sel))
([dom-node css-sel] (css-select "" dom-node css-sel))
([id-scope-sym dom-node css-sel]
(let [sel (string/trim (string/replace (create-sel-str id-scope-sym css-sel) " :" ":"))
ret (dom/query sel dom-node)]
Expand Down
29 changes: 19 additions & 10 deletions cljs-src/enfocus/example.cljs
View file
Expand Up @@ -37,7 +37,7 @@
["tr > *:first-child"] (em/content test-desc)
["tr > *:last-child > span"] (em/content value))


(em/deftemplate test-cases "templates/test-grid.html" []
["#test3 > *:last-child"] (em/content (success))
["#test4 > *:last-child"] (em/content (success))
Expand All @@ -54,28 +54,37 @@
[".bad > *:last-child"] (em/html-content "<span class='fail'>fail</span>") ;should do nothing
["#test10 td span"] (em/do->
(em/after (success))
(em/remove-all))
(em/remove-node))
["#test11 td span"] (em/do->
(em/before (success))
(em/remove-all))
["#test12 td span"] (em/substitute(success))
["#test13 > *:last-child"] (em/do->
(em/before (success))
(em/remove-node))
["#test12 td span"] (em/substitute(success))
["#test13 > *:last-child"] (em/do->
(em/content "a:")
(em/append (success)))
["#test14 > *:last-child"] (em/do->
(em/content ":p")
(em/prepend (success))))

(em/defaction test-grid []
(em/prepend (success))))
(em/defaction test-grid []
["#test-content"] (em/content (test-cases))
["#test-content tbody tr:nth-of-type(even)"] (em/add-class "even")
["#test-content tbody tr"] (em/add-event
:mouseover
#((em/at (em/add-class "highlight")) (.currentTarget %)))
["#test-content tbody tr"] (em/add-event
:mouseout
#((em/at (em/remove-class "highlight")) (.currentTarget %)))
["#test-content2"] (em/content (template2 {"bannan" 5 "pineapple" 10}))
["#heading1"] (em/set-attr :id "new-heading1")
["#heading2"] (em/set-attr :id "new-heading2")
["#test-content2 tfoot tr > *:last-child"] (em/content (str 15))
[:#test-content3] (em/content (template1 {"apple" 5 "pear" 6}))
[:#test-content3 :tfoot :tr :> 'last-child] (em/content (str 11))
)
["#test-content4"] (em/set-style :background "#00dd00" :font-size "10px")
["#test-content5"] (em/set-style :background "#dd0000" :font-size "10px")
["#test-content5"] (em/remove-style :background :font-size)
)

;(em/defaction test-suite [])

Expand Down
15 changes: 15 additions & 0 deletions resources/public/css/test.css
View file
Expand Up @@ -67,3 +67,18 @@ th{
width: 100%;
}

#test-content4 {
width: 200px;
margin-top: 20px;
margin-left: 20px;
}

#test-content5 {
width: 200px;
margin-top: 20px;
margin-left: 20px;
}

.highlight {
background-color: #00cc00;
}
2 changes: 2 additions & 0 deletions resources/public/test.html
View file
Expand Up @@ -16,6 +16,8 @@
<div id="test-content"></div>
<div id="test-content2"></div>
<div id="test-content3"></div>
<div id="test-content4">testing setting style</div>
<div id="test-content5">testing removing style</div>
</div>
</body>
</html>

0 comments on commit 21b390c

Please sign in to comment.