webpack-bootstrap-ui-kit/src/js_old/_components/_ui.form.croppie.js

"use strict";

import $ from "jquery";

import Events from "../_events";
import SpinnerUI from "./_ui.spinner";

import "croppie/croppie.js";
import "exif-js/exif.js";

const CroppieUI = (($) => {
  const NAME = "jsCroppieUI";
  const DATA_KEY = NAME;

  const G = window;
  const D = document;

  const jqteOptions = {
    color: false,
    fsize: false,
    funit: "em",
    format: false,
    rule: false,
    source: false,
    sub: false,
    sup: false,
  };

  class CroppieUI {
    constructor(element) {
      const ui = this;
      const $el = $(element);

      console.log(`${NAME}: init ...`);

      ui.$el = $el;
      $el.data(DATA_KEY, this);

      ui.input = $el.find('input[type="file"]');
      //ui.inputData = $('<input type="hidden" class="base64enc" name="' + ui.input.attr('name') + 'base64" />');

      ui.width = ui.input.data("width");
      ui.height = ui.input.data("height");

      $el.append(
        '<div class="cropper-wrap"><div class="cropper-container"></div>' +
          '<a href="#" class="btn-remove" style="display:none"><i class="fas fa-times"></i> Remove</a></div>'
      );
      //$el.append(ui.inputData);

      ui.uploadCropWrap = $el.find(".cropper-wrap");
      ui.uploadCrop = ui.uploadCropWrap.find(".cropper-container");

      const ratio = ui.width / (ui.uploadCrop.width() - 32);
      ui.uploadCrop.croppie({
        enableExif: true,
        enforceBoundary: false,
        viewport: {
          width: ui.width / ratio,
          height: ui.height / ratio,
        },
      });

      ui.uploadCrop.hide();

      ui.input.on("change", (e) => {
        this.readFile(e.currentTarget);
      });

      ui.$btnRemove = $el.find(".btn-remove");
      ui.$btnRemove.on("click", (e) => {
        e.preventDefault();

        ui.uploadCrop.removeClass("ready");
        $el.find(".croppie-image").remove();

        ui.$el.find('input[type="file"]').val("");
        ui.$el.find('input[type="file"]').change();

        ui.uploadCropWrap.hide();
      });

      if (ui.$el.find("img.croppie-image").length) {
        ui.$btnRemove.show();
      }
    }

    readFile(input) {
      const ui = this;
      const $el = ui.$el;
      const $form = $el.closest("form");

      if (input.files && input.files[0]) {
        const reader = new FileReader();

        reader.onload = (e) => {
          ui.uploadCrop.addClass("ready");
          ui.uploadCrop.croppie("bind", {
            url: e.target.result,
          });

          ui.uploadCrop.show();
          ui.uploadCropWrap.show();
          ui.$btnRemove.show();
        };

        reader.readAsDataURL(input.files[0]);

        $form.off("submit");
        $form.on("submit", (e) => {
          console.log(`${NAME}: Processing submission ...`);

          e.preventDefault();

          if ($form.data("locked")) {
            console.warn(`${NAME}: Form#${$form.attr("id")} is locked.`);
            return false;
          }

          $form.data("locked", true);

          SpinnerUI.show();

          if (!ui.uploadCrop.hasClass("ready")) {
            return true;
          }

          ui.uploadCrop
            .croppie("result", {
              type: "blob",
              size: {
                width: ui.width,
                height: ui.height,
              },
              format: "png",
            })
            .then((blob) => {
              const form = e.currentTarget;
              const data = new FormData(form);
              const name = $(input).attr("name");

              data.delete("BackURL");
              data.delete(name);
              data.append(name, blob, `${name}-image.png`);
              data.append("ajax", "1");

              if (!$(form).data("jsFormValidate").validate()) {
                return false;
              }

              $.ajax({
                url: $(form).attr("action"),
                data,
                processData: false,
                contentType: false,
                type: $(form).attr("method"),
                success: function (data) {
                  $form.data("locked", false);

                  let IS_JSON = false;
                  let json = {};
                  try {
                    IS_JSON = true;
                    json = $.parseJSON(data);
                  } catch (e) {
                    IS_JSON = false;
                  }

                  if (IS_JSON) {
                    if (typeof json["status"] !== "undefined") {
                      if (json["status"] === "success") {
                        MainUI.alert(json["message"], json["status"]);

                        if (typeof json["link"] !== "undefined") {
                          console.log(
                            `${NAME}: Finished submission > JSON ... Redirecting to ${json["link"]}.`
                          );

                          setTimeout(() => {
                            G.location = json["link"];
                          }, 2000);
                        } else {
                          console.warn(
                            `${NAME}: Finished submission > JSON no redirect link.`
                          );
                        }
                      } else if (json["status"] === "error") {
                        MainUI.alert(json["message"], json["status"]);
                      }
                    }

                    if (typeof json["form"] !== "undefined") {
                      console.log(
                        `${NAME}: Finished submission > JSON. Got new form response.`
                      );

                      $(form).replaceWith(json["form"]);
                      $(G).trigger(Events.AJAX);
                    }
                  } else {
                    console.log(
                      `${NAME}: Finished submission > DATA response.`
                    );

                    $(form).replaceWith(data);
                    $(G).trigger(Events.AJAX);
                    //G.location.reload(false);
                  }

                  SpinnerUI.hide();
                },
              });

              //ui.inputData.val(data);
            });
        });
      } else {
        console.log(
          `${NAME}: Sorry - your browser doesn't support the FileReader API.`
        );
      }
    }

    static dispose() {
      console.log(`${NAME}: destroying.`);
    }

    static _jQueryInterface() {
      return this.each((i, el) => {
        // attach functionality to element
        const $el = $(el);
        let data = $el.data(DATA_KEY);

        if (!data) {
          data = new CroppieUI(el);
          $el.data(DATA_KEY, data);
        }
      });
    }
  }

  // jQuery interface
  $.fn[NAME] = CroppieUI._jQueryInterface;
  $.fn[NAME].Constructor = CroppieUI;
  $.fn[NAME].noConflict = () => {
    $.fn[NAME] = JQUERY_NO_CONFLICT;
    return CroppieUI._jQueryInterface;
  };

  // auto-apply
  $(window).on(`${NAME}.init ${Events.AJAX} ${Events.LOADED}`, () => {
    $(".field.croppie").jsCroppieUI();
  });

  return CroppieUI;
})($);

export default CroppieUI;