Padmali's Joomla Notes

modal window with lightbox - native joomla javascript

2011-02-28T11:58:00.000-08:00

Joomla's native modal.js ("squeezebox") is really easy to use to pop up a modal window with a lightbox overlay. You can popup images, hidden divs, internal and external urls.

It just takes one line of code in your component's template file, or in index.php if you want it site-wide.

JHTML::_('behavior.modal');

This nifty one liner does all the heavy lifting - inserting links for media/system/js/modal.js and media/system/css/modal.css into the head of the document and adding a basic domready event as well. All you have to do is to put in the link(s) that triggers the modal behaviour.

inserting the links

Use an ordinary link specifying the default class (a.modal), and use the rel attribute to specify a handler, and any of the available optional presets in the format:

<a href="whatever" class="modal" rel="{handler:'specify', preset1:'value1', preset2:'value2'}">Link</a>

Handlers

image
adopt - great for hidden divs on the page
url - use for internal urls
iframe - use for external urls

Presets (optional)

size
- width(x) and height(y) of the final window. Default is 600x450
sizeLoading
- width(x) and height(y) of the initial window. Default is 200x150
fxOverlayDuration
- the time it takes for the background to darken/lighten when the link is clicked, or the lightbox is shut. Default is 250ms
fxResizeDuration
- the time it takes for the lightbox to go from sizeLoading to size. Default is 750ms
fxContentDuration
- the time it takes for the content to fade in. Default is 250ms
classOverlay
- adds a class to style the overlay. Put it in your template's css file as #sbox-overlay.your-class. Default is empty.
classWindow
- adds a class to style the modal window. Put it in your template's css file as #sbox-window.your-class. Default is empty.
For the full list of presets see media/system/js/modal.js

examples of links

handler: image

Click here for <a class="modal" href="path/to/bigimage.jpg" rel="{handler: 'image', sizeLoading: {x:200, y:150}, size: {x:400, y:300}}"><img src="path/to/thumbnail.jpg /></a>

Note that sizeLoading and fxResizeDuration are not noticeable if the image loads quickly, or is cached.

handler: adopt

Perfect for a hidden div that can be triggered to popup by clicking a link. Use the adopt handler, and specify the div you are going to adopt.

<div style="display:none;">
<div id="spampolicy">
<h4 class="purple">Spam Policy</h4>
<p style="color:#ff3300;"><strong>We hate spam too - that's why we use a double opt-in strategy and a reputable newsletter service that upholds the CAN SPAM Act. We will never disclose your personal details to anyone unless the law requires us to do so.</strong></p>
</div>
</div>
<p><a class="modal" rel="{handler: 'adopt', adopt:'spampolicy', size: {x:300, y:200}, classWindow: 'spamwindow'}" href="javascript:void(0);">Read our Spam Policy</a></p>

Note that this is a cloned element, so the resizing effects are not available.

handler: url

This means a relative url from your site.

See our <a class="modal" href="index.php?Itemid=34" rel="{handler: 'url', sizeLoading: {x:150, y:100}, size: {x:640, y:480}, fxResizeDuration:1200, fxContentDuration:500">Privacy Statement</a>

handler: iframe

Use this for external urls.

<p>Click here for <a class="modal" href="http://www.google.com" rel="{handler: 'iframe'}">Google</a></p>

Note that this is an iframe, so the resizing effects are not available.

adding universal settings to JHTMLBehaviour

There are 2 params you can optionally add as universal settings if you need them (you probably won't):

The element and class you want to trigger the modal window
(this is set to a.modal by default so you wouldn't normally change it unless you had good reason)
$params = array()
(Note that these can also be added to each individual link that trigger the popup – so only add universal settings here.

Eg if you wanted to universally set the anchor element that triggers the lightbox to a.lightbox (instead of the default a.modal), you wanted all windows to open to 640x480 then you can also set your universal options:

$options = array(

'size'=>array('x'=>640, 'y'=>480)

);

JHTML::_('behavior.modal', 'a.popup', $options);

Note that the basic options you can use with JHTML::_('behavior.modal'); can be seen in libraries/joomla/html/html/behaviour.php. These are far fewer than in modal.js. This means the only useful preset you can use as a universal option is size.

Roll Your Own Code

If you want to roll your own code – eg to get more effects, then you have to hardcode links to modal.js and modal.css. In addition you need to write your own domready code.

Sample code to include in the <head> of your template's index.php:

<script src="<?php echo JURI::base(); ?>media/system/js/modal.js" type="text/javascript"></script>
<link rel="stylesheet" href="<?php echo JURI::base(); ?>media/system/css/modal.css" type="text/css" />
<script type="text/javascript">
// 
</script>

Notice that I've put the universal presets into the initialise function. From here, it works just the same, presets in links overriding anything set universally. Not all the presets work for all the handlers – as already mentioned.

It's a simple class, so you'd need to write your own version of modal.js to get it to do more.

References: Joomla 1.5 API JHTMLBehaviour class
http://api.joomla.org/Joomla-Framework/HTML/JHTMLBehavior.html

joomla module chrome - advanced styling

2010-03-27T03:32:00.000-07:00

The normal way of styling Module Headers is to add a Module Class Suffix in
Extensions > Modules > YourModule
and then pick it up in the template css file using a selector like moduletable-moduleclasssuffix. But what if you want to do more? What if you want a module header where the H3 color is gray, but the first word is blue? Or the last word is blue?

This article will show you how to modify h3 titles using Joomla's template overrides with module chrome and a bit help from the preg_replace function.

Step 1 – What's the Module Chrome?

Open the module you want to style up in Extensions > Module Manager and find out what position it's set to render in. In this example, the module is in the position: footer.

Next open up index.php in your default template folder and find out if any module chrome has been applied to the position: footer. See the example below.

index.php:

<div id="somediv">
<jdoc:include type="modules" name="footer" style="xhtml" />
</div>

Ok, the module chrome is xhtml. That's great because we're going to use the xhtml chrome to create a template override. Only xhtml and rounded chrome have a h3 header built in, so any other style is useless for this particular example. Other styles you might see are outline, none, table, horz. But none of these have h3 headers so this example won't work with those styles. Default Joomla module chrome can be found in templates > system > html > modules.php and this is the file that Joomla consults if these styles are used.

Step 2 – is there a template override in your default template?

Open up your default template and check if there is a folder called html. If there is, open it up and check for a file on the root of that folder – modules.php. This is where the template overrides happen, and where we'll put the new module chrome style that'll do all the magic.

If the html folder isn't present, then add it under your default template and put in a copy of modules.php from templates > system > html > modules.php. (Copy over the blank index.html while you're at it, for security sake).

If you've just copied modules.php over from the systems template then open it and delete all the functions inside it except for the xhtml chrome function. So to begin with, your default template's html > modules.php file will look like this:

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
function modChrome_xhtml ($module, &$params, &$attribs)
{
if (!empty ($module->content)) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php if ($module->showtitle != 0) : ?>
<h3><?php echo $module->title; ?></h3>
<?php endif; ?>
<?php echo $module->content; ?>
</div>
<?php endif;
}
?>

Since you can't just overwrite the system's default chrome names, you'll need to change the name of the chrome, eg to fancyxhtml

function modChrome_fancyxhtml ($module, &$params, &$attribs){

Now open up your default template's index.php and change the chrome name in the position you want it to show up in –

<div id="somediv">
<jdoc:include type="modules" name="footer" style="fancyxhtml" />
</div>

Step 3 – Add a Module Class Suffix to the module(s) that you want fancy styling for

Go back to Extensions > Module Manager and open up any modules in the footer position (or whatever position you've chosen) that you're going to use the fancy styles for. In Advanced Parameters add the following in Module Class Suffix –

-fancystyle

The reason to add the module class suffix is so that when we rewrite the fancyxhtml chrome (in templates > yourdefaulttemplate > html > modules.php), it will be the exactly the same as xhtml chrome, UNLESS the module class suffix is –fancystyle, in which case the fancy titles will show up. Otherwise, it'll render the same as ordinary xhtml chrome.

Step 4 – Coding the fancyxhtml chrome

In the html > modules.php file in your default template change the fancyxhtml chrome function as follows:

<?php
// no direct access
defined('_JEXEC') or die('Restricted access');

function modChrome_fancyxhtml ($module, &$params, &$attribs) {
if (!empty ($module->content)) : ?>
<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
<?php
if ($module->showtitle != 0) :
if ($params->get('moduleclass_sfx')==='-fancystyle') :
$pattern = '/([\S]+)$/'; //match the last word
$title = preg_replace($pattern, "<span class="twotone">$1</span>",$module->title);
else :
$title = $module->title;
endif;
echo '<h3>' . $title . '</h3>';
endif;
echo $module->content;
?>
</div>
<?php endif;
} //end function
?>

If you want to apply the twotone style to the first word instead of the last word, just change the pattern to:

$pattern = '/^([\S]+)/'; //match the first word instead

Basic explanation of pattern matching:
\S - means match anything that is NOT a space.
[\S]+ - match any char that is NOT a space, 1 or more times
([\S]+) - the bracket picks up the entire match as a variable
([\S]+)$ - pick it up at the end of the string ($)
^([\S]+) - pick it up at the start of the string (^)
$n - substitute the variable from the nth bracket

If you want to know more about the incredibly versatile preg_replace functions start with http://php.net/manual/en/function.preg-replace.php

Step 5 – CSS for Styling

In the css file for your default template you could pick up the h3 styling as in:

.moduletable-fancystyle {background-color: #eeeeee;}
.moduletable-fancystyle h3 { color: #999999; }
.moduletable-fancystyle h3 .twotone { color: #0000FF; }

If you were to View > Source, you'd see:

<div class="moduletable-fancystyle">
<h3>Fancy <span class='twotone'>Module</span></h3><p>This is my fancy module with 2 tone colors in H3</p></div>

TinyMCE Strips Out Code in Joomla

2010-03-19T05:57:00.000-07:00

I like the TinyMCE editor except for the fact that it strips out some code when you edit HTML. Like you go to the trouble of adding something like:

<div class="mystyle">text</div>

you save it, and return to find that TinyMCE has stripped out the class attribute leaving you with:

<div>text</div>

The good news is that we can fix all that by using Extended Valid Elements.

Extended Valid Elements to the Rescue

In the Joomla backend go to Extensions > Plugin Manager > Editor - TinyMCE. You can leave the editor functionality set to Advanced. Scroll down until you find the textarea for Extended Valid Elements, its should be empty as you can see below.

The trick here is to put back the elements and attributes that TinyMCE is determined to strip out. So if you want to be able to use
<div class="mystyle">
and also <img class="somestyle" /> and also <span> then you would use the following format separating the elements with a comma:

div[attr1 | attr2 | attr3], img[attr1|attr2], span[attr]

What I mostly put into Extended Valid Elements takes care of any attributes I want to use with div, img and span, but of course you can add more. Notice no line breaks:

div[id|name|style|class|onclick|onmouseover|onmouseout],span[id|class|style],img[
class|src|border|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout
|name]

Why all the Attributes?

The reason to use so many attributes is according to TinyMCE:
When adding a new attribute by specifying an existing element rule (e.g. img), the entire rule for that element is over-ridden so be sure to include all valid attributes not just the one you wish to add.

If you want to find all the valid attributes, you can do so here: http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements

Warning: Watch out for Line Breaks when Pasting!

If you have any line breaks in what you paste into Extended Valid Elements, you'll end up with a heap of problems and it might even break TinyMCE. Be sure to paste with no line breaks! If you've done it wrong, you might see \n appearing in the Extended Valid Elements textarea. You can try to get rid of them, but the textarea is so small you usually end up creating even more problems.

If things still don't work, close out of the plugin and use something like phpMyAdmin and locate the jos_plugins table. Click on Editor - TinyMCE and look at the params row. You can actually correct it from here. Scroll down the params until you reach extended_elements. Remove any \n (newlines) and/or duplicate elements. You can leave the pipe escapes (\|) alone, they're ok and won't do any harm. This is what it should look like when you're done:

...other params above
extended_elements=div[id\|style\|class\|onclick\|onmouseover\|onmouseout],span[id\|class\|style], img[class\|src\|border\|alt\|title\|hspace\|vspace\| width\|height\|align\|onmouseover\|onmouseout\|name]
...more params below

Click Save, then try it again. TinyMCE is now ready to rock!

Dependent Selects using Joomla's javascript library – changeDynaList()

2010-03-07T10:40:00.000-08:00

Dependent selects can be created using Joomla's built-in javascript library
(see includes > js > joomla.javascript.js )
using the changeDynaList() function.

So what I want to achieve here is that by selecting a Department, the Subdepartment dropdown gets dynamically populated.

There are 2 scenarios – a new course being added and an existing course being edited. In a new course, I only have to list the Departments to begin with. The Subdepartment select would be empty until a Department is chosen. In the second scenario, an edit of an existing course, I want the values of the department and subdepartment to display in the selects.
In this example, I'm working in the Admin section of the Model for the component I'm creating. I want to generate JHTMLSelect genericLists which will be returned from the Model to the View for display in the template.

The basic method – in the Model

Use Joomlas generic list function to create the Department list (named 'didlist'),
Same for the Subdepartment (named 'sidlist')
Create a javascript array called subdeptarray in the form [key, text, value] which the javascript function changeDynaList can work with in the template.

The Department List (in the Model)

Ok, lets suppose you've queried the database for all the Departments, something like this:

$query = 'SELECT id AS did, department FROM #__departments';
$this->_db->setQuery( $query );
$departments = $this->_db->loadObjectList();

You now have the departments object, but we need to do a little work before we can stuff that into the JHTMLSelect genericList function:

I want to add an option at the top of the dropdown that says "Choose Department" with an option value of 0.
The Department select must contain a javascript attribute along the lines of:
onchange=changeDynaList(param1, param2, etc)

1. Add an option - Choose Department
To add the Choose option I'll use the JHTMLSelect option function to insert an extra option:

object option (string $value, [string $text = ''], [string $value_name = 'value'], [string $text_name = 'text'], [ $disable = false])

as follows:

$deps[] = JHTML::_('select.option', '0', JText::_(' - Choose Department - '), 'did', 'department');

Then I'll merge this with the $departments object I got from the DB query. This will work fine because the option only needs 2 values in the order of key – value and $departments provides both those values in the right order.

$deps = array_merge($deps, $departments); //complete list of html options

2. Add the javascript attribute
Sort out the javascript which will trigger the changeDynaList function (this will be stuffed into the JHTMLSelect genericList function also)
The changeDynaList function is in the format:

function changeDynaList( listname, source, key, orig_key, orig_val )

where:
listname – name of list to change 'sidlist'
source – a javascript array of list options in the form [key,value,text] which we will later program in as $subdeptarray
key – the key to display
orig_key – the original key that was selected
orig_val – the original item value that was selected

Since in this example the list will be shown in an admin template I'll use:

$js = "onchange=\"changeDynaList( 'sidlist', subdeptarray, document.adminForm.didlist.value, document.adminForm.didlist.options[document.adminForm.didlist.selectedIndex].value,
document.adminForm.didlist.options[document.adminForm.didlist.selectedIndex].text);\"";

3. Stuff the lot into Joomla's JHTMLSelect genericList
Then finally stuff it all back into the JHTMLSelect genericList function, noting that the js is appended to the attributes param.

string genericlist (array $arr, string $name, [string $attribs = null], [string $key = 'value'], [string $text = 'text'], [mixed $selected = NULL], [ $idtag = false], [ $translate = false])

as follows:

$lists['departments'] = JHTML::_('select.genericlist', $deps, 'didlist', 'class="inputbox" size="1" '.$js, 'did', 'department', intval($selecteddept));

The last value - $selecteddept – you would use if the user was editing an existing course rather than creating a new one where the value would just be 0. Obviously you could harvest this value in a number of ways in your model. If a department's value is greater than 0, then you're dealing with an edit and you'll also need a value from the subdepartments select. In this example those values are referred to as:

$selecteddept; //0 or id value from the database
$selectedsubdept; //0, or id value from the database

So now $lists['departments'] is ready to be returned to the View.

The Subdepartment List (in the Model)

Again, we would get the complete list of subdepartments from the database in the Model using a query like:

$query = 'SELECT id AS sid, did, subdepartment FROM #__ subdepartments';
$this->_db->setQuery( $query );
$subdepartments = $this->_db->loadObjectList();

Since a course can be added directly to a department (with or without subdepartment – like Joomla articles can be added directly to Sections without a Category), I need to program in 2 extra options. The first option is the usual 'Choose Subdepartment', value '0', and the second is 'None' value '-1' since courses can be added directly to department, without reference to a subdepartment.
To get your head around it at this stage, what we're programming here is the initial state of the dependent subdepartment select when the form first opens. That's why we can't use array_merge here. What's seen in the Subdepartment select is entirely dependent on the state of the Department select.
If no department has been selected (ie new course), then the value of $selecteddept is also 0 and there won't be any other values in the select for the subdepartment.
On the other hand, if a department has been selected (eg editing an existing course) then we not only have to add 'None' as an extra option, but also list only those subdepartments that come under the department chosen in the department select.
1. Program in the Choose Subdepartment option

$subdeps[] = JHTML::_('select.option', '0', JText::_(' - Choose Subdepartment - '), 'sid', 'subdepartment');

2. Program in the None option

if ((int) $selecteddept != 0) {
$subdeps[] = JHTML::_('select.option', '-1', JText::_('None'), 'sid', 'subdepartment');
}

3. Program in the rest of the options for the subdepartment

foreach ($subdepartments as $subdepartment) {
if ($selecteddept == $subdepartment->did) {
$subdeps[] = JHTML::_('select.option', $subdepartment->sid, $subdepartment->subdepartment, 'sid', 'subdepartment');
}
}

Ok, now we're ready to stuff this into JHTMLSelect genericList as follows:

$lists['subdepartments'] = JHTML::_('select.genericlist', $subdeps, 'sidlist', 'class="inputbox" size="1" ', 'sid', 'subdepartment', intval($selectedsubdept));

And now the subdepartment list is ready to be returned to the View.

The subdeptarray (in the model)

The final requirement is to program an array mapping all the possible department keys to subdepartment text and values. We'll do this in PHP in the model and transfer it to the view for templating into its final form which will be javascript.
In the final form (javascript in the template) it will show something like this:

var subdeptarray = new Array();// [key,value,text]
subdeptarray[0] = new Array( '6','0',' - Choose Subdepartment - ' );
subdeptarray[1] = new Array( '6','-1','None' );
subdeptarray[2] = new Array( '6','1','Ancient History' );
subdeptarray[3] = new Array( '6','5','Medieval History' );
subdeptarray[4] = new Array( '6','4','Modern History' );
etc

Where, say, 6 is the History department id ('did'), the next value is the subdepartment id ('sid') and the final value is the name of the subdepartment).
The changeDynaList javascript function requires that the var subdeptarray is written in the format [key,value,text]
Back to the model, we'll pick up the 2 objects that we got from the original queries which contain the entire department list and the entire subdepartment list – ie $departments and $subdepartments and generate the php version of the subdeptarray to return the view. The first foreach just creates a '0' and '-1' option value for each of the subdepartments, in line with the lists generated to display the subdepartment select. The second foreach generates the list of subdepartments options present.

foreach ($departments as $department) {
$subdeptarray [$department->did][] = JHTML::_('select.option', '0', JText::_(' - Choose Subdepartment - '), 'sid', 'subdepartment');
$subdeptarray [$department->did][] = JHTML::_('select.option', '-1', JText::_('None'), 'sid', 'subdepartment');
}
foreach ($subdepartments as $subdepartment) {
$subdeptarray [$subdepartment->did][] = JHTML::_('select.option', $subdepartment->sid, $subdepartment->subdepartment, 'sid', 'subdepartment');
}
return $subdeptarray;

Displaying $subdeptarray in the Template

Presuming your View has picked up the 2 lists (departments, subdepartments) and $subdeptarray, then all that's left is to display them in the template for the view (eg default.php)
default.php:

<?php
defined('_JEXEC') or die('Restricted access'); ?>
<script language="javascript" type="text/javascript">

</script>
<form action="fill-this-in" method="post" name="adminForm" id="adminForm">
<table class="admintable">
<tbody>
<tr>
<td width="100" align="right" class="key">
<label for="department">
<?php echo JText::_( 'Department' ); ?>:
</label>
</td>
<td>
<?php
echo $this->lists['departments'];
?>
</td>
</tr>
<tr>
<td width="100" align="right" class="key">
<label for="subdepartment">
<?php echo JText::_( 'Subdepartment' ); ?>:
</label>
</td>
<td>
<?php
echo $this->lists['subdepartments'];
?>
</td>
</tr>
</tbody>
</table>
</form>
etc

References: Joomla 1.5 API JHTMLSelect class
http://api.joomla.org/Joomla-Framework/HTML/JHTMLSelect.html

domains and subdomains on apache localhost windows

2010-03-05T07:00:00.000-08:00

Its frustrating when you need to test how htaccess is going to work against domains and subdomains on your windows localhost (apache-mysql-php), when all you have to work with is a uri like:

http://127.0.0.1/etc or
http://localhost/etc

On windows you can create domains and subdomains to show up instead.

You need to alter 2 files:

httpd.conf [under your apache install, in the conf folder] and
hosts [in windows go to windows > system32 > drivers > etc]

To begin with, stop the Apache service. Otherwise it won't pick up on the changes til ur next restart. When you've done all the changes, then turn it back on.

httpd.conf

Open up httpd.conf in a decent text editor, or Notepad if you have nothing better. At the bottom of that file add the following:

NameVirtualHost *:80

<virtualhost *:80>
DocumentRoot "C:/path/to/documentroot"
ServerName localhost
</virtualhost>

<virtualhost *:80>
DocumentRoot "C:/path/to/documentroot/subfolder"
ServerName example.tld
ServerAlias www.example.tld www subdomain.example.tld subdomain
</virtualhost>

hosts file

Again, open this up in a decent text editor and type the following, being sure to keep each entry on a new line:

127.0.0.1       localhost
127.0.0.1       example.tld
127.0.0.1       www.example.tld
127.0.0.1       subdomain.example.tld

So what we have now is that instead of http://127.0.0.1 you can use http://localhost. This will work for anything on the documentRoot. (If you're not sure where your documentRoot is, check it in httpd.conf, it'll tell you).

You can now also use http://example.tld, http://www.example.tld and http://subdomain.example.tld in the subfolder that you specified here:
C:/path/to/documentroot/subfolder

It's handy when you have a lot of sites for testing in localhost under windows-apache-php-mysql and you need to see what's happening when testing .htaccess