<form>
<div class="input_wrapper">
<div class="input-label">Paste your list below, LINE SEPARATED</div>
<textarea id="bulk_input"></textarea>
</div>
<div class="results_wrapper">
<button type="button" id="run_sample">Sample</button>
<button type="reset" id="reset">Reset Input</button>
<button type="button" id="run">Get Results</button>
<button type="button" id="run_csv">CSV</button>
</div>
<div class="output_wrapper">
<div class="output_label">Output: </div>
<textarea id="output" readonly></textarea>
</div>
</form>
.input_wrapper {
width: 100%;
text-align: center;
}
.results_wrapper {
text-align: center;
width: 100%;
margin-top: 10px;
}
#bulk_input, #output {
width: 80%;
margin-left: auto;
margin-right: auto;
text-align: center;
min-height: 100px;
}
button#run {
background-color: green;
padding: 20px;
}
button#reset {
background-color: orange;
}
button#run_csv {
background-color: yellow;
}
.output_wrapper {
width: 100%;
text-align: center;
margin-top: 20px;
}
document.getElementById("run").addEventListener("click",function(){
var inputValue = document.getElementById("bulk_input").value;
getResults(inputValue);
});
document.getElementById("run_csv").addEventListener("click",function(){
var inputValue = document.getElementById("bulk_input").value;
getResults(inputValue,"csv");
});
document.getElementById("run_sample").addEventListener("click",function(){
document.getElementById("bulk_input").value = "tree frog cat";
var inputValue = document.getElementById("bulk_input").value;
getResults(inputValue);
});
function getResults(input,OPT_Type){
// Will hold final results
var allPermsArray = [];
var allPermsMdArray = [];
var allPermsString = "";
// Split input into array by line break
var inputArray = input.split("\n");
// Process each line
for (var x=0; x<inputArray.length; x++){
var currentLine = inputArray[x];
var currentLinePerms = perms(currentLine.split(" "));
for (var y=0; y<currentLinePerms.length; y++){
var currentPerm = currentLinePerms[y].join(" ");
allPermsArray.push(currentPerm);
allPermsMdArray.push([currentPerm]);
allPermsString += currentPerm + "\n";
}
}
//console.log(allPermsArray);
document.getElementById("output").value = allPermsString;
if (OPT_Type == "csv"){
exportToCsv("perms.csv",allPermsMdArray);
}
}
// https://codereview.stackexchange.com/a/59621
function perms(data) {
if (!(data instanceof Array)) {
throw new TypeError("input data must be an Array");
}
data = data.slice(); // make a copy
var permutations = [],
stack = [];
function doPerm() {
if (data.length == 0) {
permutations.push(stack.slice());
}
for (var i = 0; i < data.length; i++) {
var x = data.splice(i, 1);
stack.push(x);
doPerm();
stack.pop();
data.splice(i, 0, x);
}
}
doPerm();
return permutations;
}
/* Export to CSV function courtesy of http://stackoverflow.com/questions/14964035/how-to-export-javascript-array-info-to-csv-on-client-side/24922761#24922761 */
// the "rows" argument should be a multi-dimensional array (e.g. [["col1header","col2header"],["col1row2","col2row2"]])
function exportToCsv(filename, rows) {
var processRow = function (row) {
var finalVal = '';
for (var j = 0; j < row.length; j++) {
var innerValue = row[j] === null ? '' : row[j].toString();
if (row[j] instanceof Date) {
innerValue = row[j].toLocaleString();
};
var result = innerValue.replace(/"/g, '""');
if (result.search(/("|,|\n)/g) >= 0)
result = '"' + result + '"';
if (j > 0)
finalVal += ',';
finalVal += result;
}
return finalVal + '\n';
};
var csvFile = '';
for (var i = 0; i < rows.length; i++) {
csvFile += processRow(rows[i]);
}
var blob = new Blob([csvFile], { type: 'text/csv;charset=utf-8;' });
if (navigator.msSaveBlob) { // IE 10+
navigator.msSaveBlob(blob, filename);
} else {
var link = document.createElement("a");
if (link.download !== undefined) { // feature detection
// Browsers that support HTML5 download attribute
var url = URL.createObjectURL(blob);
link.setAttribute("href", url);
link.setAttribute("download", filename);
link.style.visibility = 'hidden';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
}
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.