@paperbits/core/workshops/page/ko/pageSelector.html

Paperbits core components.

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

    <!-- ko if: !working() && pages().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 pages 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="flex flex-column flex-item flex-item-grow list" role="list" data-bind="scrollable: true">
        <!-- ko foreach: { data: pages, as: 'page' } -->
        <div class="list-item-group">
            <a href="#" role="listitem" class="list-item"
                data-bind="css: { selected: $component.isSelected(page) }, click: $component.selectPage, attr: { title: page.title }">
                <i aria-hidden="true" class="paperbits-icon paperbits-single-content-03"></i>
                <span class="list-item-label" data-bind="text: title"></span>
            </a>

            <!-- ko if: anchors() && anchors().length > 0 -->
            <div class="list-item-group list-item-group-collapsible" data-bind="foreach: anchors" role="list">
                <a href="#" role="listitem" class="list-item"
                    data-bind="click: $component.selectAnchor, attr: { title: shortTitle }">
                    <i aria-hidden="true" class="paperbits-icon paperbits-anchor"></i>
                    <span class="list-item-label" data-bind="text: shortTitle"></span>
                </a>
            </div>
            <!-- /ko -->
        </div>
        <!-- /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>