httemplate/elements/pickcolor.html

   1 <INPUT TYPE="hidden" NAME="<% $opt{'field'} %>" ID="<%$id%>" VALUE="<%$value%>">
   2 <TABLE BGCOLOR="#FFFFFF" ID="showcolor<%$unum%>">
   3 <TR>
   4   <TD STYLE="border:1px solid blue;background-color:#<%$value%>" WIDTH=16 HEIGHT=16 ID="currcolor<%$unum%>"></TD>
   5   <TD> <A HREF="javascript:void(0);" onClick="change_clicked<%$unum%>()">change</A></TD>
   6 </TR>
   7 </TABLE>
   8 <TABLE BGCOLOR="#FFFFFF" ID="pickcolor<%$unum%>" STYLE="display:none">
   9 % for (1..$rows) {
  10   <TR>
  11 %   for (1..$cols) {
  12 %     last unless @colors;
  13 %     my $color = shift(@colors);
  14       <TD STYLE="border:1px solid blue;cursor:pointer;cursor:hand" BGCOLOR="#<% $color %>" WIDTH=16 HEIGHT=16 onClick="color_clicked<%$unum%>('<%$color%>')"></TD>
  15 %   }
  16   </TR>
  17 % }
  18 </TABLE>
  19 <SCRIPT TYPE="text/javascript">
  20
  21   function change_clicked<%$unum%>() {
  22     document.getElementById('showcolor<%$unum%>').style.display = 'none';
  23     document.getElementById('pickcolor<%$unum%>').style.display = '';
  24   }
  25
  26   function color_clicked<%$unum%>(color) {
  27     document.getElementById('<%$id%>').value = color; //update hidden
  28     if ( color == '' ) { color = 'ffffff'; }
  29     document.getElementById('currcolor<%$unum%>').style.backgroundColor = '#' + color;
  30     document.getElementById('showcolor<%$unum%>').style.display = '';
  31     document.getElementById('pickcolor<%$unum%>').style.display = 'none';
  32   }
  33
  34 </SCRIPT>
  35 <%init>
  36
  37 my %opt = @_;
  38
  39 my $value = length($opt{curr_value}) ? $opt{curr_value} : $opt{value};
  40
  41 my $unum = int(rand(100000));
  42
  43 my $id = $opt{'id'} || $opt{'field'}.$unum;
  44
  45 my @colors = (
  46   '', #none/white
  47   'FF6666', #red
  48   'FF9966', #orange
  49   'FFFF66', #yellow
  50   '66FF66', #green
  51   '66FFFF', #cyan?
  52   '6666FF', #blue
  53   'CC66FF', #purple?  FF66FF looks more like pink.
  54 );
  55
  56 my $rows = 2;
  57
  58 my $cols = int(.5+scalar(@colors)/$rows);
  59
  60 </%init>