Merge pull request #16 from gettypubs/photoswipe

Photoswipe

themes/quire-base-theme/layouts/_default/baseof.html

@@ -25,6 +25,7 @@
       {{ block "main" . }}
       {{ end }}
     </main>
+    {{ partial "photoswipe.html" }}
     <script src="{{ .Site.BaseURL }}/assets/js/application.js"></script>
     <script>
       (function() {

themes/quire-base-theme/layouts/partials/photoswipe.html

@@ -0,0 +1,56 @@
+<!-- Root element of PhotoSwipe. Must have class pswp. -->
+<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">
+
+  <!-- Background of PhotoSwipe. It's a separate element as animating opacity is faster than rgba(). -->
+  <div class="pswp__bg"></div>
+
+  <!-- Slides wrapper with overflow:hidden. -->
+  <div class="pswp__scroll-wrap">
+
+    <!-- Container that holds slides.
+         PhotoSwipe keeps only 3 of them in the DOM to save memory.
+         Don't modify these 3 pswp__item elements, data is added later on. -->
+    <div class="pswp__container">
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+      <div class="pswp__item"></div>
+    </div>
+
+    <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
+    <div class="pswp__ui pswp__ui--hidden">
+
+      <div class="pswp__top-bar">
+
+        <!--  Controls are self-explanatory. Order can be changed. -->
+        <div class="pswp__counter"></div>
+        <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>
+        <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>
+
+        <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
+        <!-- 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">
+              <div class="pswp__preloader__donut"></div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
+        <div class="pswp__share-tooltip"></div>
+      </div>
+
+      <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
+      </button>
+
+      <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
+      </button>
+
+      <div class="pswp__caption">
+        <div class="pswp__caption__center"></div>
+      </div>
+
+    </div>
+  </div>
+</div>

themes/quire-base-theme/package.json

@@ -31,6 +31,8 @@
     "leaflet-iiif": "^1.0.1",
     "lodash": "^4.17.4",
     "lodash.debounce": "^4.0.8",
-    "lunr": "^0.7.2"
+    "lodash.findindex": "^4.6.0",
+    "lunr": "^0.7.2",
+    "photoswipe": "^4.1.2"
   }
 }

themes/quire-base-theme/source/css/_figure.scss

@@ -259,5 +259,18 @@
     }
 
   }
+}
+
+// Styles for tables when displayed in PhotoSwipe
+.q-figure__table-wrapper--pswp {
+  align-items: center;
+  background-color: #fff;
+  display: flex;
+  height: 100vh;
+  padding: $base-spacing;
 
+  table {
+    max-height: 80vh;
+    overflow: scroll;
+  }
 }

themes/quire-base-theme/source/css/application.scss

@@ -27,6 +27,7 @@
 // // Layouts
 // @import 'layouts/page';
 
+@import 'vendor/photoswipe/default-skin.css';
 
 @import 'font-opensans';