HTML-PopupTreeSelect-1.6/0000755000076400007640000000000010416511612014574 5ustar samsam00000000000000HTML-PopupTreeSelect-1.6/MANIFEST0000644000076400007640000000035010207244715015730 0ustar samsam00000000000000Changes Makefile.PL MANIFEST PopupTreeSelect.pm README test.pl images/closed_node.png images/L.png images/minus.png images/open_node.png images/plus.png META.yml Module meta-data (added by MakeMaker) HTML-PopupTreeSelect-1.6/META.yml0000644000076400007640000000065310416511612016051 0ustar samsam00000000000000# http://module-build.sourceforge.net/META-spec.html #XXXXXXX This is a prototype!!! It will change in the future!!! XXXXX# name: HTML-PopupTreeSelect version: 1.6 version_from: PopupTreeSelect.pm installdirs: site requires: Carp: 0 HTML::Template: 2.6 Test::More: 0 distribution_type: module generated_by: ExtUtils::MakeMaker version 6.17 HTML-PopupTreeSelect-1.6/Makefile.PL0000644000076400007640000000100710207237755016557 0ustar samsam00000000000000use 5.006; use ExtUtils::MakeMaker; WriteMakefile( NAME => 'HTML::PopupTreeSelect', VERSION_FROM => 'PopupTreeSelect.pm', PREREQ_PM => { Test::More => 0, Carp => 0, HTML::Template => 2.6, }, ABSTRACT_FROM => 'PopupTreeSelect.pm', AUTHOR => 'Sam Tregar ', ); HTML-PopupTreeSelect-1.6/README0000644000076400007640000000222010416511544015454 0ustar samsam00000000000000HTML::PopupTreeSelect version 1.6 ================================= This module creates an HTML popup tree selector. The HTML and Javascript produced will work in Mozilla 1+ (Netscape 6+) on all operating systems, Microsoft IE 5+ and Safari 1.0. For an example, visit this page: http://sam.tregar.com/hpts_demo.cgi I based the design for this widget on the xTree widget from WebFX. You can find it here: http://webfx.eae.net/dhtml/xtree/ CHANGES 1.6 - Fixed bug in Firefox and Camino on Mac OSX. Scrollbars would stay visible after the widget was hidden. (Don Brodale) INSTALLATION To install this module type the following: perl Makefile.PL make make test make install Then copy the images in images/ into a place here your web server can find them. Remember where you put them so you'll know what value to set for image_path when you call new(). DEPENDENCIES This module requires these other modules and libraries: HTML::Template 2.6 Test::More Carp COPYRIGHT AND LICENCE Copyright (C) 2003 Sam Tregar This program is free software; you can redistribute it and/or modify it under the same terms as Perl 5 itself. HTML-PopupTreeSelect-1.6/PopupTreeSelect.pm0000644000076400007640000006413510416511477020237 0ustar samsam00000000000000package HTML::PopupTreeSelect; use 5.006; use strict; use warnings; use Carp qw(croak); use HTML::Template 2.6; our $VERSION = "1.6"; our $TEMPLATE_SRC; =head1 NAME HTML::PopupTreeSelect - HTML popup tree widget =head1 SYNOPSIS use HTML::PopupTreeSelect; # setup your tree as a hash structure. This one sets up a tree like: # # - Root # - Top Category 1 # - Sub Category 1 # - Sub Category 2 # - Top Category 2 my $data = { label => "Root", value => 0, children => [ { label => "Top Category 1", value => 1, children => [ { label => "Sub Category 1", value => 2 }, { label => "Sub Category 2", value => 3 }, ], }, { label => "Top Category 2", value => 4 }, ] }; # create your HTML tree select widget. This one will call a # javascript function 'select_category(value)' when the user selects # a category. my $select = HTML::PopupTreeSelect->new(name => 'category', data => $data, title => 'Select a Category', button_label => 'Choose', onselect => 'select_category'); # include it in your HTML page, for example using HTML::Template: $template->param(category_select => $select->output); =head1 DESCRIPTION This module creates an HTML popup tree selector. The HTML and Javascript produced will work in Mozilla 1+ (Netscape 6+) on all operating systems, Microsoft IE 5+ and Safari 1.0. For an example, visit this page: http://sam.tregar.com/html-popuptreeselect/example.html I based the design for this widget on the xTree widget from WebFX. You can find it here: http://webfx.eae.net/dhtml/xtree/ This module is used to provide the category chooser in Krang, an open source content management system. You can find out more about Krang here: http://krang.sf.net =head1 INSTALLATION To use this module you'll need to copy the contents of the images/ directory in the module distribution into a place where your webserver can serve them. If that's not the same place your CGI will run from then you need to set the image_path parameter when you call new(). See below for details. =head1 INTERFACE =head2 new() new(), is used to build a new HTML selector. You call it with a description of the tree to display and get back an object. Call it with following parameters: =over =item name A unique name for the tree selector. You can have multiple tree selectors on a page, but they must have unique names. Must be alpha-numeric and begin with a letter. =item data This must be a hash reference (or an array reference of these hash references, if there are multiple "root" categories) containing the following keys: =over =item label (required) The textual label for this node. =item value (required) The value passed to the onselect handler or set in the form_field when the user selects this node. =item open (optional) If set to 1 this node will start open (showing its children). By default all nodes start closed. =item inactive (optional) If set to 1 this node will not be selectable. It will not appear as a link in the widget and clicking on the label will have no effect. However, if it has children they will still be accessible. =item children (optional) The 'children' key may point to an array of hashes with the same keys. This is the tree structure which will be displayed in the tree selector. =back See SYNOPSIS above for an example of a valid data structure. =item title The title of the window which pops up. =item button_label (optional) The widget pops up when the user presses a button. This field gives the label for the button. Defaults to "Choose". =item onselect (optional) Specifies a Javascript function that will be called when an item in the tree is selected. Recieves the value of the item as a single argument. The default is for nothing to happen. =item form_field (optional) Specifies a form field to recieve the value of the selected item. This provides a no-javascript means to use this widget (although the widget itself, of course, uses great gobs of javascript). =item form_field_form (optional) Specifies the form in which to find the C specified. If not included the first form on the page will be used. =item include_css (optional) Set this to 0 and the default CSS will not be included in the widget output. This allows you to include your own CSS which will be used by your widget. Modifying the CSS will allow you to control the fonts, colors and spacing in the output widget. If you run the widget with include_css set to 1 then you can use that output as a base on which to make changes. =item resizable (optional) Set this to 1 and the default widget output will not be resizable. If you run the widget with resizable set to 1 then default output will have a bar at the bottom which allows it to be resized by dragging. Defaults to 0. =item image_path (optional) Set this to the URL to the images for the widget. These files should be copied from the images directory in the module distribution into a place where your webserver can reach them. By default this is empty and the widget expects to find images in the current directory. =item width (optional) Set this to the width of the popup window. Defaults to 200. =item height (optional) Set this to the height of the tree box inside the window. This defaults to 0 which allows the chooser to grow as the tree expands. If you set this option you'll probably want to set the C option as well. =item scrollbars (optional) If set to 1 the chooser will have a fixed size (specified by width and height) and show scrollbars inside the tree area. =item hide_selects (optional) This option will cause the chooser to dynamically hide select boxes on the page when the chooser opens. This is necessary in order to avoid the select boxes showing through the chooser under Windows in both IE and Mozilla (to a lesser extent). This defaults to 1. For a detailed explanation of the problem, see this page: http://www.webreference.com/dhtml/diner/seethru/ =item hide_textareas (optional) This option will cause the chooser to dynamically hide textareas on the page when the chooser opens. This is necessary to workaround a bug in Netscape 6.0 through 7.0 in which buttons hovering over textareas are not clickable. This defect is fixed in version 7.1 and later. This option defaults to 0, since this problem only affects older browsers. =item parent_var (optional) This option includes a 'parent' loop in the template data used to construct the widget's HTML. It's not used by the default template, so it defaults to 0. Set to 1 to use this variable in your own template via sub-classing. =back =head1 output() Call output() to get HTML from the widget object to include in your page. =cut =head1 SUBCLASSING HTML::PopupTreeSelect can be subclassed, for the purposes of -- for example -- using a different template engine to generate the HTML. Here's one brief example, using the Template engine: package My::PopupTreeSelect; use Template; use base 'HTML::PopupTreeSelect'; sub output { my($self) = @_; return $self->SUPER::output(Template->new); } sub _output_generate { my($self, $template, $param) = @_; my $output; $template->process(\$MY_TEMPLATE_SRC, $param, \$output); return $output; } Of course, $MY_TEMPLATE_SRC will need to be provided, too. $HTML::PopupTreeSelect::TEMPLATE_SRC is a global variable, so it may be modified to your liking, or your own template data can be provided to your own template generator method. =head1 CAVEATS =over 4 =item * The javascript used to implement the widget needs control over the global document.onmousedown, document.onmousemove and document.onmouseup handlers. This means that it's unlikely to play nice with other DHTML on the same page. =back =head1 TODO Here are some possible directions for future development. Send me a patch for one of these and you're guaranteed a place in F. =over =item * Allow each node to specify its own icon. Right now every node uses C and C. =back =head1 BUGS I know of no bugs in this module. If you find one, please file a bug report at: http://rt.cpan.org Alternately you can email me directly at C. Please include the version of the module and a complete test case that demonstrates the bug. =head1 COPYRIGHT AND LICENSE Copyright (C) 2003, 2004 Sam Tregar This program is free software; you can redistribute it and/or modify it under the same terms as Perl 5 itself. =head1 AUTHOR Sam Tregar =cut sub new { my $pkg = shift; # setup defaults and get parameters my $self = bless({ button_label => 'Choose', height => 0, width => 300, scrollbars => 0, hide_selects => 1, hide_textareas=> 0, indent_width => 25, include_css => 1, resizable => 0, image_path => ".", parent_var => 0, @_, }, $pkg); # fix up image_path to always end in a / $self->{image_path} .= "/" unless $self->{image_path} =~ m!/$!; # check required params foreach my $req (qw(name data title)) { croak("Missing required parameter '$req'") unless exists $self->{$req}; } return $self; } sub output { my($self, $template) = @_; $template ||= HTML::Template->new(scalarref => \$TEMPLATE_SRC, die_on_bad_params => 0, global_vars => 1, ); # build node loop my @loop; $self->_output_node(node => $self->{data}, loop => \@loop, ); # setup template parameters my %param = (loop => \@loop, map { ($_, $self->{$_}) } qw(name height width indent_width onselect form_field form_field_form button_label button_image title include_css resizable image_path scrollbars hide_selects hide_textareas )); # get output for the widget my $output; if ($self->can('_output_generate')) { $output = $self->_output_generate($template, \%param); } else { $template->param(%param); $output = $template->output; } return $output; } # recursively add nodes to the output loop sub _output_node { my ($self, %arg) = @_; my @nodes; if (ref $arg{node} eq 'ARRAY') { @nodes = @{$arg{node}}; } else { @nodes = ($arg{node}); } for my $node (@nodes) { my $id = next_id(); push @{$arg{loop}}, { label => $node->{label}, value => $node->{value}, id => $id, open => $node->{open} ? 1 : 0, inactive => $node->{inactive} ? 1 : 0, ($self->{parent_var} ? (parent => [ $arg{parent} || () ]) : ()), }; if ($node->{children} and @{$node->{children}}) { $arg{loop}[-1]{has_children} = 1; for my $child (@{$node->{children}}) { $self->_output_node(node => $child, parent => $node, loop => $arg{loop}, ); } push @{$arg{loop}}, { end_block => 1 }; } } } { my $id = 1; sub next_id { $id++ } } $TEMPLATE_SRC = <
ondblclick="_toggle_expand()" onclick="_toggle_select(, '')"> onclick="_toggle_select(, '')">
 
END 1; HTML-PopupTreeSelect-1.6/test.pl0000644000076400007640000000670410207237755016132 0ustar samsam00000000000000use Test::More qw(no_plan); use_ok('HTML::PopupTreeSelect'); my $data = { label => "Root", value => 'val0', children => [ { label => "Top Category 1", value => 'val1', children => [ { label => "Sub Category 1", value => 'val2' }, { label => "Sub Category 2", value => 'val3' }, ], }, { label => "Top Category 2", value => 'val4', }, ], }; my $select = HTML::PopupTreeSelect->new(name => 'category', data => $data, title => 'Select a Category', button_label => 'Choose'); isa_ok($select, 'HTML::PopupTreeSelect'); my $output = $select->output(); ok($output); # see if all the labels made it for ("Root","Top Category 1", "Sub Category 1", "Sub Category 2", "Top Category 2") { like($output, qr/$_/); } # see if all the values made it for (0 .. 4) { like($output, qr/val$_/); } # this one should have CSS like($output, qr/text\/css/); # add a second layer $data = [{ label => "Root 2", value => 'val5', children => [ { label => "Top Category 3", value => 'val6' } ] }, $data, ]; # test modifying template src, and use of parent $HTML::PopupTreeSelect::TEMPLATE_SRC =~ s{} { ()}; # make one without CSS my $nocss = HTML::PopupTreeSelect::DummySub->new(name => 'category', data => $data, title => 'Select a Category', button_label => 'Choose', parent_var => 1, include_css => 0); isa_ok($nocss, 'HTML::PopupTreeSelect::DummySub'); my $nocss_output = $nocss->output; ok($nocss_output); ok($nocss_output !~ qr/text\/css/); # let's look for the parent labels, three levels deep for my $first (@$data) { my $label1 = $first->{label}; like($nocss_output, qr/\Q$label1 ()/); for my $second (@{$first->{children}}) { my $label2 = $second->{label}; like($nocss_output, qr/\Q$label2 ($label1)/); for my $third (@{$second->{children}}) { my $label3 = $third->{label}; like($nocss_output, qr/\Q$label3 ($label2)/); } } } # see if all the values made it (we increment them in subclass method) for (1 .. 7) { like($nocss_output, qr/val$_/); } # test subclassing package HTML::PopupTreeSelect::DummySub; use base 'HTML::PopupTreeSelect'; sub _output_node { my ($self, %arg) = @_; my @nodes; if (ref $arg{node} eq 'ARRAY') { push @nodes, @{$arg{node}}; } else { @nodes = ($arg{node}); } # increment for the heck of it $_->{value}++ for @nodes; $self->SUPER::_output_node(%arg); } HTML-PopupTreeSelect-1.6/Changes0000644000076400007640000000321110416511531016064 0ustar samsam00000000000000Revision history for HTML::PopupTreeSelect. 1.6 - Fixed bug in Firefox and Camino on Mac OSX. Scrollbars would stay visible after the widget was hidden. (Don Brodale) 1.5 - Added the ability to resize the chooser by dragging the lower edge. This is off by default but may be turned on using the new 'resizable' option. (Zac Shepard and Peter Leonard) - Fixed a few HTML and CSS standards-compliance problems. (Don Brodale) 1.4 - Improved support for sub-classing. (Chris Nandor) - Added support for multiple root nodes. (Chris Nandor) - Added new 'parent_var' option to supply parent info in the node loop. (Chris Nandor) - Added 'inactive' flag to node structure, allowing individual nodes to be unavailable for selection. 1.3 - Added hide_textareas option to workaround bug in Netscape 6.0 through 7.0 where buttons hovering over textareas are not clickable. - Now tested on Safari 1.0. 1.2 - Added ability to drag the widget around the window. - Added dropshadow in Windows IE. - Added workaround for the select-box show-through problem. - Added scrollbars to the widget. - NOTE: the default CSS has changed. If you are using your own CSS you'll need to adjust it. Just run the widget with include_css turned on and you'll see the new classes and settings. 1.1 - Fixed bug where IE sometimes decided to wrap rows. - Changed code to setup form_field before calling onselect handler. This allows the onselect handler to submit a form with the value already set. 1.0 Wed Apr 30 17:32:21 2003 - First Release HTML-PopupTreeSelect-1.6/images/0000755000076400007640000000000010416511612016041 5ustar samsam00000000000000HTML-PopupTreeSelect-1.6/images/closed_node.png0000644000076400007640000000034510207237755021042 0ustar samsam00000000000000PNG  IHDRRtIME 1FB pHYs  ~PLTE`ϟtRNS@fPIDATxc`&%%0C,`lll@A&4 H2!THXX  ո`h 0`GHAIENDB`HTML-PopupTreeSelect-1.6/images/L.png0000644000076400007640000000024510207237755016756 0ustar samsam00000000000000PNG  IHDRb PLTE{dtRNS@fbKGDH pHYs }vHtIME,(IDATxc``,AAAot&;IENDB`HTML-PopupTreeSelect-1.6/images/minus.png0000644000076400007640000000033110207237755017712 0ustar samsam00000000000000PNG  IHDR(-S3PLTE{ҸhtRNS@fbKGDH pHYs }vHtIME-3]x JIDATxc``M#]3+fIENDB`HTML-PopupTreeSelect-1.6/images/plus.png0000644000076400007640000000033410207237755017545 0ustar samsam00000000000000PNG  IHDR(-S3PLTE{ҸhtRNS@fbKGDH pHYs }vHtIME+E۾"IDATxc`` f0`Ҵۂ5'jgCw_IENDB`HTML-PopupTreeSelect-1.6/images/open_node.png0000644000076400007640000000035010207237755020526 0ustar samsam00000000000000PNG  IHDRRtIME 1FB pHYs  ~PLTEϟ`YtRNS@fYIDATxe 0@Qt^zn7' jO "N lCl # 3nO9jBsGP*IENDB`