@paperbits/core/workshops/popups/ko/popupSelector.html

Paperbits core components.

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

    <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 if: !working() && popups().length === 0 -->
            <!-- ko if: searchPattern() === "" -->
            <p class="text-center">
                It seems that you don't have popups yet.
            </p>
            <!-- /ko -->
            <!-- ko if: searchPattern() !== ""  -->
            <p class="text-center">
                Could not find anything. Try to change search criteria.</p>
            <!-- /ko -->
            <!-- /ko -->

            <!-- ko foreach: { data: popups, as: 'popup' } -->
            <a role="option" class="list-item" data-bind="activate: $component.selectPopup, attr: { title: popup.title }">
                <i aria-hidden="true" class="paperbits-icon paperbits-polaroid"></i>
                <span class="list-item-label" data-bind="text: popup.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.title" placeholder="e.g. Popup"
                    maxlength="2096" />
            </div>
            <button class="btn btn-default" data-bind="click: $component.createPopup">
                <i aria-hidden="true" class="paperbits-icon paperbits-simple-add"></i> Add
            </button>
            <!--ko if: selectedPopup()-->
            <button class="btn btn-default" data-bind="click: $component.deletePopup">
                <i aria-hidden="true" class="paperbits-icon paperbits-simple-remove"></i> Delete
            </button>
            <!--/ko-->
        </div>
    </div>
</div>