https://handmade-marche.jp/js/form.js?u=2026091702

1/**
2 * KHM - form.js
3 *
4 * @copyright  2017 Arcphilia Inc.
5 * @license    Proprietary
6 * @version    1.0.0
7 * @link       http://handmade-marche.kyoto/js/form.js
8 * @since      2017-06-09
9 * @author     Kenta Shindo
10 */
11
12(function($) {
13
14  /**
15   * 画像のプレビュー処理
16   * @param object? file FileApiで取得したファイルデータ
17   * @param objec? $fileElem インプットのある.file要素
18   */
19  function previewImage(file, $fileElem) {
20    $fileElem.removeClass('error');
21
22    try {
23      // エラーチェック
24      // 画像でない場合はエラー
25      if (!file.type.match('image.*')) {
26        throw '画像を選択して下さい';
27      }
28
29      // サイズチェック
30      if (file.size > 5242880) {
31        throw 'ファイルサイズが3MBを超えています';
32      }
33
34      // 画像出力
35      var fileReader = new FileReader();
36      fileReader.readAsDataURL(file);
37
38      fileReader.onload = function(event) {
39        var imgData = event.target.result;
40
41        $fileElem.addClass('readImage');
42        $fileElem.find('.thumb').css('background-image', 'url(' + imgData + ')');
43
44        if ($fileElem.find('.mode')) {
45          console.log($fileElem.find('.mode'));
46          $fileElem.find('.update').prop('checked', true);
47        }
48      }
49
50      if ($fileElem.closest('td').find('.error').length == 0) {
51        $fileElem.closest('td').find('.errorText').remove();
52      }
53    } catch(e) {
54      $fileElem.addClass('error');
55      $fileElem.closest('td').find('.errorText').remove();
56      $fileElem.closest('td').append('<p class="errorText">' + e + '</p>');
57    }
58  }
59
60  /**
61   * 画像のプレビュー処理
62   * @param objec? $fileElem インプットのある.file要素
63   */
64  function removeImage($fileElem) {
65    var inputName = $fileElem.find('input[type="file"]').attr('name');
66
67    $fileElem.removeClass('readImage');
68
69    $fileElem.find('input[type="file"]').remove();
70    $fileElem.find('.fileInput').append('<input type="file" name="' + inputName + '" accept="image/*" />');
71
72    if ($fileElem.find('.mode')) {
73      console.log($fileElem.find('.delete'));
74      $fileElem.find('.delete').prop('checked', true);
75    }
76  }
77
78
79
80  // DOM読み込み後の処理
81  $(function() {
82    // file
83    $(document).on({
84      change: function() {
85        if (!this.files.length) {
86          return;
87        }
88
89        var file = this.files[0];
90
91        previewImage(file, $(this).closest('.file'));
92      }
93    }, '.field .file input[type="file"]');
94
95    $(document).on({
96      click: function() {
97        removeImage($(this).closest('.file'));
98        return false;
99      }
100    }, '.field .file .remove');
101
102    // クリエイター名コピー
103    $(document).on({
104      click: function() {
105        var creatorName = $('input[name="creator_name"]').val(),
106            creatorNameReading = $('input[name="creator_name_reading"]').val();
107
108        $('input[name="exhibitor_name"]').val(creatorName).change();
109        $('input[name="exhibitor_name_reading"]').val(creatorNameReading).change();
110
111        return false;
112      }
113    }, '#copyButton');
114
115    // フローティングラベル
116    $('.field input, .field textarea').each(function() {
117      var $this = $(this);
118
119      if ($this.closest('.field').find('.fieldLabel').length > 0) {
120        $this.on('input change', function() {
121          var $field = $(this).closest('.field');
122          if (this.value) {
123            $field.addClass('fieldNotEmpty');
124          } else {
125            $field.removeClass('fieldNotEmpty');
126          }
127        });
128
129        $this.change();
130      }
131    });
132
133    // 支払い方法
134    $('input[name=payment_method]').change(function() {
135      var checkedVal = $('input[name=payment_method]:checked').val();
136      if (checkedVal == undefined) {
137        $('#byDirectDeposit').hide();
138        $('#byCreditCard').hide();
139      } else if (checkedVal == 1) {
140        $('#byDirectDeposit').show();
141        $('#byCreditCard').hide();
142      } else {
143        $('#byDirectDeposit').hide();
144        $('#byCreditCard').show();
145      }
146    });
147    $('input[name=payment_method]').change();
148
149    // アンケート
150    setTimeout(function() {
151      if ($('#enqueteDivision').length > 0) {
152        if ($('html').hasClass('pc')) {
153          $('#enqueteDivision').find('form > .field').remove();
154          $('#enqueteDivision').find('form ul').show();
155        } else {
156          $('#enqueteDivision').find('form ul').remove();
157          $('#enqueteDivision').find('form > .field').show();
158        }
159      }
160    }, 100);
161  });
162})(jQuery);