Last commit: Tue Apr 26 22:58:31 2022 +0200	Jan Dankert	Fix: reenabled Drag and drop to selector.


      import $ from '../jquery-global.js';
      import Dialog from './dialog.js';
      import View from './view.js';
      import Callback from './callback.js';
      import WorkbenchNavigator from "./navigator.js";
      import Notice from "./notice.js";
      import Components from "./components.js";
      
      
     export default class Workbench {
         'use strict'; // Strict mode
     
     	static state = {
     		action: '',
     		id: 0,
     		extra: {}
     	};
     
     	static dialog;
     
     	static instance;
     
     	constructor() {
     
     		this.popupWindow = null;
     
     		Callback.dataChangedHandler.add( () => {
     			if   ( Workbench.popupWindow )
     				Workbench.popupWindow.location.reload();
     		} );
     
     	}
     
     
     	/**
     	 * @return Workbench
     	 */
     	static getInstance() {
     
     		if   ( ! Workbench.instance )
     			Workbench.instance = new Workbench();
     
     		return Workbench.instance;
     	}
     
     
         /**
     	 * Initializes the Workbench.
          */
     	initialize() {
     
     		this.checkBrowserRequirements();
     		this.initializeState();
     
     		$('html').removeClass('nojs');
     
     		/* Fade in all elements. */
     		$('.or--initial-hidden').removeClass('-initial-hidden');
     
     
     		// Listening to the "popstate" event
     		// If the user navigates back or forward, the new state is set.
     		window.onpopstate = ev => {
     			console.debug("Event after navigating",ev);
     			this.closeDialog();
     			this.closeMenu();
     			this.loadNewActionState(ev.state);
     		};
     
     		this.registerWorkbench();
     		this.initializeTheme();
     		this.initializeStartupNotices();
     		this.initializeEvents();
     		this.initializeKeystrokes();
     
     		// Load all views
     		this.reloadAll().then( () => {
     				Callback.afterNewActionHandler.fire();
     			}
     		);
     
     
     		// Initialze Ping timer.
     		this.initializePingTimer();
     		this.initializeDirtyWarning();
     
     		//Workbench.registerOpenClose( $('.or-collapsible') );
     		console.info('Application started');
         }
     
     
     
     	initializeTheme() {
     		if (window.localStorage) {
     			let style = window.localStorage.getItem('ui.style');
     			if (style)
     				this.setUserStyle(style);
     		}
     	}
    
    
        initializeDirtyWarning() {
    
    		// If the application should be closed, inform the user about unsaved changes.
    		window.addEventListener('beforeunload', function (e) {
    
    			// Are there views in the dirty state?
    			if   ( $('.or-view--is-dirty').length > 0 ) {
    
    				e.preventDefault(); // Cancel the event
    
    				// This text is replaced by modern browsers with a common message.
    				return 'Unsaved content will be lost.';
    			}
    			else {
    				// Let the browser quitting the page.
    				// Do NOT logout here, because there could be other windows/tabs with the same session.
    				return undefined; // nothing to do.
    			}
    		});
    	}
    
    
    	/**
    	 * Register this workbench in the window object
    	 * Only for debugging in browser console.
    	 */
    	registerWorkbench() {
    
    		window.OpenRat = { workbench: this };
    	}
    
    
        /**
         * Sets the workbench state with action/id.
         *
         * Example: #/name/1 is translated to the state {action:name,id:1}
         */
        initializeState() {
    
            let parts = window.location.hash.split('/');
            let state = { action:'index',id:0 };
    
            if   ( parts.length >= 2 )
                state.action = parts[1].toLowerCase();
    
            if   ( parts.length >= 3 )
                // Only numbers and '_' allowed in the id.
                state.id = parts[2].replace(/[^0-9_]/gim,"");
    
            Workbench.state = state;
    
    		WorkbenchNavigator.toActualHistory( state );
        }
    
        /**
         * Checks the browser requirements for this application.
         */
        checkBrowserRequirements() {
    
    		if   ( ! window.Promise ) {
    			console.error('This browser does not support Promises, which is required for this application.' );
    
    			// Show a little Notice for the user that his shit browser is not supported.
    			let notice = new Notice();
    			notice.msg = 'This browser is not supported';
    			notice.msg = 'Promises are not available';
    			notice.show();
    		}
    
    		if   ( ! window.fetch ) {
    			console.error('This browser does not support the fetch API, which is required for this application.' );
    
    			// Show a little Notice for the user that his shit browser is not supported.
    			let notice = new Notice();
    			notice.setStatus('error');
    			notice.msg = 'This browser is not supported';
    			notice.log = 'Fetch API is not available';
    			notice.show();
    		}
        }
    
        /**
    	 *  Registriert den Ping-Timer für den Sitzungserhalt.
         */
    	initializePingTimer() {
    
            /**
             * Ping den Server. Führt keine Aktion aus, aber sorgt dafür, dass die Sitzung erhalten bleibt.
             *
             * "Geben Sie mir ein Ping, Vasily. Und bitte nur ein einziges Ping!" (aus: Jagd auf Roter Oktober)
             */
            let ping = async () => {
            	let url = View.createUrl('profile', 'ping' );
    			console.debug('ping');
    
    			try {
    				let response = await fetch( url,{
    					method: 'GET',
    					headers: {
    						'Accept': 'application/json',
    					}
    				}  );
    
    				if   ( !response.ok )
    					throw "ping failed";
    			} catch( cause ) {
    				// oO, what has happened? There is no session with a logged in user, or the server has gone.
    				console.warn( {message: 'The server ping has failed.',cause:cause });
    
    				// Is there any user input? Ok, we should warn the user that the data could not be saved.
    				if ($('.or-view--is-dirty').length > 0) {
    					window.alert("The server session is lost, please save your data.");
    				}
    				else {
    					// no input data, so lets reload all views?
    					// no, maybe an anonymous user is looking around.
    					//Openrat.reloadAll();
    				}
    			}
    
    
    
    		}
    
            // Alle 5 Minuten pingen.
    		let timeoutMinutes = 5;
    
            window.setInterval( ping, timeoutMinutes*60*1000 );
        }
    
    
    	/**
    	 * Sets a new states and loads all views.
    	 *
    	 * @param state
    	 */
    	loadNewActionState(state) {
    
    		console.debug("New state",state);
            Workbench.state = state;
    
            this.reloadViews();
    		this.filterMenus();
    
    		Callback.afterNewActionHandler.fire();
    	}
    
    
    	closeDialog() {
    		if   ( Workbench.dialog ) {
    			Workbench.dialog.close();
    			Workbench.dialog = null;
    		}
    	}
    
    
    	createDialog() {
    
    		this.closeDialog();
    
    		Workbench.dialog = new Dialog();
    		return Workbench.dialog;
    	}
    
        /**
         *
         */
        reloadViews() {
    
    		this.startSpinner();
            let promise = this.loadViews( $('.or-workbench .or-act-view-loader') );
    
            promise.then(
    			() => this.stopSpinner()
    		);
    
    		return promise;
        }
    
    
        startSpinner() {
        	$('.or-workbench-loader').addClass('loader').addClass('loader--is-active');
    	}
        stopSpinner() {
        	$('.or-workbench-loader').removeClass('loader').removeClass('loader--is-active');
    	}
    
    	/**
    	 * @return a promise for all views
    	 */
    	reloadAll() {
    
    		this.startSpinner();
    
    		let promise = this.loadViews( $('.or-act-view-loader,.or-act-view-static') );
            console.debug('reloading all views');
    
            let stylePromise    = this.loadUserStyle();
            let languagePromise = this.loadLanguage();
            let settingsPromise = this.loadUISettings();
    
            let all = Promise.all( [ promise,stylePromise,languagePromise,settingsPromise ] );
    
            all.then(
    			() => this.stopSpinner()
    		);
    
            return all;
    	}
    
    
    	async loadUserStyle() {
    
    		let url = View.createUrl('profile', 'userinfo' );
    
    		let response = await fetch(url,{
    			method: 'GET',
    			headers: {
    				'Accept': 'application/json',
    			}
    		});
    		let json = await response.json();
    
    		let style = json.output['style'];
    		this.setUserStyle(style);
    
    		let color = json.output['theme-color'];
    		this.setThemeColor(color);
    	}
    
    
    
    	static settings = {};
        static language = {};
    
        async loadLanguage() {
    
    		let url = View.createUrl('profile', 'language');
    
    		let response = await fetch(url,{
    				method: 'GET',
    				headers: {
    					'Accept': 'application/json',
    				}
    			}
    		);
    		let data     = await response.json();
    
    		Workbench.language = data.output.language;
    	}
    
    	/**
    	 * load UI settings from the server.
    	 */
    	async loadUISettings() {
    
    		let url = View.createUrl('profile', 'uisettings' );
    
    		let response = await fetch(url,{
    			method: 'GET',
    			headers: {
    				'Accept': 'application/json',
    			}
    		});
    		let data = await response.json();
    
    		Workbench.settings = data.output.settings.settings;
    	}
    
    
    	/**
    	 *
    	 * @param $views
    	 * @returns Promise for all views
    	 */
    	loadViews( $views )
        {
        	let wb = this;
        	let promises = [];
            $views.each(function (idx) {
    
                let $targetDOMElement = $(this);
    
                promises.push( wb.loadNewActionIntoElement( $targetDOMElement ) );
            });
    
    		let all = Promise.all( promises );
    
    		return all;
    
    
    	}
    
    
    	/**
    	 * @param $viewElement
    	 * @returns {Promise}
    	 */
    	loadNewActionIntoElement( $viewElement )
        {
            let action;
            if   ( $viewElement.is('.or-act-view-static') )
                // Static views have always the same action.
                action = $viewElement.attr('data-action');
            else
                action = Workbench.state.action;
    
            let id     = Workbench.state.id;
            let params =  Workbench.state.extra;
    
            let method = $viewElement.data('method');
    
            let view = new View( action,method,id,params );
            return view.start( $viewElement );
        }
    
    
    
    
        /**
         * Sets a new theme.
         * @param styleName
         */
        setUserStyle( styleName )
        {
    		if   ( window.localStorage )
    			window.localStorage.setItem('ui.style',styleName);
    
        	let styleUrl = View.createUrl('index', 'themestyle', 0, {'style': styleName});
    		document.getElementById('user-style').setAttribute('href',styleUrl);
        }
    
    
        /**
         * Sets a new theme color.
         * @param color Theme-color
         */
        setThemeColor( color )
        {
    		document.getElementById('theme-color').setAttribute('content',color);
        }
    
    
    
    	/**
    	 * Sets the application title.
    	 */
    	static setApplicationTitle( newTitle ) {
    
    		let title = document.querySelector('head > title');
    		let defaultTitle = title.dataset.default;
    
    		title.textContent = (newTitle ? newTitle + ' - ' : '') + defaultTitle;
    	}
    
    
    
    
    	/**
    	 * open and close groups.
    	 *
    	 * @param $el
    	 */
    	static registerOpenClose = function( $el )
    	{
    		$($el).children('.or-collapsible-act-switch').click( function() {
    			let $group = $(this).closest('.or-collapsible');
    
    			if   ( $group.hasClass('collapsible--is-visible') ) {
    				// closing
    				$group.removeClass('collapsible--is-visible');
    				setTimeout( () => {
    					$group.removeClass('collapsible--is-open');
    				},300 );
    
    			}
    			else {
    				// open
    				$group.addClass('collapsible--is-open');
    				$group.addClass('collapsible--is-visible');
    			}
    		});
    	}
    
    
    
    	/**
    	 * Setzt neue Action und aktualisiert alle Fenster.
    	 *
    	 * @param action Action
    	 * @param id Id
    	 */
    	openNewAction( name,action,id )
    	{
    		// Im Mobilmodus soll das Menü verschwinden, wenn eine neue Action geoeffnet wird.
    		$('.or-workbench-navigation').removeClass('workbench-navigation--is-open');
    
    		Workbench.setApplicationTitle( name ); // Sets the title.
    
    		let newState = {'action':action, 'id':id };
    		this.loadNewActionState( newState );
    
    		WorkbenchNavigator.navigateToNew( newState );
    	}
    
    
    
    
    
    
    
    
    	registerDraggable(viewEl) {
    
    	// Drag n Drop: Inhaltselemente (Dateien,Seiten,Ordner,Verknuepfungen) koennen auf Ordner gezogen werden.
    
    		/*
    		no jquery ui anymore.
    		$(viewEl).find('.or-draggable').draggable(
    			{
    				helper: 'clone',
    				opacity: 0.7,
    				zIndex: 3,
    				distance: 10,
    				cursor: 'move',
    				revert: 'false'
    			}
    		);*/
    
    		// Enable HTML5-Drag n drop
    		$(viewEl).find('.or-draggable').attr('draggable','true')
    			.on('dragstart',(e)=>{
    				$('.or-workbench').addClass('workbench--drag-active');
    				let link = e.currentTarget;
    				e.dataTransfer.effectAllowed = 'link';
    				e.dataTransfer.setData('id'    , link.dataset.id    );
    				e.dataTransfer.setData('action', link.dataset.action);
    				e.dataTransfer.setData('name'  , link.dataset.name || link.textContent.trim()   );
    				console.debug('drag started',e.dataTransfer);
    		})
    			.on('drag',(e)=>{
    		})
    			.on('dragend',(e)=>{
    			$('.or-workbench').removeClass('workbench--drag-active');
    		});
    	}
    
    
    	registerDroppable(viewEl) {
    
    		$(viewEl).find('.or-droppable-selector').on('dragover', (e) => {
    			e.preventDefault();
    		}).on('drop', (event) => {
    
    			let id = event.dataTransfer.getData('id');
    			if   ( !id) {
    				console.debug("dropped object has no object id, ignoring");
    				return;
    			}
    			let name = event.dataTransfer.getData('name');
    			if (!name)
    				name = id;
    
    			console.debug("dropped",id,name,event.dataTransfer );
    			$(event.currentTarget).find('.or-selector-link-value').val(id);
    			$(event.currentTarget).find('.or-selector-link-name').val(name).attr('placeholder', name);
    			event.preventDefault();
    		});
    
    		$(viewEl).find('.or-droppable')
    	}
    
    	registerAsDroppable( el, onDrop ) {
    
    		el.addEventListener('dragover', (e) => {
    			//e.stopPropagation();
    			e.preventDefault();
    		});
    
    		el.addEventListener('dragenter', (e) => {
    			e.stopPropagation();
    			e.preventDefault();
    			e.currentTarget.classList.add('or-workbench--drop-active');
    		});
    
    		el.addEventListener('dragleave', (e) => {
    			e.stopPropagation();
    			e.preventDefault();
    			e.currentTarget.classList.remove('or-workbench--drop-active');
    		});
    		el.addEventListener('drop', onDrop);
    	}
    
    
    	static htmlDecode(input) {
    		let doc = new DOMParser().parseFromString(input, "text/html");
    		return doc.documentElement.textContent;
    	}
    
    
    
    
    	async filterMenus() {
    
    		let action = Workbench.state.action;
    		let id = Workbench.state.id;
    		$('.or-workbench-title .or-dropdown-entry.or-act-clickable').addClass('dropdown-entry--active');
    		$('.or-workbench-title .or-filtered').removeClass('dropdown-entry--active').addClass('dropdown-entry--inactive');
    		// Jeder Menüeintrag bekommt die Id und Parameter.
    		$('.or-workbench-title .or-filtered .or-link').attr('data-id', id);
    
    		let url = View.createUrl('profile', 'available', id, {'queryaction': action});
    
    		// Die Inhalte des Zweiges laden.
    		let response = await fetch(url, {
    			method: 'GET',
    			headers: {
    				'Accept': 'application/json',
    			}
    		});
    		let data     = await response.json();
    
    		for (let method of Object.values(data.output.views))
    			$('.or-workbench-title .or-filtered > .or-link[data-method=\'' + method + '\']')
    				.parent()
    				.addClass('dropdown-entry--active')
    				.removeClass('dropdown-entry--inactive');
    	}
    
    
    
    
    	initializeStartupNotices() {
    
    		// Initial Notices
    		$('.or-act-initial-notice').each( function() {
    
    			let notice = new Notice();
    			notice.setStatus('info');
    			notice.msg = $(this).text();
    			notice.show();
    
    			//$(this).remove();
    		});
    	}
    
    
    	initializeKeystrokes() {
    
    		let keyPressedHandler = (event) => {
    
    			if (event.key === 'F4') {
    				// Open "properties" dialog.
    
    				let dialog = this.createDialog();
    				dialog.start('', '', 'prop', 0, {});
    			}
    
    			if (event.key === 'F2') {
    
    				// Toggle navigation bar
    				if ($('.or-workbench').hasClass('workbench--navigation-is-small'))
    					$('.or-act-nav-wide').click();
    				else
    					$('.or-act-nav-small').click();
    			}
    
    			if (event.code === 'Escape') {
    				// Close an existing dialog.
    				this.closeDialog();
    			}
    		};
    
    
    
    		document.addEventListener('keydown',keyPressedHandler);
    	}
    
    
    	closeMenu() {
    		$('.or-menu').removeClass('menu--is-open');
    	}
    
    
    	/**
    	 * Registriert alle Events, die in der Workbench laufen sollen.
    	 */
    	initializeEvents() {
    
    		new Components().registerComponents();
    
    		// Mit der Maus irgendwo hin geklickt, das Menü muss schließen.
    		$('body').click( () => {
    			this.closeMenu();
    		});
    
    		// close dialog on click onto the blurred area.
    		$('.or-dialog-filler,.or-act-dialog-close').click( (e) =>
    			{
    				e.preventDefault();
    				this.closeDialog();
    			}
    		);
    
    
    		// Mobile navigation must close on a click on the workbench
    		$('.or-act-navigation-close').click( () => {
    			$('.or-workbench-navigation').removeClass('workbench-navigation--is-open');
    			$('.or-workbench').removeClass('workbench--navigation-is-open');
    		});
    
    		// Handler for desktop navigation
    		$('.or-workbench-title .or-act-nav-small').click( () => {
    			$('.or-workbench').addClass('workbench--navigation-is-small');
    			$('.or-workbench-navigation').addClass('workbench-navigation--is-small');
    		});
    
    
    		$('.or-search-input .or-input').orSearch( {
    			onSearchActive: function() {
    				$('.or-search').addClass('search--is-active');
    			},
    			onSearchInactive: function() {
    				$('.or-search').removeClass('search--is-active');
    			},
    			dropdown    : '.or-act-search-result',
    			resultEntryClass: 'search-result-entry',
    			//openDropdown: true, // the dropdown is automatically opened by the menu.
    			select      : function(obj) {
    				// open the search result
    				Workbench.getInstance().openNewAction( obj.name, obj.action, obj.id );
    			},
    			afterSelect: function() {
    				//$('.or-dropdown.or-act-selector-search-results').empty();
    			}
    		} );
    		$('.or-search .or-act-search-delete').click( () => {
    			$('.or-search .or-title-input').val('').input();
    		} );
    
    
    		Callback.afterNewActionHandler.add( function() {
    
    				$('.or-sidebar').find('.or-sidebar-button').orLinkify();
    			}
    		);
    
    		Callback.afterNewActionHandler.add( function() {
    
    			let url = View.createUrl('tree', 'path', Workbench.state.id, {'type': Workbench.state.action});
    
    			// Die Inhalte des Zweiges laden.
    			let loadPromise = fetch( url,{
    				method: 'GET',
    				headers: {
    					'Accept': 'text/html',
    				}
    			} );
    
    			/**
    			 * open a object in the navigation tree.
    			 * @param action
    			 * @param id
    			 */
    			function openNavTree(action, id) {
    				let $navControl = $('.or-link[data-action="'+action+'"][data-id="'+id+'"]').closest('.or-navtree-node');
    				if   ( $navControl.is( '.or-navtree-node--is-closed' ) )
    					$navControl.find('.or-navtree-node-control').click();
    			}
    
    			loadPromise
    				.then( response => response.text() )
    				.then( data => {
    
    					$('.or-breadcrumb').empty().html( data ).find('.or-act-clickable').orLinkify();
    
    					// Open the path in the navigator tree
    					$('.or-breadcrumb a').each( function () {
    						let action = $(this).data('action');
    						let id     = $(this).data('id'    );
    
    						openNavTree( action, id );
    					});
    
    					$('.or-link--is-active').removeClass('link--is-active');
    
    					let action = Workbench.state.action;
    					let id     = Workbench.state.id;
    					if  (!id) id = '0';
    
    					// Mark the links to the actual object
    					$('.or-link[data-action=\''+action+'\'][data-id=\''+id+'\']').addClass('link--is-active');
    					// Open actual object
    					openNavTree( action,id );
    
    				}).catch( cause => {
    				// Ups... aber was können wir hier schon tun, außer hässliche Meldungen anzeigen.
    				console.warn( {
    					message : 'Failed to load path',
    					url     : url,
    					cause   : cause } );
    			}).finally(function () {
    
    			});
    		} );
    
    
    		Callback.afterViewLoadedHandler.add( function(element) {
    			$(element).find('.or-button').orButton();
    		} );
    
    		Callback.afterViewLoadedHandler.add( function(element) {
    
    			// Refresh already opened popup windows.
    			if   ( Workbench.popupWindow )
    				$(element).find("a[data-type='popup']").each( function() {
    					Workbench.popupWindow.location.href = $(this).attr('data-url');
    				});
    
    		});
    
    
    		Callback.afterViewLoadedHandler.add( function(element) {
    
    			$(element).find(".or-input--password").dblclick( function() {
    				$(this).toggleAttr('type','text','password');
    			});
    
    			$(element).find(".or-act-make-visible").click( function() {
    				$(this).toggleClass('btn--is-active' );
    				$(this).parent().children('input').toggleAttr('type','text','password');
    			});
    		});
    
    
    
    		Callback.afterViewLoadedHandler.add( function($element) {
    
    			$element.find('.or-act-load-nav-tree').each( async function() {
    
    				let type = $(this).data('type') || 'root';
    				let loadBranchUrl = View.createUrl('tree', 'branch', 0, {type: type});
    				let $targetElement = $(this);
    
    				let response = await fetch( loadBranchUrl,{
    					method: 'GET',
    					headers: {
    						'Accept': 'text/html',
    					}
    				} );
    				let html     = await response.text();
    
    				// Den neuen Unter-Zweig erzeugen.
    				let $ul = $.create('ul' ).addClass('navtree-list');
    				$ul.appendTo( $targetElement.empty() ).html( html );
    
    				$ul.find('li').orTree( {
    					'openAction': function( name,action,id) {
    						Workbench.getInstance().openNewAction( name,action,id );
    					}
    
    				} ); // All subnodes are getting event listener for open/close
    
    				// Die Navigationspunkte sind anklickbar, hier wird der Standardmechanismus benutzt.
    				$ul.find('.or-act-clickable').orLinkify();
    
    				// Open the first node.
    				$ul.find('.or-navtree-node-control').first().click();
    
    			} );
    
    		} );
    
    
    
    
    		/**
    		 * Registriert alle Handler für den Inhalt einer View.
    		 *
    		 * @param viewEl DOM-Element der View
    		 */
    		Callback.afterViewLoadedHandler.add( function(viewEl ) {
    
    			// Handler for mobile navigation
    			$(viewEl).find('.or-act-nav-open-close').click( function() {
    				$('.or-workbench').toggleClass('workbench--navigation-is-open');
    				$('.or-workbench-navigation').toggleClass('workbench-navigation--is-open');
    			});
    
    			// Handler for desktop navigation
    			$(viewEl).find('.or-act-nav-small').click( function() {
    				$('.or-workbench').addClass('workbench--navigation-is-small');
    				$('.or-workbench-navigation').addClass('workbench-navigation--is-small');
    			});
    			$(viewEl).find('.or-act-nav-wide').click( function() {
    				$('.or-workbench').removeClass('workbench--navigation-is-small');
    				$('.or-workbench-navigation').removeClass('workbench-navigation--is-small');
    			});
    
    
    			// Selectors (Einzel-Ausahl für Dateien) initialisieren
    			// Wurzel des Baums laden
    			$(viewEl).find('.or-act-selector-tree-button').click( function() {
    
    				let $selector = $(this).parent('.or-selector');
    				let $targetElement = $selector.find('.or-act-load-selector-tree');
    
    				if   ( $selector.hasClass('selector--is-tree-active') ) {
    					$selector.removeClass('selector--is-tree-active');
    					$targetElement.empty();
    				}
    				else {
    					$selector.addClass('selector--is-tree-active');
    
    					var selectorEl = this;
    					/*
    					$(this).orTree( { type:'project',selectable:$(selectorEl).attr('data-types').split(','),id:$(selectorEl).attr('data-init-folderid'),onSelect:function(name,type,id) {
    
    						var selector = $(selectorEl).parent();
    
    						//console.log( 'Selected: '+name+" #"+id );
    						$(selector).find('input[type=text]'  ).attr( 'value',name );
    						$(selector).find('input[type=hidden]').attr( 'value',id   );
    					} });
    					*/
    
    					let id   = $(this).data('init-folder-id');
    					let type = id?'folder':'projects';
    					let loadBranchUrl = './?action=tree&subaction=branch&id='+id+'&type='+type;
    
    					let load = fetch( loadBranchUrl,{
    						method: 'GET',
    						headers: {
    							'Accept': 'text/html',
    						}
    					} );
    					load
    						.then( response => response.text() )
    						.then( html => {
    
    							// Den neuen Unter-Zweig erzeugen.
    							let $ul = $.create('ul' ).addClass('navtree-list');
    							$ul.appendTo( $targetElement ).html( html );
    
    							$ul.find('li').orTree(
    								{
    									'openAction' : function(name,action,id) {
    										$selector.find('.or-selector-link-value').val(id  );
    										$selector.find('.or-selector-link-name' ).val('').attr('placeholder',name);
    
    										$selector.removeClass('selector--is-tree-active');
    										$targetElement.empty();
    									}
    								}
    							); // All subnodes are getting event listener for open/close
    
    							// Die Navigationspunkte sind anklickbar, hier wird der Standardmechanismus benutzt.
    							$ul.find('.or-act-clickable').orLinkify();
    
    							// Open the first node.
    							$ul.find('.or-navtree-node-control').first().click();
    						} );
    				}
    
    			} );
    
    
    			registerDragAndDrop(viewEl);
    
    
    			// Theme-Auswahl mit Preview
    			$(viewEl).find('.or-theme-chooser').change( function() {
    				Workbench.getInstance().setUserStyle( this.value );
    			});
    
    
    
    
    			function registerMenuEvents($element )
    			{
    				// Mit der Maus geklicktes Menü aktivieren.
    				$($element).find('.or-menu-category').click( function(event) {
    					event.stopPropagation();
    					$(this).closest('.or-menu').toggleClass('menu--is-open');
    				});
    
    				// Mit der Maus überstrichenes Menü aktivieren.
    				$($element).find('.or-menu-category').mouseover( function() {
    
    					// close other menus.
    					$(this).closest('.or-menu').find('.or-menu-category').removeClass('menu-category--is-open');
    					// open the mouse-overed menu.
    					$(this).addClass('menu-category--is-open');
    				});
    
    			}
    
    
   			function registerSelectorSearch( $element )
   			{
   				$($element).find('.or-act-selector-search').orSearch( {
   					onSearchActive: function() {
   						$(this).parent('or-selector').addClass('selector-search--is-active');
   					},
   					onSearchInactive: function() {
   						$(this).parent('or-selector').removeClass('selector-search--is-active' );
   					},
   
   					dropdown: '.or-act-selector-search-results',
   					resultEntryClass: 'search-result-entry',
   
   					select: function(obj) {
   						$($element).find('.or-selector-link-value').val(obj.id  );
   						$($element).find('.or-selector-link-name' ).val(obj.name).attr('placeholder',obj.name);
   					},
   
   					afterSelect: function() {
   						$('.or-dropdown.or-act-selector-search-results').empty();
   					}
   				} );
   			}
   
   
   
   			function registerTree(element) {
   
   				// Klick-Funktionen zum Öffnen/Schließen des Zweiges.
   				//$(element).find('.or-navtree-node').orTree();
   
   			}
   
   
   			registerMenuEvents    ( viewEl );
   			//registerGlobalSearch  ( viewEl );
   			registerSelectorSearch( viewEl );
   			registerTree          ( viewEl );
   
   			function registerDragAndDrop(viewEl)
   			{
   
   				Workbench.getInstance().registerDraggable(viewEl);
   				Workbench.getInstance().registerDroppable(viewEl);
   			}
   
   			registerDragAndDrop(viewEl);
   
   
   		} );
   	};
   
   	/**
   	 * Adds a new Stylesheet to the DOM.
   	 *
   	 * @param id ID of element (must be unique in the DOM)
   	 * @param href Link to the stylesheet
   	 */
   	static async addStyle( id, href ) {
   
   		return new Promise( (resolve,reject) => {
   			let styleEl = document.getElementById(id);
   
   			if (!styleEl) {
   				// Style is not present, so inserting it into the DOM
   				styleEl = document.createElement('link');
   				styleEl.addEventListener('load',resolve);
   				styleEl.setAttribute('rel', 'stylesheet');
   				styleEl.setAttribute('type', 'text/css');
   				styleEl.setAttribute('href', href);
   				styleEl.setAttribute('id', id);
   
   				document.getElementsByTagName('head')[0].appendChild(styleEl);
   			} else {
   				resolve();
   			}
   		} );
   
   	}
   
   
   	/**
   	 * Adds a new Script to the DOM.
   	 *
   	 * @param id ID of element (must be unique in the DOM)
   	 * @param href Link to the stylesheet
   	 */
   	static async addScript( id, href ) {
   
   		return new Promise( (resolve,reject) => {
   			let scriptEl = document.getElementById( id );
   
   			if   ( ! scriptEl ) {
   				// Script is not present, so inserting it into the DOM
   				scriptEl = document.createElement( 'script' );
   				scriptEl.setAttribute('id'  ,id                       );
   				scriptEl.setAttribute('type','text/javascript'  );
   				scriptEl.addEventListener('load',resolve);
   				scriptEl.setAttribute('src',href );
   				document.getElementsByTagName('head')[0].appendChild(scriptEl);
   			} else {
   				resolve(); // script is already there
   			}
   		} );
   	}
   
   }
   


Download modules/cms/ui/themes/default/script/openrat/workbench.js

History
Tue, 26 Apr 2022 22:58:31 +0200	Jan Dankert	Fix: reenabled Drag and drop to selector.
Mon, 25 Apr 2022 23:41:25 +0200	Jan Dankert	Fix: Re-enabling selector-box.
Thu, 10 Mar 2022 13:09:06 +0100	dankert	New: Remember some user inputs in the browser local storage.
Sun, 6 Feb 2022 22:06:09 +0100	dankert	Refactoring: Ommit unnecessary parameters.
Sun, 6 Feb 2022 21:34:42 +0100	dankert	New: Use Accept-Header instead of "output" request parameter, this is the cleaner way.
Sat, 18 Dec 2021 03:57:38 +0100	dankert	New: Using localStorage for user style.
Sat, 18 Dec 2021 03:47:23 +0100	dankert	New: Every ES6-Module should have a minified version for performance reasons. Bad: The Minifier "Jsqueeze" is unable to minify ES6-modules, so we had to implement a simple JS-Minifier which strips out all comments.
Fri, 17 Dec 2021 04:29:47 +0100	dankert	New: Opening a dialog creates a new entry in history api. So, using the back button will close the dialog.
Fri, 17 Dec 2021 01:27:54 +0100	dankert	New: Check if browser has support for ES6-Promises and the fetch API.
Mon, 6 Dec 2021 23:21:18 +0100	dankert	Fixes: Click on search results will close the search results.
Mon, 29 Nov 2021 23:54:33 +0100	Jan Dankert	New: Spinner image with pure css. So we can colorize it now.
Thu, 22 Apr 2021 00:30:08 +0200	Jan Dankert	Fix: Re-enable drag and drop
Sun, 18 Apr 2021 01:21:33 +0200	Jan Dankert	Fix: Correct CSS3 syntax for transitions on multiple properties; New: Using a transition for open/close collapsibles.
Tue, 13 Apr 2021 23:55:43 +0200	Jan Dankert	New: Dynamic load of scripts and styles for the editors. Trumbowyg needs JQuery so , so JQuery is back again (but only for this case) :(
Thu, 1 Apr 2021 23:51:12 +0200	Jan Dankert	New: Toggle desktop navigation with F2 (on mobile devices there are no F-keys)
Thu, 1 Apr 2021 23:31:49 +0200	Jan Dankert	Fix: Open properties with F4 key.
Thu, 1 Apr 2021 22:53:24 +0200	Jan Dankert	Fix: Search
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 02:40:58 +0200	Jan Dankert	New: Preload for fonts and modules.
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 10:40:59 +0100	Jan Dankert	Only generate the actual necessary theme style.
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 22:27:33 +0100	Jan Dankert	Refactoring: Using ES6-Modules (experimental)
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, 23 Feb 2021 01:00:33 +0100	Jan Dankert	New: Undo for closed dialogs with unsaved changes.
Wed, 17 Feb 2021 02:34:51 +0100	Jan Dankert	Refactoring: Extract Dialog into a separate js class
Wed, 17 Feb 2021 00:37:45 +0100	Jan Dankert	Refactoring: Extract Notices into a separate js class
Mon, 15 Feb 2021 02:27:54 +0100	Jan Dankert	Fix: Drag and drop from the navigation tree to a selector input.
Sun, 14 Feb 2021 23:18:14 +0100	Jan Dankert	New: Confirmation needed if a dialog is closed which has unsaved changes.
Sat, 13 Feb 2021 00:22:42 +0100	Jan Dankert	Fix: Deleting old code; Clear notices after a shorter time.
Wed, 10 Feb 2021 00:00:21 +0100	Jan Dankert	Using only fullscreen views; Navigate to parent instead of complete breadcrumb.
Tue, 9 Feb 2021 19:25:59 +0100	Jan Dankert	New: Adding console messages instead of weired dialog messages.
Sat, 21 Nov 2020 12:13:03 +0100	Jan Dankert	Fix: Dirty marker.
Sat, 14 Nov 2020 22:02:21 +0100	Jan Dankert	Fixed: Notices may display a message.
Mon, 2 Nov 2020 23:59:36 +0100	Jan Dankert	Refactoring: The promise of the ajax requests are returned to the caller. All view requests are collected into a singlel promise.
Mon, 26 Oct 2020 21:36:14 +0100	Jan Dankert	Rename css class 'clickable' to 'act-clickable'; enhanced view 'info' for projects.
Sun, 25 Oct 2020 11:31:56 +0100	Jan Dankert	Fix: close navigation on click.
Sat, 24 Oct 2020 23:51:11 +0200	Jan Dankert	Cleanup LESS files, introduce BEM.
Wed, 21 Oct 2020 23:13:01 +0200	Jan Dankert	Externalize constants.
Sun, 18 Oct 2020 01:30:49 +0200	Jan Dankert	New component "fieldset" for better form layout.
Sat, 10 Oct 2020 01:29:41 +0200	Jan Dankert	Refactoring: Only using CSS classes with the 'or-'-prefix.
Tue, 6 Oct 2020 22:23:11 +0200	Jan Dankert	Fix: Selecting a link with the selector (this was unusable since the last template refactoring). Searching is implemented, the selector tree must be fixed soon.
Sun, 4 Oct 2020 23:53:25 +0200	Jan Dankert	New: The tree is now hidable with a dedicated button. No more hover effect in the navigation.
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 11:57:11 +0200	Jan Dankert	Fix: Empty the navigaton tree before loading it.
Sun, 27 Sep 2020 04:53:00 +0200	Jan Dankert	Refactoring: Loading the initial tree with javascript. So we could remove the 'tree'-method from the TreeAction.
Thu, 10 Sep 2020 23:49:27 +0200	Jan Dankert	Warn the user, if the session is not available.
Mon, 24 Aug 2020 22:58:32 +0200	Jan Dankert	New: Browser should warn, if the application should be closed while there are unsaved changes.
Fri, 10 Apr 2020 00:25:40 +0200	Jan Dankert	Fix: The server ping must call the correct JQuery 'getJSON()'-method.
Sun, 23 Feb 2020 04:01:30 +0100	Jan Dankert	Refactoring with Namespaces for the cms modules, part 1: moving.