eesyphp/static/js/myconfirm.js

var myconfirm = function(opts) {
  var confirm = false;
  var dialog = Bootstrap4Dialog.show({
    title: opts.title || _('Confirmation'),
    message: opts.question || _('Do you confirm?'),
    autodestroy: true,
    type: opts.type || Bootstrap4Dialog.TYPE_LIGHT,
    scrollable: opts.scrollable || false,
    buttons: [
      {
        label: opts.cancel_label || _('Cancel'),
        action: function(dialog) {
          dialog.modal('hide');
        }
      },
      {
        label: opts.confirm_label || _('Validate'),
        cssClass: 'btn-danger',
        action: function(dialog) {
          confirm = true;
          dialog.modal('hide');
        }
      }
    ],
    close: function() {
      if (confirm) {
        if (jQuery.type(opts.onconfirm) == 'function') {
          opts.onconfirm(opts.data);
        }
      }
      else {
        if (jQuery.type(opts.oncancel) == 'function') {
          opts.oncancel(opts.data);
        }
      }
    }
  });
  return dialog;
};

var myalert = function(msg, title, opts) {
  if (!opts) opts={};
  var dialog = Bootstrap4Dialog.show({
    title: title || opts.title || _('Error'),
    message: msg,
    autodestroy: true,
    type: opts.type || Bootstrap4Dialog.TYPE_DANGER,
    size: opts.size || Bootstrap4Dialog.SIZE_MEDIUM,
    scrollable: opts.scrollable || false,
    buttons: [
      {
        label: opts.btnLabel || _('OK'),
        cssClass: opts.btnCssClass ||'btn-primary',
        action: function(dialog) {
          dialog.modal('hide');
        }
      },
    ],
    close: function() {
      if ($.type(opts.onclose) == 'function') {
        opts.onclose(opts.data);
      }
    }
  });
  return dialog;
};

var myprompt = function(opts) {
  if ($.type(opts) != "object") {
    opts={};
  }
  var submited = false;

  var onSubmitBtnClick = function(dialog) {
    submited = true;
    var val = dialog.getModalBody().find('input').val();
    if (jQuery.type(opts.onsubmit) == 'function') {
      if (!opts.onsubmit(val, opts.data)) {
        if (jQuery.type(opts.onerror) == 'function') {
          opts.onerror(val, opts.data);
        }
        if (!opts.closeonerror) {
          return false;
        }
      }
    }
    dialog.modal('hide');
  };

  var dialog = Bootstrap4Dialog.show({
    title: opts.title || _('Question'),
    message: "<label for='myprompt_input'>"+(opts.label || _("Please enter your answer below:"))+"</label><input type='text' class='form-control' id='myprompt_input'/>",
    autodestroy: true,
    type: opts.type || Bootstrap4Dialog.TYPE_INFO,
    size: opts.size || Bootstrap4Dialog.SIZE_MEDIUM,
    data: {
      oncancel: opts.oncancel,
      onsubmit: opts.onsubmit,
      onerror: opts.onerror,
      closeonerror: opts.closeonerror || false,
      default_answer: opts.default_answer,
      onSubmitBtnClick: onSubmitBtnClick,
      data: opts.data,
      submited: false,
    },
    buttons: [
      {
        label: opts.cancel_label || _('Cancel'),
        action: function(dialog) {
          dialog.modal('hide');
        }
      },
      {
        label: opts.submit_label || _('Validate'),
        cssClass: 'btn-danger',
        action: onSubmitBtnClick
      }
    ],
    open: function() {
      var input = dialog.getModalBody().find('input');
      input.on('keyup', function (e) {
        if (e.keyCode == 13) {
          opts.onSubmitBtnClick(dialog);
        }
      });
      if (opts.default_answer) {
        input.val(opts.default_answer);
      }
    },
    close: function() {
      if (!submited && jQuery.type(opts.oncancel) == 'function') {
        opts.oncancel(opts.data);
      }
    }
  });
};

var myloadingalert = function(opts) {
  if (!opts) opts={};
  var opened = false;
  var closed = false;
  var dialog = Bootstrap4Dialog.show({
    title: opts.title || _('Please wait'),
    message: opts.message || _('Please wait while your request is being processed.'),
    autodestroy: true,
    type: opts.type || Bootstrap4Dialog.TYPE_INFO,
    size: opts.size || Bootstrap4Dialog.SIZE_NORMAL,
    centered: opts.centered || true,
    closable: opts.closable || false,
    open: function () {
      if (closed)
        dialog.modal('hide');
      opened = true;
    }
  });
  return {
    'modal': dialog,
    'close': function() {
      if (opened)
         dialog.modal('hide');
      closed = true;
    }
  };
};

$( document ).ready(function () {
  // Manage .myconfirm-link
  $('.myconfirm-link').click(function(event) {
    event.preventDefault();
    myconfirm({
      title: $(this).data("myconfirm-title") || _("Confirmation"),
      question: "<p><strong>"+($(this).data("myconfirm-question") || _("Are you sure?"))+"</strong></p>",
      onconfirm: function(data) {
        window.location = data.confirm_url;
      },
      data: {
        confirm_url: $(this).data('myconfirm-url')
      }
    });
  });

  // Manage .myloading-link
  $('.myloading-link').click(function(event) {
    event.preventDefault();
    myloadingalert({
      title: $(this).data("myloading-title"),
      message: $(this).data("myloading-message"),
    });
    window.location = $(this).data('myloading-url');
  });

  // Manage .myconfirm-btn
  $('.myconfirm-btn').click(function(event) {
    if ($(this).data('myconfirm-btn-confirmed') == '1') {
      $(this).data('myconfirm-btn-confirmed', '');
      return true;
    }
    event.preventDefault();
    myconfirm({
      title: $(this).data("myconfirm-title") || _("Confirmation"),
      question: "<p><strong>"+($(this).data("myconfirm-question") || _("Are you sure?"))+"</strong></p>",
      onconfirm: function(data) {
        data.btn.data('myconfirm-btn-confirmed', 1);
        data.btn.click();
      },
      data: {
        btn: $(this)
      }
    });
  });

  // Manage .myloading-btn
  $('.myloading-btn').click(function(event) {
    myloadingalert({
      title: $(this).data("myloading-title"),
      message: $(this).data("myloading-message"),
    });
  });
});