back-to-top (component)

Description

This blueprint is based on the blueprint of Veams. The feature is a link to the top of the page, initially hidden, visible on scrolling event and hidden again when the scroll ends.

JIRA

• LMU-63

Requirements

• @veams/core - Veams Core Framework.
• @veams/query or jquery - Veams Query or jQuery.
• @veams/component - Veams Component.

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/back-to-top

Fields

back-to-top.hbs

Settings

Content

JavaScript Options

The module gives you the possibility to override default JS options:

back-to-top.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"backToTopContextClass": "default",
				"backToTopClasses": false
			},
			"content": {
				"linkHref": "#",
				"linkAnchor": "Nach oben"
			}
		}
	}
}

back-to-top.js

/**
 * Description of BackToTop.
 * Class properties and decorators are supported.
 *
 * @module BackToTop
 * @version v1.0.0
 *
 * @author Fabio Tedesco
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';
import scrollToElement from '../../../utilities/helpers/scroll-to-element';

class BackToTop extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);

	/**
	 * Event & subscribe handling
	 */

	// Event Handlers
	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.backToTopButton}}':
				'onBackToTopButtonClick',
			'{{context.EVENTS.mouseover}} {{this.options.selectors.backToTopButton}}':
				'onBackToTopButtonHover',
			'{{context.EVENTS.mouseout}} {{this.options.selectors.backToTopButton}}':
				'onBackToTopButtonHoverLeave',
			'{{context.EVENTS.touchstart}} {{this.options.selectors.backToTopButton}}':
				'onBackToTopButtonHover',
			'{{context.EVENTS.touchend}} {{this.options.selectors.backToTopButton}}':
				'onBackToTopButtonHoverLeave'
		};
	}

	// Subscribe Handlers
	get subscribe() {
		return {
			'{{context.EVENTS.pagescrollThrottled}}': 'onScroll'
		};
	}

	/**
	 * Event handler for click on back to top button
	 *
	 * @param {Object} [e] - Event object
	 *
	 */
	onBackToTopButtonClick(e) {
		e.preventDefault();

		scrollToElement(document.body);
	}

	/**
	 * Event handler for hover on back to top button
	 *
	 * @param {Object} [e] - Event object
	 *
	 */
	onBackToTopButtonHover(e) {
		clearTimeout(this.scrollTimeout);
	}

	/**
	 * Event handler for mouse leave on back to top button
	 *
	 * @param {Object} [e] - Event object
	 *
	 */
	onBackToTopButtonHoverLeave(e) {
		this.scrollTimeout = setTimeout(() => {
			this.$el.removeClass(this.options.classes.visible);
		}, this.options.scrollTimeout);
	}

	/**
	 * Event handler for Scroll
	 *
	 * @param {Object} [e] - Event object
	 *
	 */
	onScroll(e) {
		clearTimeout(this.scrollTimeout);

		let $height = this.context.detections.height;

		if (document.body.scrollTop > $height || document.documentElement.scrollTop > $height) {
			this.$el.addClass(this.options.classes.visible);

			this.scrollTimeout = setTimeout(() => {
				this.$el.removeClass(this.options.classes.visible);
			}, this.options.scrollTimeout);
		} else {
			this.$el.removeClass(this.options.classes.visible);
		}
	}

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				backToTopButton: '[data-js-item="back-to-top-link"]'
			},
			classes: {
				visible: 'is-visible'
			},
			scrollTimeout: 2000
		};

		super(obj, options);
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}
}

export default BackToTop;