httemplate/search/elements/checkbox-foot.html

   1 <%doc>
   2 <& /elements/search.html,
   3   # options...
   4   html_foot => include('elements/checkbox-foot.html',
   5                   actions => [
   6                     { label   => 'Edit selected packages',
   7                       action  => 'popup_package_edit()',
   8                     },
   9                     { submit  => 'Delete selected packages',
  10                       confirm => 'Really delete these packages?'
  11                     },
  12                   ],
  13                   filter        => '.name = "pkgpart"', # see below
  14                ),
  15 &>
  16
  17 This creates a footer for a search page containing a column of checkboxes.
  18 Typically this is used to select several items from the search result and
  19 apply some change to all of them at once.  The footer always provides
  20 "select all" and "unselect all" buttons.
  21
  22 "actions" is an arrayref of action buttons to show.  Each element of the
  23 array is a hashref of either:
  24
  25 - "submit" and, optionally, "confirm".  Creates a submit button.  The value
  26 of "submit" becomes the "value" property of the button (and thus its label).
  27 If "confirm" is specified, the button will have an onclick handler that
  28 displays the value of "confirm" in a popup message box and asks the user to
  29 confirm the choice.  The hashref may also have a "name" property, which
  30 sets the name of the submit button.
  31
  32 - "onclick" and "label".  Creates a non-submit button that executes the
  33 Javascript code in "onclick".  "label" is used as the text of the button.
  34
  35 If you want only a single action, you can forget the arrayref-of-hashrefs
  36 business and just put "submit" and "confirm" (or "onclick" and "label")
  37 elements in the argument list.
  38
  39 "filter" is a javascript expression to limit which checkboxes are included in
  40 the "select/unselect all" actions.  By default, any input with type="checkbox"
  41 will be included.  If this option is given, it will be evaluated with the
  42 HTML node in a variable named "obj".  The expression should return true or
  43 false.
  44
  45 </%doc>
  46 <DIV ID="checkbox_footer" STYLE="display:block">
  47 <INPUT TYPE="button" VALUE="<% emt('select all') %>" onclick="setAll(true)">
  48 <INPUT TYPE="button" VALUE="<% emt('unselect all') %>" onclick="setAll(false)">
  49 <BR>
  50 % foreach my $action (@$actions) {
  51 %   if ( $action->{onclick} ) {
  52 <INPUT TYPE="button" <% $action->{name} %> onclick="<% $opt{onclick} %>"\
  53   VALUE="<% $action->{label} |h%>">
  54 %   } elsif ( $action->{submit} ) {
  55 <INPUT TYPE="submit" <% $action->{name} %> <% $action->{confirm} %>\
  56   VALUE="<% $action->{submit} |h%>">
  57 %   } # else do nothing
  58 % } #foreach
  59 </DIV>
  60 <SCRIPT>
  61 var checkboxes = [];
  62 var inputs = document.getElementsByTagName('input');
  63 for (var i = 0; i < inputs.length; i++) {
  64   var obj = inputs[i];
  65   if ( obj.type == "checkbox" && <% $filter %> ) {
  66     checkboxes.push(obj);
  67   }
  68 }
  69 %# avoid the need for "$areboxes" late-evaluation hackery
  70 if ( checkboxes.length == 0 ) {
  71   document.getElementById('checkbox_footer').style.display = 'none';
  72 }
  73 function setAll(setTo) {
  74   for (var i = 0; i < checkboxes.length; i++) {
  75     checkboxes[i].checked = setTo;
  76   }
  77 }
  78 </SCRIPT>
  79 <%init>
  80 my %opt = @_;
  81 my $actions = $opt{'actions'} || [ \%opt ];
  82 foreach (@$actions) {
  83   $_->{confirm} &&= qq!onclick="return confirm('! . $_->{confirm} . qq!')"!;
  84   $_->{name} &&= qq!NAME="! . $_->{name} . qq!"!;
  85 }
  86 my $filter = $opt{filter} || 'true';
  87 </%init>