jump to navigation

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);
        }                
    }        
?>

Advertisements

Comments»

No comments yet — be the first.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: