added fade and effects not working yet but close

gigasquid · Dec 15, 2011 · 88e1e6c · 88e1e6c
1 parent 14a8c62
commit 88e1e6c
Show file tree

Hide file tree

Showing 5 changed files with 47 additions and 7 deletions.
diff --git a/cljs-src/enfocus/core.cljs b/cljs-src/enfocus/core.cljs
@@ -5,7 +5,8 @@
             [goog.events :as events]
             [goog.dom :as dom]
             [goog.events :as events]
-            [clojure.string :as string]))
+            [clojure.string :as string])
+  (:require-macros [enfocus.macros :as em]))
 (declare css-syms css-select create-sel-str)
 
 
@@ -341,6 +342,28 @@
       (doall (map #(events/removeAll pnod (name %)) event-list)))))
 
 
+(defn en-fade-out 
+  "fade the selected nodes over a set of steps"
+  [ttime steps]
+  (let [incr (Math/ceil (/ 100 steps))]
+    (em/effect  ttime steps
+             (fn [pnod]
+               (let [op (style/getOpacity pnod)]
+                 (cond
+                   (= "" op) (style/setOpacity pnod (- 1 incr))
+                   (<= 0 op) (sytle/setOpacity pnod (- op incr))))))))
+
+(defn en-fade-in 
+  "fade the selected nodes over a set of steps"
+  [ttime steps]
+  (let [incr (Math/ceil (/ 100 steps))]
+    (em/effect  ttime steps
+             (fn [pnod]
+               (let [op (style/getOpacity pnod)]
+                 (cond
+                   (= "" op) (style/setOpacity pnod incr)
+                   (>= 1 op) (sytle/setOpacity pnod (+ op incr))))))))
+
 ;##################################################################
 ; functions involved in processing the selectors
 ;##################################################################

diff --git a/cljs-src/enfocus/example.cljs b/cljs-src/enfocus/example.cljs
@@ -28,7 +28,7 @@
                 ["tbody"] (em/content
                            (map #(snippet2 % (fruit-data %)) (keys fruit-data))))
 
-
+  
 
 (em/defsnippet success "templates/test-grid.html"  ["tbody > *:first-child > td span"] [] )
 
@@ -84,8 +84,14 @@
               ["#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)
+              ["#test-content6"] (em/add-event
+                                   :mouseover 
+                                   #((em/at (em/fade-out 500 20)) (.currentTarget %)))
+              ["#test-content6"] (em/add-event
+                                   :mouseout
+                                   #((em/at (em/fade-in 500 20)) (.currentTarget %)))
               )  
-
+  
 ;(em/defaction test-suite [])
 
 

diff --git a/resources/public/css/test.css b/resources/public/css/test.css
@@ -82,3 +82,7 @@ th{
 .highlight {
 	background-color: #00cc00;	
 }
+
+#test-content6 {
+	background-color: #009900;	
+}
diff --git a/resources/public/test.html b/resources/public/test.html
@@ -18,6 +18,7 @@
 <div id="test-content3"></div>
 <div id="test-content4">testing setting style</div>
 <div id="test-content5">testing removing style</div>
+<div id="test-content6">testing fading</div>
 </div>
 </body>
 </html>
diff --git a/src/enfocus/macros.clj b/src/enfocus/macros.clj
@@ -147,11 +147,17 @@
   `(enfocus.core/en-remove-event ~@forms))
 
 (defmacro effect [ttime num-steps & forms]
-  (let [incr (int (/ ttime num-steps))]
   `(enfocus.core/multi-node-proc
     (fn [pnod#]
-      (let [eff# (fn run# [tm#] 
+      (let [incr# (~(symbol "Math/ceil") (/ ~ttime ~num-steps))
+            eff# (fn run# [tm#] 
                   (when (<= tm# ~ttime) 
                     (enfocus.macros/at pnod# ~@forms)
-                    (js/setTimeout #(run# (+ tm# ~incr)) ~incr)))]
-        (eff# 0))))))
+                    (js/setTimeout #(run# (+ tm# incr#)) incr#)))]
+        (eff# 0)))))
+
+(defmacro fade-out [ttime num-steps]
+  `(enfocus.core/en-fade-out ~ttime ~num-steps))  
+
+(defmacro fade-in [ttime num-steps]
+  `(enfocus.core/en-fade-out ~ttime ~num-steps))