Reopenable photoswipe galleries (bug)

Previously, a closed photoswipe gallery could not be reopened. Fixed.

.gitignore

@@ -17,7 +17,7 @@ pom.xml.asc
 smeagol.log*
 /node_modules/
 .DS_Store
-
+/.calva
 
 resources/public/content/uploads/
 

resources/public/html-includes/photoswipe-boilerplate.html

@@ -1,3 +1,6 @@
+<div class="gallery" id="gallery{{index}}">
+    <div class="pswp" id="pswp-{{index}}" tabindex="-1" role="dialog" aria-hidden="true">
+
         <!-- this is the whole of the photoswipe boilerplate as documented
             [here](https://photoswipe.com/documentation/getting-started.html) with the
             outermost div removed; it is supplied by the function
@@ -36,7 +39,7 @@
                     <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
 
                     <!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
-                <!-- element will get class pswp__preloader--active when preloader is running -->
+                    <!-- element will get class pswp__preloader active when preloader is running -->
                     <div class="pswp__preloader">
                         <div class="pswp__preloader__icn">
                             <div class="pswp__preloader__cut">
@@ -63,3 +66,32 @@
             </div>
 
         </div>
+    </div>
+    <script>
+        //<![CDATA[
+        var gallery{{index}} = null;
+        var spec{{index}} = {{spec}};
+        var openGallery{{index}} = function() {
+            if (gallery{{index}}) {
+                try {
+                    gallery{{index}}.destroy();
+                }
+                catch (error) {
+                    console.error(error);
+                }
+            }
+            gallery{{index}} = new PhotoSwipe(document.getElementById("pswp-{{index}}"),
+                PhotoSwipeUI_Default,
+                spec{{index}}.slides,
+                    spec{{index}}.options);
+            gallery{{index}}.init();
+        };
+        if (spec{{index}}.openImmediately) {
+            openGallery{{index}}();
+        }
+        //]]>
+    </script>
+    <p>
+        <button id="open-gallery-{{index}}" onclick="openGallery{{index}}()">Open the gallery</button>
+    </p>
+</div>

src/smeagol/extensions/photoswipe.clj

@@ -9,6 +9,8 @@
             [instaparse.core :as insta]
             [me.raynes.fs :as fs]
             [noir.io :as io]
+            [selmer.parser :refer [render]]
+            [selmer.util :refer [without-escaping]]
             [smeagol.configuration :refer [config]]
             [smeagol.extensions.utils :refer :all]
             [smeagol.util :refer [content-dir upload-dir]]
@@ -41,31 +43,11 @@
   "Process a specification for a photoswipe gallery, using a JSON
   specification based on that documented on the Photoswipe website."
   [^String spec ^Integer index]
-  (str
+  (without-escaping
-    "<div class='gallery'>
+   (render
-    <div class=\"pswp\" id=\"pswp-"
-    index "\" tabindex=\"-1\" role=\"dialog\" aria-hidden=\"true\">\n"
     (slurp
      (str (io/resource-path) "html-includes/photoswipe-boilerplate.html"))
-    "</div>
+    {:spec spec :index index})))
-    <p><button id=\"open-gallery-" index "\" onclick=\"gallery" index
-    ".init(); document.getElementById(`open-gallery-" index "`).style.display = 'none';\">Open the gallery</button></p>
-    <script>
-    \n//<![CDATA[\n
-    var pswpElement = document.getElementById('pswp-" index "');
-    var spec" index " = "
-    spec
-    ";
-    var gallery" index
-    " = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, spec"
-    index ".slides, spec" index ".options);
-    if (spec" index ".openImmediately) {
-    document.getElementById(`open-gallery-" index "`).style.display = 'none';
-    gallery" index ".init();
-    }
-    \n//]]\n
-    </script>
-    </div>"))
 
 
 (def simple-grammar

src/smeagol/repl.clj

@@ -45,7 +45,7 @@
 (defn start-server
   "used for starting the server in development mode from REPL"
   [& [port]]
-  (let [port (if port (Integer/parseInt port) 3000)]
+  (let [port (if port (Integer/parseInt (str port)) 3000)]
     (reset! server
             (serve (get-handler)
                    {:port port
@@ -58,3 +58,6 @@
 (defn stop-server []
   (.stop @server)
   (reset! server nil))
+
+;;(start-server 4444)
+