Use subs to change src paths depending on dev vs prod

src/com/yetanalytics/lrs_admin_ui/db.cljs

@@ -82,6 +82,7 @@
 (s/def ::server-host string?)
 (s/def ::xapi-prefix string?) ;; default /xapi
 (s/def ::proxy-path (s/nilable string?)) ;; default nil
+(s/def ::resource-base string?)
 
 (s/def ::pref-lang keyword?)
 (s/def ::language map?)
@@ -192,6 +193,7 @@
                           ::browser
                           ::accounts
                           ::server-host
+                          ::resource-base
                           ::xapi-prefix
                           ::proxy-path
                           ::language

src/com/yetanalytics/lrs_admin_ui/handlers.cljs

@@ -49,6 +49,7 @@
                        :batch-size 10
                        :back-stack []}
          ::db/server-host (or server-host "")
+         ::db/resource-base (if server-host "/" "/admin/")
          ::db/xapi-prefix "/xapi"
          ::db/proxy-path (stor/get-item "proxy-path")
          ::db/language lang/language

src/com/yetanalytics/lrs_admin_ui/subs.cljs

@@ -22,6 +22,23 @@
  (fn [db _]
    (::db/proxy-path db)))
 
+(reg-sub
+ ::db/resource-base
+ (fn [db _]
+   (::db/resource-base db)))
+
+(reg-sub
+ :resources/image
+ :<- [::db/resource-base]
+ (fn [resource-base [_ image-name]]
+   (str resource-base "images/" image-name)))
+
+(reg-sub
+ :resources/icon
+ :<- [::db/resource-base]
+ (fn [resource-base [_ icon-name]]
+   (str resource-base "images/icons/" icon-name)))
+
 (reg-sub
  :db/language
  (fn [db _]

src/com/yetanalytics/lrs_admin_ui/views/browser.cljs

@@ -38,8 +38,8 @@
   [:a {:class "pointer"
        :title title
        :on-click #(dispatch [:browser/add-filter key value])}
-   [:img {:src "/images/icons/add-filter.svg"
-          :width "15px"
+   [:img {:src    @(subscribe [:resources/icon "add-filter.svg"])
+          :width  "15px"
           :height "20px"}]])
 
 (defn verb-cell
@@ -127,7 +127,7 @@
        (when (seq b-s)
          [:a {:on-click #(dispatch [:browser/back])
               :class "pointer"}
-          [:img {:src "/images/icons/prev.svg"
+          [:img {:src   @(subscribe [:resources/icon "prev.svg"])
                  :width "30px"}]])]
       [:div {:class "table-nav-pages"}
        [:span " Page: " (+ 1 (count b-s))]]
@@ -148,7 +148,7 @@
        (when (seq @(subscribe [:browser/get-more-link]))
          [:a {:on-click #(dispatch [:browser/more])
               :class "pointer"}
-          [:img {:src "/images/icons/next.svg"
+          [:img {:src   @(subscribe [:resources/icon "next.svg"])
                  :width "30px"}]])]]]))
 
 (defn refresh-button []

src/com/yetanalytics/lrs_admin_ui/views/footer.cljs

@@ -24,26 +24,26 @@
         [:a {:href "#"
              :on-click #(dispatch-sync [:session/set-page :credentials])}
          [:i
-          [:img {:src "/images/icons/icon-mobile-credentials.svg" :alt "" :width "16"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-credentials.svg"]) :alt "" :width "16"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.credentials])]]]
        [:div {:class "col-3 text-center footer-icon pointer"}
         [:a {:href "#"
              :on-click #(dispatch-sync [:session/set-page :accounts])}
          [:i
-          [:img {:src "/images/icons/icon-mobile-profle.svg" :alt "" :width "10"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-profle.svg"]) :alt "" :width "10"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.accounts])]]]
        [:div {:class "col-3 text-center footer-icon pointer"}
         [:a {:href "#"
              :on-click #(dispatch-sync [:session/set-page :browser])}
          [:i
-          [:img {:src "/images/icons/icon-mobile-search.svg" :alt "" :width "16"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-search.svg"]) :alt "" :width "16"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.browser])]]]
        [:div {:class "col-3 text-center footer-icon pointer"}
         [:a {:href "#"
              :on-click #(do (ps-event %)
                             (dispatch-sync [:session/logout]))}
          [:i
-          [:img {:src "/images/icons/icon-mobile-logout.svg" :alt "Logout" :width "16"}]]
+          [:img {:src @(subscribe [:resources/icon "icon-mobile-logout.svg"]) :alt "Logout" :width "16"}]]
          [:span {:class "font-condensed font-10 fg-primary"} @(subscribe [:lang/get :footer.nav.logout])]]]])
     [:div {:class "mobile-footer-links"}
      [yet-copy]]]
@@ -54,7 +54,7 @@
       @(subscribe [:lang/get :footer.license])]"   |   "
      [:a {:class "text-white", :rel "noopener noreferrer" :href "https://github.com/yetanalytics/lrsql"}
       @(subscribe [:lang/get :footer.contribute])
-      [:img {:src "/images/icons/github.png"
+      [:img {:src @(subscribe [:resources/icon "github.png"])
              :alt "Github Logo"}]]
      [:span {:class "support-note"}
       @(subscribe [:lang/get :footer.contact-note])]]]])

src/com/yetanalytics/lrs_admin_ui/views/form.cljs

@@ -1,5 +1,6 @@
 (ns com.yetanalytics.lrs-admin-ui.views.form
   (:require [reagent.core :as r]
+            [re-frame.core :refer [subscribe]]
             [com.yetanalytics.lrs-admin-ui.functions :as fns]
             [com.yetanalytics.lrs-admin-ui.views.form.dropdown
              :refer [make-key-down-fn
@@ -121,7 +122,7 @@
           :or {options     []
                select-fn   (fn [v] (println 'select v))
                label-left? false
-               icon-src    "/images/icons/add.svg"
+               icon-src    @(subscribe [:resources/icon "add.svg"])
                class       ""}}]
       [:div.action-dropdown
        {:on-blur (fn [_]

src/com/yetanalytics/lrs_admin_ui/views/form/dropdown.cljs

@@ -1,5 +1,6 @@
 (ns com.yetanalytics.lrs-admin-ui.views.form.dropdown
-  (:require [com.yetanalytics.lrs-admin-ui.functions :as fns]))
+  (:require [re-frame.core :refer [subscribe]]
+            [com.yetanalytics.lrs-admin-ui.functions :as fns]))
 
 ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;
 ;; Helpers
@@ -105,7 +106,7 @@
                                (fns/ps-event e)))
               :tab-index   0
               :aria-label  "Select the text in the search bar."}
-       [:img {:src "/images/icons/icon-add.svg"}]
+       [:img {:src @(subscribe [:resources/icon "icon-add.svg"])}]
        "Add"])]])
 
 (defn combo-box-dropdown
@@ -138,8 +139,8 @@
           placeholder)]]
    [:span {:class "form-select-top-right"}
     [:img {:src (if @dropdown-open?
-                  "/images/icons/icon-expand-less.svg"
-                  "/images/icons/icon-expand-more.svg")}]]])
+                  @(subscribe [:resources/icon "icon-expand-less.svg"])
+                  @(subscribe [:resources/icon "icon-expand-more.svg"]))}]]])
 
 (defn multi-select-input-top
   "The top pane of a multiple-selection combo box."
@@ -164,7 +165,7 @@
                [:span {:class "form-multi-select-array-item"}
                 ;; TODO: Better solution to value-label discrepancy
                 [:p (or (get-label options val) val)
-                 [:img {:src "/images/icons/icon-close-black.svg"
+                 [:img {:src @(subscribe [:resources/icon "icon-close-black.svg"])
                         :on-click (fn [e]
                                     (fns/ps-event e)
                                     (value-update-fn val))}]]]))
@@ -173,5 +174,5 @@
       [:p placeholder])]
    [:div {:class "form-multi-select-top-right"}
     [:img {:src (if @dropdown-open?
-                  "/images/icons/icon-expand-less.svg"
-                  "/images/icons/icon-expand-more.svg")}]]])
+                  @(subscribe [:resources/icon "icon-expand-less.svg"])
+                  @(subscribe [:resources/icon "icon-expand-more.svg"]))}]]])

src/com/yetanalytics/lrs_admin_ui/views/form/validation.cljs

@@ -1,7 +1,7 @@
 (ns com.yetanalytics.lrs-admin-ui.views.form.validation
-  (:require
-   [reagent.core :as r]
-   [goog.string]))
+  (:require [reagent.core :as r]
+            [re-frame.core :refer [subscribe]]
+            [goog.string]))
 
 (defn- unescape
   "Alias for `goog.string/unescapeEntities`, where `s` is the string to
@@ -12,27 +12,27 @@
 (defn- type->div-class
   [validation-type]
   (case validation-type
-    :valid "validation-display"
+    :valid   "validation-display"
     :warning "validation-display warning"
-    :error "validation-display invalid"
+    :error   "validation-display invalid"
     :invalid "validation-display invalid"
     :loading "validation-display loading"))
 
 (defn- type->icon-path
   [validation-type]
   (case validation-type
-    :valid "/images/icons/valid.svg"
-    :warning "/images/icons/warning.svg"
-    :error "/images/icons/invalid.svg"
-    :invalid "/images/icons/invalid.svg"
-    :loading "/images/icons/loading.svg"))
+    :valid   @(subscribe [:resources/icon "valid.svg"])
+    :warning @(subscribe [:resources/icon "warning.svg"])
+    :error   @(subscribe [:resources/icon "invalid.svg"])
+    :invalid @(subscribe [:resources/icon "invalid.svg"])
+    :loading @(subscribe [:resources/icon "loading.svg"])))
 
 (defn- type->item-icon-path
   [validation-type]
   (case validation-type
-    :warning "/images/icons/warning-item.svg"
-    :error "/images/icons/error-item.svg"
-    :invalid "/images/icons/error-item.svg"))
+    :warning @(subscribe [:resources/icon "warning-item.svg"])
+    :error   @(subscribe [:resources/icon "error-item.svg"])
+    :invalid @(subscribe [:resources/icon "error-item.svg"])))
 
 (defn validation-static-display
   [validation-type message]

src/com/yetanalytics/lrs_admin_ui/views/header.cljs

@@ -20,7 +20,9 @@
    [:div {:class "header-wrapper"}
     [:div {:class "post-image"}
      [:i
-      [:img {:src "/images/logo.png", :alt "logo", :class "logo-img"}]]]
+      [:img {:src   @(subscribe [:resources/image "logo.png"])
+             :alt   "logo"
+             :class "logo-img"}]]]
     [:div {:class "text-right"}
      [username]
      [:div {:class "header-actions-wrapper"}

src/com/yetanalytics/lrs_admin_ui/views/login.cljs

@@ -11,7 +11,8 @@
      [:div {:class "main-wrapper"}
       [:div {:class "logo-image"}
        [:i
-        [:img {:src "/images/logo.png", :alt "LRS Logo"}]]]
+        [:img {:src @(subscribe [:resources/image "logo.png"])
+               :alt "LRS Logo"}]]]
       [:h1 @(subscribe [:lang/get :login.title])]
       [:div {:class "form-wrapper"}
        [:form {:id "login-form"}

src/com/yetanalytics/lrs_admin_ui/views/notification.cljs

@@ -16,10 +16,9 @@
     [:span {:class "close-alert pointer"
             :on-click #(dispatch [:notification/hide id])}
      [:img {:class "close-alert"
-            :src (format "/images/icons/icon-close-%s.svg"
-                         (cond
-                           error? "black"
-                           :else "white"))}]]]])
+            :src @(subscribe [:resources/icon
+                              (format "icon-close-%s.svg"
+                                      (if error? "black" "white"))])}]]]])
 
 (defn notifications []
   (let [notifications @(subscribe [:notifications/get-notifications])]

src/com/yetanalytics/lrs_admin_ui/views/reactions.cljs

@@ -327,7 +327,7 @@
     (gstr/format 
      @(subscribe [:lang/get :reactions.details.conditions.delete-button]) 
      to-delete-desc)
-    [:img {:src "/images/icons/icon-delete-brand.svg"}]]])
+    [:img {:src @(subscribe [:resources/icon "icon-delete-brand.svg"])}]]])
 
 (defn- add-condition
   []
@@ -337,7 +337,7 @@
                     (fns/ps-event e)
                     (dispatch [:reaction/add-condition]))}
     @(subscribe [:lang/get :reactions.details.conditions.add-condition])
-    [:img {:src "/images/icons/add.svg"}]]])
+    [:img {:src @(subscribe [:resources/icon "add.svg"])}]]])
 
 (defn- add-clause
   [parent-path]
@@ -644,7 +644,7 @@
                                  (fns/ps-event e)
                                  (dispatch [:reaction/add-identity-path]))}
                  @(subscribe [:lang/get :reactions.identity-paths.add])
-                 [:img {:src "/images/icons/add.svg"}]]])]))]])))
+                 [:img {:src @(subscribe [:resources/icon "add.svg"])}]]])]))]])))
 
 (defn- render-conditions-errors
   "Render out top-level conditions errors, currently there is only one, an empty

src/com/yetanalytics/lrs_admin_ui/views/reactions/path.cljs

@@ -1,5 +1,6 @@
 (ns com.yetanalytics.lrs-admin-ui.views.reactions.path
   (:require [reagent.core :as r]
+            [re-frame.core :refer [subscribe]]
             [com.yetanalytics.lrs-admin-ui.functions :as fns]
             [com.yetanalytics.lrs-reactions.path :as rpath]
             [com.yetanalytics.lrs-admin-ui.views.form :as form]
@@ -100,7 +101,7 @@
                  :on-click (fn [e]
                              (fns/ps-event e)
                              (del-fn))}
-             [:img {:src "images/icons/minus.svg"}]]])
+             [:img {:src @(subscribe [:resources/icon "minus.svg"])}]]])
           ;; Offer another segment if path is valid & not complete
           (and valid?
                (not complete?))
@@ -110,7 +111,7 @@
                  :on-click (fn [e]
                              (fns/ps-event e)
                              (add-fn))}
-             [:img {:src "images/icons/add.svg"}]]])
+             [:img {:src @(subscribe [:resources/icon "add.svg"])}]]])
           ;; If remove function is provided, add icon for that
           remove-fn
           (conj
@@ -119,7 +120,7 @@
                  :on-click (fn [e]
                              (fns/ps-event e)
                              (remove-fn))}
-             [:img {:src "images/icons/icon-delete-brand.svg"}]]])
+             [:img {:src @(subscribe [:resources/icon "icon-delete-brand.svg"])}]]])
           )
         ;; Indicate expected type?
         )))