Solution Reader

manga and comic reader in html allowing to read pdf or json format listing images.

Install

npm install --save sol-reader

Usage

Basic syntax

<sol-reader sol-src="directory/list.json" ></sol-reader>

Example : with pdf

<sol-reader sol-src="directory/file.pdf" ></sol-reader>

Example : with json

<sol-reader sol-src="directory/list.json" ></sol-reader>

"list.json" is a json file listing images.

Here is the file format :

{
  "title": "Test document",
  "type": "IMGS",
  "totalPage": 18,
  "pages": [
    {
      "id": "page-1",
      "src": "01.jpg",
      "pageFormat": {
        "width": 784,
        "height": 1145
      }
    },
    {
      "id": "page-2",,
      "src": "02.jpg",
      "pageFormat": {
        "width": 784,
        "height": 1145
      }
    },
    {
      "id": "page-3",
      "src": "03.jpg",
      "pageFormat": {
        "width": 1000,
        "height": 730
      }
    },
    ...
  ]
}

The paths to the image are relative urls from the location of the json file.

Image sizes are mandatory so that the reader does not have to load the images to create the entire reader.

In development: utility to parse the contents of a folder and create the json file automatically.

Example : for get current page

<sol-reader id="my-reader" sol-src="directory/list.json" ></sol-reader>

<script>
  function currentPageChange(event) {
    console.log('currentPageChange:', event)
  }
  document
    .getElementById('my-reader').addEventListener('currentPageChange', currentPageChange);
</script>

Example : for set first current page

<sol-reader id="my-reader" sol-src="directory/list.json" current-page="page-3"></sol-reader>

Feature in development

• zoom
• rendered on 2 page
• table of contents
• enable support for reading left-to-right and right-to-left