Blame view

backend/components/noam148/imagemanager/assets/source/js/script.imagemanager.input.js 3.92 KB
a8aa0f7d   alex   Add new noam148 m...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
  var imageManagerInput = {
      baseUrl: null,
      //language
      message: null,
      //init imageManagerInput
      init: function () {
          //create modal
          imageManagerInput.initModal();
      },
      //creat image Manager modal
      initModal: function () {
          //check if modal not jet exists
          if ($("#modal-imagemanager").length === 0) {
              //set html modal in var
              var sModalHtml = '<div tabindex="-1" role="dialog" class="fade modal" id="modal-imagemanager">';
              sModalHtml += '<div class="modal-dialog modal-lg">';
              sModalHtml += '<div class="modal-content">';
              sModalHtml += '<div class="modal-header">';
              sModalHtml += '<button aria-hidden="true" data-dismiss="modal" class="close" type="button">&times;</button>';
              sModalHtml += '<h4>Image manager</h4>';
              sModalHtml += '</div>';
              sModalHtml += '<div class="modal-body">';
              sModalHtml += '<iframe src="#"></iframe>';
              sModalHtml += '</div>';
              sModalHtml += '</div>';
              sModalHtml += '</div>';
              sModalHtml += '</div>';
              //prepend data to body
              $('body').prepend(sModalHtml);
          }
      },
      //open media manager modal
      openModal: function (inputId, aspectRatio, cropViewMode) {
          //get selected item
          var iImageId = $("#" + inputId).val();
          var srcImageIdQueryString = "";
          if (iImageId !== "") {
              srcImageIdQueryString = "&image-id=" + iImageId;
          }
          //create iframe url
          var queryStringStartCharacter = ((imageManagerInput.baseUrl).indexOf('?') == -1) ? '?' : '&';
          var imageManagerUrl = imageManagerInput.baseUrl + queryStringStartCharacter + "view-mode=iframe&input-id=" + inputId + "&aspect-ratio=" + aspectRatio + "&crop-view-mode=" + cropViewMode + srcImageIdQueryString;
          //set iframe path
          $("#modal-imagemanager iframe").attr("src", imageManagerUrl);
          //set translation title for modal header
          $("#modal-imagemanager .modal-dialog .modal-header h4").text(imageManagerInput.message.imageManager);
          //open modal
          $("#modal-imagemanager").modal("show");
      },
      //close media manager modal
      closeModal: function () {
          $("#modal-imagemanager").modal("hide");
      },
      //delete picked image
      deletePickedImage: function (inputId) {
          //remove value of the input field
          var sFieldId = inputId;
          var sFieldNameId = sFieldId + "_name";
          var sImagePreviewId = sFieldId + "_image";
          var bShowConfirm = JSON.parse($(".delete-selected-image[data-input-id='" + inputId + "']").data("show-delete-confirm"));
          //show warning if bShowConfirm == true
          if (bShowConfirm) {
              if (confirm(imageManagerInput.message.detachWarningMessage) == false) {
                  return false;
              }
          }
          //set input data
          $('#' + sFieldId).val("");
          $('#' + sFieldNameId).val("");
          //trigger change
          $('#' + sFieldId).trigger("change");
          //hide image
          $('#' + sImagePreviewId).attr("src", "").parent().addClass("hide");
          //delete hide class
          $(".delete-selected-image[data-input-id='" + inputId + "']").addClass("hide");
      }
  };
  
  $(document).ready(function () {
      //init Image manage
      imageManagerInput.init();
  
      //open media manager modal
      $(document).on("click", ".open-modal-imagemanager", function () {
          var aspectRatio = $(this).data("aspect-ratio");
          var cropViewMode = $(this).data("crop-view-mode");
          var inputId = $(this).data("input-id");
          //open selector id
          imageManagerInput.openModal(inputId, aspectRatio, cropViewMode);
      });
  
      //delete picked image
      $(document).on("click", ".delete-selected-image", function () {
          var inputId = $(this).data("input-id");
          //open selector id
          imageManagerInput.deletePickedImage(inputId);
      });
  });