jquery-plugin-orTree.js (4944B)
1 /** 2 * Baum darstellen. 3 * 4 * Die Controls zum Öffnen/Schließen der Teilbäume werden mit Event-Listener bestückt. 5 * Beim Öffnen von Teilbäumen wird der Inhalt vom Server geladen. 6 */ 7 jQuery.fn.orTree = function () 8 { 9 $(this).each(function (idxx, treeEl) 10 { 11 // Klick-Funktion zum Öffnen des Zweiges. 12 $(treeEl).children('.or-navtree-node-control').click( function () 13 { 14 var node = $(this).parent('.or-navtree-node'); 15 16 if ($(node).is('.or-navtree-node--is-open')) { 17 // Pfad ist offen -> schließen 18 $(node).children('ul').slideUp('fast').remove(); 19 20 // Am Knoten die Klasse wechseln. 21 $(node).removeClass('or-navtree-node--is-open').addClass('or-navtree-node--is-closed').find('.tree-icon').removeClass('image-icon--node-open').addClass('image-icon--node-closed'); 22 } 23 else { 24 // Pfad ist geschlossen -> öffnen. 25 $(treeEl).closest('div.view').addClass('loader'); 26 27 var type = $(node).data('type'); 28 var id = $(node).data('id'); 29 var extraId = $(node).data('extra'); 30 31 var loadBranchUrl = './api/?action=tree&subaction=loadBranch&id=' + id + '&type=' + type + '&output=json'; 32 33 // Extra-Id ergänzen. 34 if (typeof extraId === 'string') { 35 jQuery.each(jQuery.parseJSON(extraId.replace(/'/g,'"')), function (name, value) { 36 loadBranchUrl = loadBranchUrl + '&' + name + '=' + value; 37 }); 38 } 39 else if (typeof extraId === 'object') { 40 jQuery.each(extraId, function (name, field) { 41 loadBranchUrl = loadBranchUrl + '&' + name + '=' + field; 42 }); 43 } 44 else { 45 ; 46 } 47 48 // Die Inhalte des Zweiges laden. 49 $.getJSON(loadBranchUrl, function (json) { 50 51 // Den neuen Unter-Zweig erzeugen. 52 let ul = $('<ul class="or-navtree-list" />'); 53 $(treeEl).append(ul); 54 let output = json['output']; 55 $.each(output['branch'], function (idx, line) { 56 //if (!line.action || line.action == 'folder' || settings.selectable.length == 0 || settings.selectable[0] == '' || jQuery.inArray(line.action, settings.selectable) != -1) { 57 //var img = (line.url!==undefined?'tree_plus':'tree_none'); 58 let new_li = $('<li class="or-navtree-node or-navtree-node--is-closed or-draggable or-draggable--type-'+line.type+'" data-name="' + line.text + '" data-id="' + line.internalId + '" data-type="' + line.type + '" data-extra="' + JSON.stringify(line.extraId).replace(/"/g, "\'") + '"><div class="tree or-navtree-node-control"><i class="tree-icon image-icon image-icon--node-closed"></i></div><div class="clickable"><a href="' + Openrat.Navigator.createShortUrl(line.action,line.internalId) + '" class="entry" data-extra="' + JSON.stringify(line.extraId).replace(/"/g, "'") + '" data-id="' + line.internalId + '" data-action="' + line.action + '" data-type="open" title="' + line.description + '"><i class="image-icon image-icon--action-' + line['icon'] + '"></i> ' + line.text + '</a></div></li>'); 59 $(ul).append(new_li); 60 61 $(new_li).orTree(); // Alle Unter-Knoten erhalten auch Event-Listener zum Öffnen/Schließen. 62 63 // Die Navigationspunkte sind anklickbar, hier wird der Standardmechanismus benutzt. 64 $(new_li).find('.clickable').orLinkify(); 65 $(new_li).find('.clickable a').click( function(event) { 66 event.preventDefault(); // Links werden per Javascript geöffnet. Beim Öffnen im neuen Tab hat das aber keine Bedeutung. 67 } ); 68 registerTreeBranchEvents(ul); 69 //} 70 }); 71 $(ul).slideDown('fast'); // Einblenden 72 73 }).fail(function () { 74 // Ups... aber was können wir hier schon tun, außer hässliche Meldungen anzeigen. 75 Openrat.Workbench.notify('','','ERROR','failed to load subtree',[],false); 76 }).always(function () { 77 78 // Die Loader-Animation entfernen. 79 $(treeEl).closest('div.view').removeClass('loader'); 80 }); 81 82 // Am Knoten die Klasse wechseln. 83 $(node).addClass('or-navtree-node--is-open').removeClass('or-navtree-node--is-closed').find('.tree-icon').addClass('image-icon--node-open').removeClass('image-icon--node-closed'); 84 } 85 }); 86 87 }); 88 };