karton/templates/index.html

{% include "header.html" %}

<form id="pasta-form" action="upload" method="POST" enctype="multipart/form-data">
    <br>
    <div id="settings">
        <div>
            <label for="expiration">Expiration</label><br>
            <select style="width: 100%;" name="expiration" id="expiration">
                <optgroup label="Expire after">
                    {% if args.default_expiry == "1min" %}
                    <option selected value="1min">
                        {%- else %}
                    <option value="1min">
                        {%- endif %}
                        1 minute
                    </option>
                    {% if args.default_expiry == "10min" %}
                    <option selected value="10min">
                        {%- else %}
                    <option value="10min">
                        {%- endif %}
                        10 minutes
                    </option>
                    {% if args.default_expiry == "1hour" %}
                    <option selected value="1hour">
                        {%- else %}
                    <option value="1hour">
                        {%- endif %}
                        1 hour
                    </option>
                    {% if args.default_expiry == "24hour" %}
                    <option selected value="24hour">
                        {%- else %}
                    <option value="24hour">
                        {%- endif %}
                        24 hours
                    </option>
                    {% if args.default_expiry == "1week" %}
                    <option selected value="1week">
                        {%- else %}
                    <option value="1week">
                        {%- endif %}
                        1 week
                    </option>
                </optgroup>
                {% if !args.no_eternal_pasta %}
                <option value="never">Never Expire</option>
                {%- endif %}
            </select>
        </div>
        {% if args.enable_burn_after %}
        <div>
            <label for="expiration">Burn After</label><br>
            <select style="width: 100%;" name="burn_after" id="burn_after">
                <optgroup label="Burn after">
                    {% if args.default_burn_after == 1 %}
                    <option selected value="1">
                        {%- else %}
                    <option value="1">
                        {%- endif %}
                        First Read
                    </option>
                    {% if args.default_burn_after == 10 %}
                    <option selected value="10">
                        {%- else %}
                    <option value="10">
                        {%- endif %}
                        10th Read
                    </option>
                    {% if args.default_burn_after == 100 %}
                    <option selected value="100">
                        {%- else %}
                    <option value="100">
                        {%- endif %}
                        100th Read
                    </option>
                    {% if args.default_burn_after == 1000 %}
                    <option selected value="1000">
                        {%- else %}
                    <option value="1000">
                        {%- endif %}
                        1000th Read
                    </option>
                    {% if args.default_burn_after == 10000 %}
                    <option selected value="10000">
                        {%- else %}
                    <option value="10000">
                        {%- endif %}
                        10000th Read
                    </option>
                </optgroup>
                {% if args.default_burn_after == 0 %}
                <option selected value="0">
                    {%- else %}
                <option value="0">
                    {%- endif %}
                    No Limit
                </option>
            </select>
        </div>
        {%- endif %}

        {% if args.highlightsyntax %}
        <div>
            <label for="syntax-highlight">Syntax</label><br>
            <select style="width: 100%;" name="syntax-highlight" id="syntax-highlight">
                <option value="none">None</option>
                <optgroup label="Source Code">
                    <option value="sh">Bash Shell</option>
                    <option value="c">C</option>
                    <option value="cpp">C++</option>
                    <option value="cs">C#</option>
                    <option value="pas">Delphi</option>
                    <option value="erl">Erlang</option>
                    <option value="go">Go</option>
                    <option value="hs">Haskell</option>
                    <option value="html">HTML</option>
                    <option value="lua">Lua</option>
                    <option value="lisp">Lisp</option>
                    <option value="java">Java</option>
                    <option value="js">JavaScript</option>
                    <option value="kt">Kotlin</option>
                    <option value="py">Python</option>
                    <option value="php">PHP</option>
                    <option value="r">R</option>
                    <option value="rs">Rust</option>
                    <option value="rb">Ruby</option>
                    <option value="sc">Scala</option>
                    <option value="swift">Swift</option>
                </optgroup>
                <optgroup label="Descriptors">
                    <!-- no toml support ;-( -->
                    <option value="json">TOML</option>
                    <option value="yaml">YAML</option>
                    <option value="json">JSON</option>
                    <option value="xml">XML</option>
                </optgroup>
            </select>
        </div>
        {%- else %}
        <input type="hidden" name="syntax-highlight" value="none">
        {%- endif %}

        <div>
            {% if args.editable || args.private %}
            <label>Other</label>
            {%- endif %}
            {% if args.editable %}
            <div>
                <input type="checkbox" id="editable" name="editable" value="editable">
                <label for="editable">Editable</label>
            </div>
            {%- endif %}
            {% if args.private %}
            <div>
                <input type="checkbox" id="private" name="private" value="private">
                <label for="private">Private</label>
            </div>
            {%- endif %}
        </div>
    </div>
    <label>Content</label>
    <textarea style="width: 100%; min-height: 100px; margin-bottom: 2em" name="content" autofocus></textarea>
    <div style="overflow:auto;">
        {% if !args.no_file_upload %}
        <div style="float: left">
            <label for="file" id="attach-file-button-label"><a role="button" id="attach-file-button">Select or drop
                    file attachment</a></label>
            <br>
            <input type="file" id="file" name="file" />
        </div>
        {% endif %}
        {% if args.readonly %}
        <b>
            <input style="width: 140px; float: right; background-color: #0076d18f;" disabled type="submit"
                value="Read Only" /></b>
        {%- else %}
        <b>
            <input style="width: 140px; float: right; background-color: #0076d18f;" type="submit" value="Save" />
        </b>
        {%- endif %}
    </div>

</form>

<script>
    const hiddenFileButton = document.getElementById('file');
    const attachFileButton = document.getElementById('attach-file-button');
    const dropContainer = document.getElementById('pasta-form');

    hiddenFileButton.addEventListener('change', function () {
        attachFileButton.textContent = "Attached: " + this.files[0].name;
    });

    dropContainer.ondragover = dropContainer.ondragenter = function (evt) {
        evt.preventDefault();
        if (hiddenFileButton.files.length == 0) {
            attachFileButton.textContent = "Drop your file here";
        } else {
            attachFileButton.textContent = "Drop your file here to replace " + hiddenFileButton.files[0].name;
        }
    };

    dropContainer.ondrop = function (evt) {
        const dataTransfer = new DataTransfer();
        dataTransfer.items.add(evt.dataTransfer.files[0]);
        hiddenFileButton.files = dataTransfer.files;
        attachFileButton.textContent = "Attached: " + hiddenFileButton.files[0].name;
        evt.preventDefault();
    };

</script>

<style>
    input::file-selector-button {
        display: none;
    }

    #settings {
        display: grid;
        grid-gap: 6px;
        grid-template-columns: repeat(auto-fit, 150px);
        grid-template-rows: repeat(1, 90px);
        margin-bottom: 0.5rem;
    }

    select {
        height: 3rem;
    }

    #attach-file-button-label {
        padding-top: 1rem;
        padding-bottom: 1rem;
        cursor: pointer;
    }

    #file {
        display: none;
    }
</style>

{% include "footer.html" %}