https://deldotinteract.org/Scripts/MyData/my-data.section-ui.js

1/**
2 * Builds the public-facing MyData sections.
3 *
4 * @param config The config object.
5 */
6function MyDataSectionUI(config) {
7  this.section = config.section;
8  this.myData = config.myData;
9  this.section = config.section;
10  this.modules = config.modules;
11  this.$container =
12    config.$container ||
13    this.myData.$container.find("[data-section-id=" + this.section.id + "]");
14
15  this.init();
16}
17
18MyDataSectionUI.prototype.init = function () {
19  var that = this;
20  that.applyAccordionToContainer();
21  that.$accordionInner = that.$buildAccordionInner();
22  that.$container.append(that.$accordionInner);
23  that.buildModules();
24};
25
26MyDataSectionUI.prototype.applyAccordionToContainer = function () {
27  var that = this;
28  that.$container.addClass("my-data-accordion-outer accordion-item");
29
30  var $accordionHeader = $('<h2 class="accordion-header">').attr(
31    "id",
32    "heading-" + this.section.id
33  );
34
35  var $buttonHeader = $(
36    '<button class="accordion-button my-data-accordion-toggle collapsed" type="button">'
37  );
38
39  $buttonHeader.attr("data-bs-toggle", "collapse");
40  $buttonHeader.attr(
41    "data-bs-target",
42    "#my-data-accordion-inner-" + that.section.id
43  );
44  $buttonHeader.attr("aria-expanded", "false");
45  $buttonHeader.attr(
46    "aria-controls",
47    "my-data-accordion-inner-" + that.section.id
48  );
49  $buttonHeader.html(that.section.title);
50
51  $accordionHeader.append($buttonHeader);
52  that.$container.append($accordionHeader);
53};
54
55MyDataSectionUI.prototype.$buildAccordionInner = function () {
56  var that = this;
57  var $accordionInner = $("<div>").addClass(
58    "accordion-collapse collapse my-data-accordion-inner"
59  );
60  $accordionInner.attr("id", "my-data-accordion-inner-" + that.section.id);
61  $accordionInner.attr("aria-labelledby", "heading-" + that.section.id);
62
63  var $accordionBody = $('<div class="accordion-body">');
64
65  var $description = $("<div>").addClass("my-data-section-description");
66  $description.html(that.section.description);
67

68  that.$modulesContainer = $('<div class="my-data-section-modules">');
69
70  $accordionBody.append($description);
71  $accordionBody.append(that.$modulesContainer);
72  $accordionInner.append($accordionBody);
73
74  return $accordionInner;
75};
76
77MyDataSectionUI.prototype.buildModules = function () {
78  var that = this;
79
80  var sortAbove = -1;
81  var sortBelow = 1;
82  that.modules.sort(function (a, b) {
83    return a.displayOrder < b.displayOrder ? sortAbove : sortBelow;
84  });
85
86  $.each(that.modules, function (idx, module) {
87    var $moduleContainer = that._makeExistModuleUIDiv(module.id);
88    that.$modulesContainer.append($moduleContainer);
89    module.ui = new MyDataModuleLoader({
90      $container: $moduleContainer,
91      module: module,
92      myData: that.myData
93    });
94  });
95};
96
97MyDataSectionUI.prototype._makeExistModuleUIDiv = function (moduleId) {
98  var that = this;
99  var $moduleContainer = that.$container.find(
100    "#my-data-module-outer-" + moduleId
101  );
102  if ($moduleContainer === null || !$moduleContainer.length) {
103    $moduleContainer = $("<div>");
104    $moduleContainer.attr("id", "my-data-module-outer-" + moduleId);
105  }
106
107  return $moduleContainer;
108};
109
110MyDataSectionUI.prototype.processSearchResponse = function (myDataUserPayload) {
111  var that = this;
112  window.myDataUserPayload = myDataUserPayload;
113
114  $.each(that.modules, function (idx, module) {
115    module.ui.processSearchResponse(myDataUserPayload);
116  });
117};