import jQ from 'jquery';
import BaseComponent from "../../base-component";
import Settings from "../../../helpers/settings";
/**
* The scroll to top element.
* Is rendered inside the <body> tag with class 'boost-pfs-filter-scroll-to-top'
* @extends BaseComponent
*/
class FilterScrollToTop extends BaseComponent {
/**
* Creates a new ScrollToTop
* This should only be called once, because we only want one scroll to top element.
*/
constructor() {
super();
this.style = Settings.getSettingValue('general.styleScrollToTop');
this.$element = null;
}
getTemplate() {
return `
<a href="javascript:void(0)" aria-label="Back to top" class="boost-pfs-filter-scroll-to-top {{style}}" style="display: inline;"></a>
`;
}
compileTemplate() {
return this.getTemplate()
.replace(/{{style}}/g, this.style);
}
isRender() { return !this.$element }
render() {
if (!this.$element && this.isShow()) {
this.$element = jQ(this.compileTemplate());
jQ('body').append(this.$element);
}
}
isBindEvents() { return !this.isBoundEvent; }
bindEvents() {
if (this.$element) {
this.$element.on('click', this.scrollToTop.bind(this));
jQ(document).scroll(this.setVisibility.bind(this));
}
}
/**
* Called on click, do scroll top top animation
*/
scrollToTop() {
jQ('html,body').stop().animate({
scrollTop: 0
});
}
/**
* Set visibility of the scroll to top element.
* Hide it if we're already at the top.
* This check function is called on scroll.
*/
setVisibility() {
if (jQ(document).scrollTop() > 100) {
this.$element.show();
} else {
this.$element.hide();
}
}
/**
* Check the settings to see if we enabled scroll to top element or not.
* @returns {boolean}
*/
isShow() {
return Settings.getSettingValue('general.activeScrollToTop');
}
}
export default FilterScrollToTop;