COMPONENT

C-CTA

Each variation will be presented in the following sections.

Simple CTA link

CTA as trigger module (global event)

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.

When you are using this component as data-js-module the component can fire global events. That means you can just 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

Requirements

Veams >= v5.0.0 - Veams Framework.

Installation

Installation with Veams

veams install vc cta

Installation with Bower

bower install veams-component-cta --save

Fields

`c-cta.hbs`

Settings

settings.ctaButton {Boolean} [a] - Define a button or link as cta.
settings.ctaContextClass {String} [default] - Context class of the cta.
settings.ctaClass {String} - Modifier classes for the cta.
settings.ctaTarget {String} - You can define a target when using an a-tag.
settings.ctaJsItem {String} - You can add this component as data-js-item.
settings.ctaJsModule {Boolean} - You can add this component as data-js-module.
settings.ctaJsOptions {Object} - You can add options to the cta. This object get stringified in your mark-up.

Content

content.ctaTitle {String} - You should define a title when using an a-tag.

`c-cta__content.hbs`

Settings

settings.ctaIcon {Boolean} - Renders .cta__icon into the mark-up if set to true.
settings.ctaContentJsItem {Boolean} - Renders data-js-item="cta-content" into the mark-up if set to true.

Content

content.ctaContent {String} - Content of the cta.

JavaScript Options

activeClass {String} [is-active] - Active class for cta if its clicked.
clickHandler {String} [click] - Click handler like touchstart.
closedLabel {String} [null] - Optional label for button while not active.
ctaContent {String} [’[data-js-item=“cta-content”]’] - Element selector for cta content (used for updating button text).
globalEvent {String} [cta:click] - Global event triggered on click.
openedLabel {String} [null] - Optional label for button while active.

{
	"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 as trigger module (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"
				}
			}
		}
	}
}

c-cta-usage

{{! WrapWith START: CTA }}
{{#wrapWith "c-cta" settings=this.settings content=this.content}}
	{{> c-cta__content this.content}}
{{/wrapWith}}
{{! WrapWith END: CTA }}

c-cta.hbs

<{{#if options.settings.ctaButton}}button{{else}}a{{/if}}
	class="c-cta{{#if options.settings.ctaContextClass}}--{{options.settings.ctaContextClass}}{{else}}--default{{/if}}{{#if options.settings.ctaClass}} {{options.settings.ctaClass}}{{/if}}"
	data-css="c-cta"
	{{#if options.content.ctaTitle}} title="{{options.content.ctaTitle}}"{{/if}}
	{{#if options.settings.ctaTarget}} href="{{options.settings.ctaTarget}}"{{/if}}
	{{#if options.settings.ctaDownload}} target="_blank"{{/if}}
	{{#if options.settings.ctaJsItem}} data-js-item="{{options.settings.ctaJsItem}}"{{/if}}
	{{#if options.settings.ctaJsModule}} data-js-module="cta" data-js-options='{{stringify options.settings.jsOptions}}'{{/if}}>
	{{{yield}}}
</{{#if options.settings.ctaButton}}button{{else}}a{{/if}}>

c-cta__content.hbs

{{#isnt settings.ctaIcon false}}
	<span class="cta__icon"></span>
{{/isnt}}
<span class="cta__content"{{#if settings.ctaContentJsItem}}
      data-js-item="cta-content"{{/if}}>{{content.ctaContent}}</span>

_c-cta.scss

/* ===================================================
CTA COMPONENT
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-cta"] {
	.cta__icon {}
	.cta__content {}
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-cta--default {
}

cta.js

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

/**
 * Requirements
 */
import {Veams} from 'app';
import VeamsComponent from 'veams/src/js/common/component';
const $ = Veams.$;

class CTA extends VeamsComponent {
	/**
	 * 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 = {
			activeClass: 'is-active',
			clickHandler: 'click',
			closedLabel: null,
			ctaContent: '[data-js-item="cta-content"]',
			globalEvent: 'cta:click',
			openedLabel: null
		};

		super(obj, options);
	}

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

	/**
	 * Get module information
	 */
	static get info() {
		return {
			version: '3.0.2',
			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
	 * ================================================= */
	/**
	 * Initialize the view and merge options
	 *
	 */
	initialize() {
		this.$ctaContent = $(this.options.ctaContent, this.$el);

		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.ctaContent +
					' not found, please make sure settings.ctaContentJsItem is set to true for c-cta__content.');
			}
		}

		if (this.$el.is('.' + this.options.activeClass)) {
			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.activeClass);
		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.activeClass);
		this.active = true;
	}

	/**
	 * Click event method
	 *
	 * This method should be overriden when you want to use the button view
	 * @see button-init.js
	 *
	 * @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() {
		Veams.Vent.trigger(this.options.globalEvent, {
			el: this.el,
			isActive: this.active,
			options: this.options
		});
	}
}

export default CTA;

Simple CTA link

<a class="c-cta--link is-link" data-css="c-cta" title="Link Title" href="#">
			<span class="cta__icon"></span>
	<span class="cta__content">Link</span>
</a>

CTA as trigger module (global event)

<button class="c-cta--default class" data-css="c-cta" href="#" data-js-module="cta" data-js-options='{&quot;globalEvent&quot;:&quot;cta:alert&quot;,&quot;data&quot;:&quot;My custom text passed by CTA&quot;}'>
			<span class="cta__icon"></span>
	<span class="cta__content">Button</span>
</button>

Veams

Go To Github

COMPONENT

C-CTA

Demo Section

Simple CTA link

CTA as trigger module (global event)

Technical Details

Call-To-Action

Description

Requirements

Installation

Installation with Veams

Installation with Bower

Fields

`c-cta.hbs`

Settings

Content

`c-cta__content.hbs`

Settings

Content

JavaScript Options

c-cta-usage

c-cta.hbs

c-cta__content.hbs

_c-cta.scss

cta.js

Simple CTA link

CTA as trigger module (global event)