const $ = require("jquery");
class TurboLink {
constructor(el, opts) {
this.$link = $(el);
this.opts = opts;
this.sendRequest();
}
getLink() {
return this.$link;
}
sendRequest() {
const targetSelector = this.getTargetSelector();
const requestUrl = this.getRequestUrl();
this.$link.click((e) => {
e.preventDefault();
$.ajax({
url: requestUrl,
dataType: 'html',
success: (data, textStatus, jqXHR) => {
let replaceWith = $(data).find(targetSelector);
if (replaceWith) {
$(targetSelector).replaceWith(replaceWith);
this.triggerEvent('success');
}
},
beforeSend: () => {
this.triggerEvent('start');
},
error: () => {
this.triggerEvent('error');
},
complete: () => {
this.triggerEvent('complete');
}
});
});
}
triggerEvent(name) {
if (this.opts['events'][name]) {
this.opts['events'][name](this)
}
}
getTargetSelector() {
if (this.opts['target']) {
return this.opts['target'];
} else if (this.$link.hasData('turbolink-target')) {
return this.$link.data('turbolink-target');
} else {
return undefined;
}
}
getRequestUrl() {
if (this.opts['url']) {
return this.opts['url'];
} else if (this.$link.attr('href')) {
return this.$link.attr('href')
} else {
return undefined;
}
}
}
module.exports = TurboLink;