@paperbits/core
Version:
Paperbits core components.
165 lines (148 loc) • 7.54 kB
HTML
<!-- ko if: host -->
<div class="text-hide" aria-live="assertive" data-bind="livearea: {}"></div>
<div id="contentEditor" class="viewport" tabindex="0"
data-bind="host: { viewport: viewport, host: host, block: block, onDocumentCreated: onHostDocumentCreated, onDocumentDisposed: onHostDocumentDisposed }"></div>
<!-- /ko -->
<div class="shutter" data-bind="css: { 'active': shutter }">
<spinner class="fit"></spinner>
</div>
<div class="toasts" data-bind="foreach: toasts">
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<!-- <div class="toast-indicator">
<i data-bind="css: state"></i>
</div> -->
<div class="toast-container">
<h1 class="toast-header" data-bind="text: title"></h1>
<p class="toast-body" data-bind="html: content"></p>
<!-- ko if: commands().length > 0 -->
<div class="flex-item btn-group" data-bind="foreach: { data: commands, as: 'command' }">
<button tabindex="-1" class="btn btn-round" data-bind="click: command.action">
<!-- ko if: command.iconClass -->
<i aria-hidden="true" data-bind="css: command.iconClass"></i>
<!-- /ko -->
<span data-bind="text: command.title"></span>
</button>
</div>
<!-- /ko -->
</div>
</div>
</div>
<!-- ko with: activeView() -->
<div role="dialog" aria-labelledby="popupHeading" tabindex="-1"
class="toolbox toolbox-popup"
data-bind="resizable: resizing, surface: $data, dialog: {}">
<div role="document" class="editor resizable-content flex flex-column">
<!-- ko if: heading -->
<h1 id="popupHeading">
<span data-bind="text: heading"></span>
</h1>
<!-- /ko -->
<button class="btn btn-dismiss" title="Close" aria-label="Close" data-bind="click: $component.closeView">
<i aria-hidden="true" class="paperbits-icon paperbits-simple-remove"></i>
</button>
<hr />
<div class="form" data-bind="scrollable: $data.scrolling, view: $data">
</div>
</div>
</div>
<!-- /ko -->
<!-- ko if: $component.designTime -->
<!-- ko foreach: { data: contextualCommands, as: 'contextualCommand' } -->
<!-- ko foreach: { data: contextualCommand.hoverCommands, as: 'hoverCommand' } -->
<button tabindex="-1" class="fixed btn-standalone"
data-bind="contextualCommand: { element: contextualCommand.element, command: hoverCommand }">
<i aria-hidden="true" data-bind="css: hoverCommand.iconClass"></i>
</button>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: highlightedElement -->
<div class="layout-editor-selection" data-bind="highlight: highlightedElement">
<svg alignment="top left">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: highlightedElement().color }" />
</svg>
<svg alignment="top right">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: highlightedElement().color }" />
</svg>
<svg alignment="bottom left">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: highlightedElement().color }" />
</svg>
<svg alignment="bottom right">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: highlightedElement().color }" />
</svg>
</div>
<!-- /ko -->
<!-- ko if: splitterElement -->
<div class="layout-editor-splitter" data-bind="splitter: splitterElement"></div>
<!-- /ko -->
<!-- ko if: selectedElement -->
<div class="layout-editor-selection" data-bind="highlight: selectedElement">
<svg alignment="top left">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: selectedElement().color }" />
</svg>
<svg alignment="top right">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: selectedElement().color }" />
</svg>
<svg alignment="bottom left">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: selectedElement().color }" />
</svg>
<svg alignment="bottom right">
<path d="M0,0 L14,0 L14,14 L12,14 L12,2 L0,2 Z" stroke="rgba(255,255,255,.5)" stroke-width="1"
data-bind="attr: { fill: selectedElement().color }" />
</svg>
</div>
<!-- ko with: selectedElementContextualEditor() -->
<div role="listbox" class="fixed toolbox toolbox-horizontal toolbox-context"
data-bind="stickTo: { target: element, position: 'top right', offsetY: 10, placement: 'outside' }, listbox: {}">
<!-- ko foreach: { data: selectCommands, as: 'command' } -->
<a data-bind="gridCommand: command, css: command.controlType">
<!-- ko if: command.iconClass -->
<i aria-hidden="true" data-bind="css: command.iconClass"></i>
<!-- /ko -->
<!-- ko if: command.displayName && !command.iconOnly -->
<span data-bind="text: command.displayName"></span>
<!-- /ko -->
</a>
<!-- ko if: command.component -->
<div class="balloon" data-bind="component: command.component"></div>
<!-- /ko -->
<!-- /ko -->
<!-- ko if: deleteCommand -->
<a role="option" class="toolbox-button" data-bind="gridCommand: deleteCommand" aria-label="Delete widget">
<i aria-hidden="true" class="paperbits-icon paperbits-trash-simple"></i>
</a>
<!-- /ko -->
</div>
<!-- /ko -->
<!-- /ko -->
<!-- /ko -->
<input id="uploadDialog" type="file" multiple="multiple" aria-hidden="true" class="d-none" />
<!-- ko if: canPreview -->
<div class="toolbox toolbox-position-right-top">
<button tabindex="-1" class="toolbox-btn"
data-bind="visible: primaryToolboxVisible(), click: $component.enablePreviewMode, tooltip: { message: '<h1>Preview</h1><p>See the website live before publishing.<p><div class=\'subtle\'>(Ctrl+F10)</div>', position: 'left' }"
aria-label="Preview">
<i aria-hidden="true" class="paperbits-icon paperbits-l-search"></i>
</button>
<button tabindex="-1" class="toolbox-btn"
data-bind="visible: !primaryToolboxVisible(), click: $component.disablePreviewMode, tooltip: { message: '<h1>Go back</h1><p>Return to editing the content.<p><div class=\'subtle\'>(Ctrl+F10)</div>', position: 'left' }"
aria-label="Return to editing the content">
<i aria-hidden="true" class="paperbits-icon paperbits-curved-arrow-left"></i>
</button>
</div>
<!-- /ko -->
<!-- ko if: canGoBack -->
<div class="toolbox toolbox-position-right-top">
<button tabindex="-1" class="toolbox-btn"
data-bind="click: $component.returnToContentEditing, tooltip: { message: '<h1>Go back</h1><p>Return to editing the content.<p><div class=\'subtle\'>(Esc)</div>', position: 'left' }"
aria-label="Return to editing the content">
<i aria-hidden="true" class="paperbits-icon paperbits-curved-arrow-left"></i>
</button>
</div>
<!-- /ko -->