Javascript easy: Cajax Component (alpha version) May 6, 2006
Posted by rossoft in CakePHP.trackback
Useful for AJAX - Scriptaculous effects
I want to replicate RJS but it lacks the great javascript object proxy and some other things
<div id=”hola”>
</div>
<div id=”otro”>
<table border=”1″>
<tr><td>hola</td></tr>
<tr><td>hola2</td></tr>
<tr><td>hola</td></tr>
<tr><td>hola2</td></tr>
</table>
</div>
<div id=”mas”>
<table border=”2″>
<tr><td>asdfasdfasdsad</td></tr>
<tr><td>sdfsafs</td></tr>
<tr><td>asdfasdfasdsad</td></tr>
<tr><td>sdfsafs</td></tr>
</table>
</div>
<div id=”mas2″>
<table border=”2″>
<tr><td>xxxxx</td></tr>
<tr><td>yyyyyy</td></tr>
<tr><td>zzzz</td></tr>
</table>
</div>
<?= $cajax->replace_html(’hola’,'que pasa<br />nennng!’)?>
<?= $cajax->visual_effect(’otro’,'BlindUp’,array(’duration’=>1));?>
<?= $cajax->visual_effect(’mas’,'Puff’,array(’duration’=>1));?>
<?= $cajax->toggle(array(’mas2′,’mas2′));?>
<?= $cajax->toggle(’mas2′);?>
<?= $cajax->show(’mas2′);?>
<?= $cajax->periodical_remote(’/pruebas/cajax_call’,array(’update’=>’hola’),5)?>
<?= $cajax->delay($cajax->alert(’Hi!!’,false),10)?>
<?php
/**
*
* Cajax component
* Some wrapper functions for prototype + scriptaculous
*
*
* @author RosSoft
* @version 0.1
* @license MIT
*
* @link http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeHelper/JavaScriptGenerator/GeneratorMethods.html
*
*/
//define(’CAJAX_DOMID’,'cajax_container’);
class CajaxComponent extends Object
{
var $components=array(’Output’,'RequestHandler’);
var $helpers=array(’Head’,'Javascript’,'Ajax’);
/**
* If true, then all the calls will be attached to
* an onload function
*/
var $enclose_onload=true;
/**
* Array of javascript variable names
*/
// var $_js_objects;
function startup(&$controller)
{
/* static $js_objects=array(); //for php4 compat
$this->_js_objects=& $js_objects;
*/
$this->controller =& $controller;
$this->_init_helpers();
$this->Head->register_js(’dollar_e’);
/*if (! $this->RequestHandler->isAjax())
{
$this->Head->register_raw(
$this->on_load(
$this->new_element(’document.body’,'div’,CAJAX_DOMID,array(),false))
);
$this->Head->register_raw(
$this->on_load(
$this->replace_html(CAJAX_DOMID,’Hola que tal e
stás!’,false))
);
}*/
$this->controller->set(’cajax’,$this);
}
/**
* Creates instances of the helpers used
*/
function _init_helpers()
{
$this->Output->startup($this->controller);
foreach ($this->helpers as $h)
{
$this->{$h}=& $this->Output->returnHelper($h);
}
}
/**
* Creates a new DOM element
* @param string $tag Type of tag (a,div,span…)
* @param string $id DOM ID of the element
* @param array $attr Attributes of the element
* @param boolean $enclose Enclose the result in <SCRIPT> tags
* @return string Javscript code
*/
function new_element($parent,$tag,$id,$attr=array(),$enclose=true)
{
$element=array_merge(array(’tag’=>$tag,’id’=>$id),$attr);
$element=$this->Javascript->object($element);
$js=$parent . ‘.appendChild($E(’ . $element. ‘));’;
return $this->_enclose($js,$enclose);
}
/**
* Enclose or not the javascript code
* @param string $jscode Javascript to be [not] enclosed
* @param boolean $enclose
* @return string
*/
function _enclose($jscode,$enclose)
{
//return ($enclose) ? $this->Javascript->codeBlock($jscode) : $jscode;
if ($enclose)
{
if ($this->enclose_onload)
{
$jscode=$this->on_load($jscode,false);
}
return $this->Javascript->codeBlock($jscode);
}
else
{
return $jscode;
}
}
function replace_html($id,$content,$enclose=true)
{
$js=’$(”‘ . $id. ‘”).innerHTML=”‘ . $this->_multiline($content) . ‘”‘;
return $this->_enclose($js,$enclose);
}
/**
* Returns a reference to a javascript element
* @param string $id DOM id
* @return string Javascript reference
*/
function element($id)
{
return ‘$(”‘ . $id . ‘”)’;
}
function visual_effect($id,$effect,$params=array(),$enclose=true)
{
$elem=$this->element($id);
$params=$this->Javascript->object($params);
$js=”Effect.$effect($elem, $params);”;
return $this->_enclose($js,$enclose);
}
/**
* Safe replacement of string with carriage-returns
* to \n literal
* @param string
* @return string
*/
function _multiline($string)
{
return str_replace(”\n”,’\n’,$string);
}
/**
* Attach an event to an element.
*
* @param string $id Object to be observed
* @param string $event event to observe
* @param string $jscode function to call
* @param boolean $enclose
* @return string
*/
function event($id, $event, $jscode,$enclose=true)
{
$js = “Event.observe($id, ‘$event’, function(event){ $jscode }, false);”;
return $this->_enclose($js,$enclose);
}
/**
* Attaches an onload function
* @param string $jscode Javascript code to be executed
* @paran boolean $enclose
* @return string
*/
function on_load($jscode,$enclose=true)
{
return $this->event(’window’,'load’,$jscode,$enclose);
}
/**
* Hides an element or an array of elements
* @param mixed $id DOM ID of the object (or array of ids)
* @return string
*/
function hide($id,$enclose=true)
{
if (is_array($id))
{
$js=”;
foreach ($id as $i)
{
$js.=”Element.hide(’$i’);”;
}
}
else
{
$js=”Element.hide(’$id’);”;
}
return $this->_enclose($js,$enclose);
}
/**
* Shows an element or an array of elements
* @param mixed $id DOM ID of the object (or array of ids)
* @param boolean $enclose
* @return string
*/
function show($id,$enclose=true)
{
if (is_array($id))
{
$js=”;
foreach ($id as $i)
{
$js.=”Element.show(’$i’);”;
}
}
else
{
$js=”Element.show(’$id’);”;
}
return $this->_enclose($js,$enclose);
}
/**
* Removes an element or an array of elements
* @param mixed $id DOM ID of the object (or array of ids)
* @param boolean $enclose
* @return string
*/
function remove($id,$enclose=true)
{
if (is_array($id))
{
$js=”;
foreach ($id as $i)
{
$js.=”Element.remove(’$i’);”;
}
}
else
{
$js=”Element.remove(’$id’);”;
}
return $this->_enclose($js,$enclose);
}
/**
* Toggles the visibility of an element or an array of elements
* @param mixed $id DOM ID of the object (or array of ids)
* @param boolean $enclose
* @return string
*/
function toggle($id,$enclose=true)
{
if (is_array($id))
{
$js=”;
foreach ($id as $i)
{
$js.=”Element.toggle(’$i’);”;
}
}
else
{
$js=”Element.toggle(’$id’);”;
}
return $this->_enclose($js,$enclose);
}
/**
* Javascript redirection to the given location
* @param string $url
* @param boolean $enclose
* @return string
*/
function redirect_to($url,$enclose=true)
{
$js=”window.location.href=’$url’”;
return $this->_enclose($url,$enclose);
}
/**
* Periodically calls some javascript code
* @param string $jscode Javascript to be called
* @param integer $freq Seconds
* @return string
*/
function periodical($jscode,$freq=10,$enclose=true)
{
$js=”new PeriodicalExecuter(function() { $jscode }, $freq)”;
return $this->_enclose($js,$enclose);
}
/**
* Periodically calls a remote url (useful for updating a div)
* @param string $url Cakeway /controller/action
* @param array $options @see AjaxHelper
* @param integer $freq Seconds of refresh
* @param boolean $enclose
* @return string
*/
function periodical_remote($url,$options=array(),$freq=10,$enclose=true)
{
$options['url']=$url;
$js=$this->remote_function($options,false);
return $this->periodical($js,$freq,$enclose);
}
/**
* Calls a remote ajax function
* @param array $options @see AjaxHelper
* @param boolean $enclose
* @retur string
*/
function remote_function($options=array(),$enclose=true)
{
$js=$this->Ajax->remoteFunction($options);
return $this->_enclose($js,$enclose);
}
/**
* Executes the jscode after the delay
* @param string $jscode Javascript to be executed
* @param integer $delay Delay time in seconds
* @param boolean $enclose
* @return string
*
*/
function delay($jscode,$delay,$enclose=true)
{
$js=”setTimeout(function() {\n$jscode\n},” . ($delay * 1000) . ‘);’;
return $this->_enclose($js,$enclose);
}
/**
* Converts an array of args to a js-array of args
* @param array $args
* @return string
*/
function _call_args($args)
{
return “‘” . implode(”‘,’”,$args) . “‘”;
}
/**
* Calls a js function with the given array of params
* @param string $function Name of the function
* @param array $args Array of params
* @param boolean $enclose
* @return string
*/
function call($function,$args,$enclose=true)
{
$js=”$function(” . $this->_call_args($args). “)”;
return $this->_enclose($js,$enclose);
}
/**
* Shows an alert box
* @param string $message Message to be shown
* @param boolean $enclose
* @return string
*/
function alert($message,$enclose=true)
{
return $this->call(’alert’,array($this->_object($message)),$enclose);
}
/**
* Returns a the js-string of a php variable
* @param mixed $var
* @return string
*/
function _object($var)
{
if (is_array($var))
{
return $this->Javascript->Object($var);
}
else
{
$var=$this->_multiline($var);
return “‘$var’”;
}
}
/**
* Assigns a value to a js variable
* @param string $variable name of the variable
* @param string $value
* @param boolean $enclose
* @return string
*/
function assign($variable,$value,$enclose=true)
{
$js=”$variable=” . $this->_object($value);
return $this->_enclose($js);
}
}
?>
Comments»
No comments yet — be the first.