@paperbits/core/workshops/hyperlinks/ko/hyperlinkSelector.html

Paperbits core components.

<div class="editor" data-bind="scrollable: true">
    <h1>Hyperlink</h1>
    <hr />

    <div class="tabs" role="listbox" data-bind="listbox: {}">
        <div class="tab" role="presentation"
            data-bind="css: { 'tab-is-active': !hyperlinkProvider() }">
            <a role="option" data-bind="click: clearProvider, focus: true, attr: { 'aria-selected': (!hyperlinkProvider()).toString() }" title="Clear hyperlink" 
                aria-label="Clear hyperlink">
                <i aria-hidden="true" class="paperbits-icon paperbits-ban"></i>
            </a>
        </div>

        <!--ko foreach: { data: hyperlinkProviders, as: 'hyperlinkProvider' } -->
        <!--ko if: hyperlinkProvider.componentName !== 'blog-selector' -->
        <div class="tab" role="presentation"
            data-bind="css: { 'tab-is-active': $component.hyperlinkProvider() && hyperlinkProvider.componentName === $component.hyperlinkProvider().componentName }, attr: { 'title': hyperlinkProvider.name }">
            <a role="option"
                data-bind="balloon: { component: { name: hyperlinkProvider.componentName, params: { onHyperlinkSelect: $component.onHyperlinkSelected } }, closeOn: $component.hyperlink }, attr: { 'aria-label': hyperlinkProvider.name, 'aria-selected': hyperlinkProvider === $parent.hyperlinkProvider() }">
                <i aria-hidden="true" data-bind="css: hyperlinkProvider.iconClass"></i>
            </a>
        </div>
        <!--/ko-->
        <!--/ko-->
    </div>

    <!-- ko if: hyperlinkProvider -->

    <div class="form-group">
        <label for="hyperlinkTitle">
            Link points to:
        </label>
        <div class="max-w300 text-overflow">
            <b id="hyperlinkTitle" data-bind="text: $component.selection, attr: { title: selection }"></b>
        </div>
    </div>
    <!-- ko if: hyperlinkProvider -->
    <div data-bind="component: { name: hyperlinkProvider().hyperlinkDetailsComponentName, params: { hyperlink: $component.hyperlink, onHyperlinkChange: $component.onHyperlinkSelected } }"></div>
    <!--/ko-->

    <!--/ko-->


    <!-- ko ifnot: hyperlinkProvider -->
    <div class="flex flex-column">
        <div class="flex flex-column flex-item-grow tab-panel" role="tabpanel">
            <label>No link selected.</label>
        </div>
    </div>
    <!--/ko-->
</div>