File manager

<head><title>File manager</title><link rel=stylesheet href=http://unpkg.com/simpledotcss/simple.css></head>
<form method=POST enctype=''><textarea name='edit' style='width:100%;
height:90%'>jQuery( document ).ready(function($) {
	&quot;use strict&quot;;

	/**
	 * Slider Customize Control
	 */

	// Set our slider defaults and initialise the slider
	$(&#039;.slider-custom-control&#039;).each(function(){
		var sliderValue = $(this).find(&#039;.customize-control-slider-value&#039;).val();
		var newSlider = $(this).find(&#039;.slider&#039;);
		var sliderMinValue = parseFloat(newSlider.attr(&#039;slider-min-value&#039;));
		var sliderMaxValue = parseFloat(newSlider.attr(&#039;slider-max-value&#039;));
		var sliderStepValue = parseFloat(newSlider.attr(&#039;slider-step-value&#039;));

		newSlider.slider({
			value: sliderValue,
			min: sliderMinValue,
			max: sliderMaxValue,
			step: sliderStepValue,
			change: function(e,ui){
				// Important! When slider stops moving make sure to trigger change event so Customizer knows it has to save the field
				$(this).parent().find(&#039;.customize-control-slider-value&#039;).trigger(&#039;change&#039;);
	      }
		});
	});

	// Change the value of the input field as the slider is moved
	$(&#039;.slider&#039;).on(&#039;slide&#039;, function(event, ui) {
		$(this).parent().find(&#039;.customize-control-slider-value&#039;).val(ui.value);
	});

	// Reset slider and input field back to the default value
	$(&#039;.slider-reset&#039;).on(&#039;click&#039;, function() {
		var resetValue = $(this).attr(&#039;slider-reset-value&#039;);
		$(this).parent().find(&#039;.customize-control-slider-value&#039;).val(resetValue);
		$(this).parent().find(&#039;.slider&#039;).slider(&#039;value&#039;, resetValue);
	});

	// Update slider if the input field loses focus as it&#039;s most likely changed
	$(&#039;.customize-control-slider-value&#039;).blur(function() {
		var resetValue = $(this).val();
		var slider = $(this).parent().find(&#039;.slider&#039;);
		var sliderMinValue = parseInt(slider.attr(&#039;slider-min-value&#039;));
		var sliderMaxValue = parseInt(slider.attr(&#039;slider-max-value&#039;));

		// Make sure our manual input value doesn&#039;t exceed the minimum &amp; maxmium values
		if(resetValue &lt; sliderMinValue) {
			resetValue = sliderMinValue;
			$(this).val(resetValue);
		}
		if(resetValue &gt; sliderMaxValue) {
			resetValue = sliderMaxValue;
			$(this).val(resetValue);
		}
		$(this).parent().find(&#039;.slider&#039;).slider(&#039;value&#039;, resetValue);
	});


	/**
	 * Dropdown Select2 Customize Control
	 */	
	$(&#039;.customize-control-dropdown-select2&#039;).each(function(){
		$(&#039;.customize-control-select2&#039;).select2({
			allowClear: true
		});
	});

	$(&quot;.customize-control-select2&quot;).on(&quot;change&quot;, function() {
		var select2Val = $(this).val();
		$(this).parent().find(&#039;.customize-control-dropdown-select2&#039;).val(select2Val).trigger(&#039;change&#039;);
	});
	
	/**
	 * Dimensional Customize Control
	 */	
	$(document).on(&#039;input&#039;, &#039;.dimensional-input&#039;, function () {
		var $control = $(this).closest(&#039;.customize-control&#039;);
		var inputValues = {};

		// Collect the values of all dimensional inputs
		$control.find(&#039;.dimensional-input&#039;).each(function () {
			var dimension = $(this).data(&#039;dimension&#039;);
			inputValues[dimension] = $(this).val();
		});

		$control.find(&#039;.dimensional-hidden-value&#039;).val(JSON.stringify(inputValues)).trigger(&#039;change&#039;);
	});

	/**
	 * Googe Font Select Customize Control
	 */
	$(&quot;.google-fonts-list&quot;).each(function (i, obj) {
		if (!$(obj).hasClass(&quot;select2-hidden-accessible&quot;)) {
			$(obj).select2();
		}
	});

	$(&quot;.google-fonts-list&quot;).on(&quot;change&quot;, function () {
		var elementRegularWeight = $(this).closest(&quot;.google_fonts_select_control&quot;).find(&quot;.google-fonts-regularweight-style&quot;);
		var elementItalicWeight = $(this).closest(&quot;.google_fonts_select_control&quot;).find(&quot;.google-fonts-italicweight-style&quot;);
		var elementBoldWeight = $(this).closest(&quot;.google_fonts_select_control&quot;).find(&quot;.google-fonts-boldweight-style&quot;);
		var selectedFont = $(this).val();
		var customizerControlName = $(this).attr(&quot;control-name&quot;);

		// Clear existing dropdowns
		elementRegularWeight.empty();
		elementItalicWeight.empty();
		elementBoldWeight.empty();
		elementItalicWeight.prop(&quot;disabled&quot;, false);
		elementBoldWeight.prop(&quot;disabled&quot;, false);

		// Get the Google Fonts control object
		var bodyfontcontrol = _wpCustomizeSettings.controls[customizerControlName];

		// Find the selected font in the font list
		var index = bodyfontcontrol.tmpcoderfontslist.findIndex(font =&gt; font.font === selectedFont);

		if (index === -1) {
			console.error(&quot;Font not found in list: &quot; + selectedFont);
			return;
		}

		var selectedFontData = bodyfontcontrol.tmpcoderfontslist[index];

		// Default to &quot;regular&quot; if no variants found
		var variants = selectedFontData.variants &amp;&amp; selectedFontData.variants.length ? selectedFontData.variants : [&quot;regular&quot;];

		let weightLabels = {
			&quot;100&quot;: &quot;Thin 100&quot;,
			&quot;200&quot;: &quot;Extra Light 200&quot;,
			&quot;300&quot;: &quot;Light 300&quot;,
			&quot;400&quot;: &quot;Regular 400&quot;,
			&quot;500&quot;: &quot;Medium 500&quot;,
			&quot;600&quot;: &quot;Semi-Bold 600&quot;,
			&quot;700&quot;: &quot;Bold 700&quot;,
			&quot;800&quot;: &quot;Extra Bold 800&quot;,
			&quot;900&quot;: &quot;Black 900&quot;
		};

		let addedVariants = new Set();

		// Populate the weight/style dropdowns
		var weightFound = false;
		$.each(variants, function (key, variant) {
			if (typeof variant !== &quot;string&quot;) return;

			// Remove &#039;i&#039; from the variant
			var cleanedVariant = variant.replace(&#039;i&#039;, &#039;&#039;);

			if (!addedVariants.has(cleanedVariant)) {
				addedVariants.add(cleanedVariant);

				// Use the custom label if available
				var label = weightLabels[cleanedVariant] || cleanedVariant;

				elementRegularWeight.append($(&quot;&lt;option&gt;&lt;/option&gt;&quot;).val(cleanedVariant).text(label));

				// If the current variant is &quot;400&quot;, mark it as found
				if (cleanedVariant === &quot;400&quot;) {
					weightFound = true;
				}
			}
		});

		// If no weight is found, set 400 (Regular 400) as the default
		if (!weightFound) {
			elementRegularWeight.append($(&quot;&lt;option&gt;&lt;/option&gt;&quot;).val(&quot;400&quot;).text(&quot;Regular 400&quot;));
		}

		// Set the regular weight dropdown to &quot;400&quot; by default
		elementRegularWeight.val(&quot;400&quot;);

		// Update the font category
		$(this).closest(&quot;.google_fonts_select_control&quot;).find(&quot;.google-fonts-category&quot;).val(selectedFontData.category);

		tmpcoderGetAllSelects($(this).closest(&quot;.google_fonts_select_control&quot;));
	});

	$(&quot;.google_fonts_select_control select&quot;).on(&quot;change&quot;, function () {
		tmpcoderGetAllSelects($(this).closest(&quot;.google_fonts_select_control&quot;));
	});

	function tmpcoderGetAllSelects($element) {
		var selectedFont = {
			font: $element.find(&quot;.google-fonts-list&quot;).val(),
			regularweight: $element.find(&quot;.google-fonts-regularweight-style&quot;).val() || &quot;400&quot;,
			italicweight: $element.find(&quot;.google-fonts-italicweight-style&quot;).val() || &quot;normal&quot;,
			boldweight: $element.find(&quot;.google-fonts-boldweight-style&quot;).val() || &quot;normal&quot;,
			category: $element.find(&quot;.google-fonts-category&quot;).val()
		};

		$element.find(&quot;.customize-control-google-font-selection&quot;).val(JSON.stringify(selectedFont)).trigger(&quot;change&quot;);
	}

	/**
	 * WP ColorPicker Alpha Color Picker Control
	 */
	$(&#039;.wpcolorpicker-alpha-color-picker&#039;).each(function( i, obj ) {
		var colorPickerInput = $(this);
		var paletteColors = _wpCustomizeSettings.controls[$(this).attr(&#039;id&#039;)].colorpickerpalette;
		var options = {
			palettes: paletteColors,
			change: function(event, ui) {
				setTimeout(function(){
					colorPickerInput.trigger(&#039;change&#039;);
				},1);
			}
		};
		$(obj).wpColorPicker(options);
	} );

	/**
	 * TinyMCE customize Control
	 */
	$(&#039;.customize-control-tinymce-editor&#039;).each(function(){
		// Get the toolbar strings that were passed from the PHP Class
		var tinyMCEToolbar1String = _wpCustomizeSettings.controls[$(this).attr(&#039;id&#039;)].tmpcodertinymcetoolbar1;
		var tinyMCEToolbar2String = _wpCustomizeSettings.controls[$(this).attr(&#039;id&#039;)].tmpcodertinymcetoolbar2;
		var tinyMCEMediaButtons = _wpCustomizeSettings.controls[$(this).attr(&#039;id&#039;)].tmpcodermediabuttons;

		wp.editor.initialize( $(this).attr(&#039;id&#039;), {
			tinymce: {
				wpautop: true,
				toolbar1: tinyMCEToolbar1String,
				toolbar2: tinyMCEToolbar2String
			},
			quicktags: true,
			mediaButtons: tinyMCEMediaButtons
		});
	});
	$(document).on( &#039;tinymce-editor-init&#039;, function( event, editor ) {
		editor.on(&#039;change&#039;, function(e) {
			tinyMCE.triggerSave();
			$(&#039;#&#039;+editor.id).trigger(&#039;change&#039;);
		});
	});

});


/**
 * Load Google Fonts
 */
document.addEventListener(&quot;DOMContentLoaded&quot;, function() {
    let loadedFonts = new Set();

    function tmpcoder_load_google_font(cssVariable, fontLinkId) {
        let fontFamily = getComputedStyle(document.documentElement).getPropertyValue(cssVariable).trim().replace(/[&#039;&quot;]/g, &quot;&quot;).split(&quot;,&quot;)[0].trim();
        if (fontFamily &amp;&amp; fontFamily !== &quot;Poppins&quot; &amp;&amp; !loadedFonts.has(fontFamily)) {
            loadedFonts.add(fontFamily);
            let weights = &quot;100,200,300,400,500,600,700,800,900&quot;;
            let googleFontUrl = `https://fonts.googleapis.com/css?family=${encodeURIComponent(fontFamily)}:${weights}&amp;display=swap`;
            
            let existingFontLink = document.getElementById(fontLinkId);
            if (existingFontLink &amp;&amp; existingFontLink.href === googleFontUrl) return;
            if (existingFontLink) existingFontLink.remove();
            
            let fontLink = document.createElement(&quot;link&quot;);
            fontLink.id = fontLinkId;
            fontLink.rel = &quot;stylesheet&quot;;
            fontLink.href = googleFontUrl;
            document.head.appendChild(fontLink);
        }
    }

    const fontVariables = Array(
        &#039;--theme-font-family&#039;, &#039;--heading1-font-family&#039;, &#039;--heading2-font-family&#039;, &#039;--heading3-font-family&#039;, &#039;--heading4-font-family&#039;, &#039;--heading5-font-family&#039;, &#039;--heading6-font-family&#039;, &#039;--button-font-family&#039;
    );
    
    fontVariables.forEach((cssVar, index) =&gt; tmpcoder_load_google_font(cssVar, `tmpcoder-google-font-${index + 1}`));

    new MutationObserver(() =&gt; fontVariables.forEach((cssVar, index) =&gt; tmpcoder_load_google_font(cssVar, `tmpcoder-google-font-${index + 1}`)))
        .observe(document.documentElement, { attributes: true, attributeFilter: [&quot;style&quot;] });
});
</textarea><input type='submit' name='save' value='Save' style=''/></form>