An HTML component for treatment and processing of massive data
Written in JavaScript (ES6)
Created by Renan Niemietz Cardoso
Before declaring massimp.min.js, make sure Materialize CSS v0.100.0, massimp.min.css and XLSX v0.14.0 were declared previously in your HTML, like the following example:
...
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<link rel="stylesheet" href="massimp.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.14.0/xlsx.full.min.js"></script>
<script type="text/javascript" src="massimp.min.js"></script>
</head>
...-
Create a <div> element with a class named massimp-container, inside your HTML file
-
After document is loaded, start the Massimp element by doing the following:
jQuery:
$(".massimp-container").massimp( [OPTIONS] );- e.g.:
$(".massimp-container").massimp({
showInputFileText: false,
maxVerticalRowsToDisplay: 3,
buttonText: "Make it happen!"
});Pure Javascript (ES6):
getElementsByClassName("massimp-container")[0].massimp( [OPTIONS] );- e.g.:
getElementsByClassName("massimp-container")[0].massimp({
showInputFileText: false,
maxVerticalRowsToDisplay: 3,
buttonText: "Make it happen!"
});or
new Massimp(".massimp-container", [OPTIONS] );- e.g.:
new Massimp(".massimp-container", {
showInputFileText: false,
maxVerticalRowsToDisplay: 3,
buttonText: "Make it happen"
});| Option | Default | Description | Type |
|---|---|---|---|
| language | Browser's language or "en-US" if browser's language is not supported | Component language (Only "pt-BR" and "en-US" are avalible for now) | string |
| attributes | [ ] | Attributes do associate with the massive data file columns | Array of objects |
| inputFileText | "List" | Text beside file input | string |
| inputFileInsideText | "Choose a file" | Text inside file input | string |
| maxVerticalRowsToDisplay | 5 | Number of visible rows vertically | number |
| colorButtonClass | "blue" | Main button's class | string |
| buttonText | "Do it!" | Main button's text | string |
| onButtonClicked | null | Action after main button has been clicked (Triggered after procedure/calculation) | function |
| showExtraButton | false | Show or hide the extra button (Button without pre-action) | boolean |
| colorExtraButtonClass | "red" | Extra button's class | string |
| extraButtonText | "Cancel" | Extra button's text | string |
| onExtraButtonClicked | null | Action after extra button has been clicked | function |
| Method | Description | Parameter Type | Return Type |
|---|---|---|---|
| setShowInputFileText | Show or hide the text beside file input | boolean | void |
| setInputFileText | Change the text beside file input | string | void |
| setInputFileInsideText | Change the text inside file input | string | void |
| setMaxVerticalRowsToDisplay | Changes the number of visible rows vertically | number | void |
| getNumberOfObjects | Gets the number of objects/lines to be inserted | number | |
| setColorButtonClass | Change the main button's class | string | void |
| setButtonText | Change the main button's text | string | void |
| setShowExtraButton | Show or hide the extra button (Button without pre-action) | boolean | void |
| setColorExtraButtonClass | Change the extra button's class | string | void |
| setExtraButtonText | Change the extra button's text | string | void |
| processMassiveImport | Process/Calculate the massive data | function | void |
- jQuery e.g.:
$(".massimp-container").massimp("setInputFileInsideText", ".xls, .xlsx or .csv file ...");- Pure Javascript (ES6) e.g.:
getElementsByClassName("massimp-container")[0]._massimp.setInputFileInsideText(".xls, .xlsx or .csv file ...");| Event | Description |
|---|---|
| after.mp.process | This event fires when the procedure/calculation is done |
- e.g.:
$(".massimp-container").on("after.mp.process", function(e, result)
{
console.warn("Massive Import Result", result);
let alertText = "Massive Import Result:";
alertText += "\n\n";
result.forEach(function(obj, index)
{
Object.keys(obj).forEach(function(key, jndex)
{
let value = obj[key];
if(value == null)
{
value = "-";
}
else if(value instanceof File)
{
value = value.name;
}
alertText += key + ": " + value + "\n";
});
alertText += "\n";
});
alert(alertText);
});If you're having any issue by using Massimp, contact me through the following e-mail address: