@dettalant/laymic v2.2.2

laymic - overlay comic viewer

オーバーレイ表示により設置するサイトを選ばない漫画ビューワーです。

「2p見開き横読み表示 <-> 縦読み表示」の切り替えにも対応。

使用方法

漫画ビューワー単体・javascriptのみで使用する場合はLaymicクラス。

一つのページに複数のビューワーを登録したい場合・htmlによるテンプレート記述を用いたい場合はLaymicApplicatorクラスの使用を想定しています。

commonjs形式でのLaymicクラス記述

const { Laymic } = require("laymic"); 

const pages = [
  "page0.png",
  "page1.png",
  "page2.png",
  "page3.png",
  "page4.png"
];

const laymic = new Laymic(pages, {
  // 原稿画像横幅
  pageWidth: 690,
  // 原稿画像縦幅
  pageHeight: 976,
})

// ここではbutton要素のクリックイベントに展開イベントを登録している
el.addEventListener("click", () => {
  laymic.open();
})

iife形式でのLaymicApplicatorクラス記述

<!-- ビューワー1 -->
<div class="laymic_template" data-viewer-id="laymic0">
  <img data-src="page0.png">
  <img data-src="page1.png">
  <img data-src="page2.png">
  ...以下ページを好きなだけ並べる
</div>
<button class="laymic_opener" type="button" data-for="laymic0">
  ここをクリックでlaymic0のビューワー展開
</button>

<!-- ビューワー2 -->
<div class="laymic_template" data-viewer-id="laymic1">
  <img data-src="page0.png">
  <img data-src="page1.png">
  <img data-src="page2.png">
  ...以下ページを好きなだけ並べる
</div>
<button class="laymic_opener" type="button" data-for="laymic1">
  ここをクリックでlaymic0のビューワー展開
</button>

<script src="laymic.iife.min.js"></script>
<script>
const applicator = new laymic.LaymicApplicator(".laymic_template", {
  // 原稿画像横幅
  pageWidth: 690,
  // 原稿画像縦幅
  pageHeight: 976,
})
</script>

api説明

こちらを参照

Laymicの引数型詳細

LaymicPages |名前|型|説明| |---|型|---| |pages|(string | Element)[]|表示する漫画ページセット| |thumbs|string[]|サムネイルとして表示する画像セット|

LaymicOptions

LaymicClassNames

書き出すのめんどくさいのでここ参照のこと

LaymicStateClassNames

ViewerIcons

ViewerIconsに指定する値は全てIconDataである必要あり

IconData

LaymicApplicatorOptions

LaymicApplicatorが読み取るhtml固有の引数

html側に付与出来る引数は概ねLaymicOptionsと似ていますが、指定方法が異なっています。

また、iconsとclassNamesとstateNamesは指定できません。

laymic_template親要素に指定可能な設定値

laymic_template直下の子要素に指定可能な設定値

指定例

<div class="laymic_template" 
  dir="ltr"
  data-viewer-id="laymic0"
  data-viewer-direction="vertical"
  >
  <img data-src="page0.png">
  <img data-src="page1.png">
  <img data-src="page2.png">
</div>
<button class="laymic_opener" type="button" data-for="laymic0">
  ここをクリックでlaymic0のビューワー展開
</button>

laymicが追加するcss変数

css変数はどれもlaymicのroot要素（初期状態では.laymic_root）に追加されます。

laymicビューワー展開時のキーボードショートカット

共通

横読み時

横読みLTR設定時

縦読みモード固有

ズーム中固有