openrat-cms

OpenRat Content Management System
git clone http://git.code.weiherhei.de/openrat-cms.git
Log | Files | Refs | README

commit 4d0b13e6adb9c0d3e0b15f78c61a8202517a0f02
parent 5c1df9184d2e9197658aa95c62181b01d7118daa
Author: Jan Dankert <develop@jandankert.de>
Date:   Mon, 29 Mar 2021 01:06:08 +0200

Removed common.js and moved the callbacks to the workbench module.

Diffstat:
Mmodules/cms/ui/themes/default/html/views/index/show.php | 2+-
Mmodules/cms/ui/themes/default/html/views/index/show.tpl.src.xml | 2+-
Mmodules/cms/ui/themes/default/script/jquery-global.js | 3++-
Dmodules/cms/ui/themes/default/script/openrat/common.js | 476-------------------------------------------------------------------------------
Mmodules/cms/ui/themes/default/script/openrat/init.js | 13++++++-------
Mmodules/cms/ui/themes/default/script/openrat/workbench.js | 524+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++------
Mmodules/cms/ui/themes/default/script/plugin/jquery-plugin-orAutoheight.js | 6+++---
Mmodules/cms/ui/themes/default/script/plugin/jquery-plugin-orSearch.js | 5+++--
Mmodules/cms/ui/themes/default/script/plugin/jquery-plugin-orTree.js | 4++--
Mmodules/template_engine/components/html/component_editor/editor.js | 6+++++-
10 files changed, 507 insertions(+), 534 deletions(-)

diff --git a/modules/cms/ui/themes/default/html/views/index/show.php b/modules/cms/ui/themes/default/html/views/index/show.php @@ -13,7 +13,7 @@ <link rel="<?php echo O::escapeHtml('manifest') ?>" href="<?php echo O::escapeHtml(''.@$manifestLink.'') ?>" /><?php echo O::escapeHtml('') ?> <link rel="<?php echo O::escapeHtml('shortcut icon') ?>" type="<?php echo O::escapeHtml('image/x-icon') ?>" href="<?php echo O::escapeHtml(''.@$favicon_url.'') ?>" /><?php echo O::escapeHtml('') ?> </head> - <body class="<?php echo O::escapeHtml('or-loader') ?>"><?php echo O::escapeHtml('') ?> + <body><?php echo O::escapeHtml('') ?> <div id="<?php echo O::escapeHtml('workbench') ?>" class="<?php echo O::escapeHtml('or-workbench or--initial-hidden') ?>"><?php echo O::escapeHtml('') ?> <div class="<?php echo O::escapeHtml('or-workbench-navigation') ?>"><?php echo O::escapeHtml('') ?> <div class="<?php echo O::escapeHtml('or-workbench-screen or-workbench-navigation-content or-search') ?>"><?php echo O::escapeHtml('') ?> diff --git a/modules/cms/ui/themes/default/html/views/index/show.tpl.src.xml b/modules/cms/ui/themes/default/html/views/index/show.tpl.src.xml @@ -21,7 +21,7 @@ <link rel="shortcut icon" type="image/x-icon" href="${favicon_url}"/> </head> - <body class="or-loader"> + <body> <!-- This is the CMS workbench which contains the whole application --> <div id="workbench" class="or-workbench or--initial-hidden"> diff --git a/modules/cms/ui/themes/default/script/jquery-global.js b/modules/cms/ui/themes/default/script/jquery-global.js @@ -1,6 +1,7 @@ import './jquery.min.js'; -window.jQuery = $; +let jQuery = $; +export default jQuery; window.$ = $; import autoheight from './plugin/jquery-plugin-orAutoheight.js'; diff --git a/modules/cms/ui/themes/default/script/openrat/common.js b/modules/cms/ui/themes/default/script/openrat/common.js @@ -1,476 +0,0 @@ -import Workbench from "./workbench.js"; -import Callback from "./callback.js"; -import Notice from "./notice.js"; -import View from "./view.js"; -import '../jquery-global.js'; - - -// Execute after DOM ready: -export default event => { - // JS is available. - $('html').removeClass('nojs'); - - /* Fade in all elements. */ - $('.or--initial-hidden').removeClass('-initial-hidden'); - - - registerWorkbenchEvents(); - - // Listening to the "popstate" event: - window.onpopstate = function (ev) { - Workbench.getInstance().loadNewActionState(ev.state); - }; - - Workbench.getInstance().initialize(); - - Workbench.getInstance().reloadAll().then( () => { - Callback.afterNewActionHandler.fire(); - } - ); - -} - - - - - -/** - * Registriert alle Events, die in der Workbench laufen sollen. - */ -function registerWorkbenchEvents() { - - let registerWorkbenchGlobalEvents = function() { - - // Binding aller Sondertasten. - $('.keystroke').each( function() { - let keystrokeElement = $(this); - let keystroke = keystrokeElement.text(); - if (keystroke.length == 0) - return; // No Keybinding. - let keyaction = function() { - keystrokeElement.click(); - }; - // Keybinding ausfuehren. - $(document).bind('keydown', keystroke, keyaction ); - } ); - - } - - // Initial Notices - $('.or-act-initial-notice').each( function() { - - let notice = new Notice(); - notice.setStatus('info'); - notice.msg = $(this).text(); - notice.show(); - - $(this).remove(); - }); - - registerWorkbenchGlobalEvents(); - - - let closeMenu = function() { - // Mit der Maus irgendwo hin geklickt, das Menü muss schließen. - $('body').click( function() { - //$('.toolbar-icon.or-menu-category').parents('.or-menu').removeClass('menu--is-open'); - $('.or-menu').removeClass('menu--is-open'); - }); - }; - closeMenu(); - - let closeMobileNavigation = function() { - // Mobile navigation must close on a click on the workbench - $('.or-act-navigation-close').click( function() { - $('.or-workbench-navigation').removeClass('workbench-navigation--is-open'); - $('.or-workbench').removeClass('workbench--navigation-is-open'); - }); - }; - closeMobileNavigation(); - - let closeDesktopNavigation = function() { - - // Handler for desktop navigation - $('.or-workbench-title .or-act-nav-small').click(function () { - $('.or-workbench').addClass('workbench--navigation-is-small'); - $('.or-workbench-navigation').addClass('workbench-navigation--is-small'); - }); - }; - closeDesktopNavigation(); - - - let registerGlobalSearch = function() { - $('.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: 'or-search-result-entry', - //openDropdown: true, // the dropdown is automatically opened by the menu. - select : function(obj) { - // open the search result - Workbench.openNewAction( obj.name, obj.action, obj.id ); - }, - afterSelect: function() { - //$('.or-dropdown.or-act-selector-search-results').empty(); - } - } ); - $('.or-search .or-act-search-delete').click( function() { - $('.or-search .or-title-input').val('').change(); - } ); - }; - registerGlobalSearch(); - - - 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 ); - - /** - * 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().append( 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 () { - - }); - } ); - - - let filterMenus = function () - { - 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},true ); - - // Die Inhalte des Zweiges laden. - let promise = fetch(url); - - promise.then( response => response.json() ) - .then( (data) => { - - 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'); - }); - - - } - - - Callback.afterAllViewsLoaded.add( function() { - filterMenus(); - } ); - - Callback.afterAllViewsLoaded.add( function() { - $('body').removeClass('loader'); - } ); - - - - - 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 = './?action=tree&subaction=branch&id=0&type='+type; - let $targetElement = $(this); - - let response = await fetch( loadBranchUrl ); - let html = await response.text(); - - // Den neuen Unter-Zweig erzeugen. - let $ul = $('<ul class="or-navtree-list" />'); - $ul.appendTo( $targetElement.empty() ).append( 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 ) { - - // Die Section deaktivieren, wenn die View keinen Inhalt hat. - var section = $(viewEl).closest('section'); - - //var viewHasContent = $(viewEl).children().length > 0; - //section.toggleClass('disabled',!viewHasContent); - section.toggleClass('is-empty',$(viewEl).is(':empty')); - - /* - if ( ! $(viewEl).is(':empty') ) - section.slideDown('fast'); - else - section.slideUp('fast');*/ - - // Untermenüpunkte aus der View in das Fenstermenü kopieren... - //$(viewEl).closest('div.panel').find('div.header div.dropdown div.entry.perview').remove(); // Alte Einträge löschen - - // 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 ); - load - .then( response => response.text() ) - .then( html => { - - // Den neuen Unter-Zweig erzeugen. - let $ul = $('<ul class="or-navtree-list" />'); - $ul.appendTo( $targetElement ).append( 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).parents('.or-menu').toggleClass('menu--is-open'); - }); - - // Mit der Maus überstrichenes Menü aktivieren. - $($element).find('.or-menu-category').mouseover( function() { - - // close other menus. - $(this).parents('.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: 'or-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); - - - } ); -}; - diff --git a/modules/cms/ui/themes/default/script/openrat/init.js b/modules/cms/ui/themes/default/script/openrat/init.js @@ -1,12 +1,11 @@ -import '../jquery-global.js'; -import common from "./common.js"; +import Workbench from "./workbench.js"; -document.addEventListener("DOMContentLoaded", () => { - - // Startup the Workbench - common(); -} ); +// Startup the workbench +// +// Because this module is loaded with 'defer', the event 'domInteractive' is already fired and the DOM is parsed and ready. +// So we do not need to wait for DOMContentLoaded here. +Workbench.getInstance().initialize(); // Startup the Workbench diff --git a/modules/cms/ui/themes/default/script/openrat/workbench.js b/modules/cms/ui/themes/default/script/openrat/workbench.js @@ -1,8 +1,9 @@ -import '../jquery-global.js'; +import $ from '../jquery-global.js'; import Dialog from './dialog.js'; import View from './view.js'; import Callback from './callback.js'; import WorkbenchNavigator from "./navigator"; +import Notice from "./notice"; export default class Workbench { @@ -29,7 +30,6 @@ export default class Workbench { /** - * * @return Workbench */ static getInstance() { @@ -46,10 +46,33 @@ export default class Workbench { */ initialize() { + $('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 => { + this.loadNewActionState(ev.state); + }; + + this.initializeState(); + this.initializeStartupNotices(); + this.initializeEvents(); + this.initializeKeystrokes(); + + // Load all views + this.reloadAll().then( () => { + Callback.afterNewActionHandler.fire(); + } + ); + + // Initialze Ping timer. this.initializePingTimer(); this.initializeDirtyWarning(); - this.initializeState(); Workbench.registerOpenClose( $('.or-collapsible') ); console.info('Application started'); @@ -158,41 +181,28 @@ export default class Workbench { } - - loadNewActionState(state) { - - Workbench.state = state; - this.loadNewAction(state.action,state.id,state.data); - - Callback.afterNewActionHandler.fire(); - } - - - /** + /** + * Sets a new states and loads all views. * - */ + * @param state + */ + loadNewActionState(state) { - loadNewAction = function(action, id, params ) { + Workbench.state = state; this.reloadViews(); - } + this.filterMenus(); + Callback.afterNewActionHandler.fire(); + } /** * */ - reloadViews() { - // View in geschlossenen Sektionen löschen, damit diese nicht stehen bleiben. - $('.or-workbench-section--is-closed .or-act-view-loader').empty(); - let promise = this.loadViews( $('.or-workbench .or-act-view-loader') ); - promise.then( function() { - Callback.afterAllViewsLoaded.fire(); - } - ); return promise; } @@ -203,21 +213,23 @@ export default class Workbench { */ reloadAll() { - // View in geschlossenen Sektionen löschen, damit diese nicht stehen bleiben. - let promise = this.loadViews( $('.or-act-view-loader,.or-act-view-static').empty() ); - console.debug('reloading all views'); + document.querySelector('body').classList.add('or-loader'); - promise.then( () => { - Callback.afterAllViewsLoaded.fire(); - } - ); + 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(); - return Promise.all( [ promise,stylePromise,languagePromise,settingsPromise ] ); - } + let all = Promise.all( [ promise,stylePromise,languagePromise,settingsPromise ] ); + + all.then( + () => document.querySelector('body').classList.remove('or-loader') + ); + + return all; + } async loadUserStyle() { @@ -279,8 +291,12 @@ export default class Workbench { promises.push( wb.loadNewActionIntoElement( $targetDOMElement ) ); }); - return Promise.all( promises ); - } + let all = Promise.all( promises ); + + return all; + + + } /** @@ -330,10 +346,6 @@ export default class Workbench { - static dataChangedHandler = new Callback(); - - - /** * Sets the application title. */ @@ -434,5 +446,437 @@ export default class Workbench { 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}, true); + + // Die Inhalte des Zweiges laden. + let response = await fetch(url); + 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() { + + $('.keystroke').each( function() { + let keystrokeElement = $(this); + let keystroke = keystrokeElement.text(); + if (keystroke.length == 0) + return; // No Keybinding. + let keyaction = function() { + keystrokeElement.click(); + }; + // Keybinding ausfuehren. + $(document).bind('keydown', keystroke, keyaction ); + } ); + } + + + /** + * Registriert alle Events, die in der Workbench laufen sollen. + */ + initializeEvents() { + + let closeMenu = function() { + // Mit der Maus irgendwo hin geklickt, das Menü muss schließen. + $('body').click( function() { + //$('.toolbar-icon.or-menu-category').parents('.or-menu').removeClass('menu--is-open'); + $('.or-menu').removeClass('menu--is-open'); + }); + }; + closeMenu(); + + + + let closeMobileNavigation = function() { + // Mobile navigation must close on a click on the workbench + $('.or-act-navigation-close').click( function() { + $('.or-workbench-navigation').removeClass('workbench-navigation--is-open'); + $('.or-workbench').removeClass('workbench--navigation-is-open'); + }); + }; + closeMobileNavigation(); + + let closeDesktopNavigation = function() { + + // Handler for desktop navigation + $('.or-workbench-title .or-act-nav-small').click(function () { + $('.or-workbench').addClass('workbench--navigation-is-small'); + $('.or-workbench-navigation').addClass('workbench-navigation--is-small'); + }); + }; + closeDesktopNavigation(); + + + let registerGlobalSearch = function() { + $('.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: 'or-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( function() { + $('.or-search .or-title-input').val('').change(); + } ); + }; + registerGlobalSearch(); + + + 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 ); + + /** + * 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().append( 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 = './?action=tree&subaction=branch&id=0&type='+type; + let $targetElement = $(this); + + let response = await fetch( loadBranchUrl ); + let html = await response.text(); + + // Den neuen Unter-Zweig erzeugen. + let $ul = $('<ul class="or-navtree-list" />'); + $ul.appendTo( $targetElement.empty() ).append( 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 ) { + + // Die Section deaktivieren, wenn die View keinen Inhalt hat. + var section = $(viewEl).closest('section'); + + //var viewHasContent = $(viewEl).children().length > 0; + //section.toggleClass('disabled',!viewHasContent); + section.toggleClass('is-empty',$(viewEl).is(':empty')); + + /* + if ( ! $(viewEl).is(':empty') ) + section.slideDown('fast'); + else + section.slideUp('fast');*/ + + // Untermenüpunkte aus der View in das Fenstermenü kopieren... + //$(viewEl).closest('div.panel').find('div.header div.dropdown div.entry.perview').remove(); // Alte Einträge löschen + + // 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 ); + load + .then( response => response.text() ) + .then( html => { + + // Den neuen Unter-Zweig erzeugen. + let $ul = $('<ul class="or-navtree-list" />'); + $ul.appendTo( $targetElement ).append( 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).parents('.or-menu').toggleClass('menu--is-open'); + }); + + // Mit der Maus überstrichenes Menü aktivieren. + $($element).find('.or-menu-category').mouseover( function() { + + // close other menus. + $(this).parents('.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: 'or-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); + + + } ); + }; + } diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orAutoheight.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orAutoheight.js @@ -7,8 +7,8 @@ export default function() { let resize = function( element ) { - let lines = jQuery(element).val().split("\n").length; - jQuery(element).attr('rows',lines+3); + let lines = $(element).val().split("\n").length; + $(element).attr('rows',lines+3); }; $(this).each(function(i) @@ -16,7 +16,7 @@ export default function() { resize(this); }); - return jQuery(this).keypress(function() + return $(this).keypress(function() { resize(this); }); diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orSearch.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orSearch.js @@ -1,4 +1,5 @@ -import "../jquery.min.js"; +import "../jquery-global.js"; +import WorkbenchNavigator from "../openrat/navigator.js"; /** * Suche mit Dropdown @@ -45,7 +46,7 @@ export default function( options ) ).then( data => { $(dropdownEl).empty(); // Leeren. - for (id in data.output.result) { + for (let id in data.output.result) { let result = data.output.result[id]; // Suchergebnis-Zeile in das Ergebnis schreiben. diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orTree.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orTree.js @@ -50,12 +50,12 @@ export default function(options) // Extra-Id ergänzen. if (typeof extraId === 'string') { - jQuery.each(JSON.parse(extraId), function (name, value) { + $.each(JSON.parse(extraId), function (name, value) { loadBranchUrl = loadBranchUrl + '&' + name + '=' + value; }); } else if (typeof extraId === 'object') { - jQuery.each(extraId, function (name, field) { + $.each(extraId, function (name, field) { loadBranchUrl = loadBranchUrl + '&' + name + '=' + field; }); } diff --git a/modules/template_engine/components/html/component_editor/editor.js b/modules/template_engine/components/html/component_editor/editor.js @@ -1,3 +1,6 @@ + +import '../../../../cms/ui/themes/default/script/jquery-global.js'; + export default function(element ) { $(element).find('textarea').orAutoheight(); @@ -217,10 +220,11 @@ export default function(element ) { } ); // HTML-Editor anzeigen - $(element).find("textarea.or-editor.or-html-editor").each( function() { + $(element).find("textarea.or-editor.or-html-editor").each( async function() { let textarea = this; + let trumbowyg = await import('../../../../editor/trumbowyg/trumbowyg.min.js'); $.trumbowyg.svgPath = './modules/editor/trumbowyg/ui/icons.svg'; $(textarea).trumbowyg();