@paperbits/core/workshops/urls/ko/urlSelector.html

Paperbits core components.

<div class="editor flex flex-column">
    <h1>
        URLs
    </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 URLs..."
                aria-label="Search URL" aria-controls="searchResult" />
            <p id="searchResult" class="text-hide" role="region" aria-live="polite"
                data-bind="text: `URLs found: ${urls().length}`">
            </p>
        </div>
    </div>

    <!-- ko if: !working() && urls().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 URLs yet.
        </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 flex-item flex-item-grow ">
        <div class="flex-item flex-item-grow" role="listbox" data-bind="scrollable: true, listbox: {}">
            <!-- ko foreach: { data: urls, as: 'url' } -->
            <a href="#" role="option" class="list-item"
                data-bind="click: $component.selectUrl, event: { keydown: $component.keydown }, attr: { title: url.title }">
                <i aria-hidden="true" class="paperbits-icon paperbits-link-69-2"></i>
                <span class="list-item-label" data-bind="text: url.title"></span>
            </a>
            <!-- /ko -->
            <!-- ko if: $component.working -->
            <spinner></spinner>
            <!-- /ko -->
            <!-- ko ifnot: $component.working -->
            <div class="list-edge" data-bind="whenInView: $component.loadNextPage"></div>
            <!-- /ko -->
        </div>

        <div class="flex-item btn-group">
            <div class="input-group">
                <input type="text" class="form-control" data-bind="textInput: $component.uri"
                    placeholder="e.g. https://www.example.com" maxlength="2096" spellcheck="false" />
            </div>
            <button class="btn btn-default" data-bind="click: $component.createUrl">
                <i aria-hidden="true" class="paperbits-icon paperbits-simple-add"></i> Add
            </button>
            <!--ko if: selectedUrl()-->
            <button class="btn btn-default" data-bind="click: $component.deleteUrl">
                <i aria-hidden="true" class="paperbits-icon paperbits-simple-remove"></i> Delete
            </button>
            <!--/ko-->
        </div>
    </div>
</div>