nicer effects
This commit is contained in:
Yann Esposito (Yogsototh)
parent
e9010bf14a
commit
599c214ec4
2 changed files with 43 additions and 27 deletions
|
|
@ -22,7 +22,8 @@
|
|||
(defn user-name [message params]
|
||||
"display user screen name as message header section"
|
||||
(if (:reshared message)
|
||||
[:div
|
||||
[:div {:style {:text-decoration "underline"
|
||||
:font-weight "bold"}}
|
||||
;;double display with original author if RT
|
||||
[:div {:class "retweeted_holder"}
|
||||
[:p {:style {:cursor "pointer"}
|
||||
|
|
@ -46,7 +47,8 @@
|
|||
|
||||
|
||||
;; simple display otherwise
|
||||
[:div {:class "username_holder "}
|
||||
[:div {:style {:text-decoration "underline"
|
||||
:font-weight "bold"}}
|
||||
[:p {:style {:cursor "pointer"}
|
||||
:on-click #(open (str "http://www.twitter.com/"
|
||||
(:user-screen_name message)))
|
||||
|
|
@ -81,7 +83,8 @@
|
|||
(defn publish-date
|
||||
"Display the publication date in timeago format."
|
||||
[message]
|
||||
[:span (:pub_date_epoch_ms message)])
|
||||
[:div {:style {:opacity 0.5}}
|
||||
(.toISOString (js/Date. (:pub_date_epoch_ms message)))])
|
||||
|
||||
(defn actions-holder [message params]
|
||||
"twitter actions for a message"
|
||||
|
|
@ -118,8 +121,8 @@
|
|||
(:user-profile_image_url message))
|
||||
_ (when-not image-url (println "image-url nil: " message))
|
||||
author-page (author-page-url message)]
|
||||
[:img {:style {:height height
|
||||
:width width
|
||||
[:img {:style {:max-height "100%"
|
||||
:max-width "30%"
|
||||
:margin-right "2%"
|
||||
:cursor "pointer"
|
||||
:float "left"
|
||||
|
|
@ -133,7 +136,6 @@
|
|||
(get-in message [:retweeted_status :text])
|
||||
(:text message))]
|
||||
[:p {:style {:cursor "pointer"
|
||||
:font-size "0.8em"
|
||||
:line-height "1.2em"}
|
||||
:on-click #(let [target (js/$ (aget % "target"))
|
||||
el-type (aget target 0 "localName")]
|
||||
|
|
@ -145,13 +147,15 @@
|
|||
(defn message [message & params]
|
||||
"Message component"
|
||||
(when message
|
||||
[:div {:style {:height "250px" :width "23%" :overflow "hidden" :float "left"
|
||||
[:div {:style {:height "120px"
|
||||
:width "100%"
|
||||
:font-size "0.5em"
|
||||
:overflow "hidden"
|
||||
:border "solid 1px rgba(0,0,0,0.3)"
|
||||
:background "rgba(0,0,0,0.1)"
|
||||
:margin "0.5%"
|
||||
}}
|
||||
[:div
|
||||
[user-pic {:message message :width "30%"}]
|
||||
[user-name message params]
|
||||
[text message]]
|
||||
[user-pic {:message message}]
|
||||
[user-name message params]
|
||||
[text message]
|
||||
[actions-holder message params]]))
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
(smart-si
|
||||
(fn []
|
||||
(go (let [now (.getTime (new js/Date))
|
||||
from (.toISOString (new js/Date (- now (+ interval (* 60 1000)))))
|
||||
from (.toISOString (new js/Date (- now (+ (* 2 interval) (* 60 1000)))))
|
||||
to (.toISOString (new js/Date (- now (* 60 1000))))
|
||||
response (<! (http/get (str "http://dev.api.vigiglo.be/api" route)
|
||||
{:query-params (into {:project_id (gets [prefix :project-id])
|
||||
|
|
@ -52,10 +52,10 @@
|
|||
(sets [prefix :volume] new-size)))))
|
||||
|
||||
(defn get-messages [prefix]
|
||||
(let [interval 1000]
|
||||
(let [interval 10000]
|
||||
(get-datas-every
|
||||
prefix
|
||||
"/content/v1/messages" {:limit (* 20 (/ interval 100))} interval
|
||||
"/content/v1/messages" {:limit (* 30 (/ interval 1000))} interval
|
||||
(fn [res]
|
||||
(let [now (.getTime (new js/Date))]
|
||||
(sets [prefix :msg-time] now)
|
||||
|
|
@ -89,19 +89,31 @@
|
|||
;; View
|
||||
;; ------------------------------------------------------------------------------
|
||||
(defn view-tweets [state]
|
||||
(let [ease (animation/easer 1.0)]
|
||||
[:div {:style {:text-align "left"
|
||||
:line-height "2em"
|
||||
:opacity (rx @ease)
|
||||
:overflow "hidden"
|
||||
:height "50vh"
|
||||
:border "solid 1px red"
|
||||
:font-family "Futura, sans-serif"}
|
||||
:node/on-attached (fn [node callback]
|
||||
(animation/start-easing! ease 1.0 0.0 1000 animation/quad-in callback))
|
||||
}
|
||||
(for [tweet (:messages state)]
|
||||
[message tweet])]))
|
||||
(when (:messages state)
|
||||
(let [ease (animation/easer 1.0)
|
||||
tweets (:messages state)
|
||||
max-sec (reduce max 0 (map :pub_date_epoch_ms tweets))
|
||||
tweets-by-sec (clojure.set/index (set tweets) [:pub_date_epoch_ms])
|
||||
]
|
||||
[:div {:style {:text-align "left"
|
||||
:line-height "2em"
|
||||
; :opacity (rx @ease)
|
||||
:overflow "hidden"
|
||||
:height "50vh"
|
||||
:font-family "Futura, sans-serif"}
|
||||
:node/on-attached (fn [node callback]
|
||||
(animation/start-easing! ease 1.0 0.0 20000 animation/linear callback))
|
||||
}
|
||||
(for [tweet-sec (keys tweets-by-sec)]
|
||||
(let [nb (/ (- max-sec (:pub_date_epoch_ms tweet-sec)) 1000)]
|
||||
[:div {:style {:position "absolute"
|
||||
:bottom "0"
|
||||
:left (rx (str (* (- (* 10 @ease) nb) 23) "%"))
|
||||
:width "22%"
|
||||
}
|
||||
}
|
||||
(for [tweet (get tweets-by-sec tweet-sec)]
|
||||
[message tweet])]))])))
|
||||
|
||||
(defn view-volume [state]
|
||||
[:div
|
||||
|
|
|
|||
Loading…
Reference in a new issue