WebUI: Refactor ContextMenu class

src/webui/www/public/scripts/client.js

@@ -202,30 +202,6 @@ window.addEvent('load', function () {
         return false;
     };
 
-    var updateContextMenu = function () {
-        var categoryList = $('contextCategoryList');
-        categoryList.empty();
-        categoryList.appendChild(new Element('li', {html: '<a href="javascript:newCategoryFN();"><img src="theme/list-add" alt="QBT_TR(New...)QBT_TR"/> QBT_TR(New...)QBT_TR</a>'}));
-        categoryList.appendChild(new Element('li', {html: '<a href="javascript:updateCategoryFN(0);"><img src="theme/edit-clear" alt="QBT_TR(Reset)QBT_TR"/> QBT_TR(Reset)QBT_TR</a>'}));
-
-        var sortedCategories = []
-        Object.each(category_list, function(category) {
-            sortedCategories.push(category.name);
-        });
-        sortedCategories.sort();
-
-        var first = true;
-        Object.each(sortedCategories, function(categoryName) {
-            var categoryHash = genHash(categoryName);
-            var el = new Element('li', {html: '<a href="javascript:updateCategoryFN(\'' + categoryHash + '\');"><img src="theme/inode-directory"/> ' + categoryName + '</a>'});
-            if (first) {
-                el.addClass('separator');
-                first = false;
-            }
-            categoryList.appendChild(el);
-        });
-    };
-
     var updateFilter = function(filter, filterTitle) {
         $(filter + '_filter').firstChild.childNodes[1].nodeValue = filterTitle.replace('%1', torrentsTable.getFilteredTorrentsNumber(filter));
     };
@@ -251,7 +227,7 @@ window.addEvent('load', function () {
         var create_link = function(hash, text, count) {
             var html = '<a href="#" onclick="setCategoryFilter(' + hash + ');return false;">' +
                 '<img src="theme/inode-directory"/>' +
-                text + ' (' + count + ')' + '</a>';
+                escapeHtml(text) + ' (' + count + ')' + '</a>';
             return new Element('li', {id: hash, html: html});
         };
 
@@ -357,7 +333,7 @@ window.addEvent('load', function () {
                     updateFiltersList();
                     if (update_categories) {
                         updateCategoryList();
-                        updateContextMenu();
+                        torrentsTableContextMenu.updateCategoriesSubMenu(category_list);
                     }
                 }
                 clearTimeout(syncMainDataTimer);

src/webui/www/public/scripts/contextmenu.js

@@ -1,12 +1,11 @@
 var ContextMenu = new Class({
-
     //implements
     Implements: [Options, Events],
 
     //options
     options: {
         actions: {},
-        menu: 'contextmenu',
+        menu: 'menu_id',
         stopEvent: true,
         targets: 'body',
         trigger: 'contextmenu',
@@ -128,6 +127,74 @@ var ContextMenu = new Class({
         }.bind(this));
     },
 
+    updateMenuItems: function () {},
+
+    //show menu
+    show: function (trigger) {
+        this.updateMenuItems();
+        this.fx.start(1);
+        this.fireEvent('show');
+        this.shown = true;
+        return this;
+    },
+
+    //hide the menu
+    hide: function (trigger) {
+        if (this.shown) {
+            this.fx.start(0);
+            //this.menu.fade('out');
+            this.fireEvent('hide');
+            this.shown = false;
+        }
+        return this;
+    },
+
+    setItemChecked: function (item, checked) {
+        this.menu.getElement('a[href$=' + item + ']').firstChild.style.opacity =
+             checked ? '1' : '0';
+        return this;
+    },
+
+    getItemChecked: function (item) {
+        return '0' != this.menu.getElement('a[href$=' + item + ']').firstChild.style.opacity;
+    },
+
+    //hide an item
+    hideItem: function (item) {
+        this.menu.getElement('a[href$=' + item + ']').parentNode.addClass('invisible');
+        return this;
+    },
+
+    //show an item
+    showItem: function (item) {
+        this.menu.getElement('a[href$=' + item + ']').parentNode.removeClass('invisible');
+        return this;
+    },
+
+    //disable the entire menu
+    disable: function () {
+        this.options.disabled = true;
+        return this;
+    },
+
+    //enable the entire menu
+    enable: function () {
+        this.options.disabled = false;
+        return this;
+    },
+
+    //execute an action
+    execute: function (action, element) {
+        if (this.options.actions[action]) {
+            this.options.actions[action](element, this);
+        }
+        return this;
+    }
+});
+
+var TorrentsTableContextMenu = new Class({
+    Extends: ContextMenu,
+
     updateMenuItems: function () {
         all_are_seq_dl = true;
         there_are_seq_dl = false;
@@ -220,69 +287,29 @@ var ContextMenu = new Class({
             this.hideItem('ForceStart');
         else if (!there_are_paused && !there_are_force_start)
             this.hideItem('Start');
-
     },
 
-    //show menu
+    updateCategoriesSubMenu : function (category_list) {
-    show: function(trigger) {
+        var categoryList = $('contextCategoryList');
-        this.updateMenuItems();
+        categoryList.empty();
-        this.fx.start(1);
+        categoryList.appendChild(new Element('li', {html: '<a href="javascript:newCategoryFN();"><img src="theme/list-add" alt="QBT_TR(New...)QBT_TR"/> QBT_TR(New...)QBT_TR</a>'}));
-        this.fireEvent('show');
+        categoryList.appendChild(new Element('li', {html: '<a href="javascript:updateCategoryFN(0);"><img src="theme/edit-clear" alt="QBT_TR(Reset)QBT_TR"/> QBT_TR(Reset)QBT_TR</a>'}));
-        this.shown = true;
-        return this;
-    },
 
-    //hide the menu
+        var sortedCategories = []
-    hide: function(trigger) {
+        Object.each(category_list, function (category) {
-        if (this.shown) {
+            sortedCategories.push(category.name);
-            this.fx.start(0);
+        });
-            //this.menu.fade('out');
+        sortedCategories.sort();
-            this.fireEvent('hide');
-            this.shown = false;
-        }
-        return this;
-    },
 
-    setItemChecked: function(item, checked) {
+        var first = true;
-        this.menu.getElement('a[href$=' + item + ']').firstChild.style.opacity =
+        Object.each(sortedCategories, function (categoryName) {
-             checked ? '1' : '0';
+            var categoryHash = genHash(categoryName);
-        return this;
+            var el = new Element('li', {html: '<a href="javascript:updateCategoryFN(\'' + categoryHash + '\');"><img src="theme/inode-directory"/> ' + escapeHtml(categoryName) + '</a>'});
-    },
+            if (first) {
-
+                el.addClass('separator');
-    getItemChecked: function(item) {
+                first = false;
-        return '0' != this.menu.getElement('a[href$=' + item + ']').firstChild.style.opacity;
+            }
-    },
+            categoryList.appendChild(el);
-
+        });
-    //hide an item
-    hideItem: function(item) {
-        this.menu.getElement('a[href$=' + item + ']').parentNode.addClass('invisible');
-        return this;
-    },
-
-    //show an item
-    showItem: function(item) {
-        this.menu.getElement('a[href$=' + item + ']').parentNode.removeClass('invisible');
-        return this;
-    },
-
-    //disable the entire menu
-    disable: function() {
-        this.options.disabled = true;
-        return this;
-    },
-
-    //enable the entire menu
-    enable: function() {
-        this.options.disabled = false;
-        return this;
-    },
-
-    //execute an action
-    execute: function(action, element) {
-        if (this.options.actions[action]) {
-            this.options.actions[action](element, this);
-        }
-        return this;
     }
-
 });

src/webui/www/public/scripts/dynamicTable.js

@@ -300,7 +300,6 @@ var DynamicTable = new Class({
                 else { // else create a new row in the table
                     var tr = new Element('tr');
 
-                    tr.addClass("menu-target");
                     tr['rowId'] = rows[rowPos]['rowId'];
 
                     tr._this = this;
@@ -358,7 +357,7 @@ var DynamicTable = new Class({
                         return false;
                     });
 
-                    this.setupTrEvents(tr);
+                    this.setupTr(tr);
 
                     for (var j = 0 ; j < this.columns.length; j++) {
                         var td = new Element('td');
@@ -393,7 +392,7 @@ var DynamicTable = new Class({
             }
         },
 
-        setupTrEvents : function (tr) {},
+        setupTr : function (tr) {},
 
         updateRow : function (tr, fullUpdate) {
             var row = this.rows.get(tr.rowId);
@@ -524,11 +523,12 @@ var TorrentsTable = new Class({
                 else return 0;
             };
 
-            // name
+            // name, category
 
             this.columns['name'].updateTd = function (td, row) {
                 td.set('html', escapeHtml(this.getRowValue(row)));
             };
+            this.columns['category'].updateTd = this.columns['name'].updateTd;
 
             // size
 
@@ -706,7 +706,7 @@ var TorrentsTable = new Class({
             return filteredRows;
         },
 
-        setupTrEvents : function (tr) {
+        setupTr : function (tr) {
             tr.addEvent('dblclick', function (e) {
                 e.stop();
                 this._this.selectRow(this.rowId);
@@ -718,6 +718,7 @@ var TorrentsTable = new Class({
                     pauseFN();
                 return true;
             });
+            tr.addClass("torrentsTableContextMenuTarget");
         },
 
         getCurrentTorrentHash : function () {

src/webui/www/public/transferlist.html

@@ -9,8 +9,8 @@
 <script type="text/javascript">
 
     //create a context menu
-    var torrents_table_context_menu = new ContextMenu({
+    var torrentsTableContextMenu = new TorrentsTableContextMenu({
-        targets : '.menu-target',
+        targets : '.torrentsTableContextMenuTarget',
         menu : 'contextmenu',
         actions : {
             Delete : function (element, ref) {
@@ -62,5 +62,5 @@
         }
     });
 
-    torrentsTable.setup('torrentsTable', 'torrentsTableHeader', torrents_table_context_menu);
+    torrentsTable.setup('torrentsTable', 'torrentsTableHeader', torrentsTableContextMenu);
 </script>