lanpartytools/LANCommander
lanpartytools/LANCommander
1
0
Fork 0
Code Issues Pull requests Projects Releases 17 Packages Activity

Put select JS code in a class

Browse source
This commit is contained in:
Pat Hartl 2023-01-11 21:24:57 -06:00
parent 5809b7fa3d
commit 21328163f7
5 changed files with 64 additions and 108 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

58
LANCommander/Views/Games/Add.cshtml
View file

@ -92,59 +92,9 @@
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script>
var developers = @Html.Raw(Json.Serialize(Model.Developers));
var publishers = @Html.Raw(Json.Serialize(Model.Publishers));
var genres = @Html.Raw(Json.Serialize(Model.Genres));
var tags = @Html.Raw(Json.Serialize(Model.Tags));
function selectize(selector, options) {
var selected = [];
for (let option of options) {
if (option.selected)
selected.push(option.value);
}
$(selector).val(selected.join('|'));
$(selector).selectize({
delimiter: '|',
plugins: ['remove_button'],
create: true,
valueField: 'value',
labelField: 'text',
searchField: 'text',
options: options,
onItemAdd: function(value) {
for (let option of Object.values(this.options)) {
if (option.value == value)
{
this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
}
}
},
onItemRemove: function(value) {
for (let option of Object.values(this.options)) {
if (option.value == value)
{
this.$input.siblings('select').find(`option[value="${option.value}"]`).remove();
}
}
},
onInitialize: function() {
for (let option of Object.values(this.options)) {
if (option.selected)
{
this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
}
}
}
});
}
selectize('.developer-select', developers);
selectize('.publisher-select', publishers);
selectize('.genre-select', genres);
selectize('.tag-select', tags);
new Select('.developer-select', @Html.Raw(Json.Serialize(Model.Developers)));
new Select('.publisher-select', @Html.Raw(Json.Serialize(Model.Publishers)));
new Select('.genre-select', @Html.Raw(Json.Serialize(Model.Genres)));
new Select('.tag-select', @Html.Raw(Json.Serialize(Model.Tags)));
</script>
}

58
LANCommander/Views/Games/Edit.cshtml
View file

@ -209,59 +209,9 @@
@{ await Html.RenderPartialAsync("_ValidationScriptsPartial"); }
<script>
var developers = @Html.Raw(Json.Serialize(Model.Developers));
var publishers = @Html.Raw(Json.Serialize(Model.Publishers));
var genres = @Html.Raw(Json.Serialize(Model.Genres));
var tags = @Html.Raw(Json.Serialize(Model.Tags));
function selectize(selector, options) {
var selected = [];
for (let option of options) {
if (option.selected)
selected.push(option.value);
}
$(selector).val(selected.join('|'));
$(selector).selectize({
delimiter: '|',
plugins: ['remove_button'],
create: true,
valueField: 'value',
labelField: 'text',
searchField: 'text',
options: options,
onItemAdd: function(value) {
for (let option of Object.values(this.options)) {
if (option.value == value)
{
this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
}
}
},
onItemRemove: function(value) {
for (let option of Object.values(this.options)) {
if (option.value == value)
{
this.$input.siblings('select').find(`option[value="${option.value}"]`).remove();
}
}
},
onInitialize: function() {
for (let option of Object.values(this.options)) {
if (option.selected)
{
this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
}
}
}
});
}
selectize('.developer-select', developers);
selectize('.publisher-select', publishers);
selectize('.genre-select', genres);
selectize('.tag-select', tags);
new Select('.developer-select', @Html.Raw(Json.Serialize(Model.Developers)));
new Select('.publisher-select', @Html.Raw(Json.Serialize(Model.Publishers)));
new Select('.genre-select', @Html.Raw(Json.Serialize(Model.Genres)));
new Select('.tag-select', @Html.Raw(Json.Serialize(Model.Tags)));
</script>
}

1
LANCommander/Views/Shared/_Layout.cshtml
View file

@ -91,6 +91,7 @@
<script src="~/lib/selectize.js/js/selectize.min.js"></script>
<script src="~/lib/tabler/core/dist/js/tabler.min.js"></script>
<script src="~/js/Modal.js"></script>
<script src="~/js/Select.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>

2
LANCommander/Views/Shared/_LayoutBasic.cshtml
View file

@ -14,6 +14,8 @@
<script src="~/lib/selectize.js/js/selectize.min.js"></script>
<script src="~/lib/tabler/core/dist/js/tabler.min.js"></script>
<script src="~/js/Modal.js"></script>
<script src="~/js/Select.js"></script>
@await RenderSectionAsync("Scripts", required: false)
</body>
</html>

53
LANCommander/wwwroot/js/Select.js Normal file
View file

@ -0,0 +1,53 @@
class Select {
Element;
Options;
constructor(selector, options) {
this.Options = options;
this.Element = $(selector).get(0);
this.Initialize();
}
Initialize() {
let selected = [];
for (let option of this.Options) {
if (option.selected)
selected.push(option.value);
}
$(this.Element).val(selected.join('|'));
$(this.Element).selectize({
delimiter: '|',
plugins: ['remove_button'],
create: true,
valueField: 'value',
labelField: 'text',
searchField: 'text',
options: this.Options,
onItemAdd: function (value) {
for (let option of Object.keys(this.options)) {
if (option.value == value) {
this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
}
}
},
onItemRemove: function (value) {
for (let option of Object.keys(this.options)) {
if (option.value == value) {
this.$input.siblings('select').find(`option[value="${option.value}"]`).remove();
}
}
},
onInitialize: function () {
for (let option of Object.keys(this.options)) {
if (option.selected) {
this.$input.siblings('select').append(`<option value="${option.value}" selected>${option.text}</option>`);
}
}
}
});
}
}