1.1.80 • Published 8 months ago

@fluid-topics/ft-reader-context v1.1.80

Weekly downloads
-
License
ISC
Repository
-
Last release
8 months ago

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-context

HTML

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>
Lit
@fluid-topics/ft-app-context@fluid-topics/ft-wc-utils@reduxjs/toolkitlit
@fluid-topics/ft-reader-title@fluid-topics/ft-reader-toc@fluid-topics/ft-reader-topic@fluid-topics/ft-reader-topic-content@fluid-topics/ft-reader-current-page-toc@fluid-topics/ft-reader-feedback@fluid-topics/ft-reader-metadata@fluid-topics/ft-reader-navigation-button@fluid-topics/ft-reader-page-title@fluid-topics/ft-reader-page-toc@fluid-topics/ft-reader-attachments
1.1.78

8 months ago

1.1.77

8 months ago

1.1.79

8 months ago

1.1.80

8 months ago

1.1.76

8 months ago

1.1.75

8 months ago

1.1.70

9 months ago

1.1.74

8 months ago

1.1.73

8 months ago

1.1.72

8 months ago

1.1.71

9 months ago

1.1.69

9 months ago

1.1.68

9 months ago

1.1.67

9 months ago

1.1.66

9 months ago

1.1.65

9 months ago

1.1.63

9 months ago

1.1.62

10 months ago

1.1.64

9 months ago

1.1.61

10 months ago

1.1.39

1 year ago

1.1.41

1 year ago

1.1.40

1 year ago

1.1.45

12 months ago

1.1.44

12 months ago

1.1.43

1 year ago

1.1.42

1 year ago

1.1.49

11 months ago

1.1.48

11 months ago

1.1.47

12 months ago

1.1.46

12 months ago

1.1.52

11 months ago

1.1.51

11 months ago

1.1.50

11 months ago

1.1.56

11 months ago

1.1.55

11 months ago

1.1.54

11 months ago

1.1.53

11 months ago

1.1.59

10 months ago

1.1.58

10 months ago

1.1.57

10 months ago

1.1.60

10 months ago

1.1.38

1 year ago

1.1.37

1 year ago

1.1.36

1 year ago

1.1.35

1 year ago

1.1.34

1 year ago

1.1.33

1 year ago

1.1.32

1 year ago

1.1.31

1 year ago

1.1.29

1 year ago

1.1.30

1 year ago

1.1.28

1 year ago

1.1.27

1 year ago

1.1.26

1 year ago

1.1.25

1 year ago

1.1.24

1 year ago

1.1.23

1 year ago

1.1.22

1 year ago

1.1.21

1 year ago

1.1.20

1 year ago

1.1.19

1 year ago

1.1.18

1 year ago

1.1.17

1 year ago

1.1.16

1 year ago

1.1.15

1 year ago

1.1.14

1 year ago

1.1.13

1 year ago

1.1.12

1 year ago

1.1.11

1 year ago

1.1.10

1 year ago

1.1.9

1 year ago

1.1.8

1 year ago

1.1.7

1 year ago

1.1.6

1 year ago

1.1.5

1 year ago

1.1.4

1 year ago

1.1.3

1 year ago

1.1.2

1 year ago

1.1.1

1 year ago

1.0.63

2 years ago

1.1.0

2 years ago

1.0.62

2 years ago

1.0.61

2 years ago

1.0.60

2 years ago

1.0.39

2 years ago

1.0.38

2 years ago

1.0.40

2 years ago

1.0.44

2 years ago

1.0.43

2 years ago

1.0.42

2 years ago

1.0.41

2 years ago

1.0.48

2 years ago

1.0.47

2 years ago

1.0.46

2 years ago

1.0.45

2 years ago

1.0.49

2 years ago

1.0.51

2 years ago

1.0.50

2 years ago

1.0.55

2 years ago

1.0.54

2 years ago

1.0.53

2 years ago

1.0.52

2 years ago

1.0.59

2 years ago

1.0.58

2 years ago

1.0.57

2 years ago

1.0.56

2 years ago

1.0.19

2 years ago

1.0.18

2 years ago

1.0.22

2 years ago

1.0.21

2 years ago

1.0.20

2 years ago

1.0.26

2 years ago

1.0.25

2 years ago

1.0.24

2 years ago

1.0.23

2 years ago

1.0.29

2 years ago

1.0.28

2 years ago

1.0.27

2 years ago

1.0.33

2 years ago

1.0.31

2 years ago

1.0.30

2 years ago

1.0.37

2 years ago

1.0.36

2 years ago

1.0.35

2 years ago

1.0.34

2 years ago

1.0.17

2 years ago

1.0.16

2 years ago

1.0.15

2 years ago

1.0.14

2 years ago

1.0.13

2 years ago

1.0.12

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago

0.3.71

2 years ago

0.3.70

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.0-alpha.1

2 years ago

1.0.0-alpha.0

2 years ago

0.3.64

2 years ago

0.3.63

2 years ago

0.3.62

2 years ago

0.3.61

2 years ago

0.3.60

2 years ago

0.3.69

2 years ago

0.3.68

2 years ago

0.3.67

2 years ago

0.3.66

2 years ago

0.3.65

2 years ago

0.3.58

2 years ago

1.0.11

2 years ago

1.0.10

2 years ago

0.3.57

2 years ago

0.3.56

2 years ago

0.3.55

2 years ago

0.3.53

2 years ago

0.3.52

2 years ago

0.3.54

2 years ago

0.3.51

2 years ago

0.3.50

2 years ago

0.3.49

2 years ago

0.3.48

2 years ago

0.3.47

2 years ago

0.3.46

2 years ago

0.3.31

3 years ago

0.3.30

3 years ago

0.3.39

2 years ago

0.3.38

2 years ago

0.3.37

2 years ago

0.3.36

2 years ago

0.3.35

2 years ago

0.3.34

3 years ago

0.3.33

3 years ago

0.3.32

3 years ago

0.3.42

2 years ago

0.3.20

3 years ago

0.3.41

2 years ago

0.3.40

2 years ago

0.3.28

3 years ago

0.3.27

3 years ago

0.3.26

3 years ago

0.3.25

3 years ago

0.3.24

3 years ago

0.3.45

2 years ago

0.3.23

3 years ago

0.3.22

3 years ago

0.3.43

2 years ago

0.3.21

3 years ago

0.3.19

3 years ago

0.3.18

3 years ago

0.3.17

3 years ago

0.3.16

3 years ago

0.3.15

3 years ago

0.3.14

3 years ago

0.3.13

3 years ago

0.3.12

3 years ago

0.3.11

3 years ago

0.3.9

3 years ago

0.3.8

3 years ago

0.3.7

3 years ago