Browse Source

WebUI: Refactor ContextMenu class

adaptive-webui-19844
buinsky 9 years ago
parent
commit
c003229fcf
  1. 28
      src/webui/www/public/scripts/client.js
  2. 153
      src/webui/www/public/scripts/contextmenu.js
  3. 11
      src/webui/www/public/scripts/dynamicTable.js
  4. 6
      src/webui/www/public/transferlist.html

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

@ -202,30 +202,6 @@ window.addEvent('load', function () { @@ -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 () { @@ -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 () { @@ -357,7 +333,7 @@ window.addEvent('load', function () {
updateFiltersList();
if (update_categories) {
updateCategoryList();
updateContextMenu();
torrentsTableContextMenu.updateCategoriesSubMenu(category_list);
}
}
clearTimeout(syncMainDataTimer);

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

@ -1,12 +1,11 @@ @@ -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({ @@ -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({ @@ -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
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;
},
updateCategoriesSubMenu : function (category_list) {
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>'}));
//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 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"/> ' + escapeHtml(categoryName) + '</a>'});
if (first) {
el.addClass('separator');
first = false;
}
categoryList.appendChild(el);
});
}
});

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

@ -300,7 +300,6 @@ var DynamicTable = new Class({ @@ -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({ @@ -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({ @@ -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({ @@ -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({ @@ -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({ @@ -718,6 +718,7 @@ var TorrentsTable = new Class({
pauseFN();
return true;
});
tr.addClass("torrentsTableContextMenuTarget");
},
getCurrentTorrentHash : function () {

6
src/webui/www/public/transferlist.html

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

Loading…
Cancel
Save