Hi,
I have a macro that takes into parameters some label. For a proper UX experience, I would like to mimic the behavior of the “Content by label” macro with regards to the labels autocomplete and the load of the previous parameters. To do this I am using auiSelect2.
So far I have been able to load the previous labels using the “initSelection” (plus triggering a change after) or thanks to the setValue() function. However if I am try to remove one of the pre-loaded label by click on the x, it opens a new tab. I have been trying preventDefault() but it doesn’t fix it, and I can’t figure out where this behavior come from.
Here is the current working code:
// bind on initialization of editor
AJS.bind("init.rte", function() {
var getParameters = function() {
var selection = AJS.Rte.getEditor().selection.getNode();
return $(selection).attr("data-macro-parameters").split("=")[1].split(",");
}
var jsOverrides = {
"fields" : {
"string" : function(params, options){
if (params && params.name != "labels") {
return AJS.MacroBrowser.ParameterFields["string"](params, options);
}
var paramDiv = $(Confluence.Templates.MacroBrowser.macroParameter());
console.log(paramDiv);
var input = $("input", paramDiv);
var field = AJS.MacroBrowser.Field(paramDiv, input, options);
auiSelect2 = input;
field.input.auiSelect2({
minimumInputLength: 1,
multiple: true,
initSelection : function (element, callback) {
var id = $(element).val();
// working code
var data = [];
$(getParameters()).each(function (index, value) {
data.push({id: index, text: value});
});
callback(data);
},
ajax: {
url: AJS.params.baseUrl + "/labels/autocompletelabel.action",
dataType: 'json',
type: 'GET',
data: function(query) {
return {
query: query,
maxResults: 3
}
},
results: function(data, params) {
var results = [];
var matches = data.contentNameMatches;
for (var i = 0; i < matches[0].length; ++i) {
var match = matches[0][i];
results.push({
id: match.name,
text: match.name
});
}
return {
results: results
};
}
}
});
//Work by it self but I would rather use the initFunction for initialization
// field.input.select2('data',getInitValuesForParameters(getParameters())).trigger('change');
//If initFunction is used we need to trigger the change ...
field.input.val("change").trigger('change');
return field;
}
}
};
AJS.MacroBrowser.setMacroJsOverride("my macro with auiselect2 autcomplete labels", jsOverrides)
});
Would someone know how to properly have the auiselect2 properly instantiated with initials values ?
Thanks in advance,
Florian