Blame view

backend/components/imagemanager/assets/source/js/script.imagemanager.input.js 4.54 KB
dd15bb0c   alex   Merge branches 'c...
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
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
  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);
                      }
                  );
          }
      );