Skip to content

dettalant/laymic

Repository files navigation

laymic - overlay comic viewer

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

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

使用方法

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

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

commonjs形式でのLaymicクラス記述

const { Laymic } = require("@dettalant/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

名前 初期値 説明
icons アイコンを別のものに変更する。具体的な中身はViewerIconsを参照
stateNames ステート変化用クラス名を別のものに変更する。具体的な中身はLaymicStateClassNamesを参照
classNames 各種クラス名を別のものに変更する。具体的な中身はLaymicClassNamesを参照
viewerId "laymic" インスタンスと紐付けられる文字列
pageWidth 720 原稿画像横幅
pageHeight 1024 原稿画像縦幅
vertPageMargin 10 縦読み時のページ間余白ピクセル数値
horizPageMargin 0 横読み時のページ間余白ピクセル数値
viewerPadding 10 漫画ページ表示コンテナ周囲の余白ピクセル数値
viewerDirection "horizontal" 漫画を読み進める方向のデフォルト値。横読みなら"horizontal"、縦読みなら"vertical"
isLTR false 左から右へと流れていく表示形式を取るならtrue
isVisiblePagination false ページ送りボタンを表示する設定
isFirstSlideEmpty true 横読み時一ページ目を空白として空ける設定
isAppendEmptySlide true 横読み時 + ページ数が偶数の場合最終ページに空白を追加する
isInstantOpen true location.hashviewerIdが一致していた場合、ページ読み込み直後にビューワーを開く機能。falseで無効化
progressBarWidth "auto" 進捗バーの太さを変更する。使用できる値は"auto", "none", "tint", "medium", "bold"の五つ

LaymicClassNames

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

LaymicStateClassNames

名前 初期値 説明
active "laymic_isActive" 汎用的なアクティブ時ステート
hidden "laymic_isHidden" 汎用的な非表示時ステート
singleSlide "laymic_isSingleSlide" 横読み時1p表示がなされている際に付与
showPreference "laymic_isShowPreference" 設定画面展開中に付与
showThumbs "laymic_isShowThumbs" サムネイル表示展開中に付与
showHelp "laymic_isShowHelp" ヘルプ表示展開中に付与
fullscreen "laymic_isFullscreen" 全画面表示時に付与
unsupportedFullscreen "laymic_isUnsupportedFullscreen" 使用ブラウザがFullscreen APIに未対応の場合に付与
visibleUI "laymic_isVisibleUI" UI表示がなされている場合に付与
visiblePagination "laymic_isVisiblePagination" ページ送りボタン表示設定が有効な場合に付与
vertView "laymic_isVertView" 縦読み時に付与
ltr "laymic_isLTR" isLTR設定が有効な場合に付与
mobile "laymic_isMobile" モバイル端末の場合に付与

ViewerIcons

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

名前 説明
close 閉じるアイコン
fullscreen 全画面化アイコン
exitFullscreen 全画面終了アイコン
preference 設定アイコン
showThumbs サムネイル表示アイコン
vertView 縦読みアイコン
horizView 横読みアイコン
checkboxOuter チェックボックス外側
checkboxInner チェックボックス内部
showHelp ヘルプ表示アイコン
zoomIn 拡大アイコン
viewerDirection ヘルプ表示に用いられるページ読み方向アイコン
touchApp ヘルプ表示に用いられるタッチアイコン
chevronLeft ページ送り方向アイコンcss回転で向きを合わせるので左向きのみ用意

IconData

名前 説明
id string アイコンidとして使われる値
className string アイコンに付与するクラス名
viewBox string アイコンのviewBox
pathDs string[] アイコンのpath要素d属性に用いられる文字列配列

LaymicApplicatorOptions

名前 初期値 説明
templateSelector ".laymic_template" 読み取るlaymic templateを指定するセレクタ
openerSelector ".laymic_opener" laymic openerを指定するセレクタ
defaultViewerId "laymic" viewerId値が指定されなかった際に用いられるデフォルト値

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

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

また、iconsclassNamesstateNamesは指定できません。

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

名前 説明
dir ltr設定を有効にする(isLTRtrueである場合と同様)には"ltr"を指定
data-viewer-id viewerIdと同様
data-page-height pageHeightと同様
data-page-width pageWidthと同様
data-viewer-direction viewerDirectionと同様
data-is-visible-pagination isVisiblePaginationと同様
data-is-first-slide-empty isFirstSlideEmptyと同様
data-is-append-empty-slide isAppendEmptySlideと同様
data-is-instant-open isInstantOpenと同様
data-vert-page-margin vertPageMarginと同様
data-horiz-page-margin horizPageMarginと同様
data-viewer-padding viewerPaddingと同様
data-progress-bar-width progressBarWidthと同様

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

名前 説明 備考
data-src src属性の代わりとして使用可能 <img>要素にのみ付与可能
data-thumb-src そのページのサムネイル画像を別途指定する

指定例

<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)に追加されます。

変数名 意味合い
--page-width 現在ページ横幅
--page-height 現在ページ縦幅
--page-max-width 最大ページ横幅。ページがこれ以上の横幅になることはない
--page-max-height 最大ページ縦幅。ページがこれ以上の縦幅になることはない
--page-scale-ratio 現在のページ縮小比率。css scaleに用いるための変数
--progressbar-width 進捗バーの太さ数値
--viewer-padding ビューワー余白数値
--js-vh 正確なvh数値計算結果。少し古いandroid対応などのために用いる

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

共通

キー名 効果
Escape ビューワー、展開中モーダル要素を閉じる
Shift + Space, PageUp 前のページへ
Space, PageDown 次のページへ
D 縦読み/横読み切り替え
V ビューワーUI表示切り替え
P 設定画面表示切り替え
F フルスクリーン切り替え
T サムネイル画面表示切り替え
H ヘルプ表示切り替え
Z ズーム切り替え(モバイルブラウザでは無効)
Tab ビューワーUIを表示(ブラウザデフォルトのフォーカス移動も行う)

横読み時

キー名 効果
ArrowRight 前のページへ
ArrowLeft 次のページへ

横読みLTR設定時

キー名 効果
ArrowLeft 前のページへ
ArrowRight 次のページへ

縦読みモード固有

キー名 効果
ArrowUp 前のページへ
ArrowDown 次のページへ

ズーム中固有

キー名 効果
ArrowUp 上へ少しスクロール
ArrowDown 下へ少しスクロール
ArrowLeft 左へ少しスクロール
ArrowRight 右へ少しスクロール
Shift + Space, PageUp 上へ大きくスクロール
Space, PageDown 下へ大きくスクロール

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published