directory-listing-template-static.html

<style>
    h1 {
        border-bottom: 1px solid #c0c0c0;
        margin-bottom: 10px;
        padding-bottom: 10px;
        white-space: nowrap;
    }

    table {
        border-collapse: collapse;
    }

    th {
        cursor: pointer;
    }

    td.detailsColumn {
        -webkit-padding-start: 2em;
        text-align: end;
        white-space: nowrap;
    }

    a.icon {
        -webkit-padding-start: 1.5em;
        text-decoration: none;
        user-select: auto;
    }

    a.icon:hover {
        text-decoration: underline;
    }

    a.file {
        background : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAIAAACQkWg2AAAABnRSTlMAAAAAAABupgeRAAABHUlEQVR42o2RMW7DIBiF3498iHRJD5JKHurL+CRVBp+i2T16tTynF2gO0KSb5ZrBBl4HHDBuK/WXACH4eO9/CAAAbdvijzLGNE1TVZXfZuHg6XCAQESAZXbOKaXO57eiKG6ft9PrKQIkCQqFoIiQFBGlFIB5nvM8t9aOX2Nd18oDzjnPgCDpn/BH4zh2XZdlWVmWiUK4IgCBoFMUz9eP6zRN75cLgEQhcmTQIbl72O0f9865qLAAsURAAgKBJKEtgLXWvyjLuFsThCSstb8rBCaAQhDYWgIZ7myM+TUBjDHrHlZcbMYYk34cN0YSLcgS+wL0fe9TXDMbY33fR2AYBvyQ8L0Gk8MwREBrTfKe4TpTzwhArXWi8HI84h/1DfwI5mhxJamFAAAAAElFTkSuQmCC ") left top no-repeat;
    }

    a.dir {
        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;
    }

    a.up {
        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;
    }

    html[dir=rtl] a {
        background-position-x: right;
    }

    #parentDirLinkBox {
        margin-bottom: 10px;
        padding-bottom: 10px;
    }

    #listingParsingErrorBox {
        border: 1px solid black;
        background: #fae691;
        padding: 10px;
        display: none;
    }
</style>

<script>
    function addRow(name, url, isdir,
                    size, size_string, date_modified, date_modified_string) {
        if (name == "." || name == "..")
            return;

        var root = document.location.pathname;
        if (root.substr(-1) !== "/")
            root += "/";

        var tbody = document.getElementById("tbody");
        var row = document.createElement("tr");
        var file_cell = document.createElement("td");
        var link = document.createElement("a");

        link.className = isdir ? "icon dir" : "icon file";

        if (isdir) {
            name = name + "/";
            url = url + "/";
            size = 0;
            size_string = "";
        } else {
            link.draggable = "true";
            link.addEventListener("dragstart", onDragStart, false);
        }
        link.innerText = name;
        link.href = root + url;

        file_cell.dataset.value = name;
        file_cell.appendChild(link);

        row.appendChild(file_cell);
        row.appendChild(createCell(size, size_string));
        row.appendChild(createCell(date_modified, date_modified_string));

        tbody.appendChild(row);
    }

    function onDragStart(e) {
        var el = e.srcElement;
        var name = el.innerText.replace(":", "");
        var download_url_data = "application/octet-stream:" + name + ":" + el.href;
        e.dataTransfer.setData("DownloadURL", download_url_data);
        e.dataTransfer.effectAllowed = "copy";
    }

    function createCell(value, text) {
        var cell = document.createElement("td");
        cell.setAttribute("class", "detailsColumn");
        cell.dataset.value = value;
        cell.innerText = text;
        return cell;
    }

    function start(location) {
        var header = document.getElementById("header");
        header.innerText = header.innerText.replace("LOCATION", location);

        document.getElementById("title").innerText = header.innerText;
    }

    function onHasParentDirectory() {
        var box = document.getElementById("parentDirLinkBox");
        box.style.display = "block";

        var root = document.location.pathname;
        if (!root.endsWith("/"))
            root += "/";

        var link = document.getElementById("parentDirLink");
        link.href = root + "..";
    }

    function onListingParsingError() {
        var box = document.getElementById("listingParsingErrorBox");
        box.innerHTML = box.innerHTML.replace("LOCATION", encodeURI(document.location)
                                              + "?raw");
        box.style.display = "block";
    }

    function sortTable(column) {
        var theader = document.getElementById("theader");
        var oldOrder = theader.cells[column].dataset.order || '1';
        oldOrder = parseInt(oldOrder, 10)
        var newOrder = 0 - oldOrder;
        theader.cells[column].dataset.order = newOrder;

        var tbody = document.getElementById("tbody");
        var rows = tbody.rows;
        var list = [], i;
        for (i = 0; i < rows.length; i++) {
            list.push(rows[i]);
        }

        list.sort(function(row1, row2) {
            var a = row1.cells[column].dataset.value;
            var b = row2.cells[column].dataset.value;
            if (column) {
                a = parseInt(a, 10);
                b = parseInt(b, 10);
                return a > b ? newOrder : a < b ? oldOrder : 0;
            }

            // Column 0 is text.
            if (a > b)
                return newOrder;
            if (a < b)
                return oldOrder;
            return 0;
        });

        // Appending an existing child again just moves it.
        for (i = 0; i < list.length; i++) {
            tbody.appendChild(list[i]);
        }
    }

    // Add event handlers to column headers.
    function addHandlers(element, column) {
        element.onclick = (e) => sortTable(column);
        element.onkeydown = (e) => {
            if (e.key == 'Enter' || e.key == ' ') {
                sortTable(column);
                e.preventDefault();
            }
        };
    }

    function onLoad() {
        addHandlers(document.getElementById('nameColumnHeader'), 0);
        addHandlers(document.getElementById('sizeColumnHeader'), 1);
        addHandlers(document.getElementById('dateColumnHeader'), 2);
    }

    window.addEventListener('DOMContentLoaded', onLoad);
</script>


<div id="listingParsingErrorBox">Oh, no! This server is sending data Google Chrome can't understand. Please <a href="http://code.google.com/p/chromium/issues/entry">report a bug</a>, and include the <a href="LOCATION">raw listing</a>.</div>

<h1 id="header">Index of LOCATION</h1>

<div id="parentDirLinkBox" style="display:none">
    <a id="parentDirLink" class="icon up">
        <span id="parentDirText">[parent directory]</span>
    </a>
</div>

<table>
    <thead>
        <tr class="header" id="theader">
            <th id="nameColumnHeader" tabindex=0 role="button">Name</th>
            <th id="sizeColumnHeader" class="detailsColumn" tabindex=0 role="button">
                Size
            </th>
            <th id="dateColumnHeader" class="detailsColumn" tabindex=0 role="button">
                Date Modified
            </th>
        </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>

</body>

</html>
<script>// Copyright (c) 2012 The Chromium Authors. All rights reserved.
    // Use of this source code is governed by a BSD-style license that can be
    // found in the LICENSE file.

    /**
 * @fileoverview This file defines a singleton which provides access to all data
 * that is available as soon as the page's resources are loaded (before DOM
 * content has finished loading). This data includes both localized strings and
 * any data that is important to have ready from a very early stage (e.g. things
 * that must be displayed right away).
 *
 * Note that loadTimeData is not guaranteed to be consistent between page
 * refreshes (https://crbug.com/740629) and should not contain values that might
 * change if the page is re-opened later.
 */

    // #import {assert} from './assert.m.js';
    // #import {parseHtmlSubset} from './parse_html_subset.m.js';

    /**
 * @typedef {{
 *   substitutions: (!Array<string>|undefined),
 *   attrs: (!Array<string>|undefined),
 *   tags: (!Array<string>|undefined),
 * }}
 */
    /* #export */ let SanitizeInnerHtmlOpts;

    // eslint-disable-next-line no-var
    /* #export */ /** @type {!LoadTimeData} */ var loadTimeData;

    class LoadTimeData {
        constructor() {
            /** @type {Object} */
            this.data_;
        }

        /**
   * Sets the backing object.
   *
   * Note that there is no getter for |data_| to discourage abuse of the form:
   *
   *     var value = loadTimeData.data()['key'];
   *
   * @param {Object} value The de-serialized page data.
   */
        set data(value) {
            expect(!this.data_, 'Re-setting data.');
            this.data_ = value;
        }

        /**
   * Returns a JsEvalContext for |data_|.
   * @returns {JsEvalContext}
   */
        createJsEvalContext() {
            return new JsEvalContext(this.data_);
        }

        /**
   * @param {string} id An ID of a value that might exist.
   * @return {boolean} True if |id| is a key in the dictionary.
   */
        valueExists(id) {
            return id in this.data_;
        }

        /**
   * Fetches a value, expecting that it exists.
   * @param {string} id The key that identifies the desired value.
   * @return {*} The corresponding value.
   */
        getValue(id) {
            expect(this.data_, 'No data. Did you remember to include strings.js?');
            const value = this.data_[id];
            expect(typeof value !== 'undefined', 'Could not find value for ' + id);
            return value;
        }

        /**
   * As above, but also makes sure that the value is a string.
   * @param {string} id The key that identifies the desired string.
   * @return {string} The corresponding string value.
   */
        getString(id) {
            const value = this.getValue(id);
            expectIsType(id, value, 'string');
            return /** @type {string} */ (value);
        }

        /**
   * Returns a formatted localized string where $1 to $9 are replaced by the
   * second to the tenth argument.
   * @param {string} id The ID of the string we want.
   * @param {...(string|number)} var_args The extra values to include in the
   *     formatted output.
   * @return {string} The formatted string.
   */
        getStringF(id, var_args) {
            const value = this.getString(id);
            if (!value) {
                return '';
            }

            const args = Array.prototype.slice.call(arguments);
            args[0] = value;
            return this.substituteString.apply(this, args);
        }

        /**
   * Make a string safe for use with with Polymer bindings that are
   * inner-h-t-m-l (or other innerHTML use).
   * @param {string} rawString The unsanitized string.
   * @param {SanitizeInnerHtmlOpts=} opts Optional additional allowed tags and
   *     attributes.
   * @return {string}
   */
        sanitizeInnerHtml(rawString, opts) {
            opts = opts || {};
            return parseHtmlSubset('<b>' + rawString + '</b>', opts.tags, opts.attrs)
                .firstChild.innerHTML;
        }

        /**
   * Returns a formatted localized string where $1 to $9 are replaced by the
   * second to the tenth argument. Any standalone $ signs must be escaped as
   * $$.
   * @param {string} label The label to substitute through.
   *     This is not an resource ID.
   * @param {...(string|number)} var_args The extra values to include in the
   *     formatted output.
   * @return {string} The formatted string.
   */
        substituteString(label, var_args) {
            const varArgs = arguments;
            return label.replace(/\$(.|$|\n)/g, function(m) {
                assert(m.match(/\$[$1-9]/), 'Unescaped $ found in localized string.');
                return m === '$$' ? '$' : varArgs[m[1]];
            });
        }

        /**
   * Returns a formatted string where $1 to $9 are replaced by the second to
   * tenth argument, split apart into a list of pieces describing how the
   * substitution was performed. Any standalone $ signs must be escaped as $$.
   * @param {string} label A localized string to substitute through.
   *     This is not an resource ID.
   * @param {...(string|number)} var_args The extra values to include in the
   *     formatted output.
   * @return {!Array<!{value: string, arg: (null|string)}>} The formatted
   *     string pieces.
   */
        getSubstitutedStringPieces(label, var_args) {
            const varArgs = arguments;
            // Split the string by separately matching all occurrences of $1-9 and of
            // non $1-9 pieces.
            const pieces = (label.match(/(\$[1-9])|(([^$]|\$([^1-9]|$))+)/g) ||
                            []).map(function(p) {
                // Pieces that are not $1-9 should be returned after replacing $$
                // with $.
                if (!p.match(/^\$[1-9]$/)) {
                    assert(
                        (p.match(/\$/g) || []).length % 2 === 0,
                        'Unescaped $ found in localized string.');
                    return {value: p.replace(/\$\$/g, '$'), arg: null};
                }

                // Otherwise, return the substitution value.
                return {value: varArgs[p[1]], arg: p};
            });

            return pieces;
        }

        /**
   * As above, but also makes sure that the value is a boolean.
   * @param {string} id The key that identifies the desired boolean.
   * @return {boolean} The corresponding boolean value.
   */
        getBoolean(id) {
            const value = this.getValue(id);
            expectIsType(id, value, 'boolean');
            return /** @type {boolean} */ (value);
        }

        /**
   * As above, but also makes sure that the value is an integer.
   * @param {string} id The key that identifies the desired number.
   * @return {number} The corresponding number value.
   */
        getInteger(id) {
            const value = this.getValue(id);
            expectIsType(id, value, 'number');
            expect(value === Math.floor(value), 'Number isn\'t integer: ' + value);
            return /** @type {number} */ (value);
        }

        /**
   * Override values in loadTimeData with the values found in |replacements|.
   * @param {Object} replacements The dictionary object of keys to replace.
   */
        overrideValues(replacements) {
            expect(
                typeof replacements === 'object',
                'Replacements must be a dictionary object.');
            for (const key in replacements) {
                this.data_[key] = replacements[key];
            }
        }
    }

    /**
   * Checks condition, displays error message if expectation fails.
   * @param {*} condition The condition to check for truthiness.
   * @param {string} message The message to display if the check fails.
   */
    function expect(condition, message) {
        if (!condition) {
            console.error(
                'Unexpected condition on ' + document.location.href + ': ' + message);
        }
    }

    /**
   * Checks that the given value has the given type.
   * @param {string} id The id of the value (only used for error message).
   * @param {*} value The value to check the type on.
   * @param {string} type The type we expect |value| to be.
   */
    function expectIsType(id, value, type) {
        expect(
            typeof value === type, '[' + value + '] (' + id + ') is not a ' + type);
    }

    expect(!loadTimeData, 'should only include this file once');
    loadTimeData = new LoadTimeData;

    // Expose |loadTimeData| directly on |window|. This is only necessary by the
    // auto-generated load_time_data.m.js, since within a JS module the scope is
    // local.
    window.loadTimeData = loadTimeData;

    /* #ignore */ console.warn('crbug/1173575, non-JS module files deprecated.');

    function drag(evt) {
        evt.dataTransfer.dropEffect = 'copy';
        evt.preventDefault();
        return false;
    }
    function drop(evt) {
        evt.dataTransfer.dropEffect = 'copy';
        evt.preventDefault();
        handleDrop(evt);
        return false;
    }

    async function handleDrop(evt) {
        let items = evt.dataTransfer.items;
        if (items) {
            let files = [];
            for (let i=0; i<items.length; i++) {
                if (items[i].kind === 'file') files.push(items[i].getAsFile());
            }
            for (let i=0; i<files.length; i++) {
                const file = files[i];
                try {
                    await doupload(file.name, await file.arrayBuffer());
                } catch(e) {
                    console.warn("Failed to upload file", e);
                }
            }
            if (files.length !== 0) window.location.reload();
        }
    }

    function doupload(name, data) {
        return fetch(window.location.pathname + encodeURIComponent(name), {method:'PUT',body:data})
    }

    document.addEventListener("DOMContentLoaded", function(e) {
        console.log("DOM CONTENT LOADED");
        document.addEventListener("dragover", drag, false);
        document.addEventListener("dragleave", drag, false);
        document.addEventListener("dragenter", drag, false);
        document.addEventListener("drop", drop, false);
    })

</script><script>loadTimeData.data = {"header":"Index of LOCATION","headerDateModified":"Date Modified","headerName":"Name","headerSize":"Size","language":"en","listingParsingErrorBoxText":"Oh, no! This server is sending data Google Chrome can't understand. Please \u003Ca href=\"http://code.google.com/p/chromium/issues/entry\">report a bug\u003C/a>, and include the \u003Ca href=\"LOCATION\">raw listing\u003C/a>.","parentDirText":"[parent directory]","textdirection":"ltr"};</script>