etc_preview

21 October 2013, 16:51

Keywords: comment, live, preview

Description

This plugin will enable live comments preview. To try it, just fill out the name, start typing a comment, hit Preview and continue typing.

Requirements

jQuery 1.7 or newer.

Usage

Include <txp:etc_live_preview /> tag somewhere near (preferably before) <txp:comments_form /> in your comments_display form, like this:

...
<txp:if_comments_allowed>
	<txp:etc_live_preview />
	<txp:comments_form />
<txp:else />
	<p><txp:text item="comments_closed" /></p>
</txp:if_comments_allowed>
...

It will play the role of <txp:comments_preview />, wrapped in <div id="cpreview"></div>, unless you set a preview jQuery selector explicitly:

<div id="my-preview">
	<txp:etc_live_preview preview="#my-preview" />
</div>

Live preview updates will trigger start and stop jQuery events on the nodes matched by preview attribute, so you can enhance them with your own animations:

<script>
$(function () {
	$("#creview").bind("start", function() {
		$(this).stop(true).fadeTo("fast", 0.1);
	}).bind("stop", function() {
		$(this).stop(true).fadeTo("fast", 1);
	});
});
</script>

Tags

<txp:etc_live_preview /> has the following attributes:

  • timeout: a timeout (in ms) of user inactivity before two live previews, default 600.
  • auto: whether the live preview should be automatically triggered after the user has filled all required fields. Default is 0 (no).
  • preview: a jQuery selector to be used instead the default #cpreview.
  • form, wraptag, class: same as <txp:comments_preview />.

File(s)