input[type="checkbox"], input[type="radio"] { -webkit-appearance: auto; } #loader-bg { display: none; position: fixed; width: 100%; height: 100%; top: 0px; left: 0px; background: #000; opacity: 0.3; z-index: 10000; } #loader { position: fixed; top: 50%; left: 50%; width: 200px; height: 200px; margin-top: -100px; margin-left: -100px; text-align: center; color: #fff; z-index: 1000; } #loader img { object-fit: contain; } 入力内容の確認 複数職人に一括見積もりできるのはクラフトワーカーズだけ お手持ちの時計についてお答えいただくだけで、複数の職人から修理費用の見積りが届きます。無料ですのでお気軽にご利用ください。 ブランド名を教えてください。 ブランド名必須 次へ 時計の状態を教えてください。 時計の状態必須 完全に止まり 遅れ、進み 動いたり、止まったり 断続時間が短い ガラス内部が曇る 針ズレ その他症状 定期的なオーバーホール 不明 複数選択可 戻る 次へ 「ムーブメントと針の数」を教えください。 ムーブメント ムーブメントの種類必須 クオーツ(電池式) 自動巻 手巻き その他・不明 針の数 針の数必須 二針 三針 多針(クロノグラフ) 多針(マルチファンクション) その他・不明 戻る 次へ ご回答ありがとうございます!続いてお客様の情報を教えて下さい。 戻る 次へ お客様のお名前を教えてください。 姓必須 名必須 戻る 次へ メールアドレスを教えて下さい。 メールアドレス必須 ※ご入力いただいたメールアドレスにお見積りをお送り致します。 戻る 次へ ご回答ありがとうございます! ここからは任意項目です。 お答えいただくことでより正確な見積りがお知らせできます。 戻る 次へ モデル名を教えてください。 不明な場合は未入力で次へ進んでください。 モデル名任意 戻る 次へ 故障状況を教えてください。 特になければ次へ進んでください。 故障状況など任意 戻る 次へ 時計の画像があればアップロードをお願いします。 画像のご用意がなければ次へ進んでください。 画像任意 × × × × × × × × × × ファイルを選択 ファイルを選択 ファイルを選択 ファイルを選択 ファイルを選択 最大5枚までファイルを選択することができます 戻る 次へ 入力内容に誤りがないかご確認ください。 誤りがなければ送信ボタンを押してください。 ブランド名 時計の状態 ムーブメントの種類 針の数 姓 名 メールアドレス モデル名 故障状況など 画像 戻る Now Loading... var LOADER = $("#loader-bg"); var myTippyObject = {}; var currentTippy; var myTippy = tippy("[data-tippy-content]", { showOnCreate: false, trigger: "manual", hideOnClick: false, duration: 0, // Disable fade animation for all tooltips placement: "bottom", onCreate: function (instance) { var data = instance.reference.dataset; if (data.tippyId) { instance.popper.setAttribute("id", data.tippyId); myTippyObject[data.tippyId] = instance; } }, onMount(instance) { currentTippy = instance; var tooltipHeight = instance.popper.clientHeight; var tippyArrowHeight = 7; var parentDiv = instance.reference.closest(".c-percentProgress"); if (parentDiv.classList.contains("is-calculated")) { return; } parentDiv.classList.add("is-calculated"); var currentParentDivMargin = parseFloat(window.getComputedStyle(parentDiv).marginBottom); parentDiv.style.marginBottom = currentParentDivMargin + tooltipHeight + tippyArrowHeight + "px"; instance.popperInstance.update(); }, }); //console.log(myTippy); var form = "#step-form"; var validator = new JustValidate(form, { validateBeforeSubmitting: true, validateOnBlur: true, }); var MICRO_OPTIONS = { onShow: (modal) => { $("body").css("overflow", "hidden"); switch (modal.id) { case "modal-1": validator.addField("#step_brand", [ { rule: "required", errorMessage: "「ブランド名」を入力してください", }, ]); break; case "modal-2": validator.addRequiredGroup("#step_condition", "選択して下さい"); break; case "modal-3": validator.addRequiredGroup("#step_movement", "選択して下さい"); validator.addRequiredGroup("#step_needles", "選択して下さい"); break; case "modal-5": validator .addField("#step_customer_lastName", [ { rule: "required", errorMessage: "「姓」を入力してください", }, ]) .addField("#step_customer_firstName", [ { rule: "required", errorMessage: "「名」を入力してください", }, ]); break; case "modal-6": validator.addField("#step_mail", [ { rule: "required", errorMessage: "「email」を入力してください", }, { rule: "email", errorMessage: "「メールアドレス」を入力してください", }, ]); break; } }, onClose: (modal) => { tippy.hideAll(); $("body").css("overflow", "visible"); }, }; MicroModal.init(MICRO_OPTIONS); if (sessionStorage.getItem("back")) { openModal("modal-10", "init"); sessionStorage.removeItem("back"); setTimeout(function () { currentTippy.popperInstance.update(); }, 500); } else { openModal("modal-1", "init"); } function validatorOnSuccess(event) { event.preventDefault(); var modal = $(".modal.is-open"); var modal_next = modal.data("next"); var is_last = modal.data("last"); if (is_last) { $("#confirmBtn input").trigger("click"); } if (modal_next) { openModal(modal_next); } } validator.onSuccess(validatorOnSuccess); function reInitValidator(form) { validator.destroy(); validator = new JustValidate(form, { validateBeforeSubmitting: true, validateOnBlur: true, }); validator.onSuccess(validatorOnSuccess); } //reInitValidator(form); function openModal(modalId, state = "") { reInitValidator(form); if (state != "init") MicroModal.close(); MicroModal.show(modalId, MICRO_OPTIONS); tippy.hideAll(); var theTippy = myTippyObject["tippy-" + modalId]; if (theTippy) { theTippy.show(); } if ($(".c-checkboxNew").length > 0 || $(".c-radioNew").length > 0) { $(".c-checkboxNew, .c-radioNew").each(function () { if ($(this).is(":checked")) { $(this).closest("label").addClass("is-checked"); } }); } } $(".nextBtn").on("click", function (e) { e.preventDefault(); $(form) .get(0) .dispatchEvent(new Event("submit", )); }); $(window).on("load", function () { $(".c-upload .photo").each(function () { var photo = $(this), buttonDelete = photo.find("button"), fileInput = photo.find("input"), file = fileInput.get(0).files[0]; if (file) { var label = photo.closest(".c-upload").find("label[for=" + fileInput.get(0).id + "]"); const reader = new FileReader(); reader.addEventListener("load", function () { photo.append($('')); photo.show(); }); reader.readAsDataURL(file); label.hide(); } buttonDelete.on("click", function (e) { e.preventDefault(); var fileInput = $(this).siblings("input"); var fileName = fileInput.get(0).name; var label = $(this) .closest(".c-upload") .find("label[for=" + fileInput.get(0).id + "]"); photo.find("img").remove(); photo.find(".mwform-file-delete").trigger("click"); currentTippy.popperInstance.update(); photo.hide(); label.show(); $(".modal--confirm") .find("#" + fileName) .attr("src", ""); }); }); $(".c-upload .photo").on("change", function () { var _this = $(this); LOADER.show(); setTimeout(function () { try { const fileInput = _this.find("input"), file = fileInput.get(0).files[0], fileType = file["type"], photo = fileInput.closest(".photo"), label = _this.closest(".c-upload").find("label[for=" + fileInput.get(0).id + "]"), deleteBtn = photo.find(".mwform-file-delete"), validImageTypes = ["image/jpg", "image/jpeg", "image/png"]; if (file && !($.inArray(fileType, validImageTypes) 0) { photo.find("img").remove(); } const reader = new FileReader(); reader.addEventListener("load", function () { photo.append($('')); currentTippy.popperInstance.update(); photo.show(); LOADER.hide(); }); reader.readAsDataURL(file); label.hide(); } else { deleteBtn.trigger("click"); throw Error("不正なファイルです"); return; } } catch (err) { setTimeout(function () { alert(err.message); LOADER.hide(); }, 200); return; } }, 500); }); }); $(".c-checkboxNew").on("change", function (e) { if ($(this).is(":checked")) { $(this).closest("label").addClass("is-checked"); } else { $(this).closest("label").removeClass("is-checked"); } }); $(".c-radioNew").on("change", function () { // Remove the "is-checked" class from all sibling labels that are not checked $(this).closest(".mwform-radio-field").siblings().find("label").removeClass("is-checked"); // Add the "is-checked" class to the parent label of the checked radio input $(this).closest("label").addClass("is-checked"); }); var container = document.querySelector(".mw_wp_form"); container.addEventListener("change", async function (event) { var target = event.target; if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") { var value; if (target.type === "checkbox") { var checkboxes = document.querySelectorAll('input[type="checkbox"][name="' + target.name + '"]:checked'); var values = Array.from(checkboxes).map(function (checkbox) { return checkbox.value; }); value = values.join(", "); } else if (target.type === "radio") { var radio = document.querySelector('input[type="radio"][name="' + target.name + '"]:checked'); value = radio ? radio.value : ""; } else if (target.type === "file") { var file = target.files[0]; // get the first file value = await readFileAsDataURL(file); } else { value = target.value; } if (value.length > 0) { let targetName = target.name; if (targetName == "your-condition[data][]") { targetName = "your-condition"; } let confirmTarget = $(".modal--confirm").find("#" + targetName); if (confirmTarget.is("img")) { confirmTarget.attr("src", value); } else { confirmTarget.find("dd").text(value); } } } }); function readFileAsDataURL(file) { return new Promise(function (resolve, reject) { var reader = new FileReader(); reader.onload = function (event) { resolve(event.target.result); }; reader.onerror = function (event) { reject(event.target.error); }; reader.readAsDataURL(file); }); }