calculate word cloud width from window width

src/cljs/ulysses/components/word_cloud.cljs

@@ -1,5 +1,6 @@
 (ns ulysses.components.word-cloud
-  (:require [ulysses.utils :refer [map-subels]]
+  (:require [re-frame.core :refer [subscribe]]
+            [ulysses.utils :refer [map-subels]]
             [ulysses.lib.packer :refer [fit-words]]
             [clojure.string :as string]))
 
@@ -26,6 +27,14 @@
        (reverse)
        (take n)))
 
+; TODO different width calculation for profile word clouds
+(defn width-from-window [{width :width}]
+  (-> width
+      (* 0.98)
+      (* (- 1 0.2 0.01))
+      (* 0.495)
+      (- (* 15 2))))
+
 ;; ----------------------------------------------------------------------------
 ;; sub-components
 ;; ----------------------------------------------------------------------------
@@ -38,6 +47,9 @@
 ;; ----------------------------------------------------------------------------
 
 (defn word-cloud [n keywords]
-  [:div.word-cloud
-    [fit-words 900 500
-      (normalize-sort-take n keywords)]])
+  (let [window-size (subscribe [:window-size])]
+    (fn [n keywords]
+      (let [w (width-from-window @window-size)]
+        [:div.word-cloud
+          [fit-words w 500
+            (normalize-sort-take n keywords)]]))))

src/cljs/ulysses/lib/packer.cljs

@@ -46,7 +46,7 @@
            (fit w h)
            (map-subels
             (fn [{:keys [w h fit name style weight]}]
-              [:div.keyword
+              [:a.keyword
                 {:style
                  (assoc style
                   :width w

src/cljs/ulysses/subs.cljs

@@ -15,6 +15,11 @@
       (let [{:keys [active-page route-args]} @db]
         [active-page route-args]))))
 
+(register-sub
+  :window-size
+  (fn [db _]
+    (reaction (-> @db :window-size))))
+
 (register-sub
   :scroll-y
   (fn [db _]