# Swipe actions

<xf:comment>Подключение JavaScript ниже требуется только для версий XenForo до 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>

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);

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);