https://deldotinteract.org/Scripts/CustomRegistrationForm.js

1/**
2 *  Author: Ruben Morales Jr - 9/27/2021
3 */
4
5/**
6 * Custom Registration Form Class - Called from OfflineEvent.JS; Used to init the custom registration form in offline event meetings
7 * @param {Object} config   An object containing values to configurate class
8 */
9function CustomRegistrationForm(config) {
10  var that = this;
11  if (!config) {
12    console.error("Customer Registration Form js class does not have config");
13    return;
14  }
15  that.$rsvpForm = config.rsvpForm;
16  that.$listOfCustomRegistrationPolls = config.rsvpForm.find(
17    ".customRegistrationFormQuestion"
18  );
19
20  that.PollTypes = {
21    SINGLE_VOTE: 0,
22    MULTI_CHOICE_VOTE: 1,
23    COMMENT_ONLY: 3,
24    SHORT_COMMENT: 4,
25    LEAD_LIST: 5
26  };
27  that.customRegistrationPollCommentFileAttachments = [];
28}
29
30/**
31 * Inits the custom registration form for offline event (meetings)
32 */
33CustomRegistrationForm.prototype._init = function () {
34  var that = this;
35  // loop thru every custom registration poll
36  $.grep(
37    that.$listOfCustomRegistrationPolls,
38    function (customRegistrationPoll, idx) {
39      // find extended options for poll and call appropriate function
40      var $customRegistrationPoll = $(customRegistrationPoll);
41      var pollId = $customRegistrationPoll.data("id");
42      var pollExtendedOptions = window.customRegistrationFormOptions[pollId];
43
44      if (pollExtendedOptions != null) {
45        switch ($customRegistrationPoll.data("questiontype")) {
46          case that.PollTypes.COMMENT_ONLY:
47          case that.PollTypes.SHORT_COMMENT:
48            ScriptLoader.loadScriptArray(
49              ScriptLoader.scriptArrays.dropzone,
50              function () {
51                Dropzone.autoDiscover = false;
52                window.TOOLS.requireCSSFile("/Content/dropzone.css");
53                that._initPollComment(
54                  $customRegistrationPoll,
55                  pollExtendedOptions
56                );
57              }
58            );
59            break;
60        }
61      }
62    }
63  );
64  that._initEvents();
65};
66
67/**
68 * Inits on click event and listeners for custom registration form
69 */
70CustomRegistrationForm.prototype._initEvents = function () {
71  var that = this;
72
73  that.$rsvpForm.on(
74    "click",
75    ".customRegistration-fileUploadButton",
76    function (e) {
77      var $fileUploadButton = $(e.target);
78      var pollId = $fileUploadButton.data("pollid");
79      that.$rsvpForm
80        .find(".customRegistration-file-uploader[data-pollid='" + pollId + "']")
81        .slideToggle();
82    }
83  );
84};
85
86/**
87 * Inits a custom registration question of type poll comment
88 * @param {JQueryElement} $poll         JQuery Element of poll
89 * @param {Object} pollExtendedOptions  Object of the polls extended options
90 */
91CustomRegistrationForm.prototype._initPollComment = function (
92  $poll,
93  pollExtendedOptions
94) {
95  var that = this;
96  // check if we need to show attachment button
97  if (pollExtendedOptions && pollExtendedOptions.AllowAttachments) {
98    // show button and set defaults for dropzone and init dropzone
99    $poll.find(".customRegistration-fileUploadButton").show();
100    var dropZoneOptions = {
101      pollId: $poll.data("id"),
102      attachmentsLimitSize: that.getAttachmentsLimitCount(pollExtendedOptions),
103      attachmentsLimitCount: that.getAttachmentsLimitCount(pollExtendedOptions),
104      attachmentsTypes: that.getAttachmentTypesForDropzone(pollExtendedOptions)
105    };
106    that._initDropzone(
107      $poll.find(".customRegistration-file-dropzone"),
108      dropZoneOptions
109    );
110  }
111};
112
113/**
114 * Inits Dropzone.js for poll
115 * @param   {JQueryElement} $pollDropzoneSelector   JQuery Element of where to init dropzone at
116 * @param   {Object}        dropZoneOptions         An object for dropzone options
117 * @return  {Dropzone}                              Dropzone Instance
118 */
119CustomRegistrationForm.prototype._initDropzone = function (
120  $pollDropzoneSelector,
121  dropZoneOptions
122) {
123  var that = this;
124
125  $pollDropzoneSelector.dropzone({
126    init: function () {
127      this.on("removedfile", function (file) {
128        that.customRegistrationPollCommentFileAttachments = $.grep(
129          that.customRegistrationPollCommentFileAttachments,
130          function (attachmentObj) {
131            if (attachmentObj.dropzoneUuid)
132              {return attachmentObj.dropzoneUuid != file.upload.uuid;}
133          }
134        );
135      });
136    },
137    autoProcessQueue: false,
138    url: "/",
139    maxFileSize: dropZoneOptions.attachmentsLimitSize, // MB
140    maxFiles:
141      dropZoneOptions.attachmentsLimitCount <= 0
142        ? null
143        : dropZoneOptions.attachmentsLimitCount,
144    addRemoveLinks: true,
145    dictDefaultMessage:
146      '<i class="i i-docs m-r-sm" aria-hidden="true"></i>Drag &amp; Drop Files Here',
147    dictRemoveFile: '<i class="far fa-trash-alt text-danger"></i>',
148    acceptedFiles: dropZoneOptions.attachmentsTypes,
149    accept: function (file, done) {
150      var dropzoneLib = this;
151      var imgPath = "";
152      var ext = file.name.split(".").pop();
153      // pdf, word, excel, ppt
154      if (ext == "pdf") {
155        imgPath = "pdf-icon_120x120.png";
156      } else if (ext.indexOf("doc") != -1) {
157        imgPath = "Word_120x120.png";
158      } else if (ext.indexOf("xls") != -1) {
159        imgPath = "Excel_120x120.png";
160      } else if (ext.indexOf("ppt") != -1) {
161        imgPath = "PowerPoint_120x120.png";
162      }
163      if (imgPath.length > 0) {
164        $(file.previewElement)
165          .find(".dz-image img")
166          .attr("src", "/Content/Images/" + imgPath);
167      }
168      $(file.previewElement).find(".dz-details .dz-size").remove();
169      $(file.previewElement)
170        .find(".dz-progress")
171        .addClass("progress progress-sm progress-striped active")
172        .find(".dz-upload")
173        .addClass("progress-bar bg-info lter");
174      $(file.previewElement)
175        .find(".dz-success-mark")
176        .remove("svg")
177        .html("<i class='fas fa-check-circle fa-3x text-success'></i>");
178      $(file.previewElement)
179        .find(".dz-error-mark")
180        .remove("svg")
181        .html("<i class='fas fa-exclamation-triangle fa-3x text-danger'></i>");
182
183      var reader = new FileReader();
184      reader.onload = function () {
185        var pollCommentAttachment = {
186          pollId: dropZoneOptions.pollId,
187          Base64: reader.result,
188          Type: file.type.toLowerCase().indexOf("image") != -1 ? 0 : 2,
189          FileName: file.name,
190          Extension: file.name.split(".").pop(),
191          dropzoneUuid: file.upload.uuid
192        };
193        that.customRegistrationPollCommentFileAttachments.push(
194          pollCommentAttachment
195        );
196        dropzoneLib.emit("complete", file);
197        dropzoneLib.emit("success", file);
198      };

199      reader.readAsDataURL(file);
200    }
201  });
202};
203
204/**
205 * Private method - Get attachment types allowed from poll extended option or return default
206 * @param {Object} extendedOptions
207 */
208CustomRegistrationForm.prototype.getAttachmentTypesForDropzone = function (
209  extendedOptions
210) {
211  var acceptedFiles = "";
212  var attachmentTypesAllowed = [];
213  if (extendedOptions && extendedOptions.AttachmentTypesAllowed)
214    {attachmentTypesAllowed = extendedOptions.AttachmentTypesAllowed;}
215
216  $.grep(attachmentTypesAllowed, function (fileType, idx) {
217    switch (fileType) {
218      // Images
219      case 0:
220        acceptedFiles += "image/*,";
221        break;
222      // Pdf
223      case 1:
224        acceptedFiles += "application/pdf,";
225        break;
226      // Document
227      case 2:
228        acceptedFiles +=
229          "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,";
230        break;
231      // Spreadsheet
232      case 3:
233        acceptedFiles +=
234          "application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,";
235        break;
236      // Powerpoint
237      case 4:
238        acceptedFiles +=
239          "application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,";
240        break;
241      default:
242        break;
243    }
244  });
245  return acceptedFiles;
246};
247
248/**
249 * Private method - Get count of attachment limit from poll extended options or return default
250 * @param {Object} extendedOptions
251 */
252CustomRegistrationForm.prototype.getAttachmentsLimitCount = function (
253  extendedOptions
254) {
255  // return default if null else get the limit
256  var limitCount = 1;
257  if (extendedOptions && extendedOptions.AttachmentsLimitCount)
258    {limitCount = extendedOptions.AttachmentsLimitCount;}
259  return limitCount;
260};
261
262/**
263 * Private method - Get file size limit from poll extended options or return default
264 * @param {Object} extendedOptions
265 */
266CustomRegistrationForm.prototype.getAttachmentsLimitSize = function (
267  extendedOptions
268) {
269  /*
270   * return default if null else get the limit
271   * size is in MB
272   */
273  var limitSize = 100;
274  if (extendedOptions && extendedOptions.AttachmentsLimitSize)
275    {limitSize = extendedOptions.AttachmentsLimitSize;}
276  return limitSize;
277};