"); + } else { +END + $visibility="show" if $visibility eq "visible"; + $html .= <"); + } + +END + + #form fields + $html .= < +END + foreach my $f ( @$form_text, @$form_checkbox ) { + $html .= < +END + } + + #layer + $html .= &{$self->{layer_callback}}($layer); + + #end form & layer + $html .= < + + +END + + } + + $html; +} + +sub _fixup { + my $self = shift; + my $key = exists($self->{unique_key}) ? $self->{unique_key} : ''; + my $form_name = $self->{form_name} or return ''; + my $form_text = + exists($self->{form_text}) ? $self->{form_text} : []; + my $form_checkbox = + exists($self->{form_checkbox}) ? $self->{form_checkbox} : []; + my $html = " + "; + + $html; + +} + +sub _select { + my $self = shift; + my $key = exists($self->{unique_key}) ? $self->{unique_key} : ''; + my $options = $self->{options}; + my $selected = exists($self->{selected_layer}) ? $self->{selected_layer} : ''; + my $size = exists($self->{size}) ? $self->{size} : 1; + my $html = " + '; +} + +sub _changed { + my $self = shift; + my $key = exists($self->{unique_key}) ? $self->{unique_key} : ''; + my $options = $self->{options}; + my $html = " + "; + $html; +} + +sub _visualize { + my $self = shift; + my $key = exists($self->{unique_key}) ? $self->{unique_key} : ''; + return '' unless exists($self->{selected_layer}); + my $selected = $self->{selected_layer}; + < +function ${key}visualize() { + if (document.getElementById) { + document.getElementById('${key}d$selected').style.visibility = "visible"; + } else { + document.${key}l$selected.visibility = "visible"; + } +} + +END +} + +sub _safeonload { + < +var gSafeOnload = new Array(); +function SafeAddOnLoad(f) { + if (window.onload) { + if (window.onload != SafeOnload) { + gSafeOnload[0] = window.onload; + window.onload = SafeOnload; + } + gSafeOnload[gSafeOnload.length] = f; + } else { + window.onload = f; + } +} +function SafeOnload() +{ + for (var i=0;i +END +} + +=back + +=head1 AUTHOR + +Ivan Kohler Eivan-selectlayers@420.amE + +=head1 COPYRIGHT + +Copyright (c) 2002 Ivan Kohler +All rights reserved. +This program is free software; you can redistribute it and/or modify it under +the same terms as Perl itself. + +=head1 BUGS + +JavaScript + +=head1 SEE ALSO + +L. L, http://www.xs4all.nl/~ppk/js/dom.html, +http://javascript.about.com/library/scripts/blsafeonload.htm + +=cut diff --git a/homepage.pl b/homepage.pl new file mode 100755 index 0000000..7e112d2 --- /dev/null +++ b/homepage.pl @@ -0,0 +1,189 @@ +#!/usr/bin/perl -w + +use strict; +use Tie::IxHash; +use HTML::Widgets::SelectLayers; + +tie my %o, 'Tie::IxHash', + 'download' => 'Download', + 'installation' => 'Installation', + 'compatibility' => 'Compatibility', + 'documentation' => 'Documentation', + 'cvs' => 'Anonymous CVS access', +; + +my %html = ( + + 'download' => 'Download HTML-Widgets-SelectLayers-0.01.tar.gz', + + 'installation' => '

+  perl Makefile.PL
+  make
+  make test
+  make install
+

', + +'cvs' => '

+Anonymous CVS access is available:
+  $ export CVSROOT=":pserver:anonymous@cleanwhisker.420.am:/home/cvs/cvsroot"
+  $ cvs login
+  (Logging in to anonymous@cleanwhisker.420.am
+  CVS password: anonymous
+  $ cvs checkout DBIx-DBSchema
+as well as browsable via cvsweb.
+

', + +'documentation' => join('',), + +'compatibility' => '

+This HTML generated by this module uses JavaScript, but nevertheless attempts
+to be as cross-browser as possible, testing for features via DOM support rather
+than specific browsers or versions.  It has been tested under Mozilla 0.9.8,
+Netscape 4.77, IE 5.5, Konqueror 2.2.2, and Opera 5.0.
+

', + +); +close DATA; + +my $w = new HTML::Widgets::SelectLayers( + 'options' => \%o, + 'selected_layer' => 'download', + 'layer_callback' => sub { + my $layer = shift; + "
". $html{$layer}; + }, + #'form_action' => '', + #'form_text' => [], + #'form_checkbox' => [], +); + +print <html, "\n"; + + +HTML::Widgets::SelectLayers - selectable HTML layers + + +

+HTML::Widgets::SelectLayers
+
+Copyright (c) 2002 Ivan Kohler
+All rights reserved.
+This program is free software; you can redistribute it and/or modify it under
+the same terms as Perl itself.
+
+This module implements an HTML widget with multiple layers.  Only one layer
+is visible at any given time, controlled by a <SELECT> box.  For an example
+see below.
+
+

+END + +__DATA__ +

NAME

HTML::Widgets::SelectLayers - Perl extension for selectable HTML layers

SYNOPSIS

+  use HTML::Widgets::SelectLayers;

+  use Tie::IxHash;
+  tie my %options, 'Tie::IxHash',
+    'value'  => 'Select One',
+    'value2' => 'Select Two',
+  ;

+  $widget = new HTML::Widgets::SelectLayers(
+    'options'       => \%options,
+    'form_name'     => 'dummy',
+    'form_actoin'   => 'process.cgi',
+    'form_text'     => [ qw( textfield1 textfield2 ) ],
+    'form_checkbox' => [ qw( checkbox1 ) ],
+    'layer_callback' => sub {
+      my $layer = shift;
+      my $html = qq!<INPUT TYPE="hidden" NAME="layer" VALUE="$layer">!;
+      $html .= $other_stuff;
+      $html;
+    },
+  );

+  print '<FORM NAME=dummy>'.
+        '<INPUT TYPE="text" NAME="textfield1">'.
+        '<INPUT TYPE="text" NAME="textfield2">'.
+        '<INPUT TYPE="checkbox" NAME="checkbox1" VALUE="Y">'.
+        $widget->html;

DESCRIPTION

This module implements an HTML widget with multiple layers. Only one layer +is visible at any given time, controlled by a <SELECT> box. For an +example see http://www.420.am/selectlayers/

This HTML generated by this module uses JavaScript, but nevertheless attempts +to be as cross-browser as possible, testing for features via DOM support rather +than specific browsers or versions. It has been tested under Mozilla 0.9.8, +Netscape 4.77, IE 5.5, Konqueror 2.2.2, and Opera 5.0.

FORMS

Not all browsers seem happy with forms that span layers. The generated HTML +will have a </FORM> tag before the layers and will generate +<FORM> and </FORM> tags for each layer. To facilitate +<SUBMIT> buttons located within the layers, you can pass a form name +and element names, and the relevant values will be copied to the layer's form. +See the form_ options below.

METHODS

new KEY, VALUE, KEY, VALUE...
+

+Options are passed as name/value pairs: +

options - Hash reference of layers and labels for the <SELECT>. See + the Tie::IxHash manpage to control ordering. + In HTML: <OPTION VALUE=``$layer''>$label</OPTION>

layer_callback - subroutine reference to create each layer. The layer name + is passed as an option in @_

selected_layer - (optional) initially selected layer

form_name - (optional) Form name to copy values from. If not supplied, no + values will be copied.

form_action - Form action

form_text - (optional) Array reference of text (or hidden) form fields to copy + from the form_name form.

form_checkbox - (optional) Array reference of checkbox form fields to copy from + the form_name form.

fixup_callback - (optional) subroutine reference, returns supplimentary + JavaScript for the function described above under FORMS.

#form_select

size - (optional) size of the <SELECT>, default 1.

unique_key - (optional) prepended to all JavaScript function/variable/object + names to avoid namespace collisions.

html_beween - (optional) HTML between the <SELECT> and the layers.

html
+

+Returns HTML for the widget. +

AUTHOR

Ivan Kohler <ivan-selectlayers@420.am>

COPYRIGHT

BUGS

JavaScript