openrat-cms

Unnamed repository; edit this file 'description' to name the repository.
Log | Files | Refs | README

jquery-plugin-orTree.js (4057B)

      1 
      2 import $ from "../jquery-global.js";
      3 import Workbench from "../openrat/workbench.js";
      4 import Notice    from "../openrat/notice.js";
      5 
      6 /**
      7  * Baum darstellen.
      8  *
      9  * Die Controls zum Öffnen/Schließen der Teilbäume werden mit Event-Listener bestückt.
     10  * Beim Öffnen von Teilbäumen wird der Inhalt vom Server geladen.
     11  */
     12 export default function(options)
     13 {
     14 	// Create some defaults, extending them with any options that were provided
     15 	let settings = $.extend( {
     16 		'openAction' : function(name,action,id) {
     17 		}
     18 	}, options);
     19 
     20 	let registerTreeBranchEvents = function (viewEl)
     21 	{
     22 		Workbench.getInstance().registerDraggable(viewEl);
     23 	}
     24 
     25 
     26 	$(this).each(function (idxx, treeEl)
     27     {
     28         // Klick-Funktion zum Öffnen des Zweiges.
     29         $(treeEl).children('.or-navtree-node-control').click( function ()
     30         {
     31             let $node = $(this).parent('.or-navtree-node');
     32 
     33             if ($node.is('.or-navtree-node--is-open')) {
     34                 // Pfad ist offen -> schließen
     35                 $node.children('ul').remove();
     36 
     37                 // Am Knoten die Klasse wechseln.
     38                 $node.removeClass('navtree-node--is-open').addClass('navtree-node--is-closed').find('.or-navtree-tree-icon').removeClass('image-icon--node-open').addClass('image-icon--node-closed');
     39             }
     40             else {
     41                 // Pfad ist geschlossen -> öffnen.
     42 				Workbench.getInstance().startSpinner();
     43                 let $link   = $node.find('a');
     44                 //let type    = $link.data('extra-type');
     45                 let id      = $link.data('id');
     46                 let extraId = Workbench.htmlDecode($link.data('extra'));
     47 
     48                 let loadBranchUrl = './?action=tree&subaction=branch&id=' + id + '';
     49 
     50                 // Extra-Id ergänzen.
     51                 if (typeof extraId === 'string')
     52 					extraId = JSON.parse(extraId);
     53 
     54                 if (typeof extraId === 'object') {
     55                     Object.keys(extraId).forEach( (name)=> {
     56                         loadBranchUrl = loadBranchUrl + '&' + name + '=' + extraId[name];
     57                     });
     58                 }
     59                 else {
     60                     ;
     61                 }
     62 
     63                 console.debug( { url:loadBranchUrl } );
     64                 // Die Inhalte des Zweiges laden.
     65                 fetch( loadBranchUrl,{
     66 					method: 'GET',
     67 					headers: {
     68 						'Accept': 'text/html',
     69 					}
     70 				} )
     71 					.then( response => { if (!response.ok) throw "Failed to load tree"; return response } )
     72 					.then( response => response.text() )
     73 					.then( html => {
     74 
     75 						// Den neuen Unter-Zweig erzeugen.
     76 						let $ul = $.create('ul' ).addClass('navtree-list');
     77 						$(treeEl).append($ul);
     78 
     79 						$ul.html( html );
     80 						$ul.find('li').orTree(settings); // All subnodes are getting event listener for open/close
     81 
     82 						/* macht linkify schon
     83 						$(new_li).find('.act-clickable a').click( function(event) {
     84 							event.preventDefault(); // Links werden per Javascript geöffnet. Beim Öffnen im neuen Tab hat das aber keine Bedeutung.
     85 						} );*/
     86 						registerTreeBranchEvents($ul);
     87 						// Die Navigationspunkte sind anklickbar, hier wird der Standardmechanismus benutzt.
     88 						$ul.find('.or-act-clickable').orLinkify( {
     89 							'openAction':settings.openAction
     90 						} );
     91 						//$ul.slideDown('fast'); // Einblenden
     92 
     93                 	}).catch( cause => {
     94 						// Ups... aber was können wir hier schon tun, außer hässliche Meldungen anzeigen.
     95 						console.error( {message:'Failed to load subtree',url:loadBranchUrl,cause:cause});
     96 						let notice = new Notice();
     97 						notice.setStatus( 'error' );
     98 						notice.msg = cause;
     99                 	}).finally( () => {
    100 	                    // Die Loader-Animation entfernen.
    101 						Workbench.getInstance().stopSpinner();
    102         	        });
    103 
    104                 // Am Knoten die Klasse wechseln.
    105                 $node.addClass('navtree-node--is-open').removeClass('navtree-node--is-closed').find('.or-navtree-tree-icon').addClass('image-icon--node-open').removeClass('image-icon--node-closed');
    106             }
    107         });
    108 
    109     });
    110 };