yf-yang/sheetjs
1
Fork 0
forked from sheetjs/sheetjs
Code Pull Requests Activity

added full page drop zone.

Browse Source
This commit is contained in:
intrvertmichael 2021-05-12 17:56:04 -04:00
parent 879e8ca189
commit 7381db1879
1 changed files with 43 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
index.html
View File

@ -6,19 +6,25 @@
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>SheetJS Live Demo</title>
<style>
#drop{
border:2px dashed #bbb;
-moz-border-radius:5px;
-webkit-border-radius:5px;
border-radius:5px;
padding:25px;
text-align:center;
font:20pt bold,"Vollkorn";color:#bbb
}
#b64data{
width:100%;
}
a { text-decoration: none }
#drop-zone{
background: white;
position: fixed;
top: 0px;
left: 0px;
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
z-index: -1;
}
#drop-zone p, #drop-zone svg { pointer-events: none }
#drop-zone svg { margin-right: 5px }
</style>
</head>
<body>
@ -35,8 +41,7 @@ Output Format: <select name="format" onchange="setfmt()">
<option value="html"> HTML</option>
<option value="xlsx"> XLSX</option>
</select><br />
<div id="drop">Drop a spreadsheet file here to see sheet data</div>
<input type="file" name="xlfile" id="xlf" /> ... or click here to select a file
<input type="file" name="xlfile" id="xlf" />
<textarea id="b64data">... or paste a base64-encoding here</textarea>
<input type="button" id="dotext" value="Click here to process the base64 text" onclick="b64it();"/><br />
@ -46,6 +51,10 @@ Use readAsBinaryString: (when available) <input type="checkbox" name="userabs" c
</pre>
<pre id="out"></pre>
<div id="htmlout"></div>
<div id="drop-zone">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 13h-10v-1h10v1zm0-4h-10v1h10v-1zm0-3h-10v1h10v-1zm-15-1v-5h6v2h-4v3h-2zm8-5v2h4v-2h-4zm6 2h4v3h2v-5h-6v2zm6 5h-2v4h2v-4zm-20 10h2v-4h-2v4zm18-4v.543c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-1.362v2h2.189c3.163 0 9.811-7.223 9.811-9.614v-1.386h-2zm-18-2h2v-4h-2v4zm2 11v-3h-2v5h6v-2h-4z"/></svg>
<p>Drop a spreadsheet file here to see sheet data</p>
</div>
<br />
<script src="shim.js"></script>
<script src="xlsx.full.min.js"></script>
@ -192,12 +201,11 @@ var do_file = (function() {
})();
(function() {
var drop = document.getElementById('drop');
if(!drop.addEventListener) return;
var dropZone = document.getElementById('drop-zone')
if(!dropZone.addEventListener && !window.addEventListener) return;
function handleDrop(e) {
e.stopPropagation();
e.preventDefault();
dropZoneDisplay(e, false);
do_file(e.dataTransfer.files);
}
@ -207,9 +215,26 @@ var do_file = (function() {
e.dataTransfer.dropEffect = 'copy';
}
drop.addEventListener('dragenter', handleDragover, false);
drop.addEventListener('dragover', handleDragover, false);
drop.addEventListener('drop', handleDrop, false);
function dropZoneDisplay(e, show){
e.stopPropagation();
e.preventDefault();
var opacity = show ? '1' : '0';
var zIndex = show ? '1' : '-1';
dropZone.style.opacity = opacity;
dropZone.style.zIndex = zIndex;
}
window.addEventListener('drop' , handleDrop)
window.addEventListener('dragover' , handleDragover)
window.addEventListener('dragenter' , function(e){
dropZoneDisplay(e, true);
})
dropZone.addEventListener('dragleave' , function(e){
dropZoneDisplay(e, false);
})
})();
(function() {