RosSoft

A helper for making rounded corners in DIV elements

Uses the javascript library CurvyCorners

Needs the HeadHelper

1. Copy curvycorners files to app/webroot/js/corners/ (the file needed is app/webroot/js/corners/rounded_corners_lite.inc.js )

2. Copy this to app/views/helpers/corners.php


<?php
/**
 * Corners Helper
 *
 * Rounded corners with Javascript
 * 
 * @author RosSoft
 * @version 0.1
 *
 * Requires CurcyCorners
 * @link http://www.curvycorners.net
 *
 * Requires Prototype
 */

    function __construct()
    {
           static $library=array();  //for php4 compat
           $this->_library=& $library;
    }
   
    /**
     * Create the rounded corners for one element
     * 
     * @param string $id Dom ID of the element to be rounded
     * @param mixed $radius. Can be a global radius or an hash array
     * of (tl=>top_left, tr=>top_right, bl=>bottom_left, br=>bottom_right) radius values
     *     example: $radius=array('tr'=>25,'bl'=>20)
     * @param boolean $anti_alias Changing the value of antiAlias from true to false will toggle the anti-aliasing. Turning off anti-aliasing will reduce the smoothness of the corners but will greatly increase the rendering time required to draw the corners.
     * @param boolean $auto_padding If you set autoPad to true, the curvyCorners script will automatically create the inner DIV for you and move all your content from the main DIV into the inner DIV and apply any padding you have specified in your stylesheet for the outer DIV.         
     */
    function corners($id,$radius=20, $anti_alias=true, $auto_pad=true)
    {
        if (is_array($radius))
        {
            array_merge(array(    'tl'=>null,
                                'tr'=>null,
                                'bl'=>null,
                                'br'=>null), $radius);                                       
        }
        else
        {           
            $radius_value=$radius;       
            $radius=array(    'tl'=>$radius_value,
                            'tr'=>$radius_value,
                            'bl'=>$radius_value,
                            'br'=>$radius_value);
        }
        $options=$this->_make_options($radius,$anti_alias, $auto_pad);
        $this->_library[]=array('id'=>$id , 'options'=>$options);       
    }
   
   
    /**
     * Makes an array of options compatible with js lib (needs JSON conversion)
     *
     * @param array $radius. Hash array 'tl','tr','bl','br' keys with radius value
     * @param boolean $anti_alias
     * @param boolean $auto_pad
     */
    function _make_options($radius,$anti_alias,$auto_pad)
    {
        $options=array(    'antiAlias'=>$anti_alias,
                        'autoPad'=>$auto_pad);
        foreach (array('tl','tr','bl','br') as $key)
        {
            $options[$key]['radius']=$radius[$key];
        }
        return $options;           
    }
   
    function afterRender()
    {
        if (!empty($this->_library))
        {
            $js_init='';           
            foreach ($this->_library as $elem)
            {
                $js_init.="var curvyobj=new curvyCorners(" . $this->Javascript->object($elem['options']) . ",$('{$elem['id']}'));";
                $js_init.="curvyobj.applyCornersToAll();";
            }
           
            $this->Head->register_js('corners/rounded_corners_lite.inc.js');   
            $this->Head->register_onload($js_init);
        }           
    }
}
?>