J-Cake/perm.html

## perm.html
<!DOCTYPE html>
<html>
    <head>
        <style>
            pre, pre code {
                font-family: sans-serif;
            }
        </style>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width,initial-scale=1.0"/>
    </head>
    <body>
        <form id="form">
            <label><input type="text" id="word" value="piccadilly" name="word"/> Word</label><br/>
            <label><input type="checkbox" id="unique" checked name="unique"/> Show only unique values</label><br/>
            <label><input type="checkbox" id="sorted" checked name="sorted"/> Sort values alphabetically</label><br/>

            <button type="submit">Generate</button>
        </form>
        <div id="status">Waiting for Action</div>
        <pre id="words" style="font-family: sans-serif;">

        </pre>
        <script defer="true">
            const output = document.querySelector("#words");
            const status = document.querySelector("#status");

            document.querySelector("#form").addEventListener('submit', async function(e) {
                e.preventDefault();
                // run this code when the `Generate` button is clicked.

                status.innerText = "Preparing";
                await new Promise(ok => requestAnimationFrame(() => ok()));

                const unique = this.unique.checked;
                const sorted = this.sorted.checked
                const word = this.word.value// get the word that's typed into the input box
                output.innerHTML = ''; // empty the `output` list.

                const words = unique ? new Set() : new Array(); // Sets are like mathematical sets, they cannot contain duplicates
                const swap = (word, l, r, _ = undefined) => [_ = [...word], _[l] = _[r], _[r] = word[l]][0];
                const generate = function(word, l, r) {
                    if (l == r)
                        if (words instanceof Set)
                            words.add(word.join(''));
                        else
                            words.push(word.join(''));
                    else
                        for (let i = l; i <= r; i++)
                            generate(swap(word, l, i), l + 1, r);
                };

                status.innerText = "Generating";
                await new Promise(ok => requestAnimationFrame(() => ok()));

                generate([...word], 0, word.length - 1);

                let results = words instanceof Set ? Array.from(words.values()) : words;

                if (sorted) {
                    status.innerText = `${results.length} Results - Sorting`;
                    await new Promise(ok => requestAnimationFrame(() => ok()));

                    results = sorted ? results.sort() : results;
                }

                status.innerText = `0/${results.length} Results - Printing`;
                await new Promise(ok => requestAnimationFrame(() => ok()));

                let container = document.createElement('code');
                for (const [a, i] of results.entries()) {
                    container.appendChild(document.createTextNode(`${(a + 1).toString().padStart(6, ' ')}. ${i}\n`));

                    if (a % 1000 == 999) {
                        output.appendChild(container);
                        container = document.createElement('code');
                        status.innerText = `${a}/${results.length} Results - Printing`;
                        await new Promise(ok => requestAnimationFrame(() => ok()));
                        count = 0;
                        start = Date.now();
                    }
                }

                status.innerText = `${results.length} Results - Waiting for Action`;
                await new Promise(ok => requestAnimationFrame(() => ok()));
            });
        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<style>
	pre, pre code {
	font-family: sans-serif;
	}
	</style>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width,initial-scale=1.0"/>
	</head>
	<body>
	<form id="form">
	<label><input type="text" id="word" value="piccadilly" name="word"/> Word</label><br/>
	<label><input type="checkbox" id="unique" checked name="unique"/> Show only unique values</label><br/>
	<label><input type="checkbox" id="sorted" checked name="sorted"/> Sort values alphabetically</label><br/>

	<button type="submit">Generate</button>
	</form>
	<div id="status">Waiting for Action</div>
	<pre id="words" style="font-family: sans-serif;">

	</pre>
	<script defer="true">
	const output = document.querySelector("#words");
	const status = document.querySelector("#status");

	document.querySelector("#form").addEventListener('submit', async function(e) {
	e.preventDefault();
	// run this code when the `Generate` button is clicked.

	status.innerText = "Preparing";
	await new Promise(ok => requestAnimationFrame(() => ok()));

	const unique = this.unique.checked;
	const sorted = this.sorted.checked
	const word = this.word.value// get the word that's typed into the input box
	output.innerHTML = ''; // empty the `output` list.

	const words = unique ? new Set() : new Array(); // Sets are like mathematical sets, they cannot contain duplicates
	const swap = (word, l, r, _ = undefined) => [_ = [...word], _[l] = _[r], _[r] = word[l]][0];
	const generate = function(word, l, r) {
	if (l == r)
	if (words instanceof Set)
	words.add(word.join(''));
	else
	words.push(word.join(''));
	else
	for (let i = l; i <= r; i++)
	generate(swap(word, l, i), l + 1, r);
	};

	status.innerText = "Generating";
	await new Promise(ok => requestAnimationFrame(() => ok()));

	generate([...word], 0, word.length - 1);

	let results = words instanceof Set ? Array.from(words.values()) : words;

	if (sorted) {
	status.innerText = `${results.length} Results - Sorting`;
	await new Promise(ok => requestAnimationFrame(() => ok()));

	results = sorted ? results.sort() : results;
	}

	status.innerText = `0/${results.length} Results - Printing`;
	await new Promise(ok => requestAnimationFrame(() => ok()));

	let container = document.createElement('code');
	for (const [a, i] of results.entries()) {
	container.appendChild(document.createTextNode(`${(a + 1).toString().padStart(6, ' ')}. ${i}\n`));

	if (a % 1000 == 999) {
	output.appendChild(container);
	container = document.createElement('code');
	status.innerText = `${a}/${results.length} Results - Printing`;
	await new Promise(ok => requestAnimationFrame(() => ok()));
	count = 0;
	start = Date.now();
	}
	}

	status.innerText = `${results.length} Results - Waiting for Action`;
	await new Promise(ok => requestAnimationFrame(() => ok()));
	});
	</script>
	</body>
	</html>