ENHANCEMENT Allowing checkboxes and their disabling on LeftAndMain.Tree.js

This commit is contained in:
Ingo Schommer 2011-03-22 11:37:35 +13:00
parent 49a76a0c95
commit 2497f37f58
2 changed files with 80 additions and 3 deletions

View File

@ -295,6 +295,10 @@ ul.tree span.untranslated a:visited {
color: #ccc color: #ccc
} }
#sitetree_ul li.disabled a {
color: #aaa;
}
#Form_SearchTreeForm .field .middleColumn { #Form_SearchTreeForm .field .middleColumn {
width: 60%; width: 60%;
float: left; float: left;

View File

@ -11,8 +11,6 @@
this._super(); this._super();
/** /**
* @todo Selectable tree with multiselect (toggled via "Batch Actions" panel)
* @todo Fix initial, unnecessary html_data replacement of existing tree (see below)
* @todo Icon and page type hover support * @todo Icon and page type hover support
* @todo Sorting of sub nodes (originally placed in context menu) * @todo Sorting of sub nodes (originally placed in context menu)
* @todo Refresh after language <select> change (with Translatable enabled) * @todo Refresh after language <select> change (with Translatable enabled)
@ -76,7 +74,10 @@
'theme': 'apple' 'theme': 'apple'
}, },
// 'plugins': ['html_data', 'ui', 'dnd', 'crrm', 'themeroller'] // 'plugins': ['html_data', 'ui', 'dnd', 'crrm', 'themeroller']
'plugins': ['html_data', 'ui', 'dnd', 'crrm', 'themes'] 'plugins': [
'html_data', 'ui', 'dnd', 'crrm', 'themes',
'checkbox' // checkboxes are hidden unless .multiple is set
]
}) })
.bind('loaded.jstree', function(e, data) { .bind('loaded.jstree', function(e, data) {
// Add ajax settings after init period to avoid unnecessary initial ajax load // Add ajax settings after init period to avoid unnecessary initial ajax load
@ -92,6 +93,9 @@
return params; return params;
} }
}}}); }}});
// Only show checkboxes with .multiple class
data.inst.hide_checkboxes();
}) })
.bind('before.jstree', function(e, data) { .bind('before.jstree', function(e, data) {
if(data.func == 'start_drag') { if(data.func == 'start_drag') {
@ -101,11 +105,22 @@
return false; return false;
} }
} }
if($.inArray(data.func, ['check_node', 'uncheck_node'])) {
var node = $(data.args[0]).parents('li:first');
if(node.hasClass('disabled')) {
e.stopImmediatePropagation();
return false;
}
}
}) })
// TODO Move to EditForm logic // TODO Move to EditForm logic
.bind('select_node.jstree', function(e, data) { .bind('select_node.jstree', function(e, data) {
var node = data.rslt.obj, loadedNodeID = $('#Form_EditForm :input[name=ID]').val() var node = data.rslt.obj, loadedNodeID = $('#Form_EditForm :input[name=ID]').val()
// Don't allow checking disabled nodes
if($(node).hasClass('disabled')) return false;
// Don't allow reloading of currently selected node, // Don't allow reloading of currently selected node,
// mainly to avoid doing an ajax request on initial page load // mainly to avoid doing an ajax request on initial page load
if($(node).data('id') == loadedNodeID) return; if($(node).data('id') == loadedNodeID) return;
@ -155,6 +170,19 @@
this.jstree('refresh', -1, callback); this.jstree('refresh', -1, callback);
}, },
/**
* Function: getNodeByID
*
* Parameters:
* (Int) id
*
* Returns
* DOMElement
*/
getNodeByID: function(id) {
return this.jstree('get_node', this.find('*[data-id='+id+']'));
},
/** /**
* Assumes to be triggered by a form element with the following input fields: * Assumes to be triggered by a form element with the following input fields:
* ID, ParentID, TreeTitle (or Title), ClassName * ID, ParentID, TreeTitle (or Title), ClassName
@ -223,4 +251,49 @@
}); });
}); });
$('#sitetree_ul.multiple').entwine({
onmatch: function() {
this._super();
this.jstree('show_checkboxes');
},
onunmatch: function() {
this._super();
this.jstree('hide_checkboxes');
},
/**
* Function: getSelectedIDs
*
* Returns:
* (Array)
*/
getSelectedIDs: function() {
return $.map($(this).jstree('get_checked'), function(el, i) {return $(el).data('id');});
},
});
$('#sitetree_ul li').entwine({
/**
* Function: setEnabled
*
* Parameters:
* (bool)
*/
setEnabled: function(bool) {
this.toggleClass('disabled', !(bool));
},
/**
* Function: getID
*
* Returns:
* (Number)
*/
getID: function() {
return this.data('id');
}
});
}(jQuery)); }(jQuery));