1 <!DOCTYPE html> 2 3 <html i18n-values="dir:textdirection"> 4 5 <head> 6 <meta charset="utf-8"> 7 8 <script> 9 function addRow(name, url, isdir, size, date_modified) { 10 if (name == ".") 11 return; 12 13 var root = "" + document.location; 14 if (root.substr(-1) !== "/") 15 root += "/"; 16 17 var table = document.getElementById("table"); 18 var row = document.createElement("tr"); 19 var file_cell = document.createElement("td"); 20 var link = document.createElement("a"); 21 22 link.className = isdir ? "icon dir" : "icon file"; 23 24 if (name == "..") { 25 link.href = root + ".."; 26 link.innerText = document.getElementById("parentDirText").innerText; 27 link.className = "icon up"; 28 size = ""; 29 date_modified = ""; 30 } else { 31 if (isdir) { 32 name = name + "/"; 33 url = url + "/"; 34 size = ""; 35 } else { 36 link.draggable = "true"; 37 link.addEventListener("dragstart", onDragStart, false); 38 } 39 link.innerText = name; 40 link.href = root + url; 41 } 42 file_cell.appendChild(link); 43 44 row.appendChild(file_cell); 45 row.appendChild(createCell(size)); 46 row.appendChild(createCell(date_modified)); 47 48 table.appendChild(row); 49 } 50 51 function onDragStart(e) { 52 var el = e.srcElement; 53 var name = el.innerText.replace(":", ""); 54 var download_url_data = "application/octet-stream:" + name + ":" + el.href; 55 e.dataTransfer.setData("DownloadURL", download_url_data); 56 e.dataTransfer.effectAllowed = "copy"; 57 } 58 59 function createCell(text) { 60 var cell = document.createElement("td"); 61 cell.setAttribute("class", "detailsColumn"); 62 cell.innerText = text; 63 return cell; 64 } 65 66 function start(location) { 67 var header = document.getElementById("header"); 68 header.innerText = header.innerText.replace("LOCATION", location); 69 70 document.getElementById("title").innerText = header.innerText; 71 } 72 73 function onListingParsingError() { 74 var box = document.getElementById("listingParsingErrorBox"); 75 box.innerHTML = box.innerHTML.replace("LOCATION", encodeURI(document.location) 76 + "?raw"); 77 box.style.display = "block"; 78 } 79 </script> 80 81 <style> 82 83 h1 { 84 border-bottom: 1px solid #c0c0c0; 85 margin-bottom: 10px; 86 padding-bottom: 10px; 87 white-space: nowrap; 88 } 89 90 table { 91 border-collapse: collapse; 92 } 93 94 tr.header { 95 font-weight: bold; 96 } 97 98 td.detailsColumn { 99 -webkit-padding-start: 2em; 100 text-align: end; 101 white-space: nowrap; 102 } 103 104 a.icon { 105 -webkit-padding-start: 1.5em; 106 text-decoration: none; 107 } 108 109 a.icon:hover { 110 text-decoration: underline; 111 } 112 113 a.file { 114 background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat; 115 } 116 117 a.dir { 118 background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAd5JREFUeNqMU79rFUEQ/vbuodFEEkzAImBpkUabFP4ldpaJhZXYm/RiZWsv/hkWFglBUyTIgyAIIfgIRjHv3r39MePM7N3LcbxAFvZ2b2bn22/mm3XMjF+HL3YW7q28YSIw8mBKoBihhhgCsoORot9d3/ywg3YowMXwNde/PzGnk2vn6PitrT+/PGeNaecg4+qNY3D43vy16A5wDDd4Aqg/ngmrjl/GoN0U5V1QquHQG3q+TPDVhVwyBffcmQGJmSVfyZk7R3SngI4JKfwDJ2+05zIg8gbiereTZRHhJ5KCMOwDFLjhoBTn2g0ghagfKeIYJDPFyibJVBtTREwq60SpYvh5++PpwatHsxSm9QRLSQpEVSd7/TYJUb49TX7gztpjjEffnoVw66+Ytovs14Yp7HaKmUXeX9rKUoMoLNW3srqI5fWn8JejrVkK0QcrkFLOgS39yoKUQe292WJ1guUHG8K2o8K00oO1BTvXoW4yasclUTgZYJY9aFNfAThX5CZRmczAV52oAPoupHhWRIUUAOoyUIlYVaAa/VbLbyiZUiyFbjQFNwiZQSGl4IDy9sO5Wrty0QLKhdZPxmgGcDo8ejn+c/6eiK9poz15Kw7Dr/vN/z6W7q++091/AQYA5mZ8GYJ9K0AAAAAASUVORK5CYII= ") left top no-repeat; 119 } 120 121 a.up { 122 background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmlJREFUeNpsU0toU0EUPfPysx/tTxuDH9SCWhUDooIbd7oRUUTMouqi2iIoCO6lceHWhegy4EJFinWjrlQUpVm0IIoFpVDEIthm0dpikpf3ZuZ6Z94nrXhhMjM3c8895977BBHB2PznK8WPtDgyWH5q77cPH8PpdXuhpQT4ifR9u5sfJb1bmw6VivahATDrxcRZ2njfoaMv+2j7mLDn93MPiNRMvGbL18L9IpF8h9/TN+EYkMffSiOXJ5+hkD+PdqcLpICWHOHc2CC+LEyA/K+cKQMnlQHJX8wqYG3MAJy88Wa4OLDvEqAEOpJd0LxHIMdHBziowSwVlF8D6QaicK01krw/JynwcKoEwZczewroTvZirlKJs5CqQ5CG8pb57FnJUA0LYCXMX5fibd+p8LWDDemcPZbzQyjvH+Ki1TlIciElA7ghwLKV4kRZstt2sANWRjYTAGzuP2hXZFpJ/GsxgGJ0ox1aoFWsDXyyxqCs26+ydmagFN/rRjymJ1898bzGzmQE0HCZpmk5A0RFIv8Pn0WYPsiu6t/Rsj6PauVTwffTSzGAGZhUG2F06hEc9ibS7OPMNp6ErYFlKavo7MkhmTqCxZ/jwzGA9Hx82H2BZSw1NTN9Gx8ycHkajU/7M+jInsDC7DiaEmo1bNl1AMr9ASFgqVu9MCTIzoGUimXVAnnaN0PdBBDCCYbEtMk6wkpQwIG0sn0PQIUF4GsTwLSIFKNqF6DVrQq+IWVrQDxAYQC/1SsYOI4pOxKZrfifiUSbDUisif7XlpGIPufXd/uvdvZm760M0no1FZcnrzUdjw7au3vu/BVgAFLXeuTxhTXVAAAAAElFTkSuQmCC ") left top no-repeat; 123 } 124 125 html[dir=rtl] a { 126 background-position-x: right; 127 } 128 129 #listingParsingErrorBox { 130 border: 1px solid black; 131 background: #fae691; 132 padding: 10px; 133 display: none; 134 } 135 </style> 136 137 <title id="title"></title> 138 139 </head> 140 141 <body> 142 143 <div id="listingParsingErrorBox" i18n-values=".innerHTML:listingParsingErrorBoxText"></div> 144 145 <span id="parentDirText" style="display:none" i18n-content="parentDirText"></span> 146 147 <h1 id="header" i18n-content="header"></h1> 148 149 <table id="table"> 150 <tr class="header"> 151 <td i18n-content="headerName"></td> 152 <td class="detailsColumn" i18n-content="headerSize"></td> 153 <td class="detailsColumn" i18n-content="headerDateModified"></td> 154 </tr> 155 </table> 156 157 </body> 158 159 </html> 160