ToraViewerの最後のページが初期化する

ToraViewerには、漫画の最後のページに任意の要素を表示する機能があります。 同じページ上にあるidの要素を第二引数で指定し、表示する仕組みです。

let comic_array /* 漫画の画像URLの配列 */
let id = 'lastpage' /* 最後のページに表示するid名 */
let setting = { lastPageElement: document.getElementById( id ) } /* 第二引数 */

toraViewer( comic_array , setting ) /* ToraVIewerを起動 */
        

上記の例では、HTMLにてidがlastpageの要素を作成すると、最後のページにそれが表示されます。

問題

一度ToraViewerで漫画Aを表示し、ビュワーを消して再度漫画Aを表示したとき、（ココ！のタイミング）最後のページの表示が初期表示に変わってしまいます。

原因

DOMを確認すると、ToraViewerで表示している漫画Aを表示するときにidの要素が消え、ToraViewer内で表示されます。 ToraViewerを閉じるとき親要素のToraViewerをDOMから削除しています。そのため、 ページからid要素がToraVIewerと共に消えてしまい、idが存在しないことで初期表示になってしまうと思われます。

※詳しくはToraViewerのGithubへ

解決法

toraViewer関数を新たな関数で作り直し、前後でidの要素をcloneNodeで複製します。（黒魔術寄りかも…）

/*  最後のページ用の要素を格納しておくid  */
const COMIC_THANKS = document.getElementById('comic_thanks')

/*  toraViewer関数を包括する新しい関数  */
function toraViewer2(comic_url, endpage_id) {
    toraViewer( comic_url, { lastPageElement: document.getElementById( endpage_id ) })
    /*  最後のページが消えないよう、id要素を複製  */
    let endpage = document.getElementById(endpage_id).cloneNode(true)
    COMIC_THANKS.id.appendChild(endpage)
};
        

番外編：イベントを含むページ

最後のページ内でイベントリスナーを使ってる場合、イベントも追加しなおす必要があります。

/*  最後のページ用の要素を格納しておくid  */
const COMIC_THANKS = document.getElementById('comic_thanks')

/*  toraViewer関数を包括する新しい関数  */
function toraViewer2(comic_url, endpage_id) {
     toraViewer( comic_url, { lastPageElement: document.getElementById( endpage_id ) })
     /*  最後のページが消えないよう、id要素を複製  */
     let endpage = document.getElementById(endpage_id).cloneNode(true)
     COMIC_THANKS.id.appendChild(endpage)
     /*  最後のページのイベント追加   */
     endpage.hogehoge.addEventListener('click' , () => /*  クリックイベント処理  */)
};
        

同じ方法で、ToraViewerの背景を固定できます。（固定用の関数をイベント追加のあとに書き足す）

ToraViewerの背景固定はこちらの記事の「iOSを含むモーダル背景の固定」で紹介している方法で可能です。

参考

ToraViewer：虎の穴開発の漫画ビュワー