<script>
  $.validator.setDefaults({
    onfocusout: false,
    invalidHandler: function (form, validator) {
      // 커스텀 포커스 핸들링
      if (validator.numberOfInvalids()) {
        validator.errorList[0].element.focus();
        //alert(validator.errorList[0].message); // 경고창
      }
    },
    errorClass: "text-danger", // 에러 스타일을 입힐 클래스 지정
    errorPlacement: function (error, element) {
      // data-error 속성으로 해당 위치 삽입
      var placement = $(element).data("error");
      if (placement) {
        $(placement).append(error);
      } else {
        // 없을경우 마지막노드 뒤에 삽입
        element.parent().children().last().after(error);
      }
    },
  });
</script>

<!-- data-error 속성 사용 예시 -->
<input type="text" name="id" data-error="#id_error" />
<p id="id_error"></p>

<script type="text/javascript">
  var imageModule = (function () {
    "use strict";
    var possible = window.File && window.FileReader && window.FormData; // html5 업로드를 지원하는지의 여부
    var apiPath = "/api/test.php"; // 업로드 서버 처리 경로
    var folder = "/upload/review/"; // 기본 이미지 업로드 폴더
    var $input;
    var maxWidth = 600;
    var maxHeight = 480;
    var imageArray = []; // callback에 사용할 이미지 파일명 배열
    var callback;
    /**
     * [sendImageFile 이미지 비동기 업로드]
     * @scope  {[private]}
     * @param  {[string]}    imageData     [이미지 binary]
     * @return {[function]}  callback      [업로드 후처리]
     */
    function sendImageFile(imageData) {
      if (imageData) {
        var formData = new FormData();
        formData.append("type", "upload");
        formData.append("folder", folder);
        formData.append("imageData", imageData);
        $.ajax({
          type: "post",
          url: apiPath,
          data: formData,
          dataType: "json",
          contentType: false, // contentType header 제거
          processData: false, // Dom 객체를 전송하려면 false 처리해야함
        })
          .then(function (data) {
            if (data.data) {
              imageArray.push(data.data.file); // 이미지 배열에 저장
              $input.val("");
              if (callback) {
                callback(imageArray);
              } else {
                console.log("callback function not initialized");
              }
            }
          })
          .catch(function (error) {
            console.log("upload fail: ", error);
          });
      } else {
        console.log("image data is null");
      }
    }
    return {
      /**
       * [init 이미지 모듈 초기화]
       * @param  {[string]} fileId       [변경할 input id]
       * @param  {[function]} callbackFunc [후처리]
       * @param  {[object]} settings     [width, height, folder 설정가능]
       */
      init: function (fileId, callbackFunc, settings) {
        if (possible) {
          if (typeof settings === "object") {
            if (settings.width) {
              maxWidth = settings.width;
            }
            if (settings.height) {
              maxHeight = settings.height;
            }
            if (settings.folder) {
              folder = settings.folder;
            }
          }
          if ($.isFunction(callbackFunc)) {
            callback = callbackFunc;
          } else {
            console.log("callback is not defined");
          }
          var options = {
            maxWidth: maxWidth, // resize width 값
            maxHeight: maxHeight, // resize height 값
            canvas: true, // 사진을 돌리려면 canvas 객체로 받아야함
            downsamplingRatio: 0.5, // 비율에 맞추어 크기 감소
          };
          $input = $("#" + fileId);
          $input.on("change", function (e) {
            e.preventDefault();
            e = e.originalEvent;
            var target = e.dataTransfer || e.target;
            var file = target && target.files && target.files[0];
            loadImage.parseMetaData(file, function (data) {
              // exif js를 사용해 이미지의 tag를 가져옴
              if (data.exif) {
                options.orientation = data.exif.get("Orientation"); // 화면이 돌아간 비율을 지정
              } else {
                if (options.orientation) {
                  options.orientation = null;
                }
              }
              // 캔버스 이미지 리사이징 처리 후 서버호출
              loadImage(
                file,
                function (img) {
                  sendImageFile(img.toDataURL());
                },
                options
              );
            });
          });
        } else {
          console.log("file upload is not supported");
        }
      },
      /**
       * [getFolder 업로드 경로 호출]
       * @return {[string]} [경로]
       */
      getFolder: function () {
        return folder;
      },
      /**
       * [delete 이미지 삭제]
       * @param  {[number]}    idx          [이미지 배열의 인덱스]
       * @param {[function]}  callbackFunc  [delete 후처리]
       */
      delete: function (idx, callbackFunc) {
        if (imageArray[idx]) {
          $.ajax({
            url: apiPath,
            type: "post",
            data: {
              type: "delete",
              folder: folder,
              filename: imageArray[idx],
            },
            dataType: "json",
          })
            .then(function (data) {
              console.log("file delete success");
              console.log(data);
              if ($.isFunction(callbackFunc)) {
                callbackFunc(data);
              }
            })
            .catch(function (error) {
              console.log("server file delete failed");
              console.log(error);
            })
            .done(function () {
              imageArray.splice(idx, 1);
              $input.val("");
              if (callback) {
                callback(imageArray);
              } else {
                console.log("callback function not initialized");
              }
            });
        } else {
          console.log("delete index not defined");
        }
      },
      clear: function () {
        console.log("clear array");
        imageArray = [];
      },
    };
  })();
  $(function () {
    imageModule.init(
      "fileInput",
      function (data) {
        var folder = imageModule.getFolder();
        var str = "";
        for (var i = 0, len = data.length; i < len; i++) {
          str +=
            '<img src="' +
            folder +
            data[i] +
            '" style="width:100%;height:100%;">';
        }
        $("#area").html(str);
        $("#fileData").val(JSON.stringify(data));
      },
      {}
    );
    // options, width height folder..
    // {width:500, height:300, folder:'/upload/board/'}
  });
  // after insert into database
  $("#area").empty();
  $("#fileData").val("");
  imageModule.clear();
</script>

<input type="file" name="imageFile" id="fileInput" />

<link
  rel="stylesheet"
  type="text/css"
  href="/bower_components/datetimepicker/build/jquery.datetimepicker.min.css"
/>
<!-- php.date.formatter.js 와 jquery.mousewheeel.js 를 포함하는 full.js-->
<!-- moment는 이미 선언되어있다고 가정합니다 -->
<script src="/bower_components/datetimepicker/build/jquery.datetimepicker.full.min.js"></script>

<script>
  // dateTimePicker localization
  $.datetimepicker.setLocale("ko");
  // dateTimePicker moment.js와 연동
  $.datetimepicker.setDateFormatter({
    parseDate: function (date, format) {
      var d = moment(date, format);
      return d.isValid() ? d.toDate() : false;
    },

    formatDate: function (date, format) {
      return moment(date).format(format);
    },
  });

  $(function () {
    // datetimepicker init
    $(".datetimepicker").datetimepicker({
      format: "YYYY-MM-DD HH:mm:ss",
      formatTime: "HH:mm",
      formatDate: "YYYY-MM-DD",
    });
  });
</script>

<input type="text" name="startDate" class="datetimepicker" /> ~
<input type="text" name="endDate" class="datetimepicker" />

<script src="/bower_components/clipboard/dist/clipboard.min.js"></script>

<!-- 1. URL copy -->
<a href="#" id="btnCopyUrl" data-clipboard-action="copy">url 복사</a>
<script>
  $(function ({
      // 복사 버튼을 만들시 data-clipboard-text 안에 복사할 문구를 넣어준다
      $('#btnCopyUrl').attr('data-clipboard-text', document.location.href);
      // callback 설정
      var clipboard = new Clipboard('#btnCopyUrl');
      clipboard.on('success', function(e) {
          alert('복사되었습니다');
      });
      clipboard.on('error', function(e) {
          console.log(e);
      });
  });
</script>

<!-- 2. Text copy -->
<textarea id="textBody" cols="30" rows="5"></textarea>
<button
  type="button"
  id="btnCopyText"
  data-clipboard-action="copy"
  data-clipboard-target="#textBody"
>
  텍스트복사
</button>