@nypl/web-reader 3.2.5 → 4.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (39) hide show
  1. package/README.md +2 -23
  2. package/dist/cjs/index.js +62 -16
  3. package/dist/cjs/index.js.map +3 -3
  4. package/dist/esm/index.js +1074 -563
  5. package/dist/esm/index.js.map +3 -3
  6. package/dist/types/HtmlReader/types.d.ts +2 -0
  7. package/dist/types/constants.d.ts +26 -0
  8. package/dist/types/index.d.ts +0 -1
  9. package/dist/types/types.d.ts +1 -0
  10. package/dist/types/ui/HtmlSettings.d.ts +1 -0
  11. package/dist/types/ui/ToggleButton.d.ts +5 -2
  12. package/dist/types/ui/icons/Continuous.d.ts +4 -0
  13. package/dist/types/ui/icons/Day.d.ts +4 -0
  14. package/dist/types/ui/icons/EnlargeFont.d.ts +4 -0
  15. package/dist/types/ui/icons/Night.d.ts +4 -0
  16. package/dist/types/ui/icons/Paginated.d.ts +4 -0
  17. package/dist/types/ui/icons/Previous.d.ts +4 -0
  18. package/dist/types/ui/icons/ReaderSettings.d.ts +4 -0
  19. package/dist/types/ui/icons/ReduceFont.d.ts +4 -0
  20. package/dist/types/ui/icons/Reset.d.ts +4 -0
  21. package/dist/types/ui/icons/Sepia.d.ts +4 -0
  22. package/dist/types/ui/icons/TableOfContents.d.ts +4 -0
  23. package/dist/types/ui/icons/ToggleFullScreen.d.ts +4 -0
  24. package/dist/types/ui/icons/ToggleFullScreenExit.d.ts +4 -0
  25. package/dist/types/ui/icons/index.d.ts +14 -0
  26. package/dist/types/ui/menu/use-menu.d.ts +18 -18
  27. package/dist/types/ui/theme/components/button.d.ts +21 -14
  28. package/dist/types/ui/theme/foundations/fonts.d.ts +3 -0
  29. package/dist/types/ui/theme/foundations/typography.d.ts +6 -0
  30. package/package.json +13 -17
  31. package/dist/cjs/ServiceWorker/sw.js +0 -2
  32. package/dist/cjs/ServiceWorker/sw.js.map +0 -7
  33. package/dist/esm/ServiceWorker/sw.js +0 -1749
  34. package/dist/esm/ServiceWorker/sw.js.map +0 -7
  35. package/dist/types/ServiceWorker/client.d.ts +0 -6
  36. package/dist/types/ServiceWorker/constants.d.ts +0 -4
  37. package/dist/types/ServiceWorker/index.d.ts +0 -1
  38. package/dist/types/ServiceWorker/sw.d.ts +0 -19
  39. package/dist/types/ServiceWorker/types.d.ts +0 -13
package/README.md CHANGED
@@ -125,6 +125,8 @@ Most styling is included in the basic UI, but we also ship a few css files that
125
125
  1. Both the HTML and the PDF side have css that is necessary to be included for the dependencies we use to render correctly. This is built automatically into `@nypl/web-reader/dist/esm/index.css` and `@nypl/web-reader/dist/cjs/index.css`. Depending which package you are using, you should include one of those files in your bundle.
126
126
  1. The HTML Reader can inject `<style>` tags (and other tags) into the reader iframe itself, called an "injectable". This is used to add styles to the html content of the publication. More on this is below.
127
127
 
128
+ In order for the Settings panel to be displayed as intended, the fonts Roboto, Georgia, Helvetica, and OpenDyslexic must be available to your application. Georgia is web safe, meaning it is installed by default on most devices, but the others are not. One way to include them is to copy the `fonts` folder and its contents from `@nypl/web-reader/example/static` into your `/public` directory.
129
+
128
130
  ## Injectables
129
131
 
130
132
  The HTML Reader has the ability to inject custom elements into the reader iframe. This is most useful for passing stylesheets and fonts, but other elements can be injected too. It is recommended to pass the `opendyslexic` font and the default Readium stylesheets as injectables to the iframe.
@@ -177,29 +179,6 @@ const Reader = () => {
177
179
 
178
180
  We make every effort to throw useful errors. Your app should probably wrap the web reader component in a React `<ErrorBoundary>` to either display the thrown errors or a custom error state for your users in the case one is thrown. See the example app for an example using an Error Boundary.
179
181
 
180
- ## Offline
181
-
182
- The web reader is set up to allow offline reading via a custom cache and a service-worker. Setting up the SW takes some work on the part of the host application, because the service worker code we export has to run _within your application's service worker_. This provides you the flexibility to cache your app code however you want while still using our pre-built utilities to cache publication resources. Here are the recommended steps to set this up:
183
-
184
- 1. Create a `serviceWorker.ts` file that will hold your un-bundled service worker code.
185
- 1. Register the service worker. You can see `/example/registerSW.ts` for how we suggest doing this.
186
- 1. Make sure the service worker file is bundled as a separate entrypoiunt (eg. "serviceWorker.js") at the root of your domain. Most bundlers know how to handle this by recognizing `navigator.serviceWorker.register(...)`.
187
- 1. In your `serviceWorker.ts` file, write code to pre-cache your application code. This will likely include an html file, a JS bundle, and possibly some CSS resources. Also precache the CSS resources you import from this library. You can see `/example/serviceWorker.ts` for how we suggest doing this. In our case, we used a parcel plugin to generate a manifest of build files. Similar plugins exist for other build systems like webpack.
188
- 1. Call `initWebReaderSW()` **as the last item in your file**. This must be the last item because it registers a `fetch` event listener that will handle _all_ fetch events that reach it. If you try to register a fetch event handler after the `initWebReaderSW()` line, it will never be called.
189
- 1. In your application code, when you know what publications should be cached, call `usePublicationSW()` and pass it a list of `manifestUrls`. The hook will then fetch the manifest, and subsequently cache the manifest and all of the resources listed within. When the SW eventually sees a request for one of the resources, it will have it on hand in the cache and can respond immediately.
190
-
191
- ### Cache expiration
192
-
193
- You control the caching of your application files. For the publication files, we have implemented a default 1 week cache expiration. To change this, you can pass a configuration:
194
-
195
- ```ts
196
- // serviceWorker.ts
197
- initWebReaderSW({
198
- // cache for one day
199
- cacheExpirationSeconds: 24 * 60 * 60,
200
- });
201
- ```
202
-
203
182
  # Development
204
183
 
205
184
  ## Architecture