File modules/cms/ui/themes/default/script/plugin/jquery-plugin-orTree.js

Last commit: Sun Feb 6 21:34:42 2022 +0100	dankert	New: Use Accept-Header instead of "output" request parameter, this is the cleaner way.


     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 };



Download modules/cms/ui/themes/default/script/plugin/jquery-plugin-orTree.js


History
Sun, 6 Feb 2022 21:34:42 +0100	dankert	New: Use Accept-Header instead of "output" request parameter, this is the cleaner way.
Tue, 30 Nov 2021 20:20:14 +0100	dankert	Using the new spinner while loading data in the navigation.
Thu, 1 Apr 2021 01:01:54 +0200	Jan Dankert	New: Some fixes for OQuery, our new selfmade light JQuery replacement. Now the UI is back again.
Wed, 31 Mar 2021 01:52:57 +0200	Jan Dankert	New: Replace JQuery with OQuery, a selfmade light JQuery replacement.
Mon, 29 Mar 2021 01:06:08 +0200	Jan Dankert	Removed common.js and moved the callbacks to the workbench module.
Sat, 27 Mar 2021 05:14:11 +0100	Jan Dankert	Refactoring: Converting all script files to ES6 modules (work in progress); removed jquery-ui (drag and drop will be replaced by HTML5, sortable by a small lib)
Wed, 17 Mar 2021 02:18:50 +0100	Jan Dankert	Refactoring: Using "Jquery slim" without ajax and effects.
Tue, 16 Mar 2021 23:52:22 +0100	Jan Dankert	Refactoring: Use ES6 classes.
Tue, 16 Mar 2021 02:38:13 +0100	Jan Dankert	Fix: Using the new FormData object instead of JQuery (JQuery's serialize-functions are not available in the slim version)
Wed, 17 Feb 2021 00:37:45 +0100	Jan Dankert	Refactoring: Extract Notices into a separate js class
Tue, 9 Feb 2021 19:25:59 +0100	Jan Dankert	New: Adding console messages instead of weired dialog messages.
Sun, 15 Nov 2020 22:26:29 +0100	Jan Dankert	Fix: Icon update when open a navigation node.
Mon, 26 Oct 2020 21:36:14 +0100	Jan Dankert	Rename css class 'clickable' to 'act-clickable'; enhanced view 'info' for projects.
Sat, 10 Oct 2020 01:29:41 +0200	Jan Dankert	Refactoring: Only using CSS classes with the 'or-'-prefix.
Wed, 7 Oct 2020 22:25:28 +0200	Jan Dankert	Fix: Selecting a link with the selector tree.
Fri, 2 Oct 2020 23:11:48 +0200	Jan Dankert	Cleanup: No '.inputholder' any more, notices with links to objects.
Thu, 1 Oct 2020 20:55:34 +0200	Jan Dankert	Refactoring: Moving some global JS functions into the OR Namespace
Sun, 27 Sep 2020 04:09:05 +0200	Jan Dankert	Refactoring: The tree functions should use normal templates as the other actions. Beware of the JS hell.
Sun, 27 Sep 2020 00:48:43 +0200	Jan Dankert	Fix: Treeaction is an UI action, so ist is not available via the API. Now there is an ugly workaround for that, we have to create a template for this calls.
Sun, 23 Feb 2020 04:01:30 +0100	Jan Dankert	Refactoring with Namespaces for the cms modules, part 1: moving.