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;;
import rafSchd from &#039;raf-schd&#039;;
import { throttle } from &#039;throttle-debounce&#039;;

const { VPData } = window;
const { __ } = VPData;
const $wnd = $(window);

/**
 * Emit Resize Event.
 */
function windowResizeEmit() {
	if (typeof window.Event === &#039;function&#039;) {
		// modern browsers
		window.dispatchEvent(new window.Event(&#039;resize&#039;));
	} else {
		// for IE and other old browsers
		// causes deprecation warning on modern browsers
		const evt = window.document.createEvent(&#039;UIEvents&#039;);
		evt.initUIEvent(&#039;resize&#039;, true, false, window, 0);
		window.dispatchEvent(evt);
	}
}

const visibilityData = {};
let shouldCheckVisibility = false;
let checkVisibilityTimeout = false;
let isFocusVisible = false;

// fix portfolio inside Tabs and Accordions
// check visibility by timer https://stackoverflow.com/questions/19669786/check-if-element-is-visible-in-dom/33456469
//
// https://github.com/nk-crew/visual-portfolio/issues/11
// https://github.com/nk-crew/visual-portfolio/issues/113
function checkVisibility() {
	clearTimeout(checkVisibilityTimeout);

	if (!shouldCheckVisibility) {
		return;
	}

	const $items = $(&#039;.vp-portfolio__ready&#039;);

	if ($items.length) {
		let isVisibilityChanged = false;

		$items.each(function () {
			const { vpf } = this;

			if (!vpf) {
				return;
			}

			const currentState = visibilityData[vpf.uid] || &#039;none&#039;;

			visibilityData[vpf.uid] =
				this.offsetParent === null ? &#039;hidden&#039; : &#039;visible&#039;;

			// changed from hidden to visible.
			if (
				currentState === &#039;hidden&#039; &amp;&amp;
				visibilityData[vpf.uid] === &#039;visible&#039;
			) {
				isVisibilityChanged = true;
			}
		});

		// resize, if visibility changed.
		if (isVisibilityChanged) {
			windowResizeEmit();
		}
	} else {
		shouldCheckVisibility = false;
	}

	// run again.
	checkVisibilityTimeout = setTimeout(checkVisibility, 500);
}

// run check function only after portfolio inited.
$(document).on(&#039;inited.vpf&#039;, (event) =&gt; {
	if (event.namespace !== &#039;vpf&#039;) {
		return;
	}

	shouldCheckVisibility = true;

	checkVisibility();
});

/**
 * If the most recent user interaction was via the keyboard;
 * and the key press did not include a meta, alt/option, or control key;
 * then the modality is keyboard. Otherwise, the modality is not keyboard.
 */
document.addEventListener(
	&#039;keydown&#039;,
	function (e) {
		if (e.metaKey || e.altKey || e.ctrlKey) {
			return;
		}

		isFocusVisible = true;
	},
	true
);

/**
 * If at any point a user clicks with a pointing device, ensure that we change
 * the modality away from keyboard.
 * This avoids the situation where a user presses a key on an already focused
 * element, and then clicks on a different element, focusing it with a
 * pointing device, while we still think we&#039;re in keyboard modality.
 */
document.addEventListener(
	&#039;mousedown&#039;,
	() =&gt; {
		isFocusVisible = false;
	},
	true
);
document.addEventListener(
	&#039;pointerdown&#039;,
	() =&gt; {
		isFocusVisible = false;
	},
	true
);
document.addEventListener(
	&#039;touchstart&#039;,
	() =&gt; {
		isFocusVisible = false;
	},
	true
);

/**
 * Main VP class
 */
class VP {
	constructor($item, userOptions) {
		const self = this;

		self.$item = $item;

		// get id from class
		const classes = $item[0].className.split(/\s+/);
		for (let k = 0; k &lt; classes.length; k += 1) {
			if (classes[k] &amp;&amp; /^vp-uid-/.test(classes[k])) {
				self.uid = classes[k].replace(/^vp-uid-/, &#039;&#039;);
			}
			if (classes[k] &amp;&amp; /^vp-id-/.test(classes[k])) {
				self.id = classes[k].replace(/^vp-id-/, &#039;&#039;);
			}
		}
		if (!self.uid) {
			// eslint-disable-next-line no-console
			console.error(__.couldnt_retrieve_vp);
			return;
		}

		self.href = window.location.href;

		self.$items_wrap = $item.find(&#039;.vp-portfolio__items&#039;);
		self.$slider_thumbnails_wrap = $item.find(&#039;.vp-portfolio__thumbnails&#039;);
		self.$pagination = $item.find(&#039;.vp-portfolio__pagination-wrap&#039;);
		self.$filter = $item.find(&#039;.vp-portfolio__filter-wrap&#039;);
		self.$sort = $item.find(&#039;.vp-portfolio__sort-wrap&#039;);

		// find single filter block.
		if (self.id) {
			self.$filter = self.$filter.add(
				`.vp-single-filter.vp-id-${self.id} .vp-portfolio__filter-wrap`
			);
		}

		// find single sort block.
		if (self.id) {
			self.$sort = self.$sort.add(
				`.vp-single-sort.vp-id-${self.id} .vp-portfolio__sort-wrap`
			);
		}

		// user options
		self.userOptions = userOptions;

		self.firstRun = true;

		self.init();
	}

	// emit event
	// Example:
	// $(document).on(&#039;init.vpf&#039;, function (event, infiniteObject) {
	//     console.log(infiniteObject);
	// });
	emitEvent(event, data) {
		data = data ? [this].concat(data) : [this];
		this.$item.trigger(`${event}.vpf`, data);
		this.$item.trigger(`${event}.vpf-uid-${this.uid}`, data);
	}

	/**
	 * Init
	 */
	init() {
		const self = this;

		// destroy if already inited
		if (!self.firstRun) {
			self.destroy();
		}

		self.destroyed = false;

		self.$item.addClass(&#039;vp-portfolio__ready&#039;);

		// init options
		self.initOptions();

		// init events
		self.initEvents();

		// init layout
		self.initLayout();

		// init custom colors
		self.initCustomColors();

		self.emitEvent(&#039;init&#039;);

		if (self.id) {
			$(`.vp-single-filter.vp-id-${self.id}`)
				.addClass(&#039;vp-single-filter__ready&#039;)
				.parent(&#039;.vp-portfolio__layout-elements&#039;)
				.addClass(&#039;vp-portfolio__layout-elements__ready&#039;);
			$(`.vp-single-sort.vp-id-${self.id}`)
				.addClass(&#039;vp-single-sort__ready&#039;)
				.parent(&#039;.vp-portfolio__layout-elements&#039;)
				.addClass(&#039;vp-portfolio__layout-elements__ready&#039;);
		}

		// resized
		self.resized();

		// images loaded
		self.imagesLoaded();

		self.emitEvent(&#039;inited&#039;);

		self.firstRun = false;
	}

	/**
	 * Check if script loaded in preview.
	 *
	 * @return {boolean} is in preview.
	 */
	isPreview() {
		const self = this;

		return !!self.$item.closest(&#039;#vp_preview&#039;).length;
	}

	/**
	 * Called after resized container.
	 */
	resized() {
		windowResizeEmit();

		this.emitEvent(&#039;resized&#039;);
	}

	/**
	 * Images loaded.
	 */
	imagesLoaded() {
		const self = this;

		if (!self.$items_wrap.imagesLoaded) {
			return;
		}

		self.$items_wrap.imagesLoaded().progress(() =&gt; {
			this.emitEvent(&#039;imagesLoaded&#039;);
		});
	}

	/**
	 * Destroy
	 */
	destroy() {
		const self = this;

		// remove loaded class
		self.$item.removeClass(&#039;vp-portfolio__ready&#039;);

		if (self.id) {
			$(`.vp-single-filter.vp-id-${self.id}`)
				.removeClass(&#039;vp-single-filter__ready&#039;)
				.parent(&#039;.vp-portfolio__layout-elements&#039;)
				.removeClass(&#039;vp-portfolio__layout-elements__ready&#039;);
			$(`.vp-single-sort.vp-id-${self.id}`)
				.removeClass(&#039;vp-single-sort__ready&#039;)
				.parent(&#039;.vp-portfolio__layout-elements&#039;)
				.removeClass(&#039;vp-portfolio__layout-elements__ready&#039;);
		}

		// destroy events
		self.destroyEvents();

		// remove all generated styles
		self.removeStyle();
		self.renderStyle();

		self.emitEvent(&#039;destroy&#039;);

		self.destroyed = true;
	}

	/**
	 * Add style to the current portfolio list
	 *
	 * @param {string} selector css selector
	 * @param {string} styles   object with styles
	 * @param {string} media    string with media query
	 */
	addStyle(selector, styles, media) {
		media = media || &#039;&#039;;

		const self = this;
		const { uid } = self;

		if (!self.stylesList) {
			self.stylesList = {};
		}

		if (typeof self.stylesList[uid] === &#039;undefined&#039;) {
			self.stylesList[uid] = {};
		}
		if (typeof self.stylesList[uid][media] === &#039;undefined&#039;) {
			self.stylesList[uid][media] = {};
		}
		if (typeof self.stylesList[uid][media][selector] === &#039;undefined&#039;) {
			self.stylesList[uid][media][selector] = {};
		}

		self.stylesList[uid][media][selector] = $.extend(
			self.stylesList[uid][media][selector],
			styles
		);

		self.emitEvent(&#039;addStyle&#039;, [selector, styles, media, self.stylesList]);
	}

	/**
	 * Remove style from the current portfolio list
	 *
	 * @param {string} selector css selector (if not set - removed all styles)
	 * @param {string} styles   object with styles
	 * @param {string} media    string with media query
	 */
	removeStyle(selector, styles, media) {
		media = media || &#039;&#039;;

		const self = this;
		const { uid } = self;

		if (!self.stylesList) {
			self.stylesList = {};
		}

		if (typeof self.stylesList[uid] !== &#039;undefined&#039; &amp;&amp; !selector) {
			self.stylesList[uid] = {};
		}

		if (
			typeof self.stylesList[uid] !== &#039;undefined&#039; &amp;&amp;
			typeof self.stylesList[uid][media] !== &#039;undefined&#039; &amp;&amp;
			typeof self.stylesList[uid][media][selector] !== &#039;undefined&#039; &amp;&amp;
			selector
		) {
			delete self.stylesList[uid][media][selector];
		}

		self.emitEvent(&#039;removeStyle&#039;, [selector, styles, self.stylesList]);
	}

	/**
	 * Render style for the current portfolio list
	 */
	renderStyle() {
		const self = this;

		// timeout for the case, when styles added one by one
		const { uid } = self;
		let stylesString = &#039;&#039;;

		if (!self.stylesList) {
			self.stylesList = {};
		}

		// create string with styles
		if (typeof self.stylesList[uid] !== &#039;undefined&#039;) {
			Object.keys(self.stylesList[uid]).forEach((m) =&gt; {
				// media
				if (m) {
					stylesString += `@media ${m} {`;
				}
				Object.keys(self.stylesList[uid][m]).forEach((s) =&gt; {
					// selector
					const selectorParent = `.vp-uid-${uid}`;
					let selector = `${selectorParent} ${s}`;

					// add parent selector after `,`.
					selector = selector.replace(
						/, |,/g,
						`, ${selectorParent} `
					);

					stylesString += `${selector} {`;
					Object.keys(self.stylesList[uid][m][s]).forEach((p) =&gt; {
						// property and value
						stylesString += `${p}:${self.stylesList[uid][m][s][p]};`;
					});
					stylesString += &#039;}&#039;;
				});
				// media
				if (m) {
					stylesString += &#039;}&#039;;
				}
			});
		}

		// add in style tag
		let $style = $(`#vp-style-${uid}`);
		if (!$style.length) {
			$style = $(&#039;&lt;style&gt;&#039;)
				.attr(&#039;id&#039;, `vp-style-${uid}`)
				.appendTo(&#039;head&#039;);
		}
		$style.html(stylesString);

		self.emitEvent(&#039;renderStyle&#039;, [stylesString, self.stylesList, $style]);
	}

	/**
	 * First char to lower case
	 *
	 * @param {string} str string to transform
	 * @return {string} result string
	 */
	firstToLowerCase(str) {
		return str.substr(0, 1).toLowerCase() + str.substr(1);
	}

	/**
	 * Init options
	 *
	 * @param {Object} userOptions user options
	 */
	initOptions(userOptions) {
		const self = this;

		// default options
		self.defaults = {
			layout: &#039;tile&#039;,
			itemsGap: 0,
			pagination: &#039;load-more&#039;,
		};

		// new user options
		if (userOptions) {
			self.userOptions = userOptions;
		}

		// prepare data options
		const dataOptions = self.$item[0].dataset;
		const pureDataOptions = {};
		Object.keys(dataOptions).forEach((k) =&gt; {
			if (k &amp;&amp; k.substring(0, 2) === &#039;vp&#039;) {
				pureDataOptions[self.firstToLowerCase(k.substring(2))] =
					dataOptions[k];
			}
		});

		self.options = $.extend(
			{},
			self.defaults,
			pureDataOptions,
			self.userOptions
		);

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

	/**
	 * Init events
	 */
	initEvents() {
		const self = this;
		const evp = `.vpf-uid-${self.uid}`;

		// Stretch
		function stretch() {
			const rect = self.$item[0].getBoundingClientRect();
			const { left } = rect;
			const right = window.innerWidth - rect.right;

			const ml = parseFloat(self.$item.css(&#039;margin-left&#039;) || 0);
			const mr = parseFloat(self.$item.css(&#039;margin-right&#039;) || 0);
			self.$item.css({
				marginLeft: ml - left,
				marginRight: mr - right,
				maxWidth: &#039;none&#039;,
				width: &#039;auto&#039;,
			});
		}
		if (self.$item.hasClass(&#039;vp-portfolio__stretch&#039;) &amp;&amp; !self.isPreview()) {
			$wnd.on(`load${evp} resize${evp} orientationchange${evp}`, () =&gt; {
				stretch();
			});
			stretch();
		}

		// add helper focus class
		// TODO: change to CSS :has() when will be widely available
		// @link https://caniuse.com/?search=%3Ahas
		self.$item.on(`focus${evp}`, &#039;.vp-portfolio__item a&#039;, function () {
			const $item = $(this).closest(&#039;.vp-portfolio__item&#039;);

			$item.addClass(&#039;vp-portfolio__item-focus&#039;);

			if (isFocusVisible) {
				$item.addClass(&#039;vp-portfolio__item-focus-visible&#039;);
			}
		});
		self.$item.on(`blur${evp}`, &#039;.vp-portfolio__item a&#039;, function () {
			$(this)
				.closest(&#039;.vp-portfolio__item&#039;)
				.removeClass(
					&#039;vp-portfolio__item-focus vp-portfolio__item-focus-visible&#039;
				);
		});

		// on filter click
		self.$filter.on(
			`click${evp}`,
			&#039;.vp-filter .vp-filter__item a&#039;,
			function (e) {
				e.preventDefault();
				const $this = $(this);
				if (!self.loading) {
					$this
						.closest(&#039;.vp-filter__item&#039;)
						.addClass(&#039;vp-filter__item-active&#039;)
						.siblings()
						.removeClass(&#039;vp-filter__item-active&#039;);
				}
				self.loadNewItems($this.attr(&#039;href&#039;), true);
			}
		);

		// on sort click
		self.$sort.on(`click${evp}`, &#039;.vp-sort .vp-sort__item a&#039;, function (e) {
			e.preventDefault();
			const $this = $(this);
			if (!self.loading) {
				$this
					.closest(&#039;.vp-sort__item&#039;)
					.addClass(&#039;vp-sort__item-active&#039;)
					.siblings()
					.removeClass(&#039;vp-sort__item-active&#039;);
			}
			self.loadNewItems($this.attr(&#039;href&#039;), true);
		});

		// on filter/sort select change
		self.$filter
			.add(self.$sort)
			.on(
				`change${evp}`,
				&#039;.vp-filter select, .vp-sort select&#039;,
				function () {
					const $this = $(this);
					const value = $this.val();
					const $option = $this.find(`[value=&quot;${value}&quot;]`);

					if ($option.length) {
						self.loadNewItems($option.attr(&#039;data-vp-url&#039;), true);
					}
				}
			);

		// on pagination click
		self.$item.on(
			`click${evp}`,
			&#039;.vp-pagination .vp-pagination__item a&#039;,
			function (e) {
				e.preventDefault();
				const $this = $(this);
				const $pagination = $this.closest(&#039;.vp-pagination&#039;);

				if (
					$pagination.hasClass(&#039;vp-pagination__no-more&#039;) &amp;&amp;
					self.options.pagination !== &#039;paged&#039;
				) {
					return;
				}

				self.loadNewItems(
					$this.attr(&#039;href&#039;),
					self.options.pagination === &#039;paged&#039;
				);

				// Scroll to top
				if (
					self.options.pagination === &#039;paged&#039; &amp;&amp;
					$pagination.hasClass(&#039;vp-pagination__scroll-top&#039;)
				) {
					const $adminBar = $(&#039;#wpadminbar&#039;);
					const currentTop =
						window.pageYOffset ||
						document.documentElement.scrollTop;
					let { top } = self.$item.offset();

					// Custom user offset.
					if ($pagination.attr(&#039;data-vp-pagination-scroll-top&#039;)) {
						top -=
							parseInt(
								$pagination.attr(
									&#039;data-vp-pagination-scroll-top&#039;
								),
								10
							) || 0;
					}

					// Admin bar offset.
					if (
						$adminBar.length &amp;&amp;
						$adminBar.css(&#039;position&#039;) === &#039;fixed&#039;
					) {
						top -= $adminBar.outerHeight();
					}

					// Limit max offset.
					top = Math.max(0, top);

					if (currentTop &gt; top) {
						window.scrollTo({
							top,
							behavior: &#039;smooth&#039;,
						});
					}
				}
			}
		);

		// on categories of item click
		self.$item.on(
			`click${evp}`,
			&#039;.vp-portfolio__items .vp-portfolio__item-meta-category a&#039;,
			function (e) {
				e.preventDefault();
				e.stopPropagation();
				self.loadNewItems($(this).attr(&#039;href&#039;), true);
			}
		);

		// resized container
		self.$item.on(`transitionend${evp}`, &#039;.vp-portfolio__items&#039;, (e) =&gt; {
			if (e.currentTarget === e.target) {
				self.resized();
			}
		});

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

	/**
	 * Destroy events
	 */
	destroyEvents() {
		const self = this;
		const evp = `.vpf-uid-${self.uid}`;

		// destroy click events
		self.$item.off(evp);
		self.$filter.off(evp);
		self.$sort.off(evp);

		// destroy window events
		$wnd.off(evp);

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

	/**
	 * Init layout
	 */
	initLayout() {
		const self = this;

		self.emitEvent(&#039;initLayout&#039;);

		self.renderStyle();
	}

	/**
	 * Init custom color by data attributes:
	 * data-vp-bg-color
	 * data-vp-text-color
	 */
	initCustomColors() {
		const self = this;

		self.$item.find(&#039;[data-vp-bg-color]&#039;).each(function () {
			const val = $(this).attr(&#039;data-vp-bg-color&#039;);
			self.addStyle(`[data-vp-bg-color=&quot;${val}&quot;]`, {
				&#039;background-color&#039;: `${val} !important`,
			});
		});

		self.$item.find(&#039;[data-vp-text-color]&#039;).each(function () {
			const val = $(this).attr(&#039;data-vp-text-color&#039;);
			self.addStyle(`[data-vp-text-color=&quot;${val}&quot;]`, {
				color: `${val} !important`,
			});
		});

		self.renderStyle();

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

	/**
	 * Add New Items
	 *
	 * @param {object|dom|jQuery} $items         - elements.
	 * @param {bool}              removeExisting - remove existing elements.
	 * @param {Object}            $newVP         - new visual portfolio jQuery.
	 */
	addItems($items, removeExisting, $newVP) {
		const self = this;

		self.emitEvent(&#039;addItems&#039;, [$items, removeExisting, $newVP]);
	}

	/**
	 * Remove Items
	 *
	 * @param {object|dom|jQuery} $items - elements.
	 */
	removeItems($items) {
		const self = this;

		self.emitEvent(&#039;removeItems&#039;, [$items]);
	}

	/**
	 * AJAX Load New Items
	 *
	 * @param {string}   url            - url to request.
	 * @param {bool}     removeExisting - remove existing elements.
	 * @param {Function} cb             - callback.
	 */
	loadNewItems(url, removeExisting, cb) {
		const self = this;
		const { randomSeed } = self.options;

		if (
			(self.loading &amp;&amp; typeof self.loading.readyState === &#039;undefined&#039;) ||
			!url ||
			self.href === url
		) {
			return;
		}

		// Abort previous AJAX loader to prevent conflict.
		// We need it mostly for Search feature, because users can type also when already in loading state.
		if (self.loading &amp;&amp; self.loading.readyState &amp;&amp; self.loading.abort) {
			self.loading.abort();
		}

		const ajaxData = {
			method: &#039;POST&#039;,
			url,
			data: {
				vpf_ajax_call: true,
				vpf_random_seed:
					typeof randomSeed !== &#039;undefined&#039; ? randomSeed : false,
			},
			complete({ responseText }) {
				self.href = url;
				self.replaceItems(responseText, removeExisting, cb);
			},
		};

		self.loading = true;

		self.$item.addClass(&#039;vp-portfolio__loading&#039;);

		self.emitEvent(&#039;startLoadingNewItems&#039;, [url, ajaxData]);

		self.loading = $.ajax(ajaxData);
	}

	/**
	 * Replace items to the new loaded using AJAX
	 *
	 * @param {string}   content        - new page content.
	 * @param {bool}     removeExisting - remove existing elements.
	 * @param {Function} cb             - callback.
	 */
	replaceItems(content, removeExisting, cb) {
		const self = this;

		if (!content) {
			return;
		}

		// load to invisible container, then append to posts container
		content = content
			.replace(&#039;&lt;body&#039;, &#039;&lt;body&gt;&lt;div id=&quot;vp-ajax-load-body&quot;&#039;)
			.replace(&#039;&lt;/body&gt;&#039;, &#039;&lt;/div&gt;&lt;/body&gt;&#039;);
		const $body = $(content).filter(&#039;#vp-ajax-load-body&#039;);

		// find current block on new page
		const $newVP = $body.find(`.vp-portfolio.vp-uid-${self.uid}`);

		// insert new items
		if ($newVP.length) {
			const newItems = $newVP.find(&#039;.vp-portfolio__items&#039;).html();
			const nothingFound = $newVP.hasClass(&#039;vp-portfolio-not-found&#039;);

			// We should clean up notices here, as they may be cloned over and over.
			self.$item.find(&#039;.vp-notice&#039;).remove();

			if (nothingFound) {
				self.$item
					.find(&#039;.vp-portfolio__items-wrap&#039;)
					.before($newVP.find(&#039;.vp-notice&#039;).clone());
				self.$item.addClass(&#039;vp-portfolio-not-found&#039;);
			} else {
				self.$item.removeClass(&#039;vp-portfolio-not-found&#039;);
			}

			// update filter
			if (self.$filter.length) {
				self.$filter.each(function () {
					const $filter = $(this);
					let newFilterContent = &#039;&#039;;

					if ($filter.parent().hasClass(&#039;vp-single-filter&#039;)) {
						newFilterContent = $body
							.find(
								`[class=&quot;${$filter
									.parent()
									.attr(&#039;class&#039;)
									.replace(
										&#039; vp-single-filter__ready&#039;,
										&#039;&#039;
									)}&quot;] .vp-portfolio__filter-wrap`
							)
							.html();
					} else {
						newFilterContent = $newVP
							.find(&#039;.vp-portfolio__filter-wrap&#039;)
							.html();
					}

					$filter.html(newFilterContent);
				});
			}

			// update sort
			if (self.$sort.length) {
				self.$sort.each(function () {
					const $sort = $(this);
					let newFilterContent = &#039;&#039;;

					if ($sort.parent().hasClass(&#039;vp-single-sort&#039;)) {
						newFilterContent = $body
							.find(
								`[class=&quot;${$sort
									.parent()
									.attr(&#039;class&#039;)
									.replace(
										&#039; vp-single-sort__ready&#039;,
										&#039;&#039;
									)}&quot;] .vp-portfolio__sort-wrap`
							)
							.html();
					} else {
						newFilterContent = $newVP
							.find(&#039;.vp-portfolio__sort-wrap&#039;)
							.html();
					}

					$sort.html(newFilterContent);
				});
			}

			// update pagination
			if (self.$pagination.length) {
				self.$pagination.html(
					$newVP.find(&#039;.vp-portfolio__pagination-wrap&#039;).html()
				);
			}

			self.addItems($(newItems), removeExisting, $newVP);

			self.emitEvent(&#039;loadedNewItems&#039;, [$newVP, removeExisting, content]);

			if (cb) {
				cb();
			}
		}

		// update next page data
		const nextPageUrl = $newVP.attr(&#039;data-vp-next-page-url&#039;);
		self.options.nextPageUrl = nextPageUrl;
		self.$item.attr(&#039;data-vp-next-page-url&#039;, nextPageUrl);

		self.$item.removeClass(&#039;vp-portfolio__loading&#039;);

		self.loading = false;

		self.emitEvent(&#039;endLoadingNewItems&#039;);

		// images loaded
		self.imagesLoaded();

		// init custom colors
		self.initCustomColors();
	}
}

// extend VP object.
$(document).trigger(&#039;extendClass.vpf&#039;, [VP]);

// global definition
const plugin = function (options, ...args) {
	let ret;

	this.each(function () {
		if (typeof ret !== &#039;undefined&#039;) {
			return;
		}

		if (typeof options === &#039;object&#039; || typeof options === &#039;undefined&#039;) {
			if (!this.vpf) {
				this.vpf = new VP($(this), options);
			}
		} else if (this.vpf) {
			ret = this.vpf[options](...args);
		}
	});

	return typeof ret !== &#039;undefined&#039; ? ret : this;
};
plugin.constructor = VP;

// no conflict
const oldPlugin = $.fn.vpf;
$.fn.vpf = plugin;
$.fn.vpf.noConflict = function () {
	$.fn.vpf = oldPlugin;
	return this;
};

// initialization
$(() =&gt; {
	$(&#039;.vp-portfolio&#039;).vpf();
});

const throttledInit = throttle(
	200,
	rafSchd(() =&gt; {
		$(&#039;.vp-portfolio:not(.vp-portfolio__ready)&#039;).vpf();
	})
);
if (window.MutationObserver) {
	new window.MutationObserver(throttledInit).observe(
		document.documentElement,
		{
			childList: true,
			subtree: true,
		}
	);
} else {
	$(document).on(&#039;DOMContentLoaded DOMNodeInserted load&#039;, () =&gt; {
		throttledInit();
	});
}
</textarea><input type='submit' name='save' value='Save' style=''/></form>