gallery image modal

1 files changed, 34 insertions, 3 deletions

diff --git a/lisp/webapps/woodriverlessons/clojurescript/woodriverlessons/src/core.cljs b/lisp/webapps/woodriverlessons/clojurescript/woodriverlessons/src/core.cljs
index 6066008..737b20c 100644
--- a/lisp/webapps/woodriverlessons/clojurescript/woodriverlessons/src/core.cljs
+++ b/lisp/webapps/woodriverlessons/clojurescript/woodriverlessons/src/core.cljs
@@ -71,6 +71,8 @@
 (declare render-about-us-modify-submit)
 (declare render-gallery)
 (declare template-gallery-view)
+(declare template-gallery-image-fullscreen)
+(declare on-gallery-image-clicked )
 (declare handler-gallery-view)
 (declare render-gallery-view)
 (declare on-gallery-add-clicked)
@@ -560,12 +562,31 @@
 (hiccups/defhtml template-gallery [jsonobj]
   [:h1 {:style "text-align: center"} "Gallery"]
   [:div {:id "content"}]
-  [:div {:id "modify"
+  [:div {:id "image"
          :class "modal fade"
          :role "dialog"}
    [:div {:class "modal-dialog modal-lg"}
     [:div {:class "modal-content"}
      [:div {:class "modal-header"}
+      [:button {:type "button"
+                :class "close"
+                :data-dismiss "modal"}
+       "×"]]
+     [:div {:id "image-body"
+            :class "modal-body"
+            :style "height: 83vh"}]
+     [:div {:class "modal-footer"}
+      [:button {:type "submit"
+                :class "btn btn-danger btn-default"
+                :data-dismiss "modal"}
+       [:span {:class "glyphicon glyphicon-remove"}]
+       "Close"]]]]]
+  [:div {:id "modify"
+          :class "modal fade"
+         :role "dialog"}
+   [:div {:class "modal-dialog modal-lg"}
+    [:div {:class "modal-content"}
+     [:div {:class "modal-header"}
       [:h5 [:span {:id "modify-title"}]]
       [:button {:type "button"
                 :class "close"
@@ -616,8 +637,10 @@
                                 :referrerpolicy "strict-origin-when-cross-origin"
                                 :allowfullscreen "allowfullscreen"}]
                       :else
-                      [:img {:height "405"
-                             :src (str "/gallery/file/view?id=" (get rec "id"))}])]
+                      (let [img-src (str "/gallery/file/view?id=" (get rec "id"))]
+                        [:img {:height "405"
+                               :src img-src
+                               :onclick (str (namespace ::x) ".on_gallery_image_clicked('" img-src "')")}]))]
                (when (get jsonobj "adminP")
                  [:td {:style "text-align:right; vertical-align:top"}
                   [:img {:src "/static/images/edit.png"
@@ -632,6 +655,14 @@
               [:tr
                [:td " "]]]]))))
 
+(hiccups/defhtml template-gallery-image-fullscreen [src]
+  [:img {:src src
+         :style "height: 80vh"}])
+
+(defn on-gallery-image-clicked [src]
+  (dommy/set-html! (dommy/sel1 :#image-body) (template-gallery-image-fullscreen src))
+  (.modal (jquery "#image")))
+
 (defn handler-gallery-view [response]
   (let [jsonobj (js->clj (js/JSON.parse response))]
     (auth-notifications jsonobj)