-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathformsite-selector.js
133 lines (122 loc) · 3.2 KB
/
formsite-selector.js
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
122
123
124
125
126
127
128
129
130
131
132
133
var currentValue = null;
var isDisabled = true;
var config = null;
var forms = null;
function updateDisabled(disabled) {
var elements = $(".selector").add(".remove").add(".spacer");
if (disabled) {
elements.hide();
} else {
elements.show();
}
updateSize();
isDisabled = disabled;
}
function updateSize() {
// Update the custom element height in the Kentico UI.
const height = Math.ceil($("html").height());
CustomElement.setHeight(height);
}
function validateConfig() {
if (!config.apiEndpoint) {
console.error(
"Missing Formsite API base URL. Please provide apiEndpoint within the custom element JSON config."
);
}
if (!config.apiKey) {
console.error(
"Missing Formsite API key. Please provide apiKey within the custom element JSON config."
);
}
}
function getForms(val) {
$.ajax({
url: "https://safelife-formsite-cors.herokuapp.com/" + config.apiEndpoint,
dataType: "json",
headers: {
Authorization: "bearer " + config.apiKey,
},
success: function (response) {
forms = response.forms;
fillDropDown(val);
},
error: function (error) {
console.log(error);
},
});
}
function fillDropDown(val) {
const $dropdown = $(".form__dropdown");
for (var i = 0; i < forms.length; i++) {
var option = document.createElement("option");
option.value = forms[i].name;
option.text = forms[i].name;
$dropdown[0].appendChild(option);
}
if (val) {
$('#dropdown [value="' + val.name + '"]').attr("selected", "true");
}
}
function renderSelected(form) {
const $titleText = $(".title").find(".text");
if (form) {
$titleText.html(
"<b>Selected form:</b> " +
form.name +
` <a class="remove" onclick="remove()">Remove</a>`
);
$titleText.addClass("title--selected");
} else {
$titleText.text("No form selected");
$titleText.removeClass("title--selected");
}
updateSize();
}
function remove() {
$("#dropdown").find("option:disabled").prop("selected", "selected");
formSelected(null);
}
function formSelected(form) {
if (!isDisabled) {
if (form) {
currentValue = forms.find((x) => x.name == form);
CustomElement.setValue(JSON.stringify(currentValue));
renderSelected(currentValue);
} else {
currentValue = null;
CustomElement.setValue(null);
renderSelected(null);
}
}
}
function setupSelector(value) {
if (value) {
getForms(JSON.parse(value));
currentValue = JSON.parse(value);
renderSelected(currentValue);
} else {
getForms();
renderSelected(null);
}
window.addEventListener("resize", updateSize);
}
function initCustomElement() {
updateSize();
try {
CustomElement.init((element, _context) => {
config = element.config || {};
validateConfig();
setupSelector(element.value);
updateDisabled(element.disabled);
updateSize();
});
// React on disabled changed (e.g. when publishing the item)
CustomElement.onDisabledChanged(updateDisabled);
} catch (err) {
// Initialization with Kentico Custom element API failed (page displayed outside of the Kentico UI)
console.error(err);
setupSelector();
updateDisabled(true);
}
}
initCustomElement();