xoops forums

bumciach

Not too shy to talk
Posted on: 2009/8/25 11:03
bumciach
bumciach (Show more)
Not too shy to talk
Posts: 153
Since: 2007/6/25
#1

jqueryFileTree plugin with XoopsForm

Hello!
I did for my own purposes form element to set the directory (and path). But if somebody is interested in it any suggestions welcome. This is a very preliminary version (some things are hardcoded). Maybe it will be useful for someone.

I used jqueryFileTree plugin to display directories (it points uploads dir). After opening the folder the path is copied to the text box (can also be edited manually). The form sends the value of this textbox for further processing.

For demo download and install this module pfxfp.zip

/modules/pfxfp/class/formelement/formtextdirpath.php
class pf_XoopsFormDirPath extends XoopsFormText
{
    function 
pf_XoopsFormDirPath($caption$name$size 15$value0)
    {
        
//$value = !is_numeric($value) ? time() : intval($value);
        
$this->XoopsFormText($caption$name$size255$value);
        
$this->addScript();
    }
    
    function 
addScript()
    {
      global 
$xoTheme$xoopsModule;
      
$ele_name $this->getName();
      
$dirname XOOPS_URL.'/modules/'.$xoopsModule->getVar("dirname");
      
$xoTheme->addScript($dirname '/js/jqueryFileTree/jqueryFileTree.js');
    
$xoTheme->addStylesheet($dirname '/js/jqueryFileTree/jqueryFileTree.css');
      
$xoTheme->addScript(null, array( 'type' => 'application/x-javascript' ), '
        $(document).ready( function() {
            $('
#uploadsdir_'.$ele_name.'').fileTree({ 
              
root''.XOOPS_ROOT_PATH.'/uploads/',
              
script''.$dirname.'/js/jqueryFileTree/connectors/jqueryFileTree.php',
              
folderclicked: function(node) { $('#'.$ele_name.'').val(node);
     }
               },
              
              function(
file) {
                
alert(file);
            });
        });
    
');
  }

    function render()
    { 
        $ele_name = $this->getName();
        $ele_value = $this->getValue();
        return '
<div id="uploadsdir_'.$ele_name.'" style="height:200px;width:50%;border:1px solid #ccc;overflow:auto;"></div><input type="text" name="'.$ele_name.'" id="'.$ele_name.'" size="'.$this->getSize().'" value="'.$ele_value.'"'.$this->getExtra().' />';
    }
}


usage:
/modules/pfxfp/index.php
include_once(XOOPS_ROOT_PATH."/class/xoopsformloader.php");
include_once(
PFXFP_ROOT_PATH."/class/formelement/formtextdirpath.php");
$form = new XoopsThemeForm('test''frmCategory''category.php');
        [...]

        
//DIRECTORY BROWSER
          
$form->addElement(new pf_XoopsFormDirPath('Destination''dbf_dir'50''), false); 

        [...]
        
$form->display();

kaotik

Just can't stay away
Posted on: 2009/8/25 13:11
kaotik
kaotik (Show more)
Just can't stay away
Posts: 861
Since: 2004/2/19
#2

Re: jqueryFileTree plugin with XoopsForm

Very nice job bumciach! That's a great plugin, I could actually use it for myself
I'm going to place it on my "recommended plugins" list :)

trabis

Core Developer
Posted on: 2009/8/25 16:43
trabis
trabis (Show more)
Core Developer
Posts: 2268
Since: 2006/9/1 1
#3

Re: jqueryFileTree plugin with XoopsForm

Thanks, this is very useful.

bumciach

Not too shy to talk
Posted on: 2009/8/27 14:27
bumciach
bumciach (Show more)
Not too shy to talk
Posts: 153
Since: 2007/6/25
#4

Re: jqueryFileTree plugin with XoopsForm

A curious detail: my code doesn't work on Internet Explorer, because of declarations in addScript
'type' => 'application/x-javascript'


There should be 'text/javascript' not 'application/x-javascript'.