wehub-resource-sync
109 lines
4.9 KiB
JavaScript
109 lines
4.9 KiB
JavaScript
// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
|
// ┃ ██████ ██████ ██████ █ █ █ █ █ █▄ ▀███ █ ┃
|
|
// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█ ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄ ▀█ █ ▀▀▀▀▀ ┃
|
|
// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄ █ ▄▄▄▄▄ ┃
|
|
// ┃ █ ██████ █ ▀█▄ █ ██████ █ ███▌▐███ ███████▄ █ ┃
|
|
// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
|
|
// ┃ Copyright (c) 2017, the Perspective Authors. ┃
|
|
// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
|
|
// ┃ This file is part of the Perspective library, distributed under the terms ┃
|
|
// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
|
|
// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
|
|
|
import "/node_modules/@perspective-dev/viewer/dist/cdn/perspective-viewer.js";
|
|
import "/node_modules/@perspective-dev/viewer-datagrid/dist/cdn/perspective-viewer-datagrid.js";
|
|
import "/node_modules/@perspective-dev/viewer-charts/dist/cdn/perspective-viewer-charts.js";
|
|
|
|
import perspective from "/node_modules/@perspective-dev/client/dist/cdn/perspective.js";
|
|
|
|
const worker = await perspective.worker();
|
|
|
|
// Get `dropArea` element from the DOM.
|
|
var dropArea = document.getElementById("drop-area");
|
|
|
|
// Get `input` element from the DOM.
|
|
var input = document.getElementById("fileElem");
|
|
|
|
// Add event listeners to `dropArea`.
|
|
dropArea.addEventListener("dragenter", () => {}, false);
|
|
dropArea.addEventListener("dragleave", () => {}, false);
|
|
dropArea.addEventListener("dragover", () => {}, false);
|
|
dropArea.addEventListener("drop", (x) => console.log(x), false);
|
|
|
|
// Prevent defaults for drag / drop events.
|
|
["dragenter", "dragover", "dragleave", "drop"].forEach((eventName) => {
|
|
dropArea.addEventListener(eventName, preventDefaults, false);
|
|
});
|
|
|
|
function preventDefaults(e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}
|
|
|
|
// Highlight `dropArea` on drag enter and over.
|
|
["dragenter", "dragover"].forEach(function (eventName) {
|
|
dropArea.addEventListener(eventName, highlight, false);
|
|
});
|
|
|
|
// Remove highlight `dropArea` on drag leave and drop.
|
|
["dragleave", "drop"].forEach(function (eventName) {
|
|
dropArea.addEventListener(eventName, unhighlight, false);
|
|
});
|
|
|
|
// Add class for highlighting drop area.
|
|
function highlight() {
|
|
dropArea.classList.add("highlight");
|
|
}
|
|
|
|
// Remove class for highlighting drop area.
|
|
function unhighlight() {
|
|
dropArea.classList.remove("highlight");
|
|
}
|
|
|
|
// Add event listener for drop.
|
|
dropArea.addEventListener("drop", handleDrop, false);
|
|
|
|
// Add event listener for file change on `input`.
|
|
input.addEventListener("change", function () {
|
|
handleFiles(this.files);
|
|
});
|
|
|
|
// Handle files attached to the drop.
|
|
function handleDrop(e) {
|
|
let dt = e.dataTransfer;
|
|
let files = dt.files;
|
|
|
|
handleFiles(files);
|
|
}
|
|
|
|
// Iterate over files and call upload on each.
|
|
function handleFiles(files) {
|
|
[...files].forEach(uploadFile);
|
|
}
|
|
|
|
// On file load, remove the `dropArea` and replace it with a `<perspective-viewer>`.
|
|
function uploadFile(file) {
|
|
let reader = new FileReader();
|
|
reader.onload = function (fileLoadedEvent) {
|
|
let data = fileLoadedEvent.target.result;
|
|
|
|
// Remove the `dropArea` from the DOM.
|
|
const parent = dropArea.parentElement;
|
|
parent.removeChild(dropArea);
|
|
|
|
// Create a `<perspective-viewer>` and append it to the DOM.
|
|
const psp = document.createElement("perspective-viewer");
|
|
parent.appendChild(psp);
|
|
|
|
// Load the file data into `<perspective-viewer>`.
|
|
if (file.name.endsWith(".feather") || file.name.endsWith(".arrow")) {
|
|
psp.load(worker.table(data));
|
|
} else {
|
|
psp.load(worker.table(data, { format: "csv" }));
|
|
}
|
|
};
|
|
|
|
// Read the contents of the file - triggering the onload when finished.
|
|
reader.readAsArrayBuffer(file);
|
|
}
|