src/Eccube/Resource/template/admin/Product/_parts/js_product_feature.twig line 1

Open in your IDE?
  1. <script>
  2.     $(function() {
  3.         const itemClass = '.product_feature_row';
  5.         const $body = $('#product_feature_body');
  6.         let index = $body.find(itemClass).length;
  8.         function addForm() {
  9.             const prototype = $body.data('prototype');
  10.             const newForm = prototype.replace(/__name__/g, index);
  11.             $body.append(newForm);
  12.             index++;
  13.         }
  15.         $('#add_product_feature').on('click',addForm);
  17.         $(document).on('click','#remove_product_feature',function() {
  18.             if(!confirm('削除しますか？')) {
  19.                 return false;
  20.             }
  21.             const deleteIndex = $(this).data('index');
  22.             $(document).find('#product_feature_row'+deleteIndex).remove();
  23.         });
  24.     });
  26.     $(function() {
  27.         const featureBodyElem = document.getElementById('product_feature_body');
  29.         var observer = new MutationObserver(function () {
  30.             // 子要素が変化したときの処理
  31.             initFeatureFilePond();
  32.         });
  34.         observer.observe(featureBodyElem, {
  35.             attributes: true,
  36.             childList: true,
  37.             characterData: true,
  38.         });
  40.         initFeatureFilePond();
  41.     });
  43.     function initFeatureFilePond() {
  44.         $("[id^=product_feature_row]").each(function(index) {
  45.             // ファイルアップロード
  46.             // see https://pqina.nl/filepond/
  47.             var productFeatureFileId = `admin_product_ProductFeatures_${index}_file_name`;
  48.             var inputFileElement = document.querySelector(`input[id="${productFeatureFileId}"]`);
  50.             var files = inputFileElement && inputFileElement.value ? [
  51.                 {
  52.                     source: inputFileElement.value,
  53.                     options: {
  54.                         type: 'local'
  55.                     }
  56.                 }
  57.             ] : [];
  59.             var pond = FilePond.create(inputFileElement, {
  60.                 allowFileTypeValidation: true,
  61.                 acceptedFileTypes: [
  62.                     'image/gif',
  63.                     'image/png',
  64.                     'image/jpeg'
  65.                 ],
  66.                 allowFileSizeValidation: true,
  67.                 maxFileSize: 10000000,
  68.                 maxFiles: 1,
  69.                 allowBrowse: true,
  70.                 labelIdle: '<i class="fa fa-cloud-upload fa-3x text-ec-lightGray mx-3 align-middle" aria-hidden="true" style="font-size: 40px"></i>{{ 'admin.common.drag_and_drop_image_description'|trans }}<span class="filepond--label-action">{{ 'admin.common.file_select'|trans }}</span>',
  71.                 // 保存されている画像のロード
  72.                 files: files,
  73.                 server: {
  74.                     process: {
  75.                         url: '{{ path('admin_product_image_process_entity_key', { entity_name: "ProductFeatures", key_name: "file_name" }) }}',
  76.                         headers: {
  77.                             'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
  78.                             'X-Requested-With': 'XMLHttpRequest'
  79.                         }
  80.                     },
  81.                     load: {
  82.                         url: '{{ path('admin_product_image_load') }}?source=',
  83.                         headers: {
  84.                             'X-Requested-With': 'XMLHttpRequest'
  85.                         }
  86.                     },
  87.                     revert: {
  88.                         url: '{{ path('admin_product_image_revert') }}',
  89.                         headers: {
  90.                             'ECCUBE-CSRF-TOKEN': $('meta[name="eccube-csrf-token"]').attr('content'),
  91.                             'X-Requested-With': 'XMLHttpRequest'
  92.                         }
  93.                     }
  94.                 }
  95.             });
  97.             pond.on('initfile', function() {
  98.                 $(`#product_feature_image_error${index}`).hide();
  99.             });
  100.             pond.on('error', function(error, file) {
  101.                 var message = '{{ 'admin.common.upload_error'|trans }}';
  102.                 if (error.main !== undefined) {
  103.                     message = `${error.main}: ${error.sub}`;
  104.                 }
  105.                 $(`#product_feature_image_error${index}`)
  106.                     .show()
  107.                     .find('.form-error-message').text(message);
  109.                 // エラーメッセージが表示されてからプレビューエリアのエラーメッセージを非表示にする
  110.                 setTimeout(function() {
  111.                     $('.filepond--file-status').hide();
  112.                 }, 300);
  113.             });
  115.             // 画像が追加されたら payment_image にファイル名を追加する
  116.             pond.on('processfile', function(error, file) {
  117.                 if (error) {
  118.                     console.log(error);
  119.                 } else {
  120.                     $(`#${productFeatureFileId}`).val(file.serverId);
  121.                 }
  122.             });
  123.             // 画像が削除されたら payment_image のファイル名を削除する
  124.             pond.on('removefile', function(error, file) {
  125.                 if (error) {
  126.                     console.log(error);
  127.                 } else {
  128.                     $(`#${productFeatureFileId}`).val('');
  129.                 }
  130.             });
  131.         });
  132.     }
  133. </script>