@paperbits/core/workshops/media/ko/mediaSelector.html

Paperbits core components.

<div class="editor">
    <h1>
        Media
    </h1>
    <hr />

    <div class="flex-item form">
        <div class="form-group">
            <input class="form-control" type="search" role="searchbox"
                data-bind="textInput: searchPattern, valueUpdate: 'keyup', focus: true" placeholder="Search media..."
                aria-label="Search media" aria-controls="searchResult" />
            <p id="searchResult" class="text-hide" role="region" aria-live="polite"
                data-bind="text: `Media files found: ${mediaItems().length}`">
            </p>
        </div>
    </div>

    <!-- ko if: !working() && mediaItems().length === 0 -->
    <div class="flex flex-column flex-item flex-item-grow list">
        <!-- ko if: searchPattern() === "" -->
        <p class="flex-item flex-item-grow text-center">It seems that you don't have media yet. Would you like to
            <a href="#" class="btn-link" data-bind="activate: uploadMedia">upload one</a>?
        </p>
        <!-- /ko -->

        <!-- ko if: searchPattern() !== ""  -->
        <p class="flex-item flex-item-grow text-center">Could not find anything. Try to change search criteria.</p>
        <!-- /ko -->
    </div>

    <!-- /ko -->

    <div class="list flex flex-column">
        <div class="flex flex-row flex-wrap flex-item flex-item-grow" role="listbox" data-bind="scrollable: true, listbox: {}">
            <!-- ko foreach: { data: mediaItems, as: 'media' } -->
            <a role="option" class="list-item list-item-image"
                data-bind="activate: $component.selectMedia, css: { selected: $component.isSelected(media) }, attr: { 'aria-label': media.fileName() }, balloon: { activateOn: 'hoverOrFocus', isDisabled: nonPreviewable, delay: 800, position: 'right', component: { name: 'media-display', params: { item: media }}}">
                <span aria-hidden="true" class="thumbnail"
                    data-bind="style: { 'background-image': 'url('+media.thumbnailUrl()+')' }, attr: { title: media.fileName() }, event: { keydown: $component.onKeyDown }">
                </span>
            </a>
            <!-- /ko -->
            <!-- ko if: $component.working() -->
            <spinner aria-hidden="true"></spinner>
            <!-- /ko -->
            <!-- ko ifnot: $component.working -->
            <div aria-hidden="true" class="list-edge" data-bind="whenInView: $component.loadNextPage"></div>
            <!-- /ko -->
        </div>

        <div class="flex-item btn-group">
            <button class="btn btn-default" data-bind="activate: $component.uploadMedia">
                <i aria-hidden="true" class="paperbits-icon paperbits-square-upload"></i>
                Upload file
            </button>
            <button class="btn btn-default" data-bind="activate: $component.selectNone">
                <i aria-hidden="true" class="paperbits-icon paperbits-ban"></i>
                None
            </button>
        </div>
    </div>
</div>