Initial work on viewer app intergration.

src/uxbox/view.cljs

@@ -5,14 +5,21 @@
 ;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
 
 (ns uxbox.view
-  (:require [uxbox.view.state :as st]
+  (:require [uxbox.config]
-            [uxbox.common.constants]
+            [uxbox.main.state :as st]
-            #_[uxbox.view.locales :as lc]
             [uxbox.view.ui :as ui]))
 
+(defn initial-state
+  []
+  {:route nil
+   :project nil
+   :pages nil
+   :page nil
+   :shapes-by-id {}
+   :pages-by-id {}})
+
 (defn ^:export init
   []
-  ;; (lc/init)
+  (st/init initial-state)
-  (st/init)
+  (ui/init-routes)
-  ;; (ui/init-routes)
   (ui/init))

src/uxbox/view/data/viewer.cljs

@@ -0,0 +1,103 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+
+(ns uxbox.view.data.viewer
+  (:require [beicon.core :as rx]
+            [uxbox.util.rstore :as rs]
+            [uxbox.util.router :as rt]
+            [uxbox.util.schema :as sc]
+            [uxbox.util.data :refer (parse-int)]
+            [uxbox.main.state.project :as stpr]
+            [uxbox.main.repo :as rp]
+            [uxbox.main.data.pages :as udpg]
+            [uxbox.main.data.projects :as udpj]))
+
+;; --- Initialize
+
+(declare load-data)
+
+(defrecord Initialize [token]
+  rs/WatchEvent
+  (-apply-watch [_ state s]
+    (rx/of (load-data token))))
+
+(defn initialize
+  "Initialize the viewer state."
+  [token]
+  (Initialize. token))
+
+;; (defrecord Initialize [id token]
+;;   rs/UpdateEvent
+;;   (-apply-update [_ state]
+;;     (assoc state
+;;            :token token
+;;            :index id)))
+
+;; (defn initialize
+;;   "Initialize the viewer state."
+;;   [id token]
+;;   (let [id (parse-int id 0)]
+;;     (Initialize. id token)))
+
+;; --- Data Loaded
+
+(defrecord DataLoaded [data]
+  rs/UpdateEvent
+  (-apply-update [_ state]
+    (let [project (dissoc data :pages)
+          pages (vec (:pages data))]
+      (as-> state $
+        (assoc $ :project project)
+        (assoc $ :pages pages)
+        (reduce stpr/unpack-page $ pages)))))
+
+(defn data-loaded
+  [data]
+  (DataLoaded. data))
+
+;; --- Load Data
+
+(defrecord LoadData [token]
+  rs/WatchEvent
+  (-apply-watch [_ state stream]
+    (->> (rp/req :fetch/project-by-token token)
+         (rx/map :payload)
+         (rx/map data-loaded))))
+
+(defn load-data
+  [token]
+  (LoadData. token))
+
+;; --- Select Page
+
+(defrecord SelectPage [index]
+  rs/WatchEvent
+  (-apply-watch [_ state stream]
+    (let [token (get-in state [:route :params :token])]
+      (rx/of (rt/navigate :view/viewer {:token token :id index})))))
+
+(defn select-page
+  [index]
+  (SelectPage. index))
+
+;; --- Toggle Flag
+
+(defrecord ToggleFlag [key]
+  rs/UpdateEvent
+  (-apply-update [_ state]
+    (let [flags (:flags state #{})]
+      (if (contains? flags key)
+        (assoc state :flags (disj flags key))
+        (assoc state :flags (conj flags key))))))
+
+(defn toggle-flag
+  "Toggle the enabled flag of the specified tool."
+  [key]
+  {:pre [(keyword? key)]}
+  (println "toggle-flag" key)
+  (ToggleFlag. key))
+
+

src/uxbox/view/state.cljs

@@ -1,37 +0,0 @@
-;; This Source Code Form is subject to the terms of the Mozilla Public
-;; License, v. 2.0. If a copy of the MPL was not distributed with this
-;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
-;;
-;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
-
-(ns uxbox.view.state
-  (:require [beicon.core :as rx]
-            [lentes.core :as l]
-            [uxbox.common.rstore :as rs]
-            [uxbox.common.i18n :refer (tr)]
-            [uxbox.util.storage :refer (storage)]))
-
-(enable-console-print!)
-
-(defonce state (atom {}))
-(defonce loader (atom false))
-
-(def auth-l
-  (-> (l/key :auth)
-      (l/derive state)))
-
-(defn initial-state
-  []
-  {:route nil
-   :project nil
-   :auth (:uxbox/auth storage nil)
-   :shapes-by-id {}
-   :pages-by-id {}})
-
-(defn init
-  "Initialize the state materialization."
-  ([] (init initial-state))
-  ([& callbacks]
-   (-> (reduce #(merge %1 (%2)) nil callbacks)
-       (rs/init)
-       (rx/to-atom state))))

src/uxbox/view/ui.cljs

@@ -3,68 +3,81 @@
 ;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
 ;;
 ;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
-;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.view.ui
   (:require [sablono.core :refer-macros [html]]
+            [bidi.bidi :as bidi]
             [goog.dom :as gdom]
+            [lentes.core :as l]
             [rum.core :as rum]
-            [uxbox.common.i18n :refer (tr)]
+            [uxbox.util.i18n :refer (tr)]
-            ;; [uxbox.view.ui.loader :refer (loader)]
+            [uxbox.util.rstore :as rs]
-            ;; [uxbox.view.ui.lightbox :refer (lightbox)]
+            [uxbox.util.router :as rt]
+            [uxbox.util.mixins :as mx]
+            [uxbox.util.data :refer (parse-int)]
+            [uxbox.main.ui.loader :refer (loader)]
+            [uxbox.main.ui.lightbox :refer (lightbox)]
+            [uxbox.main.state :as st]
+            [uxbox.main.data.messages :as dmsg]
             [uxbox.main.ui.icons :as i]
-            [uxbox.common.ui.mixins :as mx]))
+            [uxbox.view.ui.notfound :refer (notfound-page)]
+            [uxbox.view.ui.viewer :refer (viewer-page)]))
+
+(def route-id-ref
+  (-> (l/in [:route :id])
+      (l/derive st/state)))
+
+(defn- on-error
+  "A default error handler."
+  [error]
+  (cond
+    ;; Network error
+    (= (:status error) 0)
+    (do
+      (dmsg/error! (tr "errors.network"))
+      (js/console.error "Stack:" (.-stack error)))
+
+    ;; Something else
+    :else
+    (do
+      (dmsg/error! (tr "errors.generic"))
+      (js/console.error "Stack:" (.-stack error)))))
+
+(rs/add-error-watcher :ui on-error)
 
 ;; --- Main App (Component)
 
 (defn app-render
   [own]
-  (html
+  (let [location (rum/react route-id-ref)]
-   [:section.view-content
+    (case location
-
+      :view/notfound (notfound-page)
-    [:div.view-sitemap.hide
+      :view/viewer (viewer-page)
-     [:span.sitemap-title "_Sitename_"]
+      nil)))
-     [:ul.sitemap-list
-      [:li
-       [:div.page-icon i/page]
-        [:span "page 001"]]
-      [:li
-       [:div.page-icon i/page]
-        [:span "page 002"]]
-      [:li
-       [:div.page-icon i/page]
-        [:span "page 003"]]
-      [:li
-       [:div.page-icon i/page]
-        [:span "page 004"]]]
-    ]
-
-    [:div.view-nav
-     [:ul.view-options-btn
-      [:li.tooltip.tooltip-right
-        {:alt "sitemap"} i/project-tree]
-      [:li.tooltip.tooltip-right
-        {:alt "view interactions"} i/action]
-      [:li.tooltip.tooltip-right
-        {:alt "share"} i/export]
-      [:li.tooltip.tooltip-right
-        {:alt "save SVG"} i/save]]]
-
-    [:div.view-canvas "VIEW CONTENT"]]))
 
 (def app
   (mx/component
    {:render app-render
-    :mixins [mx/static]
+    :name "app"
-    :name "app"}))
+    :mixins [mx/static rum/reactive]}))
+
+;; --- Routes
+
+(def routes ["/" [[[:token "/" :id] :view/viewer]
+                  [[:token] :view/viewer]
+                  ["not-found" :view/notfound]]])
 
 ;; --- Main Entry Point
 
+(defn init-routes
+  []
+  (rt/init routes {:default :view/notfound}))
+
 (defn init
   []
   (let [app-dom (gdom/getElement "app")
         lightbox-dom (gdom/getElement "lightbox")
         loader-dom (gdom/getElement "loader")]
     (rum/mount (app) app-dom)
-    #_(rum/mount (lightbox) lightbox-dom)
+    (rum/mount (lightbox) lightbox-dom)
-    #_(rum/mount (loader) loader-dom)))
+    (rum/mount (loader) loader-dom)))

src/uxbox/view/ui/notfound.cljs

@@ -0,0 +1,23 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.view.ui.notfound
+  (:require [sablono.core :refer-macros [html]]
+            [uxbox.util.mixins :as mx]))
+
+(defn notfound-page-render
+  [own]
+  (html
+   [:div
+    [:strong "Not Found"]]))
+
+(def notfound-page
+  (mx/component
+   {:render notfound-page-render
+    :name "notfound-page"
+    :mixins [mx/static]}))
+

src/uxbox/view/ui/viewer.cljs

@@ -0,0 +1,67 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.view.ui.viewer
+  (:require [sablono.core :refer-macros [html]]
+            [goog.dom :as gdom]
+            [lentes.core :as l]
+            [rum.core :as rum]
+            [promesa.core :as p]
+            [uxbox.util.i18n :refer (tr)]
+            [uxbox.util.rstore :as rs]
+            [uxbox.util.router :as rt]
+            [uxbox.util.mixins :as mx]
+            [uxbox.main.ui.icons :as i]
+            [uxbox.main.state :as st]
+            [uxbox.view.data.viewer :as dv]
+            [uxbox.view.ui.viewer.nav :refer (nav)]
+            [uxbox.view.ui.viewer.canvas :refer (canvas)]
+            [uxbox.view.ui.viewer.sitemap :refer (sitemap)]))
+
+;; --- Refs
+
+(def flags-ref
+  (-> (l/key :flags)
+      (l/derive st/state)))
+
+(def token-ref
+  (-> (l/in [:route :params :token])
+      (l/derive st/state)))
+
+;; --- Component
+
+(defn- viewer-page-will-mount
+  [own]
+  (letfn [(on-change [token]
+            (rs/emit! (dv/initialize token)))]
+    (add-watch token-ref ::wkey #(on-change %4))
+    (on-change @token-ref)
+    own))
+
+(defn- viewer-page-will-unmount
+  [own]
+  (remove-watch token-ref ::wkey)
+  own)
+
+(defn viewer-page-render
+  [own]
+  (let [flags (rum/react flags-ref)
+        sitemap? (contains? flags :sitemap)]
+    (html
+     [:section.view-content
+      (when sitemap?
+        (sitemap))
+      (nav flags)
+      (canvas)])))
+
+(def viewer-page
+  (mx/component
+   {:render viewer-page-render
+    :will-mount viewer-page-will-mount
+    :will-unmount viewer-page-will-unmount
+    :name "viewer-page"
+    :mixins [mx/static rum/reactive]}))

src/uxbox/view/ui/viewer/canvas.cljs

@@ -0,0 +1,24 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.view.ui.viewer.canvas
+  (:require [sablono.core :refer-macros [html]]
+            [lentes.core :as l]
+            [rum.core :as rum]
+            [uxbox.util.mixins :as mx]
+            [uxbox.main.ui.icons :as i]))
+
+(defn canvas-render
+  [own]
+  (html
+   [:div.view-canvas "VIEW CONTENT"]))
+
+(def canvas
+  (mx/component
+   {:render canvas-render
+    :name "canvas"
+    :mixins [mx/static]}))

src/uxbox/view/ui/viewer/nav.cljs

@@ -0,0 +1,42 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.view.ui.viewer.nav
+  (:require [sablono.core :refer-macros [html]]
+            [lentes.core :as l]
+            [rum.core :as rum]
+            [uxbox.util.mixins :as mx]
+            [uxbox.util.rstore :as rs]
+            [uxbox.main.ui.icons :as i]
+            [uxbox.main.state :as st]
+            [uxbox.view.data.viewer :as dv]))
+
+(defn nav-render
+  [own flags]
+  (let [toggle #(rs/emit! (dv/toggle-flag :sitemap))
+        sitemap? (contains? flags :sitemap)]
+    (html
+     [:div.view-nav
+      [:ul.view-options-btn
+       [:li.tooltip.tooltip-right
+        {:alt "sitemap"
+         :class (when sitemap? "selected")
+         :on-click toggle}
+        i/project-tree]
+       [:li.tooltip.tooltip-right
+        {:alt "view interactions"}
+        i/action]
+       [:li.tooltip.tooltip-right
+        {:alt "share"} i/export]
+       [:li.tooltip.tooltip-right
+        {:alt "save SVG"} i/save]]])))
+
+(def nav
+  (mx/component
+   {:render nav-render
+    :name "nav"
+    :mixins [mx/static rum/reactive]}))

src/uxbox/view/ui/viewer/sitemap.cljs

@@ -0,0 +1,62 @@
+;; This Source Code Form is subject to the terms of the Mozilla Public
+;; License, v. 2.0. If a copy of the MPL was not distributed with this
+;; file, You can obtain one at http://mozilla.org/MPL/2.0/.
+;;
+;; Copyright (c) 2016 Andrey Antukh <niwi@niwi.nz>
+;; Copyright (c) 2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
+
+(ns uxbox.view.ui.viewer.sitemap
+  (:require [sablono.core :refer-macros (html)]
+            [lentes.core :as l]
+            [rum.core :as rum]
+            [uxbox.util.i18n :refer (tr)]
+            [uxbox.util.mixins :as mx]
+            [uxbox.util.data :refer (parse-int)]
+            [uxbox.util.rstore :as rs]
+            [uxbox.main.state :as st]
+            [uxbox.main.ui.icons :as i]
+            [uxbox.view.data.viewer :as dv]))
+
+
+;; --- Refs
+
+(def pages-ref
+  (-> (l/key :pages)
+      (l/derive st/state)))
+
+(def project-name-ref
+  (-> (l/in [:project :name])
+      (l/derive st/state)))
+
+(def selected-ref
+  (-> (comp (l/in [:route :params :id])
+            (l/lens #(parse-int % 0)))
+      (l/derive st/state)))
+
+;; --- Component
+
+(defn- sitemap-render
+  [own]
+  (let [project-name (rum/react project-name-ref)
+        pages (rum/react pages-ref)
+        selected (rum/react selected-ref)
+        on-click #(rs/emit! (dv/select-page %))]
+    (html
+     [:div.view-sitemap
+      [:span.sitemap-title project-name]
+      [:ul.sitemap-list
+       (for [[i page] (map-indexed vector pages)
+             :let [selected? (= i selected)]]
+         [:li {:class (when selected? "selected")
+               :on-click (partial on-click i)
+               :key (str i)}
+          [:div.page-icon i/page]
+          [:span (:name page)]])]])))
+
+(def sitemap
+  (mx/component
+   {:render sitemap-render
+    :name "sitemap"
+    :mixins [mx/static rum/reactive]}))
+
+