Rewrite repo with HLItemView

seahub/templates/libraries.html

@@ -265,7 +265,8 @@ app["pageOptions"] = {
 };
 app.ui = {
     currentDropdown: null,
-    currentHighlightedItem: null
+    currentHighlightedItem: null,
+    freezeItemHightlight: false
 };
 </script>
 {% if debug %}

static/scripts/app/views/group-repo.js

@@ -2,22 +2,23 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common'
+    'common',
-], function($, _, Backbone, Common) {
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
     'use strict';
 
-    var GroupRepoView = Backbone.View.extend({
+    var GroupRepoView = HLItemView.extend({
         tagName: 'tr',
 
         template: _.template($('#group-repo-tmpl').html()),
 
         events: {
-            'mouseenter': 'highlight',
-            'mouseleave': 'rmHighlight',
             'click .cancel-share': 'unshare'
         },
 
         initialize: function(options) {
+            HLItemView.prototype.initialize.call(this);
+            
             this.group_id = options.group_id;
             this.is_staff = options.is_staff;
 
@@ -48,14 +49,6 @@ define([
             return this;
         },
 
-        highlight: function() {
-            this.$el.addClass('hl').find('.op-icon').removeClass('vh');
-        },
-
-        rmHighlight: function() {
-            this.$el.removeClass('hl').find('.op-icon').addClass('vh');
-        },
-
         unshare: function() {
             var lib_name = this.model.get('name');
             this.model.destroy({

static/scripts/app/views/organization-repo.js

@@ -2,16 +2,18 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common'
+    'common',
-], function($, _, Backbone, Common) {
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
     'use strict';
 
-    var OrganizationRepoView = Backbone.View.extend({
+    var OrganizationRepoView = HLItemView.extend({
         tagName: 'tr',
 
         template: _.template($('#organization-repo-tmpl').html()),
 
         initialize: function() {
+            HLItemView.prototype.initialize.call(this);
         },
 
         render: function() {
@@ -27,19 +29,9 @@ define([
         },
 
         events: {
-            'mouseenter': 'highlight',
-            'mouseleave': 'rmHighlight',
             'click .cancel-share': 'removeShare'
         },
 
-        highlight: function() {
-            this.$el.addClass('hl').find('.op-icon').removeClass('vh');
-        },
-
-        rmHighlight: function() {
-            this.$el.removeClass('hl').find('.op-icon').addClass('vh');
-        },
-
         removeShare: function() {
             var el = this.$el;
             var lib_name = this.model.get('name');

static/scripts/app/views/repo.js

@@ -7,12 +7,14 @@ define([
     'app/views/dialogs/repo-change-password',
     'app/views/dialogs/repo-history-settings',
     'app/views/dialogs/repo-share-link-admin',
-    'app/views/dialogs/repo-folder-perm-admin'
+    'app/views/dialogs/repo-folder-perm-admin',
+    'app/views/widgets/hl-item-view'
 ], function($, _, Backbone, Common, ShareView, RepoChangePasswordDialog,
-    HistorySettingsDialog, RepoShareLinkAdminDialog, RepoFolderPermAdminDialog) {
+    HistorySettingsDialog, RepoShareLinkAdminDialog, RepoFolderPermAdminDialog,
+    HLItemView) {
     'use strict';
 
-    var RepoView = Backbone.View.extend({
+    var RepoView = HLItemView.extend({
         tagName: 'tr',
 
         template: _.template($('#repo-tmpl').html()),
@@ -21,8 +23,6 @@ define([
         transferTemplate: _.template($('#repo-transfer-form-tmpl').html()),
 
         events: {
-            'mouseenter': 'highlight',
-            'mouseleave': 'rmHighlight',
             'click .repo-delete-btn': 'del',
             'click .repo-share-btn': 'share',
             'click .js-toggle-popup': 'togglePopup',
@@ -35,6 +35,8 @@ define([
         },
 
         initialize: function() {
+            HLItemView.prototype.initialize.call(this);
+
             this.listenTo(this.model, "change", this.render);
         },
 
@@ -50,23 +52,6 @@ define([
             return this;
         },
 
-        // disable 'hover' when 'repo-del-confirm' popup is shown
-        highlight: function() {
-            if ($('#my-own-repos .repo-del-confirm').length == 0
-                && !$('.hidden-op:visible').length
-                && !$('#repo-rename-form').length) {
-                this.$el.addClass('hl').find('.op-icon').removeClass('vh');
-            }
-        },
-
-        rmHighlight: function() {
-            if ($('#my-own-repos .repo-del-confirm').length == 0
-                && !$('.hidden-op:visible').length
-                && !$('#repo-rename-form').length) {
-                this.$el.removeClass('hl').find('.op-icon').addClass('vh');
-            }
-        },
-
         del: function() {
             var del_icon = this.$('.repo-delete-btn');
             var op_container = this.$('.op-container').css({'position': 'relative'});
@@ -83,9 +68,12 @@ define([
                 'width': 180
             });
 
+            app.ui.freezeItemHightlight = true;
+
             var _this = this;
             $('.no', confirm_popup).click(function() {
                 confirm_popup.addClass('hide').remove(); // `addClass('hide')`: to rm cursor
+                app.ui.freezeItemHightlight = false;
                 _this.rmHighlight();
             });
             $('.yes', confirm_popup).click(function() {
@@ -95,10 +83,12 @@ define([
                     dataType: 'json',
                     beforeSend: Common.prepareCSRFToken,
                     success: function(data) {
+                        app.ui.freezeItemHightlight = false;
                         _this.remove();
                         Common.feedback(gettext("Delete succeeded."), 'success');
                     },
                     error: function(xhr) {
+                        app.ui.freezeItemHightlight = false;
                         confirm_popup.addClass('hide').remove();
                         _this.rmHighlight();
 
@@ -164,8 +154,10 @@ define([
             $name_span.hide();
 
             this.togglePopup();
+            app.ui.freezeItemHightlight = true;
 
             var cancelRename = function() {
+                app.ui.freezeItemHightlight = false;
                 form.remove();
                 $op_td.show();
                 $name_span.show();
@@ -195,6 +187,7 @@ define([
                     repo_id: _this.model.get('id')
                 }) + '?op=rename';
                 var after_op_success = function(data) {
+                    app.ui.freezeItemHightlight = false;
                     _this.model.set({ 'name': new_name }); // it will trigger 'change' event
                 };
                 var after_op_error = function(xhr) {

static/scripts/app/views/shared-repo.js

@@ -2,22 +2,22 @@ define([
     'jquery',
     'underscore',
     'backbone',
-    'common'
+    'common',
-], function($, _, Backbone, Common) {
+    'app/views/widgets/hl-item-view'
+], function($, _, Backbone, Common, HLItemView) {
     'use strict';
 
-    var SharedRepoView = Backbone.View.extend({
+    var SharedRepoView = HLItemView.extend({
         tagName: 'tr',
 
         template: _.template($('#shared-repo-tmpl').html()),
 
         events: {
-            'mouseenter': 'showAction',
-            'mouseleave': 'hideAction',
             'click .unshare-btn': 'removeShare'
         },
 
         initialize: function() {
+            HLItemView.prototype.initialize.call(this);
         },
 
         removeShare: function(e) {
@@ -56,17 +56,8 @@ define([
             });
             this.$el.html(this.template(obj));
             return this;
-        },
-
-        showAction: function() {
-            this.$el.addClass('hl');
-            this.$el.find('.op-icon').removeClass('vh');
-        },
-
-        hideAction: function() {
-            this.$el.removeClass('hl');
-            this.$el.find('.op-icon').addClass('vh');
         }
+
     });
 
     return SharedRepoView;

static/scripts/app/views/widgets/hl-item-view.js

@@ -20,7 +20,9 @@ define([
         },
 
         highlight: function() {
-            if (app.ui.currentDropdown) {
+            // if there are dropdown items or freezeItemHightlight is set, don't highlight
+            console.log("highlight");
+            if (app.ui.currentDropdown || app.ui.freezeItemHightlight) {
                 return;
             }
             app.ui.currentHighlightedItem = this;
@@ -28,7 +30,7 @@ define([
         },
 
         rmHighlight: function() {
-            if (app.ui.currentDropdown) {
+            if (app.ui.currentDropdown || app.ui.freezeItemHightlight) {
                 return;
             }
             app.ui.currentHighlightedItem = null;