skiplinks

Description

Skiplinks allow screenreader users to quickly skip to relevant content.

Requirements

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

Fields

skiplinks.hbs

Settings

Content

skiplinks__item.hbs

Settings

Content

JavaScript Options

The module gives you the possibility to override default options:

skiplinks.hjson

{
	"title": "Skiplinks",
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"skiplinksClasses": false
			},
			"content": {
				"items": [
					{
						"content": {
							"linkText": "Inhalt",
							"linkHref": "#r-main"
						}
					},
					{
						"settings": {
							"dataJsItem": "skip-links-nav"
						},
						"content": {
							"linkText": "Hauptmenu",
							"linkHref": "#stacknav"
						}
					},
					{
						"settings": {
							"dataJsItem": "skip-links-search"
						},
						"content": {
							"linkText": "Suche",
							"linkHref": "#r-search"
						}
					}
				]
			}
		}
	}
}

skiplinks.js

/**
 * Description of Skiplinks.
 *
 * @module Skiplinks
 * @version v1.0.0
 *
 * @author Andy Gutsche
 */

// Imports
import Component from '@veams/component'; // Only use that in combination with browserify
import $ from 'jquery';

class Skiplinks extends Component {
	$el = $(this.el);

	/**
	 * 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: {
				skipLinksSearch: '[data-js-item="skip-links-search"]',
				skipLinksNav: '[data-js-item="skip-links-nav"]'
			},
			navButton: [],
			stackNavElement: [],
			mobileNavElement: []
		};

		super(obj, options);
	}

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '1.0.0'
		};
	}

	/**
	 * Event handling
	 */
	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.skipLinksSearch}}': 'onClick',
			'{{context.EVENTS.click}} {{this.options.selectors.skipLinksNav}}': 'onClickNav'
		};
	}

	/**
	 * Go to the previous slide.
	 *
	 * @param {object} e - Event object.
	 */
	onClick(e) {
		e.preventDefault();
		let browserWidth = this.context.detections.width;

		this.context.Vent.trigger(this.context.EVENTS.searchOverlay.toggle);
	}

	/**
	 * Go to the Navigation
	 *
	 * @param {object} e - Event object.
	 */
	onClickNav(e) {

		// e.preventDefault();
		this.options.navButton = [].slice.call(
			document.querySelectorAll(
				'[data-js-item="js-skip-links-navvuebutton"]'
			)
		);
		if (this.options.navButton.length > 0) {
			this.options.navButton[0].click();
		}

	}
}

export default Skiplinks;