Taco Class The power of jQuery all wrapped up in a Codeigniter Library

Derek Jones edited this page Jul 5, 2012 · 10 revisions
Clone this wiki locally

[size=4]The Taco class for codeigniter. [/size] ——————————————————————————————————————————————————- You can see a demonstration of this libaray at http://findmeonthe.net/TACONITE/ It has lots of examples. ——————————————————————————————————————————————————- [size=3]Updated to version:- 4.06[/size]

What does this class do:

  • **Manipulate html elements from within your controller **
  • Transmit data via AJAX
  • Send JQUERY commands e.g. slideUp, fade, show, hide, replaceWith, append, etc etc. to munipulate your webpages, without reloading the pages

This class simply generates an xml file that allows you to take control of your webpage.

Where the magic happens


<?php if (!defined('ABSPATH')) exit('No direct script access allowed');

/**
* ----------------------------------------------------------------------------
*
* The Software shall be used for Good, not Evil... bad eval()!
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
*/
DEFINE('TACO_VERSION', 4.06);

// --------------------------------------------------------------------    
class Taco{

    var $storage =  array();
    
    var $newline = "\r\n";
    
    var $xml_encode = 'ISO-8859-1';
    
    var $xml_vers = '1.0';
    
    var $html = FALSE;
    
    var $method = 'xml';

// --------------------------------------------------------------------    
    function taco()
    {
        $this->storage[] = '<eval>&lt;![CDATA['.$this->_decode().']]></eval>';    
    }    
// --------------------------------------------------------------------            
    function _encode($string){
        return preg_replace(array('/</', '/>/','/&raquo;/'), array('&lt;','&gt;','~raquo;'), $string);
    }    
// --------------------------------------------------------------------            
    function _camel($string)
    {    
        if( strpos($string,'_') === FALSE )    return $string;    
        $s = split('_', $string );
        return strtolower( trim( $s[0] ) ). ucwords( strtolower( trim( $s[1] ) ) );
    }    
// --------------------------------------------------------------------    
    function set($name = '', $attributes = NULL, $content = NULL)
    {
        if( is_string($attributes) and $attributes != '' )
        {            
            /*  */
            switch(true)
            {
                /* self closing + css/class etc. etc. */
                case( is_array($content) ):
                
                    foreach( $content as $arg1 => $arg2 ) 
                    {
                        $this->storage[] = '<'.$name.' select="'.$attributes.'" arg1="'.$this->_camel($arg1).'" arg2="'.$this->_camel($arg2).'" />';
                    }        
                    break;
                /* single + show or class */
                case( $content == 'fast'):
                case( $content == 'slow' ):
                case( $name == 'addClass' ):
                case( $name == 'removeClass' ):
                case( $name == 'toggleClass' ):                
                    $this->storage[] = '<'.$name.' select="'.$attributes.'" arg1="'.$content.'" />';
                    break;
                /* self closing + special: eval */
                case( ($name == 'eval' ) ):
                    
                    $this->storage[] = '<eval>&lt;![CDATA['.$attributes.']]></eval>';
                    break;
                /* content replace etc. etc. */
                case( is_string($content) ):
                    $this->storage[] = '<'.$name.' select="'.$attributes.'">'.$this->_encode($content). $this->newline .'</'.$name.'>';
                    $this->storage[] = '<decode select="'.$attributes.'" />';                    
                    break;
                
                default:
                    $this->storage[] = '<'.$name.' select="'.$attributes.'" arg1="'.$content.'" />';
            }    
        }
    }
// --------------------------------------------------------------------    
    function _decode(){
    /* add decodeing for rss_convert to taco */
        return  "jQuery.fn.decode=function(){
                return this.each(
                  function(){
                      var element = jQuery(this);
                      var html = element.html();
                      element.html(html.replace(/&amp;/g,'&')
                                        .replace(/&lt;/g,'<')
                                        .replace(/&gt;/g,'>')
                                        .replace(/~raquo;/g,'&raquo;')
                                        ); 
                    });
              };";
    }
// --------------------------------------------------------------------            
    /*  */
    function output()
    {
        $storage = $this->storage;
        if($storage != '' and is_array($storage) and count($storage) > 0 )
        {
            $xmlString = '';
            
            foreach( $storage as $string )
            {
                $xmlString .= $this->newline . $string;
            }
           /* 
            * Validation of xmldoc is not available in php4 as far as I can tell...
            * But IE7 & FF3 have xml validating so check your generated docs with them.
            */
            if( $this->html == true )
            {
                header('Content-type: text/html;');
            }
            else
            {
                header('Content-type: text/'.$this->method.'; charset='.$this->xml_encode);    
                echo '&lt;?xml version="'.$this->xml_vers.'" encoding="'.$this->xml_encode.'"?&gt;'.$this->newline;
            }
            echo '<taconite>'.$xmlString.$this->newline.'</taconite>';
        }
    }
}/* &lt;!-- Taco --&gt;*/
?&gt;

For this to work you need the JQUERY library and the Taconite library from malsup.com added to your [VIEW] file.

The power behind this library is the Taconite Plugin for JQUERY which is well documented on the MALSUP website.

This example shows how you can easily manipulate the structure of the DOM. The markup is as follows.

[size=3]In the view file[/size]

<div id="example1" style="background-color: #ffa; padding:10px; border:1px solid #ccc"> 
    This is the <span style="color:#800">structure example</span> div. 
</div>

The following code is used in the view to request example1:


$('#MYBUTTON').click(function() {$.get('http://findmeonthe.net/TACONITE/index.php/taco_example/example1'); });

[size=3]In the controller the php code[/size]


function example1()
        {
          $this->taco->set('after', '#example1', 'This text will go AFTER the example div.');
          $this->taco->set('before', '#example1', '<div>This div will go BEFORE the example div.</div>');
          $this->taco->set('wrap', '#example1 span', '<span style="border: 1px dashed #00F"/>');
          $this->taco->set('append', '#example1', '<div>This div is APPENDED</div>');
          $this->taco->output();    
        }

[size=3]The browser ouput is[/size]


<div>This div will go BEFORE the example div.</div>
<div id="example1" style="border: 1px solid rgb(204, 204, 204); padding: 10px; background-color: rgb(255, 255, 170);"> 
       This is the <span style="border: 1px dashed rgb(0, 0, 255);">
                           <span style="color: rgb(136, 0, 0);">structure example</span>
                       </span> div. 
                       <div>This div is APPENDED</div>
</div>This text will go AFTER the example div.</div>