pronto/plugins/template/ajax.php

Go to the documentation of this file.

<?php
class tpAJAX extends Plugin
{
        var $guid;

        function tpAJAX() {
                $this->Plugin();
                $this->depend('html');

                $this->guid = 1;
        }

        function dialog($dlg_id, $target, $buttons=array(), $overlay=false, $modal=false, $opts=array())
        {
                // IE6 fix: if the dialog is inside a postion:relative element, then the
                // overlay will appear over the dialog box.
                $opts[] = 'toTop:true';
                if(!$overlay) $opts[] = 'overlay:0';
                if($modal)    $opts[] = 'modal:true';
                if(empty($opts)) {
                        $opts = '';
                } else {
                        $opts = '{' . implode(',', $opts) . '}';
                }

                list($btn_html,$btn_js) = $this->buttons($buttons, 'dialog', true);
                $btn_html = str_replace("'", "\\'", $btn_html);

                // build HTML for titlebar and resize icon
                $tb = '<div class="dialog-tb">'.$this->depends->html->image('icons/close_x.gif',array('class'=>'dialog-close jqmClose')).'</div>';
                $tb = str_replace("'", "\\'", $tb);
                $rz = $this->depends->html->image('icons/resize.gif', array('class'=>'dialog-resize'));
                $rz = str_replace("'", "\\'", $rz);

                // fiddle with the provided div to wrap it with the necessary dialog elements
                $js  = "$('#$dlg_id').wrap('<div></div>');";
                $js .= "$('#$dlg_id').before('$tb').after('$rz');";
                $js .= "$('#$dlg_id').parent().attr('style', $('#$dlg_id').attr('style'));"; // move styling to parent
                $js .= "$('#$dlg_id').parent().attr('class', $('#$dlg_id').attr('class'));"; // move class to parent
                $js .= "$('#$dlg_id').parent().addClass('dialog');";
                $js .= "$('#$dlg_id').removeAttr('style').removeAttr('class');";
                $js .= "$('#$dlg_id').addClass('dialog-content');";
                $js .= "$('#$dlg_id').attr('id', '').parent().attr('id', '$dlg_id');"; // move ID up to parent
                $js .= "$('#$dlg_id').find('.dialog-tb').append('<span>'+$('#$dlg_id').find('.dialog-content').attr('title')+'</span>');";
                $js .= "$('#$dlg_id').find('.dialog-content').append('$btn_html');";
                $js .= $btn_js;

                $this->depends->html->js_run('jq_dlgsetup_'.$dlg_id, $js);

                $js  = "$('#{$dlg_id}').jqm({$opts}).jqDrag('.dialog-tb').jqResize('img.dialog-resize');";
                if($target) {
                        $event = 'click';
                        if(is_array($target)) {
                                $event  = $target[0];
                                $target = $target[1];
                        }
                        $js .= "$('{$target}').{$event}(function(){";
                        $js .= "$(this).blur();";
                        $js .= "$('#$dlg_id').jqmShowCenter(); return false; });";
                }

                $this->depends->html->css_load('dialog');
                $this->depends->html->js_load('jq/jquery.modal');
                $this->depends->html->js_run('jq_dlg_'.$dlg_id, $js);
        }

        function popup_bind($div_id, $targets=array(), $buttons=array())
        {
                list($btn_html,$btn_js) = $this->buttons($buttons, 'popup', true);
                $js = "$('#$div_id').append('<div>".str_replace("'","\\'",$btn_html)."</div>');";
                $js .= $btn_js;

                if(!is_array($targets)) $targets = array($targets);
                foreach($targets as $targ) {
                        $js .= "$('$targ').click(function(e){ ";
                        // generate a random DOM ID if one isn't set
                        $js .= "if($(this).attr('id') == '') $(this).attr('id', 'anon'+parseInt(Math.random()*100000));";
                        // store the target's DOM ID in the div's "rel" attribute
                        $js .= "$('#$div_id').attr('rel',$(this).attr('id')).position_near_click(e).show('normal');return false; });";
                }
                $this->depends->html->css_load('dialog', 'dialog');
                $this->depends->html->js_load('ajax');
                $this->depends->html->js_run('', $js);
        }

        function buttons($buttons, $context, $retjs=false)
        {
                switch($context) {
                        case 'dialog':
                                $hide    = "$(this).parents('.dialog:first').jqmHide()";
                                $content = "$(this).parents('.dialog-content:first')";
                                break;
                        case 'popup':
                                $hide    = "$(this).parents('.popup:first').hide('normal')";
                                $content = "$(this).parents('.popup:first')";
                                break;
                }
                $ret = '<div class="buttons">';
                $bjs = '';
                foreach($buttons as $label=>$btn) {
                        switch($btn['action']) {
                                case 'ajax_load':
                                        $this->depends->html->js_load('ajax');
                                        $js = "var c = {$content};".
                                                "$.ajax({".
                                                        "url: '{$btn['url']}',".
                                                        "type: 'GET',".
                                                        "data: {_ajax:1},".
                                                        "dataType: 'json',".
                                                        "success: function(d){ if(d.html) {c.empty().append(d.html)} else {{$hide};} ajax_exec(d); }".
                                                "});"; break;

                                case 'submit_form':
                                        $js = "$('#{$btn['form_id']}').submit();"; break;

                                case 'custom':
                                        $js = $btn['js']; break;

                                case 'function':
                                        $js = "{$btn['function']}({$content});"; break;

                                case 'close':
                                default:
                                        $js = "{$hide};";
                        }
                        $id = "prontobtn-".$this->guid++;
                        $ret .= '<input id="'.$id.'" type="button" class="button" value="'.$label.'" />&nbsp;';
                        // we have to bind events this way because IE is retarded beyond repair
                        $bjs .= "$('#$id').click(function(){ $js return false; });";
                }
                $ret .= '</div>';

                if($retjs) {
                        return array($ret, $bjs);
                } else {
                        $this->depends->html->js_run('', $bjs);
                        return $ret;
                }
        }

        function autocomplete($name, $value_id, $value_name, $search_url, $form_id) {
                $this->depend('form');
                $this->depends->html->js_load('jq/jquery.autocomplete');
                $this->depends->html->css_load('autocomplete');

                // autocomplete plugin docs:
                //   http://docs.jquery.com/Plugins/Autocomplete

                $guid = $this->guid++;
                $id   = $this->depends->form->dom_id($name);
                $icon = $this->depends->html->image('icons/pencil.gif', __('Change'), array('id'=>"ac{$guid}-chg",'style'=>'cursor:pointer'));

                $out = <<<EOT
<script type="text/javascript">
function ac{$guid}_cb(event, data, formatted) {
        $('#$id').val(data[0]);
        $('#ac{$guid}-text').hide();
        $('#ac{$guid}-val span.ac-val').html(data[1]);
        $('#ac{$guid}-val').show();
}
$(document).ready(function(){
        $('#ac{$guid}-text').autocomplete("{$search_url}", {
                minChars: 2,
                cacheLength: 20,
                formatItem: function(d){ return d[1]; },
                formatResult: function(d){ return d[1]; }
        });
        $('#ac{$guid}-text').result(ac{$guid}_cb);

        $('#ac{$guid}-chg').click(function(){
                $('#$id').val('');
                $('#ac{$guid}-val span.ac-val').html('');
                $('#ac{$guid}-val').hide();
                $('#ac{$guid}-text').val('').show();
        });
});
</script>
EOT;
                if($value_id && $value_name === true) {
                        $out .= <<<EOT
<script type="text/javascript">
$(document).ready(function(){
        $.get("{$search_url}", {id: {$value_id}}, function(d){
                $('#ac{$guid}-val span.ac-val').html(d);
        });
});
</script>
EOT;
                }

                $out .= '<input type="hidden" id="'.$id.'" name="'.$name.'" value="'.$value_id.'" />';
                if($value_id) {
                        $out .= '<span id="ac'.$guid.'-val" class="ac-val"><span class="ac-val">'.$value_name.'</span><span class="ac-chg">'.$icon.'</span></span>';
                        $out .= $this->depends->form->text("ac{$guid}-text", '', '', '', array('id'=>"ac{$guid}-text",'class'=>'ac-txt','style'=>'display:none'));
                } else {
                        $out .= '<span id="ac'.$guid.'-val" class="ac-val" style="display:none"><span class="ac-val">'.$value_name.'</span><span class="ac-chg">'.$icon.'</span></span>';
                        $out .= $this->depends->form->text("ac{$guid}-text", '', '', '', array('id'=>"ac{$guid}-text",'class'=>'ac-txt'));
                }

                return $out;
        }

        function autocomplete_multisel($name, $values, $search_url, $form_id, $max_sel=0) {
                $this->depend('form');
                $this->depends->html->js_load('jq/jquery.autocomplete');
                $this->depends->html->css_load('autocomplete');

                // autocomplete plugin docs:
                //   http://docs.jquery.com/Plugins/Autocomplete/

                $guid = $this->guid++;

                // i18n
                $msg_remove  = __('Remove');
                $msg_toomany = __("You can have a maximum of %d selections.", $max_sel);

                $out = <<<EOT
<script type="text/javascript">
function ac{$guid}_cb(event, data, formatted) {
        $('#ac{$guid}-text').val('');
        if({$max_sel} > 0 && $('li', $('#ac{$guid}-sel')).length >= {$max_sel}) {
                alert("{$msg_toomany}");
                return;
        }
        if($('li[rel='+data[0]+']', $('#ac{$guid}-sel')).length == 0) {
                $('#ac{$guid}-sel').append('<li rel="'+data[0]+'">[<a title="{$msg_remove}" href="#" onClick="return ac{$guid}_remove(this)">x</a>] &nbsp; '+data[1]+'</li>');
                $('#{$form_id}').append('<input type="hidden" name="{$name}[]" value="'+data[0]+'" />');
        }
}
function ac{$guid}_remove(el) {
        var id = $(el).parent().attr('rel');
        $('#$form_id').find('input[name="{$name}[]"][type="hidden"][value="'+id+'"]').remove();
        $('#ac{$guid}-sel').find('li[rel="'+id+'"]').remove();
        return false;
}
$(document).ready(function(){
        $('#ac{$guid}-text').autocomplete("{$search_url}", {
                minChars: 2,
                cacheLength: 20,
                formatItem: function(d){ return d[1]; },
                formatResult: function(d){ return d[1]; }
        });
        $('#ac{$guid}-text').result(ac{$guid}_cb);
});
</script>
EOT;

                $out .= $this->depends->form->text("ac{$guid}-text", '', '', '', array('id'=>"ac{$guid}-text",'class'=>'ac-txt'));
                foreach($values as $id=>$val) {
                        $out .= '<input type="hidden" name="'.$name.'[]" value="'.$id.'" />';
                }
                $out .= '<ul id="ac'.$guid.'-sel" class="ac-sel">';
                foreach($values as $id=>$val) {
                        $out .= '<li rel="'.$id.'">[<a title="Remove" href="#" onClick="return ac'.$guid.'_remove(this)">x</a>] &nbsp; '.$val.'</li>';
                }
                $out .= '</ul>';

                return $out;
        }

        function _attribs($attribs)
        {
                $ret = '';
                foreach($attribs as $k=>$v) {
                        $ret .= " $k=\"$v\"";
                }
                return $ret;
        }

}

?>

---