Properly refresh pages list on interactions sidebar menus.

And convert the interaction related components to
use the defc/defcs macros.

frontend/src/uxbox/main/refs.cljs

@@ -24,6 +24,14 @@
   (let [id (l/focus ul/selected-page state)]
     (get-in state [:pages id])))
 
+(defn- resolve-project-pages
+  [state]
+  (let [project (get-in state [:workspace :project])
+        get-order #(get-in % [:metadata :order])]
+    (->> (vals (:pages state))
+         (filter #(= project (:project %)))
+         (sort-by get-order))))
+
 (def workspace
   (l/derive ul/workspace st/state))
 
@@ -32,6 +40,10 @@
   (-> (l/lens resolve-project)
       (l/derive st/state)))
 
+(def selected-project-pages
+  (-> (l/lens resolve-project-pages)
+      (l/derive st/state)))
+
 (def selected-page
   "Ref to the current selected page."
   (-> (l/lens resolve-page)

frontend/src/uxbox/main/ui/workspace/sidebar/options/interactions.cljs

@@ -6,23 +6,20 @@
 ;; Copyright (c) 2015-2016 Juan de la Cruz <delacruzgarciajuan@gmail.com>
 
 (ns uxbox.main.ui.workspace.sidebar.options.interactions
-  (:require [sablono.core :refer-macros [html]]
+  (:require [lentes.core :as l]
-            [rum.core :as rum]
+            [uxbox.builtins.icons :as i]
-            [lentes.core :as l]
+            [uxbox.util.i18n :refer [tr]]
-            [uxbox.util.i18n :refer (tr)]
             [uxbox.util.router :as r]
-            [potok.core :as ptk]
+            [uxbox.main.refs :as refs]
-            [uxbox.util.mixins :as mx :include-macros true]
             [uxbox.main.store :as st]
             [uxbox.main.data.shapes :as uds]
             [uxbox.main.data.lightbox :as udl]
-            [uxbox.main.ui.workspace.sidebar.sitemap :refer (pages-ref)]
-            [uxbox.builtins.icons :as i]
             [uxbox.main.ui.lightbox :as lbx]
             [uxbox.main.ui.colorpicker :as cp]
             [uxbox.util.dom :as dom]
-            [uxbox.util.data :refer (parse-int parse-float read-string)]
+            [uxbox.util.data :refer [read-string]]
-            [uxbox.util.spec :refer (color?)]))
+            [uxbox.util.spec :refer [color?]]
+            [uxbox.util.mixins :as mx :include-macros true]))
 
 ;; --- Helpers
 
@@ -55,8 +52,8 @@
     ;; :holdrelease "Hold release"
     (pr-str trigger)))
 
-(defn- interactions-list-render
+(mx/defc interactions-list
-  [own shape form-ref]
+  [shape form-ref]
   (letfn [(on-edit [item event]
             (dom/prevent-default event)
             (reset! form-ref item))
@@ -68,7 +65,6 @@
             (dom/prevent-default event)
             (let [delete (partial delete item)]
               (udl/open! :confirm {:on-accept delete})))]
-    (html
     [:ul.element-list
      (for [item (vals (:interactions shape))
            :let [key (pr-str (:id item))]]
@@ -77,21 +73,14 @@
         [:span (translate-trigger-name (:trigger item))]
         [:div.list-actions
          [:a {:on-click (partial on-edit item)} i/pencil]
-          [:a {:on-click (partial on-delete item)} i/trash]]])])))
+         [:a {:on-click (partial on-delete item)} i/trash]]])]))
-
-(def interactions-list
-  (mx/component
-   {:render interactions-list-render
-    :name "interactions-list"
-    :mixins [mx/static]}))
 
 ;; --- Trigger Input
 
-(defn- trigger-input-render
+(mx/defc trigger-input
-  [own form-ref]
+  [form-ref]
   (when-not (:trigger @form-ref)
     (swap! form-ref assoc :trigger :click))
-  (html
   [:div
    [:span "Trigger"]
    [:div.row-flex
@@ -111,19 +100,12 @@
      #_[:option {:value ":holdrelease"} "Hold release"]
      #_[:option {:value ":keypress"} "Key press"]
      #_[:option {:value ":pageisloaded"} "Page is loaded"]
-      #_[:option {:value ":windowscroll"} "Window is scrolled to"]]]]))
+     #_[:option {:value ":windowscroll"} "Window is scrolled to"]]]])
-
-(def trigger-input
-  (mx/component
-   {:render trigger-input-render
-    :name "trigger-input"
-    :mixins [mx/static]}))
 
 ;; --- URL Input
 
-(defn- url-input-render
+(mx/defc url-input
-  [own form-ref]
+  [form-ref]
-  (html
   [:div
    [:span "Url"]
    [:div.row-flex
@@ -131,12 +113,7 @@
      {:placeholder "http://"
       :on-change (partial on-change form-ref :url)
       :value (:url @form-ref "")
-       :type "url"}]]]))
+      :type "url"}]]])
-
-(def url-input
-  (mx/component
-   {:render url-input-render
-    :name "url-input"}))
 
 ;; --- Elements Input
 
@@ -151,10 +128,9 @@
                   (conj acc shape))))]
       (reduce resolve-shape [] shapes))))
 
-(defn- elements-input-render
+(mx/defc elements-input
-  [own page form-ref]
+  [page form-ref]
   (let [shapes (collect-shapes @st/state page)]
-    (html
     [:div
      [:span "Element"]
      [:div.row-flex
@@ -165,22 +141,18 @@
        [:option {:value "nil"} "---"]
        (for [shape shapes
              :let [key (pr-str (:id shape))]]
-          [:option {:key key :value key} (:name shape)])]]])))
+         [:option {:key key :value key} (:name shape)])]]]))
-
-(def elements-input
-  (mx/component
-   {:render elements-input-render
-    :name "elements-input"}))
 
 ;; --- Page Input
 
-(defn- pages-input-render
+(mx/defc pages-input
-  [own form-ref path]
+  {:mixins [mx/reactive]}
-  (let [pages @pages-ref]
+  [form-ref path]
+  ;; FIXME: react on ref
+  (let [pages (mx/react refs/selected-project-pages)]
     (when (and (not (:page @form-ref))
                (pos? (count pages)))
       (swap! form-ref assoc :page (:id (first pages))))
-    (html
     [:div
      [:span "Page"]
      [:div.row-flex
@@ -188,21 +160,15 @@
                              :on-change (partial on-change form-ref :page)
                              :value (pr-str (:page @form-ref))}
        (for [page pages
-              :let [key (:index page)]]
+             :let [key (pr-str (:id page))]]
-          [:option {:key key :value key} (:name page)])]]])))
+         [:option {:key key :value key} (:name page)])]]]))
-
-(def pages-input
-  (mx/component
-   {:render pages-input-render
-    :name "pages-input"}))
 
 ;; --- Animation
 
-(defn- animation-input-render
+(mx/defc animation-input
-  [own form-ref]
+  [form-ref]
   (when-not (:action @form-ref)
     (swap! form-ref assoc :animation :none))
-  (html
   [:div
    [:span "Animation"]
    [:div.row-flex
@@ -212,22 +178,16 @@
       :value (pr-str (:animation @form-ref))}
      [:option {:value ":none"} "None"]
      [:option {:value ":fade"} "Fade"]
-      [:option {:value ":slide"} "Slide"]]]]))
+     [:option {:value ":slide"} "Slide"]]]])
-
-(def animation-input
-  (mx/component
-   {:render animation-input-render
-    :name "animation-input"}))
 
 ;; --- MoveTo Input
 
-(defn- moveto-input-render
+(mx/defc moveto-input
-  [own form-ref]
+  [form-ref]
   (when-not (:moveto-x @form-ref)
     (swap! form-ref assoc :moveto-x 0))
   (when-not (:moveto-y @form-ref)
     (swap! form-ref assoc :moveto-y 0))
-  (html
   [:div
    [:span "Move to position"]
    [:div.row-flex
@@ -242,22 +202,16 @@
       {:placeholder "Y"
        :on-change (partial on-change form-ref :moveto-y)
        :type "number"
-        :value (:moveto-y @form-ref "")}]]]]))
+       :value (:moveto-y @form-ref "")}]]]])
-
-(def moveto-input
-  (mx/component
-   {:render moveto-input-render
-    :name "moveto-input"}))
 
 ;; --- MoveBy Input
 
-(defn- moveby-input-render
+(mx/defc moveby-input
-  [own form-ref]
+  [form-ref]
   (when-not (:moveby-x @form-ref)
     (swap! form-ref assoc :moveby-x 0))
   (when-not (:moveby-y @form-ref)
     (swap! form-ref assoc :moveby-y 0))
-  (html
   [:div
    [:span "Move to position"]
    [:div.row-flex
@@ -272,20 +226,14 @@
       {:placeholder "Y"
        :on-change (partial on-change form-ref :moveby-y)
        :type "number"
-        :value (:moveby-y @form-ref "")}]]]]))
+       :value (:moveby-y @form-ref "")}]]]])
-
-(def moveby-input
-  (mx/component
-   {:render moveby-input-render
-    :name "moveby-input"}))
 
 ;; --- Opacity Input
 
-(defn- opacity-input-render
+(mx/defc opacity-input
-  [own form-ref]
+  [form-ref]
   (when-not (:opacity @form-ref)
     (swap! form-ref assoc :opacity 100))
-  (html
   [:div
    [:span "Opacity"]
    [:div.row-flex
@@ -296,18 +244,12 @@
        :min "0"
        :max "100"
        :type "number"
-        :value (:opacity @form-ref "")}]]]]))
+       :value (:opacity @form-ref "")}]]]])
-
-(def opacity-input
-  (mx/component
-   {:render opacity-input-render
-    :name "opacity-input"}))
 
 ;; --- Rotate Input
 
-(defn rotate-input-render
+(mx/defc rotate-input
-  [own form-ref]
+  [form-ref]
-  (html
   [:div
    [:span "Rotate (dg)"]
    [:div.row-flex
@@ -316,18 +258,12 @@
       {:placeholder "dg"
        :on-change (partial on-change form-ref :rotation)
        :type "number"
-        :value (:rotation @form-ref "")}]]]]))
+       :value (:rotation @form-ref "")}]]]])
-
-(def rotate-input
-  (mx/component
-   {:render rotate-input-render
-    :name "rotate-input"}))
 
 ;; --- Resize Input
 
-(defn- resize-input-render
+(mx/defc resize-input
-  [own form-ref]
+  [form-ref]
-  (html
   [:div
    [:span "Resize"]
    [:div.row-flex
@@ -342,20 +278,14 @@
       {:placeholder "Height"
        :on-change (partial on-change form-ref :resize-height)
        :type "number"
-        :value (:resize-height @form-ref "")}]]]]))
+       :value (:resize-height @form-ref "")}]]]])
-
-(def resize-input
-  (mx/component
-   {:render resize-input-render
-    :name "resize-input"}))
 
 ;; --- Color Input
 
-(defn- colorpicker-render
+(mx/defc colorpicker
-  [own {:keys [x y on-change value]}]
+  [{:keys [x y on-change value]}]
   (let [left (- x 260)
         top (- y 50)]
-    (html
     [:div.colorpicker-tooltip
      {:style {:left (str left "px")
               :top (str top "px")}}
@@ -363,20 +293,14 @@
      (cp/colorpicker
       :theme :small
       :value value
-       :on-change on-change)])))
+      :on-change on-change)]))
-
-(def ^:private colorpicker
-  (mx/component
-   {:render colorpicker-render
-    :name "colorpicker"
-    :mixins [mx/reactive mx/static]}))
 
 (defmethod lbx/render-lightbox :interactions/colorpicker
   [params]
   (colorpicker params))
 
-(defn- color-input-render
+(mx/defc color-input
-  [own form-ref]
+  [form-ref]
   (when-not (:fill-color @form-ref)
     (swap! form-ref assoc :fill-color "#000000"))
   (when-not (:stroke-color @form-ref)
@@ -401,7 +325,6 @@
               (udl/open! :interactions/colorpicker opts)))]
     (let [stroke-color (:stroke-color @form-ref)
           fill-color (:fill-color @form-ref)]
-      (html
       [:div
        [:div.row-flex
         [:div.column-half
@@ -423,20 +346,14 @@
           [:div.color-info
            [:input
             {:on-change on-change-stroke-color
-              :value stroke-color}]]]]]]))))
+             :value stroke-color}]]]]]])))
-
-(def color-input
-  (mx/component
-   {:render color-input-render
-    :name "color-input"}))
 
 ;; --- Easing Input
 
-(defn- easing-input-render
+(mx/defc easing-input
-  [own form-ref]
+  [form-ref]
   (when-not (:easing @form-ref)
     (swap! form-ref assoc :easing :linear))
-  (html
   [:div
    [:span "Easing"]
    [:div.row-flex
@@ -447,22 +364,16 @@
      [:option {:value ":linear"} "Linear"]
      [:option {:value ":easein"} "Ease in"]
      [:option {:value ":easeout"} "Ease out"]
-      [:option {:value ":easeinout"} "Ease in out"]]]]))
+     [:option {:value ":easeinout"} "Ease in out"]]]])
-
-(def easing-input
-  (mx/component
-   {:render easing-input-render
-    :name "easing-input"}))
 
 ;; --- Duration Input
 
-(defn- duration-input-render
+(mx/defc duration-input
-  [own form-ref]
+  [form-ref]
   (when-not (:duration @form-ref)
     (swap! form-ref assoc :duration 300))
   (when-not (:delay @form-ref)
     (swap! form-ref assoc :delay 0))
-  (html
   [:div
    [:span "Duration  |  Delay"]
    [:div.row-flex
@@ -476,26 +387,19 @@
      [:input.input-text {:placeholder "Delay"
                          :type "number"
                          :on-change (partial on-change form-ref :delay)
-                         :value (pr-str (:delay @form-ref))}]]]]))
+                         :value (pr-str (:delay @form-ref))}]]]])
-
-(def duration-input
-  (mx/component
-   {:render duration-input-render
-    :name "duration-input"}))
 
 ;; --- Action Input
 
-(defn- action-input-render
+(mx/defc action-input
-  [own page form-ref]
+  [page form-ref]
   (when-not (:action @form-ref)
     (swap! form-ref assoc :action :show))
-
   (let [form @form-ref
         simple? #{:gotourl :gotopage}
         elements? (complement simple?)
         animation? #{:show :hide :toggle}
         only-easing? (complement animation?)]
-    (html
     [:div
      [:span "Action"]
      [:div.row-flex
@@ -541,17 +445,12 @@
        (mx/concat
         (easing-input form-ref)
         (duration-input form-ref)))
-      ])))
+     ]))
-
-(def action-input
-  (mx/component
-   {:render action-input-render
-    :name "action-input"}))
 
 ;; --- Form
 
-(defn- interactions-form-render
+(mx/defc interactions-form
-  [own shape form-ref]
+  [shape form-ref]
   (letfn [(on-submit [event]
             (dom/prevent-default event)
             (let [shape-id (:id shape)
@@ -561,7 +460,6 @@
           (on-cancel [event]
             (dom/prevent-default event)
             (reset! form-ref nil))]
-    (html
     [:form {:on-submit on-submit}
      (trigger-input form-ref)
      (action-input (:page shape) form-ref)
@@ -569,22 +467,17 @@
       [:input.btn-primary.btn-small.save-btn
         {:value "Save" :type "submit"}]
       [:a.cancel-btn {:on-click on-cancel}
-        "Cancel"]]])))
+       "Cancel"]]]))
-
-(def interactions-form
-  (mx/component
-   {:render interactions-form-render
-    :name "interactions-form"}))
 
 ;; --- Interactions Menu
 
-(defn- interactions-menu-render
+(mx/defcs interactions-menu
+  {:mixins [mx/static (mx/local)]}
   [own menu shape]
   (let [local (:rum/local own)
         form-ref (l/derive (l/key :form) local)
         interactions (:interactions shape)
         create-interaction #(reset! form-ref {})]
-    (html
     [:div.element-set {:key (str (:id menu))}
      [:div.element-set-title (:name menu)]
      [:div.element-set-content
@@ -595,14 +488,7 @@
          [:input.btn-primary.btn-small
           {:value "New interaction"
            :on-click create-interaction
-            :type "button"}]])]])))
+           :type "button"}]])]]))
-
-(def interactions-menu
-  (mx/component
-   {:render interactions-menu-render
-    :name "interactions-menu"
-    :mixins [mx/static (mx/local)]}))
-
 
 ;; --- Not implemented stuff
 

frontend/src/uxbox/main/ui/workspace/sidebar/sitemap.cljs

@@ -24,21 +24,6 @@
             [uxbox.util.dom :as dom]
             [uxbox.util.mixins :as mx :include-macros true]))
 
-;; --- Refs
-
-(defn- resolve-pages
-  [state]
-  (let [project (get-in state [:workspace :project])]
-    (->> (vals (:pages state))
-         (filter #(= project (:project %)))
-         (sort-by #(get-in % [:metadata :order])))))
-
-(def pages-ref
-  (-> (l/lens resolve-pages)
-      (l/derive st/state)))
-
-;; --- Component
-
 (mx/defcs page-item
   {:mixins [(mx/local) mx/static mx/reactive]}
   [{:keys [rum/local] :as own} page total active?]
@@ -120,7 +105,7 @@
   {:mixins [mx/static mx/reactive]}
   []
   (let [project (mx/react refs/selected-project)
-        pages (mx/react pages-ref)
+        pages (mx/react refs/selected-project-pages)
         current (mx/react refs/selected-page)
         create #(udl/open! :page-form {:page {:project (:id project)}})
         close #(st/emit! (dw/toggle-flag :sitemap))]