Mercurial > hg > webaudioevaluationtool

comparison test_create/test_create.html @ 168:f95a30a25a87 Dev_main

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
create_test: File API to handle dragged in XML file.
author Nicholas Jillings <n.g.r.jillings@se14.qmul.ac.uk>
date Wed, 03 Jun 2015 12:54:08 +0100
parents fa33bf58d863
children 5aff374de11c
comparison
equal deleted inserted replaced
167:fa33bf58d863 168:f95a30a25a87
20 // Initialise page 20 // Initialise page
21 topLevel = document.getElementById('topLevelBody'); 21 topLevel = document.getElementById('topLevelBody');
22 var setup = document.createElement('div'); 22 var setup = document.createElement('div');
23 setup.id = 'setupTagDiv'; 23 setup.id = 'setupTagDiv';
24 24
25 // Setup drag/drop handles
26 var dropBody = document.getElementById('dragFile');
27 dropBody.addEventListener('dragover', handleDragOver, false);
28 dropBody.addEventListener('dragenter',handleDragEnter,false);
29 dropBody.addEventListener('dragleave',handleDragLeave,false);
30 dropBody.addEventListener('drop', handleDrop,false);
25 }; 31 };
26 32
27 function attributePair(string, type, mandatory){ 33 function attributePair(string, type, mandatory){
28 var id = document.createElement("span"); 34 var id = document.createElement("span");
29 id.textContent = string; 35 id.textContent = string;
428 node.appendChild(nodeTitle); 434 node.appendChild(nodeTitle);
429 node.appendChild(attributes); 435 node.appendChild(attributes);
430 node.appendChild(removeButton); 436 node.appendChild(removeButton);
431 return node; 437 return node;
432 } 438 }
439
440
441 function handleDragOver(e) {
442 e.stopPropagation();
443 e.preventDefault();
444 }
445 function handleDragEnter(e) {
446 e.stopPropagation();
447 e.preventDefault();
448 this.style.backgroundColor = '#AAFFAA';
449 }
450 function handleDragLeave(e) {
451 e.stopPropagation();
452 e.preventDefault();
453 this.style.backgroundColor = "#FFFFFF";
454 }
455 function handleDrop(e) {
456 e.stopPropagation();
457 e.preventDefault();
458
459 var file = e.dataTransfer.files[0];
460
461 // Uses HTML5 FileAPI - https://w3c.github.io/FileAPI/#filereader-interface
462 var reader = new FileReader();
463 reader.readAsText(file);
464 var parse = new DOMParser();
465 var xml = parse.parseFromString(reader.result,'text/xml');
466 importXML(xml);
467 }
468
469 function importXML(xml) {
470 console.log(xml);
471 }
433 </script> 472 </script>
434 <style> 473 <style>
435 div { 474 div {
436 padding: 2px; 475 padding: 2px;
437 margin-top: 2px; 476 margin-top: 2px;
448 border: black; 487 border: black;
449 border-width: 2px; 488 border-width: 2px;
450 border-style: dashed; 489 border-style: dashed;
451 margin-bottom: 10px; 490 margin-bottom: 10px;
452 } 491 }
492 div#dragFile{
493 height:100px;
494 border-width: 2px;
495 border-style: dashed;
496 margin-bottom: 10px;
497 }
453 </style> 498 </style>
454 499
455 </head> 500 </head>
456 501
457 <body> 502 <body>
458 <h1>Create Test Setup XML</h1> 503 <h1>Create Test Setup XML</h1>
504 <div id="dragFile">
505 <span>Drag and Drop an XML specification file here to auto-load.</span>
506 </div>
459 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button> 507 <button id="validateXML" onclick="buttonClickedValidate();">Validate</button>
460 <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button> 508 <button id="createXML" onclick="buttonClickedSubmit();" disabled>Submit</button>
461 <span id="errorMessage" visibility="hidden"></span> 509 <span id="errorMessage" visibility="hidden"></span>
462 <div id="topLevelBody" align="left"> 510 <div id="topLevelBody" align="left">
463 <!-- Interface goes here --> 511 <!-- Interface goes here -->