jump to navigation

Rounded Corners Helper June 4, 2006

Posted by rossoft in CakePHP.
trackback

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
 */

class CornersHelper extends Helper
{
    var $_library; //static array of items to be rounded
    var $helpers=array('Javascript','Head');            

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

Advertisements

Comments»

1. pixeline - June 6, 2006

you might like this other rounded corner library: http://webdesign.html.it/articoli/leggi/528/more-nifty-corners/1/

2. Olivvv - June 9, 2006

There is the IE7 library which includes that also: http://dean.edwards.name/IE7/

-add AddType text/x-component .htc in .htaccess
-in the layout, below charset(‘UTF-8’);?>:

link(‘ie7/ie7/ie7-standard-p.js’);?>

-Download and unpack the libraries in your webroot/js.

3. olivvv - June 9, 2006

Ough wordpress mangled the code…dunno how to paste it then…

4. Mika - June 23, 2006

You might want to mention that it requires the prototype library. Also it is hard to copy-past this code as it is not in tags.

5. Mika - June 23, 2006

Whoops. That would be <code> tags.

6. rossoft - June 23, 2006

I’m sorry but I’ve a lot of problems pasting code at wordpress. They will be ok in cakebakery

7. Jakob Malm - August 12, 2006

I am not able to get it to work. Precisely what do I need to put in my code to have rounded corners on a div?

8. rossoft - August 13, 2006

it must work with:
<?php $corners->corners(‘my_div’); ?>

9. rossoft - August 13, 2006

echo $corners->corners(‘my_div’)

10. speedyop - September 11, 2006

latest version of headHelper has changed, register_js() and register_onload() doesn’t exist anymore.

seems that it’s js() and onload() now.

11. Nikolai - July 2, 2007

I’m trying to use corners helper, but it does not work.

I have copied to app/views/helper these files:
– corners.php
– head.php
– util.php

I’ve downloaded and installed CurvyCorners, as in manual.

In my controller i have:
var $helpers = array(‘Pagination’,’Corners’,’Head’,’Util’,’Javascript’);

In my view-file i have:
corners(‘my_div’); ?>
test testtest

In html source code is only .. block visible.
What i’m doing wrong?

P.S. I’ve tryed to debug this, with

i’ll get a lot of text (Corners object and so on)

Thanks in advance!

12. Nikolai - July 2, 2007

*
-div- test testtest -/div-

13. Nikolai - July 2, 2007

*
$this->Head->register_js… renamed to $this->Head->js
$this->Head->register_onload.. renamed to $this->Head->onload

14. Dario - September 17, 2008

Hi all.
First of all, thanks Rossoft for sharing with us some of your work.
I found curvycorners and I intended to use it with cakephp when I stumbled in this page. My enthusiasm vanished when after a while I didn’t manage to get your helper to work.
I tried everything mentioned above and :
-> in webroot/js/corners/
– rounded_corners_lite.inc.js
-> in views/helpers/
– UtilHelper (for HeadHelper) (util.php)
– HeadHelper (for CornersHelper) (head.php)
– CornersHelper (corners.php)
-> added helpers to my view
-> echo $corners->corners(‘myDiv’);
and nothing is being output to my html.
Any suggestions?
Thanks all.
Dario

15. security tool virus removal - January 10, 2011

I became just browsing occasionally as well as you just read this post. I must admit that we are inside the hand of luck these days if not getting these kinds of an excellent article to see wouldn’t are feasible for me, at the incredibly least. Incredibly enjoy your content.

16. locksmith leicester - June 17, 2011

What exactly is the Easiest way to Backup Internet sites?! I’ve been employing WP DPManager and an additional plugin. The 1st 1 would seem to back up only the content. The second backs up the plugin, theme and photographs but everytime there may be an upgrade to WP I’ve to accomplish something with the .htaccess file and I cant remember what I did!! So how are you backing up your internet sites? Do you back up just content or photographs plug in theme etc?! What do you feel could be the best way to do it?


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: