0.05HTML_Widgets_SelectLayers_0_05

3 files changed, 82 insertions, 55 deletions

diff --git a/Changes b/Changes
index ddb72ce..9ae3de3 100644
--- a/Changes
+++ b/Changes
@@ -1,5 +1,11 @@
 Revision history for Perl extension HTML::Widgets::SelectLayers.
 
+0.05 Wed Aug 24 06:31:24 PDT 2005
+	- Long overdue: remove NN4 support.
+	- Add under_position option, based on a patch from Ricardo SIGNES
+	- set zIndex foo, hopefully selected layer will be active in IE
+	  properly now
+
 0.04  Fri Jan 30 23:23:28 2004
 	- fix for pre-5.8 versions.  *sigh*
 
diff --git a/SelectLayers.pm b/SelectLayers.pm
index e7cca4c..f37c90a 100644
--- a/SelectLayers.pm
+++ b/SelectLayers.pm
@@ -3,7 +3,7 @@ package HTML::Widgets::SelectLayers;
 use strict;
 use vars qw($VERSION);
 
-$VERSION = '0.04';
+$VERSION = '0.05';
 
 =head1 NAME
 
@@ -35,7 +35,7 @@ HTML::Widgets::SelectLayers - Perl extension for selectable HTML layers
     },
   );
 
-  print '<FORM NAME=dummy>'.
+  print '<FORM NAME=dummy STYLE="margin-top: 0; margin-bottom: 0">'.
         '<INPUT TYPE="text" NAME="textfield1">'.
         '<INPUT TYPE="text" NAME="textfield2">'.
         '<INPUT TYPE="checkbox" NAME="checkbox1" VALUE="Y">'.
@@ -48,15 +48,15 @@ is visible at any given time, controlled by a E<lt>SELECTE<gt> 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.
+to be as cross-browser as possible.  The 0.05 release drops Navigator 4
+compatibility and has been tested under Mozilla Firefox 1.0.6, MSIE 6.0, 
+Konqueror 3.3.2, and Opera 8.0.2.
 
 =head1 FORMS
 
-Not all browsers seem happy with forms that span layers.  The generated HTML
-will have a E<lt>/FORME<gt> tag before the layers and will generate
-E<lt>FORME<gt> and E<lt>/FORME<gt> tags for each layer.  To facilitate
+My understanding is that forms cannot span E<lt>DIVE<gt>s elements.  The
+generated HTML will have a E<lt>/FORME<gt> tag before the layers and will
+generate E<lt>FORME<gt> and E<lt>/FORME<gt> tags for each layer.  To facilitate
 E<lt>SUBMITE<gt> 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 B<form_> options below.
@@ -105,6 +105,8 @@ unique_key - (optional) prepended to all JavaScript function/variable/object
 
 html_beween - (optional) HTML between the E<lt>SELECTE<gt> and the layers.
 
+under_position - (optional) specifies the positioning of any HTML appearing after the widget.  I<static>, the default, positions subsequent HTML underneath the current layer (or immediately under the select box if no layer has yet been selected), reflowing when layers are changed.  I<absolute> calculates the size of the largest layer and keeps the subsequent HTML in a single position underneath it.  Note that I<absolute> works by positioning subsequent HTML in a E<lt>DIVE<gt>, so you should probably close it yourself with a E<lt>/DIVE<gt> before your E<lt>/HTMLE<gt> end tag.  I<absolute> is a bit experimental and might have some quirks with truncating the end of the page under IE; you might have better results by just making all your layers the exact same size at the moment.
+
 =cut
 
 sub new {
@@ -137,34 +139,35 @@ sub html {
   my $form_select =
     exists($self->{form_select}) ? $self->{form_select} : [];
 
+  my $under_position = 
+    exists($self->{under_position}) ? $self->{under_position} : 'static';
+  my $hidden = lc($under_position) eq 'absolute'
+                 ? 'visibility: hidden; position: absolute; z-index: 0'
+                 : 'display: none; z-index: 0';
+  #my $show = lc($under_position) eq 'absolute'
+  #             ? 'visibility: visible'
+  #             : 'display: "" ';
+
   my $html = $self->_safeonload.
              $self->_visualize.
              "<SCRIPT>SafeAddOnLoad(${key}visualize)</SCRIPT>".
              $self->_changed.
              $self->_fixup.
-             $self->_select. $between. '</FORM>';
+             $self->_select. $between. '</FORM>'.
+             "<SCRIPT>var ${key}maxHeight = 0;</SCRIPT>";
 
   #foreach my $layer ( 'konq_kludge', keys %$options ) {
   foreach my $layer ( keys %$options ) {
 
     #start layer
-    my $visibility = "hidden";
+
     $html .= <<END;
-      <SCRIPT>
-      if (document.getElementById) {
-        document.write("<DIV ID=\\"${key}d$layer\\" STYLE=\\"visibility: $visibility; position: absolute\\">");
-      } else {
-END
-    $visibility="show" if $visibility eq "visible";
-    $html .= <<END;
-        document.write("<LAYER ID=\\"${key}l$layer\\" VISIBILITY=\\"$visibility\\">");
-      }
-      </SCRIPT>
+      <DIV ID="${key}d$layer" STYLE="$hidden">
 END
 
     #form fields
     $html .= <<END;
-      <FORM NAME="${key}$layer" ACTION="$form_action" METHOD=POST onSubmit="${key}fixup(this)">
+      <FORM NAME="${key}$layer" ACTION="$form_action" METHOD=POST onSubmit="${key}fixup(this)" STYLE="margin-top: 0; margin-bottom: 0">
 END
     foreach my $f ( @$form_text, @$form_checkbox, @$form_radio, @$form_select )
     {
@@ -179,18 +182,24 @@ END
     #end form & layer
     $html .= <<END
       </FORM>
-
+      </DIV>
       <SCRIPT>
-      if (document.getElementById) {
-        document.write("</DIV>");
-      } else {
-        document.write("</LAYER>");
-      }
+        if ( document.getElementById('${key}d$layer').offsetHeight > ${key}maxHeight )
+          ${key}maxHeight = document.getElementById('${key}d$layer').offsetHeight;
       </SCRIPT>
 END
 
   }
 
+  if ( $under_position eq 'absolute' ) {
+    $html .= <<END;
+      <SCRIPT>
+        //var max = ${key}maxHeight;
+        document.write("<DIV STYLE=\\\"position:relative; top: " + ${key}maxHeight + "px\\\">");
+      </SCRIPT>
+END
+  }
+
   $html;
 }
 
@@ -253,7 +262,7 @@ sub _select {
     <SELECT NAME=\"${key}select\" SIZE=$size onChange=\"${key}changed(this);\">
   ";
   foreach my $option ( keys %$options ) {
-    $html .= "<OPTION VALUE=\"$option\"";
+    $html .= qq(<OPTION VALUE="$option");
     $html .= ' SELECTED' if $option eq $selected;
     $html .= '>'. $options->{$option}. '</OPTION>';
   }
@@ -264,28 +273,33 @@ sub _changed {
   my $self = shift;
   my $key = exists($self->{unique_key}) ? $self->{unique_key} : '';
   my $options = $self->{options};
+  my $under_position = 
+    exists($self->{under_position}) ? $self->{under_position} : 'static';
+
   my $html = "
     <SCRIPT>
     var ${key}layer = null;
     function ${key}changed(what) {
       ${key}layer = what.options[what.selectedIndex].value;\n";
   foreach my $layer ( keys %$options ) {
-    $html .= "if (${key}layer == \"$layer\" ) {\n";
+    $html .= qq(  if (${key}layer == "$layer" ) {\n);
     foreach my $not ( grep { $_ ne $layer } keys %$options ) {
-      $html .= "
-        if (document.getElementById) {
-          document.getElementById('${key}d$not').style.visibility = \"hidden\";
-        } else {
-          document.${key}l$not.visibility = \"hidden\";
-        }\n";
-    }
-    $html .= "
-      if (document.getElementById) {
-        document.getElementById('${key}d$layer').style.visibility = \"visible\";
+      my $element_style = "document.getElementById('${key}d$not').style";
+      if ( $under_position eq 'absolute' ) {
+        $html .= qq(  $element_style.visibility = "hidden";\n);
       } else {
-        document.${key}l$layer.visibility = \"visible\";
+        $html .= qq(  $element_style.display = "none";\n);
       }
-    }\n";
+      $html .= qq(  $element_style.zIndex = 0;\n);
+    }
+    my $element_style = "document.getElementById('${key}d$layer').style";
+    if ( $under_position eq 'absolute' ) {
+      $html .= qq(  $element_style.visibility = "visible";\n);
+    } else {
+      $html .= qq(  $element_style.display = "";\n);
+    }
+    $html .= qq(  $element_style.zIndex = 1;\n);
+    $html .= "  }\n";
   }
   $html .= "}\n</SCRIPT>";
   $html;
@@ -296,14 +310,16 @@ sub _visualize {
   my $key = exists($self->{unique_key}) ? $self->{unique_key} : '';
   return '' unless exists($self->{selected_layer});
   my $selected = $self->{selected_layer};
+  my $under_position = 
+    exists($self->{under_position}) ? $self->{under_position} : 'static';
+  my $display = ( $under_position eq 'absolute' )
+                  ? 'visibility = "visible"'
+                  : 'display = ""';
   <<END;
 <SCRIPT>
 function ${key}visualize() {
-  if (document.getElementById) {
-    document.getElementById('${key}d$selected').style.visibility = "visible";
-  } else {
-    document.${key}l$selected.visibility = "visible";
-  }
+  document.getElementById('${key}d$selected').style.$display;
+  document.getElementById('${key}d$selected').style.zIndex = 1;
 }
 </SCRIPT>
 END
@@ -341,7 +357,7 @@ Ivan Kohler E<lt>ivan-selectlayers@420.amE<gt>
 
 =head1 COPYRIGHT
 
-Copyright (c) 2002 Ivan Kohler
+Copyright (c) 2002-2005 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.
@@ -350,6 +366,11 @@ the same terms as Perl itself.
 
 JavaScript
 
+All the different form_* options are unnecessary, could use .type to auto-sense
+
+Could give you a function or something for copying variables out of the
+layered forms.
+
 =head1 SEE ALSO
 
 L<perl>.  L<Tie::IxHash>, http://www.xs4all.nl/~ppk/js/dom.html,
diff --git a/homepage.pl b/homepage.pl
index 374ed1c..19c04de 100755
--- a/homepage.pl
+++ b/homepage.pl
@@ -14,7 +14,7 @@ tie my %o, 'Tie::IxHash',
 
 my %html = (
 
-  'download' => '<A HREF="HTML-Widgets-SelectLayers-0.04.tar.gz">Download HTML-Widgets-SelectLayers-0.04.tar.gz</a>',
+  'download' => '<A HREF="HTML-Widgets-SelectLayers-0.05.tar.gz">Download HTML-Widgets-SelectLayers-0.05.tar.gz</a>',
 
   'installation' => '<PRE>
   perl Makefile.PL
@@ -37,9 +37,9 @@ as well as <A HREF="http://www.420.am/cgi-bin/cvsweb/HTML-Widgets-SelectLayers">
 
 'compatibility' => '<PRE>
 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->1.4, Netscape 4.77, IE 5.5, Konqueror 2.2.2->3.1.5, and Opera 5.0.
+to be as cross-browser as possible.  The 0.05 release drops Navigator 4
+compatibility and has been tested under Mozilla Firefox 1.0.6, MSIE 6.0, 
+Konqueror 3.3.2, and Opera 8.0.2.
 </PRE>',
 
 );
@@ -66,7 +66,7 @@ print <<END, $w->html, "</BODY></HTML>\n";
 <PRE>
 HTML::Widgets::SelectLayers
 
-Copyright (c) 2002 Ivan Kohler
+Copyright (c) 2002-2005 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.
@@ -122,9 +122,9 @@ __DATA__
 is visible at any given time, controlled by a &lt;SELECT&gt; box.  For an
 example see <A HREF="http://www.420.am/selectlayers/">http://www.420.am/selectlayers/</A></P>
 <P>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.</P>
+to be as cross-browser as possible.  The 0.05 release drops Navigator 4
+compatibility and has been tested under Mozilla Firefox 1.0.6, MSIE 6.0, 
+Konqueror 3.3.2, and Opera 8.0.2.</P>
 <P>
 <HR>
 <H1><A NAME="forms">FORMS</A></H1>