commit bdb3a209d72d4142532f842cc9c36640c797ac52 parent 0e49a5fd65b833f038a1f8c5d11f603d096fb234 Author: Jan Dankert <develop@jandankert.de> Date: Wed, 31 Mar 2021 01:52:57 +0200 New: Replace JQuery with OQuery, a selfmade light JQuery replacement. Diffstat:
13 files changed, 255 insertions(+), 22 deletions(-)
diff --git a/modules/cms/ui/themes/default/script/Oquery.js b/modules/cms/ui/themes/default/script/Oquery.js @@ -0,0 +1,197 @@ +/** + * OQuery is a very light ES6-ready replacement for JQuery + * + */ +let selector = function ( selector ) { + + let node; + + if ( typeof selector === 'string' ) + node = document.querySelectorAll(selector); + else if ( selector instanceof HTMLElement ) + node = [selector]; + else + return selector; + + return new OQuery( node ); +} + +selector.create = function(tagName ) { + return new OQuery( [document.createElement( tagName )] ); +}; + + +selector.extend = function() { + for(var i=1; i<arguments.length; i++) + for(var key in arguments[i]) + if(arguments[i].hasOwnProperty(key)) + arguments[0][key] = arguments[i][key]; + return arguments[0]; +} + +export default selector; + + +export class OQuery { + + static fn = OQuery.prototype; + + constructor( nodeList ) { + + this.node = Array.isArray(nodeList) ? nodeList : Array.from(nodeList) + } + + parent() { + return this.node[0].parentNode; + }; + + closest( selector ) { + return new OQuery( [this.node[0].closest( selector )] ); + }; + + children() { + return new OQuery( this.node[0].children ); + }; + + find(selector) { + return new OQuery(this.node[0].querySelectorAll(selector)); + }; + + text( value = null ) { + + if ( value ) { + this.node.forEach( node => node.textContent = value ); + return this; + } + else { + return this.node[0].textContent; + } + }; + + addClass( name ) { + this.node.forEach( node => node.classList.add( name ) ); + return this; + }; + + remove() { + this.node.forEach( node => node.remove() ); + return this; + }; + + hasClass( name ) { + return this.node[0].classList.contains( name ); + }; + + toggleClass( 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 ) + ); + return this; + }; + + click ( handler ) { + this.node.forEach( node => node.addEventListener( 'click',handler.call(node)) ); + return this; + }; + + on ( event,handler ) { + this.node.forEach( node => node.addEventListener( event,handler.call(node)) ); + return this; + }; + + each( handler ) { + this.node.forEach( + node => handler.call(node) + ); + return this; + } + + hide() { + this.node.forEach( node => node.style.display = 'none' ); + return this; + } + + show() { + this.node.forEach( node => node.style.display = '' ); + return this; + } + + append( el ) { + this.node.forEach( node => el.node.forEach( elnode => node.appendChild(elnode) ) ); + return this; + } + + appendTo( el ) { + let to = selector( el ); + to.append( this ) + return this; + } + + attr( name,value = null) { + if ( ! value ) + return this.node[0].getAttribute(name); + else + this.node.forEach( node => node.setAttribute(name,value) ); + + } + + data( name,value = null) { + if ( value === null ) + return this.node[0].dataset[name]; + else + this.node.forEach( node => node.dataset[name] = value ); + + } + + html( value ) { + if ( ! value) + return this.node[0].innerHTML; + else + this.node.forEach( node => node.innerHTML = value ); + } + + val( value = null ) { + if ( value !== null ) { + this.node.forEach( node => node.value = value ); + return this; + } + else + return this.node[0].value; + } + + empty() { + this.node.forEach( node => { + while (node.firstChild) { + node.removeChild(node.firstChild); + } + } ); + + return this; + } + + change() { + this.node.forEach( node => { + //node.fireEvent("onchange"); + } ); + return this; + } + + + is( selector ) { + let el = this.node[0]; + return el.matches(selector) + } + +}+ \ 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 @@ -1,3 +1,4 @@ +/* import './jquery.min.js'; let jQuery = $; @@ -32,3 +33,37 @@ let originalHasClass = jQuery.fn.hasClass; jQuery.fn.hasClass = function (styleClass) { return originalHasClass.call(this,'or-'+styleClass); } +*/ + +import $, {OQuery} from './Oquery.js'; + +export default $; + +import autoheight from './plugin/jquery-plugin-orAutoheight.js'; +import button from './plugin/jquery-plugin-orButton.js'; +import linkify from './plugin/jquery-plugin-orLinkify.js'; +import search from './plugin/jquery-plugin-orSearch.js'; +import tree from './plugin/jquery-plugin-orTree.js'; +import toggleAttr from './plugin/jquery-plugin-toggleAttr.js'; + +OQuery.fn.orAutoheight = autoheight; +OQuery.fn.orButton = button; +OQuery.fn.orLinkify = linkify; +OQuery.fn.orSearch = search; +OQuery.fn.orTree = tree; +OQuery.fn.toggleAttr = toggleAttr; + +let originalAddClass = OQuery.fn.addClass; +OQuery.fn.addClass = function (styleClass) { + return originalAddClass.call(this,'or-'+styleClass); +} + +let originalRemoveClass = OQuery.fn.removeClass; +OQuery.fn.removeClass = function (styleClass) { + return originalRemoveClass.call(this,'or-'+styleClass); +} + +let originalHasClass = OQuery.fn.hasClass; +OQuery.fn.hasClass = function (styleClass) { + return originalHasClass.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 @@ -1,4 +1,4 @@ -import '../jquery-global.js'; +import $ from "../jquery-global.js"; import View from './view.js'; import Notice from "./notice.js"; import Workbench from "./workbench.js"; diff --git a/modules/cms/ui/themes/default/script/openrat/form.js b/modules/cms/ui/themes/default/script/openrat/form.js @@ -1,4 +1,4 @@ -import '../jquery-global.js'; +import $ from '../jquery-global.js'; import Workbench from "./workbench.js"; import Notice from "./notice.js"; import Callback from "./callback.js"; diff --git a/modules/cms/ui/themes/default/script/openrat/notice.js b/modules/cms/ui/themes/default/script/openrat/notice.js @@ -1,4 +1,4 @@ -import '../jquery-global.js'; +import $ from '../jquery-global.js'; import Workbench from './workbench.js'; import Callback from "./callback.js"; import WorkbenchNavigator from "./navigator.js"; @@ -29,7 +29,7 @@ export default class Notice { this.log = ''; this.timeout = 0; - this.element = $('<div />') + this.element = $.create('div') .addClass('notice' ) .addClass('notice--is-inactive' ) .addClass('collapsible' ) @@ -72,28 +72,28 @@ export default class Notice { show() { - console.debug('user notice: '+this.msg); + console.debug('user notice: ' + this.msg); let notice = this; this.element.removeClass('notice--is-inactive'); - this.element.appendTo('.or-notice-container'); // Notice anhängen. + this.element.appendTo( $('.or-notice-container') ); // Notice anhängen. - let toolbar = $('<div class="or-notice-toolbar"></div>'); + let toolbar = $.create('div').addClass("notice-toolbar"); toolbar.appendTo(this.element); - toolbar.append('<i class="or-image-icon or-image-icon--menu-close or-act-notice-close"></i>'); + toolbar.append( $.create('i').addClass('image-icon').addClass('image-icon--menu-close').addClass('act-notice-close') ); - this.element.append( $('<i />').addClass('image-icon').addClass('image-icon--node-open' ).addClass('collapsible--on-open' ) ); - this.element.append( $('<i />').addClass('image-icon').addClass('image-icon--node-closed').addClass('collapsible--on-closed') ); - this.element.append('<span class="or-notice-text or-collapsible-act-switch">' + Notice.htmlEntities(this.msg) + '</span>'); + 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) ) ); if (this.name) { - this.element.append( $('<div class="or-notice-name or-collapsible-value"><a class="or-act-clickable" href="' + WorkbenchNavigator.createShortUrl(this.typ, this.id) + '" data-type="open" data-action="' + this.typ + '" data-id="' + this.id + '"><i class="or-notice-action-full or-image-icon or-image-icon--action-' + this.typ + '"></i><span class="">' + this.name + '</span></a></div>').orLinkify() ); + 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() ); } if (this.log) - this.element.append('<div class="or-notice-log or-collapsible-value"><pre>' + Notice.htmlEntities(this.log) + '</pre></div>'); + this.element.append( $.create('div').addClass('notice-log').addClass('collapsible-value').append( $.create('pre').text(Notice.htmlEntities(this.log)))); - this.element.append('<div class="or-notice-date or-collapsible-value">' + new Date().toLocaleTimeString() + '</div>'); + this.element.append( $.create('div').addClass('notice-date').addClass('collapsible-value').text(new Date().toLocaleTimeString())); // Fire onclick-handler diff --git a/modules/cms/ui/themes/default/script/openrat/view.js b/modules/cms/ui/themes/default/script/openrat/view.js @@ -1,4 +1,4 @@ -import '../jquery-global.js'; +import $ from '../jquery-global.js'; import Callback from "./callback.js"; import Form from "./form.js"; import Notice from "./notice.js"; diff --git a/modules/cms/ui/themes/default/script/openrat/workbench.js b/modules/cms/ui/themes/default/script/openrat/workbench.js @@ -485,7 +485,7 @@ export default class Workbench { notice.msg = $(this).text(); notice.show(); - $(this).remove(); + //$(this).remove(); }); } 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 @@ -1,4 +1,4 @@ -import "../jquery.min.js"; +import $ from "../jquery-global.js"; /** * Input-Hints diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orButton.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-orButton.js @@ -1,4 +1,4 @@ -import "../jquery.min.js"; +import $ from "../jquery-global.js"; /** * JQuery-Plugin, enable opening an area. 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 @@ -1,4 +1,4 @@ -import "../jquery.min.js"; +import $ from "../jquery-global.js"; import Workbench from "../openrat/workbench.js"; import Dialog from "../openrat/dialog.js"; 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,4 @@ -import "../jquery-global.js"; +import $ from "../jquery-global.js"; import WorkbenchNavigator from "../openrat/navigator.js"; /** 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 @@ -1,5 +1,5 @@ -import "../jquery.min.js"; +import $ from "../jquery-global.js"; import Workbench from "../openrat/workbench.js"; import Notice from "../openrat/notice.js"; diff --git a/modules/cms/ui/themes/default/script/plugin/jquery-plugin-toggleAttr.js b/modules/cms/ui/themes/default/script/plugin/jquery-plugin-toggleAttr.js @@ -1,4 +1,4 @@ -import "../jquery.min.js"; +import $ from "../jquery-global.js"; export default function(attr, attr1, attr2) { return this.each(function() {