Skip to content

Commit

Permalink
Add files via upload
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ceesjansen
Ceesjansen authored Sep 8, 2017
1 parent d950e6a commit 70d889d
Show file tree
Hide file tree
Showing 10 changed files with 2,100 additions and 0 deletions.
88 changes: 88 additions & 0 deletions download_parse.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,88 @@
function keyValuesFunction(data){
let selection = extractKeyValues(parsedata);
let filters = {}; // Empty object to store our active filters in
// Loop over all groups with inputs
$(".selectiongroup").each(function(){

// Find all inputs within the current group that are checked
let checked = $(this).find("input:checked");

// If there's inputs that are checked
if(checked.length>0) {

// Create empty array to hold the values from the inputs (value=.. attribute)
let values = [];

// For each checked input (using Jquery each()), put the value in the above array
checked.each(function() {
values.push(parseInt($(this).val(),10));
});

// Create a new key in the object with the correct name and give it an array as value
filters[$(this).find("h4").text()] = [...values];
}
});
// Map/loop over all keys in the filter object (so val is equal to the key value)
Object.keys(filters).map((val,i) => {

// For each key, lookup what string the numbers are in the selection list
filters[val] = filters[val].map((sub) => {
return selection[val][sub];
});
});
return filters;
}

function addKeyValues(filteredData){
//gets the selected options and values
let tempKeys = keyValuesFunction(filteredData);
let keyValues = Object.keys(tempKeys);

//extracts those values in a new array
let values = Object.keys(tempKeys).map((val)=>{
return tempKeys[val];
});

//add data to object Associaties
function SubFilters(data){
this.Associations = data;
};

//map over filtered data and create an array of objects
let csvData= filteredData.map((val) =>{
return new SubFilters(val);
});

//map over selected options and add these to the array of object (csvData)
values.map((val,i) =>
val.map((sub) =>
keyValues[i]+": "+sub))
.map((val) => {
return val.map((sub)=>{
return csvData.unshift({Associations: sub});
});
});

return csvData;
}

//download the csv file
function downloadCsv(options){
var config = {
delimiter: "",
skipEmptyLines: true,
header: false,
};
let csv = Papa.unparse(options, config);
var blob= new Blob(["\ufeff", csv]);
var pom = document.createElement('a');
var url = URL.createObjectURL(blob);
pom.href = url;
pom.setAttribute('download', 'test.csv');
pom.click();
}

document.getElementById('downloadbtn').addEventListener('click', function clickSave(e) {
let csvOptions = addKeyValues(wordleData);
downloadCsv(csvOptions);
});
10 changes: 10 additions & 0 deletions jquery.loading.min.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions papaparse.min.js
View file

Large diffs are not rendered by default.

186 changes: 186 additions & 0 deletions papaparse_html.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,186 @@
<!DOCTYPE html>
<html>

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="wordle_stylesheet.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="loading.js"></script>
<link href="loading.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script type="text/javascript" src="papaparse.min.js"></script>
<script type="text/javascript" src="wordcloud2.js"></script>
<script type="text/javascript" src="sentimood_dutch.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<!-- <script type="text/javascript" src="typo.js"></script> -->
</head>

<body>


<div class="container-fluid">
<div class="row">
<div class="col-md-12">
<h2>DVJ WORDLE TOOL</h2>
</div>
</div>
<div class="row">
<div class="col-md-3">
<form class="form-inline">
<div class="form-group">
<h3> Step 1: </h3>
<label for="file">Upload a CSV formated file:</label>
<div>
<input type="file" id="files" class="form-control" accept=".csv" onchange="previewFile()" required />
</div>
</div>
<div>
<div class="form-group">
<button type="submit" id="submit-file" class="btn btn-danger">Upload File</button>
</div>
</div>
</form>
<h3> Step 2: </h3>
<h4>Please select your preferred output options by clicking the buttons below: </h4>
<div id="selection"></div>
<h3> Step 3:</h3>
<h4>Made your selections? Please confirm by clicking the button below</h4>
<button class="btn btn-info" id="check">Confirm Selection</button>
<div class="row">
<div class="col-md-12">
<h3> Step 4:</h3>
<h4> Generate/re-render or save the worlde</h4>
<button class="btn btn-primary" id="inputwords"> Generate wordle </button>
<button class="btn btn-succes" id="rerender"> Re-render wordle </button>
<a href="#" download="wordcloud.png" class="btn btn-warning" id="btn-save">Save wordle (.png)</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<h3>Step 5: </h3>
<h4>Download filtered data</h4>
<a href="#" class="btn btn-danger" id="downloadbtn"> Download(.csv)</a>
</div>
</div>
<div class="row">
<div class="col-md-12 wordlebtn">
<h3>(Optional) Step 6:</h3>
<h4>Choose specific wordle options to get the worlde you prefer</h4>
<label for="wordnumber">Number of words:&nbsp;</label><input type="text" value="50" id="wordnumber"></input>
</div>
</div>
<div class="row">
<div class="col-md-12 wordlebtn">
<div class="form form-inline" data-toggle="tooltip" title="" data-placement="top" data-original-title="Pick a language to remove common words from the wordle.">
<label for="language">Language:&nbsp;</label>
<select id="language" name="language" class="form-control" onchange="makeWordCloud('wordleOutput')">
<option value="nl" selected="">Dutch</option>
<option value="en">English</option>
<option value="de">German</option>
<option value="fr">French</option>
<option value="none">None</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 wordlebtn">
<div class="form form-inline" data-toggle="tooltip" title="" data-placement="top" data-original-title="This colors the words using random colors within a set color scheme">
<label for="colortype">Color scheme:&nbsp;</label>
<select id="colortype" name="colortype" class="form-control" onchange="makeWordCloud('wordle-canvas')">
<option value="gray" selected="">Gray</option>
<option value="green">Green</option>
<option value="red">Red</option>
<option value="shootingstar">Shooting Star</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 wordlebtn">
<div class="form form-inline" data-toggle="tooltip" title="" data-placement="top" data-original-title="Be advised, high settings may cause words to fall outside of the wordle (please check on lower settings to be safe)">
<label for="scalefactor">Scale:</label> <input type="text" name="scalefactor" id="scalefactor" value="225" class="form-control" style="width:50%;" onchange="makeWordCloud('wordleOutput')"> %</div>
</div>
</div>
<div class="row">
<div class="col-md-12 wordlebtn">
<input type="text" name="ignored" id="ignored" placeholder="Ignored words (comma seperated)" class="form-control" onchange="makeWordCloud('wordleOutput')" data-toggle="tooltip" title="" data-placement="top" data-original-title="Place your words here that need to be filtered out of the wordle (seperate with comma)">
</div>
</div>
<div class="row changeword">
<div class="col-md-10 wordlebtn changeword">
<h3>(Optional) Step 7:</h3>
<h4>Change multiple words to one word </h4>
<input type="text" name="replace" id="replacewords" placeholder="Words you wish to replace (whitespace seperated)" class="form-control">
<input type="text" name="replaced" id="replaced" placeholder="Enter word you want it to be changed in to (1 word)" class="form-control">
</div>
<div class="col-md-2 wordlebtn" id="changebtn">
<button class="btn btn-primary" id="changewords">Change words</button>
</div>
</div>
<div id="output">
</div>
</div>
<!-- <div class="col-md-4">Stories
<div class="output-containers" id="story-container">
</div>
</div> -->
<div class="col-md-3">Associations
<div class="output-containers">
<textarea class="form-control" id="association-container" autocomplete="on" autocorrect="on" autocapitalize="on" spellcheck="true"></textarea>
</div>
</div>
<div id="error" class="alert alert-danger" role="alert" style="display:none"><strong>Red alert!</strong> Some words are removed from the wordle! Please adjust the scale or proceed with caution.</div>
<div class="col-md-6">Wordles
<div class="output-containers" id="wordle-container">
<canvas id="wordle-canvas" width="900" height="450">
</canvas>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="upload_papaparse_v2.js"></script>
<script type="text/javascript" src="text_cleanup.js"></script>
<script type="text/javascript" src="parse_click_functions.js"></script>
<script type="text/javascript" src="download_parse.js"></script>
<script type="text/javascript" src="spellcheck.js"></script>
<script type="text/javascript" src="wordle_code.js"></script>

</body>

</html>

<!--
<div class="wordle-button-container">
<div class="wordle-buttons" > Select desired output:
<div class="btn-group" id="output-button">
<button id="return-choice-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Wordle Selection <span class="caret"></span>
</button>
<ul id="return-choice" class="dropdown-menu">
</ul>
</div>
</div>
<div class="wordle-buttons" > Select category:
<div class="btn-group" id="category-button">
<button id="add-categories-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category <span class="caret"></span>
</button>
<ul id="add-categories" class="dropdown-menu">
<button type="submit" id="submit-file" class="btn btn-primary">confirm</button>
</ul>
</div>
</div>
<div class="wordle-buttons"> select category-value (optional):
<div class="btn-group" id="value-button">
<button id="category-value-btn" type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Category-value
<span class="caret"></span>
</button>
<ul id="category-value" class="dropdown-menu">
<button type="submit" id="submit-file" class="btn btn-primary">confirm</button>
</ul>
</div>
</div>
</div>
</div> -->
Loading

0 comments on commit 70d889d

Please sign in to comment.