readium / readium-js-viewer

👁 ReadiumJS viewer: default web app for Readium.js library
BSD 3-Clause "New" or "Revised" License
550 stars 186 forks source link

Hello, I would like to my web application integrated cloud reader, how do I modify the UI reader UI UI style and UI location #649

Closed wtfshine closed 6 years ago

wtfshine commented 6 years ago

General Instructions

This issue is a Bug|Feature Request|Enhancement|Question|Task|Other

(choose ONE from the above list and delete the others)

Related issue(s) and/or pull request(s)

Example: See also #NUMBER

Expected Behaviour

What you expected Readium to do...

Observed behaviour

Instead, Readium does...

Steps to reproduce

  1. First, do this
  2. Then do this
  3. etc.

Test file(s)

If relevant, please indicate public EPUB URL(s), or whether you can share ebook(s) privately. It is often next to impossible to reproduce bugs without the original file.

Product

Choose one of the following (and delete the others)

Additional information

Please list any additional information that might help us

Hello, I would like to my web application integrated cloud reader, how do I modify the UI reader UI UI style and UI location

danielweck commented 6 years ago

First, make sure you are able to build the existing cloud reader app by following instructions from the README: https://github.com/readium/readium-js-viewer/blob/develop/README.md

Then, modify the CSS: https://github.com/readium/readium-js-viewer/tree/master/src/css

...and the HTML templates: https://github.com/readium/readium-js-viewer/tree/master/src/templates

...and rebuild.

wtfshine commented 6 years ago

Thank you very much for your solution

wtfshine commented 6 years ago

I have a question as follows: Each time the highlight is loaded, the label position is always offset, which is why

for example: reader.on(Globals.Events.CONTENT_DOCUMENT_LOADED, function ($iframe, spineItem) { if (_initialized) { _highlightsManager.attachAnnotations($iframe, spineItem, reader.getLoadedSpineItems()); _highlightsManager.addHighlight(spineItem.idref,cfi,id,"test-highlight");
} else { _initializedLate = true; } });