filterTaxonomyCulture function is now named with a proper unique name, based on part and field (#8702)

* Checked back previously selected terms after replacing the TaxonomyField markup.

* Checkbox reset before checking back selected items.

* Javascript functions to refresh localized terms are now named to be unique. For this purpose, added PartName property to LocalizedTaxonomiesViewModel.

* Code refactoring: added variables for part-field differentiator and function name.
This commit is contained in:
Andrea Piovanelli
2023-06-19 10:02:08 +02:00
committed by GitHub
parent 2ef2ad8e99
commit 0485e44378
3 changed files with 89 additions and 72 deletions

View File

@@ -30,12 +30,13 @@ namespace Orchard.Taxonomies.Drivers {
} }
} }
var viewModel = new LocalizedTaxonomiesViewModel { var viewModel = new LocalizedTaxonomiesViewModel {
ContentType = part.ContentItem.ContentType, ContentType = part.ContentItem.ContentType,
FieldName = field.Name, FieldName = field.Name,
Id = part.ContentItem.Id, Id = part.ContentItem.Id,
Setting = taxonomySettings Setting = taxonomySettings,
PartName = part.PartDefinition.Name
}; };
return shapeHelper.EditorTemplate(TemplateName: templateName, Model: viewModel, Prefix: GetPrefix(field, part)); return shapeHelper.EditorTemplate(TemplateName: templateName, Model: viewModel, Prefix: GetPrefix(field, part));
}); });

View File

@@ -7,6 +7,7 @@ namespace Orchard.Taxonomies.ViewModels {
public string ContentType { get; set; } public string ContentType { get; set; }
public string FieldName { get; set; } public string FieldName { get; set; }
public int Id { get; set; } public int Id { get; set; }
public string PartName { get; set; }
public TaxonomyFieldSettings Setting { get; set; } public TaxonomyFieldSettings Setting { get; set; }
} }
} }

View File

@@ -4,114 +4,121 @@
@{ @{
Script.Require("jQuery"); Script.Require("jQuery");
var Taxonomyprefix = ((ViewData)).TemplateInfo.HtmlFieldPrefix.Replace('.', '_'); var Taxonomyprefix = ((ViewData)).TemplateInfo.HtmlFieldPrefix.Replace('.', '_');
var partField = Model.PartName + "_" + Model.FieldName;
var functionName = "filterTaxonomyCulture_" + partField;
using (Script.Foot()) { using (Script.Foot()) {
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
$(document).ready(function () { $(document).ready(function () {
var pageurl = '@Url.Action("GetTaxonomy", "LocalizedTaxonomy", new { area = "Orchard.Taxonomies" })'; var pageurl = '@Url.Action("GetTaxonomy", "LocalizedTaxonomy", new { area = "Orchard.Taxonomies" })';
function filterTaxonomyCulture(culture) { function @(functionName)(culture) {
$.ajax({ $.ajax({
url: pageurl, url: pageurl,
data: { contentTypeName: '@Model.ContentType', taxonomyFieldName: '@Model.FieldName', contentId: @Model.Id, culture: culture }, data: { contentTypeName: '@Model.ContentType', taxonomyFieldName: '@Model.FieldName', contentId: @Model.Id, culture: culture },
success: function (html) { success: function (html) {
var container = $(".taxonomy-wrapper[data-id-prefix='@Taxonomyprefix']");
$(".taxonomy-wrapper[data-id-prefix='@Taxonomyprefix']").replaceWith(html); $(".taxonomy-wrapper[data-id-prefix='@Taxonomyprefix']").replaceWith(html);
$(".taxonomy-wrapper[data-id-prefix='@Taxonomyprefix'] legend").expandoControl(function (controller) { return controller.nextAll(".expando"); }, { collapse: true, remember: false }); $(".taxonomy-wrapper[data-id-prefix='@Taxonomyprefix'] legend").expandoControl(function (controller) { return controller.nextAll(".expando"); }, { collapse: true, remember: false });
@if (Model.Setting.Autocomplete) { @if (Model.Setting.Autocomplete) {
<text> <text>
var createTermCheckbox = function($wrapper, tag, checked) { var createTermCheckbox = function($wrapper, tag, checked) {
var $ul = $("ul.terms", $wrapper); var $ul = $("ul.terms", $wrapper);
var singleChoice = $(".terms-editor", $wrapper).data("singlechoice"); var singleChoice = $(".terms-editor", $wrapper).data("singlechoice");
var namePrefix = $wrapper.data("name-prefix"); var namePrefix = $wrapper.data("name-prefix");
var idPrefix = $wrapper.data("id-prefix"); var idPrefix = $wrapper.data("id-prefix");
var nextIndex = $("li", $ul).length; var nextIndex = $("li", $ul).length;
var id = isNaN(tag.value) ? -nextIndex : tag.value; var id = isNaN(tag.value) ? -nextIndex : tag.value;
var checkboxId = idPrefix + "_Terms_" + nextIndex + "__IsChecked"; var checkboxId = idPrefix + "_Terms_" + nextIndex + "__IsChecked";
var checkboxName = namePrefix + ".Terms[" + nextIndex + "].IsChecked"; var checkboxName = namePrefix + ".Terms[" + nextIndex + "].IsChecked";
var radioName = namePrefix + ".SingleTermId"; var radioName = namePrefix + ".SingleTermId";
var checkboxHtml = "<input type=\"checkbox\" value=\"" + (checked ? "true\" checked=\"checked\"" : "false") + " data-term=\"" + tag.label + "\" data-term-identity=\"" + tag.label.toLowerCase() + "\" id=\"" + checkboxId + "\" name=\"" + checkboxName + "\" />"; var checkboxHtml = "<input type=\"checkbox\" value=\"" + (checked ? "true\" checked=\"checked\"" : "false") + " data-term=\"" + tag.label + "\" data-term-identity=\"" + tag.label.toLowerCase() + "\" id=\"" + checkboxId + "\" name=\"" + checkboxName + "\" />";
var radioHtml = "<input type=\"radio\" value=\"" + id + (checked ? "\" checked=\"checked\"" : "\"") + " data-term=\"" + tag.label + "\" data-term-identity=\"" + tag.label.toLowerCase() + "\" id=\"" + checkboxId + "\" name=\"" + radioName + "\" />"; var radioHtml = "<input type=\"radio\" value=\"" + id + (checked ? "\" checked=\"checked\"" : "\"") + " data-term=\"" + tag.label + "\" data-term-identity=\"" + tag.label.toLowerCase() + "\" id=\"" + checkboxId + "\" name=\"" + radioName + "\" />";
var inputHtml = singleChoice ? radioHtml : checkboxHtml; var inputHtml = singleChoice ? radioHtml : checkboxHtml;
var $li = $("<li>" + var $li = $("<li>" +
inputHtml + inputHtml +
"<input type=\"hidden\" value=\"" + id + "\" id=\"" + idPrefix + "_Terms_" + nextIndex + "__Id" + "\" name=\"" + namePrefix + ".Terms[" + nextIndex + "].Id" + "\" />" + "<input type=\"hidden\" value=\"" + id + "\" id=\"" + idPrefix + "_Terms_" + nextIndex + "__Id" + "\" name=\"" + namePrefix + ".Terms[" + nextIndex + "].Id" + "\" />" +
"<input type=\"hidden\" value=\"" + tag.label + "\" id=\"" + idPrefix + "_Terms_" + nextIndex + "__Name" + "\" name=\"" + namePrefix + ".Terms[" + nextIndex + "].Name" + "\" />" + "<input type=\"hidden\" value=\"" + tag.label + "\" id=\"" + idPrefix + "_Terms_" + nextIndex + "__Name" + "\" name=\"" + namePrefix + ".Terms[" + nextIndex + "].Name" + "\" />" +
"<label class=\"forcheckbox\" for=\"" + checkboxId + "\">" + tag.label + "</label>" + "<label class=\"forcheckbox\" for=\"" + checkboxId + "\">" + tag.label + "</label>" +
"</li>").hide(); "</li>").hide();
if (checked && singleChoice) { if (checked && singleChoice) {
$("input[type='radio']", $ul).removeAttr("checked"); $("input[type='radio']", $ul).removeAttr("checked");
$("input[type='radio'][name$='IsChecked']", $ul).val("false"); $("input[type='radio'][name$='IsChecked']", $ul).val("false");
} }
$ul.append($li); $ul.append($li);
$li.fadeIn(); $li.fadeIn();
}; };
/* Event handlers /* Event handlers
**********************************************************************/ **********************************************************************/
var onTagsChanged = function(tagLabelOrValue, action, tag) { var onTagsChanged = function(tagLabelOrValue, action, tag) {
if (tagLabelOrValue == null) if (tagLabelOrValue == null)
return; return;
var $input = this.appendTo; var $input = this.appendTo;
var $wrapper = $input.parents("fieldset:first"); var $wrapper = $input.parents("fieldset:first");
var $tagIt = $("ul.tagit", $wrapper); var $tagIt = $("ul.tagit", $wrapper);
var singleChoice = $(".terms-editor", $wrapper).data("singlechoice"); var singleChoice = $(".terms-editor", $wrapper).data("singlechoice");
var $terms = $("ul.terms", $wrapper); var $terms = $("ul.terms", $wrapper);
var initialTags = $(".terms-editor", $wrapper).data("selected-terms"); var initialTags = $(".terms-editor", $wrapper).data("selected-terms");
if (singleChoice && action == "added") { if (singleChoice && action == "added") {
$tagIt.tagit("fill", tag); $tagIt.tagit("fill", tag);
} }
$terms.empty(); $terms.empty();
var tags = $tagIt.tagit("tags"); var tags = $tagIt.tagit("tags");
$(tags).each(function(index, tag) { $(tags).each(function(index, tag) {
createTermCheckbox($wrapper, tag, true); createTermCheckbox($wrapper, tag, true);
}); });
// Add any tags that are no longer selected but were initially on page load. // Add any tags that are no longer selected but were initially on page load.
// These are required to be posted back so they can be removed. // These are required to be posted back so they can be removed.
var removedTags = $.grep(initialTags, function(initialTag) { return $.grep(tags, function(tag) { return tag.value === initialTag.value }).length === 0 }); var removedTags = $.grep(initialTags, function(initialTag) { return $.grep(tags, function(tag) { return tag.value === initialTag.value }).length === 0 });
$(removedTags).each(function(index, tag) { $(removedTags).each(function(index, tag) {
createTermCheckbox($wrapper, tag, false); createTermCheckbox($wrapper, tag, false);
}); });
$(".no-terms", $wrapper).hide(); $(".no-terms", $wrapper).hide();
}; };
var renderAutocompleteItem = function(ul, item) { var renderAutocompleteItem = function(ul, item) {
var label = item.label; var label = item.label;
for (var i = 0; i < item.levels; i++) { for (var i = 0; i < item.levels; i++) {
label = "<span class=\"gap\">&nbsp;</span>" + label; label = "<span class=\"gap\">&nbsp;</span>" + label;
} }
var li = item.disabled ? "<li class=\"disabled\"></li>" : "<li></li>"; var li = item.disabled ? "<li class=\"disabled\"></li>" : "<li></li>";
return $(li) return $(li)
.data("item.autocomplete", item) .data("item.autocomplete", item)
.append($("<a></a>").html(label)) .append($("<a></a>").html(label))
.appendTo(ul); .appendTo(ul);
}; };
/* Initialization /* Initialization
**********************************************************************/ **********************************************************************/
$(".terms-editor").each(function() { $(".terms-editor").each(function() {
var selectedTerms = $(this).data("selected-terms"); var selectedTerms = $(this).data("selected-terms");
var autocompleteUrl = $(this).data("autocomplete-url"); var autocompleteUrl = $(this).data("autocomplete-url");
var $tagit = $("> ul", this).tagit({ var $tagit = $("> ul", this).tagit({
tagSource: function(request, response) { tagSource: function(request, response) {
var termsEditor = $(this.element).parents(".terms-editor"); var termsEditor = $(this.element).parents(".terms-editor");
$.getJSON(autocompleteUrl, { taxonomyId: termsEditor.data("taxonomy-id"), leavesOnly: termsEditor.data("leaves-only"), query: request.term }, function(data, status, xhr) { $.getJSON(autocompleteUrl, { taxonomyId: termsEditor.data("taxonomy-id"), leavesOnly: termsEditor.data("leaves-only"), query: request.term }, function(data, status, xhr) {
response(data); response(data);
}); });
}, },
initialTags: selectedTerms, initialTags: selectedTerms,
triggerKeys: ['enter', 'tab'], // default is ['enter', 'space', 'comma', 'tab'] but we remove comma and space to allow them in the terms triggerKeys: ['enter', 'tab'], // default is ['enter', 'space', 'comma', 'tab'] but we remove comma and space to allow them in the terms
allowNewTags: $(this).data("allow-new-terms"), allowNewTags: $(this).data("allow-new-terms"),
@@ -133,14 +140,22 @@
/////////////////////////// ///////////////////////////
} }
}).fail(function () { }).fail(function () {
alert("@T("Loading taxonomy fail, Retry")"); alert("@T("Loading taxonomy fail, Retry")");
}); });
} }
$("#Localization_SelectedCulture").on('change', function () { $("#Localization_SelectedCulture").on('change', function (p) {
var optionSelected = $("option:selected", this); var optionSelected = $("option:selected", this);
filterTaxonomyCulture($("#Localization_SelectedCulture").val()); var refreshTerms = false;
if (p != undefined) {
if (p == "@(partField)") {
refreshTerms = true;
}
}
if (refreshTerms) {
@(functionName)($("#Localization_SelectedCulture").val());
}
}); });
$("#Localization_SelectedCulture").trigger("change"); $("#Localization_SelectedCulture").trigger("change", "@(partField)");
}); });
//]]> //]]>
</script> </script>