Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

ATutor Theme with Fluid Reorderer

Owned by heidi valles
Last updated: Feb 11, 2009 by Allison BloodworthVersion comment
3 min read

ATutor is a PHP-based Learning Content Management System developed and maintained by the Adaptive Technology Resource Centre. This Atutor theme was developed to satisfy a user's particular layout preferences in a dynamic and easy way using Fluid's Reorderer. In this initial version of the theme, the course menu can be displayed to the left or right of the main content window simply by dragging the menu or content area to its preferred location. Doing this automatically saves the layout preference to the user's profile in the database. In the future, we would like to use the Reorderer again to rearrange modules within the menu.

 
Adding this functionality to a new theme (based on the ATutor default theme) is summarized as follows:
1. Create a new theme using a copy of the default theme
2. Include library files into the header.inc.php file of the theme
3. Rename the menu and content divs, add if-condition
4. Create "grab" areas
5. Add menu div to footer
6. Add initializing function call to end of footer

Full Instructions

1. Take a copy of the /themes/default directory and paste it back into the /themes folder. Rename it and edit its theme_info.xml and theme.cfg.php files. This will be your new theme.

2. Fluid's library files are necessary for the Fluid functionality. In your new theme's /include directory, edit header.tmpl.php to add the following before the </head> tag:

<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jquery-1.2.3.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jquery.tabindex.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jquery.dimensions.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/ui.base.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/ui.draggable.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/ui.droppable.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/jquery/jARIA.js"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/fluid/Fluid.js" type="text/javascript"></script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/fluid/Reorderer.js" type="text/javascript"></script>
<script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript" src="<?php echo $this->base_path; ?>jscripts/fluid-atutor.js"></script>

<link rel="stylesheet" href="<?php echo $this->base_path.'themes/'.$this->theme; ?>/at_fluid.css" type="text/css" />	 

Note that fluid-atutor.js contains custom code specifically for the ATutor implementation. Feel free to take a look at it to see how the Fluid commands are called to control our custom divs.

3. Continue to edit header.tmpl.php - around line 321, change the div id="leftcolumn" to id="atutor.menu". A few lines down, also change div id="contentcolumn" to id="atutor.content". This will provide a reference to our two areas we want to move around. On the line above the menu div, add another condition to the end of the if-statement so it appears:

<?php if (($_SESSION['course_id'] > 0) && $system_courses[$_SESSION['course_id']]['side_menu'] && ($_SESSION['prefs']['PREF_MENU']!="right")): ?>

This doesn't display the menu on the left if a user's preference is to have it on the right.

4. To create a "grab" area for each section, create divs with id="toolbar.menu" and id="toolbar.content" respectively and put them inside each of the larger divs. I chose to implement it as an icon ( ) in the corners of each, however bars along the top are also common. Example of icon grab are

<div id="toolbar.content" class="grab"><img src="<?php echo $this->img; ?>layers.png" style="float:left;" alt="<?php echo _AT('drag'); ?>" /></div>

with the addition of the following to styles.css:

.grab {
		cursor:move;
		padding: 0px 5px 0px 5px;
	}

5. Add a menu div and grab area to the footer as well - this will allow the menu to be shown on either side of the content area. Notice our if-statement that only displays this div if the user's preference is that it's on the right and they are viewing a course. The default menu location is on the left. In your theme's /include file, edit footer.tmpl.php after line 13, between the two </div> tags and before <div id="footer">. Add the following:

<?php if ($_SESSION['course_id']>0 && $system_courses[$_SESSION['course_id']]['side_menu'] && $_SESSION['prefs']['PREF_MENU']=="right"): ?>
  <div id="atutor.menu" class="side-menu">
	  <div id="toolbar.menu" class="grabmenu grab"><img src="<?php echo $this->img; ?>layers.png" /></div>
	  <?php require(AT_INCLUDE_PATH.'side_menu.inc.php'); ?>
  </div>
<?php endif; ?>

6. Include the following code right before the </body></html> tags in the footer template. This initializes the fluid code after the page has loaded. It also only calls this function if a user is within a course.

<?php
if (($_SESSION['course_id'] > 0) && $system_courses[$_SESSION['course_id']]['side_menu']):
?>
	<script type="text/javascript">
	  demo.initMyLayout('<?php echo $this->base_path ?>');
	</script>
<?php endif; ?>

See the ATutor theme "fluid" as reference.

Note: These instructions are for ATutor's 1.6.1 release. For 1.6.2+ releases, Fluid javascript library files may be located in different directories, so modify the script "src" values in step 2 accordingly.