Fix/full screen

ckanext/nhs/fanstatic/css/nhs.css

@@ -1912,3 +1912,26 @@ blockquote {
     align-content: flex-start !important; } }
 
 /*# sourceMappingURL=nhs.css.map */
+
+
+/* Base style */
+#resource-view-iframe-fullscreen {
+  position: relative;
+}
+
+#resource-view-iframe-fullscreen.is-fullscreen {
+  background: #fff;
+  overflow: auto;
+  padding: 1rem;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9999;
+}
+
+/* Adjust .actions position when fullscreen-mode class is active */
+.fullscreen-mode .module-resource .actions {
+  right: 0 !important;
+}

ckanext/nhs/templates/package/snippets/resource_view.html

@@ -25,9 +25,10 @@
     <div class="m-top ckanext-datapreview">
 
       <div class="actions">
-        <a class="btn btn-default"
-           target="_blank"
-           href="{{ h.url_for('resource_view', id=package['name'], resource_id=resource['id'], view_id=resource_view['id'], qualified=True) }}">
+        <a id="fullscreen-toggle-btn"
+          class="btn btn-default"
+          href="javascript:void(0);"
+          onclick="toggleFullscreenDiv(true)">
           <i class="fa fa-arrows-alt"></i>
           {{ _("Fullscreen") }}
         </a>
@@ -81,9 +82,15 @@
           {# When previewing we need to stick the whole resource_view as a param as there is no other way to pass to information on to the iframe #}
           {% set src = h.url_for(qualified=true, controller='package', action='resource_view', id=package['name'], resource_id=resource['id']) + '?' + h.urlencode({'resource_view': h.dump_json(resource_view)}) %}
         {% endif %}
+      <div class="ckanext-datapreview" id="resource-view-iframe-fullscreen">
+        <a id="exit-fullscreen-btn" class="btn btn-default" style="display:none; float: right; margin: 2rem 0rem;" onclick="toggleFullscreenDiv(false)">
+          <i class="fa fa-compress"></i>
+          {{ _("Exit Fullscreen") }}
+        </a>
         <iframe id="frame-resource-view" src="{{ src }}" frameborder="0" width="100%" title="Resource View" data-module="data-viewer">
           <p>{{ _('Your browser does not support iframes.') }}</p>
         </iframe>
+      </div>
       {% endif %}
     </div>
     <div id="embed-{{ resource_view['id'] }}" class="modal fade resource-view-embed">
@@ -116,4 +123,57 @@ <h3>{{ _("Embed resource view") }}</h3>
 
 {% resource 'nhs/js/iframe-control.js' %}
 
-{% endblock %}
+{% endblock %}
+
+<script>
+  const previewSelector = '#resource-view-iframe-fullscreen';
+  const enterBtn = document.getElementById('fullscreen-toggle-btn');
+  const exitBtn = document.getElementById('exit-fullscreen-btn');
+
+  function toggleFullscreenDiv(enter) {
+    const elem = document.querySelector(previewSelector);
+    if (!elem) return;
+    if (enter) {
+      if (!document.fullscreenElement) {
+        if (elem.requestFullscreen) {
+          elem.requestFullscreen();
+        } else if (elem.mozRequestFullScreen) {
+          elem.mozRequestFullScreen();
+        } else if (elem.webkitRequestFullscreen) {
+          elem.webkitRequestFullscreen();
+        } else if (elem.msRequestFullscreen) {
+          elem.msRequestFullscreen();
+        }
+      }
+    } else {
+      if (document.fullscreenElement) {
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.webkitExitFullscreen) {
+          document.webkitExitFullscreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        console.log("Not in fullscreen, cannot exit.");
+      }
+    }
+  }
+
+  document.addEventListener('fullscreenchange', () => {
+    const isFullscreen = !!document.fullscreenElement;
+    document.body.classList.toggle('fullscreen-mode', isFullscreen);
+
+    if (enterBtn) enterBtn.style.display = isFullscreen ? 'none' : 'inline-block';
+    if (exitBtn) exitBtn.style.display = isFullscreen ? 'inline-block' : 'none';
+
+    const elem = document.getElementById('resource-view-iframe-fullscreen');
+    if (document.fullscreenElement === elem) {
+      elem.classList.add('is-fullscreen');
+    } else {
+      elem.classList.remove('is-fullscreen');
+    }
+  });
+</script>