texodus/.block

## .block
license: apache-2.0

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Demo of Perspective.

  

  

## csv.js
window.addEventListener("WebComponentsReady", function() {

    // 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 txt = 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.
            let psp = document.createElement("perspective-viewer");
            parent.appendChild(psp);

            // Load the CSV data into `<perspective-viewer>`.
            psp.load(txt);
        };

        // Read the contents of the CSV - triggering the onload when finished.
        reader.readAsText(file);
    }
});

## index.css
#drop-area {
    border: 5px dashed #ccc;
    border-radius: 15px;
    width: 480px;
    font-family: sans-serif;
    margin: 100px auto;
    padding: 48px;
    color: #666;
}

#drop-area.highlight {
    border-color: cornflowerblue;
    color: #000;
}

p {
    margin-top: 0;
}

.my-form {
    margin-bottom: 10px;
}

#gallery {
    margin-top: 10px;
}

#gallery img {
    width: 150px;
    margin-bottom: 10px;
    margin-right: 10px;
    vertical-align: middle;
}

.button {
    display: inline-block;
    padding: 10px;
    background: #ccc;
    cursor: pointer;
    border-radius: 5px;
}

.button:hover {
    background: cornflowerblue;
    color: white;
}

#fileElem {
    display: none;
}

perspective-viewer {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

## index.html
<!DOCTYPE html>
<html>

<head>

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

    <script src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/umd/perspective.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid"></script>
    <script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc"></script>

    <script src="csv.js"></script>

    <link rel='stylesheet' href="index.css">
    <link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/material-dense.css" is="custom-style">

</head>

<body>

    <div id="drop-area">
        <form class="my-form">
            <p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
            <p>(Data is processed in browser, and never sent to any server).</p>
            <input type="file" id="fileElem" multiple accept="text/csv">
            <label class="button" for="fileElem">Select a file</label>
        </form>
    </div>

</body>

</html>

## preview.png

      
        

          Raw
        
        
          
            
          
          
            
              preview.png
            
          
        
      
    

  
      
          
      
  

  

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png
	window.addEventListener("WebComponentsReady", function() {

	// 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 txt = 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.
	let psp = document.createElement("perspective-viewer");
	parent.appendChild(psp);

	// Load the CSV data into `<perspective-viewer>`.
	psp.load(txt);
	};

	// Read the contents of the CSV - triggering the onload when finished.
	reader.readAsText(file);
	}
	});
	#drop-area {
	border: 5px dashed #ccc;
	border-radius: 15px;
	width: 480px;
	font-family: sans-serif;
	margin: 100px auto;
	padding: 48px;
	color: #666;
	}

	#drop-area.highlight {
	border-color: cornflowerblue;
	color: #000;
	}

	p {
	margin-top: 0;
	}

	.my-form {
	margin-bottom: 10px;
	}

	#gallery {
	margin-top: 10px;
	}

	#gallery img {
	width: 150px;
	margin-bottom: 10px;
	margin-right: 10px;
	vertical-align: middle;
	}

	.button {
	display: inline-block;
	padding: 10px;
	background: #ccc;
	cursor: pointer;
	border-radius: 5px;
	}

	.button:hover {
	background: cornflowerblue;
	color: white;
	}

	#fileElem {
	display: none;
	}

	perspective-viewer {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}
	<!DOCTYPE html>
	<html>

	<head>

	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

	<script src="https://cdn.jsdelivr.net/npm/@finos/perspective/dist/umd/perspective.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/perspective-viewer.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-datagrid"></script>
	<script src="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer-d3fc"></script>

	<script src="csv.js"></script>

	<link rel='stylesheet' href="index.css">
	<link rel='stylesheet' href="https://cdn.jsdelivr.net/npm/@finos/perspective-viewer/dist/umd/material-dense.css" is="custom-style">

	</head>

	<body>

	<div id="drop-area">
	<form class="my-form">
	<p>Upload a CSV file by dragging from your desktop and dropping onto the dashed region.</p>
	<p>(Data is processed in browser, and never sent to any server).</p>
	<input type="file" id="fileElem" multiple accept="text/csv">
	<label class="button" for="fileElem">Select a file</label>
	</form>
	</div>

	</body>

	</html>