https://plancaldwell.com/Scripts/AdminShared/DynamicSignupBuilder.js?v=bs5-2

1$(document).on(
2  "change",
3  ".dynamic-signup-builder input[name='SignupFormat']",
4  function () {
5    onToggleSignupFormat($(this).closest("form"));
6  }
7);
8
9$(document).on("show.bs.modal", "#new-signup-widget-modal", function () {
10  onToggleSignupFormat($(this).find("form"));
11});
12
13function onToggleSignupFormat($form) {
14  var $input = $form.find("[name=SignupFormat]:checked");
15  if ($input.val() === "0") {
16    showHideSignupFormatFields(true);
17  } else {
18    showHideSignupFormatFields(false);
19  }
20}
21
22function showHideSignupFormatFields(isSimpleFormat) {
23  //var $extraFields = $('input[name="NameSimple"], input[name="NameSimple-required"], input[name="Address"], input[name="Address-required"], input[name="Zip"], input[name="Zip-required"]')
24  var $infoFieldParents = $(
25    '.leadList-fields input[name="NameSimple"], .leadList-fields input[name="Address"], .leadList-fields input[name="Zip"]'
26  ).closest(".list-group-item");
27  var $submitButtonLabels = $(
28    '.leadList-fields input[name="phoneButtonText"], .leadList-fields input[name="emailButtonText"]'
29  );
30  var $customSettingsParent = $(
31    ".dynamic-signup-builder input[name='manageSettingsLink']"
32  )
33    .closest(".form-group")
34    .closest(".row");
35  var $redirectUrlParent = $(
36    ".dynamic-signup-builder input[name='redirectUrl']"
37  ).parent();
38  var $redirectUrlLabel = $redirectUrlParent.prev();
39  if (isSimpleFormat) {
40    $infoFieldParents.slideUp();
41    $submitButtonLabels.slideUp();
42    $customSettingsParent.slideUp();
43    $redirectUrlParent.slideUp();
44    $redirectUrlLabel.slideUp();
45  } else {
46    $infoFieldParents.slideDown();
47    $submitButtonLabels.slideDown();
48    $customSettingsParent.slideDown();
49    $redirectUrlParent.slideDown();
50    $redirectUrlLabel.slideDown();
51  }
52}
53
54$(document).on("click", ".show-embed-code", function () {
55  $(".signup-embed-code").slideToggle();
56});
57
58// signup embed widget preview stuff
59$(document).on(
60  "keyup change",
61  ".dynamic-signup-builder input, .dynamic-signup-builder textarea",
62  throttle(function () {
63    updatePreviewiFrame();
64  })
65);
66
67// puts a time delay before firing code, used for last key pressed / input changed on signup widget builder
68// to refresh iframe only when there's not been any input after a full second
69function throttle(f, delay) {
70  var timer = null;
71  return function () {
72    var that = this;
73    var args = arguments;
74    clearTimeout(timer);
75    timer = window.setTimeout(function () {
76      f.apply(that, args);
77    }, delay || 1000);
78  };
79}
80
81function updatePreviewiFrame() {
82  $(".signup-preview-outer iframe").attr("src", buildSignupPreviewURL());
83}
84
85function buildSignupPreviewURL() {
86  var $form = $(".dynamic-signup-builder");
87  var paramsObj = new Object();
88  paramsObj.custId = modelData.customer.Id;
89  paramsObj.insightId = $form.find("input[name='insightId']").val();
90  paramsObj.manageSettingsLink = $form
91    .find("input[name='manageSettingsLink']")
92    .is(":checked");
93  paramsObj.format = $form
94    .find("input[name='SignupFormat'][value='0']")
95    .is(":checked")
96    ? 0
97    : 1;
98  paramsObj.fields = $form
99    .find("input.leadList-field:checked")
100    .map(function () {
101      return parseInt($(this).val());
102    })
103    .get()
104    .toString();
105  paramsObj.requiredFields = $form
106    .find("input.leadList-field-required:checked")
107    .map(function () {
108      return parseInt($(this).val());
109    })
110    .get()
111    .toString();
112  paramsObj.customStyleId = $form.find("select[name='customStyleId']").val();
113  paramsObj.prompt = $form.find("textarea[name='prompt']").val();
114  paramsObj.submitText = $form.find("input[name='submitText']").val();
115  paramsObj.emailButtonText = $form.find("input[name='emailButtonText']").val();
116  paramsObj.phoneButtonText = $form.find("input[name='phoneButtonText']").val();
117  paramsObj.bypass = true;
118
119  var params = "";
120  for (var key in paramsObj) {
121    if (params != "") {
122      params += "&";
123    }
124    params += key + "=" + encodeURIComponent(paramsObj[key]);
125  }
126
127  // decide DynamicSignupUrl or StandardSignupUrl
128  var controllerPath = "/Embeds/";
129  var pageUrl = "signup_dynamic";
130  if (paramsObj.format == "0") {
131    paramsObj.fields = "4,5";
132    paramsObj.requiredFields = "";
133  }
134
135  var builtUrl = controllerPath + pageUrl + ".html?" + params;
136  return builtUrl;
137}
138
139$(document).on("click", ".new-signup-widget", function () {
140  var $referenceData = $(this).closest(".signup-widget-li");
141  if ($referenceData.length == 0) $referenceData = $(this);
142  var insightId = $referenceData.data("insight-id");
143  var projectId = $referenceData.data("project-id");
144  var leadListId = $referenceData.data("lead-list-id");
145
146  LaunchSignupWidgetModal(insightId, projectId, leadListId);
147});
148
149$(document).on("click", ".embedded-signups-list .edit-widget", function () {
150  var $referenceData = $(this).closest(".signup-widget-li");
151  if ($referenceData.length == 0) $referenceData = $(this);
152  var insightId = $referenceData.data("insight-id");
153  var projectId = $referenceData.data("project-id");
154  var leadListId = $referenceData.data("lead-list-id");
155
156  LaunchSignupWidgetModal(insightId, projectId, leadListId);
157});
158
159$(document).on("click", ".embedded-signups-list .archive-widget", function () {
160  var $referenceData = $(this).closest(".signup-widget-li");
161  if ($referenceData.length == 0) $referenceData = $(this);
162  var insightId = $referenceData.data("insight-id");
163  var projectId = $referenceData.data("project-id");
164  var leadListId = $referenceData.data("lead-list-id");
165
166  $.post("/Emails/ArchiveDynamicSignupWidget", {
167    insightId: insightId,
168    custId: modelData.customer.Id
169  }).done(function (data) {
170    populateEmbeddedSignupsList();
171  });
172});
173
174$(document).on("submit", ".dynamic-signup-builder", function (e) {
175  e.preventDefault();
176  var $signupWidgetEditor = $("#new-signup-widget-modal");
177
178  var formData = $(this).serializeObject();
179  var $selectedList = $signupWidgetEditor.find(
180    '[name="leadListId"] option:selected'
181  );
182  formData.leadListId = $selectedList.data("leadlistid");
183  formData.projectId = $selectedList.data("projectid");
184  var fields = [],
185    requiredFields = [];
186  var $leadListUL = $signupWidgetEditor.find(".leadList-fields");
187
188  $leadListUL.find(".leadList-field").each(function () {
189    if ($(this).is(":checked")) fields.push($(this).val());
190  });
191
192  $leadListUL.find(".leadList-field-required").each(function () {
193    if ($(this).is(":checked")) requiredFields.push($(this).val());
194  });
195
196  formData.fields = fields.join(",");
197  formData.requiredFields = requiredFields.join(",");
198  formData.format = formData.SignupFormat;
199  $signupWidgetEditor
200    .find(".dynamic-signup-builder")
201    .empty()
202    .html(TOOLS.spinBlock("Loading Signup Builder..."))
203    .fadeIn();
204  $.post("/Emails/SaveDynamicSignupWidget", formData).done(function (data) {
205    buildSignupWidgetUIFromResponse(data);
206    populateEmbeddedSignupsList();
207    updatePreviewiFrame();
208  });
209});
210
211function LaunchSignupWidgetModal(insightId, projectId, leadListId) {
212  insightId = insightId || -1;
213  var $signupWidgetEditor = $("#new-signup-widget-modal");
214  $signupWidgetEditor.modal("show");
215
216  if ($signupWidgetEditor.data("insight-id") === insightId && insightId != -1)
217    return;
218  ScriptLoader.loadScriptArray(
219    ScriptLoader.scriptArrays.emailCommunication,
220    function () {
221      $signupWidgetEditor.data("insight-id", insightId);
222      $signupWidgetEditor

223        .find(".modal-body")
224        .html(TOOLS.spinBlock("Loading..."));
225
226      $.post("/Emails/DynamicSignupBuilderForm", {
227        customerId: modelData.customer.Id,
228        insightId: insightId,
229        projectId: projectId,
230        leadListId: leadListId
231      })
232        .done(function (data) {
233          var $signupWidgetEditor = buildSignupWidgetUIFromResponse(data);
234          onToggleSignupFormat($signupWidgetEditor.find("form"));
235          updatePreviewiFrame();
236        })
237        .fail(TOOLS.failDefault);
238    }
239  );
240}
241
242function buildSignupWidgetUIFromResponse(data) {
243  var $signupWidgetEditor = $("#new-signup-widget-modal");
244  $signupWidgetEditor.find(".modal-body").html(data.html);
245  if (typeof updateBootstrapAttributes === "function") {
246    updateBootstrapAttributes($signupWidgetEditor);
247  }
248  var insight = data.insight;
249  var meta = {};
250  if (insight && insight.attributes && insight.attributes.signupFormReturnJson)
251    meta = insight.attributes.signupFormReturnJson.meta;
252
253  var styleConfig = {
254    projectId: insight.projectId,
255    customStyleId: meta.customStyleId,
256    $element: $signupWidgetEditor.find(".custom-style-ui"),
257    customerId: modelData.customer.Id
258  };
259  $signupWidgetEditor.customStyleEditor = new CustomStyleEditor(styleConfig);
260
261  var $selectElement = $signupWidgetEditor.find("select[name='leadListId']");
262  PopulateDynamicSignupLeadListSelect($selectElement);
263  return $signupWidgetEditor;
264}
265
266function populateEmbeddedSignupsList() {
267  var $embbedSignupsContainer = $(".embedded-signups-container");
268  var isBs5 = $embbedSignupsContainer.is("[data-bs5]");
269  $.post("/Emails/GetEmbeddedSignups", {
270    customerId: modelData.customer.Id,
271    bs5: isBs5
272  }).done(function (data) {
273    if (isBs5) {
274      // The BS5 partial renders its own .embedded-signups-container root,
275      // so swap the section instead of nesting it inside itself.
276      // Carry the search term (and focus, if it was in the section) across the swap.
277      var $oldSection = $embbedSignupsContainer.first();
278      var searchTerm = $oldSection.find(".emailsms-signups-search").val() || "";
279      var hadFocus = $.contains($oldSection[0], document.activeElement);
280      $oldSection.replaceWith(data.html);
281      var $search = $(".embedded-signups-container[data-bs5] .emailsms-signups-search").first();
282      if ($search.length) {
283        $search.val(searchTerm);
284        if (searchTerm !== "") $search.trigger("input");
285        if (hadFocus) $search.trigger("focus");
286      }
287    } else {
288      $embbedSignupsContainer.html(data.html);
289    }
290  });
291}
292
293function PopulateDynamicSignupLeadListSelect($selectElement, customerId) {
294  $.post("/Customer/GetCustomerSubscriberLists", {
295    custId: modelData.customer.Id
296  })
297    .done(function (data) {
298      $selectElement.empty();
299      var $projectGroup = $('<optgroup label="Projects"></optgroup>');
300      var $listGroup = $('<optgroup label="Lists"></optgroup>');
301      $selectElement.append($listGroup);
302      $selectElement.append($projectGroup);
303      $.each(data.lists, function (index, element) {
304        $listGroup.append(
305          '<option value="l_' +
306            element.leadListId +
307            '" data-projectid="' +
308            element.projectId +
309            '" data-leadlistid="' +
310            element.leadListId +
311            '">' +
312            element.name +
313            "</option>"
314        );
315      });
316      $.each(data.projects, function (index, element) {
317        $projectGroup.append(
318          '<option value="p_' +
319            element.projectId +
320            '" data-projectid="' +
321            element.projectId +
322            '" data-leadlistid="' +
323            element.leadListId +
324            '">' +
325            element.name +
326            "</option>"
327        );
328      });
329      var selectedListId = $selectElement.data("selectedlistid");
330      selectedListId.length && $selectElement.val(selectedListId);
331      $.fn.chosen && $selectElement.chosen();
332    })
333    .fail(function (xhr, status, error) {
334      alert("Error: " + error);
335    });

336}