jquery (ui) integration library approach

[eluser]leviathan28[/eluser]
Hi people,

recently, I needed a datepicker in some places of my application and I ended up using the jquery ui datepicker. I am really not comfortable with javascript (actually I'm not able to produce more than an alert or the occasional handling of input fields) and it was also the first time I used jquery so it took me quite a long time to make it work.

I then created a simple library to generate the necessary javascript and to be able to attach the datepicker to an input like this:

$this->jquery->add_datepicker('myfieldname');

Now there are two questions I'd like to ask:
1. I'm quite new to CI, so: Is my approach (see code below) sensible?
2. Would anybody be interested in having this library made public? (assuming I get some more functionality into it)

config-file:

Code:

<?php
/* Path to jquery scripts, relative to base_url */
$config['jq_config']['js_path'] = 'path/to/your/js';
$config['jq_config']['css_path'] = 'path/to/your/css';

/* Scripts to be loaded by default; to dynamically load scripts use jquery->add_scripts() */
$config['jq_scripts'][] = 'jquery-1.3.2.min.js';
$config['jq_scripts'][] = 'jquery-ui-1.7.1.custom.min.js';
$config['jq_scripts'][] = 'ui/i18n/ui.datepicker-de.js';

/* css to be loaded */
$config['jq_css'][] = 'start/jquery-ui-1.7.1.custom.css';
?>

The library

Code:

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');
/**
* jQuery Library
*/
class Jquery {
    var $CI;
    
    /* paths */
    var $jq_base_url;
    var $jq_css_url;
    
    
    var $arr_scripts;
    var $arr_css;
    
    /* Output */
    var $output_scripts    = '';
    var $output_css        = '';
    var $output            = '';
    
    /**
     * Constructor
     * @return void
     */
    function Jquery () {
        $this->CI =& get_instance();
        $this->CI->load->config('jquery');
        
        $arr_config = $this->CI->config->item('jq_config');
        
        $this->jq_base_url     = $this->CI->config->item('base_url').$arr_config['js_path'];
        $this->jq_css_url      = $this->CI->config->item('base_url').$arr_config['css_path'];
        
        $this->add_scripts($this->CI->config->item('jq_scripts'));
        $this->add_css($this->CI->config->item('jq_css'));
    }
    
    /**
     * Add a Datepicker to an input field
     * @param string    $field_id    ID of the field to add the Datepicker to
     * @return void
     */
    function add_datepicker($field_id, $date_format = 'yy-mm-dd') {
        $str_script     = '';
        $str_script        .= '$(function() {';
        $str_script        .= '$("#'.$field_id.'").datepicker($.datepicker.regional["de"]);';
        $str_script     .= '$("#'.$field_id.'").datepicker("option", {dateFormat: "'.$date_format.'"});';
        $str_script     .= '});';
        $this->output .= $str_script;
    }
    
    /**
     * Add scripts
     * @param mixed    $scripts    A string or an Array containing the scripts to load
     * @return void
     */
    function add_scripts($scripts) {
        $arr_scripts = array();
        if (!is_array($scripts)) {
            $arr_scripts[] = $scripts;
        } else {
            $arr_scripts = $scripts;
        }
        
        foreach ($arr_scripts as $script) {
            $this->output_scripts .= '<script type="text/javascript" src="'.$this->jq_base_url.$script.'"></script>';
        }
    }
    
    /**
     * Add css
     * @param mixed    $css    A string or an Array containing the css to load
     * @return void
     */
    function add_css($css) {
        $arr_css = array();
        if (!is_array($css)) {
            $arr_css[] = $css;
        } else {
            $arr_css = $css;
        }
        
        foreach ($arr_css as $css) {
            $this->output_css .=  '<link type="text/css" href="'.$this->jq_css_url.$css.'" rel="Stylesheet" />';
        }
    }
    
    /**
     * Generate output
     * @return string
     */
    function get_output () {
        $str_output = '';
        $str_output .= $this->output_css;
        $str_output .= $this->output_scripts;
        $str_output .= '<script type="text/javascript">';
        $str_output .= $this->output;
        $str_output .= '</script>';
        return $str_output;
    }
}

// END Class Jquery

/* End of file jquery.php */
/* Location: ./system/application/libraries/jquery.php */

Here's how it could be used in a controller:

Code:

$this->load->library('jquery');
$this->jquery->add_datepicker('my_datefield');
$this->template->write('header', $this->jquery->get_output());