Merge pull request #2111 from MIT-LCP/files-panel-history

files_panel dynamic navigation fixes

physionet-django/project/static/project/js/dynamic-files-panel.js

@@ -0,0 +1,38 @@
+(function() {
+    'use strict';
+
+    var panel = $('#files-panel');
+    var cur_dir = panel.find('[data-dfp-cur-dir]').data('dfp-cur-dir');
+    var panel_url = panel.find('[data-dfp-panel-url]').data('dfp-panel-url');
+
+    function navigateDir(subdir, page_url, push_history) {
+        $.ajax({
+            type: 'GET',
+            url: panel_url,
+            data: {'subdir': subdir, 'v': '2'},
+            success: function(result) {
+                if (push_history)
+                    history.pushState(subdir, '', page_url);
+                else
+                    history.replaceState(subdir, '', page_url);
+                panel.html(result);
+                setClickHandlers();
+            },
+        });
+    }
+
+    function setClickHandlers() {
+        panel.find('a[data-dfp-dir]').click(function(event) {
+            navigateDir($(this).data('dfp-dir'), this.href, true);
+            event.preventDefault();
+        });
+    }
+    setClickHandlers();
+
+    window.onpopstate = function(event) {
+        if (event.state !== null) {
+            navigateDir(event.state, window.location, false);
+        }
+    };
+    history.replaceState(cur_dir, '');
+})();

physionet-django/project/templates/project/files_panel.html

@@ -1,3 +1,4 @@
+{# Note: This template is obsolescent. Use files_panel_v2 instead. #}
 <div class="card-header">
   Folder Navigation:
   {% spaceless %}
@@ -43,14 +44,14 @@
   <tbody>
   {% if subdir %}
     <tr class="parentdir">
-      <td><a href="../#files-panel" onclick="return navigateDir('{{ parent_dir }}')">Parent Directory</a></td>
+      <td><a href="../#files-panel" onclick="return navigateDir('{{ parent_dir|escapejs }}')">Parent Directory</a></td>
       <td></td>
       <td></td>
     </tr>
   {% endif %}
   {% for dir in display_dirs %}
     <tr class="subdir">
-      <td><a href="{{ dir.name }}/#files-panel" onclick="return navigateDir('{{ dir.full_subdir }}')">{{ dir.name }}</a></td>
+      <td><a href="{{ dir.name }}/#files-panel" onclick="return navigateDir('{{ dir.full_subdir|escapejs }}')">{{ dir.name }}</a></td>
       <td></td>
       <td></td>
     </tr>
@@ -77,7 +78,7 @@
   function navigateDir(subdir){
     $.ajax({
             type: "GET",
-            url: "{{ files_panel_url }}",
+            url: "{{ files_panel_url|escapejs }}",
             data: {'subdir':subdir
             },
             success: function reloadSection(result){

physionet-django/project/templates/project/files_panel_v2.html

@@ -0,0 +1,75 @@
+{# Note: This template is used together with dynamic-files-panel.js. #}
+<div class="card-header"
+     data-dfp-panel-url="{{ files_panel_url }}"
+     data-dfp-cur-dir="{{ subdir }}">
+  Folder Navigation:
+  {% spaceless %}
+    <span class="dir-breadcrumbs">
+      {% for breadcrumb in dir_breadcrumbs %}
+        {% if forloop.counter == dir_breadcrumbs|length %}
+          <span class="dir-breadcrumb-self">{{ breadcrumb.name }}</span>
+        {% else %}
+          <a href="{{ breadcrumb.rel_path }}#files-panel"
+             data-dfp-dir="{{ breadcrumb.full_subdir }}"
+             class="dir-breadcrumb-up">{{ breadcrumb.name }}</a>
+          <span class="dir-breadcrumb-sep">/</span>
+        {% endif %}
+      {% endfor %}
+    </span>
+  {% endspaceless %}
+</div>
+{% if file_error %}
+<div class="card-body">
+  <div class="alert alert-danger" role="alert">
+    {{ file_error|safe }}
+  </div>
+</div>
+{% else %}
+  {% if file_warning %}
+    <div class="card-body">
+      <div class="alert alert-warning" role="alert">
+        {{ file_warning|safe }}
+      </div>
+    </div>
+  {% endif %}
+<table class="files-panel">
+  <col class="files-panel-name"></col>
+  <col class="files-panel-size"></col>
+  <col class="files-panel-date"></col>
+  <thead>
+    <tr>
+      <th>Name</th>
+      <th>Size</th>
+      <th>Modified</th>
+    </tr>
+  </thead>
+  <tbody>
+  {% if subdir %}
+    <tr class="parentdir">
+      <td><a href="../#files-panel" data-dfp-dir="{{ parent_dir }}">Parent Directory</a></td>
+      <td></td>
+      <td></td>
+    </tr>
+  {% endif %}
+  {% for dir in display_dirs %}
+    <tr class="subdir">
+      <td><a href="{{ dir.name }}/#files-panel" data-dfp-dir="{{ dir.full_subdir }}">{{ dir.name }}</a></td>
+      <td></td>
+      <td></td>
+    </tr>
+  {% endfor %}
+  {% for file in display_files %}
+    <tr>
+      <td><a href="{{ file.name }}">{{ file.name }}</a>
+        <a class="download" href="{{ file.download_url }}"
+           title="Download {{ file.name }}">
+          <span class="visually-hidden">(download)</span>
+        </a>
+      </td>
+      <td>{{ file.size }}</td>
+      <td>{{ file.last_modified }}</td>
+    </tr>
+  {% endfor %}
+  </tbody>
+</table>
+{% endif %}

physionet-django/project/templates/project/project_preview.html

@@ -236,14 +236,15 @@ <h2>Files</h2>
     {% endif %}
   {% endif %}
   <div id="files-panel" class="card">
-    {% include "project/files_panel.html" %}
+    {% include "project/files_panel_v2.html" %}
   </div>
   <br>
 
 </div>
 {% endblock %}
 
 {% block local_js_bottom %}
+<script src="{% static 'project/js/dynamic-files-panel.js' %}"></script>
 <script src="{% static 'custom/js/enable-popover.js' %}"></script>
 <script>hljs.initHighlightingOnLoad();</script>
 {% endblock %}

physionet-django/project/templates/project/published_project.html

@@ -442,7 +442,7 @@ <h5>Access the files</h5>
         {% endif %}
 
         <div id="files-panel" class="card">
-          {% include "project/files_panel.html" %}
+          {% include "project/files_panel_v2.html" %}
         </div>
       {% else %}
         {% include "project/published_project_denied_downloads.html" %}
@@ -472,6 +472,7 @@ <h5>Access the files</h5>
 {% endblock %}
 
 {% block local_js_bottom %}
+  <script src="{% static 'project/js/dynamic-files-panel.js' %}"></script>
   <script src="{% static 'custom/js/enable-popover.js' %}"></script>
   <script>hljs.initHighlightingOnLoad();</script>
 {% endblock %}

physionet-django/project/views.py

@@ -1151,7 +1151,12 @@ def preview_files_panel(request, project_slug, **kwargs):
     file_warning = get_project_file_warning(display_files, display_dirs,
                                               subdir)
 
-    return render(request, 'project/files_panel.html',
+    if request.GET.get('v', '1') == '1':
+        template = 'project/files_panel.html'
+    else:
+        template = 'project/files_panel_v2.html'
+
+    return render(request, template,
         {'project':project, 'subdir':subdir, 'file_error':file_error,
          'dir_breadcrumbs':dir_breadcrumbs, 'parent_dir':parent_dir,
          'display_files':display_files, 'display_dirs':display_dirs,
@@ -1574,7 +1579,12 @@ def published_files_panel(request, project_slug, version):
         files_panel_url = reverse('published_files_panel',
             args=(project.slug, project.version))
 
-        return render(request, 'project/files_panel.html',
+        if request.GET.get('v', '1') == '1':
+            template = 'project/files_panel.html'
+        else:
+            template = 'project/files_panel_v2.html'
+
+        return render(request, template,
             {'project':project, 'subdir':subdir,
              'dir_breadcrumbs':dir_breadcrumbs, 'parent_dir':parent_dir,
              'display_files':display_files, 'display_dirs':display_dirs,