WordPressの質問（q10217484）の続

質問

アップロードされたカメラ画像を非表示にするコードを追加したのですが、表示するためのURLを追加するコードが抜けており追加いたしました。
上記とは別にアップロードされたファイルをエンコードするコードも抜けているのではないかと思っております。
旧コードでは対象ファイルではない場合にアラートで警告ダイアログを表示するコードとは別にエンコードするコードがあるため最新コードにも追加すべきではないかと考えております…

下記のコードは追加すべきでしょうか？（single-input.php の15行目から38行目まで）

$attach = [];
if (!empty($_SESSION['attach'])) {
foreach ($_SESSION['attach']['data'] as $i => $data) {
if (!empty($data)) {
$base64 = base64_encode($data);
}
$type = $_SESSION['attach']['type'][$i];
switch ($type) {
case 'image/jpeg':
case 'image/png':
$attach[] = '<img style="height: 100px;" src="data:'.$type.';base64,'.$base64.'">';
break;
case 'video/mp4':
$attach[] = '<video style="height: 100px;" controls src="data:'.$type.';base64,'.$base64.'">';
break;
case 'application/pdf':
$attach[] = '<iframe style="height: 100px;" src="data:'.$type.';base64,'.$base64.'"></iframe>';
break;
default:
$attach[] = '';
break;
}
}
}

※最新コード
https://wandbox.org/permlink/my2wffcXlhMQZFvW

※旧コード
https://wandbox.org/permlink/cfzsJgBFcYrcIDI1

回答No.16

dell_OK

・強制的にローディングを終了するというのが難しいのではないかと思っているのですが可能でしょうか？

ローディングはそのページが表示されるタイミングのことなので、ボタンが押された一時的な場面ではありません。
参考サイトを見ると、どちらも以下のようなイベント（タイミング）での話しです。
　$(window).on('load'
　window.addEventListener('load'
タイミングはボタンが押された時などで置きかえるような考え方もできますが、おそらくそのスタイルシートもあまりいいものではないような気がします。

・ボタンの上に画像を重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御する

こちらの方が扱いやすそうな気はします。

ですが、そこまでしなくてもできます。
先日「ひと目でステータスが分かる送信ボタン」はタイミングが違う注意をしましたが、それだけのことですので、別々のタイミングでそれぞれの処理をするだけです。

まずは「クリックされた時」に適用するスタイルシートです。
円がくるくるまわっているように見えるものです。
参考サイトのスタイルシートをもとに最小限にしてみました。
もとのクラス名は「onclic」を「wait」にしました。
－－－－
<style>
.wait {
height: 40px;
width: 40px;
border-radius: 40px;
border: 3px solid;
border-color: #bbbbbb;
border-left-color: #1ECD97;
font-size: 0;
animation: rotating 2s 0.25s linear infinite;
}

@keyframes rotating {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}
</style>
－－－－

「クリックされた時」の処理です。
２行目から４行目を追加してください。
２行目：submit_buttonに要素を定義しています
３行目：ボタンが２度押しされないように使用不可にしています
４行目：ボタンのクラスにwaitを追加しています（くるくるまわるスタイルシートが反映されます）
－－－－
const submit_button_click = function() {
const submit_button = document.getElementById("submit_button");
submit_button.disabled = true;
submit_button.classList.add('wait');
namae_value = "";
－－－－

「非同期通信が完了して応答があった時」の処理です。
４行目と５行目を追加してください。
４行目：ボタンを使用可にしています
５行目：ボタンのクラスからwaitを削除しています（もとのボタンに戻ります）
－－－－
//非同期通信
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
submit_button.disabled = false;
submit_button.classList.remove('wait');
return response.json();
－－－－

補足

Q.ローディングはそのページが表示されるタイミングのことなので、ボタンが押された一時的な場面ではありません。
タイミングはボタンが押された時などで置きかえるような考え方もできますが、おそらくそのスタイルシートもあまりいいものではないような気がします。

・ボタンの上に画像を重ねてレイアウトしておいて、状況に応じて一方（＝上になっている要素）の表示/非表示を制御する

A.解説ありがとうございます。どちらの方法もコードが複雑になるのではないかと懸念しておりました。

Q.先日「ひと目でステータスが分かる送信ボタン」はタイミングが違う注意をしましたが、それだけのことですので、別々のタイミングでそれぞれの処理をするだけです。

A.回答ありがとうございます、ローディング画像が終わるタイミングと非同期通信が終わるタイミングで大きなずれが生じることが一番の問題点ではないかと考えておりました。

「非同期通信が完了して応答があった時」の処理です。
４行目と５行目を追加してください。
４行目：ボタンを使用可にしています
５行目：ボタンのクラスからwaitを削除しています（もとのボタンに戻ります）
－－－－
//非同期通信
fetch("<?php echo home_url('wp-admin/admin-ajax.php'); ?>", opt)
.then(response => {
submit_button.disabled = false;
submit_button.classList.remove('wait');
return response.json();
－－－－x

A.コード修正ありがとうございます。1つ疑問があるのですが、4行目のボタンを使用可能にするというのは非同期通信が完了後に５行目のボタンのクラスからwaitを削除（もとのボタンに戻ります）元のボタンとして送信→確認画面に切り替わるということでしょうか？

※最新コード
https://wandbox.org/permlink/vn2Qhc7kaDWX3Jsk