gridftp: save visited folders as browser history

diff --git a/filex/static/filex/filex.js b/filex/static/filex/filex.js
index ac71ea5..dc776d8 100644 (file)
--- a/filex/static/filex/filex.js
+++ b/filex/static/filex/filex.js
@@ -94,25 +94,28 @@ $(function(){
     Filex.Path = Backbone.Collection.extend({
         model: Filex.PathBit,
 
-        initialize: function() {
-            this.listenTo(this, 'reset add', this.setActive);
-        },
-
-        setActive: function() {
-            _.each(this.initial(), function(bit) {
-                bit.set('active', false);
-            });
-
-            this.last().set('active', true);
-        },
-
         full: function() {
             return this.pluck('name').join('/').replace(/^\/+/, '/');
+        },
+
+        append: function(name) {
+            return this.pluck('name').concat(name).join('/').replace(/^\/+/, '/');
         }
     });
 
 
     // ------------------------------------------------------------------------
+    // Routers
+    // ------------------------------------------------------------------------
+
+    Filex.Router = Backbone.Router.extend({
+               routes: {
+                       '*url': 'load'
+               }
+       });
+
+
+    // ------------------------------------------------------------------------
     // Views
     // ------------------------------------------------------------------------
 
@@ -139,10 +142,16 @@ $(function(){
 
         render: function() {
             var data = this.model.toJSON();
-            data['url_params'] = $.param({
-                host: this.view.host,
-                path: this.view.path.full() + '/' + this.model.get('name')
-            });
+
+            if (this.model.isDir()) {
+                data['url'] = this.view.host + '/' + this.view.path.append(this.model.get('name'))
+            }
+            else {
+                data['params'] = $.param({
+                    host: this.view.host,
+                    path: this.view.path.append(this.model.get('name'))
+                });
+            }
             data['cid'] = this.model.cid;
 
             this.$el.html(this.template()(data));
@@ -165,26 +174,14 @@ $(function(){
         },
 
         click: function(e) {
-            if (e.target.className == 'link') {
-                if (this.model.isDir()) {
-                    e.preventDefault();
-                    this.model.trigger('selected:dir', this.model);
-                }
-
-                return;
-            }
-
-            this.model.toggle();
+            if (e.target.className != 'link')
+                this.model.toggle();
         }
     });
 
     Filex.Breadcrumb = Backbone.View.extend({
         tagName: 'li',
 
-        events: {
-            'click a': 'selected'
-        },
-
         initialize: function() {
             this.listenTo(this.model, 'change:active', this.render);
             this.listenTo(this.model, 'remove', this.remove);
@@ -192,22 +189,17 @@ $(function(){
 
         render: function() {
             if (this.model.get('active')) {
+                this.$el.addClass('active');
                 this.$el.text(this.model.get('name'));
             }
             else {
                 this.$el.html($('<a/>', {
-                    href: '#',
+                    href: '#' + this.model.get('url'),
                     text: this.model.get('name')
                 }));
             }
-            this.$el.toggleClass('active', this.model.get('active'));
 
             return this;
-        },
-
-        selected: function(e) {
-            e.preventDefault();
-            this.model.trigger('selected', this.model);
         }
     });
 
@@ -232,14 +224,13 @@ $(function(){
 
             this.path = new Filex.Path();
             this.files = new Filex.FileList();
+            this.router = new Filex.Router();
 
-            this.listenTo(this.path, 'reset', this.resetPath);
             this.listenTo(this.path, 'add', this.addPath);
-            this.listenTo(this.path, 'add reset', this.changedPath);
-            this.listenTo(this.path, 'selected', this.selectedPath);
+            this.listenTo(this.path, 'reset', this.resetPath);
             this.listenTo(this.files, 'reset', this.resetFiles);
-            this.listenTo(this.files, 'selected:dir', this.selectedDir);
             this.listenTo(this.files, 'change:checked', this.updateSelectAll);
+            this.listenTo(this.router, 'route:load', this.load);
 
             // used in selectize callbacks
             var view = this,
@@ -327,7 +318,7 @@ $(function(){
                     }
                 },
                 onItemAdd: function(value) {
-                    view.load(value);
+                    view.router.navigate('#' + value, {trigger: true});
                     this.blur();
                 },
                 onBlur: function() {
@@ -338,6 +329,7 @@ $(function(){
             this.hostSelectize = this.$('#host-selector')[0].selectize;
 
             this.render();
+               Backbone.history.start({silent: true});
         },
 
         render: function() {
@@ -348,18 +340,23 @@ $(function(){
         },
 
         load: function(location) {
-            var hostRootPath = location.split(/\/(\/|~)(.*)/),
-                pathBits = [new Filex.PathBit({'name': hostRootPath[1]})].concat(
-                    _.chain(hostRootPath[2].split('/'))
-                        .filter(_.identity)
-                        .map(function(name) { return new Filex.PathBit({'name': name}) })
-                        .value()
-                );
+            if (!location)
+                return;
 
-            this.host = hostRootPath[0];
-            this.path.reset(pathBits);
+            var hostRootPath = location.split(/\/(\/|~)(.*)/), self = this;
 
+            this.host = hostRootPath[0];
             this.$host.text(this.host);
+
+            this.path.reset([new Filex.PathBit({'name': hostRootPath[1], url: this.host + '/' + hostRootPath[1]})]);
+            _.each(hostRootPath[2].split('/'), function(item) {
+                if (item)
+                    self.path.add(new Filex.PathBit({name: item, url: self.host + '/' + self.path.append(item)}));
+            });
+            this.path.last().set('active', true);
+
+            this.reloadFiles();
+            this.updateFavorites();
         },
 
         reloadFiles: function() {
@@ -416,14 +413,6 @@ $(function(){
             this.render();
         },
 
-        selectedDir: function(dir) {
-            this.path.add({'name': dir.get('name')});
-        },
-
-        selectedPath: function(bit) {
-            this.path.reset(this.path.slice(0, this.path.indexOf(bit) + 1));
-        },
-
         showHidden: function() {
             return this.$showHidden[0].checked;
         },
@@ -502,15 +491,10 @@ $(function(){
             if (!this.host) {
                 var opts = this.hostSelectize.options;
 
-                this.load(opts[Object.keys(opts)[0]].value);
+                this.router.navigate('#' + opts[Object.keys(opts)[0]].value, {trigger: true, replace: true});
             }
         },
 
-        changedPath: function () {
-            this.reloadFiles();
-            this.updateFavorites();
-        },
-
         updateFavorites: function() {
             var loc = this.host + '/' + this.path.full(),
                 favorites = this.hostSelectize.options;

diff --git a/filex/templates/filex/source.js.html b/filex/templates/filex/source.js.html
index 0623fde..9457298 100644 (file)
--- a/filex/templates/filex/source.js.html
+++ b/filex/templates/filex/source.js.html
@@ -18,7 +18,7 @@
         <input id="dir-<%= cid %>" type="checkbox" autocomplete="off">
     </td>
     <td class="text-center"><span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span></td>
-    <td><a class="link" href="#"><%= name %></a></td>
+    <td><a class="link" href="#<%= url %>"><%= name %></a></td>
     <td class="text-right"><%= size %></td>
     <td><%= date %></td>
 </script>
@@ -30,7 +30,7 @@
     </td>
     <td class="text-center"><span class="glyphicon glyphicon-file" aria-hidden="true"></span></td>
     <td>
-        <a class="link" href="{% url 'filex:download' %}?<%= url_params %>"><%= name %></a>
+        <a class="link" href="{% url 'filex:download' %}?<%= params %>"><%= name %></a>
     </td>
     <td class="text-right"><%= size %></td>
     <td><%= date %></td>