commit c4c1daade9149a4c61261f1f25fc6996dab67d67 parent bdb3a209d72d4142532f842cc9c36640c797ac52 Author: Jan Dankert <develop@jandankert.de> Date: Thu, 1 Apr 2021 01:01:54 +0200 New: Some fixes for OQuery, our new selfmade light JQuery replacement. Now the UI is back again. Diffstat:
13 files changed, 152 insertions(+), 89 deletions(-)
diff --git a/modules/cms/ui/themes/default/script/Oquery.js b/modules/cms/ui/themes/default/script/Oquery.js @@ -4,26 +4,34 @@ */ let selector = function ( selector ) { - let node; - if ( typeof selector === 'string' ) - node = document.querySelectorAll(selector); + return new OQuery( document.querySelectorAll(selector) ); else if ( selector instanceof HTMLElement ) - node = [selector]; - else + return new OQuery([selector] ); + else if ( selector instanceof OQuery ) return selector; + else + //console.warn( new Error("Illegal argument '"+selector+"' of type "+(typeof selector)) ); + return new OQuery( [] ); - return new OQuery( node ); } selector.create = function(tagName ) { return new OQuery( [document.createElement( tagName )] ); }; +selector.id = function( id ) { + return new OQuery( [document.getElementById( id )] ); +}; + +selector.one = function( selector ) { + return new OQuery( [document.querySelector( selector )] ); +}; + selector.extend = function() { - for(var i=1; i<arguments.length; i++) - for(var key in arguments[i]) + for(let i=1; i<arguments.length; i++) + for(let key in arguments[i]) if(arguments[i].hasOwnProperty(key)) arguments[0][key] = arguments[i][key]; return arguments[0]; @@ -38,98 +46,142 @@ export class OQuery { constructor( nodeList ) { - this.node = Array.isArray(nodeList) ? nodeList : Array.from(nodeList) + this.nodes = Array.isArray(nodeList) ? nodeList : Array.from(nodeList) + } + + get( idx ) { + return this.nodes[idx]; } + first() { + return new OQuery( this.nodes.length > 0 ? [this.nodes[0]] : [] ); + }; + parent() { - return this.node[0].parentNode; + return new OQuery( this.nodes.map(node => node.parentNode ).filter( node => node !== null ) ); }; closest( selector ) { - return new OQuery( [this.node[0].closest( selector )] ); + return new OQuery( this.nodes.map(node => node.closest( selector ) ).filter( node => node !== null ) ); }; - children() { - return new OQuery( this.node[0].children ); + children( selector ) { + let result = []; + for( let node of this.nodes ) + result = result.concat( Array.from(node.children).filter( node => selector ? node.matches(selector) : true ) ); + return new OQuery( result ); }; find(selector) { - return new OQuery(this.node[0].querySelectorAll(selector)); + let result = []; + for( let node of this.nodes ) + result = result.concat( Array.from(node.querySelectorAll(selector)) ); + return new OQuery( result ); }; - text( value = null ) { + text( value ) { - if ( value ) { - this.node.forEach( node => node.textContent = value ); + if ( typeof value !== 'undefined' ) { + this.nodes.forEach(node => node.textContent = value ); return this; } else { - return this.node[0].textContent; + return this.nodes[0].textContent; } }; addClass( name ) { - this.node.forEach( node => node.classList.add( name ) ); + this.nodes.forEach(node => node.classList.add( name ) ); return this; }; - remove() { - this.node.forEach( node => node.remove() ); + removeClass ( name ) { + + this.nodes.forEach( + node => node.classList.remove( name ) + ); return this; }; hasClass( name ) { - return this.node[0].classList.contains( name ); + for( let node of this.nodes ) + if ( node.classList.contains( name ) ) + return true; + + return false; }; toggleClass( name ) { + if ( this.hasClass( name ) ) + this.removeClass( name ); + else + this.addClass( name ); - this.node.forEach( node => { - if (node.classList.contains( name ) ) - node.classList.remove( name ) - else - node.classList.add( name ) - } ); return this; }; - removeClass ( name ) { - this.node.forEach( - node => node.classList.remove( name ) - ); + remove() { + this.nodes.forEach(node => node.remove() ); return this; }; + + click ( handler ) { - this.node.forEach( node => node.addEventListener( 'click',handler.call(node)) ); + this.on( 'click',handler ); + return this; + }; + dblclick ( handler ) { + this.on( 'dblclick',handler ); + return this; + }; + mouseover( handler ) { + this.on( 'mouseover',handler ); + return this; + }; + keypress( handler ) { + this.on( 'keypress',handler ); + return this; + }; + keyup( handler ) { + this.on( 'keyup',handler ); return this; }; + submit( handler ) { + this.on( 'submit',handler ); + return this; + } on ( event,handler ) { - this.node.forEach( node => node.addEventListener( event,handler.call(node)) ); + if ( typeof handler !== 'undefined') + this.nodes.forEach(node => node.addEventListener( event,(ev) => {handler.call(node,ev)}) ); + else + this.nodes.forEach(node => node.dispatchEvent( new Event(event) ) ); return this; }; each( handler ) { - this.node.forEach( - node => handler.call(node) - ); + let idx = -1; + for( let node of this.nodes ) + if ( handler.call(node,idx,node) === false ) + break; + return this; } hide() { - this.node.forEach( node => node.style.display = 'none' ); + this.nodes.forEach(node => node.style.display = 'none' ); return this; } show() { - this.node.forEach( node => node.style.display = '' ); + this.nodes.forEach(node => node.style.display = '' ); return this; } append( el ) { - this.node.forEach( node => el.node.forEach( elnode => node.appendChild(elnode) ) ); + this.nodes.forEach(node => el.nodes.forEach(elnode => node.appendChild(elnode) ) ); return this; } @@ -139,40 +191,42 @@ export class OQuery { return this; } - attr( name,value = null) { - if ( ! value ) - return this.node[0].getAttribute(name); - else - this.node.forEach( node => node.setAttribute(name,value) ); + attr( name,value ) { + if ( typeof value === 'undefined' ) + return this.nodes.length > 0 ? this.nodes[0].getAttribute(name) : ''; + this.nodes.forEach(node => node.setAttribute(name,value) ); + return this; } - data( name,value = null) { - if ( value === null ) - return this.node[0].dataset[name]; - else - this.node.forEach( node => node.dataset[name] = value ); + data( name,value) { + if ( typeof value === 'undefined' ) + return this.nodes.length > 0 ? this.nodes[0].dataset[name] : ''; + + this.nodes.forEach(node => node.dataset[name] = value ); + return this; } html( value ) { - if ( ! value) - return this.node[0].innerHTML; - else - this.node.forEach( node => node.innerHTML = value ); + if ( typeof value === 'undefined') + return this.nodes.length > 0 ? this.nodes[0].innerHTML : ''; + + this.nodes.forEach(node => node.innerHTML = value ); + return this; } val( value = null ) { if ( value !== null ) { - this.node.forEach( node => node.value = value ); + this.nodes.forEach(node => node.value = value ); return this; } else - return this.node[0].value; + return this.nodes.length > 0 ? this.nodes[0].value : ''; } empty() { - this.node.forEach( node => { + this.nodes.forEach(node => { while (node.firstChild) { node.removeChild(node.firstChild); } @@ -182,7 +236,7 @@ export class OQuery { } change() { - this.node.forEach( node => { + this.nodes.forEach(node => { //node.fireEvent("onchange"); } ); return this; @@ -190,8 +244,11 @@ export class OQuery { is( selector ) { - let el = this.node[0]; - return el.matches(selector) + for( let node of this.nodes ) + if ( node.matches(selector) ) + return true; + + return false; } } \ No newline at end of file diff --git a/modules/cms/ui/themes/default/script/jquery-global.js b/modules/cms/ui/themes/default/script/jquery-global.js @@ -67,3 +67,8 @@ let originalHasClass = OQuery.fn.hasClass; OQuery.fn.hasClass = function (styleClass) { return originalHasClass.call(this,'or-'+styleClass); } + +//let originalToggleClass = OQuery.fn.toggleClass; +//OQuery.fn.toggleClass = function (styleClass) { +// return originalToggleClass.call(this,'or-'+styleClass); +//} diff --git a/modules/cms/ui/themes/default/script/openrat/dialog.js b/modules/cms/ui/themes/default/script/openrat/dialog.js @@ -108,7 +108,7 @@ export default class Dialog { $(document).keyup(this.escapeKeyClosingHandler); // close dialog on click onto the blurred area. - $('.or-dialog-filler,.or-act-dialog-close').off('click').click( function(e) + $('.or-dialog-filler,.or-act-dialog-close').click( function(e) { e.preventDefault(); dialog.close(); diff --git a/modules/cms/ui/themes/default/script/openrat/notice.js b/modules/cms/ui/themes/default/script/openrat/notice.js @@ -84,7 +84,7 @@ export default class Notice { this.element.append( $.create('i').addClass('image-icon').addClass('image-icon--node-open' ).addClass('collapsible--on-open' ) ); this.element.append( $.create('i').addClass('image-icon').addClass('image-icon--node-closed').addClass('collapsible--on-closed') ); - this.element.append( $.create('span').addClass('or-notice-text').addClass('or-collapsible-act-switch').text( Notice.htmlEntities(this.msg) ) ); + this.element.append( $.create('span').addClass('notice-text').addClass('collapsible-act-switch').text( Notice.htmlEntities(this.msg) ) ); if (this.name) { this.element.append( $.create('div').addClass('notice-name').addClass('collapsible-value').append( $.create('a').addClass('act-clickable').attr('href',WorkbenchNavigator.createShortUrl(this.typ, this.id)).data('type',open).data('action',this.typ).data('id',this.id).append( $.create('i').addClass('notice-action-full').addClass('image-icon').addClass('image-icon--action-' + this.typ )).append( $.create('span').text(this.name ))).orLinkify() ); diff --git a/modules/cms/ui/themes/default/script/openrat/workbench.js b/modules/cms/ui/themes/default/script/openrat/workbench.js @@ -74,7 +74,7 @@ export default class Workbench { this.initializePingTimer(); this.initializeDirtyWarning(); - Workbench.registerOpenClose( $('.or-collapsible') ); + //Workbench.registerOpenClose( $('.or-collapsible') ); console.info('Application started'); } @@ -587,7 +587,7 @@ export default class Workbench { * @param id */ function openNavTree(action, id) { - let $navControl = $('.or-link[data-action='+action+'][data-id='+id+']').closest('.or-navtree-node'); + 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(); } @@ -596,7 +596,7 @@ export default class Workbench { .then( response => response.text() ) .then( data => { - $('.or-breadcrumb').empty().append( data ).find('.or-act-clickable').orLinkify(); + $('.or-breadcrumb').empty().html( data ).find('.or-act-clickable').orLinkify(); // Open the path in the navigator tree $('.or-breadcrumb a').each( function () { @@ -663,15 +663,15 @@ export default class Workbench { $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 loadBranchUrl = View.createUrl('tree','branch',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 ); + let $ul = $.create('ul' ).addClass('navtree-list'); + $ul.appendTo( $targetElement.empty() ).html( html ); $ul.find('li').orTree( { 'openAction': function( name,action,id) { @@ -701,7 +701,7 @@ export default class Workbench { Callback.afterViewLoadedHandler.add( function(viewEl ) { // Die Section deaktivieren, wenn die View keinen Inhalt hat. - var section = $(viewEl).closest('section'); + let section = $(viewEl).closest('section'); //var viewHasContent = $(viewEl).children().length > 0; //section.toggleClass('disabled',!viewHasContent); @@ -769,7 +769,7 @@ export default class Workbench { .then( html => { // Den neuen Unter-Zweig erzeugen. - let $ul = $('<ul class="or-navtree-list" />'); + let $ul = $.create('ul' ).addClass('navtree-list'); $ul.appendTo( $targetElement ).append( html ); $ul.find('li').orTree( @@ -811,14 +811,14 @@ export default class Workbench { // Mit der Maus geklicktes Menü aktivieren. $($element).find('.or-menu-category').click( function(event) { event.stopPropagation(); - $(this).parents('.or-menu').toggleClass('menu--is-open'); + $(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).parents('.or-menu').find('.or-menu-category').removeClass('menu-category--is-open'); + $(this).closest('.or-menu').find('.or-menu-category').removeClass('menu-category--is-open'); // open the mouse-overed menu. $(this).addClass('menu-category--is-open'); }); diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orLinkify.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orLinkify.js @@ -20,11 +20,11 @@ export default function( options ) // Disable all links in this linkified area. // The user is already able to open the link in a new tab. if ( $(this).is('a') ) - $(this).click( function(event) { + $(this).addClass('act-prevented-link').click( function(event) { event.preventDefault(); } ); else - $(this).find('a').click( function(event) { + $(this).find('a').addClass('act-prevented-sublink').click( function(event) { event.preventDefault(); } ); 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 @@ -12,7 +12,7 @@ import Notice from "../openrat/notice.js"; export default function(options) { // Create some defaults, extending them with any options that were provided - var settings = $.extend( { + let settings = $.extend( { 'openAction' : function(name,action,id) { } }, options); @@ -39,8 +39,7 @@ export default function(options) } else { // Pfad ist geschlossen -> öffnen. - $(treeEl).closest('div.view').addClass('loader'); - + $(treeEl).closest('div.or-view').addClass('loader'); let $link = $node.find('a'); //let type = $link.data('extra-type'); let id = $link.data('id'); @@ -49,14 +48,12 @@ export default function(options) let loadBranchUrl = './?action=tree&subaction=branch&id=' + id + ''; // Extra-Id ergänzen. - if (typeof extraId === 'string') { - $.each(JSON.parse(extraId), function (name, value) { - loadBranchUrl = loadBranchUrl + '&' + name + '=' + value; - }); - } - else if (typeof extraId === 'object') { - $.each(extraId, function (name, field) { - loadBranchUrl = loadBranchUrl + '&' + name + '=' + field; + if (typeof extraId === 'string') + extraId = JSON.parse(extraId); + + if (typeof extraId === 'object') { + Object.keys(extraId).forEach( (name)=> { + loadBranchUrl = loadBranchUrl + '&' + name + '=' + extraId[name]; }); } else { @@ -71,10 +68,10 @@ export default function(options) .then( html => { // Den neuen Unter-Zweig erzeugen. - let $ul = $('<ul class="or-navtree-list" />'); + let $ul = $.create('ul' ).addClass('navtree-list'); $(treeEl).append($ul); - $ul.append( html ); + $ul.html( html ); $ul.find('li').orTree(settings); // All subnodes are getting event listener for open/close /* macht linkify schon diff --git a/modules/template_engine/components/html/component_editor/editor.js b/modules/template_engine/components/html/component_editor/editor.js @@ -1,5 +1,5 @@ -import '../../../../cms/ui/themes/default/script/jquery-global.js'; +import $ from '../../../../cms/ui/themes/default/script/jquery-global.js'; export default function(element ) { diff --git a/modules/template_engine/components/html/component_group/group.js b/modules/template_engine/components/html/component_group/group.js @@ -1,4 +1,5 @@ import Workbench from "../../../../cms/ui/themes/default/script/openrat/workbench.js"; +import $ from "../../../../cms/ui/themes/default/script/jquery-global.js"; /** * open/close handler for groups. diff --git a/modules/template_engine/components/html/component_link/link.js b/modules/template_engine/components/html/component_link/link.js @@ -1,3 +1,4 @@ +import $ from '../../../../cms/ui/themes/default/script/jquery-global.js'; export default function(element ) { diff --git a/modules/template_engine/components/html/component_qrcode/qrcode.js b/modules/template_engine/components/html/component_qrcode/qrcode.js @@ -1,4 +1,4 @@ -import "../../../../cms/ui/themes/default/script/jquery-global.js"; +import $ from "../../../../cms/ui/themes/default/script/jquery-global.js"; export default function(element ) { diff --git a/modules/template_engine/components/html/component_table/table.js b/modules/template_engine/components/html/component_table/table.js @@ -1,3 +1,4 @@ +import $ from '../../../../cms/ui/themes/default/script/jquery-global.js'; export default function(element ) { diff --git a/modules/template_engine/components/html/component_upload/upload.js b/modules/template_engine/components/html/component_upload/upload.js @@ -1,4 +1,5 @@ import Workbench from "../../../../cms/ui/themes/default/script/openrat/workbench.js"; +import $ from '../../../../cms/ui/themes/default/script/jquery-global.js'; export default function (element ) {