File modules/template_engine/components/html/component_qrcode/qrcode.js

Last commit: Tue Feb 22 21:37:08 2022 +0100	dankert	Fix: Displaying the QRCode was broken. Now the QR code is styled with CSS :)


     1 import $ from "../../../../cms/ui/themes/default/script/jquery-global.js";
     2 
     3 export default function(element ) {
     4 
     5 	let createQRCode = async function( value,text) {
     6 
     7 		let Kjua = (await import("../../../../cms/ui/themes/default/script/tools/kjua.min.js")).default;
     8 
     9 		let wrapper = $.create('div').addClass('info-popup').addClass('qrcode-value');
    10 
    11 		let element = Kjua( {
    12 			text     : value,
    13 			render   : 'svg',
    14 			mode     :'plain',
    15 			label    : '',
    16 			rounded  : 1,
    17 			fill     : null,
    18 		    back     : null,
    19 		} );
    20 
    21 
    22 		// Title is disturbing the qr-code. Do not inherit it.
    23 		wrapper.attr('title','');
    24 
    25 		// OQuery is not supporting appending SVGs.
    26 		// We must append the SVG to the native HTML element.
    27 		wrapper.get(0).appendChild( element );
    28 
    29 		if   ( text )
    30 			wrapper.append( $.create('small').addClass('qrcode-text').text(text) );
    31 
    32 		return wrapper;
    33 	}
    34 
    35 
    36 	$(element).find('.or-qrcode').click( async function() {
    37 
    38 		let $qrCodeElement = $(this);
    39 
    40 		// Create QRCode on first click.
    41 		if   ( ! $qrCodeElement.children('.or-info-popup').length ) {
    42 
    43 			let qrcodeValue = $qrCodeElement.data('qrcode');
    44 			let qrcodeText  = $qrCodeElement.data('qrcode-text');
    45 
    46 			if   ( $qrCodeElement.children().length > 0 )
    47 				return;
    48 
    49 			$qrCodeElement.append( await createQRCode(qrcodeValue,qrcodeText) );
    50 		}
    51 
    52 		$qrCodeElement.toggleClass('info--open');
    53     	$qrCodeElement.toggleClass('btn--is-active');
    54 	});
    55 
    56 };



Download modules/template_engine/components/html/component_qrcode/qrcode.js


History
Tue, 22 Feb 2022 21:37:08 +0100	dankert	Fix: Displaying the QRCode was broken. Now the QR code is styled with CSS :)
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.
Sat, 27 Mar 2021 11:14:12 +0100	Jan Dankert	Fix: QRCode
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)
Tue, 16 Mar 2021 23:52:22 +0100	Jan Dankert	Refactoring: Use ES6 classes.
Tue, 1 Dec 2020 00:07:39 +0100	Jan Dankert	New: Visibility-Button for password fields, fix: QR-code button for mobile devices.
Sat, 14 Nov 2020 23:13:46 +0100	Jan Dankert	Open the QRcode on click (for touch devices).
Wed, 14 Oct 2020 22:20:22 +0200	Jan Dankert	Refactoring: Renamed component folders, because 'if' is no valid namespace fragment.