sfgWidgetsPlugin symfony plugin

Overview

sfgWidgetsPlugin provides symfony helpers for the Javascript gWidgets library ("widgets" all based on Prototype and pure css styling), currently including:

- gExpander: it is a very simple widget to toggle the visibility of a div. It adds an arrow image before the content (can be customized). It can also load the content in an ajax request if a different url is specified.

- gTab: a simple and light tab widget ajax-enabled, accessible and unobtrusive(based on Fabtabulous and inspiration from jQuery Tabs plugin).

- gBox: overlay a box with the specified inline or remote content, it can be an image or html content (a kind of mixed between lightbox and Thickbox).

- gTip: a simple tooltip solution (inspired by jTip)

Installation

symfony plugin-install http://plugins.symfony-project.com/sfgWidgetsPlugin

Alternatively, if you don't have PEAR installed, you can download the latest package attached to this plugin's wiki page and extract it under your project's plugins/ directory.

Usage

<?php use_helper('gWidgets') ?>

You have then 3 possibilities to use gwidgets:

1. use dedicated php helper bundle in this plugin ('gtip', 'gexpander', 'gbox' and 'gwidgets_js', only 'gtab' is not available), they are only useful if you want hyperlink to be the controller, 2. use only html (except the call to 'use_helper'), it's unobtrusive, 3. use standard Symfony helpers such as 'link_to', 'input_tag',... and a few extra options to them.

To pass parameters to gwidgets, you can use global gWidgets_Option objects (gwidgets_js helper) or for local parameters (per widget) you can them in the query string. If you do not want or cannot use the standard html anchor for inline content (#container), you can them use in the query string a gtip, gexpander or gbox parameter. You can also put an attribute of the html tag to specify parameters and the target container, useful for non link html elements (but not fully xhtml standard...), eg: <input type="text" class="gtip" gtip="?width=400&eventOn=click#container"/>. All examples below use '@route' as the current page symfony route.

For gExpander

1. gexpander helper:

<?php echo gexpander('my gexpander','@route','query_string=#container') ?>

2. html only:

<a href="#container" class="gexpander">my gexpander</a>

3. Symfony standard helper:

<?php echo link_to('my expander','@route',array('class'=>'gexpander','query_string'=>'#container')) ?>

all of them will show/hide the following: <div id="container" style="display:none;">here is my gexpander</div>

For gTab

Your html should be structured like this:

<div id="container" class="gtab">
	<ul>
		<li><a href="#tab1">Tab 1</a></li>
		<li><a href="#tab2">Tab 2</a></li>
		<li><a href="/myajaxcontent.php#tab3">Tab 3</a></li>
	</ul>
	
	<div id="tab1">your content here...	</div>
	
	<div id="tab2">content of tab 2 here...</div>
	
	<div id="tab3"></div>
</div>

For gBox

the url can be an inline anchor (#container), an image (/images/mybigimage.png) or an external url (myajaxcontent.php).

1. use 'gbox' helper:

<?php echo gbox('my gbox','@route','query_string=#container'); ?>

2. use html only:

<a href="#container" class="gbox">my gbox</a>

3. use standard symfony helper:

<?php echo link_to('my gbox','@route','class=gbox query_string=#container'); ?>

For gTip

1. use 'gtip' helper:

<?php echo gtip('my tooltip','what a tip!',array(
      'href'  => '@route',
      'id'    => 'container',
      'title' => 'inline tip')) ?>

2. html only:

<a href="#container" class="gtip" title="inline tip">my tooltip</a>
<div id="container" style="display:none">what a tip!</div>

3. standard symfony helper:

<?php echo link_to('my tooltip','@route',array(
     'class'        => 'gtip', 
     'title'        => 'inline tip',
     'gtip'         => '#container',
     'query_string' => '?width=400&eventOff=click')) ?>

or:

<?php echo link_to('my tooltip','@route',array(
     'class'        => 'gtip', 
     'title'        => 'inline tip',
     'query_string' => '?width=400&eventOff=click#container')) ?>

<div id="container" style="display:none">what a tip!</div>

License

For the full copyright and license information, please view the LICENSE file that was distributed with this source code.

Example

You can get more examples at http://www.estadieu.com/gwidgets/

Todolist

* bug fixing (yes there are still a few bugs around I believe), * get rid of Base.js * new widgets (?)