@fluid-topics/ft-reader-context
v1.1.82
Published
Context block for integrated reader components
Downloads
1,686
Readme
Context block for integrated reader components.
All children components with the ft-reader prefix will share the same context and interact with each other.
For example navigating using the component ft-reader-toc will change what topics the component ft-reader-content
displays
and topics visible in ft-reader-content will be highlighted in ft-reader-toc.
This component requires the Fluid Topics public API to be imported independently.
Install
Javascript
npm install @fluid-topics/ft-reader-context
yarn add @fluid-topics/ft-reader-contextHTML
To be placed at the end of HTML body:
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-context/build/ft-reader-context.min.js"></script>Usage
Lit
import { html } from "lit"
import "@fluid-topics/public-api/dist/fluidtopics.min.js"
import "@fluid-topics/ft-app-context"
import "@fluid-topics/ft-reader-context"
import "@fluid-topics/ft-reader-toc"
import "@fluid-topics/ft-reader-content"
import "@fluid-topics/ft-reader-topic-context"
import "@fluid-topics/ft-reader-topic-title"
import "@fluid-topics/ft-reader-topic-content"
function render() {
return html`
<ft-app-context
baseUrl="https://doc.fluidtopics.com/"
apiIntegrationIdentifier="custom-integration">
<ft-reader-context mapId="MdDo16IjKjJdTxsdVYuWjA">
<ft-reader-toc></ft-reader-toc>
<ft-reader-content></ft-reader-content>
<ft-reader-toc scope="current-page"></ft-reader-toc>
</ft-reader-context>
</ft-app-context>
`
}HTML
<html lang="en">
<head>
<title>My custom reader</title>
</head>
<body>
<style>
ft-reader-context {
display: flex;
height: 100%;
overflow: hidden;
gap: 8px;
}
ft-reader-context > * {
height: 100%;
overflow: auto;
}
ft-reader-toc {
flex-shrink: 0;
flex-grow: 0;
width: 20%;
}
ft-reader-content {
flex-shrink: 1;
flex-grow: 1;
}
ft-reader-toc[scope="current-page"][empty] {
display: none;
}
</style>
<ft-app-context
baseUrl="<Tenant base URL>"
apiIntegrationIdentifier="custom-integration">
<ft-reader-context mapId="<Structured publication identifier>">
<ft-reader-toc></ft-reader-toc>
<ft-reader-content></ft-reader-content>
<ft-reader-toc scope="current-page"></ft-reader-toc>
</ft-reader-context>
</ft-app-context>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/dist/fluidtopics.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/ft-app-context/build/ft-app-context.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/ft-reader-context/build/ft-reader-context.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/ft-reader-toc/build/ft-reader-toc.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/ft-reader-content/build/ft-reader-content.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/ft-reader-topic-context/build/ft-reader-topic-context.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/ft-reader-topic-title/build/ft-reader-topic-title.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fluid-topics/public-api/ft-reader-topic-content/build/ft-reader-topic-content.min.js"></script>
</body>
</html>