directory-listing-template.html

<!DOCTYPE html>

<html dir="ltr" lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="google" value="notranslate">

        <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>

        <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>

        <title id="title"></title>

    </head>

    <body>

        <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>