User:Agent Isai/evelution.js

const mwConfig2 = mw.config.get([   "wgNamespaceNumber",    "wgTitle",    "wgCanonicalSpecialPageName",    "wgArticlePath"  ]);

if (mwConfig2.wgNamespaceNumber === -1 && mwConfig2.wgCanonicalSpecialPageName === "Specialpages") { $("#mw-specialpagesgroup-other + .mw-specialpages-list ul").append('' + mw.msg( 'evelution-designer-title' ) + '') }

if (($("body.page-CPE_ThemeDesigner").length) ||	(mwConfig2.wgNamespaceNumber === -1 && mwConfig2.wgTitle === "CPEThemeDesigner") ) {

$.when( mw.loader.using( [ 'mediawiki.jqueryMsg' ] ), $.ready ).then( function {	InitDesigner;   } ); }

});

function InitDesigner { // Change Title $(".evelution-page-header .evelution-title > span").html( mw.msg( 'evelution-designer-title' ) ); $(".link[designer-on]").addClass( 'active' ); // Remove the following things $(".evelution-page-header-contribution, #catlinks, .td-off, .evelution-floating-actions .cpe-floating-button.edit, .evelution-floating-actions .cpe-floating-button.history").remove; // Put new buttons $(".evelution-page-header-contribution-buttons").append(		' ' +		' '	); // Copy theme $(".evelution-page-header-contribution-buttons .designer-buttons").append(		'' +		' ' +		'content_copy' +		' ' +		' ' +		mw.msg( 'evelution-designer-copy' ) +		' ' +		' '	); $(".evelution-page-header-contribution-buttons .designer-buttons .theme-copy-button").click( function(e) { e.preventDefault; CopyTheme; }); // Paste theme $(".evelution-page-header-contribution-buttons .designer-buttons").append(		'' +		' ' +		'content_paste' +		' ' +		' ' +		mw.msg( 'evelution-designer-paste' ) +		' ' +		' '	); $(".evelution-page-header-contribution-buttons .designer-buttons .theme-paste-button").click( function(e) { e.preventDefault; PasteTheme; }); // Applly theme $(".evelution-page-header-contribution-buttons .designer-buttons2").append(		'' +		' ' +		'verified' +		' ' +		' ' +		mw.msg( 'evelution-designer-apply' ) +		' ' +		' '	); $(".evelution-page-header-contribution-buttons .designer-buttons2 .theme-apply-button").click( function(e) { e.preventDefault; ApplyTheme; }); $(".evelution-page-header-contribution-buttons .designer-buttons2").append(		'' +		' ' +		'build' +		' ' +		' ' +		mw.msg( 'evelution-designer-test' ) +		' ' +		' '	); $(".evelution-page-header-contribution-buttons .designer-buttons2 .theme-test-button").click( function(e) { e.preventDefault; TestTheme; }); $(".evelution-page-header-contribution-buttons .designer-buttons2").append(		'' +		' ' +		'undo' +		' ' +		' ' +		mw.msg( 'evelution-designer-clear' ) +		' ' +		' '	); $(".evelution-page-header-contribution-buttons .designer-buttons2 .theme-clear-button").click( function(e) { e.preventDefault; ClearTheme; }).prop('disabled', true);

// Clear out content area $("#mw-content-text").empty.addClass('cpe-theme-designer').attr('style','overflow:visible'); $("#mw-content-text").append(		' ' +		' ' + mw.message( 'evelution-designer-notice' ).text + ' ' +		' ' +		// Body Background Color			' ' +		' ' +

/**/ ' ' +	'	 ' +	'	 ' + ' ' +		' ' +			' Active Window #1 ' + '' + ' ' +					'remove' + ' ' +			' ' +			'' + ' ' +					'check_box_outline_blank' + ' ' +			' ' +			'' + ' ' +					'close' + ' ' +			' ' +		' ' +		' ' +			'Sample Content' + ' ' +	' ' +

' ' +		' ' +			' Active Window #2 ' + '' + ' ' +					'remove' + ' ' +			' ' +			'<button class="maximize title="Restore">' +				'<span style="transform:scaleX(calc(var(--icon-scale) * -1)) scaleY(var(--icon-scale)) rotate(var(--icon-rotate))" class="material-icons cpe-icon cpe-icon-tiny cpe-icon-medium close">' +					'content_copy' +               ' ' +			' ' +			'<button class="close" title="Close">' +				' ' +					'close' +                ' ' +			' ' +		' ' +		' ' +			'Sample Maximized Content' +			' ' +			'I\'m Multiline' +		' ' +	' ' +

' ' +		' ' +			' Active Window #3 ' + '<button class="minimize" title="Minimize">' + ' ' +					'remove' + ' ' +			' ' +			'<button class="fullscreen" title="Enter Fullscreen">' + ' ' +					'fullscreen' + ' ' +			' ' +			'<button class="maximize" title="Maximize">' + ' ' +					'check_box_outline_blank' + ' ' +			' ' +			'<button class="close" title="Close">' + ' ' +					'close' + ' ' +			' ' +		' ' +		' ' +			'Sample Content ready for fullscreen' + ' ' +			'I\'m a Static Window' + ' ' +	' ' +

' ' +		' ' +			' Active Window #4 ' + '<button class="minimize" title="Minimize">' + ' ' +					'remove' + ' ' +			' ' +			'<button class="fullscreen" title="Exit Fullscreen">' + ' ' +					'fullscreen_exit' + ' ' +			' ' +			'<button class="close" title="Close">' + ' ' +					'close' + ' ' +			' ' +		' ' +		' ' +			'Sample Content ready for fullscreen' + ' ' +			'I\'m a Static Window' + ' ' +	' ' +

' ' +		' ' +			' Active Window #5 ' + '<button class="close" title="Close">' + ' ' +					'close' + ' ' +			' ' +		' ' +		' ' +			'Sample Message' + ' ' +				'<button class="ui-button cpe-button">OK ' + ' ' +		' ' +	' ' +

' ' +		' ' +			' Inactive Window ' + '<button class="minimize" title="Minimize">' + ' ' +					'remove' + ' ' +			' ' +			'<button class="maximize" title="Maximize">' + ' ' +					'check_box_outline_blank' + ' ' +			' ' +			'<button class="close" title="Close">' + ' ' +					'close' + ' ' +			' ' +		' ' +		' ' +			'Sample Content' + ' ' +	' ' + ' ' + /**/		' ' +		' ' +			'<div class="preview-theme-wrapper custom-theme" force-active style="margin:0 auto; background-color:var(--canvas-secondary-background-color);">' + '  ' +				' ' +					' ' +						'  ' +					' ' +					' ' +						'  ' +					' ' +				' ' +				' Custom Theme ' + ' ' +		' ' +		' ' +		' ' +			' Base Color ' + ' Unaccented Color ' + ' Alternate Color ' + ' Alert Background Color ' + ' Warning Background Color ' + ' Success Background Color ' + ' Message Background Color ' + ' ' +			' Base Color ' + ' Unaccented Color ' + ' Alternate Color ' + ' Alert Background Color ' + ' Warning Background Color ' + ' Success Background Color ' + ' Message Background Color ' + ' ' +			' Base Color ' + ' Unaccented Color ' + ' Alternate Color ' + ' Alert Background Color ' + ' Warning Background Color ' + ' Success Background Color ' + ' Message Background Color ' + ' ' +		' '	);	SelectInputs;	UpdateContrastRatios;   var pageTitle = $("#firstheading > span").html;    var title = mw.message( 'pagetitle' ).text;    document.title = title.replace("$1", pageTitle); }

function ApplyTheme { // Copies theme to clipboard if (document.querySelector('.wikitable #auto1').checked) { var autocolor1 = 'auto'; } else { var autocolor1 = $('#bodybg2').val; }	if (document.querySelector('.wikitable #auto2').checked) { var autocolor2 = 'auto'; } else { var autocolor2 = $('#pagebg2').val; }	if (document.querySelector('.wikitable #auto3').checked) { var autocolor3 = 'auto'; } else { var autocolor3 = $('#pagebg3').val; }	if (document.querySelector('.wikitable #auto4').checked) { var autocolor4 = 'auto'; } else { var autocolor4 = $('#qaccentcolor').val; }	if (document.querySelector('.wikitable #auto5').checked) { var autocolor5 = 'auto'; } else { var autocolor5 = $('#taccentcolor').val; }	if (document.querySelector('.wikitable #auto6').checked) { var autocolor6 = 'auto'; } else { var autocolor6 = $('#accentcolor').val; }	if ( ( ( $("#bodyimage").val.startsWith('url("') ) && ( $("#bodyimage").val.endsWith('")') ) ) ||		 ( ( $("#bodyimage").val.startsWith('url(') ) && ( $("#bodyimage").val.endsWith(')') ) ) ) { var image = $("#bodyimage").val; } else { var image = 'url("' + $("#bodyimage").val + '")'; }   if ( $('#firstfont').val.length === 0) { var customfont2 = '""'; } else { var customfont2 = $('#firstfont').val; }   if ( $('#secondfont').val.length === 0) { var customfont = '""'; } else { var customfont = $('#secondfont').val; }		result = '\n/* Community Theme */\n' + '.theme-' + window.MW18ActiveTheme + '.visualcolors-standard {\n' + // Beginning '--desktop-background-image:' + image + ';\n' + '--desktop-background-image-filter:' + $('#bodyimagefilter').val + ';\n' + '--desktop-background-color:' + $('#bodybg').val + ';\n' + '--desktop-text-background-color:' + autocolor1 + ';\n' + '--desktop-background-mode:' + $('.bg_mode .cpe-select__value').attr('value') + ';\n' + '--desktop-background-horizontal-alignment:' + $('.bg_align2 .cpe-select__value').attr('value') + ';\n' + '--desktop-background-vertical-alignment:' + $('.bg_align .cpe-select__value').attr('value') + ';\n' + '--desktop-background-size:' + $('.bg_size .cpe-select__value').attr('value') + ';\n' + '--desktop-background-no-horizontal-tiling:' + (!( document.querySelector('input#tilingH').checked )) + ';\n' + '--desktop-background-no-vertical-tiling:' + (!( document.querySelector('input#tilingV').checked )) + ';\n' + '--canvas-background-color:' + $('#pagebg').val + ';\n' + '--inactive-text-background-color:' + autocolor2 + ';\n' + '--canvas-text-background-color:' + autocolor3 + ';\n' + '--highlight-background-color:' + autoclor6 + ';\n' + '--hyperlink-background-color:' + $('#saccentcolor').val + ';\n' + '--active-title-background-color:' + autocolor5 + ';\n' + '--inactive-title-background-color:' + autocolor4 + ';\n' + '--custom-font:' + customfont2 + ';\n' + '--custom-secondary-font:' + customfont + ';\n' + '--border-radius:' + $('#border-radius').val + "px" + ';\n' + '--icon-filter:' + $('#filter').val + ';\n' + '--icon-filter-hover:' + $('#filter2').val + ';\n' + '--icon-filter-duration:' + $('#filter3').val + "ms" + ';\n' + '--icon-filter-delay:' + $('#filter4').val + "ms" + ';\n' + '--system-acryllic-opacity:' + $('#aopacity').val + ';\n' + '}\n' // Ending

/*	edit.js

MediaWiki API Demos Demo of `Edit` module: POST request to edit a page

MIT License

var params = { action: 'edit', title: 'MediaWiki:Evelution.css', appendtext: result, minor: 'true', bot: 'true', summary: 'Inserting Evelution Theme ' + window.MW18ActiveTheme, recreate: 'true', format: 'json' },	api = new mw.Api;

api.postWithToken( 'csrf', params ).done( function ( data ) { AddFloatingBanner('Succesfully applied Theme ' +  window.MW18ActiveTheme + ' to MediaWiki:Evelution.css.','success'); } ).fail( function (data) { AddFloatingBanner('Failed to apply Theme '  +  window.MW18ActiveTheme + ' to MediaWiki:Evelution.css as page couldn\'t be edited.','alert'); } );

}

function CopyTheme { // Copies theme to clipboard if (document.querySelector('.wikitable #auto1').checked) { var autocolor1 = 'auto'; } else { var autocolor1 = $('#bodybg2').val; }	if (document.querySelector('.wikitable #auto2').checked) { var autocolor2 = 'auto'; } else { var autocolor2 = $('#pagebg2').val; }	if (document.querySelector('.wikitable #auto3').checked) { var autocolor3 = 'auto'; } else { var autocolor3 = $('#pagebg3').val; }	if (document.querySelector('.wikitable #auto4').checked) { var autocolor4 = 'auto'; } else { var autocolor4 = $('#qaccentcolor').val; }	if (document.querySelector('.wikitable #auto5').checked) { var autocolor5 = 'auto'; } else { var autocolor5 = $('#taccentcolor').val; }	if (document.querySelector('.wikitable #auto6').checked) { var autocolor6 = 'auto'; } else { var autocolor6 = $('#accentcolor').val; }	if ( ( ( $("#bodyimage").val.startsWith('url("') ) && ( $("#bodyimage").val.endsWith('")') ) ) ||		 ( ( $("#bodyimage").val.startsWith('url(') ) && ( $("#bodyimage").val.endsWith(')') ) ) ) { var image = $("#bodyimage").val; } else { var image = 'url("' + $("#bodyimage").val + '")'; }   if ( $('#firstfont').val.length === 0) { var customfont2 = '""'; } else { var customfont2 = $('#firstfont').val; }   if ( $('#secondfont').val.length === 0) { var customfont = '""'; } else { var customfont = $('#secondfont').val; }		result = '.theme-' + window.MW18ActiveTheme + '.visualcolors-standard {\n' + // Beginning '--desktop-background-image:' + image + ';\n' + '--desktop-background-image-filter:' + $('#bodyimagefilter').val + ';\n' + '--desktop-background-color:' + $('#bodybg').val + ';\n' + '--desktop-text-background-color:' + autocolor1 + ';\n' + '--desktop-background-mode:' + $('.bg_mode .cpe-select__value').attr('value') + ';\n' + '--desktop-background-horizontal-alignment:' + $('.bg_align2 .cpe-select__value').attr('value') + ';\n' + '--desktop-background-vertical-alignment:' + $('.bg_align .cpe-select__value').attr('value') + ';\n' + '--desktop-background-size:' + $('.bg_size .cpe-select__value').attr('value') + ';\n' + '--desktop-background-no-horizontal-tiling:' + (!( document.querySelector('input#tilingH').checked )) + ';\n' + '--desktop-background-no-vertical-tiling:' + (!( document.querySelector('input#tilingV').checked )) + ';\n' + '--canvas-background-color:' + $('#pagebg').val + ';\n' + '--inactive-text-background-color:' + autocolor2 + ';\n' + '--canvas-text-background-color:' + autocolor3 + ';\n' + '--highlight-background-color:' + autocolor6 + ';\n' + '--hyperlink-background-color:' + $('#saccentcolor').val + ';\n' + '--active-title-background-color:' + autocolor5 + ';\n' + '--inactive-title-background-color:' + autocolor4 + ';\n' + '--custom-font:' + customfont2 + ';\n' + '--custom-secondary-font:' + customfont + ';\n' + '--border-radius:' + $('#border-radius').val + "px" + ';\n' + '--icon-filter:' + $('#filter').val + ';\n' + '--icon-filter-hover:' + $('#filter2').val + ';\n' + '--icon-filter-duration:' + $('#filter3').val + "ms" + ';\n' + '--icon-filter-delay:' + $('#filter4').val + "ms" + ';\n' + '--system-acryllic-opacity:' + $('#aopacity').val + ';\n' + '}' // Ending if (navigator.clipboard) { navigator.clipboard.writeText(result).then(function {			 AddFloatingBanner('Successfully copied CPE Framework theme to Clipboard','success'); // alert('Successfully copied CPE Framework theme to Clipboard');			}, function {			 AddFloatingBanner('Failed to copy CPE Framework theme to Clipboard. You can, however find the generated theme code below the Theme Designer applet so that you will be able to select it and copy that to the clipboard.','alert');			$("div.theme-code").empty.append( ' Code ' + ' ' +				result + ' '			);			});		} else { AddFloatingBanner('Failed to copy CPE Framework theme to Clipboard. You can, however find the generated theme code below the Theme Designer applet so that you will be able to select it and copy that to the clipboard.','alert'); $("div.theme-code").empty.append(				' Code ' +				' ' +				result +				' '			); } }

function PasteTheme { // Pastes theme // Body BG	$('#bodybg').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-color") ); // Body Header Text if (getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-text-background-color") === 'auto' ) { document.querySelector('.wikitable #auto1').checked = true; } else { document.querySelector('.wikitable #auto1').checked = false; $('#bodybg2').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-text-background-color") ); }	$('.wikitable #bodybg2').prop('disabled',(document.querySelector('.wikitable #auto1').checked) ); // Body Image $('#bodyimage').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-image") ); // Body Image Opacity $('#bodyimagefilter').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-image-filter") ); // Body Image Mode bg_mode = ["Standard", "Half", "Full"][["standard", "half", "full"].indexOf( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-mode") ) ]	$('.bg_mode .cpe-select__value').attr('value', getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-mode") );	$('.bg_mode .cpe-select__value').html( bg_mode );	// Body Image Alignment V	bg_align = ["Top", "Middle", "Bottom"][["top", "center", "bottom"].indexOf( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-vertical-alignment") ) ]	$('.bg_align .cpe-select__value').attr('value', getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-vertical-alignment") );	$('.bg_align .cpe-select__value').html( bg_align );	// Body Image Alignment H	bg_align2 = ["Left", "Middle", "Right"][["left", "center", "right"].indexOf( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-horizontal-alignment") ) ]	$('.bg_align2 .cpe-select__value').attr('value', getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-horizontal-alignment") );	$('.bg_align2 .cpe-select__value').html( bg_align2 );	// Body Image Size	bg_size = ["Cover", "Contain", "Stretched", "Full"][["cover", "contain", "stretched", "full"].indexOf( getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-size") ) ]	$('.bg_size .cpe-select__value').attr('value', getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-size") )	$('.bg_size .cpe-select__value').html( bg_size );	// Body Image Tiling	document.querySelector('input#tilingH').checked = (getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-no-horizontal-tiling") === 'false');	document.querySelector('input#tilingV').checked = (getComputedStyle(document.querySelector('html')).getPropertyValue("--desktop-background-no-vertical-tiling") === 'false');	// Page BG	$('#pagebg').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--canvas-background-color") );	// Page Text BG	if (getComputedStyle(document.querySelector('html')).getPropertyValue("--canvas-text-background-color") === 'auto' ) {		document.querySelector('.wikitable #auto3').checked = true;	} else {		document.querySelector('.wikitable #auto3').checked = false;		$('#pagebg3').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--canvas-text-background-color") );	}	$('.wikitable #pagebg3').prop('disabled',(document.querySelector('.wikitable #auto3').checked) );	// Page Border BG	if (getComputedStyle(document.querySelector('html')).getPropertyValue("--inactive-text-background-color") === 'auto' ) {		document.querySelector('.wikitable #auto2').checked = true;	} else {		document.querySelector('.wikitable #auto2').checked = false;		$('#pagebg2').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--inactive-text-background-color") );	}	$('.wikitable #pagebg2').prop('disabled',(document.querySelector('.wikitable #auto2').checked) );	// Anchor BG	$('#saccentcolor').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--hyperlink-background-color") );	// Accent BG	if (getComputedStyle(document.querySelector('html')).getPropertyValue("--highlight-background-color") === 'auto' ) {		document.querySelector('.wikitable #auto6').checked = true;	} else {		document.querySelector('.wikitable #auto6').checked = false;		$('#accentcolor').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--highlight-background-color") );	}	$('.wikitable #accentcolor').prop('disabled',(document.querySelector('.wikitable #auto6').checked) );	// Caret Color	if (getComputedStyle(document.querySelector('html')).getPropertyValue("--active-title-background-color") === 'auto' ) {		document.querySelector('.wikitable #auto5').checked = true;	} else {		document.querySelector('.wikitable #auto5').checked = false;		$('#taccentcolor').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--active-title-background-color") );	}	$('.wikitable #taccentcolor').prop('disabled',(document.querySelector('.wikitable #auto5').checked) );	// Quaternary Accent Color	if (getComputedStyle(document.querySelector('html')).getPropertyValue("--inactive-title-background-color") === 'auto' ) {		document.querySelector('.wikitable #auto4').checked = true;	} else {		document.querySelector('.wikitable #auto4').checked = false;		$('#qaccentcolor').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--inactive-title-background-color") );	}	$('.wikitable #qaccentcolor').prop('disabled',(document.querySelector('.wikitable #auto4').checked) );	// Border Radius	$('#border-radius').val( parseInt(getComputedStyle(document.querySelector('html')).getPropertyValue("--border-radius")) );	// Primary Font	var pfont = getComputedStyle(document.querySelector('html')).getPropertyValue("--custom-font");	if (pfont == '""') {		var pfont = ;	}	$('#firstfont').val( pfont );	// Secondary Font	var sfont = getComputedStyle(document.querySelector('html')).getPropertyValue("--custom-secondary-font");	if (sfont == '""') {		var sfont = ;	}	$('#secondfont').val( sfont );	// Filter	$('#filter').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--icon-filter") );	// Filter (Hover)	$('#filter2').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--icon-filter-hover") );	// Filter Duration	$('#filter3').val( parseInt(getComputedStyle(document.querySelector('html')).getPropertyValue("--icon-filter-duration")) );	// Filter Delay	$('#filter4').val( parseInt(getComputedStyle(document.querySelector('html')).getPropertyValue("--icon-filter-delay")) );	// Acryllic Opacity	$('#aopacity').val( getComputedStyle(document.querySelector('html')).getPropertyValue("--system-acryllic-opacity") );	UpdateContrastRatios;	UpdateRangeInputs; }

function TestTheme { // Tests theme if (!($("body.td-testing-on").length)) { $("body").addClass('td-testing-on'); }	$(".evelution-page-header-contribution-buttons .designer-buttons2 .theme-clear-button").prop('disabled', false); $(".evelution-page-header-contribution-buttons .designer-buttons2 .theme-test-button").prop('disabled', true); document.querySelector('.focus-overlay').focus; if (document.querySelector('.wikitable #auto1').checked) { var autocolor1 = 'auto'; } else { var autocolor1 = $('#bodybg2').val; }	if (document.querySelector('.wikitable #auto2').checked) { var autocolor2 = 'auto'; } else { var autocolor2 = $('#pagebg2').val; }	if (document.querySelector('.wikitable #auto3').checked) { var autocolor3 = 'auto'; } else { var autocolor3 = $('#pagebg3').val; }	if (document.querySelector('.wikitable #auto4').checked) { var autocolor4 = 'auto'; } else { var autocolor4 = $('#qaccentcolor').val; }	if (document.querySelector('.wikitable #auto5').checked) { var autocolor5 = 'auto'; } else { var autocolor5 = $('#taccentcolor').val; }	if (document.querySelector('.wikitable #auto6').checked) { var autocolor6 = 'auto'; } else { var autocolor6 = $('#accentcolor').val; }	if ( ( ( $("#bodyimage").val.startsWith('url("') ) && ( $("#bodyimage").val.endsWith('")') ) ) ||		 ( ( $("#bodyimage").val.startsWith('url(') ) && ( $("#bodyimage").val.endsWith(')') ) ) ) { var image = $("#bodyimage").val; } else { var image = 'url("' + $("#bodyimage").val + '")'; }   if ( $('#firstfont').val.length === 0) { var customfont2 = '""'; } else { var customfont2 = $('#firstfont').val; }   if ( $('#secondfont').val.length === 0) { var customfont = '""'; } else { var customfont = $('#secondfont').val; }		result = ':root {\n' + // Beginning '--desktop-background-image:' + image + '!important;\n' + '--desktop-background-image-filter:' + $('#bodyimagefilter').val + '!important;\n' + '--desktop-background-color:' + $('#bodybg').val + '!important;\n' + '--desktop-text-background-color:' + autocolor1 + '!important;\n' + '--desktop-background-mode:' + $('.bg_mode .cpe-select__value').attr('value') + '!important;\n' + '--desktop-background-horizontal-alignment:' + $('.bg_align2 .cpe-select__value').attr('value') + '!important;\n' + '--desktop-background-vertical-alignment:' + $('.bg_align .cpe-select__value').attr('value') + '!important;\n' + '--desktop-background-size:' + $('.bg_size .cpe-select__value').attr('value') + '!important;\n' + '--desktop-background-no-horizontal-tiling:' + (!( document.querySelector('input#tilingH').checked )) + '!important;\n' + '--desktop-background-no-vertical-tiling:' + (!( document.querySelector('input#tilingV').checked )) + '!important;\n' + '--canvas-background-color:' + $('#pagebg').val + '!important;\n' + '--inactive-text-background-color:' + autocolor2 + '!important;\n' + '--canvas-text-background-color:' + autocolor3 + '!important;\n' + '--highlight-background-color:' + autocolor6 + '!important;\n' + '--hyperlink-background-color:' + $('#saccentcolor').val + '!important;\n' + '--active-title-background-color:' + autocolor5 + '!important;\n' + '--inactive-title-background-color:' + autocolor4 + '!important;\n' + '--custom-font:' + customfont2 + '!important;\n' + '--custom-secondary-font:' + customfont + '!important;\n' + '--border-radius:' + $('#border-radius').val + "px" + '!important;\n' + '--icon-filter:' + $('#filter').val + '!important;\n' + '--icon-filter-hover:' + $('#filter2').val + '!important;\n' + '--icon-filter-duration:' + $('#filter3').val + "ms" + '!important;\n' + '--icon-filter-delay:' + $('#filter4').val + "ms" + '!important;\n' + '--system-acryllic-opacity:' + $('#aopacity').val + '!important;\n' + '}' // Ending document.querySelector("#mw-content-text .theme-designer-css").innerHTML = result; ColorUpdate(true,true); }

function UpdateContrastRatios { var pagebg = $('#pagebg').val; var pagebg2 = $("#pagebg2").val; var pagebg3 = $("#pagebg3").val; var saccentcolor = $("#saccentcolor").val; var accentcolor = $("#accentcolor").val; if (document.querySelector('.wikitable #auto2').checked) { $('#pagebg2-pagebg-test').val('21'); } else { $('#pagebg2-pagebg-test').val( chroma.contrast(pagebg, pagebg2) - 1.25 ); }	if (document.querySelector('.wikitable #auto3').checked) { $('#pagebg3-pagebg-test').val('21'); } else { $('#pagebg3-pagebg-test').val( chroma.contrast(pagebg, pagebg3) - 3 ); }	$('#saccentcolor-pagebg-test').val( chroma.contrast(pagebg, saccentcolor) - 3 ); if (document.querySelector('.wikitable #auto6').checked) { $('#accentcolor-pagebg-test').val('21'); } else { $('#accentcolor-pagebg-test').val( chroma.contrast(pagebg, accentcolor) - 1.25 ); }	var progresses = document.querySelectorAll('progress'); progresses.forEach(function(x) {		x.style.setProperty("--range-percent", (( ((x.getAttribute('value')) - 0 ) * 100) / (x.getAttribute('max') - 0) ) + '%'  );	});

}

function TestDynamicTheme { UpdateContrastRatios; if ($("body.td-testing-on").length) { TestTheme; } }

function ClearTheme { if ($("body.td-testing-on").length) { $("body").removeClass('td-testing-on'); }	// Tests theme $(".evelution-page-header-contribution-buttons .designer-buttons2 .theme-clear-button").prop('disabled', true); $(".evelution-page-header-contribution-buttons .designer-buttons2 .theme-test-button").prop('disabled', false); document.querySelector('.focus-overlay').focus; document.querySelector("#mw-content-text .theme-designer-css").innerHTML = ''; ColorUpdate(true,true);

}

function SelectInputs { /* Select Inputs */ $('.wikitable #tilingV').click(							function(e) {								e.preventDefault								TestDynamicTheme;							}  						); $('.wikitable #tilingH').click(							function(e) {								e.preventDefault								TestDynamicTheme;							}  						); $('.wikitable #auto1').click(							function(e) {								e.preventDefault								$('.wikitable #bodybg2').prop('disabled',(document.querySelector('.wikitable #auto1').checked) );								TestDynamicTheme;							}  						); $('.wikitable #auto2').click(							function(e) {								e.preventDefault								$('.wikitable #pagebg2').prop('disabled',(document.querySelector('.wikitable #auto2').checked) );								TestDynamicTheme;							}  						); $('.wikitable #auto3').click(							function(e) {								e.preventDefault								$('.wikitable #pagebg3').prop('disabled',(document.querySelector('.wikitable #auto3').checked) );								TestDynamicTheme;							}  						); $('.wikitable #auto4').click(							function(e) {								e.preventDefault								$('.wikitable #qaccentcolor').prop('disabled',(document.querySelector('.wikitable #auto4').checked) );								TestDynamicTheme;							}  						); $('.wikitable #auto5').click(							function(e) {								e.preventDefault								$('.wikitable #taccentcolor').prop('disabled',(document.querySelector('.wikitable #auto5').checked) );								TestDynamicTheme;							}  						); $('.wikitable #auto6').click(							function(e) {								e.preventDefault								$('.wikitable #accentcolor').prop('disabled',(document.querySelector('.wikitable #auto6').checked) );								TestDynamicTheme;							}  						);

// UpdateRangeInputs; var ranges = document.querySelectorAll('input[type="range"]'); ranges.forEach(function(x) {		x.style.setProperty("--range-percent", (( ((x.value) - x.getAttribute('min') ) * 100) / (x.getAttribute('max') - x.getAttribute('min')) ) + '%'  );	});

var progresses = document.querySelectorAll('progress'); progresses.forEach(function(x) {		x.style.setProperty("--range-percent", (( ((x.getAttribute('value')) - 0 ) * 100) / (x.getAttribute('max') - 0) ) + '%'  );	});

var ranges2 = document.querySelectorAll('input[type="range"]'); ranges2.forEach(function(x) {		x.addEventListener("input", function(e) { UpdateRange; });	});

// Misc $("input[type='color']").change( function(e) { TestDynamicTheme; } ); // Change $("input.designer-text").change( function(e) { TestDynamicTheme; } ); // Change

/* Select Inputs */ $(' .cpe-dropdown.cpe-select').blur(function { TestDynamicTheme }) $(' input[type="range"]').change(function { TestDynamicTheme }) var select_items = document.querySelectorAll(".cpe-dropdown.cpe-select .cpe-dropdown__content .cpe-list li:not(.cpe-dropdown-level-2)"); select_items.forEach(function(y) {		y.setAttribute('onclick','UpdateSelectValue');		y.addEventListener('click', (function(e) {						e.preventDefault;						var selected = this;

var x = document.querySelector(".cpe-dropdown.cpe-select:focus-within .cpe-dropdown__content .cpe-list li.selected"); if (x) { x.classList.remove("selected"); } //		this.classList.add("selected");

var value = selected.getAttribute("value"); document.querySelector(' .cpe-dropdown.cpe-select:focus-within') .addEventListener('click',(function { var content = selected.innerText; document.querySelector('.cpe-select:focus-within .cpe-select__value').setAttribute("value", value); document.querySelector('.cpe-select:focus-within .cpe-select__value').innerHTML= content; }));       }) );	});

}