Call-To-Action

Description

The CTA component is a powerful one. It can be used as simple link or button component. But it can also be used as data-js-item in other components or as data-js-module.

Usages

When using this the component as data-js-module the component can fire global events. That means you can listen in other modules on this event and work with the provided data.

Nice examples for the cta component as data-js-module are:

• a simple toggler (mobile navigation, search toggler)
• overlay opener with custom data

Example usage

cta-usage.hbs

A <script> tag is included with a global event handler to produce an alert dialog box when clicking on the button.

Requirements

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

Installation

Installation with Veams

veams install component cta

veams -i c cta

Fields

cta.hbs

Settings

Content

cta__content.hbs

Settings

Content

JavaScript Options

The module gives you the possibility to override default options:

cta-bp.hjson

{
	"variations": {
		"simple": {
			"docs": {
				"variationName": "Simple CTA link",
				"sectionCenter": true
			},
			"settings": {
				"ctaButton": false,
				"ctaTarget": "#",
				"ctaContextClass": "link",
				"ctaClass": "is-link"
			},
			"content": {
				"ctaTitle": "Link Title",
				"settings": {
					"ctaIcon": true
				},
				"content": {
					"ctaContent": "Link"
				}
			}
		},
		"withJs": {
			"docs": {
				"variationName": "CTA (global event)",
				"sectionCenter": true
			},
			"settings": {
				"ctaButton": true,
				"ctaTarget": "#",
				"ctaContextClass": "default",
				"ctaClass": "class",
				"ctaJsItem": false,
				"ctaJsModule": true,
				"jsOptions": {
					"globalEvent": "cta:alert",
					"data": "My custom text passed by CTA"
				}
			},
			"content": {
				"settings": {
					"ctaIcon": true
				},
				"content": {
					"ctaContent": "Button"
				}
			}
		}
	}
}

cta.js

/**
 * Represents a button with custom click handlers.
 *
 * @module CTA
 * @version v1.0.0
 *
 * @author Sebastian Fitzner
 * @author Andy Gutsche
 */

/**
 * Requirements
 */
import $ from 'jquery';
import Component from '@veams/component';

class CTA extends Component {
	/**
	 * General Properties
	 */

	// Elements in Markup
	$el = $(this.el);
	$ctaContent = $(this.options.selectors.ctaContent, 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 = {
			classes: {
				active: 'is-active'
			},
			clickHandler: 'click',
			closedLabel: '',
			globalEvent: 'cta:click',
			openedLabel: '',
			selectors: {
				ctaContent: '[data-js-item="cta-content"]'
			}
		};

		super(obj, options);
	}

	/** =================================================
	 * GETTER & SETTER
	 * ================================================ */

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '1.0.0',
			vc: true,
			mod: false // set to true if source was modified in project
		};
	}

	/**
	 * Get and set the active state.
	 *
	 * @param {boolean} state - active state
	 */
	get active() {
		return this._active;
	}

	set active(state) {
		this._active = state;
	}

	/** =================================================
	 * EVENTS
	 * ================================================ */
	get events() {
		return {
			'{{this.options.clickHandler}}': 'onClick'
		};
	}

	/** =================================================
	 * STANDARD METHODS
	 * ================================================= */
	didMount() {
		if (
			(this.options.closedLabel && !this.options.openedLabel) ||
			(!this.options.closedLabel && this.options.openedLabel)
		) {
			console.warn('CTA: You have to set closedLabel and openedLabel or none.');
		} else {
			if (this.options.closedLabel && this.options.openedLabel && !this.$ctaContent.length) {
				console.warn(
					'CTA: Labels set, but ' +
						this.options.selectors.ctaContent +
						' not found, please make sure settings.ctaContentJsItem is set to true for c-cta__content.'
				);
			}
		}

		if (this.$el.is('.' + this.options.classes.active)) {
			this.active = true;
		}
	}

	render() {
		return this;
	}
	/** =================================================
	 * CUSTOM CTA METHODS
	 * ================================================= */
	/**
	 * Close method
	 *
	 * Remove the active class, set label and trigger global event
	 *
	 * @public
	 */
	close() {
		if (this.options.closedLabel) {
			this.$ctaContent.text(this.options.closedLabel);
			this.$el.attr('title', this.options.closedLabel);
		}

		this.$el.removeClass(this.options.classes.active);
		this.$el.attr('aria-expanded', false);
		this.active = false;
	}

	/**
	 * Open method
	 *
	 * Add the active class, set label and trigger global event
	 *
	 * @public
	 */
	open() {
		if (this.options.openedLabel) {
			this.$ctaContent.text(this.options.openedLabel);
			this.$el.attr('title', this.options.openedLabel);
		}

		this.$el.addClass(this.options.classes.active);
		this.$el.attr('aria-expanded', true);
		this.active = true;
	}

	/**
	 * Click event method
	 *
	 * This method should be overridden when you want to use the button view
	 *
	 * @param {event} e - event object
	 */
	onClick(e) {
		e.preventDefault();

		if (typeof this.clickHandler === 'function') {
			if (this.active) {
				this.close();
			} else {
				this.open();
			}

			this.clickHandler.apply(this, arguments);
		} else {
			console.warn(
				'CTA: You need to inherit from ' +
					this +
					' and override the onClick method or pass a function to ' +
					this +
					'.clickHandler !'
			);
		}
	}

	/**
	 * Click handler
	 *
	 * This method is public and can be overridden by
	 * other instances to support a generic button module.
	 *
	 * @public
	 */
	clickHandler() {
		this.context.Vent.trigger(this.options.globalEvent, {
			el: this.el,
			isActive: this.active,
			options: this.options
		});
	}
}

export default CTA;