HTMLのSELECTタグでできるフォーム部品、つまり
↓これ
私の名前は何？What is my name?
の日本語での正式名称って何なのかなー、と思った話です。

昔から、ドロップダウンリストとかプルダウンとかセレクトボックスとか呼んでいて、定まっていなかった。呼ぶたびになんだかモヤッとした気持ちになっていた。
よーし、そろそろここいらで決着をつけようではないかっ！
と、勇んで調べたところ、下記ページに行き当たった。

HTMLタグの正式名称 #HTML - Qiita

わー、すべてのタグの正式名称を調べ上げて下さっている！
すげー、ありがてぇ。と思い、そのまま上から眺めていた。
あ、SELECTタグを調べるんだった！と気づくのに時間がかかったが、まあ良い。これで長年のモヤモヤに決着がつくのだ。このくらいの遠回りは物の数ではないわっ！
さて、SELECTの正式名称は、っと。
　SELECT → 和訳の正式名称なし
ふーん、なるほどー。正式名称は「和訳の正式名称なし」っていうんだねー。あースッキリしたー、、、じゃねーよっ！
無いんかーいっ！！！
ここにモヤモヤさらに深マレリ。。。

いやいや、この記事では全般的に調べて下さったので特定のタグは深掘りしなかったということですよね。不肖このワタクシメがSELECTタグにつきましては深掘りいたしましょう。
件の記事に倣って MDN Web Docs を正義とします。
そして下記のような記述が見つかりました。

選択ボックス

単純な選択ボックスは、1 つ以上の <option> 要素を子要素として持つ <select> 要素で作成され、

それぞれが可能な値のうちの 1 つを指定します。

(その他のフォームコントロール - ウェブ開発を学ぶ | MDN) より

というわけで、SELECTタグで作られるフォーム部品の日本語正式名称は
　選択ボックス
と言って良いのではないでしょうか。


そしてこれはちと盲点だったというか、そこまで考えてなかったというか…その通りだろうと思ったので付け加えさせていただく。正式云々というのとはズレてしまいますが。。

私見では、このモノの名前はセレクトボックス、ポイントまたはクリックしてズラズラと出てくる選択肢の一群をプルダウンまたはドロップダウンメニューと言っていいと思います。

つまり下図のごとし。


「選択ボックスをクリックするとリストがドロップダウンします。」垂れ幕を落とす(※)感じ？
「選択ボックスからリストがプルダウンされます。」トイレットペーパーのように引っ張り出す感じ？

※：怪盗なヒトが気球から「〇〇はいただいた」みたいなメッセージを書いた縦長の垂れ幕をダラッと落とすイメージだったり、何かの結果発表のときビルの屋上から垂れ幕をシュルシュルっと落とすイメージだったんだけど、そういうイメージがググっても出てこなかった。世間一般的ではないのかな…？そもそも「垂れ幕を落とす」という言葉が無いようだ。あーそうそう、「くす玉」を割ったときに出てくるメッセージのイメージです。

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

お客様の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;としました(特に深い意味がある訳ではないです(-_-;)。お好みでドゾー。