0.3.27 • Published 3 years ago

@fluid-topics/ft-reader-context v0.3.27

Weekly downloads
-
License
ISC
Repository
-
Last release
3 years 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/ft-app-context/build/ft-app-context.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-context/build/ft-reader-context.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-toc/build/ft-reader-toc.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-content/build/ft-reader-content.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-topic-context/build/ft-reader-topic-context.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-topic-title/build/ft-reader-topic-title.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@fluid-topics/ft-reader-topic-content/build/ft-reader-topic-content.min.js"></script>
</body>
</html>
Lit
lit@reduxjs/toolkit@fluid-topics/ft-wc-utils
@fluid-topics/ft-reader-attachments@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-title@fluid-topics/ft-reader-toc@fluid-topics/ft-reader-topic@fluid-topics/ft-reader-topic-content
1.1.100

1 year ago

1.1.107

12 months ago

1.1.106

12 months ago

1.1.105

12 months ago

1.1.104

12 months ago

1.1.103

12 months ago

1.1.102

12 months ago

1.1.101

12 months ago

1.1.92

1 year ago

1.1.121

10 months ago

1.1.91

1 year ago

1.1.120

10 months ago

1.1.90

1 year ago

1.1.96

1 year ago

1.1.95

1 year ago

1.1.94

1 year ago

1.1.93

1 year ago

1.1.99

1 year ago

1.1.98

1 year ago

1.1.97

1 year ago

1.1.109

12 months ago

1.1.111

11 months ago

1.1.119

10 months ago

1.1.118

11 months ago

1.1.117

11 months ago

1.1.116

11 months ago

1.1.115

11 months ago

1.1.114

11 months ago

1.1.113

11 months ago

1.1.112

11 months ago

1.1.81

1 year ago

1.1.85

1 year ago

1.1.84

1 year ago

1.1.83

1 year ago

1.1.82

1 year ago

1.1.89

1 year ago

1.1.88

1 year ago

1.1.87

1 year ago

1.1.86

1 year ago

1.2.19

8 months ago

1.2.20

8 months ago

1.2.23

7 months ago

1.2.24

7 months ago

1.2.21

8 months ago

1.2.22

8 months ago

1.2.27

7 months ago

1.2.25

7 months ago

1.2.26

7 months ago

1.2.0

10 months ago

1.2.8

9 months ago

1.2.7

9 months ago

1.2.6

9 months ago

1.2.5

10 months ago

1.2.4

10 months ago

1.2.3

10 months ago

1.2.2

10 months ago

1.2.1

10 months ago

1.2.12

9 months ago

1.2.13

9 months ago

1.2.10

9 months ago

1.2.11

9 months ago

1.2.16

8 months ago

1.2.17

8 months ago

1.2.14

9 months ago

1.2.15

8 months ago

1.2.9

9 months ago

1.1.78

1 year ago

1.1.77

1 year ago

1.1.79

1 year ago

1.1.80

1 year ago

1.1.76

1 year ago

1.1.75

1 year ago

1.1.70

1 year ago

1.1.74

1 year ago

1.1.73

1 year ago

1.1.72

1 year ago

1.1.71

1 year ago

1.1.69

1 year ago

1.1.68

1 year ago

1.1.67

1 year ago

1.1.66

1 year ago

1.1.65

1 year ago

1.1.63

1 year ago

1.1.62

1 year ago

1.1.64

1 year ago

1.1.61

1 year ago

1.1.39

2 years ago

1.1.41

2 years ago

1.1.40

2 years ago

1.1.45

2 years ago

1.1.44

2 years ago

1.1.43

2 years ago

1.1.42

2 years ago

1.1.49

1 year ago

1.1.48

1 year ago

1.1.47

1 year ago

1.1.46

1 year ago

1.1.52

1 year ago

1.1.51

1 year ago

1.1.50

1 year ago

1.1.56

1 year ago

1.1.55

1 year ago

1.1.54

1 year ago

1.1.53

1 year ago

1.1.59

1 year ago

1.1.58

1 year ago

1.1.57

1 year ago

1.1.60

1 year ago

1.1.38

2 years ago

1.1.37

2 years ago

1.1.36

2 years ago

1.1.35

2 years ago

1.1.34

2 years ago

1.1.33

2 years ago

1.1.32

2 years ago

1.1.31

2 years ago

1.1.29

2 years ago

1.1.30

2 years ago

1.1.28

2 years ago

1.1.27

2 years ago

1.1.26

2 years ago

1.1.25

2 years ago

1.1.24

2 years ago

1.1.23

2 years ago

1.1.22

2 years ago

1.1.21

2 years ago

1.1.20

2 years ago

1.1.19

2 years ago

1.1.18

2 years ago

1.1.17

2 years ago

1.1.16

2 years ago

1.1.15

2 years ago

1.1.14

2 years ago

1.1.13

2 years ago

1.1.12

2 years ago

1.1.11

2 years ago

1.1.10

2 years ago

1.1.9

2 years ago

1.1.8

2 years ago

1.1.7

2 years ago

1.1.6

2 years ago

1.1.5

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years 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

3 years ago

1.0.16

3 years ago

1.0.15

3 years ago

1.0.14

3 years ago

1.0.13

3 years ago

1.0.12

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago

0.3.71

3 years ago

0.3.70

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.0-alpha.1

3 years ago

1.0.0-alpha.0

3 years ago

0.3.64

3 years ago

0.3.63

3 years ago

0.3.62

3 years ago

0.3.61

3 years ago

0.3.60

3 years ago

0.3.69

3 years ago

0.3.68

3 years ago

0.3.67

3 years ago

0.3.66

3 years ago

0.3.65

3 years ago

0.3.58

3 years ago

1.0.11

3 years ago

1.0.10

3 years ago

0.3.57

3 years ago

0.3.56

3 years ago

0.3.55

3 years ago

0.3.53

3 years ago

0.3.52

3 years ago

0.3.54

3 years ago

0.3.51

3 years ago

0.3.50

3 years ago

0.3.49

3 years ago

0.3.48

3 years ago

0.3.47

3 years ago

0.3.46

3 years ago

0.3.31

3 years ago

0.3.30

3 years ago

0.3.39

3 years ago

0.3.38

3 years ago

0.3.37

3 years ago

0.3.36

3 years ago

0.3.35

3 years ago

0.3.34

3 years ago

0.3.33

3 years ago

0.3.32

3 years ago

0.3.42

3 years ago

0.3.20

3 years ago

0.3.41

3 years ago

0.3.40

3 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

3 years ago

0.3.23

3 years ago

0.3.22

3 years ago

0.3.43

3 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