JavaScript

summernote でも画像挿入時とかに modal を使っている。
つまり modal 内で summernote を使うと画像挿入時とかに modal の入れ子が発生することになる。

bootstrap modal って、意外と入れ子のことは考えられていないようで、皆さん苦労されているようです。そもそも入れ子にすべきじゃないってことなの?

というわけで、公式な対応ではなく無理矢理ここだけ対応、ということになる。
ニッチ対応とでも言うのか…こんなことに命名するのも馬鹿げているが。
まあなんとなくカッコいいほうが良いよねー、的な。
ニッチやなくてリッチになりたいでほんま。

さて、愚痴を吐いて少しスッキリしたところで本題。

summernote で画像挿入した場合、挿入した時に画像選択用モーダルが閉じる。
その閉じた際にbodyタグが操作されて親モーダルも閉じた状態になってしまう。
具体的には'modal-open'クラスが無くなって、style属性も変更される。
そこでそれを元に戻そう、というのが下記コード。
    var body_style;
$('#parent-modal').on('show.bs.modal', function (e) {
if (e.target.id !== 'parent-modal') {
body_style = $('body').attr('style');
return;
}
// 親モーダル用処理
}).on('hidden.bs.modal', function (e) {
if (e.target.id !== 'parent-modal') {
if (body_style) $('body').attr('style', body_style).addClass('modal-open');
body_style = null;
return;
}
// 親モーダル用処理
});

子モーダルが開く時に親モーダルの「show」イベントも発火する。
まあそれはそれで不具合の元なのだが…今回はそれを利用して、、
子モーダルが開いた(と思わしき)時にbodyタグのstyle属性値を保存しておいて、子モーダルが閉じた(と思わしき)時に保存しておいたモノを戻す。そして'modal-open'クラスも付与。
ということをしてまーす。

そうそう。画像選択用モーダルのバツボタンを押して閉じた時、親モーダルまで閉じてしまうことにはワタクシメは気づいておりませんので。
もし気づいた方がいらっしゃったらご対応くださいませ\(^o^)/
掲題のとおりです。
使ってしまったのです…orz

【備忘録】 JavaScript で replace を使って replaceAll をする方法 | MSeeeeN | 大阪発 IT メディア by MSEN
replaceAll() は ES2021 で追加されたかなり新しい関数となっています

String.prototype.replaceAll() - JavaScript | MDN
Safari on iOS: 13.4 Full support

お客様のiPhoneがiOS13.3だったため、問題発生。。。
まあ、早めに問題がわかってよかった。
そしてそのお客様がとても良い人だったので救われた。
別の意味で『お客様は神様です』でした。ありがたや〜

bootstrap3のpopoverのオプションで「html: true」にしてHTMLタグを利用していたわけだが、bootstrap4でも使おうとしたところ、内容が空っぽになってしまった…。
というお話。

結論:sanitizeオプションも指定しましょう

sanitize
v4.3.1追加


pdf.js のツールバー内の印刷ボタンを押して印刷しようとすると、最後に空白ページが追加されてしまう事象が発生。
ダウンロードしてからAcrobatで印刷すればそのようなことは起きない。
なので、pdf.js側の不具合の可能性あり。断言はできませんが…。

ならば、pdf.jsで印刷できなくすればいいじゃない。
オプションでなんとかなるのでは、と思ったけど、見つからず。。
が、CSSで印刷ボタンを非表示にする方法を発見。
埋め込んだPDFを印刷させない方法(PDF.js)
ありがたや〜。

でも、pdfjs内のcssファイルを編集しなければいけないみたいだなぁ。それはしたくないなぁ。
っというわけで、jQueryでスタイルを変更することにした。
jQuery(function($){
$("#pdfjs-iframe").hide().load(function(){
$(this).show().contents().find("#print, #secondaryPrint").css({display:"none"});
});
});

一瞬表示されてしまうので、一旦hide()して、onloadでshow()してます(実用上はhide()の前にhtml側でdisplay:none;してます)。
ツールバーごと消したい場合は下記。
    $(this).show().contents().find(".toolbar").css({display:"none"}).end().find("#viewerContainer").css({top: "0.5em"});

元記事通りtop:0;だと詰まり過ぎと感じたのでtop:0.5em;としました(特に深い意味がある訳ではないです(-_-;)。お好みでドゾー。
■フォルダ構成変更
・「web」フォルダを「pdfjs」に改名
・「pdfjs」フォルダに「build」フォルダを移動

■ファイル内容変更
・pdfjs/viewer.html
<script src="../build/pdf.js"></script>

 ↓
<script src="../build/pdf.js"></script>


・pdfjs/viewer.js
    PDFJS.workerSrc = '../build/pdf.worker.js';
PDFJS.cMapUrl = '../web/cmaps/';

 ↓
    PDFJS.workerSrc = './build/pdf.worker.js';
PDFJS.cMapUrl = '../cmaps/';


「PDFJS.workerSrc」だけ変えて「PDFJS.cMapUrl」のほうを変えないと、一部フォントが表示されないという状態に陥る。一見うまくいっているように見えるのでハマる。ていうかハマった(-_-;)