You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
269 lines
7.5 KiB
269 lines
7.5 KiB
// @ts-nocheck
|
|
|
|
function appendHTML(parent, html) {
|
|
var div = document.createElement("div");
|
|
div.innerHTML = html;
|
|
while (div.children.length > 0) {
|
|
parent.appendChild(div.children[0]);
|
|
}
|
|
div.remove();
|
|
}
|
|
|
|
const vscode = acquireVsCodeApi();
|
|
|
|
const textInputTemplate = `<div class="form-group mb-4">
|
|
<label for="setting:@correspondingSetting" class="text-white-50a"
|
|
>@name</label
|
|
>
|
|
@tooltip
|
|
<input
|
|
type="text"
|
|
class="form-control text"
|
|
id="setting:@correspondingSetting"
|
|
placeholder="@placeholder"
|
|
setting="@correspondingSetting"
|
|
settingType="@settingType"
|
|
/>
|
|
</div>`;
|
|
|
|
const textInputGroupTemplate = `<div class="mb-4">
|
|
<label for="setting:@correspondingSetting" class="text-white-50a"
|
|
>@name</label
|
|
>
|
|
@tooltip
|
|
<div class="input-group">
|
|
<input
|
|
type="text"
|
|
class="form-control text"
|
|
id="setting:@correspondingSetting"
|
|
placeholder="@placeholder"
|
|
setting="@correspondingSetting"
|
|
settingType="@settingType"
|
|
/>
|
|
<div class="input-group-append">
|
|
<button class="btn btn-primary" @disabled onclick="@action" type="button" id="button-addon2">View</button>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
const numberInputTemplate = `<div class="form-group mb-4">
|
|
<label for="setting:@correspondingSetting" class="text-white-50a"
|
|
>@name</label
|
|
>
|
|
@tooltip
|
|
<input
|
|
type="number"
|
|
class="form-control number"
|
|
id="setting:@correspondingSetting"
|
|
placeholder="@placeholder"
|
|
setting="@correspondingSetting"
|
|
settingType="@settingType"
|
|
/>
|
|
</div>`;
|
|
|
|
const checkboxTemplate = `<div class="custom-control custom-checkbox my-1 mr-sm-2 mb-4">
|
|
<input
|
|
class="custom-control-input checkbox"
|
|
type="checkbox"
|
|
id="setting:@correspondingSetting"
|
|
setting="@correspondingSetting"
|
|
settingType="@settingType"
|
|
/>
|
|
<label
|
|
for="setting:@correspondingSetting"
|
|
class="custom-control-label text-white-50a"
|
|
>@name</label>
|
|
@tooltip
|
|
</div>`;
|
|
|
|
const textareaTemplate = `<div class="form-group mb-3">
|
|
<label
|
|
for="setting:@correspondingSetting"
|
|
class="text-white-50a"
|
|
>@name</label>
|
|
@tooltip
|
|
<textarea
|
|
class="form-control textarea"
|
|
id="setting:@correspondingSetting"
|
|
data-min-rows="1"
|
|
placeholder="@placeholder"
|
|
setting="@correspondingSetting"
|
|
settingType="@settingType"
|
|
></textarea>
|
|
</div>`;
|
|
|
|
const globalParent = document.getElementById("globalSettings");
|
|
const envParent = document.getElementById("environmentSettings");
|
|
const saveStatus = document.getElementById("saveStatus");
|
|
|
|
globalMap.forEach(settingMap => {
|
|
let template;
|
|
switch (settingMap.type) {
|
|
case "textinput":
|
|
template = textInputTemplate;
|
|
break;
|
|
case "numberinput":
|
|
template = numberInputTemplate;
|
|
break;
|
|
case "checkbox":
|
|
template = checkboxTemplate;
|
|
break;
|
|
case "textarea":
|
|
template = textareaTemplate;
|
|
break;
|
|
}
|
|
const html = template
|
|
.replace(new RegExp("@name", "g"), settingMap.name)
|
|
.replace(new RegExp("@placeholder", "g"), settingMap.placeholder)
|
|
.replace(
|
|
new RegExp("@correspondingSetting", "g"),
|
|
settingMap.correspondingSetting
|
|
)
|
|
.replace(new RegExp("@tooltip"), "")
|
|
.replace(new RegExp("@settingType", "g"), "global");
|
|
appendHTML(globalParent, html);
|
|
});
|
|
|
|
envMap.forEach(envMap => {
|
|
let template;
|
|
switch (envMap.type) {
|
|
case "textinput":
|
|
template = textInputTemplate;
|
|
break;
|
|
case "numberinput":
|
|
template = textInputTemplate;
|
|
break;
|
|
case "checkbox":
|
|
template = checkboxTemplate;
|
|
break;
|
|
}
|
|
const isInputGroup = envMap.correspondingSetting === "gist";
|
|
let disabledStatus = "";
|
|
if (isInputGroup) {
|
|
template = textInputGroupTemplate;
|
|
if (!_.get(envData, "gist") || !_.get(globalData, "token")) {
|
|
disabledStatus = "disabled";
|
|
}
|
|
}
|
|
const html = template
|
|
.replace(new RegExp("@name", "g"), envMap.name)
|
|
.replace(new RegExp("@placeholder", "g"), envMap.placeholder)
|
|
.replace(
|
|
new RegExp("@correspondingSetting", "g"),
|
|
envMap.correspondingSetting
|
|
)
|
|
.replace(
|
|
new RegExp("@tooltip"),
|
|
`
|
|
<a
|
|
class="text-white-50a fas fa-info-circle"
|
|
data-toggle="tooltip"
|
|
data-placement="right"
|
|
title="${envMap.tooltip}">
|
|
</a>
|
|
`
|
|
)
|
|
.replace(new RegExp("@settingType", "g"), "env")
|
|
.replace(
|
|
new RegExp("@action", "g"),
|
|
`inputGroupAction('${envMap.correspondingSetting}')`
|
|
)
|
|
.replace(new RegExp("@disabled", "g"), disabledStatus);
|
|
appendHTML(envParent, html);
|
|
});
|
|
|
|
$(document).ready(function() {
|
|
save();
|
|
$('[data-toggle="tooltip"]').tooltip({ container: "html" });
|
|
$(".text")
|
|
.each((i, el) => {
|
|
if ($(el).attr("settingType") === "global") {
|
|
$(el).val(_.get(globalData, $(el).attr("setting")));
|
|
} else {
|
|
$(el).val(envData[$(el).attr("setting")]);
|
|
}
|
|
})
|
|
.change(function() {
|
|
save();
|
|
let val = $(this).val();
|
|
vscode.postMessage({
|
|
command: $(this).attr("setting"),
|
|
text: val,
|
|
type: $(this).attr("settingType")
|
|
});
|
|
});
|
|
$(".number")
|
|
.each((i, el) => {
|
|
if ($(el).attr("settingType") === "global") {
|
|
$(el).val(_.get(globalData, $(el).attr("setting")));
|
|
} else {
|
|
$(el).val(envData[$(el).attr("setting")]);
|
|
}
|
|
})
|
|
.change(function() {
|
|
save();
|
|
let val = Number($(this).val());
|
|
vscode.postMessage({
|
|
command: $(this).attr("setting"),
|
|
text: val,
|
|
type: $(this).attr("settingType")
|
|
});
|
|
});
|
|
$(".checkbox")
|
|
.each((i, el) => {
|
|
if ($(el).attr("settingType") === "global") {
|
|
$(el).prop("checked", _.get(globalData, $(el).attr("setting")));
|
|
} else {
|
|
$(el).prop("checked", envData[$(el).attr("setting")]);
|
|
}
|
|
})
|
|
.change(function() {
|
|
save();
|
|
let val = $(this).is(":checked");
|
|
vscode.postMessage({
|
|
command: $(this).attr("setting"),
|
|
text: val,
|
|
type: $(this).attr("settingType")
|
|
});
|
|
});
|
|
$(".textarea")
|
|
.each((i, el) => {
|
|
let str = "";
|
|
const items = _.get(globalData, $(el).attr("setting"));
|
|
items.forEach(item => (str += item + "\n"));
|
|
$(el).val(str.slice(0, -1));
|
|
$(el).prop("rows", items.length);
|
|
})
|
|
.change(function() {
|
|
save();
|
|
let val = [];
|
|
$(this)
|
|
.val()
|
|
.split("\n")
|
|
.forEach(item => {
|
|
if (item !== "") {
|
|
val.push(item);
|
|
}
|
|
});
|
|
vscode.postMessage({
|
|
command: $(this).attr("setting"),
|
|
text: val,
|
|
type: "global"
|
|
});
|
|
});
|
|
});
|
|
|
|
function save() {
|
|
saveStatus.innerHTML = `<i class="spinner-border dock-bottom-left"></i>`;
|
|
setTimeout(
|
|
() =>
|
|
(saveStatus.innerHTML = `<i class="fas fa-check dock-bottom-left"></i>`),
|
|
1000
|
|
);
|
|
}
|
|
|
|
function inputGroupAction(setting) {
|
|
if (setting === "gist") {
|
|
vscode.postMessage("openGist");
|
|
}
|
|
}
|