dashboard: load new store dirs via js

circle/dashboard/static/dashboard/dashboard.js

@@ -114,6 +114,7 @@ $(function () {
 
 
 
 
   /* no js compatibility */
   /* no js compatibility */
+  noJS();
   $('.no-js-hidden').show();
   $('.no-js-hidden').show();
   $('.js-hidden').hide();
   $('.js-hidden').hide();
 
 
@@ -555,3 +556,10 @@ function getCookie(name) {
   }                                                                         
   }                                                                         
   return cookieValue;                                                       
   return cookieValue;                                                       
 }
 }
+
+
+/* no js compatibility */
+function noJS() {
+  $('.no-js-hidden').show();
+  $('.js-hidden').hide();
+}

circle/dashboard/static/dashboard/store.js

 $(function() {
 $(function() {
-  $(".store-list-item").click(function() {
-    if($(this).data("item-type") == "D") return true;
+  $("#store-list-container").on("click", ".store-list-item", function() {
+    if($(this).data("item-type") == "D") {
+      var url = $(this).prop("href");
+      $.get(url, function(result) {
+        $("#store-list-container").html(result);
+        noJS();
+        $("[title]").tooltip();
+        history.pushState({}, "", url);
+      });
+    } else {
       $(this).next(".store-list-file-infos").stop().slideToggle();
       $(this).next(".store-list-file-infos").stop().slideToggle();
+    }
     return false;
     return false;
   });
   });
 
 
   /* less js way, but at least works, tho redirection is bad */
   /* less js way, but at least works, tho redirection is bad */
-  $('#store-upload-form input[type="submit"]').click(function() {
+  $("#store-list-container").on("click", '#store-upload-form input[type="submit"]', function() {
     var current_dir = $("#store-upload-form").find('[name="current_dir"]').val();
     var current_dir = $("#store-upload-form").find('[name="current_dir"]').val();
     $.get($("#store-upload-form").data("action") + "?current_dir=" + current_dir, function(result) {
     $.get($("#store-upload-form").data("action") + "?current_dir=" + current_dir, function(result) {
       $("#store-upload-form").get(0).setAttribute("action", result['url']);
       $("#store-upload-form").get(0).setAttribute("action", result['url']);
-      console.log($("#store-upload-form").prop("action"));
       $("#store-upload-form").submit();
       $("#store-upload-form").submit();
     });
     });
 
 
@@ -18,18 +26,18 @@ $(function() {
   });
   });
   
   
   /* click on the "fake" browse button will */
   /* click on the "fake" browse button will */
-  $('#store-upload-browse').click(function() {
+  $("#store-list-container").on("click", "#store-upload-browse", function() {
     $('#store-upload-form input[type="file"]').click();
     $('#store-upload-form input[type="file"]').click();
   });
   });
   
   
-  $("#store-upload-file").change(function() {
+  $("#store-list-container").on("change", "#store-upload-file", function() {
     var input = $(this);
     var input = $(this);
     var numFiles = input.get(0).files ? input.get(0).files.length : 1;
     var numFiles = input.get(0).files ? input.get(0).files.length : 1;
     var label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
     var label = input.val().replace(/\\/g, '/').replace(/.*\//, '');
     input.trigger('fileselect', [numFiles, label]);
     input.trigger('fileselect', [numFiles, label]);
   });
   });
 
 
-  $("#store-upload-file").on("fileselect", function(event, numFiles, label)  {
+  $("#store-list-container").on("fileselect", "#store-upload-file", function(event, numFiles, label)  {
         var input = $("#store-upload-filename");
         var input = $("#store-upload-filename");
         var log = numFiles > 1 ? numFiles + ' files selected' : label;
         var log = numFiles > 1 ? numFiles + ' files selected' : label;
         if(input.length) {
         if(input.length) {

circle/dashboard/templates/dashboard/store/_list-box.html

 {% load i18n %}
 {% load i18n %}
 
 
 <div class="list-group" id="store-list-list">
 <div class="list-group" id="store-list-list">
-  <a href="?directory={{ up_url }}" class="list-group-item store-list-item" data-item-type="D">
+  <a href="{% url "dashboard.views.store-list" %}?directory={{ up_url }}" 
+    class="list-group-item store-list-item" data-item-type="D">
     <i class="icon-reply store-list-item-icon"></i>
     <i class="icon-reply store-list-item-icon"></i>
     ..
     ..
     <div class="pull-right">
     <div class="pull-right">
@@ -11,7 +12,7 @@
 
 
   {% for f in root %}
   {% for f in root %}
   <a class="list-group-item store-list-item" data-item-type="{{ f.TYPE }}"
   <a class="list-group-item store-list-item" data-item-type="{{ f.TYPE }}"
-    href="{% if f.TYPE == "D" %}?directory={{ f.path }}{% else %}
+    href="{% if f.TYPE == "D" %}{% url "dashboard.views.store-list" %}?directory={{ f.path }}{% else %}
     {% url "dashboard.views.store-download" %}?path={{ f.path }}{% endif %}"
     {% url "dashboard.views.store-download" %}?path={{ f.path }}{% endif %}"
     >
     >
     <div class="store-list-item-icon">
     <div class="store-list-item-icon">

circle/dashboard/templates/dashboard/store/list.html

@@ -6,7 +6,7 @@
 {% block content %}
 {% block content %}
 <div class="row">
 <div class="row">
   <div class="col-md-12">
   <div class="col-md-12">
-    <div>
+    <div id="store-list-container">
       {% include "dashboard/store/_list-box.html" %}
       {% include "dashboard/store/_list-box.html" %}
     </div>
     </div>
   </div>
   </div>

circle/dashboard/views.py

@@ -39,7 +39,9 @@ from django.core import signing
 from django.core.urlresolvers import reverse, reverse_lazy
 from django.core.urlresolvers import reverse, reverse_lazy
 from django.db.models import Count
 from django.db.models import Count
 from django.http import HttpResponse, HttpResponseRedirect, Http404
 from django.http import HttpResponse, HttpResponseRedirect, Http404
-from django.shortcuts import redirect, render, get_object_or_404
+from django.shortcuts import (
+    redirect, render, get_object_or_404, render_to_response,
+)
 from django.views.decorators.http import require_GET, require_POST
 from django.views.decorators.http import require_GET, require_POST
 from django.views.generic.detail import SingleObjectMixin
 from django.views.generic.detail import SingleObjectMixin
 from django.views.generic import (TemplateView, DetailView, View, DeleteView,
 from django.views.generic import (TemplateView, DetailView, View, DeleteView,
@@ -2941,8 +2943,8 @@ class UserKeyCreate(LoginRequiredMixin, SuccessMessageMixin, CreateView):
 class StoreList(LoginRequiredMixin, TemplateView):
 class StoreList(LoginRequiredMixin, TemplateView):
     template_name = "dashboard/store/list.html"
     template_name = "dashboard/store/list.html"
 
 
-    def get_context_data(self, *args, **kwargs):
-        context = super(StoreList, self).get_context_data(*args, **kwargs)
+    def get_context_data(self, **kwargs):
+        context = super(StoreList, self).get_context_data(**kwargs)
         directory = self.request.GET.get("directory", "/")
         directory = self.request.GET.get("directory", "/")
         directory = "/" if not len(directory) else directory
         directory = "/" if not len(directory) else directory
 
 
@@ -2954,6 +2956,16 @@ class StoreList(LoginRequiredMixin, TemplateView):
             directory)
             directory)
         return context
         return context
 
 
+    def get(self, *args, **kwargs):
+        if self.request.is_ajax():
+            context = self.get_context_data(**kwargs)
+            return render_to_response(
+                "dashboard/store/_list-box.html",
+                RequestContext(self.request, context),
+            )
+        else:
+            return super(StoreList, self).get(*args, **kwargs)
+
     def create_up_directory(self, directory):
     def create_up_directory(self, directory):
         cut = -2 if directory.endswith("/") else -1
         cut = -2 if directory.endswith("/") else -1
         return "/".join(directory.split("/")[:cut]) + "/"
         return "/".join(directory.split("/")[:cut]) + "/"