Recent Topics

First Attempt at a show / hide plugin: 'Abracadabra'

Started by on May 03, 2008 – Contents updated: May 03, 2008

May 03, 2008 03:03    

I was quite gutted that balupton's excellent show / hide posts plugin doesn't work with the most recent versions of b2evolution so I was thinking of ways to do something similar when I came up with this. It could be used as a spoiler protection too, but it would work best on several lines of content as it wraps the hidden parts in a div container, not a span. So far it's been tested in 2.4.2 and seems to work ok with both Firefox 2 and Safari (not tried IE yet) - assuming the user has javascript enabled.

I really am a novice, at both PHP and javascript, so I'd welcome any thoughts. Feel free to hack away at my code and improve it (but let me know, so I can see what I missed! =))

You can download it [url=http://www.theriomorphous.co.uk/blog/media/blogs/all/abracadabra_plugin.zip]here [/url]and read more about it [url=http://www.theriomorphous.co.uk/blog/darkarts/?title=abracadabra-1&more=1&c=1&tb=1&pb=1]there[/url].

Teh poetry is:

<?php
/*
 * Plugin Name: Abracadabra
 * By Loup, Theriomorphous  - {@link http://www.theriomorphous.co.uk/}
 *
 *
 * b2evolution - {@link http://b2evolution.net/}
 *
 * @package plugins
 */
if( !defined('EVO_MAIN_INIT') ) die( 'Please, do not access this page directly.' );

/**
 * Fades a div into view and out of view using an anchor.
 *
 * @package plugins
 */


class abracadabra_plugin extends Plugin
{
	var $code = '_abracadabra';
	var $name = 'Abracadabra';
	var $priority = 80;
	var $apply_rendering = 'stealth';
	var $group = 'Theriomorphous';
	var $author = 'Loup';
	var $help_url = 'http://www.theriomorphous.co.uk/blog/darkarts/?title=abracadabra-1&more=1&c=1&tb=1&pb=1';  
	var $short_desc='Shows and hides a div.';
	var $long_desc='Fades a div into view and out of view using an anchor.';
	var $version = '1.0';
	var $number_of_installs = 1;

	/**
	 * Init
	 */

	function PluginInit( & $params )
	{
		$this->short_desc = T_('Shows and hides a div.');
		$this->long_desc = T_('Fades a div into view and out of view using an anchor.');
	}


	/**
	 * Perform rendering
	 *
	 * @see Plugin::RenderItemAsHtml()
	 */


	function RenderItemAsHtml( & $params )
	{

	// generate random string

		$chars='abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
		$string = '';
		for($i = 0; $i <= 5; $i++) 
		{
			$string .= $chars[rand(0,strlen($chars)-1)];
		}
		$content = & $params['data'];
		$div_id = 'abra_' . $string; 
	
	// get the anchortext
	
	$content = preg_replace( '¤\[Abracadabra:(.+?)]¤', '<a href="javascript: void(0)" onClick="$(\'#' . $div_id . '\').toggle(\'fade\');return false;">\\1</a>[Abracadabra]' , $content );

	// opening tag
	$content = str_replace					
				( 
					'[Abracadabra]', '<div style="display:none;" id="' . $div_id . '">', $content
				);
	// closing tag
	$content = str_replace 					
				( 
					'[Piffpaffpoof]', '</div>' , $content
				);

	return true;
	}


	/**
	 * Perform rendering for XML feeds
	 *
	 * @see Plugin::RenderItemAsXml()
	 */


	 function RenderItemAsXml( & $params )
	   {
	      $return_this = $this->RenderItemAsHtml( $params ); 

		/*
		*/
		
	   } 


	function SkinBeginHtmlHead( $params = array() )
	{	
		echo 
		'<script type="text/javascript" src="' . $this->get_plugin_url() . '"js/jquery.js"></script>' . "\n" .
		'<script type="text/javascript" src="' . $this->get_plugin_url() . '"js/jquery.dimensions.js"></script>' . "\n" .
		'<script type="text/javascript" src="' . $this->get_plugin_url() . '"js/fx.js"></script>' . "\n" .
		'<script type="text/javascript" src="' . $this->get_plugin_url() . '"js/fx.fade.js"></script>' . "\n";
	}


	function AdminEndHtmlHead()
	{
		$this->SkinBeginHtmlHead();
	}

	function AdminDisplayToolbar( & $params )
	{
		if( $params['edit_layout'] == 'simple' )
		{	// This is too complex for simple mode, don't display it:
			return false;
		}

		echo '<div class="edit_toolbar">';
		echo '<input type="button" id="abracadabra_button" title="'.T_('Abracadabra').'" class="quicktags" value="'.T_('Abracadabra').'" onclick="createtag();" />';
		echo '</div>'; // surely ????

	
?>
		<script type="text/javascript">
			//<![CDATA[
			function createtag ()
			{
				var anchortext = prompt( 'Text for anchor:', 'Read More');
				if (anchortext)
				{
					textarea_wrap_selection( b2evoCanvas, '[Abracadabra:'+anchortext+']', '[Piffpaffpoof]', 0 );
				}
			}
			//]]>
		</script>


<?php
		return true;
	}

}

?>

Requires the enchant libraries (some parts included in zip, to be honest I didn't know which js files, if any, weren't essential, so I left the four most important looking ones in =)).

May 03, 2008 04:14

First glance: nice job.
I found one error you must remove: there are double quotes before js in each of the lines that look like this (lines 105-108):

'<script type="text/javascript" src="' . $this->get_plugin_url() . '"js/jquery.js"></script>' . "\n" .


Remove or it won't work!

Second: remove the function RenderItemAsXML. That's superfuous.

Third: I would change the var $apply_rendering from 'stealth' to 'opt-out'.

But it works nicely. Well done.

(I thought the jquery library was loaded by default)

May 03, 2008 23:15

One issue is that if JS is OFF the default should be SHOW the content..

May 03, 2008 23:17

Thanks for the help there Afwas. I've taken on board your suggestions and tweaked the code slightly to give more flexibility. I'm not really satisfied with the effects (they work far better on images). I'd use a different library, like scriptaculous if I really knew what I was doing, but I'm just groping in the dark really, trying different things out...


Form is loading...

b2evolution CMS – This forum is powered by b2evolution CMS, a complete engine for your website.