remember sort mode after sort repos/dirents

static/scripts/app/router.js

@@ -3,6 +3,7 @@ define([
     'jquery',
     'backbone',
     'common',
+    'js.cookie',
     'app/views/side-nav',
     'app/views/myhome-repos',
     'app/views/myhome-shared-repos',
@@ -20,7 +21,7 @@ define([
     'app/views/share-admin-upload-links',
     'app/views/notifications',
     'app/views/account'
-], function($, Backbone, Common, SideNavView, MyReposView,
+], function($, Backbone, Common, Cookies, SideNavView, MyReposView,
     SharedReposView, GroupsView, GroupView, OrgView, DirView,
     StarredFileView, ActivitiesView, DevicesView, InvitationsView,
     ShareAdminReposView, ShareAdminFoldersView, ShareAdminShareLinksView,
@@ -81,6 +82,7 @@ define([
 
             app.ui.notificationsView = this.notificationsView = new NotificationsView();
             app.ui.accountView = this.accountView = new AccountView();
+            app.pageOptions.sort_mode = Cookies.get('sort_mode') || 'name_up';
 
             this.currentView = this.myReposView;
 

static/scripts/app/views/dir.js

@@ -42,17 +42,6 @@ define([
                     this.view_mode = 'list';
                 }
 
-                var sort_mode = Cookies.get('sort_mode');
-                if (sort_mode == 'time_up') {
-                    this.sort_mode = 'time_up';
-                } else if (sort_mode == 'time_down') {
-                    this.sort_mode = 'time_down';
-                } else if (sort_mode == 'name_down') {
-                    this.sort_mode = 'name_down';
-                } else {
-                    this.sort_mode = 'name_up';
-                }
-
                 this.contextOptions = {};
 
                 this.dir = new DirentCollection();
@@ -201,8 +190,8 @@ define([
                     this.renderDirentsHd();
                 }
 
-                this.updateSortIconByMode(this.sort_mode);
+                Common.updateSortIconByMode(this);
-                this.sortDirents(this.sort_mode);
+                this.dir = Common.sortCollection(this.dir);
 
                 this.dir.last_start = 0;
                 this.dir.limit = 100;
@@ -690,17 +679,17 @@ define([
             },
 
             sortByName: function() {
-                if (this.sort_mode == 'name_up') {
+                if (app.pageOptions.sort_mode == 'name_up') {
                     // change sort mode
                     Cookies.set('sort_mode', 'name_down');
-                    this.sort_mode = 'name_down';
+                    app.pageOptions.sort_mode = 'name_down';
                 } else {
                     Cookies.set('sort_mode', 'name_up');
-                    this.sort_mode = 'name_up';
+                    app.pageOptions.sort_mode = 'name_up';
                 }
 
-                this.updateSortIconByMode(this.sort_mode);
+                Common.updateSortIconByMode(this);
-                this.sortDirents(this.sort_mode);
+                this.dir = Common.sortCollection(this.dir);
 
                 this.$dirent_list_body.empty();
                 this.render_dirents_slice(0, this.dir.limit);
@@ -709,17 +698,17 @@ define([
             },
 
             sortByTime: function () {
-                if (this.sort_mode == 'time_up') {
+                if (app.pageOptions.sort_mode == 'time_down') {
                     // change sort mode
-                    Cookies.set('sort_mode', 'time_down');
-                    this.sort_mode = 'time_down';
-                } else {
                     Cookies.set('sort_mode', 'time_up');
-                    this.sort_mode = 'time_up';
+                    app.pageOptions.sort_mode = 'time_up';
+                } else {
+                    Cookies.set('sort_mode', 'time_down');
+                    app.pageOptions.sort_mode = 'time_down';
                 }
 
-                this.updateSortIconByMode(this.sort_mode);
+                Common.updateSortIconByMode(this);
-                this.sortDirents(this.sort_mode);
+                this.dir = Common.sortCollection(this.dir);
 
                 this.$dirent_list_body.empty();
                 this.render_dirents_slice(0, this.dir.limit);
@@ -727,57 +716,6 @@ define([
                 return false;
             },
 
-            sortDirents: function(sort_mode) {
-                // set collection comparator
-                this.dir.comparator = function(a, b) {
-                    if (a.get('is_dir') && b.get('is_file')) {
-                        return -1;
-                    }
-                    if (a.get('is_file') && b.get('is_dir')) {
-                        return 1;
-                    }
-
-                    if (sort_mode == 'name_up' || sort_mode == 'name_down') {
-                        // if sort by name
-                        var result = Common.compareTwoWord(a.get('obj_name'), b.get('obj_name'));
-                        if (sort_mode == 'name_up') {
-                            return -result;
-                        } else {
-                            return result;
-                        }
-                    } else {
-                        // if sort by time
-                        if (sort_mode == 'time_up') {
-                            return a.get('last_modified') < b.get('last_modified') ? -1 : 1;
-                        } else {
-                            return a.get('last_modified') < b.get('last_modified') ? 1 : -1;
-                        }
-                    }
-                };
-
-                // sort collection
-                this.dir.sort();
-            },
-
-            updateSortIconByMode: function(sort_mode) {
-                // first hide all icon
-                this.$('.by-name .sort-icon, .by-time .sort-icon').hide();
-
-                // show icon according sort mode
-                if (sort_mode == 'name_up') {
-                    this.$('.by-name .sort-icon').removeClass('icon-caret-up').addClass('icon-caret-down').show();
-                } else if (sort_mode == 'name_down') {
-                    this.$('.by-name .sort-icon').removeClass('icon-caret-down').addClass('icon-caret-up').show();
-                } else if (sort_mode == 'time_up') {
-                    this.$('.by-time .sort-icon').removeClass('icon-caret-up').addClass('icon-caret-down').show();
-                } else if (sort_mode == 'time_down') {
-                    this.$('.by-time .sort-icon').removeClass('icon-caret-down').addClass('icon-caret-up').show();
-                } else {
-                    // if no sort mode, show name up icon
-                    this.$('.by-name .sort-icon').removeClass('icon-caret-down').addClass('icon-caret-up').show();
-                }
-            },
-
             select: function () {
                 var $el = this.$('th [type=checkbox]');
 

static/scripts/app/views/group.js

@@ -3,13 +3,14 @@ define([
     'underscore',
     'backbone',
     'common',
+    'js.cookie',
     'app/collections/group-repos',
     'app/views/group-repo',
     'app/views/add-group-repo',
     'app/views/group-members',
     'app/views/group-discussions',
     'app/views/group-settings'
-], function($, _, Backbone, Common, GroupRepos, GroupRepoView,
+], function($, _, Backbone, Common, Cookies, GroupRepos, GroupRepoView,
     AddGroupRepoView, GroupMembersView, GroupDiscussionsView, GroupSettingsView) {
     'use strict';
 
@@ -66,12 +67,15 @@ define([
                 this.$emptyTip.hide();
                 this.renderReposHd();
                 this.$tableBody.empty();
+                this.repos = Common.sortCollection(this.repos);
                 this.repos.each(this.addOne, this);
                 this.$table.show();
             } else {
                 this.$emptyTip.show();
                 this.$table.hide();
             }
+
+            Common.updateSortIconByMode(this);
         },
 
         renderGroupTop: function(options) {
@@ -168,46 +172,44 @@ define([
         },
 
         sortByName: function() {
-            this.$('.by-time .sort-icon').hide();
+
-            var repos = this.repos;
+
-            var $el = this.$('.by-name .sort-icon');
+            if (app.pageOptions.sort_mode == 'name_up') {
-            if ($el.hasClass('icon-caret-up')) {
+                // change sort mode
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'name_down');
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
+                app.pageOptions.sort_mode = 'name_down';
-                    return -result;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'name_up');
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
+                app.pageOptions.sort_mode = 'name_up';
-                    return result;
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
+
             return false;
         },
 
         sortByTime: function() {
-            this.$('.by-name .sort-icon').hide();
+            if (app.pageOptions.sort_mode == 'time_down') {
-            var repos = this.repos;
+                // change sort mode
-            var $el = this.$('.by-time .sort-icon');
+                Cookies.set('sort_mode', 'time_up');
-            if ($el.hasClass('icon-caret-down')) {
+                app.pageOptions.sort_mode = 'time_up';
-                repos.comparator = function(a, b) { // a, b: model
-                    return a.get('mtime') < b.get('mtime') ? 1 : -1;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'time_down');
-                    return a.get('mtime') < b.get('mtime') ? -1 : 1;
+                app.pageOptions.sort_mode = 'time_down';
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
+
             return false;
         },
 

static/scripts/app/views/myhome-repos.js

@@ -3,10 +3,11 @@ define([
     'underscore',
     'backbone',
     'common',
+    'js.cookie',
     'app/collections/repos',
     'app/views/repo',
     'app/views/add-repo',
-], function($, _, Backbone, Common, RepoCollection, RepoView, AddRepoView) {
+], function($, _, Backbone, Common, Cookies, RepoCollection, RepoView, AddRepoView) {
     'use strict';
 
     var ReposView = Backbone.View.extend({
@@ -49,6 +50,7 @@ define([
                 this.$emptyTip.hide();
                 this.renderReposHd();
                 this.$tableBody.empty();
+                this.repos = Common.sortCollection(this.repos);
                 this.repos.each(this.addOne, this);
                 this.$table.show();
             } else {
@@ -56,6 +58,8 @@ define([
                 this.$emptyTip.show();
             }
 
+            Common.updateSortIconByMode(this);
+
             if (app.pageOptions.guide_enabled) {
                 $('#guide-for-new').modal({appendTo: '#main', focus:false});
                 $('#simplemodal-container').css({'height':'auto'});
@@ -115,46 +119,42 @@ define([
         },
 
         sortByName: function() {
-            $('.by-time .sort-icon').hide();
+            if (app.pageOptions.sort_mode == 'name_up') {
-            var repos = this.repos;
+                // change sort mode
-            var $el = $('.by-name .sort-icon', this.$table);
+                Cookies.set('sort_mode', 'name_down');
-            if ($el.hasClass('icon-caret-up')) {
+                app.pageOptions.sort_mode = 'name_down';
-                repos.comparator = function(a, b) { // a, b: model
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
-                    return -result;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'name_up');
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
+                app.pageOptions.sort_mode = 'name_up';
-                    return result;
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
+
             return false;
         },
 
         sortByTime: function() {
-            $('.by-name .sort-icon').hide();
+            if (app.pageOptions.sort_mode == 'time_down') {
-            var repos = this.repos;
+                // change sort mode
-            var $el = $('.by-time .sort-icon', this.$table);
+                Cookies.set('sort_mode', 'time_up');
-            if ($el.hasClass('icon-caret-down')) {
+                app.pageOptions.sort_mode = 'time_up';
-                repos.comparator = function(a, b) { // a, b: model
-                    return a.get('mtime') < b.get('mtime') ? 1 : -1;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'time_down');
-                    return a.get('mtime') < b.get('mtime') ? -1 : 1;
+                app.pageOptions.sort_mode = 'time_down';
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
+
             return false;
         }
 

static/scripts/app/views/myhome-shared-repos.js

@@ -3,9 +3,10 @@ define([
     'underscore',
     'backbone',
     'common',
+    'js.cookie',
     'app/collections/repos',
     'app/views/shared-repo',
-], function($, _, Backbone, Common, RepoCollection, SharedRepoView) {
+], function($, _, Backbone, Common, Cookies, RepoCollection, SharedRepoView) {
     'use strict';
 
     var SharedReposView = Backbone.View.extend({
@@ -41,12 +42,15 @@ define([
                 this.$emptyTip.hide();
                 this.renderReposHd();
                 this.$tableBody.empty();
+                this.repos = Common.sortCollection(this.repos);
                 this.repos.each(this.addOne, this);
                 this.$table.show();
             } else {
                 this.$emptyTip.show();
                 this.$table.hide();
             }
+
+            Common.updateSortIconByMode(this);
         },
 
         showSharedRepos: function() {
@@ -102,46 +106,41 @@ define([
         },
 
         sortByName: function() {
-            $('.by-time .sort-icon', this.$table).hide();
+            if (app.pageOptions.sort_mode == 'name_up') {
-            var repos = this.repos;
+                // change sort mode
-            var $el = $('.by-name .sort-icon', this.$table);
+                Cookies.set('sort_mode', 'name_down');
-            if ($el.hasClass('icon-caret-up')) {
+                app.pageOptions.sort_mode = 'name_down';
-                repos.comparator = function(a, b) { // a, b: model
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
-                    return -result;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'name_up');
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
+                app.pageOptions.sort_mode = 'name_up';
-                    return result;
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
             return false;
         },
 
         sortByTime: function() {
-            $('.by-name .sort-icon', this.$table).hide();
+            if (app.pageOptions.sort_mode == 'time_down') {
-            var repos = this.repos;
+                // change sort mode
-            var $el = $('.by-time .sort-icon', this.$table);
+                Cookies.set('sort_mode', 'time_up');
-            if ($el.hasClass('icon-caret-down')) {
+                app.pageOptions.sort_mode = 'time_up';
-                repos.comparator = function(a, b) { // a, b: model
-                    return a.get('mtime') < b.get('mtime') ? 1 : -1;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'time_down');
-                    return a.get('mtime') < b.get('mtime') ? -1 : 1;
+                app.pageOptions.sort_mode = 'time_down';
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
+
             return false;
         }
 

static/scripts/app/views/organization.js

@@ -87,12 +87,14 @@ define([
                 this.$emptyTip.hide();
                 this.renderReposHd();
                 this.$tableBody.empty();
+                this.repos = Common.sortCollection(this.repos);
                 this.repos.each(this.addOne, this);
                 this.$table.show();
             } else {
                 this.$table.hide();
                 this.$emptyTip.show();
             }
+            Common.updateSortIconByMode(this);
         },
 
         showRepoList: function() {
@@ -123,46 +125,42 @@ define([
         },
 
         sortByName: function() {
-            $('.by-time .sort-icon', this.$table).hide();
+            if (app.pageOptions.sort_mode == 'name_up') {
-            var repos = this.repos;
+                // change sort mode
-            var $el = $('.by-name .sort-icon', this.$table);
+                Cookies.set('sort_mode', 'name_down');
-            if ($el.hasClass('icon-caret-up')) {
+                app.pageOptions.sort_mode = 'name_down';
-                repos.comparator = function(a, b) { // a, b: model
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
-                    return -result;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'name_up');
-                    var result = Common.compareTwoWord(a.get('name'), b.get('name'));
+                app.pageOptions.sort_mode = 'name_up';
-                    return result;
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
+
             return false;
         },
 
         sortByTime: function() {
-            $('.by-name .sort-icon', this.$table).hide();
+            if (app.pageOptions.sort_mode == 'time_down') {
-            var repos = this.repos;
+                // change sort mode
-            var $el = $('.by-time .sort-icon', this.$table);
+                Cookies.set('sort_mode', 'time_up');
-            if ($el.hasClass('icon-caret-down')) {
+                app.pageOptions.sort_mode = 'time_up';
-                repos.comparator = function(a, b) { // a, b: model
-                    return a.get('mtime') < b.get('mtime') ? 1 : -1;
-                };
             } else {
-                repos.comparator = function(a, b) { // a, b: model
+                Cookies.set('sort_mode', 'time_down');
-                    return a.get('mtime') < b.get('mtime') ? -1 : 1;
+                app.pageOptions.sort_mode = 'time_down';
-                };
             }
-            repos.sort();
+
+            Common.updateSortIconByMode(this);
+            this.repos = Common.sortCollection(this.repos);
+
             this.$tableBody.empty();
-            repos.each(this.addOne, this);
+            this.repos.each(this.addOne, this);
-            $el.toggleClass('icon-caret-up icon-caret-down').show();
+            this.repos.comparator = null;
-            repos.comparator = null;
+
             return false;
         }
 

static/scripts/common.js

@@ -778,6 +778,69 @@ define([
             return (a >= b) - (a <= b);
         },
 
+        updateSortIconByMode: function(current_el) {
+            var sort_mode = app.pageOptions.sort_mode;
+
+            // first hide all icon
+            current_el.$('.by-name .sort-icon, .by-time .sort-icon').hide();
+
+            // show icon according sort mode
+            if (sort_mode == 'name_down') {
+                current_el.$('.by-name .sort-icon').removeClass('icon-caret-up').addClass('icon-caret-down').show();
+            } else if (sort_mode == 'name_up') {
+                current_el.$('.by-name .sort-icon').removeClass('icon-caret-down').addClass('icon-caret-up').show();
+            } else if (sort_mode == 'time_down') {
+                current_el.$('.by-time .sort-icon').removeClass('icon-caret-up').addClass('icon-caret-down').show();
+            } else if (sort_mode == 'time_up') {
+                current_el.$('.by-time .sort-icon').removeClass('icon-caret-down').addClass('icon-caret-up').show();
+            } else {
+                // if no sort mode, show name up icon
+                current_el.$('.by-name .sort-icon').removeClass('icon-caret-down').addClass('icon-caret-up').show();
+            }
+        },
+
+        sortCollection: function(current_collection) {
+            var sort_mode = app.pageOptions.sort_mode;
+            var _this = this;
+
+            // set collection comparator
+            current_collection.comparator = function(a, b) {
+                if (a.get('is_dir') && b.get('is_file')) {
+                    return -1;
+                }
+                if (a.get('is_file') && b.get('is_dir')) {
+                    return 1;
+                }
+
+                var a_name = a.get('name') || a.get('obj_name');
+                var b_name = b.get('name') || b.get('obj_name');
+
+                var a_time = a.get('mtime') || a.get('last_modified');
+                var b_time = b.get('mtime') || b.get('last_modified');
+
+                if (sort_mode == 'name_down' || sort_mode == 'name_up') {
+                    // if sort by name
+                    var result = _this.compareTwoWord(a_name, b_name);
+                    if (sort_mode == 'name_down') {
+                        return -result;
+                    } else {
+                        return result;
+                    }
+                } else {
+                    // if sort by time
+                    if (sort_mode == 'time_up') {
+                        return a_time < b_time ? -1 : 1;
+                    } else {
+                        return a_time < b_time ? 1 : -1;
+                    }
+                }
+            };
+
+            // sort collection
+            current_collection.sort();
+            return current_collection;
+        },
+
         fileSizeFormat: function(bytes, precision) {
             var kilobyte = 1024;
             var megabyte = kilobyte * 1024;