msc-ez-catalog

Book reading is a very common UI effect to provide different browsing experience for users. With <msc-ez-catalog />, developers could adopt this feature to web page easier. All developers need to do is just providing series image paths in config and everything will be all set.

Basic Usage

<msc-ez-catalog /> is a web component. All we need to do is put the required script into your HTML document. Then follow <msc-ez-catalog />'s html structure and everything will be all set.

• Required Script

<script
  type="module"
  src="https://your-domain/wc-msc-ez-catalog.js">        
</script>

• Structure

Put <msc-ez-catalog /> into HTML document. It will have different functions and looks with attribute mutation.

<msc-ez-catalog>
  <script type="application/json">
    {
      "pages": [
        "your_image_path_0.jpg",
        "your_image_path_1.jpg",
        "your_image_path_2.jpg",
        "your_image_path_3.jpg",
        ...
      ]
    }
  </script>
</msc-ez-catalog>

JavaScript Instantiation

<msc-ez-catalog /> could also use JavaScript to create DOM element. Here comes some examples.

<script type="module">
import { MscEzCatalog } from 'https://your-domain/wc-msc-ez-catalog.js';

const pages = [
  "your_image_path_0.jpg",
  "your_image_path_1.jpg",
  "your_image_path_2.jpg",
  "your_image_path_3.jpg"
];

// use DOM api
const nodeA = document.createElement('msc-ez-catalog');
document.body.appendChild(nodeA);
nodeA.pages = pages;

// new instance with Class
const nodeB = new MscEzCatalog();
document.body.appendChild(nodeB);
nodeB.pages = pages;

// new instance with Class & default config
const nodeC = new MscEzCatalog({ pages });
document.body.appendChild(nodeC);
</script>

Style Customization

Developers could apply styles to decorate <msc-ez-catalog />'s looking.

<style>
msc-ez-catalog {
  --msc-ez-cataloag-duration: 750ms;
  --msc-ez-cataloag-border-radius: 8px;
}
</style>

Attributes

<msc-ez-catalog /> supports some attributes to let it become more convenience & useful.

• pages

Set pages' image path for <msc-ez-catalog />. Once setting, <msc-ez-catalog /> will re-render all pages.（pages should be array and has more than 4 children）

<msc-ez-catalog
  pages='["your_image_path_0.jpg","your_image_path_1.jpg","your_image_path_2.jpg","your_image_path_3.jpg"]'
>
  ...
</msc-ez-catalog>

Keyboard shortcuts

| Key | Description | | ----------- | ----------- | | ← | Go to previous flip. | | → | Go to next flip. | | f | Toggle fullscreen.（same as double click <msc-ez-catalog />） |

Methods

| Method Signature | Description | | ----------- | ----------- | | prev() | Go to previous flip. | | next() | Go to next flip. | | seekTo(index = 1) | Switch to flip index. index will be correct to flip count once more than flip count. |

Property

| Property Name | Type | Description | | ----------- | ----------- | ----------- | | pages | Array | Getter / Setter for pages' image path. | | currentflip | Number | Getter for current flip. | | flipcount | Number | Getter for flipcount. |

Event

| Event Signature | Description | | ----------- | ----------- | | msc-ez-catalog-flip | Fired when flip occured. Developers can gather pages' information through event.detail. |

Reference

• <msc-ez-catalog /> demo
• WEBCOMPONENTS.ORG
• YouTube