@paperbits/core/workshops/navigation/ko/navigation.html

Paperbits core components.

<div class="flex flex-column fit">
    <!-- ko ifnot: working -->

    <!-- ko if: root().nodes().length === 0 -->
    <p class="flex-item flex-item-grow text-center">It seems that you don't have navigation items yet. Would you like to
        <a href="#" class="btn-link" data-bind="click: addNavigationItem">create one</a>?
    </p>
    <!-- /ko -->

    <div class="flex flex-column flex-item flex-item-grow" role="list"
        data-bind="scrollable: true, focus: { childSelector: '.list-item' }">
        <!-- ko foreach: { data: root().nodes, as: 'node' } -->
        <!-- ko template: { name: 'node', data: node } -->
        <!-- /ko-->
        <!-- /ko-->
    </div>

    <!-- /ko -->

    <!-- ko if: working -->
    <spinner></spinner>
    <!-- /ko -->

    <div class="flex-item btn-group">
        <button class="btn btn-default" data-bind="click: addNavigationItem">
            <i aria-hidden="true" class="paperbits-icon paperbits-simple-add"></i>
            Add navigation item
        </button>
    </div>
</div>


<script id="node" type="text/html">
    <div class="list-item-group list-item-group-collapsible" data-bind="dragsource: { sourceData: $data, sticky: true, ondragstart: $component.onNodeDragStart, ondragend: $component.onNodeDragEnd }, dragtarget: { targetData: $data, accept: canAccept, ondropbefore: insertBefore, ondropafter: insertAfter, flow: 'vertical', onacceptbefore: $component.onAcceptNodeBefore, onacceptafter: $component.onAcceptNodeAfter }">
        <!-- ko if: node.nodes().length > 0 -->
        <div class="list-item-collapsible">
            <button href="#" role="button" aria-label="Toggle nested items" class="list-item-collapse" data-bind="click: node.toggleCollapsed, attr: { 'aria-expanded': (!node.collapsed()).toString() }">
                <i aria-hidden="true" class="paperbits-icon paperbits-circle-delete"
                    data-bind="css: { 'paperbits-circle-add': node.collapsed }"></i>
            </button>
            <div tabindex="0" role="listitem" class="list-item" data-bind="keydown: onKeyDown, css: { selected: $component.isSelected(node) }, attr: { title: node.displayLabel }, activate: $component.selectNavigationItem, selectable: true">
                <span data-bind="text: node.displayLabel"></span>
            </div>
        </div>
        <!-- /ko -->

        <!-- ko ifnot: node.nodes().length > 0 -->
        <div tabindex="0" role="listitem" class="list-item" data-bind="css: { selected: $component.isSelected(node) }, attr: { title: node.displayLabel }, activate: $component.selectNavigationItem, selectable: true">
            <span data-bind="text: node.displayLabel"></span>
        </div>
        <!-- /ko -->

        <!-- ko ifnot: node.collapsed -->
        <div role="list">
        <!-- ko foreach: { data: node.nodes, as: 'node' } -->
        <!-- ko template: { name: 'node', data: node } --><!-- /ko-->
        <!-- /ko-->
        </div>
        <!-- /ko -->
    </div>
</script>