# Swipe Actions 1.0.7+ | 1.1.2+

# TeslaCloud.SwipeActions (tc-swipe-actions)

# Options

Option	Default value	Description
content	\| .tc-clib-swipeActions-content	Content container selector.
leftActions	\| .tc-clib-swipeActions-actions--left	Left actions container selector.
rightActions	\| .tc-clib-swipeActions-actions--right	Right actions container selector.
triggerThreshold	33	Action event trigger threshold (percents).
autoClose	true	If `true`, the action container will be hidden when focus leaves the container element.

# Events

# tc-swipe-left

Triggered after a touchend event when swiping to leftActions at triggerThreshold%.

# Event parameters

Parameter	Type	Description
swipeTarget	HTMLElement	The `leftActions` element.
action	string	The value of the `data-js-action` attribute of the `leftActions` element.

# tc-swipe-right

Triggered after a touchend event when swiping to rightActions at triggerThreshold%.

# Event parameters

Parameter	Type	Description
swipeTarget	HTMLElement	The `rightActions` element.
action	string	The value of the `data-js-action` attribute of the `rightActions` element.

# Examples

# Template

<xf:comment>The JavaScript inclusion below is only required for XenForo versions prior to 2.3.0</xf:comment>
<xf:js src="TC/ComponentLibrary/swipe_actions.js" addon="TC/ComponentLibrary" min="1" />

<xf:js src="Demo/Playground/swipe_actions.js" addon="Demo/Playground" min="1" />

<xf:css src="tc_clib_swipe_actions.less" />
<xf:css>
	.tc-clib-swipeActions .tc-clib-swipeActions-actions .tc-clib-swipeActions-actionIcon,
	.tc-clib-swipeActions .tc-clib-swipeActions-actions .button .fa--xf
	{
		font-size: 1.25em;
	}
</xf:css>

<xf:if is="$xf.visitor.user_id">
	<div class="block">
		<div class="block-container">
			<div class="block-body">
				<div class="block-row">
					<div class="tc-clib-swipeActions"
						 data-xf-init="tc-swipe-actions demo-swipe-actions">
						<div class="tc-clib-swipeActions-actions tc-clib-swipeActions-actions--left"
							 data-js-action="markDone">
							<span class="tc-clib-swipeActions-actionIcon">
								<xf:fa icon="fa-check-double" />
							</span>
						</div>
						<div class="tc-clib-swipeActions-content">
							<div class="contentRow">
								<div class="contentRow-main">
									Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur vitae tempus dolor, sed eleifend dui. Aliquam accumsan nisl tellus, at euismod ex bibendum ut. Cras ac ex sit amet diam sagittis luctus in sed diam. Nam eu congue erat, et lacinia nibh. Donec placerat ligula a leo pharetra, eget scelerisque dolor tempor. Sed at mi nisl.

									<div class="contentRow-minor tc-clib-swipeActions-actions--fallback">
										<a href="javascript:"
										   class="contentRow-extra"
										   onclick="XF.overlayMessage('Action', 'markDone')">Done</a>
										<a href="javascript:"
										   class="contentRow-extra"
										   onclick="XF.overlayMessage('Action', 'edit')">Edit</a>
										<a href="javascript:"
										   class="contentRow-extra"
										   onclick="XF.overlayMessage('Action', 'delete')">Delete</a>
									</div>
								</div>
							</div>
						</div>
						<div class="tc-clib-swipeActions-actions tc-clib-swipeActions-actions--right">
							<xf:button class="button--plain button--iconOnly"
									   href="javascript:"
									   onclick="XF.overlayMessage('Swipe action', 'edit')"
									   fa="fa-pen" />
							<xf:button class="button--plain button--iconOnly"
									   href="javascript:"
									   onclick="XF.overlayMessage('Swipe action', 'delete')"
									   fa="fa-trash" />
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</xf:if>

# JavaScript handler for XenForo 2.1.0+

window.Demo = window.Demo || {};

(($, window, document, _undefined) =>
{
	'use strict';

	Demo.SwipeActions = XF.Element.newHandler({
		options: {},

		init()
		{
			const $target = this.$target;

			$target.on('tc-swipe-left', (e, data) =>
			{
				if (!data.action.length)
				{
					return;
				}

				XF.overlayMessage('Swipe action', data.action);
			});
		}
	});

	XF.Element.register('demo-swipe-actions', 'Demo.SwipeActions');
})
(window.jQuery, window, document);

# JavaScript handler for XenForo 2.3.0+

window.Demo = window.Demo || {};

((window, document) =>
{
	'use strict';

	Demo.SwipeActions = XF.Element.newHandler({
		options: {},

		init()
		{
			const target = this.target;

			XF.on(target, 'tc-swipe-left', (e, data) =>
			{
				if (!data.action.length)
				{
					return;
				}

				XF.overlayMessage('Swipe action', data.action);
			});
		}
	});

	XF.Element.register('demo-swipe-actions', 'Demo.SwipeActions');
})
(window, document);