Textpattern CMS

#1 2013-10-01 16:39:09

MarcoK

Plugin Author

From: Como

Registered: 2006-10-17

Posts: 248

Website

Textpattern.js improved for a little new function

Relative at my question about ajax and textpattern admin forum.textpattern.com/viewtopic.php?pid=275599#p275599 and the new functions I have hacked textpattern.js and txplib_html.php to include two new (nearly) functions:

/textpattern/textpattern.js line 810 +/-

jQuery.fn.txpAsyncBtn = function(options){
	options = $.extend({
		dataType: 'script',
		success: null,
		error: null
	}, options);
// Send form data to application, process response as script.
	$(this).click(function(event) {
		try {
				var btn = $(this);
        btn.addClass('busy').attr('disabled', true).after(' <span class="spinner"></span>');
				$('body').addClass('busy');	
				// error handler
				btn.ajaxError(function(event, jqXHR, ajaxSettings, thrownError) {
					// do not pile up error handlers upon repeat submissions
					$(this).off('ajaxError');
					// remove feedback elements
					btn.removeClass('busy');
					$('body').removeClass('busy');
					if (options.error) options.error(btn, event, jqXHR, ajaxSettings, thrownError);
					textpattern.Relay.callback('txpAsyncBtn.error', {'this': btn, 'event': event, 'jqXHR': jqXHR, 'ajaxSettings': ajaxSettings, 'thrownError': thrownError});
			});
				sendAsyncEvent({
					event: btn.attr('data-event'),
					step: btn.attr('data-step'),
					thing: btn.attr('data-thing'),
					property: btn.attr('data-property'),
					value:btn.text(),
				},
				function(data, textStatus, jqXHR) {
					// remove feedback elements
					btn.removeClass('busy').removeAttr('disabled');
					$('body').removeClass('busy');
					$('span.spinner').remove();
					btn.ajaxError = null;
					if (options.success) options.success(btn, event, data, textStatus, jqXHR);
					textpattern.Relay.callback('txpAsyncBtn.success', {'this': btn, 'event': event, 'data': data, 'textStatus': textStatus, 'jqXHR': jqXHR});
				},
				options.dataType
			);
			event.preventDefault();	
    } catch (e) {
    }
	});
};

This function use some snippet of txpAsyncForm and some of txpAsyncHref. Allow to use a <button> tag to call ajax function and send some variable.
The return value is a script data Type like a txpAsyncForm

/textpattern/textpatter.js into global admin-side behaviour nearly the end of file

$('button.async').txpAsyncBtn({
			error: function() {window.alert(textpattern.gTxt('form_submission_error'));}
		}); 

This function get all <button class=“async”> tag and call prev txpAsyncBtn function

For using easly this function I have added a new function in txplib_html.php

/textpattern/lib/txplib_html.php

/**
 * Render a button element to hook up txpAsyncBtn() with request parameters
 *
 * @param 	string 	$item	Button text
 * @param 	array	$parms	Request parameters; array keys are 'event', 'step', 'thing', 'property'
 * @param 	string 	$atts	HTML attributes
 * @return 	string 	HTML
 * @since 4.5.0 TEST!!
 * @see textpattern.js: txpAsyncBtn
 */
 function asyncBtn($item,$parms,$atts='')	{
		extract(doSpecial(lAtts(array(
			'event'    => $GLOBALS['event'],
			'step'     => $GLOBALS['step'],
			'thing'    => '',
			'property' => '',
		), $parms)));
		$class = "$step async";
		$atts.=' data-event="'.$event.'" data-step="'.$step.'" data-thing="'.$thing.'" data-property="'.$property.'" class="'.$class.'"';
		return tag($item,'button',$atts);
	}

This function create a <button> tag width new data-attribute of HTML5 used for sending extra informations.

You can download; all files from my website packed as a tar.gz

Maybe I can found this hack in next release? :-)

Last edited by MarcoK (2013-10-01 16:39:57)