storage/templates/libraries.html.hbs

{{#> layouts/main has-scripts=1 }}
<div id="app" x-data="{ touchPrompt: null }">
    <nav class="breadcrumb is-inline-block is-size-5 mb-0" aria-label="breadcrumbs">
        <ul>
            <li><a class="has-text-black has-text-link" href="/library/{{library.id}}/{{library.name}}/">{{ library.name }}</a></li>
            {{#each path_segments}}
                <li>
                    <a class="has-text-black" href="/library/{{../library.id}}/{{../library.name}}/{{path}}" aria-current="page">  {{ segment }} </a>
                    </li>
            {{/each}}
        </ul>
    </nav>
    <span x-text="touchPrompt" ></span>
    <div class="dropdown is-hoverable" id="add-dropdown" x-cloak>
        <div class="dropdown-trigger">
            <button class="button is-small has-background-white-ter" aria-haspopup="true" aria-controls="dropdown-menu">
                <span class="icon is-small">
                    <i class="fas fa-plus"></i>
                </span>
            </button>
        </div>
        <div class="dropdown-menu" role="menu">
            <div class="dropdown-content">
                <a x-on:click="touchPrompt = 'file'" id="new_file" href="#" class="dropdown-item"> New File </a>
                <a onclick="touch('folder')" id="new_folder" class="dropdown-item"> New Folder </a>
                <hr class="dropdown-divider" />
                <a onclick="upload('file')" id="upload_file" href="#" class="dropdown-item"> Upload File </a>
                <a onclick="upload('folder')" id="upload_folder" href="#" class="dropdown-item"> Upload Folder </a>
            </div>
        </div>
    </div>
    <noscript><em>Javascript required to create/upload files</em></noscript>
    <div class="is-pulled-right is-inline-block">
        <div class="buttons">
            <div class="dropdown is-hoverable" id="dropdown-display" x-cloak>
                <div class="dropdown-trigger">
                    <button class="button is-small has-background-white-ter" aria-haspopup="true" aria-controls="dropdown-menu">
                        <span class="icon">
                            <i class="fa {{#if (eq options.display 'grid')}}fa-grip{{else}}fa-list{{/if}} is-small"></i>
                        </span>
                        <span>{{#if (eq options.display 'grid')}}Grid{{else}}List{{/if}}</span>
                        <span class="icon is-small">
                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                        </span>
                    </button>
                </div>
                <div class="dropdown-menu" role="menu">
                    <div class="dropdown-content">
                        <a href="?display=list&sort_key={{options.sort_key}}&sort_dir={{options.sort_dir}}" 
                            class="dropdown-item {{#if (eq options.display 'list')}}is-active{{/if}}"
                        ><i class="fa fa-list"></i> List View</a>
                        <a href="?display=grid&sort_key={{options.sort_key}}&sort_dir={{options.sort_dir}}" 
                            class="dropdown-item {{#if (eq options.display 'grid')}}is-active{{/if}}"> <i class="fa fa-grip"></i> Grid View</a>
                    </div>
                </div>
            </div>
            <div class="dropdown is-hoverable" id="dropdown-sort" x-cloak>
                <div class="dropdown-trigger">
                    <button class="button is-small has-background-white-ter" aria-haspopup="true" aria-controls="dropdown-menu">
                        <span class="icon">
                            <i class="fa fa-arrow-up is-small"></i>
                        </span>
                        <span>Sort by {{ options.sort_key }} ({{ options.sort_dir }})</span>
                        <span class="icon is-small">
                            <i class="fas fa-angle-down" aria-hidden="true"></i>
                        </span>
                    </button>
                </div>
                <div class="dropdown-menu" role="menu">
                    <div class="dropdown-content">
                        {{#each DATA.sort_keys}}
                            <a href="?display={{../options.display}}&sort_key={{this}}&sort_dir=asc"
                                class="dropdown-item {{#if (eq ../options.sort_dir "asc")}}
                                {{#if (eq ../options.sort_key this)}}
                                    is-active
                                {{/if}}
                            {{/if}}">By {{this}} ascending</a>
                            <a href="?display={{../options.display}}&sort_key={{this}}&sort_dir=desc"
                                class="dropdown-item {{#if (eq ../options.sort_dir "desc")}}
                                {{#if (eq ../options.sort_key this)}}
                                    is-active 
                                {{/if}}
                            {{/if}}">By {{this}} descending</a>
                        {{/each}}
                    </div>
                </div>
            </div>
            <div class="button is-small has-background-white-ter">
                <span class="icon">
                <i class="fa fa-info"></i>
                </span>
            </div>
            <div class="button is-small has-background-white-ter">
                <span class="icon">
                    <i class="fa fa-ellipsis"></i>
                </span>
            </div>
        </div>
    </div>
    <hr class="my-2">
    <table class="table is-fullwidth">
        <thead>
            <tr class="file-list">
                <td style="width:0"><input type="checkbox" id="file-checkbox-all" /></td>
                <td style="width:0"></td>
                <td style="width:0"></td>
                <td>Name </td>
                <td>Size </td>
                <td>Last Updated </td>
                <td>Owner </td>
            </tr>
        </thead>
        <tbody>
            {{#each files }}
                <tr class="file-list">
                    <td><input type="checkbox" class="file-checkbox" /></td>
                    <td>
                        <a class="has-text-black">
                            <span class="icon is-large">
                                {{#if favorited}}
                                    <i class="fas fa-star fa-xl"></i>
                                {{else}}
                                    <i class="far fa-star fa-xl"></i>
                                {{/if}}
                            </span>
                        </a>
                    </td>
                    <td class="filecell-icon">
                        <span class="icon is-large">
                            {{#if (eq type "folder") }}
                                <i class="fas fa-folder fa-xl"></i>
                            {{/if}}
                            {{#if (eq type "file") }}
                                <i class="fas fa-file fa-xl"></i>
                            {{/if}}
                        </span>
                    </td>
                    <td class="filecell-label pl-4">
                        {{#if (eq type "folder")}}
                        <a href="{{../parent}}{{ path }}">{{ path }}/</a>
                        {{/if}}
                        {{#if (eq type "file") }}
                         <a target="_blank" href="/file/{{../library.id}}/{{../parent}}{{ path }}">{{ path }}</a>
                        {{/if}}
                    </td>
                    <td>{{ bytes size }}</td>
                    <td>{{ updated }}</td>
                    <td>Me</td>
                </tr>
            {{/each}}
        </tbody>
    </table>
    <div class="">
        <div :class="{modal: true, 'is-active': touchPrompt != null}" id="modal-prompt" x-cloak>
            <div class="modal-background"></div>
            <div class="modal-card is-radiusless">
                <form onsubmit="touchSubmit(event)">
                    <header class="modal-card-head is-radiusless py-4">
                        <p class="modal-card-title" id="modal-prompt-title">New Item</p>
                        <button class="delete" aria-label="close"></button>
                    </header>
                    <section class="modal-card-body is-radiusless py-4">
                        <input autocomplete="off" id="modal-prompt-type" required type="hidden">
                        <input focus autocomplete="off" id="modal-prompt-input" required type="text" class="input" placeholder="">
                    </section>
                    <footer class="modal-card-foot is-radiusless py-2">
                        <div class="buttons">
                            <input type="submit" class="button is-primary" value="Create" />
                        </div>
                    </footer>
                </form>
            </div>
        </div>
    </div>
</div>
{{#*inline "scripts"}}
<script>
    const LIBRARY_ID = "{{ library.id }}";
    const LIBRARY_PATH = "/{{ parent }}";
    {{!-- let OPTIONS = JSON.parse(`{{{  options }}}`) --}}
</script>
<script src="/static/js/add_button.js"></script>
<script>
document.addEventListener('alpine:init', () => {
    console.info('Alpine init')
    Alpine.data('game', () => game);
});
</script>
<script src="//unpkg.com/alpinejs" defer></script>

{{/inline}}
{{/layouts/main}}