[66] | 1 | if(jQuery) (function($){
|
---|
| 2 | $.extend($.fn, {
|
---|
| 3 | violetTree : function (o) {
|
---|
| 4 | if( !o ) var o = {};
|
---|
| 5 | if( o.data == undefined ) o.data = null;
|
---|
| 6 | if( o.rootName == undefined ) o.rootName = 'Thư mục gá»c';
|
---|
| 7 |
|
---|
| 8 | if( o.draggable == undefined ) o.draggable = false;
|
---|
| 9 |
|
---|
| 10 | if( o.expandSpeed == undefined ) o.expandSpeed= 500;
|
---|
| 11 | if( o.collapseSpeed == undefined ) o.collapseSpeed= 500;
|
---|
| 12 | if( o.expandEasing == undefined ) o.expandEasing = null;
|
---|
| 13 | if( o.collapseEasing == undefined ) o.collapseEasing = null;
|
---|
| 14 | if( o.manager == undefined) o.manager = null;
|
---|
| 15 |
|
---|
| 16 | var treeNodes = [];
|
---|
| 17 | var oContainer = this;
|
---|
| 18 | var selectedNode = null;
|
---|
| 19 | var documentBoundEvent = false;
|
---|
| 20 |
|
---|
| 21 | var createNode = function (node) {
|
---|
| 22 | if( !node ) var node = {};
|
---|
| 23 | if( node.item == undefined ) node.item = null; //item.id, item.name, item.parentID
|
---|
| 24 | if( node.isRoot == undefined ) node.isRoot = false;
|
---|
| 25 | if( node.defaultStatus == undefined ) node.defaultStatus = 0; //0: collapsed; 1:expanded;
|
---|
| 26 | if( node.showContextMenu == undefined ) node.showContextMenu = true; //0: collapsed; 1:expanded;
|
---|
| 27 |
|
---|
| 28 | var parentNode = node.isRoot == true ? oContainer : $(oContainer).find('UL.vstree > LI[rel="folder"] > A#' + node.item.parentID);
|
---|
| 29 | var nodeClass = node.isRoot == true ? 'home':'directory';
|
---|
| 30 | var hidden = (node.isRoot == true || node.item.parentID == 0 ) ? null:'display:none';
|
---|
| 31 | var defaulState = (node.isRoot == false && node.defaultStatus == 1 ) ? 'expanded' : 'collapsed';
|
---|
| 32 |
|
---|
| 33 | var a = $('<a></a>',{id: node.item.id,href: '#',rel: node.item.name,text: node.item.name});
|
---|
| 34 | var li = $('<li></li>',{'class': nodeClass,rel: 'folder'}).append(a);
|
---|
| 35 | var ul = $('<ul></ul>',{'class':'vstree',style:hidden}).append(li);
|
---|
| 36 | $(li).addClass(defaulState);
|
---|
| 37 |
|
---|
| 38 | bindNodeEvents(a);
|
---|
| 39 |
|
---|
| 40 | treeNodes[node.item.id] = {id:node.item.id, name:node.item.name, parentID:node.item.parentID, html:ul, status:defaulState, isRoot:node.isRoot};
|
---|
| 41 |
|
---|
| 42 | if (node.isRoot == false) $(parentNode).parent().append(ul); else $(parentNode).append(ul);
|
---|
| 43 | return (parentNode.length == 1);
|
---|
| 44 | };
|
---|
| 45 |
|
---|
| 46 | var bindNodeEvents = function (node) {
|
---|
| 47 | if (node == null) return false;
|
---|
| 48 |
|
---|
| 49 | //click event
|
---|
| 50 | $(node).bind("click", function (e){if(e.button == 0)nodeClick(this);return false;});
|
---|
| 51 |
|
---|
| 52 | //Press F2 to rename, ESC to cancel rename
|
---|
| 53 | if (documentBoundEvent == false) {
|
---|
| 54 | $(oContainer).bind('keydown','keypress', function(e) {
|
---|
| 55 | switch( e.keyCode ) {
|
---|
| 56 | case 113:
|
---|
| 57 | renameInit(selectedNode);
|
---|
| 58 | break;
|
---|
| 59 | case 27:
|
---|
| 60 | renameCancel(selectedNode);
|
---|
| 61 | break;
|
---|
| 62 | case 46:
|
---|
| 63 | var dirID = $(selectedNode).attr('id');
|
---|
| 64 | var dirObj = {};
|
---|
| 65 | dirObj.id = treeNodes[dirID].id;
|
---|
| 66 | dirObj.name = treeNodes[dirID].name;
|
---|
| 67 | dirObj.parentID = treeNodes[dirID].parentID;
|
---|
| 68 | dirObj.type = 'directory';
|
---|
| 69 | if (e.keyCode == 46) o.manager.deleteItem([dirObj]);
|
---|
| 70 | break;
|
---|
| 71 | case 13:
|
---|
| 72 | default:
|
---|
| 73 | break;
|
---|
| 74 | }
|
---|
| 75 | });
|
---|
| 76 |
|
---|
| 77 | documentBoundEvent = true;
|
---|
| 78 | }
|
---|
| 79 |
|
---|
| 80 | disabledItemsList = [];
|
---|
| 81 |
|
---|
| 82 | $(node).contextMenu({menu: 'treeMenu',disabledItems: disabledItemsList},
|
---|
| 83 | function(action, el, pos) {
|
---|
| 84 | var dirID = $(el).attr('id');
|
---|
| 85 | var item = $(treeNodes[dirID].html).find('> LI > A#' + dirID);
|
---|
| 86 | var dirObj = {};
|
---|
| 87 | dirObj.id = treeNodes[dirID].id;
|
---|
| 88 | dirObj.name = treeNodes[dirID].name;
|
---|
| 89 | dirObj.parentID = treeNodes[dirID].parentID;
|
---|
| 90 | dirObj.type = 'directory';
|
---|
| 91 |
|
---|
| 92 | switch(action) {
|
---|
| 93 | case 'rename':
|
---|
| 94 | renameInit(item);
|
---|
| 95 | break;
|
---|
| 96 | case 'newfolder':
|
---|
| 97 | o.manager.createNewFolder();
|
---|
| 98 | break;
|
---|
| 99 | case 'share':
|
---|
| 100 | case 'copy':
|
---|
| 101 | case 'cut':
|
---|
| 102 | break;
|
---|
| 103 | case 'delete':
|
---|
| 104 | o.manager.deleteItem([dirObj]);
|
---|
| 105 | break;
|
---|
| 106 | default:
|
---|
| 107 | break;
|
---|
| 108 | }
|
---|
| 109 | });
|
---|
| 110 |
|
---|
| 111 | };
|
---|
| 112 |
|
---|
| 113 | var nodeClick = function (node) {
|
---|
| 114 | var folderID = $(node).attr('id');
|
---|
| 115 | selectedNode = hightlightNode(node);
|
---|
| 116 | o.manager.setTreeCurrentNode(folderID);
|
---|
| 117 |
|
---|
| 118 | if (treeNodes[folderID].isRoot) {
|
---|
| 119 | return;
|
---|
| 120 | }
|
---|
| 121 | if (treeNodes[folderID].status == 'collapsed') {
|
---|
| 122 | expandNode(node);
|
---|
| 123 | treeNodes[folderID].status = 'expanded';
|
---|
| 124 | }
|
---|
| 125 | else {
|
---|
| 126 | collapNode(node);
|
---|
| 127 | treeNodes[folderID].status = 'collapsed';
|
---|
| 128 | }
|
---|
| 129 | };
|
---|
| 130 |
|
---|
| 131 | var hightlightNode = function (node) {
|
---|
| 132 | $(oContainer).find('.currentDir').removeClass('currentDir');
|
---|
| 133 | $(node).addClass('currentDir');
|
---|
| 134 | $(node).select();
|
---|
| 135 | return node;
|
---|
| 136 | }
|
---|
| 137 |
|
---|
| 138 | var expandNode = function (node) {
|
---|
| 139 | var li = $(node).parent();
|
---|
| 140 | $(li).find('> UL:hidden').slideDown({ duration: o.expandSpeed, easing: o.expandEasing });
|
---|
| 141 | $(li).removeClass('collapsed').addClass('expanded');
|
---|
| 142 | };
|
---|
| 143 |
|
---|
| 144 | var collapNode = function (node) {
|
---|
| 145 | var li = $(node).parent();
|
---|
| 146 | $(li).find('> UL').slideUp({ duration: o.expandSpeed, easing: o.expandEasing });
|
---|
| 147 | $(li).removeClass('expanded').addClass('collapsed');
|
---|
| 148 | };
|
---|
| 149 |
|
---|
| 150 | var initTree = function () {
|
---|
| 151 | if (o.data == null) {
|
---|
| 152 | console.error(o.data, 'No directory to display!');
|
---|
| 153 | return;
|
---|
| 154 | }
|
---|
| 155 | $(oContainer).find ('.vstree').remove();
|
---|
| 156 | var homeNode = createNode({
|
---|
| 157 | item: {id:0, name:o.rootName, parentID:-1},
|
---|
| 158 | isRoot: true
|
---|
| 159 | });
|
---|
| 160 | if (homeNode && o.data.length > 0) {
|
---|
| 161 | for (var i = 0; i < o.data.length; i++) {
|
---|
| 162 | createNode ({item: o.data[i]});
|
---|
| 163 | }
|
---|
| 164 | }
|
---|
| 165 | o.manager.setTreeCurrentNode(0);
|
---|
| 166 |
|
---|
| 167 | $(oContainer).attr('unselectable','on')
|
---|
| 168 | .css({'-moz-user-select':'-moz-none',
|
---|
| 169 | '-moz-user-select':'none',
|
---|
| 170 | '-o-user-select':'none',
|
---|
| 171 | '-khtml-user-select':'none',
|
---|
| 172 | '-webkit-user-select':'none',
|
---|
| 173 | '-ms-user-select':'none',
|
---|
| 174 | 'user-select':'none'
|
---|
| 175 | }).bind('selectstart', function(){ return false;});
|
---|
| 176 | };
|
---|
| 177 |
|
---|
| 178 | /******************
|
---|
| 179 | * RENAME - START *
|
---|
| 180 | ******************/
|
---|
| 181 |
|
---|
| 182 | var renameInit = function (node) {
|
---|
| 183 | var editor = $('<input>',{class:'rename', type: 'text', value:$(node).text()});
|
---|
| 184 | $(editor).bind('focusout', function(e){renameCancel(node)});
|
---|
| 185 | $(editor).bind('keypress', function(e){
|
---|
| 186 | var keycode = (e.keyCode ? e.keyCode : e.which);
|
---|
| 187 | if(keycode == '13') renameComplete(node);
|
---|
| 188 | e.stopPropagation();
|
---|
| 189 | });
|
---|
| 190 |
|
---|
| 191 | $(node).text('');
|
---|
| 192 | $(node).append(editor);
|
---|
| 193 | $(editor).focus();
|
---|
| 194 | $(editor).select();
|
---|
| 195 | }
|
---|
| 196 |
|
---|
| 197 | var renameCancel = function (node) {
|
---|
| 198 | var dirID = $(node).attr('id');
|
---|
| 199 | $(node).find('>INPUT').remove();
|
---|
| 200 | $(node).text(treeNodes[dirID].name);
|
---|
| 201 | $(node).select();
|
---|
| 202 | }
|
---|
| 203 |
|
---|
| 204 | var renameComplete = function (node) {
|
---|
| 205 | var editor = $(node).find('>INPUT');
|
---|
| 206 | var dirID = $(node).attr('id');
|
---|
| 207 | var newName = $(editor).val();
|
---|
| 208 | $(node).attr('rel', newName);
|
---|
| 209 | $(node).text(newName);
|
---|
| 210 | $(node).find('>INPUT').remove();
|
---|
| 211 | treeNodes[dirID].name = newName;
|
---|
| 212 | updateData(dirID, 'rename');
|
---|
| 213 | }
|
---|
| 214 |
|
---|
| 215 | /******************
|
---|
| 216 | * RENAME - END *
|
---|
| 217 | ******************/
|
---|
| 218 |
|
---|
| 219 | /******************
|
---|
| 220 | * DELTE - START *
|
---|
| 221 | ******************/
|
---|
| 222 | var destroyNode = function (node) {
|
---|
| 223 | var dirID = $(node).attr('id');
|
---|
| 224 | $(node).parent().parent().remove();
|
---|
| 225 | delete treeNodes[dirID];
|
---|
| 226 | }
|
---|
| 227 | /******************
|
---|
| 228 | * DELTE - END *
|
---|
| 229 | ******************/
|
---|
| 230 | /*******************************
|
---|
| 231 | * COPY & PASTE & MOVE - START *
|
---|
| 232 | *******************************/
|
---|
| 233 | var copyNode = function (source){
|
---|
| 234 |
|
---|
| 235 | }
|
---|
| 236 |
|
---|
| 237 | var pasteNode = function (destination) {
|
---|
| 238 |
|
---|
| 239 | }
|
---|
| 240 |
|
---|
| 241 | var moveNode = function (source, destination) {
|
---|
| 242 |
|
---|
| 243 | }
|
---|
| 244 | /*****************************
|
---|
| 245 | * COPY & PASTE & MOVE - END *
|
---|
| 246 | *****************************/
|
---|
| 247 |
|
---|
| 248 | var updateData = function (id, act) {
|
---|
| 249 | for (var i = 0; i < o.data.length; i++) {
|
---|
| 250 | if (o.data[i].id == id) {
|
---|
| 251 | if(act == 'deletion') {
|
---|
| 252 | delete o.data[i];
|
---|
| 253 | }
|
---|
| 254 | else {
|
---|
| 255 | o.data[i].name = treeNodes[id].name
|
---|
| 256 | o.data[i].parentID = treeNodes[id].parentID;
|
---|
| 257 | }
|
---|
| 258 | break;
|
---|
| 259 | }
|
---|
| 260 | }
|
---|
| 261 |
|
---|
| 262 | o.manager.updateData({item:treeNodes[id], from:'tree', type:'directory', callback:act});
|
---|
| 263 | }
|
---|
| 264 |
|
---|
| 265 | this.deletion = function (id) {
|
---|
| 266 | destroyNode($(oContainer).find('A#'+id));
|
---|
| 267 | }
|
---|
| 268 |
|
---|
| 269 | this.setData = function (data) {
|
---|
| 270 | o.data = data;
|
---|
| 271 | }
|
---|
| 272 |
|
---|
| 273 | this.getRoot = function () {
|
---|
| 274 | return treeNodes[0];
|
---|
| 275 | }
|
---|
| 276 |
|
---|
| 277 | this.initialize = function () {
|
---|
| 278 | initTree();
|
---|
| 279 | return this;
|
---|
| 280 | };
|
---|
| 281 |
|
---|
| 282 | return this.initialize();
|
---|
| 283 | }
|
---|
| 284 | });
|
---|
| 285 | })(jQuery); |
---|