| 1 |
jQuery(window).on("elementor:init", function () { |
| 2 |
|
| 3 |
// Extend Elementor Control |
| 4 |
const EasyAutocomplete = elementor.modules.controls.BaseData.extend({ |
| 5 |
|
| 6 |
isSearch: false, |
| 7 |
|
| 8 |
//------------------------------------------------------ |
| 9 |
// Load initial selected items from DB |
| 10 |
//------------------------------------------------------ |
| 11 |
loadSelectedResults() { |
| 12 |
const ids = this.normalizeIDs(this.getControlValue()); |
| 13 |
if (!ids.length) return; |
| 14 |
|
| 15 |
this.showSpinner(); |
| 16 |
|
| 17 |
jQuery.ajax({ |
| 18 |
url: easyel_custom_select_obj.ajax_url, |
| 19 |
type: "POST", |
| 20 |
data: { |
| 21 |
action: this.model.get("render"), |
| 22 |
post_type: this.model.get("post_type"), |
| 23 |
taxonomy: this.model.get("taxonomy"), |
| 24 |
query_type: this.model.get("query_type"), |
| 25 |
id: ids, |
| 26 |
security: easyel_custom_select_obj.security, |
| 27 |
}, |
| 28 |
success: (results) => { |
| 29 |
this.isSearch = true; |
| 30 |
this.model.set("options", results); |
| 31 |
this.render(); |
| 32 |
}, |
| 33 |
}); |
| 34 |
}, |
| 35 |
|
| 36 |
//------------------------------------------------------ |
| 37 |
// Normalize ID Input |
| 38 |
//------------------------------------------------------ |
| 39 |
normalizeIDs(value) { |
| 40 |
if (!value) return []; |
| 41 |
return Array.isArray(value) ? value : [value]; |
| 42 |
}, |
| 43 |
|
| 44 |
//------------------------------------------------------ |
| 45 |
// Add loading spinner |
| 46 |
//------------------------------------------------------ |
| 47 |
showSpinner() { |
| 48 |
this.ui.select.prop("disabled", true); |
| 49 |
this.$el |
| 50 |
.find(".elementor-control-title") |
| 51 |
.after(`<span class="elementor-control-spinner"> <i class="fa fa-spinner fa-spin"></i> </span>`); |
| 52 |
}, |
| 53 |
|
| 54 |
//------------------------------------------------------ |
| 55 |
// Ready state – initialize Select2 dropdown |
| 56 |
//------------------------------------------------------ |
| 57 |
onReady: function () { |
| 58 |
const self = this; |
| 59 |
|
| 60 |
this.ui.select.select2({ |
| 61 |
placeholder: "Search", |
| 62 |
allowClear: true, |
| 63 |
minimumInputLength: 2, |
| 64 |
ajax: { |
| 65 |
url: easyel_custom_select_obj.ajax_url, |
| 66 |
method: "POST", |
| 67 |
dataType: "json", |
| 68 |
delay: 250, |
| 69 |
data(params) { |
| 70 |
return { |
| 71 |
q: params.term, |
| 72 |
action: self.model.get("search"), |
| 73 |
post_type: self.model.get("post_type"), |
| 74 |
taxonomy: self.model.get("taxonomy"), |
| 75 |
query_type: self.model.get("query_type"), |
| 76 |
security: easyel_custom_select_obj.security, |
| 77 |
}; |
| 78 |
}, |
| 79 |
processResults(data) { |
| 80 |
return { results: data }; |
| 81 |
}, |
| 82 |
cache: true, |
| 83 |
}, |
| 84 |
}); |
| 85 |
|
| 86 |
if (!this.isSearch) { |
| 87 |
this.loadSelectedResults(); |
| 88 |
} |
| 89 |
}, |
| 90 |
|
| 91 |
//------------------------------------------------------ |
| 92 |
// Cleanup when destroyed |
| 93 |
//------------------------------------------------------ |
| 94 |
onBeforeDestroy() { |
| 95 |
if (this.ui.select.data("select2")) { |
| 96 |
this.ui.select.select2("destroy"); |
| 97 |
} |
| 98 |
this.$el.remove(); |
| 99 |
}, |
| 100 |
}); |
| 101 |
|
| 102 |
// Register the new control |
| 103 |
elementor.addControlView("easyel_autocomplete", EasyAutocomplete); |
| 104 |
}); |
