yogsototh/apintro
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

vh font + messages from pulse

Browse source
This commit is contained in:
Yann Esposito (Yogsototh) 2015-08-28 19:53:53 +02:00
parent f7c5d095a9
commit e9010bf14a
4 changed files with 166 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
resources/public/index.html
View file

@ -27,7 +27,7 @@ table {border-collapse: collapse;border-spacing: 0;}
html,body{margin:0;padding:0;font-family: "Hoefler Text",sans-serif;height:100vh;text-align: center;
color: rgba(255,255,255,0.9);}
color: rgba(255,255,255,0.9);font-size:2vh}
a{color:inherit; text-decoration: none;border-bottom: none;}
.anchor {position: absolute;opacity:0.5;}
.anchor:hover {opacity:0.9;}

4
src/apintro/core.cljs
View file

@ -46,8 +46,8 @@
(defn animated-title [text]
[:h1 {:style
{:font-size (rx (str (* 80 @ease1) "px"))
:padding-top (rx (str (* 100 @ease1) "px"))
{:font-size (rx (str (* 5 @ease1) "vh"))
:padding-top (rx (str (* 10 @ease1) "vh"))
:opacity (rx (str @ease2))
:transform (rx (str "rotate(" @ease3 "deg)"))
:-webkit-transform (rx (str "rotate(" @ease3 "deg)"))

157
src/apintro/message.cljs Normal file
View file

@ -0,0 +1,157 @@
(ns apintro.message
(:require [clojure.string :refer [replace]]))
(defn tweet-url [message]
"get link from tweet"
(let [author (:user-screen_name message)
id (:id_str message)]
(str "https://twitter.com/" author "/status/" id)))
(defn open [url]
"open url in a new tab"
(.open js/window url "_blank"))
(defn account-username
[str]
[:span str])
(defn user-name [message params]
"display user screen name as message header section"
(if (:reshared message)
[:div
;;double display with original author if RT
[:div {:class "retweeted_holder"}
[:p {:style {:cursor "pointer"}
:on-click #(open (str "http://www.twitter.com/" (:user-screen_name message)))
:class "user_name"}
[:i {:class "fa fa-retweet retweeted-icon"}]
[account-username (str " " (:user-name message) " ")]]]
[:div {:class "username_holder "}
[:p {:style {:cursor "pointer"}
:on-click #(open
(str "http://www.twitter.com/"
(get-in message [:retweeted_status
:user
:screen_name])))
:class "user_name"}
[account-username (str (get-in message [:retweeted_status :user :name]) " ")]
(when-not (:hide-nickname (first params))
[:span {:class "user_nick"} (get-in message [:retweeted_status :user :screen_name])])]]]
;; simple display otherwise
[:div {:class "username_holder "}
[:p {:style {:cursor "pointer"}
:on-click #(open (str "http://www.twitter.com/"
(:user-screen_name message)))
:class "user_name"}
[account-username (str " " (:user-name message) " ")]
(when-not (:hide-nickname (first params))
[:span {:class "user_nick"} (:user-screen_name message)])]]))
(defn actions
"Display actions (reply, retweet, favorite) with current counters."
[msg]
[:div
[:a {:target "_blank"
:href (str "https://twitter.com/intent/tweet?in_reply_to=" (:id_str msg))}
[:i {:class "fa fa-mail-reply icon"}]]
[:a {:target "_blank"
:href (str "https://twitter.com/intent/retweet?tweet_id=" (:id_str msg))}
[:i {:class "fa fa-retweet icon"}]
(when (> (:retweet_count msg) 0)
[:span (:retweet_count msg)])]
[:a {:target "_blank"
:href (str "https://twitter.com/intent/favorite?tweet_id=" (:id_str msg))}
[:i {:class "fa fa-star icon"}]
(when (> (:favorite_count msg) 0)
[:span (:favorite_count msg)])]])
(defn publish-date
"Display the publication date in timeago format."
[message]
[:span (:pub_date_epoch_ms message)])
(defn actions-holder [message params]
"twitter actions for a message"
(let [msg (if (:reshared message)
(:retweeted_status message)
message)]
[:div {:class "actions_holder"}
[:div {:class "subholder_top"}
[:div {:class "left_part pull-left"}
[:i {:class "fa fa-twitter icon"}]
[publish-date message]]
(when-not (:disable-actions (first params))
[:div {:class "right_part pull-right"}
[actions msg]])]]))
(defn author-page-url
[message]
(if (:reshared message)
(str "http://www.twitter.com/"
(get-in message [:retweeted_status
:user
:screen_name]))
(str "http://www.twitter.com/"
(:user-screen_name message))))
(defn user-pic [{:keys [message width height]}]
"display clickable user picture"
(let [image-url (if (:reshared message)
(get-in message [:retweeted_status :user :profile_image_url])
(: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
:margin-right "2%"
:cursor "pointer"
:float "left"
}
:on-click #(open author-page)
:src (if image-url (replace image-url #"normal" "bigger") nil)}]))
(defn text [message]
"display user text, augmenting urls with full links"
(let [original-text (if (:reshared message)
(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")]
(when-not (= el-type "a")
(open (tweet-url message))))
:class "text"}
original-text]))
(defn message [message & params]
"Message component"
(when message
[:div {:style {:height "250px" :width "23%" :overflow "hidden" :float "left"
: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]]
[actions-holder message params]]))

9
src/apintro/vgapi.cljs
View file

@ -4,6 +4,7 @@
[freactive.macros :refer [rx]])
(:require
[apintro.model :refer [gets sets]]
[apintro.message :refer [message]]
[freactive.animation :as animation]
[cljs-http.client :as http]
[cljs.core.async :refer [<!]]))
@ -92,13 +93,15 @@
[: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))
}
[:ul
(for [tweet (:messages state)]
[:li (:text tweet)])]]))
(for [tweet (:messages state)]
[message tweet])]))
(defn view-volume [state]
[:div