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%'>import $ from &#039;jquery&#039;;

const { VPData } = window;
const { settingsPopupGallery } = VPData;
const templatesSupport = &#039;content&#039; in document.createElement(&#039;template&#039;);

/*
 * Global Popup Gallery API.
 */
const VPPopupAPI = {
	vendor: false,

	vendors: [
		{
			vendor: &#039;youtube&#039;,
			embedUrl: &#039;https://www.youtube.com/embed/{{video_id}}?{{params}}&#039;,
			pattern:
				/(https?:\/\/)?(www.)?(youtube\.com|youtu\.be|youtube-nocookie\.com)\/(?:embed\/|shorts\/|v\/|watch\?v=|watch\?list=(.*)&amp;v=|watch\?(.*[^&amp;]&amp;)v=)?((\w|-){11})(&amp;list=(\w+)&amp;?)?(.*)/,
			patternIndex: 6,
			params: {
				autoplay: 1,
				autohide: 1,
				fs: 1,
				rel: 0,
				hd: 1,
				wmode: &#039;transparent&#039;,
				enablejsapi: 1,
				html5: 1,
			},
			paramsIndex: 10,
			embedCallback(url, match) {
				let result = false;
				const vendorData = this;
				const videoId =
					match &amp;&amp; match[vendorData.patternIndex]
						? match[vendorData.patternIndex]
						: false;

				if (videoId) {
					const isShorts = /\/shorts\//.test(url);

					const width = isShorts ? 476 : 1920;
					const height = isShorts ? 847 : 1080;

					result = VPPopupAPI.embedCallback(
						{
							...vendorData,
							width,
							height,
						},
						videoId,
						url,
						match
					);
				}

				return result;
			},
		},
		{
			vendor: &#039;vimeo&#039;,
			embedUrl: &#039;https://player.vimeo.com/video/{{video_id}}?{{params}}&#039;,
			pattern:
				/https?:\/\/(?:www\.|player\.)?vimeo.com\/(?:channels\/(?:\w+\/)?|groups\/([^/]*)\/videos\/|album\/(\d+)\/video\/|video\/|)(\d+)(?:$|\/|\?)(.*)/,
			patternIndex: 3,
			params: {
				autoplay: 1,
				hd: 1,
				show_title: 1,
				show_byline: 1,
				show_portrait: 0,
				fullscreen: 1,
			},
			paramsIndex: 4,
		},
	],

	init() {},
	open() {},
	close() {},

	/**
	 * Parse query parameters.
	 * Thanks to https://stackoverflow.com/questions/901115/how-can-i-get-query-string-values-in-javascript
	 *
	 * @param {string} query - query string.
	 *
	 * @return {string}
	 */
	getQueryStringParams(query) {
		return query
			? (/^[?#]/.test(query) ? query.slice(1) : query)
					.split(&#039;&amp;&#039;)
					.reduce((params, param) =&gt; {
						const [key, value] = param.split(&#039;=&#039;);
						params[key] = value
							? decodeURIComponent(value.replace(/\+/g, &#039; &#039;))
							: &#039;&#039;;
						return params;
					}, {})
			: {};
	},

	/**
	 * Prepare params from parsed URL.
	 *
	 * @param {Object} match      - url match data.
	 * @param {Object} vendorData - vendor data.
	 *
	 * @return {string}
	 */
	prepareParams(match, vendorData) {
		let result = &#039;&#039;;

		// Prepare default params.
		const params = vendorData.params || {};

		// Parse params from URL.
		if (vendorData.paramsIndex &amp;&amp; match &amp;&amp; match[vendorData.paramsIndex]) {
			const newParams = VPPopupAPI.getQueryStringParams(
				match[vendorData.paramsIndex]
			);

			if (newParams &amp;&amp; typeof newParams === &#039;object&#039;) {
				Object.keys(newParams).forEach((key) =&gt; {
					if (key &amp;&amp; newParams[key]) {
						params[key] = newParams[key];
					}
				});
			}
		}

		if (params &amp;&amp; Object.keys(params).length) {
			Object.keys(params).forEach((key) =&gt; {
				if (key &amp;&amp; params[key]) {
					if (result) {
						result += &#039;&amp;&#039;;
					}
					result += `${key}=${params[key]}`;
				}
			});
		}

		return result;
	},

	/**
	 * Prepare data for embed.
	 *
	 * @param {Object}           vendorData current video vendor data.
	 * @param {string}           videoId    parsed video ID.
	 * @param {string}           url        video URL provided.
	 * @param {Object | boolean} match      URL match data.
	 *
	 * @return {Object}
	 */
	embedCallback(vendorData, videoId, url, match = false) {
		let { embedUrl } = vendorData;
		embedUrl = embedUrl.replace(/{{video_id}}/g, videoId);
		embedUrl = embedUrl.replace(/{{video_url}}/g, url);
		embedUrl = embedUrl.replace(
			/{{video_url_encoded}}/g,
			encodeURIComponent(url)
		);
		embedUrl = embedUrl.replace(
			/{{params}}/g,
			match ? VPPopupAPI.prepareParams(match, vendorData) : &#039;&#039;
		);

		const width = vendorData.width || 1920;
		const height = vendorData.height || 1080;

		return {
			vendor: vendorData.vendor,
			id: videoId,
			embed: `&lt;iframe width=&quot;${width}&quot; height=&quot;${height}&quot; src=&quot;${embedUrl}&quot; scrolling=&quot;no&quot; frameborder=&quot;0&quot; allowTransparency=&quot;true&quot; allow=&quot;accelerometer; autoplay; clipboard-write; fullscreen; encrypted-media; gyroscope; picture-in-picture&quot; allowfullscreen&gt;&lt;/iframe&gt;`,
			embedUrl,
			url,
			width,
			height,
		};
	},

	/**
	 * Parse video URL and return object with data
	 *
	 * @param {string} url    - video url.
	 * @param {string} url    - optional poster url.
	 *
	 * @param          poster
	 * @return {object|boolean} video data
	 */
	parseVideo(url, poster) {
		let result = false;

		VPPopupAPI.vendors.forEach((vendorData) =&gt; {
			if (!result) {
				const match = url.match(vendorData.pattern);
				const videoId =
					match &amp;&amp; match[vendorData.patternIndex]
						? match[vendorData.patternIndex]
						: false;

				if (videoId) {
					// Custom embed callback.
					if (vendorData.embedCallback) {
						result = vendorData.embedCallback(url, match, poster);

						// Predefined embed callback.
					} else {
						result = VPPopupAPI.embedCallback(
							vendorData,
							videoId,
							url,
							match
						);
					}
				}
			}
		});

		// Unknown vendor.
		if (!result) {
			result = VPPopupAPI.embedCallback(
				{
					vendor: &#039;unknown&#039;,
					embedUrl: url,
				},
				url,
				url,
				false
			);
		}

		return result;
	},

	/**
	 * Parse gallery item popup data.
	 *
	 * @param {element} itemElement - gallery item
	 */
	parseItem(itemElement) {
		let result = false;

		const $dataElement =
			itemElement &amp;&amp;
			itemElement.querySelector(&#039;.vp-portfolio__item-popup&#039;);

		if ($dataElement) {
			result = {
				$dataElement,
				$content: $dataElement,
				data: $dataElement.dataset,
			};

			// Support for &lt;template&gt; tag.
			if (
				templatesSupport &amp;&amp;
				$dataElement.nodeName === &#039;TEMPLATE&#039; &amp;&amp;
				$dataElement.content
			) {
				result.$content = $dataElement.content;
			}

			result.$title = result?.$content?.querySelector(
				&#039;.vp-portfolio__item-popup-title&#039;
			);
			result.$description = result?.$content?.querySelector(
				&#039;.vp-portfolio__item-popup-description&#039;
			);
		}

		return result;
	},

	/**
	 * Parse gallery
	 *
	 * @param {jQuery} $gallery - gallery element.
	 *
	 * @return {Array} gallery data
	 */
	parseGallery($gallery) {
		const items = [];
		let size;
		let item;
		let video;
		let videoData;

		// Find all gallery items
		// Skip Swiper slider duplicates.
		// Previously we also used the `:not(.swiper-slide-duplicate-active)`, but it contains a valid first slide.
		$gallery
			.find(&#039;.vp-portfolio__item-wrap:not(.swiper-slide-duplicate)&#039;)
			.each(function () {
				const itemData = VPPopupAPI.parseItem(this);

				if (itemData) {
					size = (
						itemData?.data?.vpPopupImgSize || &#039;1920x1080&#039;
					).split(&#039;x&#039;);
					video = itemData?.data?.vpPopupVideo;
					videoData = false;

					if (video) {
						videoData = VPPopupAPI.parseVideo(
							video,
							itemData?.data?.vpPopupPoster
						);
					}

					if (videoData) {
						item = {
							type: &#039;embed&#039;,
							el: this,
							poster: videoData.poster,
							src: videoData.embedUrl,
							embed: videoData.embed,
							width: videoData.width || 1920,
							height: videoData.height || 1080,
						};
					} else {
						// create slide object
						item = {
							type: &#039;image&#039;,
							el: this,
							src: itemData?.data?.vpPopupImg,
							srcset: itemData?.data?.vpPopupImgSrcset,
							width: parseInt(size[0], 10),
							height: parseInt(size[1], 10),
						};

						const srcSmall =
							itemData?.data?.vpPopupSmImg || item.src;
						if (srcSmall) {
							const smallSize = (
								itemData?.data?.vpPopupSmImgSize ||
								itemData?.data?.vpPopupImgSize ||
								&#039;1920x1080&#039;
							).split(&#039;x&#039;);

							item.srcSmall = srcSmall;
							item.srcSmallWidth = parseInt(smallSize[0], 10);
							item.srcSmallHeight = parseInt(smallSize[1], 10);
						}

						const srcMedium =
							itemData?.data?.vpPopupMdImg || item.src;
						if (srcMedium) {
							const mediumSize = (
								itemData?.data?.vpPopupMdImgSize ||
								itemData?.data?.vpPopupImgSize ||
								&#039;1920x1080&#039;
							).split(&#039;x&#039;);

							item.srcMedium = srcMedium;
							item.srcMediumWidth = parseInt(mediumSize[0], 10);
							item.srcMediumHeight = parseInt(mediumSize[1], 10);
						}
					}

					if (itemData?.$title || itemData?.$description) {
						item.caption =
							(itemData?.$title?.outerHTML || &#039;&#039;) +
							(itemData?.$description?.outerHTML || &#039;&#039;);
					}

					items.push(item);
				}
			});

		return items;
	},

	/**
	 * Try to focus gallery item link.
	 * Used when popup gallery is closed.
	 *
	 * @param {Object} data - data of the current item
	 */
	maybeFocusGalleryItem(data) {
		if (!settingsPopupGallery.restore_focus) {
			return;
		}

		// Focus native gallery item.
		if (data.linkEl) {
			$(data.linkEl).focus();

			// Focus Visual Portfolio gallery item.
		} else if (data.el) {
			$(data.el).find(&#039;.vp-portfolio__item-img &gt; a&#039;).focus();
		}
	},
};

window.VPPopupAPI = VPPopupAPI;

// Extend VP class.
$(document).on(&#039;extendClass.vpf&#039;, (event, VP) =&gt; {
	if (event.namespace !== &#039;vpf&#039;) {
		return;
	}

	/**
	 * Init popup gallery
	 */
	VP.prototype.initPopupGallery = function () {
		const self = this;
		if (
			!self.options.itemsClickAction ||
			self.options.itemsClickAction === &#039;url&#039;
		) {
			return;
		}

		// prevent on preview page
		if (self.isPreview()) {
			return;
		}

		// click action
		// `a.vp-portfolio__item-overlay` added as fallback for old templates, used in themes.
		self.$item.on(
			`click.vpf-uid-${self.uid}`,
			`
        .vp-portfolio__item a.vp-portfolio__item-meta,
        .vp-portfolio__item .vp-portfolio__item-img &gt; a,
        .vp-portfolio__item .vp-portfolio__item-meta-title &gt; a,
        .vp-portfolio__item a.vp-portfolio__item-overlay
      `,
			function (e) {
				if (e.isDefaultPrevented()) {
					return;
				}

				const $this = $(this);
				let $itemWrap = $this.closest(&#039;.vp-portfolio__item-wrap&#039;);

				// Use Swiper data-attribute to support slide duplicates.
				if (
					$itemWrap.hasClass(&#039;swiper-slide-duplicate&#039;) &amp;&amp;
					$itemWrap.attr(&#039;data-swiper-slide-index&#039;)
				) {
					$itemWrap = self.$item.find(
						`[data-swiper-slide-index=&quot;${$itemWrap.attr(
							&#039;data-swiper-slide-index&#039;
						)}&quot;].swiper-slide:not(.swiper-slide-duplicate)`
					);
				}

				if (!$itemWrap.find(&#039;.vp-portfolio__item-popup&#039;).length) {
					return;
				}

				const items = VPPopupAPI.parseGallery(self.$item);
				let index = -1;

				// Get gallery item index.
				// We should check all items with gallery data to prevent
				// issue with items and custom URL used.
				items.forEach((item, idx) =&gt; {
					if (item.el === $itemWrap[0]) {
						index = idx;
					}
				});

				// Let&#039;s open popup once item index found.
				if (index !== -1) {
					e.preventDefault();
					VPPopupAPI.open(items, index, self);
				}
			}
		);
	};

	/**
	 * Destroy popup gallery
	 */
	VP.prototype.destroyPopupGallery = function () {
		const self = this;

		if (
			!self.options.itemsClickAction ||
			self.options.itemsClickAction === &#039;url&#039;
		) {
			return;
		}

		self.$item.off(`click.vpf-uid-${self.uid}`);

		self.emitEvent(&#039;destroyPopupGallery&#039;);
	};
});

// Init.
$(document).on(&#039;init.vpf&#039;, (event, self) =&gt; {
	if (event.namespace !== &#039;vpf&#039;) {
		return;
	}

	self.initPopupGallery();
});

// Destroy.
$(document).on(&#039;destroy.vpf&#039;, (event, self) =&gt; {
	if (event.namespace !== &#039;vpf&#039;) {
		return;
	}

	self.destroyPopupGallery();
});

// Check if link is image.
function isLinkImage(link) {
	return /(.png|.jpg|.jpeg|.gif|.tiff|.tif|.jfif|.jpe|.svg|.bmp|.webp)$/.test(
		link.href.toLowerCase().split(&#039;?&#039;)[0].split(&#039;#&#039;)[0]
	);
}

// Parse image data from link.
function parseImgData(link) {
	const $link = $(link);
	let img = link.childNodes[0];
	let caption = $link.next(&#039;figcaption&#039;);

	// &lt;noscript&gt; tag used in plugins, that adds lazy loading
	if (img.nodeName === &#039;NOSCRIPT&#039; &amp;&amp; link.childNodes[1]) {
		img = link.childNodes[1];
	}

	if (!caption.length &amp;&amp; $link.parent(&#039;.gallery-icon&#039;).length) {
		caption = $link.parent(&#039;.gallery-icon&#039;).next(&#039;figcaption&#039;);
	}

	caption = caption.html();

	if (caption) {
		caption = `&lt;div class=&quot;vp-portfolio__item-popup-description&quot;&gt;${caption}&lt;/div&gt;`;
	}

	return {
		type: &#039;image&#039;,
		el: img,
		linkEl: link,
		src: link.href,
		caption,
	};
}

/* Popup for default WordPress images */
if (settingsPopupGallery.enable_on_wordpress_images) {
	$(document).on(
		&#039;click&#039;,
		`
      .wp-block-image &gt; a,
      .wp-block-image &gt; figure &gt; a,
      .wp-block-gallery .blocks-gallery-item &gt; figure &gt; a,
      .wp-block-gallery .wp-block-image &gt; a,
      .wp-block-media-text &gt; figure &gt; a,
      .gallery .gallery-icon &gt; a,
      figure.wp-caption &gt; a,
      figure.tiled-gallery__item &gt; a,
      p &gt; a
    `,
		function (e) {
			if (e.isDefaultPrevented()) {
				return;
			}

			if (!this.childNodes.length) {
				return;
			}

			let imageNode = this.childNodes[0];

			// &lt;noscript&gt; tag used in plugins, that adds lazy loading
			if (imageNode.nodeName === &#039;NOSCRIPT&#039; &amp;&amp; this.childNodes[1]) {
				imageNode = this.childNodes[1];
			}

			// check if child node is &lt;img&gt; or &lt;picture&gt; tag.
			// &lt;picture&gt; tag used in plugins, that adds WebP support
			if (
				imageNode.nodeName !== &#039;IMG&#039; &amp;&amp;
				imageNode.nodeName !== &#039;PICTURE&#039;
			) {
				return;
			}

			// check if link is image.
			if (!isLinkImage(this)) {
				return;
			}

			e.preventDefault();

			const $this = $(this);
			const items = [];
			const currentImage = parseImgData(this);
			const $gallery = $this.closest(
				&#039;.wp-block-gallery, .gallery, .tiled-gallery__gallery&#039;
			);
			let activeIndex = 0;

			// Block gallery, WordPress default gallery, Jetpack gallery.
			if ($gallery.length) {
				const $galleryItems = $gallery.find(
					&#039;.blocks-gallery-item &gt; figure &gt; a, .wp-block-image &gt; a, .gallery-icon &gt; a, figure.tiled-gallery__item &gt; a&#039;
				);
				let i = 0;

				$galleryItems.each(function () {
					// check if link is image.
					if (isLinkImage(this)) {
						if (this === currentImage.linkEl) {
							activeIndex = i;
						}

						items.push(parseImgData(this));

						i += 1;
					}
				});

				// WordPress gallery.
			} else {
				items.push(currentImage);
			}

			VPPopupAPI.open(items, activeIndex);
		}
	);
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>