mirror of
https://github.com/webmin/webmin.git
synced 2026-09-15 18:10:39 +01:00
6051 lines
188 KiB
Prolog
Executable File
6051 lines
188 KiB
Prolog
Executable File
use vars qw($theme_no_table $ui_radio_selector_donejs $module_name
|
|
$ui_multi_select_donejs, $ui_formcount,
|
|
$ui_form_end_side_by_side_donecss,
|
|
$ui_form_grouped_buttons_donecss);
|
|
|
|
=head1 ui-lib.pl
|
|
|
|
Common functions for generating HTML for Webmin user interface elements.
|
|
Some example code :
|
|
|
|
use WebminCore;
|
|
init_config();
|
|
ui_print_header(undef, 'My Module', '');
|
|
|
|
print ui_form_start('save.cgi');
|
|
print ui_table_start('My form', undef, 2);
|
|
|
|
print ui_table_row('Enter your name',
|
|
ui_textbox('name', undef, 40));
|
|
|
|
print ui_table_end();
|
|
print ui_form_end([ [ undef, 'Save' ] ]);
|
|
|
|
ui_print_footer('/', 'Webmin index');
|
|
|
|
=cut
|
|
|
|
####################### utility functions
|
|
|
|
=head2 ui_link(href, text, [class], [tags])
|
|
|
|
Returns HTML for an <a href>.
|
|
|
|
=item href - Link
|
|
|
|
=item text - Text to display for link
|
|
|
|
=item class - Optional additional CSS classes to include
|
|
|
|
=item tags - Additional HTML attributes for the <a> tag.
|
|
|
|
=cut
|
|
|
|
sub ui_link
|
|
{
|
|
return &theme_ui_link(@_) if (defined(&theme_ui_link));
|
|
my ($href, $text, $class, $tags) = @_;
|
|
return ("<a class='ui_link".($class ? " ".$class : "")."' href='$href'".($tags ? " ".$tags : "").">$text</a>");
|
|
}
|
|
|
|
=head2 ui_help(title)
|
|
|
|
Returns HTML for help tooltip bubble
|
|
|
|
=item title - help tooltip title
|
|
|
|
=cut
|
|
|
|
sub ui_help
|
|
{
|
|
return &theme_ui_help(@_) if (defined(&theme_ui_help));
|
|
my ($title) = @_;
|
|
$title = &html_escape(&html_strip($title));
|
|
return ("<sup class=\"ui_help\" aria-label=\"$title\" data-tooltip><samp>?</samp></sup>");
|
|
}
|
|
|
|
=head2 ui_img(src, alt, title, [class], [tags])
|
|
|
|
Returns HTML for an <img src>.
|
|
|
|
=item src - Image path and filename
|
|
|
|
=item alt - Alt text for screen readers, etc.
|
|
|
|
=item title - Element title, and tooltip when user hovers over image
|
|
|
|
=item class - Optional additional CSS classes to include
|
|
|
|
=item tags - Additional HTML attributes for the <img> tag
|
|
|
|
=cut
|
|
|
|
sub ui_img
|
|
{
|
|
return &theme_ui_img(@_) if (defined(&theme_ui_img));
|
|
my ($src, $alt, $title, $class, $tags) = @_;
|
|
my $esrc = "e_escape($src);
|
|
my $ealt = "e_escape($alt);
|
|
my $etitle = "e_escape($title);
|
|
return ("<img src='".$esrc."' class='ui_img".($class ? " ".$class : "")."' alt='$ealt' ".($title ne '' ? "title='$etitle'" : "").($tags ? " ".$tags : "").">");
|
|
}
|
|
|
|
=head2 ui_link_button(href, text, [target], [tags])
|
|
|
|
Returns HTML for a button, which opens a URL when clicked. The parameters are :
|
|
|
|
=item href - Link URL
|
|
|
|
=item text - Text to display on the button
|
|
|
|
=item target - Window name to open the link in
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=cut
|
|
|
|
sub ui_link_button
|
|
{
|
|
return &theme_ui_link_button(@_) if (defined(&theme_ui_link_button));
|
|
my ($href, $label, $target, $tags) = @_;
|
|
$target ||= "_self";
|
|
return &ui_button($label, undef, 0,
|
|
"onClick='window.open(\""."e_javascript($href)."\", \"$target\")' ".
|
|
$tags);
|
|
}
|
|
|
|
####################### table generation functions
|
|
|
|
=head2 ui_table_start(heading, [tabletags], [cols], [&default-tds], [right-heading])
|
|
|
|
Returns HTML for the start of a form block into which labelled inputs can
|
|
be placed. By default this is implemented as a table with another table inside
|
|
it, but themes may override this with their own layout.
|
|
|
|
The parameters are :
|
|
|
|
=item heading - Text to show at the top of the form.
|
|
|
|
=item tabletags - HTML attributes to put in the outer <table>, typically something like width=100%.
|
|
|
|
=item cols - Desired number of columns for labels and fields. Defaults to 4, but can be 2 for forms with lots of wide inputs.
|
|
|
|
=item default-tds - An optional array reference of HTML attributes for the <td> tags in each row of the table.
|
|
|
|
=item right-heading - HTML to appear in the heading, aligned to the right.
|
|
|
|
=cut
|
|
sub ui_table_start
|
|
{
|
|
return &theme_ui_table_start(@_) if (defined(&theme_ui_table_start));
|
|
my ($heading, $tabletags, $cols, $tds, $rightheading) = @_;
|
|
if (defined($main::ui_table_cols)) {
|
|
# Push on stack, for nested call
|
|
push(@main::ui_table_cols_stack, $main::ui_table_cols);
|
|
push(@main::ui_table_pos_stack, $main::ui_table_pos);
|
|
push(@main::ui_table_default_tds_stack, $main::ui_table_default_tds);
|
|
}
|
|
my $colspan = 1;
|
|
my $rv;
|
|
$rv .= "<table class='ui_table' border $tabletags>\n";
|
|
if (defined($heading) || defined($rightheading)) {
|
|
$rv .= "<tr".($tb ? " ".$tb : "")." class='ui_table_head'>";
|
|
if (defined($heading)) {
|
|
$rv .= "<td><b>$heading</b></td>"
|
|
}
|
|
if (defined($rightheading)) {
|
|
$rv .= "<td align='right'>$rightheading</td>";
|
|
$colspan++;
|
|
}
|
|
$rv .= "</tr>\n";
|
|
}
|
|
$rv .= "<tr".($cb ? " ".$cb : "")." class='ui_table_body'> <td colspan='$colspan'>".
|
|
"<table width='100%'>\n";
|
|
$main::ui_table_cols = $cols || 4;
|
|
$main::ui_table_pos = 0;
|
|
$main::ui_table_default_tds = $tds;
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_table_end
|
|
|
|
Returns HTML for the end of a block started by ui_table_start.
|
|
|
|
=cut
|
|
sub ui_table_end
|
|
{
|
|
return &theme_ui_table_end(@_) if (defined(&theme_ui_table_end));
|
|
my $rv;
|
|
if ($main::ui_table_cols == 4 && $main::ui_table_pos) {
|
|
# Add an empty block to balance the table
|
|
$rv .= &ui_table_row(" ", " ");
|
|
}
|
|
if (@main::ui_table_cols_stack) {
|
|
$main::ui_table_cols = pop(@main::ui_table_cols_stack);
|
|
$main::ui_table_pos = pop(@main::ui_table_pos_stack);
|
|
$main::ui_table_default_tds = pop(@main::ui_table_default_tds_stack);
|
|
}
|
|
else {
|
|
$main::ui_table_cols = undef;
|
|
$main::ui_table_pos = undef;
|
|
$main::ui_table_default_tds = undef;
|
|
}
|
|
$rv .= "</table></td></tr></table>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_table_row(label, value, [cols], [&td-tags], [&tr-tags])
|
|
|
|
Returns HTML for a row in a table started by ui_table_start, with a 1-column
|
|
label and 1+ column value. The parameters are :
|
|
|
|
=item label - Label for the input field. If this is undef, no label is displayed.
|
|
|
|
=item value - HTML for the input part of the row.
|
|
|
|
=item cols - Number of columns the value should take up, defaulting to 1.
|
|
|
|
=item td-tags - Array reference of HTML attributes for the <td> tags in this row.
|
|
|
|
=item tr-tags - Array reference of HTML attributes and class names for the <tr> tag.
|
|
|
|
=cut
|
|
sub ui_table_row
|
|
{
|
|
return &theme_ui_table_row(@_) if (defined(&theme_ui_table_row));
|
|
my ($label, $value, $cols, $tds, $trs) = @_;
|
|
$cols ||= 1;
|
|
$tds ||= $main::ui_table_default_tds;
|
|
my $rv;
|
|
if ($main::ui_table_pos+$cols+1 > $main::ui_table_cols &&
|
|
$main::ui_table_pos != 0) {
|
|
# If the requested number of cols won't fit in the number
|
|
# remaining, start a new row
|
|
my $leftover = $main::ui_table_cols - $main::ui_table_pos;
|
|
$rv .= "<td colspan='$leftover'></td>\n";
|
|
$rv .= "</tr>\n";
|
|
$main::ui_table_pos = 0;
|
|
}
|
|
my $trtags_attrs = ref($trs) eq 'ARRAY' && $trs->[0] ? " $trs->[0]" : "";
|
|
my $trtags_class = ref($trs) eq 'ARRAY' && $trs->[1] ? " $trs->[1]" : "";
|
|
$rv .= "<tr class='ui_table_row$trtags_class'$trtags_attrs>\n"
|
|
if ($main::ui_table_pos%$main::ui_table_cols == 0);
|
|
if (defined($label) &&
|
|
($value =~ /id="([^"]+)"/ || $value =~ /id='([^']+)'/ ||
|
|
$value =~ /id=([^>\s]+)/)) {
|
|
# Value contains an input with an ID
|
|
my $id = $1;
|
|
$label = "<label for=\""."e_escape($id)."\">$label</label>";
|
|
}
|
|
$rv .= "<td valign='top' $tds->[0] class='ui_label'><b>$label</b></td>\n"
|
|
if (defined($label));
|
|
$rv .= "<td valign='top' colspan='$cols' $tds->[1] class='ui_value'>$value</td>\n";
|
|
$main::ui_table_pos += $cols+(defined($label) ? 1 : 0);
|
|
if ($main::ui_table_pos%$main::ui_table_cols == 0) {
|
|
$rv .= "</tr>\n";
|
|
$main::ui_table_pos = 0;
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_table_hr
|
|
|
|
Returns HTML for a row in a block started by ui_table_row, with a horizontal
|
|
line inside it to separate sections.
|
|
|
|
=cut
|
|
sub ui_table_hr
|
|
{
|
|
return &theme_ui_table_hr(@_) if (defined(&theme_ui_table_hr));
|
|
my $rv;
|
|
if ($ui_table_pos) {
|
|
$rv .= "</tr>\n";
|
|
$ui_table_pos = 0;
|
|
}
|
|
$rv .= "<tr class='ui_table_hr'> ".
|
|
"<td colspan='$main::ui_table_cols'><hr></td> </tr>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_table_span(text)
|
|
|
|
Outputs a table row that spans the whole table, and contains the given text.
|
|
|
|
=cut
|
|
sub ui_table_span
|
|
{
|
|
my ($text) = @_;
|
|
return &theme_ui_table_span(@_) if (defined(&theme_ui_table_span));
|
|
my $rv;
|
|
if ($ui_table_pos) {
|
|
$rv .= "</tr>\n";
|
|
$ui_table_pos = 0;
|
|
}
|
|
$rv .= "<tr class='ui_table_span'> ".
|
|
"<td colspan='$main::ui_table_cols'>$text</td> </tr>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_columns_start(&headings, [width-percent], [noborder], [&tdtags], [heading], [sortable], [class])
|
|
|
|
Returns HTML for the start of a multi-column table, with the given headings.
|
|
The parameters are :
|
|
|
|
=item headings - An array reference of headers for the table's columns.
|
|
|
|
=item width-percent - Desired width as a percentage, or undef to let the browser decide.
|
|
|
|
=item noborder - Set to 1 if the table should not have a border.
|
|
|
|
=item tdtags - An optional reference to an array of HTML attributes for the table's <td> tags.
|
|
|
|
=item heading - An optional heading to put above the table.
|
|
|
|
=item sortable - Set to 1 to ask the theme for client-side sorting and searching of this table, such as with DataTables in the Authentic theme. The table is marked with a data-sortable attribute. A module can instead request this for all tables on its pages with sortable=1 in module.info.
|
|
|
|
=item class - Extra CSS class names for the table, such as a theme's no-hover for a table whose rows are inputs.
|
|
|
|
=cut
|
|
sub ui_columns_start
|
|
{
|
|
return &theme_ui_columns_start(@_) if (defined(&theme_ui_columns_start));
|
|
my ($heads, $width, $noborder, $tdtags, $title, $sortable, $class) = @_;
|
|
my $rv;
|
|
$rv .= "<table".($noborder ? "" : " border").
|
|
(defined($width) ? " width='$width%'" : "").
|
|
" class='ui_columns".($class ? " ".$class : "")."'".
|
|
($sortable ? " data-sortable='1'" : "").">\n";
|
|
if ($title) {
|
|
$rv .= "<tr".($tb ? " ".$tb : "")." class='ui_columns_heading'>".
|
|
"<td colspan='".scalar(@$heads)."'><b>$title</b></td></tr>\n";
|
|
}
|
|
$rv .= "<tr".($tb ? " ".$tb : "")." class='ui_columns_heads'>\n";
|
|
my $i;
|
|
for($i=0; $i<@$heads; $i++) {
|
|
$rv .= "<td ".$tdtags->[$i]."><b>".
|
|
($heads->[$i] eq "" ? "<br>" : $heads->[$i])."</b></td>\n";
|
|
}
|
|
$rv .= "</tr>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_columns_row(&columns, &tdtags)
|
|
|
|
Returns HTML for a row in a multi-column table. The parameters are :
|
|
|
|
=item columns - Reference to an array containing the HTML to show in the columns for this row.
|
|
|
|
=item tdtags - An optional array reference containing HTML attributes for the row's <td> tags.
|
|
|
|
=cut
|
|
sub ui_columns_row
|
|
{
|
|
return &theme_ui_columns_row(@_) if (defined(&theme_ui_columns_row));
|
|
my ($cols, $tdtags) = @_;
|
|
my $rv;
|
|
$rv .= "<tr".($cb ? " ".$cb : "")." class='ui_columns_row'>\n";
|
|
my $i;
|
|
for($i=0; $i<@$cols; $i++) {
|
|
$rv .= "<td ".$tdtags->[$i].">".
|
|
($cols->[$i] !~ /\S/ ? "<br>" : $cols->[$i])."</td>\n";
|
|
}
|
|
$rv .= "</tr>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_columns_header(&columns, &tdtags)
|
|
|
|
Returns HTML for a row in a multi-column table, styled as a header. Parameters
|
|
are the same as ui_columns_row.
|
|
|
|
=cut
|
|
sub ui_columns_header
|
|
{
|
|
return &theme_ui_columns_header(@_) if (defined(&theme_ui_columns_header));
|
|
my ($cols, $tdtags) = @_;
|
|
my $rv;
|
|
$rv .= "<tr".($tb ? " ".$tb : "")." class='ui_columns_header'>\n";
|
|
my $i;
|
|
for($i=0; $i<@$cols; $i++) {
|
|
$rv .= "<td ".$tdtags->[$i]."><b>".
|
|
($cols->[$i] eq "" ? "<br>" : $cols->[$i])."</b></td>\n";
|
|
}
|
|
$rv .= "</tr>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_checked_columns_row(&columns, &tdtags, checkname, checkvalue, [checked?], [disabled], [tags])
|
|
|
|
Returns HTML for a row in a multi-column table, in which the first column
|
|
contains a checkbox. The parameters are :
|
|
|
|
=item columns - Reference to an array containing the HTML to show in the columns for this row.
|
|
|
|
=item tdtags - An optional array reference containing HTML attributes for the row's <td> tags.
|
|
|
|
=item checkname - Name for the checkbox input. Should be the same for all rows.
|
|
|
|
=item checkvalue - Value for this checkbox input.
|
|
|
|
=item checked - Set to 1 if it should be checked by default.
|
|
|
|
=item disabled - Set to 1 if the checkbox should be disabled and thus un-clickable.
|
|
|
|
=item tags - Extra HTML tags to include in the radio button.
|
|
|
|
=cut
|
|
sub ui_checked_columns_row
|
|
{
|
|
return &theme_ui_checked_columns_row(@_) if (defined(&theme_ui_checked_columns_row));
|
|
my ($cols, $tdtags, $checkname, $checkvalue, $checked, $disabled, $tags) = @_;
|
|
my $rv;
|
|
$rv .= "<tr".($cb ? " ".$cb : "")." class='ui_checked_columns'>\n";
|
|
$rv .= "<td class='ui_checked_checkbox' ".$tdtags->[0].">".
|
|
&ui_checkbox($checkname, $checkvalue, undef, $checked, $tags, $disabled).
|
|
"</td>\n";
|
|
my $i;
|
|
for($i=0; $i<@$cols; $i++) {
|
|
$rv .= "<td ".$tdtags->[$i+1].">";
|
|
if ($cols->[$i] !~ /<a\s+href|<input|<select|<textarea/) {
|
|
$rv .= "<label for=\"".
|
|
"e_escape("${checkname}_${checkvalue}")."\">";
|
|
}
|
|
$rv .= ($cols->[$i] !~ /\S/ ? "<br>" : $cols->[$i]);
|
|
if ($cols->[$i] !~ /<a\s+href|<input|<select|<textarea/) {
|
|
$rv .= "</label>";
|
|
}
|
|
$rv .= "</td>\n";
|
|
}
|
|
$rv .= "</tr>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_radio_columns_row(&columns, &tdtags, checkname, checkvalue, [checked], [disabled], [tags])
|
|
|
|
Returns HTML for a row in a multi-column table, in which the first
|
|
column is a radio button. The parameters are :
|
|
|
|
=item columns - Reference to an array containing the HTML to show in the columns for this row.
|
|
|
|
=item tdtags - An optional array reference containing HTML attributes for the row's <td> tags.
|
|
|
|
=item checkname - Name for the radio button input. Should be the same for all rows.
|
|
|
|
=item checkvalue - Value for this radio button option.
|
|
|
|
=item checked - Set to 1 if it should be checked by default.
|
|
|
|
=item disabled - Set to 1 if the radio button should be disabled and thus un-clickable.
|
|
|
|
=item tags - Extra HTML tags to include in the radio button.
|
|
|
|
=cut
|
|
sub ui_radio_columns_row
|
|
{
|
|
return &theme_ui_radio_columns_row(@_) if (defined(&theme_ui_radio_columns_row));
|
|
my ($cols, $tdtags, $checkname, $checkvalue, $checked, $dis, $tags) = @_;
|
|
my $rv;
|
|
$rv .= "<tr".($cb ? " ".$cb : "")." class='ui_radio_columns'>\n";
|
|
$rv .= "<td class='ui_radio_radio' ".$tdtags->[0].">".
|
|
&ui_oneradio($checkname, $checkvalue, "", $checked, undef, $dis)."</td>\n";
|
|
my $i;
|
|
for($i=0; $i<@$cols; $i++) {
|
|
$rv .= "<td ".$tdtags->[$i+1].">";
|
|
if ($cols->[$i] !~ /<a\s+href|<input|<select|<textarea/) {
|
|
$rv .= "<label for=\"".
|
|
"e_escape("${checkname}_${checkvalue}")."\">";
|
|
}
|
|
$rv .= ($cols->[$i] !~ /\S/ ? "<br>" : $cols->[$i]);
|
|
if ($cols->[$i] !~ /<a\s+href|<input|<select|<textarea/) {
|
|
$rv .= "</label>";
|
|
}
|
|
$rv .= "</td>\n";
|
|
}
|
|
$rv .= "</tr>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_columns_end
|
|
|
|
Returns HTML to end a table started by ui_columns_start.
|
|
|
|
=cut
|
|
sub ui_columns_end
|
|
{
|
|
return &theme_ui_columns_end(@_) if (defined(&theme_ui_columns_end));
|
|
return "</table>\n";
|
|
}
|
|
|
|
=head2 ui_columns_table(&headings, width-percent, &data, &types, no-sort, title, empty-msg, [sortable])
|
|
|
|
Returns HTML for a complete table, typically generated internally by
|
|
ui_columns_start, ui_columns_row and ui_columns_end. The parameters are :
|
|
|
|
=item headings - An array ref of heading HTML.
|
|
|
|
=item width-percent - Preferred total width
|
|
|
|
=item data - A 2x2 array ref of table contents. Each can either be a simple string, or a hash ref like :
|
|
|
|
{ 'type' => 'group', 'desc' => 'Some section title' }
|
|
{ 'type' => 'string', 'value' => 'Foo', 'colums' => 3,
|
|
'nowrap' => 1 }
|
|
{ 'type' => 'checkbox', 'name' => 'd', 'value' => 'foo',
|
|
'label' => 'Yes', 'checked' => 1, 'disabled' => 1 }
|
|
{ 'type' => 'radio', 'name' => 'd', 'value' => 'foo', ... }
|
|
|
|
=item types - An array ref of data types, such as 'string', 'number', 'bytes' or 'date'
|
|
|
|
=item no-sort - Set to 1 to disable sorting by theme.
|
|
|
|
=item title - Text to appear above the table.
|
|
|
|
=item empty-msg - Message to display if no data.
|
|
|
|
=item sortable - Set to 1 to ask the theme for client-side sorting and searching, as for ui_columns_start.
|
|
|
|
=cut
|
|
sub ui_columns_table
|
|
{
|
|
return &theme_ui_columns_table(@_) if (defined(&theme_ui_columns_table));
|
|
my ($heads, $width, $data, $types, $nosort, $title, $emptymsg, $sortable) = @_;
|
|
my $rv;
|
|
|
|
# Just show empty message if no data
|
|
if ($emptymsg && !@$data) {
|
|
$rv .= &ui_subheading($title) if ($title);
|
|
$rv .= "<span class='ui_emptymsg'><b>$emptymsg</b></span><p>\n";
|
|
return $rv;
|
|
}
|
|
|
|
# Are there any checkboxes in each column? If so, make those columns narrow
|
|
my @tds = map { "valign='top'" } @$heads;
|
|
my $maxwidth = 0;
|
|
foreach my $r (@$data) {
|
|
my $cc = 0;
|
|
foreach my $c (@$r) {
|
|
if (ref($c) &&
|
|
($c->{'type'} eq 'checkbox' || $c->{'type'} eq 'radio')) {
|
|
$tds[$cc] .= " width='5'" if ($tds[$cc] !~ /width=/);
|
|
}
|
|
$cc++;
|
|
}
|
|
$maxwidth = $cc if ($cc > $maxwidth);
|
|
}
|
|
$rv .= &ui_columns_start($heads, $width, 0, \@tds, $title, $sortable);
|
|
|
|
# Add the data rows
|
|
foreach my $r (@$data) {
|
|
my $c0;
|
|
if (ref($r->[0]) && ($r->[0]->{'type'} eq 'checkbox' ||
|
|
$r->[0]->{'type'} eq 'radio')) {
|
|
# First column is special
|
|
$c0 = $r->[0];
|
|
$r = [ @$r[1..(@$r-1)] ];
|
|
}
|
|
# Turn data into HTML
|
|
my @rtds = @tds;
|
|
my @cols;
|
|
my $cn = 0;
|
|
$cn++ if ($c0);
|
|
foreach my $c (@$r) {
|
|
if (!ref($c)) {
|
|
# Plain old string
|
|
push(@cols, $c);
|
|
}
|
|
elsif ($c->{'type'} eq 'checkbox') {
|
|
# Checkbox in non-first column
|
|
push(@cols, &ui_checkbox($c->{'name'}, $c->{'value'},
|
|
$c->{'label'}, $c->{'checked'},
|
|
$c->{'tags'},
|
|
$c->{'disabled'}));
|
|
}
|
|
elsif ($c->{'type'} eq 'radio') {
|
|
# Radio button in non-first column
|
|
push(@cols, &ui_oneradio($c->{'name'}, $c->{'value'},
|
|
$c->{'label'}, $c->{'checked'},
|
|
$c->{'tags'},
|
|
$c->{'disabled'}));
|
|
}
|
|
elsif ($c->{'type'} eq 'group') {
|
|
# Header row that spans whole table
|
|
$rv .= &ui_columns_header([ $c->{'desc'} ],
|
|
[ "colspan=$width" ]);
|
|
next;
|
|
}
|
|
elsif ($c->{'type'} eq 'string') {
|
|
# A string, which might be special
|
|
push(@cols, $c->{'value'});
|
|
if ($c->{'columns'} > 1) {
|
|
splice(@rtds, $cn, $c->{'columns'},
|
|
"colspan=".$c->{'columns'});
|
|
}
|
|
if ($c->{'nowrap'}) {
|
|
$rtds[$cn] .= " nowrap";
|
|
}
|
|
$rtds[$cn] .= " ".$c->{'td'} if ($c->{'td'});
|
|
}
|
|
$cn++;
|
|
}
|
|
# Add the row
|
|
if (!$c0) {
|
|
$rv .= &ui_columns_row(\@cols, \@rtds);
|
|
}
|
|
elsif ($c0->{'type'} eq 'checkbox') {
|
|
$rv .= &ui_checked_columns_row(\@cols, \@rtds, $c0->{'name'},
|
|
$c0->{'value'}, $c0->{'checked'},
|
|
$c0->{'disabled'},
|
|
$c0->{'tags'});
|
|
}
|
|
elsif ($c0->{'type'} eq 'radio') {
|
|
$rv .= &ui_radio_columns_row(\@cols, \@rtds, $c0->{'name'},
|
|
$c0->{'value'}, $c0->{'checked'},
|
|
$c0->{'disabled'},
|
|
$c0->{'tags'});
|
|
}
|
|
}
|
|
|
|
$rv .= &ui_columns_end();
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_form_columns_table(cgi, &buttons, select-all, &otherlinks, &hiddens, &headings, width-percent, &data, &types, no-sort, title, empty-msg, form-no, [sortable])
|
|
|
|
Similar to ui_columns_table, but wrapped in a form. Parameters are :
|
|
|
|
=item cgi - URL to submit the form to.
|
|
|
|
=item buttons - An array ref of buttons at the end of the form, similar to that taken by ui_form_end.
|
|
|
|
=item select-all - If set to 1, include select all / invert links.
|
|
|
|
=item otherslinks - An array ref of other links to put at the top of the table, each of which is a 3-element hash ref of url, text and alignment (left or right).
|
|
|
|
=item hiddens - An array ref of hidden fields, each of which is a 2-element array ref containing the name and value.
|
|
|
|
=item formno - Index of this form on the page. Defaults to 0, but should be set if there is more than one form on the page.
|
|
|
|
=item sortable - If set to 1, the table is marked for client-side sorting and searching by themes that support it, as for ui_columns_table.
|
|
|
|
All other parameters are the same as ui_columns_table.
|
|
|
|
=cut
|
|
sub ui_form_columns_table
|
|
{
|
|
return &theme_ui_form_columns_table(@_)
|
|
if (defined(&theme_ui_form_columns_table));
|
|
my ($cgi, $buttons, $selectall, $others, $hiddens,
|
|
$heads, $width, $data, $types, $nosort, $title, $emptymsg, $formno,
|
|
$sortable) = @_;
|
|
my $rv;
|
|
|
|
# Build links
|
|
my @leftlinks = map { "<a href='$_->[0]'>$_->[1]</a>" }
|
|
grep { $_->[2] ne 'right' } @$others;
|
|
my @rightlinks = map { "<a href='$_->[0]'>$_->[1]</a>" }
|
|
grep { $_->[2] eq 'right' } @$others;
|
|
my $links;
|
|
|
|
# Add select links
|
|
if (@$data) {
|
|
if ($selectall) {
|
|
my $cbname;
|
|
foreach my $r (@$data) {
|
|
foreach my $c (@$r) {
|
|
if (ref($c) && $c->{'type'} eq 'checkbox') {
|
|
$cbname = $c->{'name'};
|
|
last;
|
|
}
|
|
}
|
|
}
|
|
if ($cbname) {
|
|
unshift(@leftlinks, &select_all_link($cbname, $formno),
|
|
&select_invert_link($cbname, $formno));
|
|
}
|
|
}
|
|
}
|
|
|
|
# Turn to HTML
|
|
if (@rightlinks) {
|
|
$links = &ui_grid_table([ &ui_links_row(\@leftlinks),
|
|
&ui_links_row(\@rightlinks) ], 2, 100,
|
|
[ undef, "align='right'" ]);
|
|
}
|
|
elsif (@leftlinks) {
|
|
$links = &ui_links_row(\@leftlinks);
|
|
}
|
|
|
|
# Start the form, if we need one
|
|
if (@$data) {
|
|
$rv .= &ui_form_start($cgi, "post");
|
|
foreach my $h (@$hiddens) {
|
|
$rv .= &ui_hidden(@$h);
|
|
}
|
|
$rv .= $links;
|
|
}
|
|
|
|
# Add the table
|
|
$rv .= &ui_columns_table($heads, $width, $data, $types, $nosort, $title,
|
|
$emptymsg, $sortable);
|
|
|
|
# Add the bottom links unless excluded
|
|
if ($selectall != 2) {
|
|
$rv .= $links;
|
|
}
|
|
|
|
# Add form end
|
|
if (@$data) {
|
|
$rv .= &ui_form_end($buttons);
|
|
}
|
|
|
|
return $rv;
|
|
}
|
|
|
|
####################### form generation functions
|
|
|
|
=head2 ui_form_elements_wrapper(formdata, formid, [class], [tags])
|
|
|
|
HTML5 allows to have form elements to be placed outside of an actual
|
|
form to provide support for nested forms. The requirement is to have
|
|
`id` attribute set on the form and `form` attribute to be set on each
|
|
element referencing the given form. This is the wrapper for such form
|
|
elements.
|
|
|
|
=cut
|
|
sub ui_form_elements_wrapper
|
|
{
|
|
return &theme_ui_form_elements_wrapper(@_) if (defined(&theme_ui_form_elements_wrapper));
|
|
my ($formdata, $formid, $class, $tags) = @_;
|
|
return "<div class='ui_form_elements_wrapper".
|
|
($class ? " $class" : "")."'".
|
|
($tags ? " ".$tags : "").">$formdata</div>"
|
|
}
|
|
|
|
=head2 ui_form_start(script, method, [target], [tags])
|
|
|
|
Returns HTML for the start of a a form that submits to some script. The
|
|
parameters are :
|
|
|
|
=item script - CGI script to submit to, like save.cgi.
|
|
|
|
=item method - HTTP method, which must be one of 'get', 'post' or 'form-data'. If form-data is used, the target CGI must call ReadParseMime to parse parameters.
|
|
|
|
=item target - Optional target window or frame for the form.
|
|
|
|
=item tags - Additional HTML attributes for the form tag.
|
|
|
|
=cut
|
|
sub ui_form_start
|
|
{
|
|
$ui_formcount ||= 0;
|
|
return &theme_ui_form_start(@_) if (defined(&theme_ui_form_start));
|
|
my ($script, $method, $target, $tags) = @_;
|
|
my $rv;
|
|
$rv .= "<form class='ui_form' action='".&html_escape($script)."' ".
|
|
($method eq "post" ? "method='post'" :
|
|
$method eq "form-data" ?
|
|
"method='post' enctype='multipart/form-data'" :
|
|
"method='get'").
|
|
($target ? " target='$target'" : "").
|
|
($tags ? " ".$tags : "").">\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_form_end([&buttons], [width], [nojs])
|
|
|
|
Returns HTML for the end of a form, optionally with a row of submit buttons.
|
|
These are specified by the buttons parameter, which is an array reference
|
|
of array refs, with the following elements :
|
|
|
|
=item HTML value for the submit input for the button, or undef for none.
|
|
|
|
=item Text to appear on the button.
|
|
|
|
=item HTML or other inputs to appear after the button.
|
|
|
|
=item Set to 1 if the button should be disabled.
|
|
|
|
=item Additional HTML attributes to appear inside the button's input tag.
|
|
|
|
=item Don't include generated javascript for ui_opt_textbox
|
|
|
|
=cut
|
|
sub ui_form_end
|
|
{
|
|
$ui_formcount++;
|
|
return &theme_ui_form_end(@_) if (defined(&theme_ui_form_end));
|
|
my ($buttons, $width, $nojs) = @_;
|
|
my $rv;
|
|
if ($buttons && @$buttons) {
|
|
$rv .= &_ui_form_end_buttons_table($buttons, $width);
|
|
}
|
|
$rv .= "</form>\n";
|
|
return $rv.&_ui_form_end_nojs($nojs);
|
|
}
|
|
|
|
=head2 ui_form_end_side_by_side(form-id, [&leftbuttons], [&rightbuttons], [width], [nojs])
|
|
|
|
Returns HTML for the end of a form with button groups aligned to the left
|
|
and right. The left buttons use the same format as ui_form_end and are linked
|
|
back to the main form by the HTML5 C<form> attribute, allowing the right side
|
|
to contain separate forms or custom HTML without invalid nesting.
|
|
|
|
=item form-id - HTML id of the form started by ui_form_start.
|
|
|
|
=item leftbuttons - Buttons for the left side, in the same format as ui_form_end.
|
|
|
|
=item rightbuttons - Optional buttons or HTML for the right side. Each element
|
|
may be either a ui_form_end button array ref or raw HTML.
|
|
|
|
=item width - Optional CSS width for the action bar. Defaults to 100%.
|
|
|
|
=item nojs - Set to 1 to suppress ui_opt_textbox re-enable JavaScript.
|
|
|
|
=cut
|
|
sub ui_form_end_side_by_side
|
|
{
|
|
$ui_formcount++;
|
|
return &theme_ui_form_end_side_by_side(@_)
|
|
if (defined(&theme_ui_form_end_side_by_side));
|
|
my ($formid, $leftbuttons, $rightbuttons, $width, $nojs) = @_;
|
|
my $rv;
|
|
$rv .= "</form>\n";
|
|
if (($leftbuttons && @$leftbuttons) || ($rightbuttons && @$rightbuttons)) {
|
|
$rv .= &_ui_form_end_side_by_side_css();
|
|
$rv .= "<div class='ui_form_end_side_by_side'".
|
|
" style='width:"."e_escape($width || "100%")."'>\n";
|
|
if ($leftbuttons && @$leftbuttons) {
|
|
$rv .= "<div class='ui_form_end_side ui_form_end_side_left'>\n".
|
|
&_ui_form_end_buttons_table($leftbuttons, undef, $formid,
|
|
"ui_form_end_buttons_left").
|
|
"</div>\n";
|
|
}
|
|
if ($rightbuttons && @$rightbuttons) {
|
|
$rv .= "<div class='ui_form_end_side ui_form_end_side_right'>\n".
|
|
&_ui_form_end_buttons_table($rightbuttons, undef, undef,
|
|
"ui_form_end_buttons_right").
|
|
"</div>\n";
|
|
}
|
|
$rv .= "</div>\n";
|
|
}
|
|
$rv .= &_ui_form_end_nojs($nojs);
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_form_grouped_buttons(&groups, [width])
|
|
|
|
Returns HTML for a responsive row of submit buttons, without closing the form.
|
|
Each button uses the same array format as C<ui_form_end>.
|
|
|
|
Pass an array of button groups. A group can be a normal button list, or a list
|
|
of button lists when you want a visible gap between sets of buttons. Groups are
|
|
spread across the row when there is room, and wrap on narrow screens. Buttons
|
|
inside the same list stay visually joined.
|
|
|
|
Example :
|
|
|
|
my @save_buttons = ([ undef, $text{'save'} ]);
|
|
my @control_buttons = ([ 'start', $text{'start'} ],
|
|
[ 'stop', $text{'stop'} ]);
|
|
my @delete_buttons = ([ 'delete', $text{'delete'} ]);
|
|
|
|
print &ui_form_grouped_buttons([
|
|
[ \@save_buttons, \@control_buttons ],
|
|
\@delete_buttons,
|
|
]);
|
|
|
|
=cut
|
|
sub ui_form_grouped_buttons
|
|
{
|
|
return &theme_ui_form_grouped_buttons(@_) if (defined(&theme_ui_form_grouped_buttons));
|
|
my ($groups, $width) = @_;
|
|
$groups ||= [ ];
|
|
my @groups = grep { $_ && ref($_) eq 'ARRAY' && @$_ } @$groups;
|
|
return "" if (!@groups);
|
|
|
|
my %attrs = ( 'class' => 'ui_form_grouped_buttons' );
|
|
$attrs{'style'} = "width:$width" if ($width);
|
|
my $rv = &_ui_form_grouped_buttons_css();
|
|
$rv .= &ui_tag_start('div', \%attrs);
|
|
foreach my $group (@groups) {
|
|
$rv .= &_ui_form_grouped_buttons_group($group);
|
|
}
|
|
$rv .= &ui_tag_end('div');
|
|
return $rv;
|
|
}
|
|
|
|
sub _ui_form_end_buttons_table
|
|
{
|
|
my ($buttons, $width, $formid, $class) = @_;
|
|
return "" if (!$buttons || !@$buttons);
|
|
my $rv = "<table class='ui_form_end_buttons".
|
|
($class ? " $class" : "")."' ".
|
|
($width ? "width='$width'" : "")."><tr>\n";
|
|
my $b;
|
|
foreach $b (@$buttons) {
|
|
if (ref($b)) {
|
|
my $tags = $b->[4];
|
|
if ($formid && (!$tags || $tags !~ /\bform\s*=/i)) {
|
|
$tags .= ($tags ? " " : "").
|
|
"form=\""."e_escape($formid)."\"";
|
|
}
|
|
$rv .= "<td".(!$width ? "" :
|
|
$b eq $buttons->[0] ? " align='left'" :
|
|
$b eq $buttons->[@$buttons-1] ?
|
|
" align='right'" : " align='center'").">".
|
|
&ui_submit($b->[1], $b->[0], $b->[3], $tags).
|
|
($b->[2] ? " ".$b->[2] : "")."</td>\n";
|
|
}
|
|
elsif ($b) {
|
|
$rv .= "<td>$b</td>\n";
|
|
}
|
|
else {
|
|
$rv .= "<td> </td>\n";
|
|
}
|
|
}
|
|
$rv .= "</tr></table>\n";
|
|
return $rv;
|
|
}
|
|
|
|
sub _ui_form_grouped_buttons_group
|
|
{
|
|
my ($group) = @_;
|
|
my @clusters = &_ui_form_grouped_buttons_clusters($group);
|
|
return "" if (!@clusters);
|
|
my $rv = &ui_tag_start('div', { 'class' => 'ui_form_grouped_group' });
|
|
foreach my $cluster (@clusters) {
|
|
$rv .= &_ui_form_grouped_buttons_cluster($cluster);
|
|
}
|
|
$rv .= &ui_tag_end('div');
|
|
return $rv;
|
|
}
|
|
|
|
sub _ui_form_grouped_buttons_clusters
|
|
{
|
|
my ($group) = @_;
|
|
return ( ) if (!$group || ref($group) ne 'ARRAY' || !@$group);
|
|
foreach my $item (@$group) {
|
|
next if (!defined($item));
|
|
return ref($item) eq 'ARRAY' &&
|
|
(!@$item || ref($item->[0]) eq 'ARRAY') ?
|
|
grep { $_ && ref($_) eq 'ARRAY' && @$_ } @$group :
|
|
( $group );
|
|
}
|
|
return ( );
|
|
}
|
|
|
|
sub _ui_form_grouped_buttons_cluster
|
|
{
|
|
my ($buttons) = @_;
|
|
return "" if (!$buttons || !@$buttons);
|
|
my $rv = &ui_tag_start('span', { 'class' => 'ui_form_grouped_cluster' });
|
|
foreach my $b (@$buttons) {
|
|
next if (!defined($b));
|
|
if (ref($b)) {
|
|
my $submit = &ui_submit($b->[1], $b->[0], $b->[3], $b->[4]);
|
|
chomp($submit);
|
|
$rv .= $submit;
|
|
$rv .= $b->[2] ? " ".$b->[2] : "";
|
|
}
|
|
elsif ($b) {
|
|
$rv .= $b;
|
|
}
|
|
}
|
|
$rv .= &ui_tag_end('span');
|
|
return $rv;
|
|
}
|
|
|
|
sub _ui_form_end_side_by_side_css
|
|
{
|
|
return "" if ($ui_form_end_side_by_side_donecss++);
|
|
return <<'EOF';
|
|
<style type='text/css'>
|
|
.ui_form_end_side_by_side {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
gap: 0 5px;
|
|
}
|
|
.ui_form_end_side_by_side .ui_form_end_side_left {
|
|
flex: 1 1 auto;
|
|
min-width: 0;
|
|
}
|
|
.ui_form_end_side_by_side .ui_form_end_side_right {
|
|
flex: 0 0 auto;
|
|
}
|
|
.ui_form_end_side_by_side .ui_form_end_buttons {
|
|
width: auto;
|
|
}
|
|
</style>
|
|
EOF
|
|
}
|
|
|
|
sub _ui_form_grouped_buttons_css
|
|
{
|
|
return "" if ($ui_form_grouped_buttons_donecss++);
|
|
my $css = <<'EOF';
|
|
.ui_form_grouped_buttons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5em 0.45em;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
.ui_form_grouped_group {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
width: max-content;
|
|
max-width: 100%;
|
|
margin: 0 -0.45em -0.45em 0;
|
|
}
|
|
.ui_form_grouped_cluster {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
max-width: 100%;
|
|
margin: 0 0.45em 0 0;
|
|
}
|
|
.ui_form_grouped_cluster .ui_submit {
|
|
margin: 0 0 0.45em 0;
|
|
}
|
|
EOF
|
|
return &ui_tag('style', $css, { 'type' => 'text/css' });
|
|
}
|
|
|
|
sub _ui_form_end_nojs
|
|
{
|
|
my ($nojs) = @_;
|
|
if ( !$nojs ) {
|
|
# When going back to a form, re-enable any text fields generated by
|
|
# ui_opt_textbox that aren't in the default state.
|
|
my $rv = "<script type='text/javascript'>\n";
|
|
$rv .= "(function () {\n";
|
|
$rv .= "const opts = document.getElementsByClassName('ui_opt_textbox');\n";
|
|
$rv .= "for(let i=0; i<opts.length; i++) {\n";
|
|
$rv .= " opts[i].disabled = document.getElementsByName(opts[i].name+'_def')[0].checked;\n";
|
|
$rv .= "}\n";
|
|
$rv .= "})();\n";
|
|
$rv .= "</script>\n";
|
|
return $rv;
|
|
}
|
|
return "";
|
|
}
|
|
|
|
=head2 ui_textbox(name, value, size, [disabled?], [maxlength], [tags], [class])
|
|
|
|
Returns HTML for a text input box. The parameters are :
|
|
|
|
=item name - Name for this input.
|
|
|
|
=item value - Initial contents for the text box.
|
|
|
|
=item size - Desired width in characters.
|
|
|
|
=item disabled - Set to 1 if this text box should be disabled by default.
|
|
|
|
=item maxlength - Maximum length of the string the user is allowed to input.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=cut
|
|
sub ui_textbox
|
|
{
|
|
return &theme_ui_textbox(@_) if (defined(&theme_ui_textbox));
|
|
my ($name, $value, $size, $dis, $max, $tags, $cls) = @_;
|
|
$cls ||= "";
|
|
$cls = " $cls" if ($cls);
|
|
$size = &ui_max_text_width($size);
|
|
return "<input class='ui_textbox$cls' type='text' ".
|
|
"name=\"".&html_escape($name)."\" ".
|
|
"id=\"".&html_escape($name)."\" ".
|
|
"value=\"".&html_escape($value)."\" ".
|
|
"size='$size'".($dis ? " disabled='true'" : "").
|
|
($max ? " maxlength='$max'" : "").
|
|
($tags ? " ".$tags : "").">";
|
|
}
|
|
|
|
=head2 ui_filebox(name, value, size, [disabled?], [maxlength], [tags], [dir-only])
|
|
|
|
Returns HTML for a text box for choosing a file. Parameters are the same
|
|
as ui_textbox, except for the extra dir-only option which limits the chooser
|
|
to directories.
|
|
|
|
=cut
|
|
sub ui_filebox
|
|
{
|
|
return &theme_ui_filebox(@_) if (defined(&theme_ui_filebox));
|
|
my ($name, $value, $size, $dis, $max, $tags, $dironly) = @_;
|
|
return &ui_textbox($name, $value, $size, $dis, $max, $tags)." ".
|
|
&file_chooser_button($name, $dironly);
|
|
}
|
|
|
|
=head2 ui_bytesbox(name, bytes, [size], [disabled?])
|
|
|
|
Returns HTML for entering a number of bytes, but with friendly kB/MB/GB
|
|
options. May truncate values to 2 decimal points! The parameters are :
|
|
|
|
=item name - Name for this input.
|
|
|
|
=item bytes - Initial number of bytes to show.
|
|
|
|
=item size - Desired width of the text box part.
|
|
|
|
=item disabled - Set to 1 if this text box should be disabled by default.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=item defaultunits - Units mode selected by default
|
|
|
|
=cut
|
|
sub ui_bytesbox
|
|
{
|
|
my ($name, $bytes, $size, $dis, $tags, $defaultunits) = @_;
|
|
my $units = 1;
|
|
my $omorfi_unit;
|
|
|
|
if ($bytes eq '' && $defaultunits) {
|
|
$units = $defaultunits;
|
|
}
|
|
else {
|
|
for(my $i=1; $i<=4; $i++) {
|
|
my $u = 1024**$i;
|
|
if ($bytes >= $u) {
|
|
$units = $u;
|
|
$omorfi_unit = $units
|
|
if ($bytes % $u == 0 && $bytes/$u <= $u);
|
|
}
|
|
}
|
|
$units = $omorfi_unit
|
|
if ($omorfi_unit && $bytes*4 % $units != 0);
|
|
}
|
|
if ($bytes ne "") {
|
|
$bytes = sprintf("%.2f", ($bytes*1.0)/$units);
|
|
$bytes =~ s/\.00$//;
|
|
# Remove trailing zeros in decimal part
|
|
$bytes =~ s/(\.\d*?[1-9])0+$/$1/;
|
|
}
|
|
$size = &ui_max_text_width($size || 8);
|
|
return &ui_textbox($name, $bytes, $size, $dis, undef, $tags)." ".
|
|
&ui_select($name."_units", $units,
|
|
[ [ 1, $text{"nice_size_b"} ],
|
|
[ 1024, $text{"nice_size_kiB"} ],
|
|
[ 1024*1024, $text{"nice_size_MiB"} ],
|
|
[ 1024*1024*1024, $text{"nice_size_GiB"} ],
|
|
[ 1024*1024*1024*1024, $text{"nice_size_TiB"} ],
|
|
[ 1024*1024*1024*1024*1024, $text{"nice_size_PiB"} ] ], undef, undef, undef, $dis);
|
|
}
|
|
|
|
=head2 ui_upload(name, size, [disabled?], [tags])
|
|
|
|
Returns HTML for a file upload input, for use in a form with the form-data
|
|
method. The parameters are :
|
|
|
|
=item name - Name for this input.
|
|
|
|
=item size - Desired width in characters.
|
|
|
|
=item disabled - Set to 1 if this text box should be disabled by default.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=item multiple - Set to 1 to allow uploading of multiple files
|
|
|
|
=cut
|
|
sub ui_upload
|
|
{
|
|
return &theme_ui_upload(@_) if (defined(&theme_ui_upload));
|
|
my ($name, $size, $dis, $tags, $multiple) = @_;
|
|
$size = &ui_max_text_width($size);
|
|
return "<input class='ui_upload' type='file' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"id=\""."e_escape($name)."\" ".
|
|
"size='$size'".
|
|
($dis ? " disabled='true'" : "").
|
|
($multiple ? " multiple" : "").
|
|
($tags ? " ".$tags : "").">";
|
|
}
|
|
|
|
=head2 ui_password(name, value, size, [disabled?], [maxlength], [tags])
|
|
|
|
Returns HTML for a password text input. Parameters are the same as ui_textbox,
|
|
and behaviour is identical except that the user's input is not visible.
|
|
|
|
=cut
|
|
sub ui_password
|
|
{
|
|
return &theme_ui_password(@_) if (defined(&theme_ui_password));
|
|
my ($name, $value, $size, $dis, $max, $tags) = @_;
|
|
$size = &ui_max_text_width($size);
|
|
return "<input class='ui_password' type='password' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"id=\""."e_escape($name)."\" ".
|
|
($value ne "" ? "value=\""."e_escape($value)."\" " : "").
|
|
"size='$size'".($dis ? " disabled='true'" : "").
|
|
($max ? " maxlength='$max'" : "").
|
|
($tags ? " ".$tags : "").">";
|
|
}
|
|
|
|
=head2 ui_hidden(name, value, [formid])
|
|
|
|
Returns HTML for a hidden field with the given name and value.
|
|
|
|
=cut
|
|
sub ui_hidden
|
|
{
|
|
return &theme_ui_hidden(@_) if (defined(&theme_ui_hidden));
|
|
my ($name, $value, $formid) = @_;
|
|
return "<input class='ui_hidden' type='hidden' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"id=\""."e_escape($name)."\" ".
|
|
"value=\""."e_escape($value)."\"".
|
|
($formid ? " form=\"$formid\"" : "").">\n";
|
|
}
|
|
|
|
=head2 ui_select(name, value|&values, &options, [size], [multiple], [add-if-missing], [disabled?], [tags])
|
|
|
|
Returns HTML for a drop-down menu or multiple selection list. The parameters
|
|
are :
|
|
|
|
=item name - Name for this input.
|
|
|
|
=item value - Either a single initial value, or an array reference of values if this is a multi-select list.
|
|
|
|
=item options - An array reference of possible options. Each element can either be a scalar, or a two-element array ref containing a submitted value and displayed text.
|
|
|
|
=item size - Desired vertical size in rows, which defaults to 1. For multi-select lists, this must be set to something larger.
|
|
|
|
=item multiple - Set to 1 for a multi-select list, 0 for single.
|
|
|
|
=item add-if-missing - If set to 1, any value that is not in the list of options will be automatically added (and selected).
|
|
|
|
=item disabled - Set to 1 to disable this input.
|
|
|
|
=item tags - Additional HTML attributes for the <select> input.
|
|
|
|
=cut
|
|
sub ui_select
|
|
{
|
|
return &theme_ui_select(@_) if (defined(&theme_ui_select));
|
|
my ($name, $value, $opts, $size, $multiple, $missing, $dis, $tags) = @_;
|
|
my $rv;
|
|
$rv .= "<select class='ui_select' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"id=\""."e_escape($name)."\" ".
|
|
($size ? " size='$size'" : "").
|
|
($multiple ? " multiple" : "").
|
|
($dis ? " disabled=true" : "").($tags ? " ".$tags : "").">\n";
|
|
my ($o, %opt, $s);
|
|
my %sel = ref($value) ? ( map { $_, 1 } @$value ) : ( $value, 1 );
|
|
foreach $o (@$opts) {
|
|
$o = [ $o ] if (!ref($o));
|
|
$rv .= "<option value=\""."e_escape($o->[0])."\"".
|
|
($sel{$o->[0]} ? " selected" : "").($o->[2] ne '' ? " ".$o->[2] : "").">".
|
|
&html_escape($o->[1] || $o->[0], 1)."</option>\n";
|
|
$opt{$o->[0]}++;
|
|
}
|
|
foreach $s (keys %sel) {
|
|
if (!$opt{$s} && $missing) {
|
|
$rv .= "<option value=\""."e_escape($s)."\"".
|
|
" selected>".($s eq "" ? " " : &html_escape($s, 1))."</option>\n";
|
|
}
|
|
}
|
|
$rv .= "</select>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_multi_select(name, &values, &options, size, [add-if-missing], [disabled?], [options-title, values-title], [width])
|
|
|
|
Returns HTML for selecting many of many from a list. By default, this is
|
|
implemented using two <select> lists and Javascript buttons to move elements
|
|
between them. The resulting input value is \n separated. ui_multi_select_list
|
|
offers a searchable checkbox list with the same values and submission format.
|
|
|
|
Parameters are :
|
|
|
|
=item name - HTML name for this input.
|
|
|
|
=item values - An array reference of two-element array refs, containing the submitted values and descriptions of items that are selected by default.
|
|
|
|
=item options - An array reference of two-element array refs, containing the submitted values and descriptions of items that the user can select from.
|
|
|
|
=item size - Vertical size in rows.
|
|
|
|
=item add-if-missing - If set to 1, any entries that are in values but not in options will be added automatically.
|
|
|
|
=item disabled - Set to 1 to disable this input by default.
|
|
|
|
=item options-title - Optional text to appear above the list of options.
|
|
|
|
=item values-title - Optional text to appear above the list of selected values.
|
|
|
|
=item width - Optional width of the two lists in pixels.
|
|
|
|
=cut
|
|
sub ui_multi_select
|
|
{
|
|
return &theme_ui_multi_select(@_) if (defined(&theme_ui_multi_select));
|
|
my ($name, $values, $opts, $size, $missing, $dis,
|
|
$opts_title, $vals_title, $width) = @_;
|
|
my $rv;
|
|
my %already = map { $_->[0], $_ } @$values;
|
|
my $leftover = [ grep { !$already{$_->[0]} } @$opts ];
|
|
if ($missing) {
|
|
my %optsalready = map { $_->[0], $_ } @$opts;
|
|
push(@$opts, grep { !$optsalready{$_->[0]} } @$values);
|
|
}
|
|
if (!defined($width)) {
|
|
$width = "200";
|
|
}
|
|
$width .= "px" if ($width =~ /^\d+$/);
|
|
my $wstyle = $width ? "style='min-width:$width'" : "";
|
|
|
|
if (!$main::ui_multi_select_donejs++) {
|
|
$rv .= &ui_multi_select_javascript();
|
|
}
|
|
$rv .= "<table cellpadding=0 cellspacing=0 class='ui_multi_select'>";
|
|
if (defined($opts_title)) {
|
|
$rv .= "<tr class='ui_multi_select_heads'>".
|
|
"<td><b>$opts_title</b></td> ".
|
|
"<td></td><td><b>$vals_title</b></td></tr>";
|
|
}
|
|
$rv .= "<tr class='ui_multi_select_row'>";
|
|
$rv .= "<td>".&ui_select($name."_opts", [ ], $leftover,
|
|
$size, 1, 0, $dis, $wstyle)."</td>\n";
|
|
$rv .= "<td>".&ui_button("▶", $name."_add", $dis,
|
|
"onClick='multi_select_move(\"$name\", form, 1)'")."<br>".
|
|
&ui_button("◀", $name."_remove", $dis,
|
|
"onClick='multi_select_move(\"$name\", form, 0)'")."</td>\n";
|
|
$rv .= "<td>".&ui_select($name."_vals", [ ], $values,
|
|
$size, 1, 0, $dis, $wstyle)."</td>\n";
|
|
$rv .= "</tr></table>\n";
|
|
$rv .= &ui_hidden($name, join("\n", map { $_->[0] } @$values));
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_multi_select_javascript
|
|
|
|
Returns <script> section for left/right select boxes. For internal use only.
|
|
|
|
=cut
|
|
sub ui_multi_select_javascript
|
|
{
|
|
return &theme_ui_multiselect_javascript()
|
|
if (defined(&theme_ui_multiselect_javascript));
|
|
return <<EOF;
|
|
<script type='text/javascript'>
|
|
// Move an element from the options list to the values list, or vice-versa
|
|
function multi_select_move(name, f, dir)
|
|
{
|
|
var opts = f.elements[name+"_opts"];
|
|
var vals = f.elements[name+"_vals"];
|
|
var opts_idx = opts.selectedIndex;
|
|
var vals_idx = vals.selectedIndex;
|
|
if (dir == 1 && opts_idx >= 0) {
|
|
// Moving from options to selected list
|
|
for(var i=0; i<opts.options.length; i++) {
|
|
var o = opts.options[i];
|
|
if (o.selected) {
|
|
o.selected = false;
|
|
vals.add(o, 0);
|
|
i--;
|
|
}
|
|
}
|
|
}
|
|
else if (dir == 0 && vals_idx >= 0) {
|
|
// Moving the other way
|
|
for(var i=0; i<vals.options.length; i++) {
|
|
var o = vals.options[i];
|
|
if (o.selected) {
|
|
o.selected = false;
|
|
opts.add(o, 0);
|
|
i--;
|
|
}
|
|
}
|
|
}
|
|
// Fill in hidden field
|
|
var hid = f.elements[name];
|
|
if (hid) {
|
|
var hv = new Array();
|
|
for(var i=0; i<vals.options.length; i++) {
|
|
hv.push(vals.options[i].value);
|
|
}
|
|
hid.value = hv.join("\\n");
|
|
}
|
|
}
|
|
</script>
|
|
EOF
|
|
}
|
|
|
|
=head2 ui_radio(name, value, &options, [disabled?])
|
|
|
|
Returns HTML for a series of radio buttons, of which one can be selected. The
|
|
parameters are :
|
|
|
|
=item name - HTML name for the radio buttons.
|
|
|
|
=item value - Value of the button that is selected by default.
|
|
|
|
=item options - Array ref of radio button options, each of which is an array ref containing the submitted value and description for each button.
|
|
|
|
=item disabled - Set to 1 to disable all radio buttons by default.
|
|
|
|
=cut
|
|
sub ui_radio
|
|
{
|
|
return &theme_ui_radio(@_) if (defined(&theme_ui_radio));
|
|
my ($name, $value, $opts, $dis) = @_;
|
|
my $rv;
|
|
my $o;
|
|
foreach $o (@$opts) {
|
|
my $id = "e_escape($name."_".$o->[0]);
|
|
my $label = $o->[1] || $o->[0];
|
|
my $after;
|
|
if ($label =~ /^([\000-\377]*?)((<a\s+href|<input|<select|<textarea|<span|<br|<p)[\000-\377]*)$/i) {
|
|
$label = $1;
|
|
$after = $2;
|
|
}
|
|
$rv .= "<input class='ui_radio' type='radio' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"value=\""."e_escape($o->[0])."\"".
|
|
($o->[0] eq $value ? " checked" : "").
|
|
($dis ? " disabled='true'" : "").
|
|
" id=\"$id\"".
|
|
($o->[2] ? " ".$o->[2] : "")."> <label for=\"$id\">".
|
|
$label."</label>".$after."\n";
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_yesno_radio(name, value, [yes], [no], [disabled?])
|
|
|
|
Like ui_radio, but always displays just two inputs (yes and no). The parameters
|
|
are :
|
|
|
|
=item name - HTML name of the inputs.
|
|
|
|
=item value - Option selected by default, typically 1 or 0.
|
|
|
|
=item yes - The value for the yes option, defaulting to 1.
|
|
|
|
=item no - The value for the no option, defaulting to 0.
|
|
|
|
=item disabled - Set to 1 to disable all radio buttons by default.
|
|
|
|
=cut
|
|
sub ui_yesno_radio
|
|
{
|
|
my ($name, $value, $yes, $no, $dis) = @_;
|
|
return &theme_ui_yesno_radio(@_) if (defined(&theme_ui_yesno_radio));
|
|
$yes = 1 if (!defined($yes));
|
|
$no = 0 if (!defined($no));
|
|
if ( $value =~ /^[0-9,.E]+$/ || !$value) {
|
|
$value = int($value);
|
|
}
|
|
return &ui_radio($name, $value, [ [ $yes, $text{'yes'} ],
|
|
[ $no, $text{'no'} ] ], $dis);
|
|
}
|
|
|
|
=head2 ui_radio_row(name, value, &arrref, [new-line])
|
|
|
|
Radio buttons, with a HTML elements places after each one, and
|
|
dependent HTML elements disabled if the radio button is not selected.
|
|
|
|
=item name - HTML name of the inputs.
|
|
|
|
=item value - Option selected by default, typically 1 or 0.
|
|
|
|
=item array reference of elements, each containing a submited value and displayed HTML.
|
|
|
|
Array reference of elements, each containing:
|
|
|
|
1. The value for the radio button
|
|
2. An array reference of HTML elements to be displayed after the radio button
|
|
2.1. A label for the radio button
|
|
2.2. A list (array) of HTML elements to be displayed after the radio button
|
|
|
|
=item newline - Set to 1 to start a new line after each radio button.
|
|
|
|
=cut
|
|
sub ui_radio_row
|
|
{
|
|
return &theme_ui_radio_row(@_) if (defined(&theme_ui_radio_row));
|
|
my ($name, $value, $arrref, $newline) = @_;
|
|
$newline = "<br>" if ($newline == 1);
|
|
my $id = &substitute_pattern('[a-f0-9]{20}');
|
|
my $rv = "<span class='ui_radio_row_wrap ui_radio_row_wrap_${id}'>";
|
|
for (my $i = 0; $i < @$arrref; $i++) {
|
|
$rv .= &ui_radio($name, $value, [ [ $arrref->[$i]->[0], $arrref->[$i]->[1]->[0] ] ], $dis);
|
|
shift @{$arrref->[$i]->[1]};
|
|
my $arrref_html = join('', map { "<span class='ui_radio_row_inner_${i}'>$_</span>" }
|
|
@{$arrref->[$i]->[1]});
|
|
$rv .= "<span class='ui_radio_row ui_radio_row_$arrref->[$i]->[0]'>".
|
|
$arrref_html.
|
|
"</span>" if ($arrref->[$i]->[1]->[0]);
|
|
$rv .= $newline;
|
|
}
|
|
$rv .= "</span>";
|
|
my $js = <<EOF;
|
|
<script type='text/javascript'>
|
|
!function(){const e="ui_radio_row",t='[type="radio"]',n=document.querySelector("."+e+"_wrap_$id"),c=n.querySelectorAll("input"+t),o=n.querySelector("input"+t+":checked"),i=new Event("input");c.forEach((function(c){c.addEventListener("input",(function(){n.querySelectorAll("select, input:not("+t+")").forEach((function(e){e.disabled=!1})),c.checked&&n.querySelectorAll("."+e+":not(."+e+"_"+this.value+") select, ."+e+":not(."+e+"_"+this.value+") input:not("+t+")").forEach((function(e){e.disabled=!0}))}))})),o.dispatchEvent(i)}();
|
|
</script>
|
|
EOF
|
|
return $rv.$js;
|
|
}
|
|
|
|
=head2 ui_checkbox(name, value, label, selected?, [tags], [disabled?])
|
|
|
|
Returns HTML for a single checkbox. Parameters are :
|
|
|
|
=item name - HTML name of the checkbox.
|
|
|
|
=item value - Value that will be submitted if it is checked.
|
|
|
|
=item label - Text to appear next to the checkbox.
|
|
|
|
=item selected - Set to 1 for it to be checked by default.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=item disabled - Set to 1 to disable the checkbox by default.
|
|
|
|
=cut
|
|
sub ui_checkbox
|
|
{
|
|
return &theme_ui_checkbox(@_) if (defined(&theme_ui_checkbox));
|
|
my ($name, $value, $label, $sel, $tags, $dis) = @_;
|
|
my $after;
|
|
if ($label =~ /^([^<]*)(<[\000-\377]*)$/) {
|
|
$label = $1;
|
|
$after = $2;
|
|
}
|
|
return "<input class='ui_checkbox' type='checkbox' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"value=\""."e_escape($value)."\" ".
|
|
($sel ? " checked" : "").($dis ? " disabled='true'" : "").
|
|
" id=\""."e_escape("${name}_${value}")."\"".
|
|
($tags ? " ".$tags : "")."> ".
|
|
($label eq "" ? $after :
|
|
"<label for=\""."e_escape("${name}_${value}").
|
|
"\">$label</label>$after")."\n";
|
|
}
|
|
|
|
=head2 ui_oneradio(name, value, label, selected?, [tags], [disabled?])
|
|
|
|
Returns HTML for a single radio button. The parameters are :
|
|
|
|
=item name - HTML name of the radio button.
|
|
|
|
=item value - Value that will be submitted if it is selected.
|
|
|
|
=item label - Text to appear next to the button.
|
|
|
|
=item selected - Set to 1 for it to be selected by default.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=item disabled - Set to 1 to disable the radio button by default.
|
|
|
|
=cut
|
|
sub ui_oneradio
|
|
{
|
|
return &theme_ui_oneradio(@_) if (defined(&theme_ui_oneradio));
|
|
my ($name, $value, $label, $sel, $tags, $dis) = @_;
|
|
my $id = "e_escape("${name}_${value}");
|
|
my $after;
|
|
if ($label =~ /^([^<]*)(<[\000-\377]*)$/) {
|
|
$label = $1;
|
|
$after = $2;
|
|
}
|
|
my $ret = "<input class='ui_radio' type='radio' name=\""."e_escape($name)."\" ".
|
|
"value=\""."e_escape($value)."\" ".
|
|
($sel ? " checked" : "").($dis ? " disabled='true'" : "").
|
|
" id=\"$id\"".
|
|
($tags ? " ".$tags : "").">";
|
|
$ret .= " <label for=\"$id\">$label</label>" if ($label ne '');
|
|
$ret .= "$after\n";
|
|
return $ret;
|
|
}
|
|
|
|
=head2 ui_textarea(name, value, rows, cols, [wrap], [disabled?], [tags])
|
|
|
|
Returns HTML for a multi-line text input. The function parameters are :
|
|
|
|
=item name - Name for this HTML <textarea>.
|
|
|
|
=item value - Default value. Multiple lines must be separated by \n.
|
|
|
|
=item rows - Number of rows, in lines.
|
|
|
|
=item cols - Number of columns, in characters.
|
|
|
|
=item wrap - Wrapping mode. Can be one of soft, hard or off.
|
|
|
|
=item disabled - Set to 1 to disable this text area by default.
|
|
|
|
=item tags - Additional HTML attributes for the <textarea> tag.
|
|
|
|
=cut
|
|
sub ui_textarea
|
|
{
|
|
return &theme_ui_textarea(@_) if (defined(&theme_ui_textarea));
|
|
my ($name, $value, $rows, $cols, $wrap, $dis, $tags) = @_;
|
|
$cols = &ui_max_text_width($cols, 1);
|
|
return "<textarea class='ui_textarea' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"id=\""."e_escape($name)."\" ".
|
|
"rows='$rows' cols='$cols'".($wrap ? " wrap='$wrap'" : "").
|
|
($dis ? " disabled='true'" : "").
|
|
($tags ? " $tags" : "").">".
|
|
&html_escape($value).
|
|
"</textarea>";
|
|
}
|
|
|
|
=head2 ui_user_textbox(name, value, [form], [disabled?], [tags])
|
|
|
|
Returns HTML for an input for selecting a Unix user. Parameters are the
|
|
same as ui_textbox.
|
|
|
|
=cut
|
|
sub ui_user_textbox
|
|
{
|
|
my ($name, $value, $form, $dis, $tags) = @_;
|
|
return &theme_ui_user_textbox(@_) if (defined(&theme_ui_user_textbox));
|
|
return &ui_textbox($name, $value, 13, $dis, undef, $tags)." ".
|
|
&user_chooser_button($name, 0, $form);
|
|
}
|
|
|
|
=head2 ui_users_textbox(name, value, [form], [disabled?], [tags])
|
|
|
|
Returns HTML for an input for selecting multiple Unix users. Parameters are the
|
|
same as ui_textbox.
|
|
|
|
=cut
|
|
sub ui_users_textbox
|
|
{
|
|
my ($name, $value, $form, $dis, $tags) = @_;
|
|
return &theme_ui_users_textbox(@_) if (defined(&theme_ui_users_textbox));
|
|
return &ui_textbox($name, $value, 60, $dis, undef, $tags)." ".
|
|
&user_chooser_button($name, 1, $form);
|
|
}
|
|
|
|
=head2 ui_group_textbox(name, value, [form], [disabled?], [tags])
|
|
|
|
Returns HTML for an input for selecting a Unix group. Parameters are the
|
|
same as ui_textbox.
|
|
|
|
=cut
|
|
sub ui_group_textbox
|
|
{
|
|
my ($name, $value, $form, $dis, $tags) = @_;
|
|
return &theme_ui_group_textbox(@_) if (defined(&theme_ui_group_textbox));
|
|
return &ui_textbox($name, $value, 13, $dis, undef, $tags)." ".
|
|
&group_chooser_button($name, 0, $form);
|
|
}
|
|
|
|
=head2 ui_groups_textbox(name, value, [form], [disabled?], [tags])
|
|
|
|
Returns HTML for an input for selecting Unix groups. Parameters are the
|
|
same as ui_textbox.
|
|
|
|
=cut
|
|
sub ui_groups_textbox
|
|
{
|
|
my ($name, $value, $form, $dis, $tags) = @_;
|
|
return &theme_ui_groups_textbox(@_) if (defined(&theme_ui_groups_textbox));
|
|
return &ui_textbox($name, $value, 60, $dis, undef, $tags)." ".
|
|
&group_chooser_button($name, 1, $form);
|
|
}
|
|
|
|
=head2 ui_opt_textbox(name, value, size, option1, [option2], [disabled?], [&extra-fields], [max])
|
|
|
|
Returns HTML for a text field that is optional, implemented by default as
|
|
a field with radio buttons next to it. The parameters are :
|
|
|
|
=item name - HTML name for the text box. The radio buttons will have the same name, but with _def appended.
|
|
|
|
=item value - Initial value, or undef if you want the default radio button selected initially.
|
|
|
|
=item size - Width of the text box in characters.
|
|
|
|
=item option1 - Text for the radio button for selecting that no input is being given, such as 'Default'.
|
|
|
|
=item option2 - Text for the radio button for selecting that you will provide input.
|
|
|
|
=item disabled - Set to 1 to disable this input by default.
|
|
|
|
=item extra-fields - An optional array ref of field names that should be disabled by Javascript when this field is disabled.
|
|
|
|
=item max - Optional maximum allowed input length, in characters.
|
|
|
|
=item tags - Additional HTML attributes for the text box
|
|
|
|
=item type - HTML input type, which defaults to "text"
|
|
|
|
=cut
|
|
sub ui_opt_textbox
|
|
{
|
|
return &theme_ui_opt_textbox(@_) if (defined(&theme_ui_opt_textbox));
|
|
my ($name, $value, $size, $opt1, $opt2, $dis, $extra, $max, $tags, $type) = @_;
|
|
$type ||= "text";
|
|
my $dis1 = &js_disable_inputs([ $name, @$extra ], [ ]);
|
|
my $dis2 = &js_disable_inputs([ ], [ $name, @$extra ]);
|
|
my $rv;
|
|
$size = &ui_max_text_width($size);
|
|
$rv .= &ui_radio($name."_def", $value eq '' ? 1 : 0,
|
|
[ [ 1, $opt1, "onClick='$dis1'" ],
|
|
[ 0, $opt2 || " ", "onClick='$dis2'" ] ], $dis)."\n";
|
|
$rv .= "<input class='ui_opt_textbox' type='$type' ".
|
|
"name=\""."e_escape($name)."\" ".
|
|
"id=\""."e_escape($name)."\" ".
|
|
"size=$size value=\""."e_escape($value)."\"".
|
|
($dis ? " disabled='true'" : "").
|
|
($max ? " maxlength='$max'" : "").
|
|
($tags ? " ".$tags : "").">";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_submit(label, [name], [disabled?], [tags])
|
|
|
|
Returns HTML for a form submit button. Parameters are :
|
|
|
|
=item label - Text to appear on the button.
|
|
|
|
=item name - Optional HTML name for the button. Useful if the CGI it submits to needs to know which of several buttons was clicked.
|
|
|
|
=item disabled - Set to 1 if this button should be disabled by default.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=cut
|
|
sub ui_submit
|
|
{
|
|
return &theme_ui_submit(@_) if (defined(&theme_ui_submit));
|
|
my ($label, $name, $dis, $tags) = @_;
|
|
return "<input class='ui_submit' type='submit'".
|
|
($name ne '' ? " name=\""."e_escape($name)."\"" : "").
|
|
($name ne '' ? " id=\""."e_escape($name)."\"" : "").
|
|
" value=\""."e_escape($label)."\"".
|
|
($dis ? " disabled='true'" : "").
|
|
($tags ? " ".$tags : "").">\n";
|
|
}
|
|
|
|
=head2 ui_reset(label, [disabled?], [tags])
|
|
|
|
Returns HTML for a form reset button, which clears all fields when clicked.
|
|
Parameters are :
|
|
|
|
=item label - Text to appear on the button.
|
|
|
|
=item disabled - Set to 1 if this button should be disabled by default.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag.
|
|
|
|
=cut
|
|
sub ui_reset
|
|
{
|
|
return &theme_ui_reset(@_) if (defined(&theme_ui_reset));
|
|
my ($label, $dis, $tags) = @_;
|
|
return "<input class='ui_reset' type='reset' value=\""."e_escape($label)."\"".
|
|
($dis ? " disabled='true'" : "").
|
|
($tags ? " ".$tags : "").">\n";
|
|
}
|
|
|
|
=head2 ui_button(label, [name], [disabled?], [tags])
|
|
|
|
Returns HTML for a form button, which doesn't do anything when clicked unless
|
|
you add some Javascript to it. The parameters are :
|
|
|
|
=item label - Text to appear on the button.
|
|
|
|
=item name - HTML name for this input.
|
|
|
|
=item disabled - Set to 1 if this button should be disabled by default.
|
|
|
|
=item tags - Additional HTML attributes for the <input> tag, typically Javascript inside an onClick attribute.
|
|
|
|
=cut
|
|
sub ui_button
|
|
{
|
|
return &theme_ui_button(@_) if (defined(&theme_ui_button));
|
|
my ($label, $name, $dis, $tags) = @_;
|
|
return "<input class='ui_button' type='button'".
|
|
($name ne '' ? " name=\""."e_escape($name)."\"" : "").
|
|
($name ne '' ? " id=\""."e_escape($name)."\"" : "").
|
|
" value=\""."e_escape($label)."\"".
|
|
($dis ? " disabled='true'" : "").
|
|
($tags ? " ".$tags : "").">\n";
|
|
}
|
|
|
|
=head2 ui_date_input(day, month, year, day-name, month-name, year-name, [disabled?])
|
|
|
|
Returns HTML for a date-selection field, with day, month and year inputs.
|
|
The parameters are :
|
|
|
|
=item day - Initial day of the month.
|
|
|
|
=item month - Initial month of the year, indexed from 1.
|
|
|
|
=item year - Initial year, four-digit.
|
|
|
|
=item day-name - Name of the day input field.
|
|
|
|
=item month-name - Name of the month select field.
|
|
|
|
=item year-name - Name of the year input field.
|
|
|
|
=item disabled - Set to 1 to disable all fields by default.
|
|
|
|
=cut
|
|
sub ui_date_input
|
|
{
|
|
return &theme_ui_date_input(@_) if (defined(&theme_ui_date_input));
|
|
my ($day, $month, $year, $dayname, $monthname, $yearname, $dis) = @_;
|
|
my $rv;
|
|
$rv .= "<span class='ui_data'>";
|
|
$rv .= &ui_textbox($dayname, $day, 3, $dis);
|
|
$rv .= "/";
|
|
$rv .= &ui_select($monthname, $month,
|
|
[ map { [ $_, $text{"smonth_$_"} ] } (1 .. 12) ],
|
|
1, 0, 0, $dis);
|
|
$rv .= "/";
|
|
$rv .= &ui_textbox($yearname, $year, 5, $dis);
|
|
$rv .= "</span>";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_buttons_start
|
|
|
|
Returns HTML for the start of a block of action buttons with descriptions, as
|
|
generated by ui_buttons_row. Some example code :
|
|
|
|
print ui_buttons_start();
|
|
print ui_buttons_row('start.cgi', 'Start server',
|
|
'Click this button to start the server process');
|
|
print ui_buttons_row('stop.cgi', 'Stop server',
|
|
'Click this button to stop the server process');
|
|
print ui_buttons_end();
|
|
|
|
=cut
|
|
sub ui_buttons_start
|
|
{
|
|
return &theme_ui_buttons_start(@_) if (defined(&theme_ui_buttons_start));
|
|
return "<table width='100%' class='ui_buttons_table'>\n";
|
|
}
|
|
|
|
=head2 ui_buttons_end
|
|
|
|
Returns HTML for the end of a block started by ui_buttons_start.
|
|
|
|
=cut
|
|
sub ui_buttons_end
|
|
{
|
|
return &theme_ui_buttons_end(@_) if (defined(&theme_ui_buttons_end));
|
|
return "</table>\n";
|
|
}
|
|
|
|
=head2 ui_buttons_row(script, button-label, description, [hiddens], [after-submit], [before-submit], [postmethod], [single-cell], [disabled])
|
|
|
|
Returns HTML for a button with a description next to it, and perhaps other
|
|
inputs. The parameters are :
|
|
|
|
=item script - CGI script that this button submits to, like start.cgi.
|
|
|
|
=item button-label - Text to appear on the button.
|
|
|
|
=item description - Text to appear next to the button, describing in more detail what it does.
|
|
|
|
=item hiddens - HTML for hidden fields to include in the form this function generates.
|
|
|
|
=item after-submit - HTML for text or inputs to appear after the submit button.
|
|
|
|
=item before-submit - HTML for text or inputs to appear before the submit button.
|
|
|
|
=item postmethod - Defines the method used to submit the form. Defaults to 'post'.
|
|
|
|
=item single-cell - If set to 1, omits the description cell and spans the button cell across both columns.
|
|
|
|
=item disabled - If set to 1, disables the submit button.
|
|
|
|
=cut
|
|
sub ui_buttons_row
|
|
{
|
|
return &theme_ui_buttons_row(@_) if (defined(&theme_ui_buttons_row));
|
|
my ($script, $label, $desc, $hiddens, $after, $before, $postmethod,
|
|
$singlecell, $disabled) = @_;
|
|
$postmethod ||= 'post';
|
|
if (ref($hiddens)) {
|
|
$hiddens = join("\n", map { &ui_hidden(@$_) } @$hiddens);
|
|
}
|
|
return "<form action='$script' class='ui_buttons_form' method='$postmethod'>\n".
|
|
$hiddens.
|
|
"<tr class='ui_buttons_row".($disabled ? " disabled" : "")."'> ".
|
|
"<td nowrap".($singlecell ? " colspan='2'" : " width='20%'").
|
|
" valign='top' class='ui_buttons_label'>".
|
|
($before ? $before." " : "").
|
|
&ui_submit($label, '', $disabled).
|
|
($after ? " ".$after : "")."</td>\n".
|
|
($singlecell ? "" :
|
|
"<td width='80%' valign='top' class='ui_buttons_value'>".
|
|
$desc."</td>\n").
|
|
"</tr>\n".
|
|
"</form>\n";
|
|
}
|
|
|
|
=head2 ui_buttons_hr([title])
|
|
|
|
Returns HTML for a separator row, for use inside a ui_buttons_start block.
|
|
|
|
=cut
|
|
sub ui_buttons_hr
|
|
{
|
|
my ($title) = @_;
|
|
return &theme_ui_buttons_hr(@_) if (defined(&theme_ui_buttons_hr));
|
|
if ($title) {
|
|
return "<tr class='ui_buttons_hr'><td colspan='2'><table cellpadding='0' cellspacing='0' width='100%'><tr><td width='50%'><hr></td><td nowrap>$title</td><td width='50%'><hr></td></tr></table></td></tr>\n";
|
|
}
|
|
else {
|
|
return "<tr class='ui_buttons_hr'><td colspan='2'><hr></td></tr>\n";
|
|
}
|
|
}
|
|
|
|
####################### header and footer functions
|
|
|
|
=head2 ui_post_header([subtext])
|
|
|
|
Returns HTML to appear directly after a standard header() call. This is never
|
|
called directly - instead, ui_print_header calls it. But it can be overridden
|
|
by themes.
|
|
|
|
=cut
|
|
sub ui_post_header
|
|
{
|
|
return &theme_ui_post_header(@_) if (defined(&theme_ui_post_header));
|
|
my ($text) = @_;
|
|
my $rv;
|
|
$rv .= "<center class='ui_post_header'><font size='+1'>$text</font></center>\n" if (defined($text));
|
|
if (!$tconfig{'nohr'} && !$tconfig{'notophr'}) {
|
|
$rv .= "<hr id='post_header_hr'>\n";
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_pre_footer
|
|
|
|
Returns HTML to appear directly before a standard footer() call. This is never
|
|
called directly - instead, ui_print_footer calls it. But it can be overridden
|
|
by themes.
|
|
|
|
=cut
|
|
sub ui_pre_footer
|
|
{
|
|
return &theme_ui_pre_footer(@_) if (defined(&theme_ui_pre_footer));
|
|
my $rv;
|
|
if (!$tconfig{'nohr'} && !$tconfig{'nobottomhr'}) {
|
|
$rv .= "<hr id='pre_footer_hr'>\n";
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_print_header(subtext, title, image, [help], [config], [nomodule], [nowebmin], [rightside], [head-stuff], [body-stuff], [below])
|
|
|
|
Print HTML for a header with the post-header line. The args are the same
|
|
as those passed to header(), defined in web-lib-funcs.pl, with the addition
|
|
of the subtext parameter :
|
|
|
|
=item subtext - Text to display below the title
|
|
|
|
=item title - The text to show at the top of the page
|
|
|
|
=item image - An image to show instead of the title text. This is typically left blank.
|
|
|
|
=item help - If set, this is the name of a help page that will be linked to in the title.
|
|
|
|
=item config - If set to 1, the title will contain a link to the module's config page.
|
|
|
|
=item nomodule - If set to 1, there will be no link in the title section to the module's index.
|
|
|
|
=item nowebmin - If set to 1, there will be no link in the title section to the Webmin index.
|
|
|
|
=item rightside - HTML to be shown on the right-hand side of the title. Can contain multiple lines, separated by <br>. Typically this is used for links to stop, start or restart servers.
|
|
|
|
=item head-stuff - HTML to be included in the <head> section of the page.
|
|
|
|
=item body-stuff - HTML attributes to be include in the <body> tag.
|
|
|
|
=item below - HTML to be displayed below the title. Typically this is used for application or server version information.
|
|
|
|
=cut
|
|
sub ui_print_header
|
|
{
|
|
&load_theme_library();
|
|
return &theme_ui_print_header(@_) if (defined(&theme_ui_print_header));
|
|
my ($text, @args) = @_;
|
|
&header(@args);
|
|
print &ui_post_header($text);
|
|
}
|
|
|
|
=head2 ui_print_unbuffered_header(subtext, args...)
|
|
|
|
Like ui_print_header, but ensures that output for this page is not buffered
|
|
or contained in a table. This should be called by scripts that are producing
|
|
output while performing some long-running process.
|
|
|
|
=cut
|
|
sub ui_print_unbuffered_header
|
|
{
|
|
my @args = @_;
|
|
&load_theme_library();
|
|
return &theme_ui_print_unbuffered_header(@args)
|
|
if (defined(&theme_ui_print_unbuffered_header));
|
|
$| = 1;
|
|
$theme_no_table = 1;
|
|
$args[9] .= " " if ($args[9]);
|
|
$args[9] .= " data-pagescroll=true";
|
|
&ui_print_header(@args);
|
|
}
|
|
|
|
=head2 ui_print_footer(args...)
|
|
|
|
Print HTML for a footer with the pre-footer line. Args are the same as those
|
|
passed to footer().
|
|
|
|
=cut
|
|
sub ui_print_footer
|
|
{
|
|
return &theme_ui_print_footer(@_) if (defined(&theme_ui_print_footer));
|
|
my @args = @_;
|
|
print &ui_pre_footer();
|
|
&footer(@args);
|
|
}
|
|
|
|
=head2 ui_config_link(text, &subs)
|
|
|
|
Returns HTML for a module config link. The first non-null sub will be
|
|
replaced with the appropriate URL for the module's config page.
|
|
|
|
=cut
|
|
sub ui_config_link
|
|
{
|
|
return &theme_ui_config_link(@_) if (defined(&theme_ui_config_link));
|
|
my ($text, $subs) = @_;
|
|
my $m = &get_module_name();
|
|
my @subs = map { $_ || "../config.cgi?$m" }
|
|
($subs ? @$subs : ( undef ));
|
|
return "<p>".&text($text, @subs)."<p>\n";
|
|
}
|
|
|
|
=head2 ui_print_endpage(text)
|
|
|
|
Prints HTML for an error message followed by a page footer with a link to
|
|
/, then exits. Good for main page error messages.
|
|
|
|
=cut
|
|
sub ui_print_endpage
|
|
{
|
|
return &theme_ui_print_endpage(@_) if (defined(&theme_ui_print_endpage));
|
|
my ($text) = @_;
|
|
print $text,"<p class='ui_footer'>\n";
|
|
print "</p>\n";
|
|
&ui_print_footer("/", $text{'index'});
|
|
exit;
|
|
}
|
|
|
|
=head2 ui_subheading(text, ...)
|
|
|
|
Returns HTML for a section heading whose message is the given text strings.
|
|
|
|
=cut
|
|
sub ui_subheading
|
|
{
|
|
return &theme_ui_subheading(@_) if (defined(&theme_ui_subheading));
|
|
return "<h3 class='ui_subheading'>".join("", @_)."</h3>\n";
|
|
}
|
|
|
|
=head2 ui_links_row(&links)
|
|
|
|
Returns HTML for a row of links, like select all / invert selection / add..
|
|
Each element of the links array ref should be an HTML fragment like :
|
|
|
|
<a href='user_form.cgi'>Create new user</a>
|
|
|
|
=cut
|
|
sub ui_links_row
|
|
{
|
|
return &theme_ui_links_row(@_) if (defined(&theme_ui_links_row));
|
|
my ($links) = @_;
|
|
return @$links ? join("\n|\n", @$links)."<br>\n"
|
|
: "";
|
|
}
|
|
|
|
########################### collapsible section / tab functions
|
|
|
|
=head2 ui_hidden_javascript
|
|
|
|
Returns <script> and <style> sections for hiding functions and CSS. For
|
|
internal use only.
|
|
|
|
=cut
|
|
sub ui_hidden_javascript
|
|
{
|
|
return &theme_ui_hidden_javascript(@_)
|
|
if (defined(&theme_ui_hidden_javascript));
|
|
my $rv;
|
|
my $imgdir = "@{[&get_webprefix()]}/images";
|
|
my ($jscb, $jstb) = ($cb, $tb);
|
|
$jscb =~ s/'/\\'/g;
|
|
$jstb =~ s/'/\\'/g;
|
|
|
|
return <<EOF;
|
|
<style type='text/css'>
|
|
.opener_shown {display:inline}
|
|
.opener_hidden {display:none}
|
|
</style>
|
|
<script type='text/javascript'>
|
|
// Open or close a hidden section
|
|
function hidden_opener(divid, openerid)
|
|
{
|
|
var divobj = document.getElementById(divid);
|
|
var openerobj = document.getElementById(openerid);
|
|
if (divobj.className == 'opener_shown') {
|
|
divobj.className = 'opener_hidden';
|
|
openerobj.innerHTML = '<img border=0 src=$imgdir/closed.gif>';
|
|
}
|
|
else {
|
|
divobj.className = 'opener_shown';
|
|
openerobj.innerHTML = '<img border=0 src=$imgdir/open.gif>';
|
|
}
|
|
}
|
|
|
|
// Show a tab
|
|
function select_tab(name, tabname, form)
|
|
{
|
|
var tabnames = document[name+'_tabnames'];
|
|
var tabtitles = document[name+'_tabtitles'];
|
|
for(var i=0; i<tabnames.length; i++) {
|
|
var tabobj = document.getElementById('tab_'+tabnames[i]);
|
|
var divobj = document.getElementById('div_'+tabnames[i]);
|
|
var title = tabtitles[i];
|
|
if (tabnames[i] == tabname) {
|
|
// Selected table
|
|
tabobj.innerHTML = '<table cellpadding="0" cellspacing="0"><tr>'+
|
|
'<td valign=top $jscb>'+
|
|
'<img src=$imgdir/lc2.gif alt=""></td>'+
|
|
'<td $jscb nowrap>'+
|
|
' <b>'+title+'</b> </td>'+
|
|
'<td valign=top $jscb>'+
|
|
'<img src=$imgdir/rc2.gif alt=""></td>'+
|
|
'</tr></table>';
|
|
divobj.className = 'opener_shown';
|
|
}
|
|
else {
|
|
// Non-selected tab
|
|
tabobj.innerHTML = '<table cellpadding="0" cellspacing="0"><tr>'+
|
|
'<td valign="top" $jstb>'+
|
|
'<img src="$imgdir/lc1.gif" alt=""></td>'+
|
|
'<td $jstb nowrap>'+
|
|
' <a href=\\'\\' onClick=\\'return select_tab("'+
|
|
name+'", "'+tabnames[i]+'")\\'>'+title+'</a> </td>'+
|
|
'<td valign="top" $jstb>'+
|
|
'<img src="$imgdir/rc1.gif" alt=""></td>'+
|
|
'</tr></table>';
|
|
divobj.className = 'opener_hidden';
|
|
}
|
|
}
|
|
if (document.forms[0] && document.forms[0][name]) {
|
|
document.forms[0][name].value = tabname;
|
|
}
|
|
return false;
|
|
}
|
|
</script>
|
|
EOF
|
|
}
|
|
|
|
=head2 ui_hidden_start(title, name, status, thisurl)
|
|
|
|
Returns HTML for the start of a collapsible hidden section, such as for
|
|
advanced options. When clicked on, the section header will expand to display
|
|
whatever is between this function and ui_hidden_end. The parameters are :
|
|
|
|
=item title - Text for the start of this hidden section.
|
|
|
|
=item name - A unique name for this section.
|
|
|
|
=item status - 1 if it should be initially open, 0 if not.
|
|
|
|
=item thisurl - URL of the current page. This is used by themes on devices that don't support Javascript to implement the opening and closing.
|
|
|
|
=cut
|
|
sub ui_hidden_start
|
|
{
|
|
return &theme_ui_hidden_start(@_) if (defined(&theme_ui_hidden_start));
|
|
my ($title, $name, $status, $url) = @_;
|
|
my $rv;
|
|
if (!$main::ui_hidden_start_donejs++) {
|
|
$rv .= &ui_hidden_javascript();
|
|
}
|
|
my $divid = "hiddendiv_$name";
|
|
my $openerid = "hiddenopener_$name";
|
|
my $defimg = $status ? "open.gif" : "closed.gif";
|
|
my $defclass = $status ? 'opener_shown' : 'opener_hidden';
|
|
$rv .= "<a href=\"javascript:hidden_opener('$divid', '$openerid')\" id='$openerid'><img border=0 src='@{[&get_webprefix()]}/images/$defimg' alt='*'></a>\n";
|
|
$rv .= "<a href=\"javascript:hidden_opener('$divid', '$openerid')\">$title</a><br>\n";
|
|
$rv .= "<div class='$defclass' id='$divid'>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_hidden_end(name)
|
|
|
|
Returns HTML for the end of a hidden section, started by ui_hidden_start.
|
|
|
|
=cut
|
|
sub ui_hidden_end
|
|
{
|
|
return &theme_ui_hidden_end(@_) if (defined(&theme_ui_hidden_end));
|
|
my ($name) = @_;
|
|
return "</div>\n";
|
|
}
|
|
|
|
=head2 ui_hidden_table_row_start(title, name, status, thisurl)
|
|
|
|
Similar to ui_hidden_start, but for use within a table started with
|
|
ui_table_start. I recommend against using this where possible, as it can
|
|
be difficult for some themes to implement.
|
|
|
|
=cut
|
|
sub ui_hidden_table_row_start
|
|
{
|
|
return &theme_ui_hidden_table_row_start(@_)
|
|
if (defined(&theme_ui_hidden_table_row_start));
|
|
my ($title, $name, $status, $url) = @_;
|
|
my ($rv, $rrv);
|
|
if (!$main::ui_hidden_start_donejs++) {
|
|
$rv .= &ui_hidden_javascript();
|
|
}
|
|
my $divid = "hiddendiv_$name";
|
|
my $openerid = "hiddenopener_$name";
|
|
my $defimg = $status ? "open.gif" : "closed.gif";
|
|
my $defclass = $status ? 'opener_shown' : 'opener_hidden';
|
|
if ($title) {
|
|
$rrv .= "<a href=\"javascript:hidden_opener('$divid', '$openerid')\" id='$openerid'><img border=0 src='@{[&get_webprefix()]}/images/$defimg'></a>\n";
|
|
$rrv .= "<a href=\"javascript:hidden_opener('$divid', '$openerid')\">$title</a><br>\n";
|
|
$rv .= &ui_table_row(undef, $rrv, $main::ui_table_cols);
|
|
}
|
|
$rv .= "</table>\n";
|
|
$rv .= "<div class='$defclass' id='$divid'>\n";
|
|
$rv .= "<table width='100%'>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_hidden_table_row_end(name)
|
|
|
|
Returns HTML to end a block started by ui_hidden_table_start.
|
|
|
|
=cut
|
|
sub ui_hidden_table_row_end
|
|
{
|
|
return &theme_ui_hidden_table_row_end(@_)
|
|
if (defined(&theme_ui_hidden_table_row_end));
|
|
my ($name) = @_;
|
|
return "</table></div><table width='100%'>\n";
|
|
}
|
|
|
|
=head2 ui_hidden_table_start(heading, [tabletags], [cols], name, status, [&default-tds], [rightheading])
|
|
|
|
Returns HTML for the start of a form block into which labelled inputs can
|
|
be placed, which is collapsible by clicking on the header. Basically the same
|
|
as ui_table_start, and must contain HTML generated by ui_table_row.
|
|
|
|
The parameters are :
|
|
|
|
=item heading - Text to show at the top of the form.
|
|
|
|
=item tabletags - HTML attributes to put in the outer <table>, typically something like width=100%.
|
|
|
|
=item cols - Desired number of columns for labels and fields. Defaults to 4, but can be 2 for forms with lots of wide inputs.
|
|
|
|
=item name - A unique name for this table.
|
|
|
|
=item status - Set to 1 if initially open, 0 if initially closed.
|
|
|
|
=item default-tds - An optional array reference of HTML attributes for the <td> tags in each row of the table.
|
|
|
|
=item right-heading - HTML to appear in the heading, aligned to the right.
|
|
|
|
=cut
|
|
sub ui_hidden_table_start
|
|
{
|
|
return &theme_ui_hidden_table_start(@_)
|
|
if (defined(&theme_ui_hidden_table_start));
|
|
my ($heading, $tabletags, $cols, $name, $status, $tds, $rightheading) = @_;
|
|
my $rv;
|
|
if (!$main::ui_hidden_start_donejs++) {
|
|
$rv .= &ui_hidden_javascript();
|
|
}
|
|
my $divid = "hiddendiv_$name";
|
|
my $openerid = "hiddenopener_$name";
|
|
my $defimg = $status ? "open.gif" : "closed.gif";
|
|
my $defclass = $status ? 'opener_shown' : 'opener_hidden';
|
|
my $text = defined($tconfig{'cs_text'}) ? $tconfig{'cs_text'} :
|
|
defined($gconfig{'cs_text'}) ? $gconfig{'cs_text'} : "000000";
|
|
$rv .= "<table class='ui_table' border $tabletags>\n";
|
|
my $colspan = 1;
|
|
if (defined($heading) || defined($rightheading)) {
|
|
$rv .= "<tr".($tb ? " ".$tb : "")."><td>";
|
|
if (defined($heading)) {
|
|
$rv .= "<a href=\"javascript:hidden_opener('$divid', '$openerid')\" id='$openerid'><img border=0 src='@{[&get_webprefix()]}/images/$defimg'></a> <a href=\"javascript:hidden_opener('$divid', '$openerid')\"><b><font color='#$text'>$heading</font></b></a>";
|
|
}
|
|
$rv .= "</td>";
|
|
if (defined($rightheading)) {
|
|
$rv .= "<td align='right'>$rightheading</td>";
|
|
$colspan++;
|
|
}
|
|
$rv .= " </tr>\n";
|
|
}
|
|
$rv .= "<tr".($cb ? " ".$cb : "")."><td colspan='$colspan'><div class='$defclass' id='$divid'><table width='100%'>\n";
|
|
$main::ui_table_cols = $cols || 4;
|
|
$main::ui_table_pos = 0;
|
|
$main::ui_table_default_tds = $tds;
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_hidden_table_end(name)
|
|
|
|
Returns HTML for the end of a form block with hiding, as started by
|
|
ui_hidden_table_start.
|
|
|
|
=cut
|
|
sub ui_hidden_table_end
|
|
{
|
|
my ($name) = @_;
|
|
return &theme_ui_hidden_table_end(@_) if (defined(&theme_ui_hidden_table_end));
|
|
return "</table></div></td></tr></table>\n";
|
|
}
|
|
|
|
=head2 ui_tabs_start(&tabs, name, selected, show-border)
|
|
|
|
Returns a row of tabs from which one can be selected, displaying HTML
|
|
associated with that tab. The parameters are :
|
|
|
|
=item tabs - An array reference of array refs, each of which contains the value and user-visible text for a tab.
|
|
|
|
=item name - Name of the HTML field into which the selected tab will be placed.
|
|
|
|
=item selected - Value for the tab selected by default.
|
|
|
|
=item show-border - Set to 1 if there should be a border around the contents of the tabs.
|
|
|
|
Example code :
|
|
|
|
@tabs = ( [ 'list', 'List services' ],
|
|
[ 'install', 'Install new service' ] );
|
|
print ui_tabs_start(\@tabs, 'mode', 'list');
|
|
|
|
print ui_tabs_start_tab('mode', 'list');
|
|
generate_service_list();
|
|
print ui_tabs_end_tab('mode', 'list');
|
|
|
|
print ui_tabs_start_tab('mode', 'install');
|
|
generate_install_form();
|
|
print ui_tabs_end_tab('mode', 'install);
|
|
|
|
print ui_tabs_end();
|
|
|
|
=cut
|
|
sub ui_tabs_start
|
|
{
|
|
return &theme_ui_tabs_start(@_) if (defined(&theme_ui_tabs_start));
|
|
my ($tabs, $name, $sel, $border) = @_;
|
|
my $rv;
|
|
if (!$main::ui_hidden_start_donejs++) {
|
|
$rv .= &ui_hidden_javascript();
|
|
}
|
|
|
|
# Build list of tab titles and names
|
|
my $tabnames = &convert_to_json([map { $_->[0] } @$tabs]);
|
|
my $tabtitles = &convert_to_json([map { $_->[1] } @$tabs]);
|
|
$rv .= "<script type='text/javascript'>\n";
|
|
$rv .= "document.${name}_tabnames = $tabnames;\n";
|
|
$rv .= "document.${name}_tabtitles = $tabtitles;\n";
|
|
$rv .= "</script>\n";
|
|
|
|
# Output the tabs
|
|
my $imgdir = "@{[&get_webprefix()]}/images";
|
|
$rv .= &ui_hidden($name, $sel)."\n";
|
|
$rv .= "<table border='0' cellpadding='0' cellspacing='0' class='ui_tabs'>\n";
|
|
$rv .= "<tr><td bgcolor='#ffffff' colspan='".(scalar(@$tabs)*2+1)."'>";
|
|
if ($ENV{'HTTP_USER_AGENT'} !~ /msie/i) {
|
|
# For some reason, the 1-pixel space above the tabs appears huge on IE!
|
|
$rv .= "<img src='$imgdir/1x1.gif'>";
|
|
}
|
|
$rv .= "</td></tr>\n";
|
|
$rv .= "<tr>\n";
|
|
$rv .= "<td bgcolor='#ffffff' width='1'><img src='$imgdir/1x1.gif'></td>\n";
|
|
foreach my $t (@$tabs) {
|
|
if ($t ne $$tabs[0]) {
|
|
# Spacer
|
|
$rv .= "<td width='2' bgcolor='#ffffff' class='ui_tab_spacer'>".
|
|
"<img src='$imgdir/1x1.gif'></td>\n";
|
|
}
|
|
my $tabid = "tab_".$t->[0];
|
|
$rv .= "<td id='${tabid}' class='ui_tab'>";
|
|
$rv .= "<table cellpadding='0' cellspacing='0' border='0'><tr>";
|
|
if ($t->[0] eq $sel) {
|
|
# Selected tab
|
|
$rv .= "<td valign='top'".($cb ? " ".$cb : "")." class='selectedTabLeft'>".
|
|
"<img src='$imgdir/lc2.gif' alt=\"\"></td>";
|
|
$rv .= "<td".($cb ? " ".$cb : "")." nowrap class='selectedTabMiddle'>".
|
|
" <b>$t->[1]</b> </td>";
|
|
$rv .= "<td valign=top".($cb ? " ".$cb : "")." class='selectedTabRight'>".
|
|
"<img src=$imgdir/rc2.gif alt=\"\"></td>";
|
|
}
|
|
else {
|
|
# Other tab (which has a link)
|
|
$rv .= "<td valign='top'".($tb ? " ".$tb : "").">".
|
|
"<img src='$imgdir/lc1.gif' alt=\"\"></td>";
|
|
$rv .= "<td".($tb ? " ".$tb : "")." nowrap>".
|
|
" <a href='$t->[2]' ".
|
|
"onClick='return select_tab(\"$name\", \"$t->[0]\")'>".
|
|
"$t->[1]</a> </td>";
|
|
$rv .= "<td valign='top'".($tb ? " ".$tb : "")." >".
|
|
"<img src='$imgdir/rc1.gif' ".
|
|
"alt=\"\"></td>";
|
|
$rv .= "</td>\n";
|
|
}
|
|
$rv .= "</tr></table>";
|
|
$rv .= "</td>\n";
|
|
}
|
|
$rv .= "<td bgcolor='#ffffff' width='1'><img src='$imgdir/1x1.gif'></td>\n";
|
|
$rv .= "</table>\n";
|
|
|
|
if ($border) {
|
|
# All tabs are within a grey box
|
|
$rv .= "<table width='100%' cellpadding='0' cellspacing='0' border='0' ".
|
|
"class='ui_tabs_box'>\n";
|
|
$rv .= "<tr> <td bgcolor='#ffffff' rowspan='3' width='1'><img src='$imgdir/1x1.gif'></td>\n";
|
|
$rv .= "<td".($cb ? " ".$cb : "")." colspan='3' height='2'><img src='$imgdir/1x1.gif'></td> </tr>\n";
|
|
$rv .= "<tr> <td".($cb ? " ".$cb : "")." width='2'><img src='$imgdir/1x1.gif'></td>\n";
|
|
$rv .= "<td valign='top'>";
|
|
}
|
|
$main::ui_tabs_selected = $sel;
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_tabs_end(show-border)
|
|
|
|
Returns HTML to end a block started by ui_tabs_start. The show-border parameter
|
|
must match the parameter with the same name in the start function.
|
|
|
|
=cut
|
|
sub ui_tabs_end
|
|
{
|
|
return &theme_ui_tabs_end(@_) if (defined(&theme_ui_tabs_end));
|
|
my ($border) = @_;
|
|
my $rv;
|
|
my $imgdir = "@{[&get_webprefix()]}/images";
|
|
if ($border) {
|
|
$rv .= "</td>\n";
|
|
$rv .= "<td".($cb ? " ".$cb : "")." width='2'><img src='$imgdir/1x1.gif'></td>\n";
|
|
$rv .= "</tr>\n";
|
|
$rv .= "<tr> <td".($cb ? " ".$cb : "")." colspan='3' height='2'><img src='$imgdir/1x1.gif'></td> </tr>\n";
|
|
$rv .= "</table>\n";
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_tabs_start_tab(name, tab)
|
|
|
|
Must be called before outputting the HTML for the named tab, and returns HTML
|
|
for the required <div> block.
|
|
|
|
=cut
|
|
sub ui_tabs_start_tab
|
|
{
|
|
return &theme_ui_tabs_start_tab(@_) if (defined(&theme_ui_tabs_start_tab));
|
|
my ($name, $tab) = @_;
|
|
my $defclass = $tab eq $main::ui_tabs_selected ?
|
|
'opener_shown' : 'opener_hidden';
|
|
my $rv = "<div id='div_$tab' class='$defclass ui_tabs_start'>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_tabs_start_tabletab(name, tab)
|
|
|
|
Behaves like ui_tabs_start_tab, but for use within a ui_table_start block.
|
|
I recommend against using this where possible, as it is difficult for themes
|
|
to implement.
|
|
|
|
=cut
|
|
sub ui_tabs_start_tabletab
|
|
{
|
|
return &theme_ui_tabs_start_tabletab(@_)
|
|
if (defined(&theme_ui_tabs_start_tabletab));
|
|
my $div = &ui_tabs_start_tab(@_);
|
|
return "</table>\n".$div."<table width='100%'>\n";
|
|
}
|
|
|
|
=head2 ui_tabs_end_tab
|
|
|
|
Returns HTML for the end of a block started by ui_tabs_start_tab.
|
|
|
|
=cut
|
|
sub ui_tabs_end_tab
|
|
{
|
|
return &theme_ui_tabs_end_tab(@_) if (defined(&theme_ui_tabs_end_tab));
|
|
return "</div>\n";
|
|
}
|
|
|
|
=head2 ui_tabs_end_tabletab
|
|
|
|
Returns HTML for the end of a block started by ui_tabs_start_tabletab.
|
|
|
|
=cut
|
|
sub ui_tabs_end_tabletab
|
|
{
|
|
return &theme_ui_tabs_end_tabletab(@_)
|
|
if (defined(&theme_ui_tabs_end_tabletab));
|
|
return "</table></div><table width='100%'>\n";
|
|
}
|
|
|
|
=head2 ui_max_text_width(width, [text-area?])
|
|
|
|
Returns a new width for a text field, based on theme settings. For internal
|
|
use only.
|
|
|
|
=cut
|
|
sub ui_max_text_width
|
|
{
|
|
my ($w, $ta) = @_;
|
|
my $max = $ta ? $tconfig{'maxareawidth'} : $tconfig{'maxboxwidth'};
|
|
return $max && $w > $max ? $max : $w;
|
|
}
|
|
|
|
####################### radio hidden functions
|
|
|
|
=head2 ui_radio_selector(&opts, name, selected, [dropdown-mode])
|
|
|
|
Returns HTML for a set of radio buttons, each of which shows a different
|
|
block of HTML when selected. The parameters are :
|
|
|
|
=item opts - An array ref to arrays containing [ value, label, html ]
|
|
|
|
=item name - HTML name for the radio buttons
|
|
|
|
=item selected - Value for the initially selected button.
|
|
|
|
=item dropdown - Use a <select> dropdown menu instead of radio buttons
|
|
|
|
=cut
|
|
sub ui_radio_selector
|
|
{
|
|
return &theme_ui_radio_selector(@_) if (defined(&theme_ui_radio_selector));
|
|
my ($opts, $name, $sel, $dropdown) = @_;
|
|
my $rv;
|
|
if (!$main::ui_radio_selector_donejs++) {
|
|
$rv .= &ui_radio_selector_javascript();
|
|
}
|
|
my $optnames =
|
|
"[".join(",", map { "\"".&html_escape($_->[0])."\"" } @$opts)."]";
|
|
if ($dropdown) {
|
|
$rv .= &ui_select($name, $sel,
|
|
[ map { [ $_->[0], $_->[1] ] } @$opts ],
|
|
1, 0, 0, 0,
|
|
"onChange='selector_show(\"$name\", $name.value, $optnames)'");
|
|
}
|
|
else {
|
|
foreach my $o (@$opts) {
|
|
$rv .= &ui_oneradio($name, $o->[0], $o->[1], $sel eq $o->[0],
|
|
"onClick='selector_show(\"$name\", \"$o->[0]\", $optnames)'");
|
|
}
|
|
}
|
|
$rv .= "<br>\n";
|
|
foreach my $o (@$opts) {
|
|
my $cls = $o->[0] eq $sel ? "selector_shown" : "selector_hidden";
|
|
$rv .= "<div id='sel_${name}_$o->[0]' class='$cls'>".$o->[2]."</div>\n";
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
sub ui_radio_selector_javascript
|
|
{
|
|
return <<EOF;
|
|
<style type='text/css'>
|
|
.selector_shown {display:inline}
|
|
.selector_hidden {display:none}
|
|
</style>
|
|
<script type='text/javascript'>
|
|
function selector_show(name, value, values)
|
|
{
|
|
for(var i=0; i<values.length; i++) {
|
|
var divobj = document.getElementById('sel_'+name+'_'+values[i]);
|
|
divobj.className = value == values[i] ? 'selector_shown'
|
|
: 'selector_hidden';
|
|
}
|
|
}
|
|
</script>
|
|
EOF
|
|
}
|
|
|
|
=head2 ui_switch_theme_javascript()
|
|
|
|
The subroutine is designed to load JavaScript
|
|
for switching themes using hotkeys.
|
|
|
|
Hotkeys are:
|
|
To activate theme switch mode:
|
|
Use: `Ctrl+Alt+T` (or `Control+Option+T` on Mac).
|
|
|
|
Immediately after, within 1 second, select your desired theme by pressing:
|
|
- `Shift + A`: Authentic theme
|
|
- `Shift + G`: Gray theme
|
|
- `Shift + L`: Legacy theme.
|
|
|
|
=cut
|
|
|
|
sub ui_switch_theme_javascript
|
|
{
|
|
return &theme_ui_switch_theme_javascript(@_) if (defined(&theme_ui_switch_theme_javascript));
|
|
my $webprefix = &get_webprefix();
|
|
my $switch_script .= <<EOF;
|
|
<script type="text/javascript">
|
|
(function () {
|
|
let firstCombinationPressed = false;
|
|
document.addEventListener("keydown", function (event) {
|
|
// Check for Ctrl+Alt+T or Control+Option+T
|
|
if (event.ctrlKey && event.altKey && event.keyCode === 84) {
|
|
firstCombinationPressed = true;
|
|
|
|
// Set a timeout to reset the state after a short period (e.g., 1 seconds)
|
|
setTimeout(() => {
|
|
firstCombinationPressed = false;
|
|
}, 1000);
|
|
}
|
|
if (firstCombinationPressed && event.shiftKey &&
|
|
(event.keyCode === 65 ||
|
|
event.keyCode === 70 || event.keyCode === 71 ||
|
|
event.keyCode === 76)) {
|
|
const theme =
|
|
// Shift + A : Authentic theme
|
|
event.keyCode === 65 ? 1 :
|
|
// Shift + F / Shift + G : Framed theme / Gray theme
|
|
(event.keyCode === 70 || event.keyCode === 71) ? 2 :
|
|
// Shift + L : Legacy theme
|
|
event.keyCode === 76 ? 3 : null;
|
|
firstCombinationPressed = false;
|
|
try {
|
|
top.document.documentElement.style.filter = 'grayscale(100%) blur(0.5px) brightness(0.75) opacity(0.5)';
|
|
top.document.documentElement.style.cursor = 'wait';
|
|
top.document.documentElement.style.pointerEvents = 'none';
|
|
} catch (error) {}
|
|
top.location.href = "$webprefix/switch_theme.cgi?theme=" + theme + "";
|
|
}
|
|
});
|
|
})();
|
|
document.currentScript.remove();
|
|
</script>
|
|
EOF
|
|
return $switch_script;
|
|
}
|
|
|
|
####################### grid layout functions
|
|
|
|
=head2 ui_grid_table(&elements, columns, [width-percent], [&tds], [tabletags], [title])
|
|
|
|
Given a list of HTML elements, formats them into a table with the given
|
|
number of columns. However, themes are free to override this to use fewer
|
|
columns where space is limited. Parameters are :
|
|
|
|
=item elements - An array reference of table elements, each of which can be any HTML you like.
|
|
|
|
=item columns - Desired number of columns in the grid.
|
|
|
|
=item width-percent - Optional desired width as a percentage.
|
|
|
|
=item tds - Array ref of HTML attributes for <td> tags in the tables.
|
|
|
|
=item tabletags - HTML attributes for the <table> tag.
|
|
|
|
=item title - Optional title to add to the top of the grid.
|
|
|
|
=cut
|
|
sub ui_grid_table
|
|
{
|
|
return &theme_ui_grid_table(@_) if (defined(&theme_ui_grid_table));
|
|
my ($elements, $cols, $width, $tds, $tabletags, $title) = @_;
|
|
return "" if (!@$elements);
|
|
my $rv = "<table class='ui_grid_table'".
|
|
($width ? " width='$width%'" : "").
|
|
($tabletags ? " ".$tabletags : "").
|
|
">\n";
|
|
my $i;
|
|
for($i=0; $i<@$elements; $i++) {
|
|
$rv .= "<tr class='ui_grid_row'>" if ($i%$cols == 0);
|
|
$rv .= "<td ".$tds->[$i%$cols]." valign='top' class='ui_grid_cell'>".
|
|
$elements->[$i]."</td>\n";
|
|
$rv .= "</tr>" if ($i%$cols == $cols-1);
|
|
}
|
|
if ($i%$cols) {
|
|
while($i%$cols) {
|
|
$rv .= "<td ".$tds->[$i%$cols]." class='ui_grid_cell'>".
|
|
"<br></td>\n";
|
|
$i++;
|
|
}
|
|
$rv .= "</tr>\n";
|
|
}
|
|
$rv .= "</table>\n";
|
|
if (defined($title)) {
|
|
$rv = "<table class='ui_table border' ".
|
|
($width ? " width=$width%" : "").">\n".
|
|
($title ? "<tr".($tb ? " ".$tb : "")."><td><b>$title</b></td></tr>\n" : "").
|
|
"<tr".($cb ? " ".$cb : "")."><td>$rv</td></tr>\n".
|
|
"</table>";
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_radio_table(name, selected, &rows, [no-bold])
|
|
|
|
Returns HTML for a table of radio buttons, each of which has a label and
|
|
some associated inputs to the right. The parameters are :
|
|
|
|
=item name - Unique name for this table, which is also the radio buttons' name.
|
|
|
|
=item selected - Value for the initially selected radio button.
|
|
|
|
=item rows - Array ref of array refs, one per button. The elements of each are the value for this option, a label, and option additional HTML to appear next to it.
|
|
|
|
=item no-bold - When set to 1, labels in the table will not be bolded
|
|
|
|
=cut
|
|
sub ui_radio_table
|
|
{
|
|
return &theme_ui_radio_table(@_) if (defined(&theme_ui_radio_table));
|
|
my ($name, $sel, $rows, $nobold) = @_;
|
|
return "" if (!@$rows);
|
|
my $rv = "<table class='ui_radio_table'>\n";
|
|
foreach my $r (@$rows) {
|
|
$rv .= "<tr>\n";
|
|
$rv .= "<td valign='top'".(defined($r->[2]) ? "" : " colspan='2'").">".
|
|
($nobold ? "" : "<b>").
|
|
&ui_oneradio($name, $r->[0], $r->[1], $r->[0] eq $sel, $r->[3]).
|
|
($nobold ? "" : "</b>").
|
|
"</td>\n";
|
|
if (defined($r->[2])) {
|
|
$rv .= "<td valign='top'>".$r->[2]."</td>\n";
|
|
}
|
|
$rv .= "</tr>\n";
|
|
}
|
|
$rv .= "</table>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_up_down_arrows(uplink, downlink, up-show, down-show)
|
|
|
|
Returns HTML for moving some objects in a table up or down. The parameters are :
|
|
|
|
=item uplink - URL for the up-arrow link.
|
|
|
|
=item downlink - URL for the down-arrow link.
|
|
|
|
=item up-show - Set to 1 if the up-arrow should be shown, 0 if not.
|
|
|
|
=item down-show - Set to 1 if the down-arrow should be shown, 0 if not.
|
|
|
|
=item up-icon - Optional path to icon for up link
|
|
|
|
=item down-icon - Optional path to icon for down link
|
|
|
|
=cut
|
|
sub ui_up_down_arrows
|
|
{
|
|
return &theme_ui_up_down_arrows(@_) if (defined(&theme_ui_up_down_arrows));
|
|
my ($uplink, $downlink, $upshow, $downshow, $upicon, $downicon) = @_;
|
|
my $mover;
|
|
my $imgdir = "@{[&get_webprefix()]}/images";
|
|
$upicon ||= "$imgdir/moveup.gif";
|
|
$downicon ||= "$imgdir/movedown.gif";
|
|
if ($downshow) {
|
|
$mover .= "<a class='ui_up_down_arrows_down' href='$downlink'>".
|
|
"<img class='ui_up_down_arrows_down' src='$downicon' border='0'></a>";
|
|
}
|
|
else {
|
|
$mover .= "<img class='ui_up_down_arrows_gap' src='$imgdir/movegap.gif'>";
|
|
}
|
|
if ($upshow) {
|
|
$mover .= "<a class='ui_up_down_arrows_up' href='$uplink'>".
|
|
"<img class='ui_up_down_arrows_up' src='$upicon' border='0'></a>";
|
|
}
|
|
else {
|
|
$mover .= "<img class='ui_up_down_arrows_gap' src='$imgdir/movegap.gif'>";
|
|
}
|
|
return $mover;
|
|
}
|
|
|
|
=head2 ui_hr
|
|
|
|
Returns a horizontal row tag, typically just an <hr>
|
|
|
|
=item tags - Additional HTML attributes for the <hr> tag.
|
|
|
|
=cut
|
|
sub ui_hr
|
|
{
|
|
return &theme_ui_hr(@_) if (defined(&theme_ui_hr));
|
|
my ($tags) = @_;
|
|
return "<hr class='ui_hr'".($tags ? " ".$tags : "").">\n";
|
|
}
|
|
|
|
=head2 ui_nav_link(direction, url, disabled)
|
|
|
|
Returns an arrow icon linking to the provided url.
|
|
|
|
=cut
|
|
sub ui_nav_link
|
|
{
|
|
return &theme_ui_nav_link(@_) if (defined(&theme_ui_nav_link));
|
|
my ($direction, $url, $disabled) = @_;
|
|
my $alt = $direction eq "left" ? '<-' : '->';
|
|
if ($disabled) {
|
|
return "<img class='ui_nav_link' alt=\"$alt\" align=\"middle\""
|
|
. "src=\"@{[&get_webprefix()]}/images/$direction-grey.gif\">\n";
|
|
}
|
|
else {
|
|
return "<a class='ui_nav_link' href=\"$url\"><img class='ui_nav_link' alt=\"$alt\" align=\"middle\""
|
|
. "src=\"@{[&get_webprefix()]}/images/$direction.gif\"></a>\n";
|
|
}
|
|
}
|
|
|
|
=head2 ui_confirmation_form(cgi, message, &hiddens, [&buttons], [otherinputs], [extra-warning])
|
|
|
|
Returns HTML for a form asking for confirmation before performing some
|
|
action, such as deleting a user. The parameters are :
|
|
|
|
=item cgi - Script to which the confirmation form submits, like delete.cgi.
|
|
|
|
=item message - Warning message for the user to see.
|
|
|
|
=item hiddens - Array ref of two-element array refs, containing hidden form field names and values.
|
|
|
|
=item buttons - Array ref of two-element array refs, containing form button names and labels.
|
|
|
|
=item otheirinputs - HTML for extra inputs to include in their form.
|
|
|
|
=item extra-warning - An additional separate warning message to show.
|
|
|
|
=cut
|
|
sub ui_confirmation_form
|
|
{
|
|
my ($cgi, $message, $hiddens, $buttons, $others, $warning) = @_;
|
|
my $rv;
|
|
$rv .= "<center class='ui_confirmation'>\n";
|
|
$rv .= &ui_form_start($cgi, "post");
|
|
foreach my $h (@$hiddens) {
|
|
$rv .= &ui_hidden(@$h);
|
|
}
|
|
$rv .= "<b>$message</b><p>\n";
|
|
if ($warning) {
|
|
$rv .= "<b><font color='#ff0000'>$warning</font></b><p>\n";
|
|
}
|
|
if ($others) {
|
|
$rv .= $others."<p>\n";
|
|
}
|
|
$rv .= &ui_form_end($buttons);
|
|
$rv .= "</center>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_text_color(text, type)
|
|
|
|
Returns HTML for a text string, with its color determined by $type.
|
|
|
|
=item text - contains any text string
|
|
|
|
=item type - returned text color
|
|
|
|
=cut
|
|
|
|
sub ui_text_color
|
|
{
|
|
my ($text, $type) = @_;
|
|
my ($color, $class_type);
|
|
|
|
if (defined (&theme_ui_text_color)) {
|
|
return &theme_ui_text_color(@_);
|
|
}
|
|
$class_type = $type eq "warn" ? "warning" : $type;
|
|
if ($type eq "success") { $color = "var(--text-color-success, #3c763d)"; }
|
|
elsif ($type eq "info") { $color = "var(--text-color-info, #31708f)"; }
|
|
elsif ($type eq "warn") { $color = "var(--text-color-warning, #8a6d3b)"; }
|
|
elsif ($type eq "danger") { $color = "var(--text-color-danger, #a94442)"; }
|
|
return "<span class=\"ui_text_color text_type_$type text-$class_type\" style=\"color: $color\">$text</span>";
|
|
}
|
|
|
|
=head2 ui_alert_box(msg, type)
|
|
|
|
Returns HTML for an alert box, with background color determined by $type.
|
|
|
|
$msg contains any text or HTML to be contained within the alert box, and
|
|
can include forms.
|
|
|
|
Type of alert:
|
|
|
|
=item success - green
|
|
|
|
=item info - blue
|
|
|
|
=item warn - yellow
|
|
|
|
=item danger - red
|
|
|
|
=cut
|
|
|
|
sub ui_alert_box
|
|
{
|
|
my ($msg, $type) = @_;
|
|
my ($rv, $color);
|
|
|
|
if (defined (&theme_ui_alert_box)) {
|
|
return &theme_ui_alert_box(@_);
|
|
}
|
|
|
|
if ($type eq "success") { $color = "DFF0D8"; }
|
|
elsif ($type eq "info") { $color = "D9EDF7"; }
|
|
elsif ($type eq "warn") { $color = "FCF8E3"; }
|
|
elsif ($type eq "danger") { $color = "F2DEDE"; }
|
|
|
|
$rv .= "<table class='ui_alert_box' width='100%'><tr bgcolor='#$color'><td align='center'><p>\n";
|
|
$rv .= "$msg\n";
|
|
$rv .= "<p></td></tr></table><p>\n";
|
|
|
|
return $rv;
|
|
}
|
|
|
|
####################### javascript functions
|
|
|
|
=head2 js_disable_inputs(&disable-inputs, &enable-inputs, [tag])
|
|
|
|
Returns Javascript to disable some form elements and enable others. Mainly
|
|
for internal use.
|
|
|
|
=cut
|
|
sub js_disable_inputs
|
|
{
|
|
my $rv;
|
|
my $f;
|
|
foreach $f (@{$_[0]}) {
|
|
$rv .= "e = form.elements[\"$f\"]; e.disabled = true; ";
|
|
$rv .= "for(i=0; i<e.length; i++) { e[i].disabled = true; } ";
|
|
}
|
|
foreach $f (@{$_[1]}) {
|
|
$rv .= "e = form.elements[\"$f\"]; e.disabled = false; ";
|
|
$rv .= "for(i=0; i<e.length; i++) { e[i].disabled = false; } ";
|
|
}
|
|
foreach $f (@{$_[1]}) {
|
|
if ($f =~ /^(.*)_def$/ && &indexof($1, @{$_[1]}) >= 0) {
|
|
# When enabling both a _def field and its associated text field,
|
|
# disable the text if the _def is set to 1
|
|
my $tf = $1;
|
|
$rv .= "e = form.elements[\"$f\"]; for(i=0; i<e.length; i++) { if (e[i].checked && e[i].value == \"1\") { form.elements[\"$tf\"].disabled = true } } ";
|
|
}
|
|
}
|
|
return $_[2] ? "$_[2]='$rv'" : $rv;
|
|
}
|
|
|
|
=head2 ui_page_flipper(message, [inputs, cgi], left-link, right-link, [far-left-link], [far-right-link], [below])
|
|
|
|
Returns HTML for moving left and right in some large list, such as an inbox
|
|
or database table. If only 5 parameters are given, no far links are included.
|
|
If any link is undef, that array will be greyed out. The parameters are :
|
|
|
|
=item message - Text or display between arrows.
|
|
|
|
=item inputs - Additional HTML inputs to show after message.
|
|
|
|
=item cgi - Optional CGI for form wrapping arrows to submit to.
|
|
|
|
=item left-link - Link for left-facing arrow.
|
|
|
|
=item right-link - Link for right-facing arrow.
|
|
|
|
=item far-left-link - Link for far left-facing arrow, optional.
|
|
|
|
=item far-right-link - Link for far right-facing arrow, optional.
|
|
|
|
=item below - HTML to display below the arrows.
|
|
|
|
=cut
|
|
sub ui_page_flipper
|
|
{
|
|
return &theme_ui_page_flipper(@_) if (defined(&theme_ui_page_flipper));
|
|
my ($msg, $inputs, $cgi, $left, $right, $farleft, $farright, $below) = @_;
|
|
my $rv = "<center class='ui_page_flipper'>";
|
|
$rv .= &ui_form_start($cgi) if ($cgi);
|
|
|
|
# Far left link, if needed
|
|
if (@_ > 5) {
|
|
if ($farleft) {
|
|
$rv .= "<a href='$farleft'>".
|
|
"<img src='@{[&get_webprefix()]}/images/first.gif' ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
else {
|
|
$rv .= "<img src='@{[&get_webprefix()]}/images/first-grey.gif' ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
}
|
|
|
|
# Left link
|
|
if ($left) {
|
|
$rv .= "<a href='$left'>".
|
|
"<img src=@{[&get_webprefix()]}/images/left.gif ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
else {
|
|
$rv .= "<img src=@{[&get_webprefix()]}/images/left-grey.gif ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
|
|
# Message and inputs
|
|
$rv .= $msg;
|
|
$rv .= " ".$inputs if ($inputs);
|
|
|
|
# Right link
|
|
if ($right) {
|
|
$rv .= "<a href='$right'>".
|
|
"<img src='@{[&get_webprefix()]}/images/right.gif' ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
else {
|
|
$rv .= "<img src='@{[&get_webprefix()]}/images/right-grey.gif' ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
|
|
# Far right link, if needed
|
|
if (@_ > 5) {
|
|
if ($farright) {
|
|
$rv .= "<a href='$farright'>".
|
|
"<img src='@{[&get_webprefix()]}/images/last.gif' ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
else {
|
|
$rv .= "<img src='@{[&get_webprefix()]}/images/last-grey.gif' ".
|
|
"border='0' align='middle'></a>\n";
|
|
}
|
|
}
|
|
|
|
$rv .= "<br>".$below if ($below);
|
|
$rv .= &ui_form_end() if ($cgi);
|
|
$rv .= "</center>\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 js_checkbox_disable(name, &checked-disable, &checked-enable, [tag])
|
|
|
|
For internal use only.
|
|
|
|
=cut
|
|
sub js_checkbox_disable
|
|
{
|
|
my $rv;
|
|
my $f;
|
|
foreach $f (@{$_[1]}) {
|
|
$rv .= "form.elements[\"$f\"].disabled = $_[0].checked; ";
|
|
}
|
|
foreach $f (@{$_[2]}) {
|
|
$rv .= "form.elements[\"$f\"].disabled = !$_[0].checked; ";
|
|
}
|
|
return $_[3] ? "$_[3]='$rv'" : $rv;
|
|
}
|
|
|
|
=head2 ui_form_field_state_javascript(control-name, &active-values, &element-ids, &field-names, [&reset-values])
|
|
|
|
Returns a <script> block that keeps page elements and form fields in sync with
|
|
another form control. When the control's current value is one of active-values,
|
|
the element IDs are shown and field names are enabled. Otherwise the elements
|
|
are hidden, the fields are disabled, and any reset-values are applied.
|
|
|
|
=item control-name - Name of the controlling form field.
|
|
|
|
=item active-values - Array ref of values for which dependents are active.
|
|
|
|
=item element-ids - Array ref of element IDs to show or hide.
|
|
|
|
=item field-names - Array ref of form field names to enable or disable.
|
|
|
|
=item reset-values - Optional hash ref of field name to value to set when disabled.
|
|
|
|
=cut
|
|
sub ui_form_field_state_javascript
|
|
{
|
|
return &theme_ui_form_field_state_javascript(@_)
|
|
if (defined(&theme_ui_form_field_state_javascript));
|
|
my ($control, $values, $ids, $fields, $resets) = @_;
|
|
$values ||= [ ];
|
|
$ids ||= [ ];
|
|
$fields ||= [ ];
|
|
$resets ||= { };
|
|
my $js_quote = sub {
|
|
my ($str) = @_;
|
|
return "'"."e_javascript($str)."'";
|
|
};
|
|
my $js_array = sub {
|
|
my ($arr) = @_;
|
|
return "[".join(",", map { &$js_quote($_) } @$arr)."]";
|
|
};
|
|
my $js_hash = sub {
|
|
my ($hash) = @_;
|
|
return "{".
|
|
join(",", map { &$js_quote($_).":".&$js_quote($hash->{$_}) }
|
|
sort { $a cmp $b } keys %$hash).
|
|
"}";
|
|
};
|
|
my $jcontrol = &$js_quote($control);
|
|
my $jvalues = &$js_array($values);
|
|
my $jids = &$js_array($ids);
|
|
my $jfields = &$js_array($fields);
|
|
my $jresets = &$js_hash($resets);
|
|
return <<EOF;
|
|
<script type='text/javascript'>
|
|
(function() {
|
|
var controlName = $jcontrol,
|
|
activeValues = $jvalues,
|
|
elementIds = $jids,
|
|
fieldNames = $jfields,
|
|
resetValues = $jresets;
|
|
|
|
function currentControlValue() {
|
|
var controls = document.getElementsByName(controlName), i, c;
|
|
for (i = 0; i < controls.length; i++) {
|
|
c = controls[i];
|
|
if (c.type == 'radio' || c.type == 'checkbox') {
|
|
if (c.checked) {
|
|
return c.value;
|
|
}
|
|
}
|
|
else {
|
|
return c.value;
|
|
}
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function hasActiveValue(value) {
|
|
var i;
|
|
for (i = 0; i < activeValues.length; i++) {
|
|
if (String(activeValues[i]) == String(value)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function setFieldValue(field, value) {
|
|
if (field.type == 'radio' || field.type == 'checkbox') {
|
|
field.checked = String(field.value) == String(value);
|
|
}
|
|
else {
|
|
field.value = value;
|
|
}
|
|
}
|
|
|
|
function syncDependentFields() {
|
|
var active = hasActiveValue(currentControlValue()), i, j, elem,
|
|
fields, field, name;
|
|
for (i = 0; i < elementIds.length; i++) {
|
|
elem = document.getElementById(elementIds[i]);
|
|
if (elem) {
|
|
elem.style.display = active ? '' : 'none';
|
|
}
|
|
}
|
|
for (i = 0; i < fieldNames.length; i++) {
|
|
name = fieldNames[i];
|
|
fields = document.getElementsByName(name);
|
|
for (j = 0; j < fields.length; j++) {
|
|
field = fields[j];
|
|
field.disabled = !active;
|
|
if (!active &&
|
|
Object.prototype.hasOwnProperty.call(resetValues, name)) {
|
|
setFieldValue(field, resetValues[name]);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
var controls = document.getElementsByName(controlName), i;
|
|
for (i = 0; i < controls.length; i++) {
|
|
controls[i].addEventListener('change', syncDependentFields);
|
|
controls[i].addEventListener('input', syncDependentFields);
|
|
}
|
|
if (document.readyState == 'loading') {
|
|
document.addEventListener('DOMContentLoaded', syncDependentFields);
|
|
}
|
|
else {
|
|
syncDependentFields();
|
|
}
|
|
})();
|
|
</script>
|
|
EOF
|
|
}
|
|
|
|
=head2 js_redirect(url, [window-object], [timeout])
|
|
|
|
Returns HTML to trigger a redirect to some URL.
|
|
|
|
=cut
|
|
sub js_redirect
|
|
{
|
|
my ($url, $window, $timeout) = @_;
|
|
if (defined(&theme_js_redirect)) {
|
|
return &theme_js_redirect(@_);
|
|
}
|
|
$window = $window && $window =~ /^[\w.]+$/ ? $window : "window";
|
|
$timeout = int($timeout);
|
|
if ($url =~ /^\//) {
|
|
# If the URL is like /foo , add webprefix
|
|
$url = &get_webprefix().$url;
|
|
}
|
|
$url = "e_escape($url);
|
|
# Prevent the URL from terminating or destabilising the enclosing
|
|
# script element. Escaping every "<" stops the HTML parser from ever
|
|
# seeing </script (which would close it) or <!-- (which would enter
|
|
# script-data-escaped state). < evaluates back to "<" in JS, so
|
|
# the redirect target is preserved.
|
|
$url =~ s|<|\\u003C|g;
|
|
return "<script type='text/javascript'>
|
|
setTimeout(function(){
|
|
${window}.location = '$url';
|
|
}, $timeout);
|
|
</script>";
|
|
}
|
|
|
|
=head2 ui_webmin_link(module, page)
|
|
|
|
Returns the URL for a link to this Webmin instance that can be used in an email
|
|
|
|
=cut
|
|
sub ui_webmin_link
|
|
{
|
|
my ($mod, $page) = @_;
|
|
if (defined(&theme_ui_webmin_link)) {
|
|
return &theme_ui_webmin_link(@_);
|
|
}
|
|
my %miniserv;
|
|
&get_miniserv_config(\%miniserv);
|
|
my $proto = $miniserv{'ssl'} ? 'https' : 'http';
|
|
my $port = $miniserv{'port'};
|
|
my $host = $ENV{'HTTP_HOST'} || &get_display_hostname();
|
|
if ($host =~ /^([a-zA-Z0-9\-\_\.]+):(\d+)$/) {
|
|
$host = $1;
|
|
$port = $2;
|
|
}
|
|
my $rv = $proto."://$host:$port";
|
|
if ($mod) {
|
|
$rv .= "/$mod";
|
|
}
|
|
if ($page) {
|
|
$rv .= "/$page";
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_line_break_double()
|
|
|
|
Create double line break, with accessible second break
|
|
|
|
=cut
|
|
sub ui_line_break_double
|
|
{
|
|
if (defined(&theme_ui_line_break_double)) {
|
|
return &theme_ui_line_break_double(@_);
|
|
}
|
|
return "<br><br data-x-br>\n";
|
|
}
|
|
|
|
=head2 ui_page_refresh()
|
|
|
|
Returns theme based JavaScript function to refresh current page
|
|
|
|
=cut
|
|
sub ui_page_refresh
|
|
{
|
|
if (defined(&theme_ui_page_refresh)) {
|
|
return &theme_ui_page_refresh(@_);
|
|
}
|
|
return "window.location.reload()";
|
|
}
|
|
|
|
=head2 ui_details(Config, Opened)
|
|
|
|
Creates a disclosure widget in which information is visible only when
|
|
the widget is toggled into an "open" state.
|
|
|
|
=cut
|
|
sub ui_details
|
|
{
|
|
my ($c, $o) = @_;
|
|
if (defined(&theme_ui_details)) {
|
|
return &theme_ui_details(@_);
|
|
}
|
|
|
|
my $rv;
|
|
if (!$c->{'html'}) {
|
|
$c->{'title'} = &html_escape($c->{'title'}, 1);
|
|
$c->{'content'} = &html_escape($c->{'content'}, 1);
|
|
}
|
|
$c->{'class'} = " class=\"@{["e_escape($c->{'class'})]}\"" if($c->{'class'});
|
|
$o = ' open' if ($o);
|
|
$rv = "<details$c->{'class'}$o>";
|
|
$rv .= "<summary>$c->{'title'}</summary>";
|
|
$rv .= "<span>$c->{'content'}</span>";
|
|
$rv .= "</details>";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_div(data)
|
|
|
|
Returns passed HTML as div element
|
|
|
|
=cut
|
|
sub ui_div
|
|
{
|
|
return &theme_ui_div(@_) if (defined(&theme_ui_div));
|
|
my ($data) = @_;
|
|
return &ui_tag('div', $data, { 'class' => 'ui_div' });
|
|
}
|
|
|
|
=head2 ui_div_row(label, content)
|
|
|
|
Prints a row without using a table and
|
|
places label and content in a way
|
|
ui_table_row does
|
|
|
|
=cut
|
|
sub ui_div_row
|
|
{
|
|
if (defined(&theme_ui_div_row)) {
|
|
return &theme_ui_div_row(@_);
|
|
}
|
|
my ($label, $content) = @_;
|
|
return "<div class='ui_div_row'><span>$label</span><span>$content</span></div>\n";
|
|
}
|
|
|
|
=head2 ui_space(number)
|
|
|
|
Prints no breakable space number of given times
|
|
|
|
=cut
|
|
sub ui_space
|
|
{
|
|
if (defined(&theme_ui_space)) {
|
|
return &theme_ui_space(@_);
|
|
}
|
|
my ($number) = @_;
|
|
$number ||= 1;
|
|
return "<span class='ui_space'>".(" " x $number)."</span>\n";
|
|
}
|
|
|
|
=head2 ui_newline(number)
|
|
|
|
Prints new lines given number of times
|
|
|
|
=cut
|
|
sub ui_newline
|
|
{
|
|
if (defined(&theme_ui_newline)) {
|
|
return &theme_ui_newline(@_);
|
|
}
|
|
my ($number) = @_;
|
|
$number ||= 1;
|
|
return "<span class='ui_newline'>".("<br>" x $number)."</span>\n";
|
|
}
|
|
|
|
=head2 ui_text_wrap(text)
|
|
|
|
Wraps any text into span tags
|
|
|
|
=cut
|
|
sub ui_text_wrap
|
|
{
|
|
if (defined(&theme_ui_text_wrap)) {
|
|
return &theme_ui_text_wrap(@_);
|
|
}
|
|
my ($text) = @_;
|
|
return "<span class='ui_text_wrap'>$text</span>\n";
|
|
}
|
|
|
|
=head2 ui_element_inline(text)
|
|
|
|
Wraps any text into span tags
|
|
|
|
=cut
|
|
sub ui_element_inline
|
|
{
|
|
if (defined(&theme_ui_element_inline)) {
|
|
return &theme_ui_element_inline(@_);
|
|
}
|
|
my ($element, $type) = @_;
|
|
return "<span data-element='$type' class='ui_element_inline'>$element</span>\n";
|
|
}
|
|
|
|
=head2 ui_paginations(&array, &opts)
|
|
|
|
Given an array reference, slice it and return hash
|
|
reference with pagination buttons, search form
|
|
and other elements to be inserted on the page
|
|
|
|
=cut
|
|
sub ui_paginations
|
|
{
|
|
return &theme_ui_paginations(@_)
|
|
if (defined(&theme_ui_paginations));
|
|
|
|
my ($arr, $opts) = @_;
|
|
my %rv;
|
|
my $id = $main::ui_paginations++;
|
|
my @arr = @{$arr};
|
|
my ($script_name) = $0 =~ /([^\/]*\.cgi)$/;
|
|
my $top_offset_px = int($opts->{'paginations'}->{'offset'}->{'top'}) || 105;
|
|
my $bottom_offset_px = int($opts->{'paginations'}->{'offset'}->{'bottom'}) || 90;
|
|
my $row_size_px = int($opts->{'paginations'}->{'offset'}->{'row'}) || 24;
|
|
my $items_per_page = int($tconfig{'paginate'}) || int($opts->{"paginate${id}"}) || 20;
|
|
my $curent_page = int($opts->{"page${id}"}) || 1;
|
|
my $search_term = &un_urlize($opts->{"search${id}"});
|
|
my $pagination_target = $opts->{'paginations'}->{'paginator'}->{'target'} || $script_name;
|
|
my $paginator_wrap_class = $opts->{'paginations'}->{'paginator'}->{'class'}->{'wrap'} || "ui_form_elements_wrapper_paginator";
|
|
my $link_page_cls = $opts->{'paginations'}->{'paginator'}->{'class'}->{'links'} || 'ui_link_pagination';
|
|
my $link_search_cls = $opts->{'paginations'}->{'paginator'}->{'class'}->{'textbox'} || 'ui_textbox_pagination';
|
|
my $text_showing_cls = $opts->{'paginations'}->{'paginator'}->{'class'}->{'text'} || 'ui_showing_items';
|
|
my $search_target = $opts->{'paginations'}->{'search'}->{'target'} || $script_name;
|
|
my $search_wrap_class = $opts->{'paginations'}->{'search'}->{'class'}->{'wrap'} || "ui_form_elements_wrapper_search";
|
|
my $search_placeholder = $opts->{'paginations'}->{'search'}->{'placeholder'} || $text{'ui_searchok'};
|
|
my $exported_form = $opts->{'paginations'}->{'form'};
|
|
my $ui_column_colspan = int($exported_form->{'colspan'} || 4);
|
|
|
|
# If we have a search string filter existing content
|
|
if (ref($arr) eq 'ARRAY' && $arr->[0]) {
|
|
if ($search_term) {
|
|
my @sarr;
|
|
map {
|
|
if (ref($_) eq 'ARRAY') {
|
|
arr: for (my $i = 0; $i <= $#$_; $i++) {
|
|
push(@sarr, $_), last arr
|
|
if(index(lc($_->[$i]), lc($search_term)) != -1);
|
|
}
|
|
}
|
|
if (ref($_) eq 'HASH') {
|
|
hash: foreach my $__ (values %{$_}) {
|
|
push(@sarr, $_), last hash
|
|
if(index(lc($__), lc($search_term)) != -1);
|
|
}
|
|
}
|
|
} @arr;
|
|
@arr = @sarr;
|
|
}
|
|
|
|
# Can pagination be done automatically
|
|
# depending on the client screen height?
|
|
my $items_per_page_client = int($opts->{'client_height'} || get_http_cookie('client_height'));
|
|
my $items_per_page =
|
|
$tconfig{'paginate'} ?
|
|
$items_per_page :
|
|
(int($ENV{'HTTP_X_CLIENT_PAGINATE'}) ||
|
|
($items_per_page_client ?
|
|
((int(($items_per_page_client -
|
|
$top_offset_px - $bottom_offset_px) / $row_size_px))) : $items_per_page));
|
|
# If caller wants specific pagination number,
|
|
# e.g. a module config, use that instead
|
|
if ($exported_form && $exported_form->{'paginate'}) {
|
|
$items_per_page = $exported_form->{'paginate'};
|
|
}
|
|
|
|
# Sanity check for minimum items per page
|
|
if ($items_per_page <= 0) {
|
|
$items_per_page = 2;
|
|
}
|
|
|
|
# Pagination
|
|
my $totals_items_original = scalar(@arr);
|
|
my $total_pages = ceil(($totals_items_original) / $items_per_page);
|
|
my $total_pages_length = length($total_pages);
|
|
|
|
# Dynamically parse external form elements into query string
|
|
my $exported_form_query = "";
|
|
if ($exported_form) {
|
|
foreach (keys %{$exported_form}) {
|
|
$exported_form_query .= "$_=@{[&urlize($exported_form->{$_})]}&";
|
|
}
|
|
$exported_form_query =~ s/\&$//;
|
|
}
|
|
|
|
# Return pagination jumper only
|
|
# if there is more than one page
|
|
if ($total_pages > 1) {
|
|
my $totals_items_spliced = $totals_items_original;
|
|
my $start_page_with = $curent_page * $items_per_page;
|
|
$curent_page = $total_pages
|
|
if ($curent_page > $total_pages);
|
|
$curent_page = 1
|
|
if ($curent_page <= 0);
|
|
|
|
my $curent_page_prev = $curent_page - 1;
|
|
my $page_prev_disabled = $curent_page_prev <= 0 ? " disabled" : "";
|
|
my $curent_page_next = $curent_page + 1;
|
|
my $page_next_disabled = $curent_page_next > $total_pages ? " disabled" : "";
|
|
my $splice_start = $items_per_page * $curent_page_prev;
|
|
my $splice_end = $items_per_page;
|
|
@arr = splice(@arr, $splice_start, $splice_end);
|
|
$totals_items_spliced = scalar(@arr);
|
|
|
|
#
|
|
# Pagination jumper
|
|
#
|
|
my $paginator_id = 'paginator-form';
|
|
my $paginator_data = "$paginator_id-data";
|
|
|
|
# Paginator form
|
|
$rv{'paginator'}->{'form'} =
|
|
&ui_form_start($pagination_target, 'get', undef, "id='$paginator_id${id}'");
|
|
$rv{'paginator'}->{'form'} .= &ui_form_end();
|
|
|
|
# Paginator form data
|
|
$rv{'paginator'}->{'form-data'} = &ui_hidden("search${id}", $search_term, "$paginator_id${id}")
|
|
if ($search_term);
|
|
$rv{'paginator'}->{'form-data'} .= &ui_hidden("paginate${id}", $items_per_page, "$paginator_id${id}");
|
|
|
|
# Calculate showing start and range numbers
|
|
my $current_showing_start =
|
|
$curent_page == 1 ? 1 : int(($items_per_page * $curent_page + 1) - $items_per_page);
|
|
my $current_showing_range =
|
|
int($current_showing_start + $items_per_page > $totals_items_original ?
|
|
$totals_items_original : $current_showing_start + $items_per_page - 1);
|
|
|
|
# Showing items range selector text
|
|
$rv{'paginator'}->{'form-data'} .=
|
|
"<span class='@{["e_escape($text_showing_cls)]}-1'>@{[
|
|
&text('paginator_showing_start', $current_showing_start,
|
|
$current_showing_range, $totals_items_original) ]} </span>";
|
|
#
|
|
# Arrow links
|
|
#
|
|
my $search_term_urlize = &urlize($search_term);
|
|
my $curent_page_prev_urlize = &urlize($curent_page_prev);
|
|
my $curent_page_next_urlize = &urlize($curent_page_next);
|
|
my $items_per_page_urlize = &urlize($items_per_page);
|
|
my $total_pages_html_escape = &html_escape($total_pages);
|
|
|
|
# Arrow link left
|
|
$rv{'paginator'}->{'form-data'} .=
|
|
&ui_link("$pagination_target?page${id}=$curent_page_prev_urlize".
|
|
"&search${id}=$search_term_urlize&paginate${id}=$items_per_page_urlize".'&'."$exported_form_query",
|
|
'<span> ⏴ </span>',
|
|
"@{[&html_escape($link_page_cls)]} @{[&html_escape($link_page_cls)]}_left$page_prev_disabled",
|
|
"data-formid='$id'");
|
|
|
|
# Page number input selector
|
|
$rv{'paginator'}->{'form-data'} .=
|
|
&ui_textbox("page${id}", $curent_page, $total_pages_length, undef, $total_pages_length,
|
|
"data-class='@{["e_escape($link_search_cls)]}' form='$paginator_id${id}'");
|
|
|
|
# Out of pages text
|
|
$rv{'paginator'}->{'form-data'} .=
|
|
" <span class='@{["e_escape($text_showing_cls)]}-2'>@{[&text('paginator_showing_end',
|
|
$total_pages_html_escape)]}</span>";
|
|
|
|
# Arrow link right
|
|
$rv{'paginator'}->{'form-data'} .=
|
|
&ui_link("$pagination_target?page${id}=$curent_page_next_urlize".
|
|
"&search${id}=$search_term_urlize&paginate${id}=$items_per_page_urlize".'&'."$exported_form_query",
|
|
'<span> ⏵ </span>',
|
|
"@{[&html_escape($link_page_cls)]} @{[&html_escape($link_page_cls)]}_right$page_next_disabled",
|
|
"data-formid='$id'");
|
|
|
|
# Allow listing pages using "Alt + left/right" hotkeys
|
|
if (!$ENV{'HTTP_X_CLIENT_PAGINATE_NO_SCRIPT'}) {
|
|
$rv{'paginator'}->{'form-scripts'} .=
|
|
"<script>\n".
|
|
" document.addEventListener('keydown', function(a) {\n".
|
|
" if (a.altKey) {\n".
|
|
" if (a.which === 37 || a.which === 39) {\n".
|
|
" let b = 'ui_link_pagination',\n".
|
|
" f = 'data-formid=\"$id\"',\n".
|
|
" d = 'disabled',\n".
|
|
" l = document.querySelector('.' + b + '_left[' + f + ']:not(.' + d + ')'),\n".
|
|
" r = document.querySelector('.' + b + '_right[' + f + ']:not(.' + d + ')');\n".
|
|
" if (a.which === 37 && l && l.checkVisibility()) {\n".
|
|
" l.click();\n".
|
|
" } else if (a.which === 39 && r && r.checkVisibility()) {\n".
|
|
" r.click();\n".
|
|
" }\n".
|
|
" }\n".
|
|
" }\n".
|
|
" });\n".
|
|
"</script>";
|
|
}
|
|
|
|
# Dynamically adding external form elements
|
|
if ($exported_form) {
|
|
foreach (keys %{$exported_form}) {
|
|
$rv{'paginator'}->{'form-data'} .=
|
|
&ui_hidden($_, $exported_form->{$_}, "$paginator_id${id}");
|
|
}
|
|
}
|
|
$rv{'paginator'}->{'form-data'} =
|
|
&ui_form_elements_wrapper($rv{'paginator'}->{'form-data'}, "$paginator_id${id}",
|
|
"e_escape($paginator_wrap_class))
|
|
}
|
|
#
|
|
# Search form
|
|
#
|
|
if ($total_pages > 1 || $search_term) {
|
|
my $search_id = 'search-form';
|
|
my $search_data = "$search_id-data";
|
|
|
|
# Paginator search form
|
|
$rv{'search'}->{'form'} =
|
|
&ui_form_start($search_target, 'get', undef, "id='$search_id${id}'");
|
|
$rv{'search'}->{'form'} .= &ui_form_end();
|
|
|
|
# Paginator search form data
|
|
$rv{'search'}->{'form-data'} .= &ui_hidden("paginate${id}", $items_per_page, "$search_id${id}");
|
|
$rv{'search'}->{'form-data'} .= &ui_hidden("page${id}", 1, "$search_id${id}");
|
|
my $search_placeholder_length = length($search_term) || length($search_placeholder);
|
|
$search_placeholder_length = $search_placeholder_length < 8 ? 8 : $search_placeholder_length;
|
|
$search_placeholder_length = 24 if ($search_placeholder_length >= 24);
|
|
|
|
# Search box
|
|
$rv{'search'}->{'form-data'} .=
|
|
&ui_textbox("search${id}", $search_term, $search_placeholder_length, undef, undef,
|
|
"data-class='@{["e_escape($link_search_cls)]}_search' ".
|
|
"placeholder='@{["e_escape($search_placeholder)]}' form='$search_id${id}'");
|
|
|
|
# Search reset using JS
|
|
$rv{'search'}->{'form-data'} .=
|
|
&ui_reset('⛌', undef,
|
|
"onclick='document.getElementById(\"$search_id${id}\").search${id}.value = \"\";".
|
|
"document.getElementById(\"$search_id${id}\").submit()'");
|
|
|
|
# Dynamically adding external form elements
|
|
if ($exported_form) {
|
|
foreach (keys %{$exported_form}) {
|
|
$rv{'search'}->{'form-data'} .=
|
|
&ui_hidden($_, $exported_form->{$_}, "$search_id${id}");
|
|
}
|
|
}
|
|
$rv{'search'}->{'form-data'} =
|
|
&ui_form_elements_wrapper($rv{'search'}->{'form-data'},
|
|
"$search_id${id}", "e_escape($search_wrap_class));
|
|
|
|
# Search no results
|
|
$rv{'search'}->{'no-results'} =
|
|
&ui_columns_row([&text('paginator_nosearchrs', &html_escape($search_term))],
|
|
['colspan="'.$ui_column_colspan.'" align="center"']);
|
|
}
|
|
|
|
# Elements for the parent form, so after submission to
|
|
# make sure that we return to the right paginated page
|
|
$rv{'form'} = &ui_hidden("page${id}", $curent_page).
|
|
&ui_hidden("paginate${id}", $items_per_page).
|
|
&ui_hidden("search${id}", $search_term);
|
|
}
|
|
@$arr = @arr;
|
|
return \%rv;
|
|
}
|
|
|
|
=head2 ui_hide_outside_of_viewport(elem)
|
|
|
|
Prints element if not in viewport. Useful
|
|
when printing top and bottom controls as
|
|
printing bottom controls only if it's not
|
|
in view already
|
|
|
|
=cut
|
|
sub ui_hide_outside_of_viewport
|
|
{
|
|
my ($elem_sel) = @_;
|
|
$elem_sel ||= "[data-outside-of-viewport]";
|
|
if (defined(&theme_ui_hide_outside_of_viewport)) {
|
|
return &theme_ui_hide_outside_of_viewport(@_);
|
|
}
|
|
return <<EOF;
|
|
<script type='text/javascript'>
|
|
try {
|
|
(function() {
|
|
var elems = document.querySelectorAll('$elem_sel'),
|
|
i;
|
|
for (i = 0; i < elems.length; i++) {
|
|
if (elems[i].offsetTop < window.innerHeight) {
|
|
elems[i].style.display = "none";
|
|
}
|
|
}
|
|
})();
|
|
} catch (e) {};
|
|
</script>
|
|
EOF
|
|
}
|
|
|
|
=head2 ui_read_file_contents_limit(\%data)
|
|
|
|
Reads file content with options and
|
|
returns head and/or tail separated with
|
|
chomped message
|
|
|
|
=cut
|
|
sub ui_read_file_contents_limit
|
|
{
|
|
if (defined(&theme_ui_read_file_contents_limit)) {
|
|
return &theme_ui_read_file_contents_limit(@_);
|
|
}
|
|
my ($opts) = @_;
|
|
my $binary = -s $opts->{'file'} >= 128 && -B $opts->{'file'};
|
|
my $data = &read_file_contents_limit($opts->{'file'}, $opts->{'limit'}, $opts);
|
|
my $error = $data->{'error'};
|
|
if ($error) {
|
|
return $error;
|
|
}
|
|
my $nonulls = sub {
|
|
$_[0] =~ s/[^[:print:]\n\r\t]/\ /g;
|
|
return $_[0];
|
|
};
|
|
my $head = $data->{'head'};
|
|
my $tail = $data->{'tail'};
|
|
my $chomped = $data->{'chomped'};
|
|
my $fsize = $data->{'size'};
|
|
my $flimit = $data->{'limit'};
|
|
my $msg_type = !$head && $tail ? '_tail' :
|
|
$head && !$tail ? '_head' : undef;
|
|
my $nlines = $nslines = $nelines = "\n" x 10;
|
|
$nslines = undef if (!$head);
|
|
$nelines = undef if (!$tail);
|
|
my $chomped_msg;
|
|
$chomped_msg =
|
|
"${nslines}[--- @{[&text(\"file_truncated_message$msg_type\",
|
|
&nice_size($flimit),
|
|
&nice_size($chomped),
|
|
&nice_size($fsize))]} ---]$nelines"
|
|
if ($chomped);
|
|
|
|
# Trim nulls
|
|
$head = &$nonulls($head)
|
|
if ($binary && $head);
|
|
$tail = &$nonulls($tail)
|
|
if ($binary && $tail);
|
|
|
|
# Return data
|
|
if ($head && $tail) {
|
|
return $head . $chomped_msg . $tail;
|
|
}
|
|
if ($tail) {
|
|
return $chomped_msg . $tail;
|
|
}
|
|
if ($head) {
|
|
return $head . $chomped_msg;
|
|
}
|
|
}
|
|
|
|
=head2 ui_note(text, [whitespace-count])
|
|
|
|
Returns a note as a small font size text
|
|
|
|
=cut
|
|
sub ui_note
|
|
{
|
|
return &theme_ui_note(@_) if (defined(&theme_ui_note));
|
|
my ($text, $whitespace) = @_;
|
|
$whitespace //= 2;
|
|
my $whitespace_str = " " x $whitespace;
|
|
return "<font class='ui_note' style='font-size:92%;opacity:0.66'>".
|
|
"${whitespace_str}ⓘ $text".
|
|
"</font>";
|
|
}
|
|
|
|
=head2 ui_brh()
|
|
|
|
Returns a break line with ability to style height
|
|
|
|
=cut
|
|
sub ui_brh
|
|
{
|
|
return &theme_ui_brh() if (defined(&theme_ui_brh));
|
|
return "<br data-x-br>\n";
|
|
}
|
|
|
|
# ui_tag_start(tag, [attrs])
|
|
# Function to create an opening HTML tag with optional attributes.
|
|
# Attributes are passed as a hash reference and its values are quote escaped.
|
|
sub ui_tag_start
|
|
{
|
|
return theme_ui_tag_start(@_) if (defined(&theme_ui_tag_start));
|
|
my ($tag, $attrs) = @_;
|
|
|
|
# Ensure every tag gets a proper marker class
|
|
$attrs ||= {};
|
|
$attrs->{'class'} = defined($attrs->{class})
|
|
? "ui--$tag $attrs->{class}"
|
|
: "ui--$tag";
|
|
|
|
# Start building tag
|
|
my $rv = "<$tag";
|
|
|
|
# Add attributes if provided
|
|
if ($attrs && ref($attrs) eq 'HASH') {
|
|
foreach my $key (keys %$attrs) {
|
|
my $value = $attrs->{$key};
|
|
if (defined($value)) {
|
|
$value = "e_escape($value, '"');
|
|
$value =~ tr/\n\t//d;
|
|
$value =~ s/\s+/ /g;
|
|
$rv .= " $key=\"$value\"" ;
|
|
}
|
|
elsif ($key) {
|
|
$rv .= " $key";
|
|
}
|
|
}
|
|
}
|
|
|
|
# Close the opening tag
|
|
$rv .= ">";
|
|
|
|
# Handle special case for <html> tag
|
|
$rv = "<!DOCTYPE html>\n$rv" if ($tag eq 'html');
|
|
|
|
return $rv;
|
|
}
|
|
|
|
# ui_tag_content(content)
|
|
# Function to handle the content of an HTML tag.
|
|
sub ui_tag_content
|
|
{
|
|
return theme_ui_tag_content(@_) if (defined(&theme_ui_tag_content));
|
|
my ($content) = @_;
|
|
my $rv;
|
|
$rv = $content if (defined($content));
|
|
return $rv;
|
|
}
|
|
|
|
# ui_tag_end(tag)
|
|
# Function to create a closing HTML tag.
|
|
sub ui_tag_end
|
|
{
|
|
return theme_ui_tag_end(@_) if (defined(&theme_ui_tag_end));
|
|
my ($tag) = @_;
|
|
return "</$tag>\n";
|
|
}
|
|
|
|
# ui_tag(tag, [content], [attrs])
|
|
# Function to create a complete HTML tag with optional content and attributes.
|
|
sub ui_tag
|
|
{
|
|
return theme_ui_tag(@_) if (defined(&theme_ui_tag));
|
|
my ($tag, $content, $attrs) = @_;
|
|
my $rv = ui_tag_start($tag, $attrs);
|
|
$rv .= ui_tag_content($content) if (defined($content));
|
|
my %void_tags = map { $_ => 1 }
|
|
qw(
|
|
area base br col embed hr img input link
|
|
meta param source track wbr
|
|
);
|
|
$rv .= ui_tag_end($tag) if (!exists($void_tags{lc($tag)}));
|
|
return $rv;
|
|
}
|
|
|
|
# ui_alert(content, type, [icon], [attrs])
|
|
# Generates an HTML alert with the specified content, type, and optional icon
|
|
# and attributes.
|
|
#
|
|
# Parameters:
|
|
# content - The main message/body of the alert
|
|
# type - Alert style: "success", "info", "warning", "danger", "danger-fatal"
|
|
# icon - Optional. Controls icon and title display:
|
|
# - If undefined: uses default icon and title for the alert type
|
|
# - If string: uses as icon class with default title
|
|
# - If array ref [icon, title, no_break]:
|
|
# - icon: Icon class
|
|
# - title: Custom title (if undef, uses default for type)
|
|
# - no_break: If 1, no line break after title (space instead)
|
|
# attrs - Optional hash ref of additional HTML attributes for the alert div
|
|
#
|
|
# Examples:
|
|
# ui_alert("Operation completed", "success");
|
|
# ui_alert("Access denied", "danger", "fa-lock");
|
|
# ui_alert("Settings changed", "info", ["fa-info-circle", "", 1]);
|
|
# ui_alert("Server offline", "warning", undef, {id => "server-status"});
|
|
sub ui_alert
|
|
{
|
|
return theme_ui_alert(@_) if (defined(&theme_ui_alert));
|
|
my ($content, $type, $icon, $attrs) = @_;
|
|
|
|
# Default alert type
|
|
$type ||= 'info';
|
|
|
|
# Default icons and titles based on type
|
|
my %type_defaults = (
|
|
'success' => {
|
|
'icon' => 'fa-check-circle',
|
|
'title' => $text{'ui_success'}
|
|
},
|
|
'info' => {
|
|
'icon' => 'fa-info-circle',
|
|
'title' => $text{'ui_info'}
|
|
},
|
|
'warning' => {
|
|
'icon' => 'fa-exclamation-triangle',
|
|
'title' => $text{'ui_warning'}
|
|
},
|
|
'danger' => {
|
|
'icon' => 'fa-bolt',
|
|
'title' => $text{'ui_error'}
|
|
},
|
|
'danger-fatal' => {
|
|
'icon' => 'fa-exclamation-triangle',
|
|
'title' => $text{'ui_error_fatal'}
|
|
}
|
|
);
|
|
|
|
my $use_icon = '';
|
|
my $use_title = '';
|
|
my $use_br = 1; # Default to using line break
|
|
|
|
# Process icon parameter
|
|
if (!defined($icon)) {
|
|
# Use defaults based on type
|
|
if ($type_defaults{$type}) {
|
|
$use_icon = $type_defaults{$type}{'icon'};
|
|
$use_title = $type_defaults{$type}{'title'};
|
|
}
|
|
}
|
|
elsif (ref($icon)) {
|
|
# Array format [icon_class, title, no_br]
|
|
if (defined($icon->[0])) {
|
|
$use_icon = $icon->[0];
|
|
}
|
|
else {
|
|
$use_icon = $type_defaults{$type}{'icon'};
|
|
}
|
|
|
|
# Title: if provided use it, else use default for type
|
|
if (defined($icon->[1])) {
|
|
$use_title = $icon->[1];
|
|
}
|
|
elsif ($type_defaults{$type}) {
|
|
$use_title = $type_defaults{$type}{'title'};
|
|
}
|
|
|
|
# Line break flag: 1 = no break, anything else = break
|
|
$use_br = $icon->[2] ? 0 : 1 if (defined($icon->[2]));
|
|
}
|
|
else {
|
|
# String format: just the icon class
|
|
$use_icon = $icon;
|
|
$use_title = $type_defaults{$type} ? $type_defaults{$type}{'title'} : '';
|
|
}
|
|
|
|
# Prepare attributes for the alert div
|
|
my $all_attrs = $attrs || {};
|
|
|
|
# Add alert class
|
|
my $class = 'alert';
|
|
$class .= ' alert-'.$type if ($type);
|
|
|
|
$all_attrs->{'class'} = $all_attrs->{'class'}
|
|
? "$class $all_attrs->{'class'}"
|
|
: $class;
|
|
|
|
# Build alert
|
|
my $rv = '';
|
|
|
|
# Start alert container
|
|
$rv .= ui_tag_start('div', $all_attrs);
|
|
|
|
# Add icon and title if either is available
|
|
if ($use_icon || $use_title) {
|
|
# Add icon if available
|
|
if ($use_icon) {
|
|
$rv .= ui_tag('i', undef, { 'class' => "fa fa-fw $use_icon" });
|
|
$rv .= ' ';
|
|
}
|
|
|
|
# Add title if available
|
|
if ($use_title) {
|
|
$rv .= ui_tag('strong', $use_title);
|
|
}
|
|
|
|
# Add line break if needed
|
|
if ($use_br) {
|
|
$rv .= '<br>';
|
|
}
|
|
else {
|
|
$rv .= ' ';
|
|
}
|
|
$rv .= "\n";
|
|
}
|
|
|
|
# Add main content
|
|
$rv .= ui_tag_content(ui_tag('span', $content));
|
|
|
|
# Close alert container
|
|
$rv .= ui_tag_end('div');
|
|
|
|
return $rv;
|
|
}
|
|
|
|
# ui_button_icon(text, icon, [attrs])
|
|
# Creates a button with an icon and text
|
|
# Parameters:
|
|
# text - The text/label for the button
|
|
# icon - Icon class
|
|
# attrs - Optional hash ref of additional HTML attributes
|
|
#
|
|
# Examples:
|
|
# ui_button_icon("Save", "save", {class => "primary"})
|
|
# ui_button_icon("Delete", "trash", {type => "submit", name => "delete"})
|
|
sub ui_button_icon
|
|
{
|
|
return theme_ui_button_icon(@_) if (defined(&theme_ui_button_icon));
|
|
my ($text, $icon, $attrs) = @_;
|
|
|
|
# Default to button type if not specified
|
|
my $all_attrs = $attrs || {};
|
|
$all_attrs->{'type'} ||= 'button';
|
|
|
|
# Button class
|
|
my $btn_cls = $all_attrs->{'class'};
|
|
$all_attrs->{'class'} = "btn " . ($btn_cls
|
|
? ($btn_cls =~ /^btn-/ ? $btn_cls
|
|
: "btn-$btn_cls") : 'btn-default');
|
|
|
|
# Build the button
|
|
my $rv = ui_tag_start('button', $all_attrs);
|
|
|
|
# Add icon if specified
|
|
if ($icon) {
|
|
my $icon_class = "";
|
|
|
|
# Check if icon specifies a specific bundle (fa2)
|
|
if ($icon =~ /^fa2-/) {
|
|
$icon_class = "fa2 $icon";
|
|
}
|
|
# Check if it already has fa- prefix
|
|
elsif ($icon =~ /^fa-/) {
|
|
$icon_class = "fa $icon";
|
|
}
|
|
# Otherwise add the default fa- prefix
|
|
else {
|
|
$icon_class = "fa fa-$icon";
|
|
}
|
|
$rv .= ui_tag('i', undef, {'class' => $icon_class});
|
|
$rv .= " ";
|
|
}
|
|
|
|
# Add text
|
|
$rv .= ui_tag_content($text) if defined($text);
|
|
|
|
# Close the button
|
|
$rv .= ui_tag_end('button');
|
|
|
|
return $rv;
|
|
}
|
|
|
|
# ui_link_icon(href, text, [icon], [attrs])
|
|
# Creates a link with an icon and text
|
|
# Parameters:
|
|
# href - The URL for the link
|
|
# text - The text/label for the link
|
|
# icon - Icon class
|
|
# attrs - Optional hash ref of additional HTML attributes
|
|
#
|
|
# Examples:
|
|
# ui_link_icon("view.cgi?id=1", "View Details", "eye", {class => "primary"})
|
|
# ui_link_icon("docs.html", "Documentation", "book", {target => "_blank"})
|
|
sub ui_link_icon
|
|
{
|
|
return theme_ui_link_icon(@_) if (defined(&theme_ui_link_icon));
|
|
my ($href, $text, $icon, $attrs) = @_;
|
|
|
|
# Create attribute hash and set href
|
|
my $all_attrs = $attrs || {};
|
|
$all_attrs->{'href'} = $href if (defined($href));
|
|
|
|
# Button class
|
|
my $btn_cls = $all_attrs->{'class'};
|
|
$all_attrs->{'class'} = "btn " . ($btn_cls
|
|
? ($btn_cls =~ /^btn-/ ? $btn_cls
|
|
: "btn-$btn_cls") : 'btn-default');
|
|
|
|
# Build the link
|
|
my $rv = ui_tag_start('a', $all_attrs);
|
|
|
|
# Add icon if specified
|
|
if ($icon) {
|
|
my $icon_class = "";
|
|
|
|
# Check if icon specifies a specific bundle (fa2)
|
|
if ($icon =~ /^fa2-/) {
|
|
$icon_class = "fa2 $icon";
|
|
}
|
|
# Check if it already has fa- prefix
|
|
elsif ($icon =~ /^fa-/) {
|
|
$icon_class = "fa $icon";
|
|
}
|
|
# Otherwise add the default fa- prefix
|
|
else {
|
|
$icon_class = "fa fa-$icon";
|
|
}
|
|
$rv .= ui_tag('i', undef, {'class' => $icon_class});
|
|
$rv .= " ";
|
|
}
|
|
|
|
# Add text
|
|
$rv .= ui_tag_content($text) if (defined($text));
|
|
|
|
# Close the link
|
|
$rv .= ui_tag_end('a');
|
|
|
|
return $rv;
|
|
}
|
|
|
|
# ui_icon(icon, [attrs])
|
|
# Creates an icon element
|
|
# Parameters:
|
|
# icon - Icon class (with or without fa- prefix)
|
|
# attrs - Optional hash ref of additional HTML attributes
|
|
#
|
|
# Examples:
|
|
# ui_icon("search") # Standard icon
|
|
# ui_icon("fa2-warning") # Extended icon set
|
|
sub ui_icon
|
|
{
|
|
return theme_ui_icon(@_) if (defined(&theme_ui_icon));
|
|
my ($icon, $attrs) = @_;
|
|
|
|
return "" if (!defined($icon)) || $icon eq '';
|
|
|
|
# Create attribute hash
|
|
my $all_attrs = $attrs || {};
|
|
|
|
# Process icon class
|
|
my $icon_class = "";
|
|
|
|
# Check if icon is in a specific bundle
|
|
if ($icon =~ /^fa2-/) {
|
|
$icon_class = "fa2 $icon";
|
|
}
|
|
elsif ($icon =~ /^fa-/) {
|
|
$icon_class = "fa $icon";
|
|
}
|
|
else {
|
|
$icon_class = "fa fa-$icon";
|
|
}
|
|
|
|
# Make icon always fixed width unless specified otherwise
|
|
$icon_class .= " fa-fw" if ($all_attrs->{'class'} !~ /fa-dw/);
|
|
|
|
# Add icon class to any existing classes
|
|
if ($all_attrs->{'class'}) {
|
|
$all_attrs->{'class'} .= " $icon_class";
|
|
} else {
|
|
$all_attrs->{'class'} = $icon_class;
|
|
}
|
|
|
|
# Build the icon tag
|
|
return ui_tag('i', undef, $all_attrs);
|
|
}
|
|
|
|
# ui_br([attrs])
|
|
# Creates a line break element
|
|
sub ui_br
|
|
{
|
|
return theme_ui_br(@_) if (defined(&theme_ui_br));
|
|
my ($attrs) = @_;
|
|
return ui_tag('br', undef, $attrs);
|
|
}
|
|
|
|
# ui_p(content, [attrs])
|
|
# Creates a paragraph element with optional content
|
|
sub ui_p
|
|
{
|
|
return theme_ui_p(@_) if (defined(&theme_ui_p));
|
|
my ($content, $attrs) = @_;
|
|
return ui_tag('p', $content, $attrs);
|
|
}
|
|
|
|
=head2 ui_text_mask(text, [tag], [extra_class])
|
|
|
|
Returns an HTML string with the given text hidden inside a tag that only shows
|
|
on hover. If a second parameter is given, it is used as the outer tag that
|
|
triggers the hover (default is "td"). If a third parameter is provided,
|
|
it is added as an extra class to both the tag and its style.
|
|
|
|
=cut
|
|
sub ui_text_mask
|
|
{
|
|
return &theme_ui_text_mask(@_) if (defined(&theme_ui_text_mask));
|
|
my ($text, $tag, $extra_class) = @_;
|
|
my $class = 'hover-mask';
|
|
my $classcss = ".$class";
|
|
if ($extra_class) {
|
|
$class .= " $extra_class";
|
|
$classcss .= ".$extra_class";
|
|
}
|
|
$tag ||= 'td';
|
|
my $style_content = <<"CSS";
|
|
x-ui-text-mask${classcss} {
|
|
position: relative;
|
|
display: inline-block;
|
|
color: transparent;
|
|
transition:color .25s ease;
|
|
}
|
|
x-ui-text-mask${classcss}::after{
|
|
content: attr(data-mask);
|
|
position: absolute;
|
|
inset: 0;
|
|
white-space: nowrap;
|
|
color: var(--ui-password-mask-color, #000);
|
|
pointer-events: none;
|
|
transition: opacity .25s ease;
|
|
}
|
|
$tag:has(>*>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss},
|
|
$tag:has(>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss}{
|
|
color: inherit;
|
|
}
|
|
$tag:has(>*>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss}::after,
|
|
$tag:has(>x-ui-text-mask${classcss}):hover x-ui-text-mask${classcss}::after{
|
|
opacity: 0;
|
|
}
|
|
CSS
|
|
my $rv = '';
|
|
$rv .= &ui_tag('style', $style_content, { type => 'text/css' })
|
|
if (!$main::ui_text_mask_donecss->{"$tag$class"}++);
|
|
$rv .= &ui_tag('x-ui-text-mask', $text,
|
|
{ 'class' => $class, 'data-mask' => '••••••••' });
|
|
return $rv;
|
|
}
|
|
|
|
####################### widget functions
|
|
|
|
=head1 Widgets
|
|
|
|
The functions below add the UI elements that were missing from this
|
|
library — cards, layout grids, description lists, stat tiles, badges,
|
|
lists, activity feeds, empty states and progress bars — styled
|
|
by the widget stylesheet served from C<unauthenticated/css/ui-lib.css> with a
|
|
small behavior script in C<unauthenticated/js/ui-lib.js>.
|
|
|
|
They do not replace the existing functions. Inside a page area started by
|
|
ui_page_start, existing tabs, forms, tables and buttons retain their theme
|
|
styling. Modules keep using those functions and reach for the functions
|
|
below for the new kinds of content.
|
|
|
|
Example code :
|
|
|
|
ui_print_header(undef, $text{'index_title'}, "");
|
|
|
|
print ui_page_start({ 'desc' => $text{'index_desc'} });
|
|
|
|
print ui_grid([
|
|
ui_card({ 'title' => $text{'index_status'},
|
|
'actions' => ui_badge($text{'index_running'}, 'success'),
|
|
'body' => ui_dl([
|
|
[ $text{'index_version'}, html_escape($version) ],
|
|
[ $text{'index_uptime'}, html_escape($uptime) ],
|
|
]) }),
|
|
ui_card({ 'title' => $text{'index_activity'},
|
|
'body' => ui_stats(\@stats) }),
|
|
]);
|
|
|
|
print ui_page_end();
|
|
ui_print_footer("/", $text{'index'});
|
|
|
|
Design principles :
|
|
|
|
=item * Options are named. Widget options are passed in a hash reference
|
|
after any positional content arguments, so new options can be added
|
|
without breaking callers.
|
|
|
|
=item * Functions return HTML strings, so widgets can be freely composed.
|
|
|
|
=item * Escaping is part of the contract. Text-valued options (C<title>,
|
|
C<desc>, C<label>, C<text>, C<help>, C<meta>, C<when>, C<value>) are
|
|
HTML-escaped by the library. HTML-valued options (C<body>, C<content>,
|
|
C<actions>, C<footer> and supported C<*_html> variants of text options) are
|
|
emitted as-is and are expected to be built from other ui functions.
|
|
Description-list values given in the array form are HTML for
|
|
composability.
|
|
|
|
=item * Layout is CSS, not markup. Widgets emit flat, semantic elements
|
|
built with ui_tag, carrying stable C<ui_*> classes, and the stylesheet
|
|
arranges them with grid and flexbox.
|
|
|
|
=item * Behavior is unobtrusive. Interactive elements carry C<data-ui-*>
|
|
attributes which ui-lib.js wires up with delegated event listeners, so no
|
|
inline event handlers are generated. A C<data-ui-confirm> attribute
|
|
passed in the tags of an existing button asks for confirmation, and
|
|
ui_search can filter table rows or list entries client-side.
|
|
|
|
=item * Theming is a contract, not a rewrite. Colors and spacing
|
|
come from C<--ui-*> CSS custom properties which a theme can redefine on
|
|
C<.ui_page>, and every element keeps a stable class for deeper styling. A built-in
|
|
dark palette is available by setting C<data-ui-scheme> to C<dark> (or
|
|
C<auto> to follow the browser) on any ancestor element, or via the
|
|
scheme option of ui_page_start. A theme can still replace any function
|
|
by defining C<theme_ui_*>, but should rarely need to.
|
|
|
|
Widget states used throughout are C<success>, C<warning>, C<danger>,
|
|
C<info> and C<neutral>. The aliases C<ok>, C<warn>, C<error>, C<err>,
|
|
C<off>, C<secondary>, C<gray> and C<grey> are accepted.
|
|
|
|
=cut
|
|
|
|
# Per-request state, kept in main:: so it is shared no matter which
|
|
# package the library was loaded into
|
|
$main::ui_page_assets_done ||= 0;
|
|
|
|
# Valid widget states, and aliases accepted for convenience
|
|
my %ui_states = (
|
|
'success' => 'success', 'ok' => 'success',
|
|
'warning' => 'warning', 'warn' => 'warning',
|
|
'danger' => 'danger', 'error' => 'danger', 'err' => 'danger',
|
|
'info' => 'info',
|
|
'neutral' => 'neutral', 'off' => 'neutral',
|
|
'secondary' => 'neutral', 'gray' => 'neutral', 'grey' => 'neutral',
|
|
);
|
|
|
|
# Built-in icon set, as 16x16 SVG path data drawn with the current color.
|
|
# Each icon is one or more path definitions joined with |
|
|
my %ui_svg_icons = (
|
|
'check' => 'M3.5 8.5l3 3 6-6.5',
|
|
'check-circle' => 'M8 14.25A6.25 6.25 0 1 0 8 1.75a6.25 6.25 0 0 0 0 12.5z|M5.4 8.3l1.8 1.9 3.4-4',
|
|
'x' => 'M4.5 4.5l7 7|M11.5 4.5l-7 7',
|
|
'x-circle' => 'M8 14.25A6.25 6.25 0 1 0 8 1.75a6.25 6.25 0 0 0 0 12.5z|M6 6l4 4|M10 6l-4 4',
|
|
'info-circle' => 'M8 14.25A6.25 6.25 0 1 0 8 1.75a6.25 6.25 0 0 0 0 12.5z|M8 7.4v3.4|M8 5.1h.01',
|
|
'question-circle' => 'M8 14.25A6.25 6.25 0 1 0 8 1.75a6.25 6.25 0 0 0 0 12.5z|M6.2 6.2a1.8 1.8 0 1 1 2.6 1.8c-.55.28-.8.6-.8 1.15v.25|M8 11.3h.01',
|
|
'warning' => 'M8 2.6l6.4 10.4H1.6L8 2.6z|M8 6.8v2.7|M8 11.3h.01',
|
|
'search' => 'M7 11.25a4.25 4.25 0 1 0 0-8.5 4.25 4.25 0 0 0 0 8.5z|M10.2 10.2l3.3 3.3',
|
|
'external' => 'M6.5 4H4a1.5 1.5 0 0 0-1.5 1.5V12A1.5 1.5 0 0 0 4 13.5h6.5A1.5 1.5 0 0 0 12 12V9.5|M9.5 2.5h4v4|M13.3 2.7L7.8 8.2',
|
|
'chevron-down' => 'M4 6l4 4 4-4',
|
|
'chevron-up' => 'M4 10l4-4 4 4',
|
|
'chevron-right' => 'M6 4l4 4-4 4',
|
|
'chevron-left' => 'M10 4L6 8l4 4',
|
|
'arrow-right' => 'M2.8 8h10|M9 4.2L12.8 8 9 11.8',
|
|
'plus' => 'M8 3v10|M3 8h10',
|
|
'minus' => 'M3 8h10',
|
|
'refresh' => 'M13.2 6.2A5.5 5.5 0 0 0 3.4 4.6|M2.8 9.8a5.5 5.5 0 0 0 9.8 1.6|M13.5 2.5v3.7H9.8|M2.5 13.5V9.8h3.7',
|
|
'play' => 'M5.5 3.6v8.8L12.5 8z',
|
|
'stop' => 'M4.7 4.7h6.6v6.6H4.7z',
|
|
'power' => 'M8 2.2v5.6|M11.4 4.4a5.4 5.4 0 1 1-6.8 0',
|
|
'clock' => 'M8 14.25A6.25 6.25 0 1 0 8 1.75a6.25 6.25 0 0 0 0 12.5z|M8 4.8V8l2.2 1.4',
|
|
'shield' => 'M8 1.8l5.2 2v4c0 3.2-2.2 5.3-5.2 6.4C4.8 13.1 2.8 11 2.8 7.8v-4z',
|
|
'server' => 'M2 3.2h12v4.2H2z|M2 8.6h12v4.2H2z|M4.6 5.3h.01|M4.6 10.7h.01',
|
|
'gear' => 'M8 10.4a2.4 2.4 0 1 0 0-4.8 2.4 2.4 0 0 0 0 4.8z|M8 1.8v2|M8 12.2v2|M1.8 8h2|M12.2 8h2|M3.6 3.6L5 5|M11 11l1.4 1.4|M12.4 3.6L11 5|M5 11l-1.4 1.4',
|
|
'user' => 'M8 8a2.6 2.6 0 1 0 0-5.2A2.6 2.6 0 0 0 8 8z|M2.9 13.6a5.4 5.4 0 0 1 10.2 0',
|
|
'trash' => 'M2.8 4.2h10.4|M6.2 4V2.8h3.6V4|M4.2 4.4l.5 8a1.4 1.4 0 0 0 1.4 1.3h3.8a1.4 1.4 0 0 0 1.4-1.3l.5-8|M6.6 7v4|M9.4 7v4',
|
|
'download' => 'M8 2.5v7|M4.8 6.7L8 9.9l3.2-3.2|M3 12.5h10',
|
|
'upload' => 'M8 9.5v-7|M4.8 5.3L8 2.1l3.2 3.2|M3 12.5h10',
|
|
'edit' => 'M9.8 3.1l3.1 3.1L6 13.1l-3.6.5.5-3.6z|M8.6 4.3l3.1 3.1',
|
|
'terminal' => 'M1.8 3h12.4v10H1.8z|M4.5 6.3L7 8.4l-2.5 2.1|M8.5 10.7h3',
|
|
'filter' => 'M2.5 3.5h11L9.8 8.4v4.3l-3.6-1.6V8.4z',
|
|
'book' => 'M8 3.4C6.9 2.6 5.3 2.2 2.8 2.3v10.3c2.5-.1 4.1.3 5.2 1.1 1.1-.8 2.7-1.2 5.2-1.1V2.3c-2.5-.1-4.1.3-5.2 1.1z|M8 3.4v10.3',
|
|
'globe' => 'M8 14.25A6.25 6.25 0 1 0 8 1.75a6.25 6.25 0 0 0 0 12.5z|M2 8h12|M8 1.9c1.7 1.8 2.6 3.9 2.6 6.1S9.7 12.3 8 14.1C6.3 12.3 5.4 10.2 5.4 8S6.3 3.7 8 1.9z',
|
|
'dot' => 'M8 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z',
|
|
);
|
|
|
|
# Icons drawn filled rather than stroked
|
|
my %ui_svg_icons_filled = ( 'play' => 1, 'stop' => 1, 'dot' => 1 );
|
|
|
|
# Default badge icons per state
|
|
my %ui_state_icons = (
|
|
'success' => 'check-circle',
|
|
'warning' => 'warning',
|
|
'danger' => 'x-circle',
|
|
'info' => 'info-circle',
|
|
);
|
|
|
|
# _ui_state(state)
|
|
# Maps a caller-supplied state name or alias to a canonical state class
|
|
# suffix, defaulting to neutral
|
|
sub _ui_state
|
|
{
|
|
my ($state) = @_;
|
|
return $state && $ui_states{$state} ? $ui_states{$state} : 'neutral';
|
|
}
|
|
|
|
# _ui_text(&opts, key)
|
|
# Returns the escaped text option, preferring a raw key_html variant when
|
|
# the caller supplied pre-built HTML. Returns undef if both are absent or empty.
|
|
sub _ui_text
|
|
{
|
|
my ($opts, $key) = @_;
|
|
return $opts->{$key.'_html'} if (defined($opts->{$key.'_html'}) &&
|
|
$opts->{$key.'_html'} ne '');
|
|
return &html_escape($opts->{$key}) if (defined($opts->{$key}) &&
|
|
$opts->{$key} ne '');
|
|
return undef;
|
|
}
|
|
|
|
# _ui_attrs(&attrs)
|
|
# Returns a copy of the given attribute hash without the undefined or empty
|
|
# values, ready for ui_tag. Boolean attributes like checked are added by the
|
|
# callers afterwards with an undefined value, which ui_tag_start emits bare.
|
|
sub _ui_attrs
|
|
{
|
|
my ($attrs) = @_;
|
|
my %rv;
|
|
foreach my $key (keys %$attrs) {
|
|
my $value = $attrs->{$key};
|
|
next if (!defined($value) || $value eq '');
|
|
$rv{$key} = $value;
|
|
}
|
|
return \%rv;
|
|
}
|
|
|
|
# _ui_class(@classes)
|
|
# Joins the given class names, skipping empty ones
|
|
sub _ui_class
|
|
{
|
|
return join(" ", grep { defined($_) && $_ ne '' } @_);
|
|
}
|
|
|
|
# _ui_join(&items)
|
|
# Joins a list of HTML fragments, accepting either an array reference or a
|
|
# single pre-built string, and skipping empty entries
|
|
sub _ui_join
|
|
{
|
|
my ($items) = @_;
|
|
return "" if (!defined($items));
|
|
return $items if (!ref($items));
|
|
return join("\n", grep { defined($_) && $_ ne '' } @$items);
|
|
}
|
|
|
|
# _ui_block(tag, content, [&attrs])
|
|
# Returns a block element whose content starts and ends on its own line,
|
|
# so that nested widgets stay readable in the page source
|
|
sub _ui_block
|
|
{
|
|
my ($tag, $content, $attrs) = @_;
|
|
return &ui_tag($tag, "\n".$content."\n", $attrs);
|
|
}
|
|
|
|
=head2 ui_svg_icon(name, [&opts])
|
|
|
|
Returns inline SVG for a named icon from the built-in set, drawn with the
|
|
current text color. Unlike ui_icon, this does not depend on any theme
|
|
icon font. Options are :
|
|
|
|
=item size - Pixel size, defaulting to 16.
|
|
|
|
=item class - Additional CSS classes for the <svg> element.
|
|
|
|
=item title - Accessible label. Without it the icon is hidden from
|
|
screen readers.
|
|
|
|
=cut
|
|
sub ui_svg_icon
|
|
{
|
|
return &theme_ui_svg_icon(@_) if (defined(&theme_ui_svg_icon));
|
|
my ($name, $opts) = @_;
|
|
$opts ||= {};
|
|
my $paths = $ui_svg_icons{$name};
|
|
return "" if (!$paths);
|
|
my $size = int($opts->{'size'} || 16);
|
|
my %attrs = ( 'class' => &_ui_class('ui_svg_icon', $opts->{'class'}),
|
|
'width' => $size,
|
|
'height' => $size,
|
|
'viewBox' => '0 0 16 16',
|
|
'fill' => $ui_svg_icons_filled{$name} ? 'currentColor' : 'none',
|
|
'stroke' => 'currentColor',
|
|
'stroke-width' => '1.5',
|
|
'stroke-linecap' => 'round',
|
|
'stroke-linejoin' => 'round' );
|
|
if (defined($opts->{'title'}) && $opts->{'title'} ne '') {
|
|
$attrs{'role'} = 'img';
|
|
$attrs{'aria-label'} = $opts->{'title'};
|
|
}
|
|
else {
|
|
$attrs{'aria-hidden'} = 'true';
|
|
}
|
|
my $rv = &ui_tag_start('svg', \%attrs);
|
|
foreach my $p (split(/\|/, $paths)) {
|
|
$rv .= &ui_tag('path', undef, { 'd' => $p });
|
|
}
|
|
$rv .= &ui_tag_end('svg');
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_code(text)
|
|
|
|
Returns the given text styled as inline code.
|
|
|
|
=cut
|
|
sub ui_code
|
|
{
|
|
return &theme_ui_code(@_) if (defined(&theme_ui_code));
|
|
my ($str) = @_;
|
|
return &ui_tag('code', &html_escape($str), { 'class' => 'ui_code' });
|
|
}
|
|
|
|
=head2 ui_tip(content-html, tip)
|
|
|
|
Wraps arbitrary HTML content so the given plain-text tip is shown on
|
|
hover by the theme's tooltip, the same one ui_help uses. For a plain
|
|
question-mark help bubble, use ui_help instead.
|
|
|
|
=cut
|
|
sub ui_tip
|
|
{
|
|
return &theme_ui_tip(@_) if (defined(&theme_ui_tip));
|
|
my ($content, $tip) = @_;
|
|
return &ui_tag('span', $content,
|
|
{ 'class' => 'ui_tip', 'aria-label' => &html_strip($tip),
|
|
'data-tooltip' => undef });
|
|
}
|
|
|
|
####################### page structure functions
|
|
|
|
=head2 ui_page_assets([&opts])
|
|
|
|
Returns the <link> and <script> tags that load the widget stylesheet and
|
|
behavior script, exactly once per page. This is normally called
|
|
automatically by ui_page_start, but can also be passed in the head-stuff
|
|
parameter of ui_print_header to load the assets from the <head> section.
|
|
Options are :
|
|
|
|
=item nojs - Set to 1 to skip the behavior script.
|
|
|
|
=cut
|
|
sub ui_page_assets
|
|
{
|
|
return &theme_ui_page_assets(@_) if (defined(&theme_ui_page_assets));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
return "" if ($main::ui_page_assets_done++);
|
|
my $pfx = &get_webprefix();
|
|
|
|
# Each file is linked with its modification time as the cache key, so a
|
|
# browser picks up a changed file at once instead of keeping the copy it
|
|
# cached under the Webmin version, which stays the same between edits
|
|
my $ver = &get_webmin_version() || 0;
|
|
my $key = sub {
|
|
my ($file) = @_;
|
|
my @st = stat("$root_directory/unauthenticated/$file");
|
|
return @st ? $st[9] : $ver;
|
|
};
|
|
my $rv = &ui_tag('link', undef,
|
|
{ 'rel' => 'stylesheet',
|
|
'href' => "$pfx/unauthenticated/css/ui-lib.css?".
|
|
$key->("css/ui-lib.css") })."\n";
|
|
$rv .= &ui_tag('script', undef,
|
|
{ 'src' => "$pfx/unauthenticated/js/ui-lib.js?".
|
|
$key->("js/ui-lib.js"),
|
|
'defer' => undef }) if (!$opts->{'nojs'});
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_page_start([&opts])
|
|
|
|
Returns HTML for the start of a widget page area, including the assets (if
|
|
not yet loaded) and an optional page header with a description and
|
|
actions. The page title itself is printed by ui_print_header as usual.
|
|
All other widgets, and any existing tabs, forms and tables that
|
|
should get the widget styling, should be placed between this and
|
|
ui_page_end. Options are :
|
|
|
|
=item title - Large page title text, for pages that do not already show
|
|
one in the theme header.
|
|
|
|
=item desc - Short description shown under the title.
|
|
|
|
=item help - URL of a help or documentation page, shown as a link with a
|
|
question-mark icon on the right.
|
|
|
|
=item help_title - Text for the help link, defaulting to "Help".
|
|
|
|
=item actions - HTML (or array ref of HTML fragments) for buttons or
|
|
links shown at the top right.
|
|
|
|
=item scheme - Color scheme for the page area. By default the light
|
|
palette is used; set to dark for the built-in dark palette, or to auto
|
|
to follow the browser's preferred color scheme. A theme can instead set
|
|
a data-ui-scheme attribute on the body or html element to control all
|
|
widget pages at once, or redefine the --ui-* CSS custom properties for
|
|
full control.
|
|
|
|
=item class - Additional CSS classes for the wrapper element.
|
|
|
|
=item id - HTML id for the wrapper element.
|
|
|
|
=cut
|
|
sub ui_page_start
|
|
{
|
|
return &theme_ui_page_start(@_) if (defined(&theme_ui_page_start));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
my $rv = &ui_page_assets();
|
|
my $scheme = $opts->{'scheme'} && $opts->{'scheme'} =~ /^(dark|auto)$/ ?
|
|
$opts->{'scheme'} : undef;
|
|
$rv .= &ui_tag_start('div', &_ui_attrs({
|
|
'class' => &_ui_class('ui_page', $opts->{'class'}),
|
|
'data-ui-scheme' => $scheme,
|
|
'id' => $opts->{'id'} }))."\n";
|
|
|
|
# Optional header with title, description, help link and actions
|
|
my $title = &_ui_text($opts, 'title');
|
|
my $desc = &_ui_text($opts, 'desc');
|
|
my $actions = &_ui_join($opts->{'actions'});
|
|
my $help = "";
|
|
if ($opts->{'help'}) {
|
|
my $htitle = defined($opts->{'help_title'}) ? $opts->{'help_title'} :
|
|
$text{'ui_page_help'} || 'Help';
|
|
$help = &ui_tag('a',
|
|
&ui_svg_icon('question-circle', { 'size' => 15 }).
|
|
&ui_tag('span', &html_escape($htitle)),
|
|
{ 'class' => 'ui_page_help', 'href' => $opts->{'help'} });
|
|
}
|
|
if (defined($title) || defined($desc) || $actions || $help) {
|
|
my $titles = "";
|
|
$titles .= &ui_tag('h1', $title, { 'class' => 'ui_page_title' })
|
|
if (defined($title));
|
|
$titles .= &ui_tag('p', $desc, { 'class' => 'ui_page_desc' })
|
|
if (defined($desc));
|
|
my $head = &_ui_block('div', $titles, { 'class' => 'ui_page_titles' });
|
|
$head .= &ui_tag('div', $help.$actions, { 'class' => 'ui_page_actions' })
|
|
if ($actions || $help);
|
|
$rv .= &_ui_block('header', $head, { 'class' => 'ui_page_head' });
|
|
}
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_page_end
|
|
|
|
Returns HTML ending a page area started by ui_page_start.
|
|
|
|
=cut
|
|
sub ui_page_end
|
|
{
|
|
return &theme_ui_page_end(@_) if (defined(&theme_ui_page_end));
|
|
return &ui_tag_end('div');
|
|
}
|
|
|
|
####################### layout functions
|
|
|
|
=head2 ui_grid(&items, [&opts])
|
|
|
|
Returns HTML for a responsive grid of the given HTML fragments, typically
|
|
cards. By default columns are sized automatically to fit at least the
|
|
minimum width, wrapping on narrow screens. Options are :
|
|
|
|
=item cols - Fixed number of equal columns instead of automatic sizing.
|
|
|
|
=item min - Minimum column width for automatic mode, such as 320px.
|
|
|
|
=item template - Raw grid-template-columns value for unequal column
|
|
layouts, such as "minmax(280px,1fr) minmax(0,2fr)". Overrides cols. On
|
|
narrow screens the grid always collapses to one column.
|
|
|
|
=item gap - Gap between cells, as a CSS length.
|
|
|
|
=item class - Additional CSS classes.
|
|
|
|
=cut
|
|
sub ui_grid
|
|
{
|
|
return &theme_ui_grid(@_) if (defined(&theme_ui_grid));
|
|
my ($items, $opts) = @_;
|
|
$opts ||= {};
|
|
my @items = grep { defined($_) && $_ ne '' } @$items;
|
|
return "" if (!@items);
|
|
my $fixed = $opts->{'cols'} || $opts->{'template'};
|
|
my @style;
|
|
push(@style, "--ui-grid-cols:".int($opts->{'cols'}))
|
|
if ($opts->{'cols'} && !$opts->{'template'});
|
|
push(@style, "--ui-grid-template:".$opts->{'template'})
|
|
if ($opts->{'template'});
|
|
push(@style, "--ui-grid-min:".$opts->{'min'}) if ($opts->{'min'});
|
|
push(@style, "--ui-gap:".$opts->{'gap'}) if ($opts->{'gap'});
|
|
return &_ui_block('div', join("\n", @items), &_ui_attrs({
|
|
'class' => &_ui_class('ui_grid', $fixed ? 'ui_grid_fixed' : undef,
|
|
$opts->{'class'}),
|
|
'style' => @style ? join(";", @style) : undef }));
|
|
}
|
|
|
|
=head2 ui_stack(&items, [&opts])
|
|
|
|
Returns HTML stacking the given fragments vertically with consistent
|
|
spacing. Options are C<gap> and C<class>.
|
|
|
|
=cut
|
|
sub ui_stack
|
|
{
|
|
return &theme_ui_stack(@_) if (defined(&theme_ui_stack));
|
|
my ($items, $opts) = @_;
|
|
$opts ||= {};
|
|
my @items = grep { defined($_) && $_ ne '' } @$items;
|
|
return "" if (!@items);
|
|
return &_ui_block('div', join("\n", @items), &_ui_attrs({
|
|
'class' => &_ui_class('ui_stack', $opts->{'class'}),
|
|
'style' => $opts->{'gap'} ? "--ui-gap:".$opts->{'gap'} : undef }));
|
|
}
|
|
|
|
=head2 ui_cluster(&items, [&opts])
|
|
|
|
Returns HTML for a horizontal row of the given fragments — typically
|
|
buttons or badges — which wraps on narrow screens. Options are :
|
|
|
|
=item align - Horizontal alignment : start (default), center, end or
|
|
between.
|
|
|
|
=item gap - Gap between items, as a CSS length.
|
|
|
|
=item class - Additional CSS classes.
|
|
|
|
=cut
|
|
sub ui_cluster
|
|
{
|
|
return &theme_ui_cluster(@_) if (defined(&theme_ui_cluster));
|
|
my ($items, $opts) = @_;
|
|
$opts ||= {};
|
|
my @items = grep { defined($_) && $_ ne '' } @$items;
|
|
return "" if (!@items);
|
|
my $align = $opts->{'align'} || '';
|
|
return &_ui_block('div', join("\n", @items), &_ui_attrs({
|
|
'class' => &_ui_class('ui_cluster',
|
|
$align =~ /^(center|end|between)$/ ?
|
|
"ui_cluster_$align" : undef,
|
|
$opts->{'class'}),
|
|
'style' => $opts->{'gap'} ? "--ui-gap:".$opts->{'gap'} : undef }));
|
|
}
|
|
|
|
####################### card functions
|
|
|
|
# _ui_card_head(&opts)
|
|
# Builds the optional header section of a card from title, desc and
|
|
# actions options
|
|
sub _ui_card_head
|
|
{
|
|
my ($opts) = @_;
|
|
my $title = &_ui_text($opts, 'title');
|
|
my $desc = &_ui_text($opts, 'desc');
|
|
my $actions = &_ui_join($opts->{'actions'});
|
|
return "" if (!defined($title) && !defined($desc) && !$actions);
|
|
my $titles = "";
|
|
$titles .= &ui_tag('h2', $title, { 'class' => 'ui_card_title' })
|
|
if (defined($title));
|
|
$titles .= &ui_tag('p', $desc, { 'class' => 'ui_card_desc' })
|
|
if (defined($desc));
|
|
my $head = &_ui_block('div', $titles, { 'class' => 'ui_card_titles' });
|
|
$head .= &ui_tag('div', $actions, { 'class' => 'ui_card_actions' })
|
|
if ($actions);
|
|
return &_ui_block('header', $head, { 'class' => 'ui_card_head' });
|
|
}
|
|
|
|
=head2 ui_card(&opts)
|
|
|
|
Returns HTML for a card — the primary container widget, drawn as a
|
|
surface with a border. Options are :
|
|
|
|
=item title - Card heading text.
|
|
|
|
=item desc - Short description under the heading.
|
|
|
|
=item actions - HTML (or array ref of fragments) shown at the top right
|
|
of the card, such as buttons, links or a badge.
|
|
|
|
=item body - HTML for the card content, which may include forms and
|
|
tables built with the existing ui functions.
|
|
|
|
=item footer - HTML shown in a separated footer area.
|
|
|
|
=item flush - Set to 1 to remove horizontal body padding, for full-bleed content
|
|
such as lists. Tables keep their own border and look better with the
|
|
padding.
|
|
|
|
=item state - Optional state name, which adds a colored accent border.
|
|
|
|
=item class - Additional CSS classes.
|
|
|
|
=item id - HTML id for the card element.
|
|
|
|
=cut
|
|
sub ui_card
|
|
{
|
|
return &theme_ui_card(@_) if (defined(&theme_ui_card));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
my $rv = &ui_card_start($opts);
|
|
$rv .= defined($opts->{'body'}) ? $opts->{'body'} : "";
|
|
$rv .= &ui_card_end($opts->{'footer'});
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_card_start(&opts)
|
|
|
|
Returns HTML for the start of a card, for callers that print content
|
|
progressively. Takes the same options as ui_card except body and
|
|
footer, and must be followed by ui_card_end.
|
|
|
|
=cut
|
|
sub ui_card_start
|
|
{
|
|
return &theme_ui_card_start(@_) if (defined(&theme_ui_card_start));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
my $rv = &ui_tag_start('section', &_ui_attrs({
|
|
'class' => &_ui_class('ui_card',
|
|
$opts->{'state'} ?
|
|
"ui_card_".&_ui_state($opts->{'state'}) : undef,
|
|
$opts->{'class'}),
|
|
'id' => $opts->{'id'} }))."\n";
|
|
$rv .= &_ui_card_head($opts);
|
|
$rv .= &ui_tag_start('div', {
|
|
'class' => &_ui_class('ui_card_body',
|
|
$opts->{'flush'} ? 'ui_card_flush' : undef) })."\n";
|
|
return $rv;
|
|
}
|
|
|
|
=head2 ui_card_end([footer])
|
|
|
|
Returns HTML for the end of a card started by ui_card_start, with an
|
|
optional HTML footer area.
|
|
|
|
=cut
|
|
sub ui_card_end
|
|
{
|
|
return &theme_ui_card_end(@_) if (defined(&theme_ui_card_end));
|
|
my ($footer) = @_;
|
|
my $rv = &ui_tag_end('div');
|
|
$rv .= &ui_tag('footer', $footer, { 'class' => 'ui_card_foot' })
|
|
if (defined($footer) && $footer ne '');
|
|
$rv .= &ui_tag_end('section');
|
|
return $rv;
|
|
}
|
|
|
|
####################### data display functions
|
|
|
|
=head2 ui_stat(&opts)
|
|
|
|
Returns HTML for a single statistic tile with a large value and a label.
|
|
Options are :
|
|
|
|
=item value - The number or short value to display prominently.
|
|
|
|
=item label - Label text under the value.
|
|
|
|
=item desc - Smaller muted description under the label.
|
|
|
|
=item state - Optional state name to color the value.
|
|
|
|
=item href - Optional URL, making the whole tile a link.
|
|
|
|
=item icon - Optional icon name shown before the value.
|
|
|
|
=cut
|
|
sub ui_stat
|
|
{
|
|
return &theme_ui_stat(@_) if (defined(&theme_ui_stat));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
my $value = &_ui_text($opts, 'value');
|
|
$value = "0" if (!defined($value));
|
|
my $body = &ui_tag('span',
|
|
($opts->{'icon'} ?
|
|
&ui_svg_icon($opts->{'icon'}, { 'size' => 20 })." " : "").$value,
|
|
{ 'class' => &_ui_class('ui_stat_value',
|
|
$opts->{'state'} ?
|
|
"ui_fg_".&_ui_state($opts->{'state'}) : undef) });
|
|
my $label = &_ui_text($opts, 'label');
|
|
$body .= &ui_tag('span', $label, { 'class' => 'ui_stat_label' })
|
|
if (defined($label));
|
|
my $desc = &_ui_text($opts, 'desc');
|
|
$body .= &ui_tag('span', $desc, { 'class' => 'ui_stat_desc' })
|
|
if (defined($desc));
|
|
return &_ui_block($opts->{'href'} ? 'a' : 'div', $body, &_ui_attrs({
|
|
'class' => 'ui_stat',
|
|
'href' => $opts->{'href'} }));
|
|
}
|
|
|
|
=head2 ui_stats(&stats, [&opts])
|
|
|
|
Returns HTML for a responsive row of statistic tiles. Each element of the
|
|
stats array is a hash reference in ui_stat format. Options are C<class>
|
|
and C<min> for the minimum tile width.
|
|
|
|
=cut
|
|
sub ui_stats
|
|
{
|
|
return &theme_ui_stats(@_) if (defined(&theme_ui_stats));
|
|
my ($stats, $opts) = @_;
|
|
$opts ||= {};
|
|
return "" if (!$stats || !@$stats);
|
|
return &_ui_block('div', join("", map { &ui_stat($_) } @$stats),
|
|
&_ui_attrs({
|
|
'class' => &_ui_class('ui_stats', $opts->{'class'}),
|
|
'style' => $opts->{'min'} ?
|
|
"--ui-grid-min:".$opts->{'min'} : undef }));
|
|
}
|
|
|
|
=head2 ui_dl(&rows, [&opts])
|
|
|
|
Returns HTML for a description list of label and value pairs, for
|
|
displaying (rather than editing) information. Each row is either a two
|
|
or three element array reference of C<[ label, value-html, help-text ]>,
|
|
or a hash reference with keys :
|
|
|
|
=item label - Plain label text.
|
|
|
|
=item value - Plain value text, which will be escaped.
|
|
|
|
=item value_html - Pre-built HTML for the value, used instead of value.
|
|
|
|
=item help - Plain help text shown as a question-mark tooltip after the
|
|
label.
|
|
|
|
Options are :
|
|
|
|
=item cols - Set to 2 to fit up to two pairs per line. Longer pairs take a full line before moving the value below its label.
|
|
|
|
=item wide - CSS width reserved for each label, such as 40%.
|
|
|
|
=item class - Additional CSS classes.
|
|
|
|
=cut
|
|
sub ui_dl
|
|
{
|
|
return &theme_ui_dl(@_) if (defined(&theme_ui_dl));
|
|
my ($rows, $opts) = @_;
|
|
$opts ||= {};
|
|
return "" if (!$rows || !@$rows);
|
|
my $body = "";
|
|
foreach my $row (@$rows) {
|
|
next if (!defined($row));
|
|
my ($label, $value, $help);
|
|
if (ref($row) eq 'HASH') {
|
|
$label = &html_escape($row->{'label'});
|
|
$value = defined($row->{'value_html'}) ? $row->{'value_html'}
|
|
: &html_escape($row->{'value'});
|
|
$help = $row->{'help'};
|
|
}
|
|
else {
|
|
$label = &html_escape($row->[0]);
|
|
$value = defined($row->[1]) ? $row->[1] : "";
|
|
$help = $row->[2];
|
|
}
|
|
$body .= &ui_tag('div',
|
|
&ui_tag('dt', $label.($help ? " ".&ui_help($help) : "")).
|
|
&ui_tag('dd', $value),
|
|
{ 'class' => 'ui_dl_row' });
|
|
}
|
|
return &_ui_block('dl', $body, &_ui_attrs({
|
|
'class' => &_ui_class('ui_dl',
|
|
$opts->{'cols'} && $opts->{'cols'} > 1 ?
|
|
'ui_dl_cols' : undef,
|
|
$opts->{'class'}),
|
|
'style' => $opts->{'wide'} ? "--ui-dl-label:".$opts->{'wide'} : undef }));
|
|
}
|
|
|
|
=head2 ui_badge(text, [state], [&opts])
|
|
|
|
Returns HTML for a status badge, such as "Running" in green. The state
|
|
is one of success, warning, danger, info or neutral. Options are :
|
|
|
|
=item icon - Icon name to show before the text, replacing the state's
|
|
default icon. Set to an empty string for no icon at all.
|
|
|
|
=item dot - Set to 1 to show a plain colored dot instead of an icon.
|
|
|
|
=item title - Tooltip text for the badge.
|
|
|
|
=cut
|
|
sub ui_badge
|
|
{
|
|
return &theme_ui_badge(@_) if (defined(&theme_ui_badge));
|
|
my ($label, $state, $opts) = @_;
|
|
$opts ||= {};
|
|
$state = &_ui_state($state);
|
|
my $icon = "";
|
|
if ($opts->{'dot'}) {
|
|
$icon = &ui_svg_icon('dot', { 'size' => 10 });
|
|
}
|
|
elsif (defined($opts->{'icon'})) {
|
|
$icon = $opts->{'icon'} eq '' ? "" :
|
|
&ui_svg_icon($opts->{'icon'}, { 'size' => 13 });
|
|
}
|
|
elsif ($ui_state_icons{$state}) {
|
|
$icon = &ui_svg_icon($ui_state_icons{$state}, { 'size' => 13 });
|
|
}
|
|
return &ui_tag('span', $icon.&ui_tag('span', &html_escape($label)),
|
|
&_ui_attrs({ 'class' => "ui_badge ui_badge_$state",
|
|
'title' => $opts->{'title'} }));
|
|
}
|
|
|
|
=head2 ui_chip(text, [&opts])
|
|
|
|
Returns HTML for a small muted chip, such as a category or source label
|
|
next to a list entry.
|
|
|
|
=cut
|
|
sub ui_chip
|
|
{
|
|
return &theme_ui_chip(@_) if (defined(&theme_ui_chip));
|
|
my ($label, $opts) = @_;
|
|
$opts ||= {};
|
|
return &ui_tag('span', &html_escape($label),
|
|
{ 'class' => &_ui_class('ui_chip', $opts->{'class'}) });
|
|
}
|
|
|
|
=head2 ui_list(&items, [&opts])
|
|
|
|
Returns HTML for a stacked list of entries with titles, descriptions and
|
|
trailing details. Each item is a hash reference with keys :
|
|
|
|
=item title - Entry title text (or title_html for pre-built HTML).
|
|
|
|
=item desc - Secondary description line (or desc_html).
|
|
|
|
=item href - Optional URL, making the title a link.
|
|
|
|
=item badge - Optional array ref of [ text, state ] shown after the
|
|
title, or badge_html for arbitrary HTML.
|
|
|
|
=item tags - Optional array ref of plain strings shown as small chips
|
|
after the description.
|
|
|
|
=item meta - Muted text aligned to the right, such as a time or count.
|
|
|
|
=item actions - HTML for buttons or links aligned to the right.
|
|
|
|
=item icon - Optional icon name shown before the title.
|
|
|
|
=item state - Optional state name, which colors the icon.
|
|
|
|
Options are :
|
|
|
|
=item flush - Set to 1 when the list fills a flush card body, extending
|
|
row separators to the card edges.
|
|
|
|
=item class - Additional CSS classes.
|
|
|
|
=cut
|
|
sub ui_list
|
|
{
|
|
return &theme_ui_list(@_) if (defined(&theme_ui_list));
|
|
my ($items, $opts) = @_;
|
|
$opts ||= {};
|
|
return "" if (!$items || !@$items);
|
|
my $body = "";
|
|
foreach my $item (@$items) {
|
|
next if (!defined($item));
|
|
|
|
# Title line, with optional link and badge
|
|
my $title = &_ui_text($item, 'title');
|
|
$title = &ui_tag('a', $title,
|
|
{ 'class' => 'ui_list_link', 'href' => $item->{'href'} })
|
|
if (defined($title) && $item->{'href'});
|
|
my $badge = defined($item->{'badge_html'}) ? $item->{'badge_html'} :
|
|
$item->{'badge'} ? &ui_badge(@{$item->{'badge'}}) : "";
|
|
my $main = &ui_tag('div',
|
|
(defined($title) ? $title : "").($badge ? " ".$badge : ""),
|
|
{ 'class' => 'ui_list_title' });
|
|
|
|
# Description line with chips
|
|
my $desc = &_ui_text($item, 'desc');
|
|
my $tags = $item->{'tags'} && @{$item->{'tags'}} ?
|
|
join(" ", map { &ui_chip($_) } @{$item->{'tags'}}) : "";
|
|
$main .= &ui_tag('div',
|
|
(defined($desc) ? $desc : "").($tags ? " ".$tags : ""),
|
|
{ 'class' => 'ui_list_desc' }) if (defined($desc) || $tags);
|
|
|
|
# Leading icon, and trailing meta text and actions
|
|
my $row = "";
|
|
$row .= &ui_tag('span', &ui_svg_icon($item->{'icon'}),
|
|
{ 'class' => &_ui_class('ui_list_icon',
|
|
$item->{'state'} ?
|
|
"ui_fg_".&_ui_state($item->{'state'}) :
|
|
undef) }) if ($item->{'icon'});
|
|
$row .= &_ui_block('div', $main, { 'class' => 'ui_list_main' });
|
|
my $meta = &_ui_text($item, 'meta');
|
|
my $actions = &_ui_join($item->{'actions'});
|
|
$row .= &ui_tag('div',
|
|
(defined($meta) ?
|
|
&ui_tag('span', $meta, { 'class' => 'ui_list_meta' }) : "").
|
|
$actions,
|
|
{ 'class' => 'ui_list_side' }) if (defined($meta) || $actions);
|
|
$body .= &_ui_block('div', $row, { 'class' => 'ui_list_item' });
|
|
}
|
|
return &_ui_block('div', $body, {
|
|
'class' => &_ui_class('ui_list', $opts->{'flush'} ? 'ui_list_flush' : undef,
|
|
$opts->{'class'}) });
|
|
}
|
|
|
|
=head2 ui_feed(&events, [&opts])
|
|
|
|
Returns HTML for a simple activity feed of timestamped events in the
|
|
supplied order. Pass the newest event first for a reverse-chronological
|
|
feed. Each event is a hash reference with keys :
|
|
|
|
=item when - Time label, such as "5 minutes ago".
|
|
|
|
=item text - Event text (or text_html for pre-built HTML).
|
|
|
|
=item state - Optional state name, coloring the event marker.
|
|
|
|
Options are C<flush> and C<class>, as for ui_list.
|
|
|
|
=cut
|
|
sub ui_feed
|
|
{
|
|
return &theme_ui_feed(@_) if (defined(&theme_ui_feed));
|
|
my ($events, $opts) = @_;
|
|
$opts ||= {};
|
|
return "" if (!$events || !@$events);
|
|
my $body = "";
|
|
foreach my $e (@$events) {
|
|
next if (!defined($e));
|
|
my $state = $e->{'state'} ? &_ui_state($e->{'state'}) : undef;
|
|
my $when = &_ui_text($e, 'when');
|
|
my $etext = &_ui_text($e, 'text');
|
|
my $item = "";
|
|
$item .= &ui_tag('div', $when, { 'class' => 'ui_feed_when' })
|
|
if (defined($when));
|
|
$item .= &ui_tag('div', $etext, { 'class' => 'ui_feed_text' })
|
|
if (defined($etext));
|
|
$body .= &_ui_block('div', $item, {
|
|
'class' => &_ui_class('ui_feed_item',
|
|
$state ? "ui_feed_$state" : undef) });
|
|
}
|
|
return &_ui_block('div', $body, {
|
|
'class' => &_ui_class('ui_feed', $opts->{'flush'} ? 'ui_feed_flush' : undef,
|
|
$opts->{'class'}) });
|
|
}
|
|
|
|
=head2 ui_empty_state(&opts)
|
|
|
|
Returns HTML for an empty-state message, used when a table or list has
|
|
nothing to show. Options are :
|
|
|
|
=item title - Main message text.
|
|
|
|
=item desc - Secondary explanation text.
|
|
|
|
=item icon - Icon name shown above the message.
|
|
|
|
=item actions - HTML for buttons or links offering a next step.
|
|
|
|
=cut
|
|
sub ui_empty_state
|
|
{
|
|
return &theme_ui_empty_state(@_) if (defined(&theme_ui_empty_state));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
my $title = &_ui_text($opts, 'title');
|
|
$title = &html_escape($text{'ui_empty_state'} || 'Nothing to display')
|
|
if (!defined($title));
|
|
my $desc = &_ui_text($opts, 'desc');
|
|
my $actions = &_ui_join($opts->{'actions'});
|
|
my $body = "";
|
|
$body .= &ui_tag('span', &ui_svg_icon($opts->{'icon'}, { 'size' => 22 }),
|
|
{ 'class' => 'ui_empty_icon' }) if ($opts->{'icon'});
|
|
$body .= &ui_tag('div', $title, { 'class' => 'ui_empty_title' });
|
|
$body .= &ui_tag('div', $desc, { 'class' => 'ui_empty_desc' })
|
|
if (defined($desc));
|
|
$body .= &ui_tag('div', $actions, { 'class' => 'ui_empty_actions' })
|
|
if ($actions);
|
|
return &_ui_block('div', $body, { 'class' => 'ui_empty' });
|
|
}
|
|
|
|
=head2 ui_progress(value, [&opts])
|
|
|
|
Returns HTML for a progress bar showing the given value as a percentage
|
|
of 100, or of the max option. The result is clamped to the range 0 to
|
|
100. Options are :
|
|
|
|
=item label - Text shown above the bar, or before it in the inline
|
|
layout, or under the ring.
|
|
|
|
=item state - State name coloring the bar, defaulting to info.
|
|
|
|
=item thresholds - Colors the bar by its value instead : success below
|
|
the first threshold, warning from there, danger from the second. Set to
|
|
1 for the defaults of 70 and 90, or to an array ref of two percentages.
|
|
|
|
=item max - The value that counts as 100%, defaulting to 100. Use it to
|
|
pass raw numbers such as bytes.
|
|
|
|
=item value - Text shown with the bar instead of the percentage, such as
|
|
"3.4 GB of 10 GB".
|
|
|
|
=item small - Set to 1 for a bare bar with no text at all.
|
|
|
|
=item inline - Set to 1 to show label, bar and value on one line, as in
|
|
a table cell or a list row.
|
|
|
|
=item inside - Set to 1 to show the value as a small marker riding on the
|
|
end of the bar, instead of at the right of the label row.
|
|
|
|
=item segments - Array ref of hash refs with pct (or value, against max),
|
|
state and label, drawn as consecutive segments of one bar, with a legend
|
|
under it when segments have labels. The main value is then their sum.
|
|
|
|
=item indeterminate - Set to 1 for a task of unknown progress, drawn as
|
|
a moving bar. The value is ignored.
|
|
|
|
=item ring - Set to 1 for a circular gauge with the value in its center,
|
|
sized by the size option in pixels, defaulting to 56.
|
|
|
|
=cut
|
|
sub ui_progress
|
|
{
|
|
return &theme_ui_progress(@_) if (defined(&theme_ui_progress));
|
|
my ($value, $opts) = @_;
|
|
$opts ||= {};
|
|
my $max = $opts->{'max'};
|
|
my $label = &_ui_text($opts, 'label');
|
|
|
|
# Segments each get a percentage, and together make up the total
|
|
my @segments;
|
|
if ($opts->{'segments'} && ref($opts->{'segments'}) eq 'ARRAY') {
|
|
foreach my $s (@{$opts->{'segments'}}) {
|
|
next if (ref($s) ne 'HASH');
|
|
push(@segments, {
|
|
'pct' => defined($s->{'pct'}) ?
|
|
&_ui_progress_pct($s->{'pct'}) :
|
|
&_ui_progress_pct($s->{'value'}, $max),
|
|
'state' => &_ui_state($s->{'state'} || 'info'),
|
|
'label' => &_ui_text($s, 'label') });
|
|
}
|
|
}
|
|
my $pct = 0;
|
|
if (@segments) {
|
|
$pct += $_->{'pct'} foreach (@segments);
|
|
$pct = 100 if ($pct > 100);
|
|
}
|
|
else {
|
|
$pct = &_ui_progress_pct($value, $max);
|
|
}
|
|
|
|
# The color comes from the state, or from the thresholds the value crosses
|
|
my $state;
|
|
if ($opts->{'state'}) {
|
|
$state = &_ui_state($opts->{'state'});
|
|
}
|
|
elsif ($opts->{'thresholds'}) {
|
|
my ($warn, $danger) = ref($opts->{'thresholds'}) eq 'ARRAY' ?
|
|
@{$opts->{'thresholds'}} : (70, 90);
|
|
$state = $pct >= $danger ? 'danger' :
|
|
$pct >= $warn ? 'warning' : 'success';
|
|
}
|
|
else {
|
|
$state = 'info';
|
|
}
|
|
my $vtext = defined($opts->{'value'}) ? &html_escape($opts->{'value'})
|
|
: $pct."%";
|
|
my $indet = $opts->{'indeterminate'} ? 1 : 0;
|
|
my %aria = ( 'role' => 'progressbar',
|
|
'aria-valuemin' => 0,
|
|
'aria-valuemax' => 100 );
|
|
if ($indet) {
|
|
$aria{'aria-busy'} = 'true';
|
|
}
|
|
else {
|
|
$aria{'aria-valuenow'} = $pct;
|
|
}
|
|
|
|
# A ring is an SVG circle whose dash length is the percentage, drawn on a
|
|
# circle with a circumference of 100 units
|
|
if ($opts->{'ring'}) {
|
|
my $size = int($opts->{'size'} || 56);
|
|
# Invalid or subpixel sizes cannot be used to scale the stroke
|
|
$size = 56 if ($size < 1);
|
|
# The circle is 36 units across, so a stroke of 3 pixels is 3*36/size
|
|
# units whatever the size
|
|
my $stroke = sprintf("%.2f", 108 / $size);
|
|
my $svg = &ui_tag_start('svg', {
|
|
'class' => 'ui_progress_ring_svg',
|
|
'width' => $size, 'height' => $size,
|
|
'viewBox' => '0 0 36 36', 'aria-hidden' => 'true' }).
|
|
&ui_tag('circle', undef, {
|
|
'class' => 'ui_progress_ring_track',
|
|
'cx' => 18, 'cy' => 18, 'r' => 15.9155,
|
|
'stroke-width' => $stroke }).
|
|
&ui_tag('circle', undef, {
|
|
'class' => "ui_progress_ring_bar ui_fg_$state",
|
|
'cx' => 18, 'cy' => 18, 'r' => 15.9155,
|
|
'stroke-width' => $stroke,
|
|
'stroke-dasharray' => ($indet ? 25 : $pct)." 100" }).
|
|
&ui_tag_end('svg');
|
|
my $body = &ui_tag('span',
|
|
$svg.&ui_tag('span', $indet ? "" : $vtext,
|
|
{ 'class' => 'ui_progress_value' }),
|
|
{ 'class' => 'ui_progress_ring_box' });
|
|
$body .= &ui_tag('span', $label, { 'class' => 'ui_progress_label' })
|
|
if (defined($label));
|
|
return &_ui_block('div', $body, {
|
|
'class' => &_ui_class('ui_progress', 'ui_progress_ring',
|
|
$indet ? 'ui_progress_indeterminate' :
|
|
undef),
|
|
%aria });
|
|
}
|
|
|
|
# The bar itself, or the bars of a segmented one
|
|
my $bars = "";
|
|
if ($indet) {
|
|
$bars = &ui_tag('div', undef,
|
|
{ 'class' => "ui_progress_bar ui_bg_$state" });
|
|
}
|
|
elsif (@segments) {
|
|
foreach my $s (@segments) {
|
|
$bars .= &ui_tag('div', undef, {
|
|
'class' => "ui_progress_bar ui_bg_$s->{'state'}",
|
|
'style' => "width:$s->{'pct'}%" });
|
|
}
|
|
}
|
|
else {
|
|
$bars = &ui_tag('div',
|
|
$opts->{'inside'} ?
|
|
&ui_tag('span', $vtext,
|
|
{ 'class' => 'ui_progress_inside_value' }) : undef,
|
|
{ 'class' => "ui_progress_bar ui_bg_$state",
|
|
'style' => "width:$pct%" });
|
|
}
|
|
my $track = &ui_tag('div', $bars, { 'class' => 'ui_progress_track' });
|
|
|
|
# Legend for labelled segments
|
|
my $legend = "";
|
|
if (grep { defined($_->{'label'}) } @segments) {
|
|
my $keys = "";
|
|
foreach my $s (@segments) {
|
|
$keys .= &ui_tag('span',
|
|
&ui_tag('span', undef,
|
|
{ 'class' => "ui_progress_dot ui_bg_$s->{'state'}" }).
|
|
(defined($s->{'label'}) ? $s->{'label'} : "")." ".
|
|
&ui_tag('span', $s->{'pct'}."%",
|
|
{ 'class' => 'ui_progress_value' }),
|
|
{ 'class' => 'ui_progress_key' });
|
|
}
|
|
$legend = &ui_tag('div', $keys, { 'class' => 'ui_progress_legend' });
|
|
}
|
|
|
|
# Put the text around the track according to the layout
|
|
my $body;
|
|
if ($opts->{'small'}) {
|
|
$body = $track;
|
|
}
|
|
elsif ($opts->{'inline'}) {
|
|
$body = (defined($label) ?
|
|
&ui_tag('span', $label, { 'class' => 'ui_progress_label' }) :
|
|
"").
|
|
$track.
|
|
($indet ? "" :
|
|
&ui_tag('span', $vtext, { 'class' => 'ui_progress_value' }));
|
|
}
|
|
else {
|
|
my $head = &ui_tag('span', defined($label) ? $label : "");
|
|
$head .= &ui_tag('span', $vtext, { 'class' => 'ui_progress_value' })
|
|
if (!$opts->{'inside'} && !$indet);
|
|
$body = &ui_tag('div', $head, { 'class' => 'ui_progress_head' }).
|
|
$track.$legend;
|
|
}
|
|
return &_ui_block('div', $body, {
|
|
'class' => &_ui_class('ui_progress',
|
|
$opts->{'small'} ? 'ui_progress_sm' : undef,
|
|
$opts->{'inline'} ? 'ui_progress_inline' : undef,
|
|
$opts->{'inside'} ? 'ui_progress_inside' : undef,
|
|
# Keep the marker within the track at either end
|
|
$opts->{'inside'} && $pct < 8 ? 'ui_progress_inside_start' :
|
|
$opts->{'inside'} && $pct > 92 ? 'ui_progress_inside_end' : undef,
|
|
@segments ? 'ui_progress_segmented' : undef,
|
|
$indet ? 'ui_progress_indeterminate' : undef),
|
|
%aria });
|
|
}
|
|
|
|
# _ui_progress_pct(value, [max])
|
|
# Converts a value into a whole percentage of max (100 by default),
|
|
# clamped to 0..100, treating anything that is not a number as 0
|
|
sub _ui_progress_pct
|
|
{
|
|
my ($value, $max) = @_;
|
|
$value = 0 if (!defined($value) ||
|
|
$value !~ /\A-?(?:[0-9]+(?:\.[0-9]*)?|\.[0-9]+)\z/);
|
|
$max = 100 if (!defined($max) ||
|
|
$max !~ /\A(?:[0-9]+(?:\.[0-9]*)?|\.[0-9]+)\z/ || $max <= 0);
|
|
my $pct = $value * 100 / $max;
|
|
$pct = 0 if ($pct < 0);
|
|
$pct = 100 if ($pct > 100);
|
|
return int($pct + 0.5);
|
|
}
|
|
|
|
####################### new form controls
|
|
|
|
=head2 ui_toggle(&opts)
|
|
|
|
Returns HTML for an on/off switch, submitted like a checkbox. Options
|
|
are :
|
|
|
|
=item name - Name for this input.
|
|
|
|
=item value - Value submitted when on, defaulting to 1.
|
|
|
|
=item label - Text shown next to the switch.
|
|
|
|
=item checked - Set to 1 if on by default.
|
|
|
|
=item state - Color for the checked track: primary, success, warning, danger,
|
|
info or neutral (the default). C<error> aliases danger; secondary, gray and grey
|
|
alias neutral. Use primary for the theme's blue/accent toggle color.
|
|
|
|
=item outline - Set to 1 for a transparent track with a matching border and
|
|
thumb, using the state color when on.
|
|
|
|
=item round - Set to 1 for a fully rounded track and thumb. The default is
|
|
smaller with softened corners. Works with filled and outline styles.
|
|
|
|
=item disabled - Set to 1 to disable the switch.
|
|
|
|
=item attrs - Hash reference of additional attributes for the input, such
|
|
as a data-ui-confirm message.
|
|
|
|
=item class, id, form - As for other widgets.
|
|
|
|
=cut
|
|
sub ui_toggle
|
|
{
|
|
return &theme_ui_toggle(@_) if (defined(&theme_ui_toggle));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
my $state = ($opts->{'state'} || '') eq 'primary' ? 'primary' :
|
|
&_ui_state($opts->{'state'});
|
|
my $value = defined($opts->{'value'}) ? $opts->{'value'} : 1;
|
|
my $attrs = &_ui_attrs({
|
|
%{ $opts->{'attrs'} || {} },
|
|
'type' => 'checkbox',
|
|
'name' => $opts->{'name'},
|
|
'value' => $value,
|
|
'id' => defined($opts->{'id'}) ? $opts->{'id'} :
|
|
defined($opts->{'name'}) ? $opts->{'name'}."_".$value : undef,
|
|
'form' => $opts->{'form'} });
|
|
# An explicit empty value must be submitted as empty, not the browser's
|
|
# default checkbox value of "on"
|
|
$attrs->{'value'} = $value;
|
|
$attrs->{'checked'} = undef if ($opts->{'checked'});
|
|
$attrs->{'disabled'} = undef if ($opts->{'disabled'});
|
|
my $body = &ui_tag('input', undef, $attrs);
|
|
$body .= &ui_tag('span', &ui_tag('span', undef, { 'class' => 'ui_toggle_thumb' }),
|
|
{ 'class' => 'ui_toggle_track', 'aria-hidden' => 'true' });
|
|
my $label = &_ui_text($opts, 'label');
|
|
$body .= &ui_tag('span', $label, { 'class' => 'ui_toggle_label' })
|
|
if (defined($label));
|
|
return &ui_tag('label', $body,
|
|
{ 'class' => &_ui_class('ui_toggle', 'ui_toggle_'.$state,
|
|
$opts->{'outline'} ? 'ui_toggle_outline' : undef,
|
|
$opts->{'round'} ? 'ui_toggle_round' : undef,
|
|
$opts->{'class'}) });
|
|
}
|
|
|
|
=head2 ui_search(&opts)
|
|
|
|
Returns HTML for a search input with a magnifying-glass icon. Options
|
|
are :
|
|
|
|
=item name - Name for this input.
|
|
|
|
=item value - Initial contents.
|
|
|
|
=item placeholder - Hint text, defaulting to "Search".
|
|
|
|
=item filter - CSS selector of a container whose table rows or list
|
|
entries are filtered client-side as the user types, with no server
|
|
round-trip.
|
|
|
|
=item width - CSS width for the input.
|
|
|
|
=item size - Approximate width in characters, when width is not set.
|
|
|
|
=item attrs - Hash reference of additional attributes for the input.
|
|
|
|
=item disabled, class, id, form - As for other widgets.
|
|
|
|
=cut
|
|
sub ui_search
|
|
{
|
|
return &theme_ui_search(@_) if (defined(&theme_ui_search));
|
|
my ($opts) = @_;
|
|
$opts ||= {};
|
|
my $attrs = &_ui_attrs({
|
|
%{ $opts->{'attrs'} || {} },
|
|
'type' => 'search',
|
|
'name' => $opts->{'name'},
|
|
'id' => defined($opts->{'id'}) ? $opts->{'id'} : $opts->{'name'},
|
|
'class' => &_ui_class('ui_input', 'ui_search_input', $opts->{'class'}),
|
|
'value' => $opts->{'value'},
|
|
'placeholder' => defined($opts->{'placeholder'}) ?
|
|
$opts->{'placeholder'} : $text{'ui_search'},
|
|
'size' => $opts->{'size'} ? int($opts->{'size'}) : undef,
|
|
'form' => $opts->{'form'},
|
|
'data-ui-filter' => $opts->{'filter'} });
|
|
$attrs->{'disabled'} = undef if ($opts->{'disabled'});
|
|
return &ui_tag('span',
|
|
&ui_svg_icon('search', { 'size' => 14, 'class' => 'ui_search_icon' }).
|
|
&ui_tag('input', undef, $attrs),
|
|
&_ui_attrs({ 'class' => 'ui_search',
|
|
'style' => $opts->{'width'} ?
|
|
"width:".$opts->{'width'} : undef }));
|
|
}
|
|
|
|
####################### choice lists
|
|
|
|
=head2 ui_choice(name, value, &options, [&opts])
|
|
|
|
Returns HTML for a boxed list of options with a radio button each, where
|
|
an option can carry its own inputs next to its label and further fields
|
|
under it. It replaces the hand-built tables of radios and inputs of pages
|
|
like the backup destination selector : every option is a row that wraps
|
|
on narrow screens instead of a nested table, and all inputs stay visible,
|
|
so nothing moves when the choice changes; focusing an input selects its
|
|
option (done by ui-lib.js). For a plain list of radios with at most one
|
|
input each, use ui_radio_list; when the options are many or their fields
|
|
long, ui_select_switch shows only the fields of the chosen option. Each
|
|
option is a hash reference with keys :
|
|
|
|
=item value - Value submitted when this option is selected.
|
|
|
|
=item label - Option text (or label_html for pre-built HTML).
|
|
|
|
=item desc - Optional muted explanation under the label.
|
|
|
|
=item content - HTML for inputs shown right after the label, such as the
|
|
textbox or select the option needs.
|
|
|
|
=item fields - Array ref of further inputs shown under the option, each
|
|
as C<[ label, html ]> or a hash with label (or label_html) and html, laid
|
|
out in as many columns as fit.
|
|
|
|
=item disabled - Set to 1 to disable this option.
|
|
|
|
Options are :
|
|
|
|
=item class - Additional CSS classes.
|
|
|
|
=item id - HTML id for the list element.
|
|
|
|
The buttons themselves come from ui_oneradio, so a theme styles them as
|
|
it styles every other radio button; for that reason a label is plain
|
|
text, and anything else goes in content. A ui_radio_table row
|
|
C<[ value, label, html ]> becomes
|
|
C<{ 'value' => value, 'label' => label, 'content' => html }>.
|
|
|
|
=cut
|
|
sub ui_choice
|
|
{
|
|
return &theme_ui_choice(@_) if (defined(&theme_ui_choice));
|
|
my ($name, $value, $options, $opts) = @_;
|
|
$opts ||= {};
|
|
return "" if (!$options || !@$options);
|
|
my $body = "";
|
|
foreach my $o (@$options) {
|
|
next if (ref($o) ne 'HASH');
|
|
my $oval = defined($o->{'value'}) ? $o->{'value'} : '';
|
|
|
|
# The button with its label, then the inline inputs, on the first line
|
|
my $label = &_ui_text($o, 'label');
|
|
my $head = &ui_oneradio($name, $oval,
|
|
defined($label) ? $label : &html_escape($oval),
|
|
defined($value) && $value eq $oval ? 1 : 0,
|
|
undef, $o->{'disabled'} ? 1 : 0);
|
|
my $content = &_ui_join($o->{'content'});
|
|
$head .= &ui_tag('span', $content, { 'class' => 'ui_choice_content' })
|
|
if ($content);
|
|
my $item = &ui_tag('div', $head, { 'class' => 'ui_choice_head' });
|
|
|
|
# Description and further fields under it
|
|
my $desc = &_ui_text($o, 'desc');
|
|
$item .= &ui_tag('div', $desc, { 'class' => 'ui_choice_desc' })
|
|
if (defined($desc));
|
|
$item .= &_ui_fields($o->{'fields'}, 'ui_choice');
|
|
$body .= &_ui_block('div', $item, {
|
|
'class' => &_ui_class('ui_choice_item',
|
|
$o->{'disabled'} ? 'ui_choice_disabled' : undef) });
|
|
}
|
|
return &_ui_block('div', $body, &_ui_attrs({
|
|
'class' => &_ui_class('ui_choice', $opts->{'class'}),
|
|
'role' => 'radiogroup',
|
|
'id' => $opts->{'id'} }));
|
|
}
|
|
|
|
# _ui_fields(&fields, class-prefix)
|
|
# Returns the grid of labelled inputs under an option of ui_choice or
|
|
# ui_select_switch, or an empty string when there are none. Each field is
|
|
# [ label, html ] or a hash with label (or label_html) and html.
|
|
sub _ui_fields
|
|
{
|
|
my ($fields, $prefix) = @_;
|
|
return "" if (ref($fields) ne 'ARRAY' || !@$fields);
|
|
my $rv = "";
|
|
foreach my $f (@$fields) {
|
|
my ($flabel, $fhtml);
|
|
if (ref($f) eq 'HASH') {
|
|
$flabel = &_ui_text($f, 'label');
|
|
$fhtml = $f->{'html'};
|
|
}
|
|
elsif (ref($f) eq 'ARRAY') {
|
|
$flabel = defined($f->[0]) ? &html_escape($f->[0]) : undef;
|
|
$fhtml = $f->[1];
|
|
}
|
|
else {
|
|
next;
|
|
}
|
|
$rv .= &ui_tag('div',
|
|
(defined($flabel) ?
|
|
&ui_tag('span', $flabel,
|
|
{ 'class' => $prefix.'_field_label' }) : "").
|
|
&ui_tag('span', defined($fhtml) ? $fhtml : "",
|
|
{ 'class' => $prefix.'_field_input' }),
|
|
{ 'class' => $prefix.'_field' });
|
|
}
|
|
return &_ui_block('div', $rv, { 'class' => $prefix.'_fields' });
|
|
}
|
|
|
|
=head2 ui_radio_list(name, value, &options, [&opts])
|
|
|
|
Returns HTML for a compact boxed list of radio buttons, one per line, each
|
|
with an optional input right after its label : the direct replacement of
|
|
ui_radio_table. The buttons sit at the left edge of the box, close to one
|
|
another. For options that need several fields or an explanation, use
|
|
ui_choice. Each option is a hash reference with keys value, label (plain
|
|
text), content (HTML shown after the label) and disabled, as for
|
|
ui_choice; the buttons come from ui_oneradio so that the theme styles
|
|
them. Options are class and id.
|
|
|
|
=cut
|
|
sub ui_radio_list
|
|
{
|
|
return &theme_ui_radio_list(@_) if (defined(&theme_ui_radio_list));
|
|
my ($name, $value, $options, $opts) = @_;
|
|
$opts ||= {};
|
|
return "" if (!$options || !@$options);
|
|
my $body = "";
|
|
foreach my $o (@$options) {
|
|
next if (ref($o) ne 'HASH');
|
|
my $oval = defined($o->{'value'}) ? $o->{'value'} : '';
|
|
my $label = &_ui_text($o, 'label');
|
|
my $item = &ui_oneradio($name, $oval,
|
|
defined($label) ? $label : &html_escape($oval),
|
|
defined($value) && $value eq $oval ? 1 : 0,
|
|
undef, $o->{'disabled'} ? 1 : 0);
|
|
my $content = &_ui_join($o->{'content'});
|
|
$item .= &ui_tag('span', $content, { 'class' => 'ui_radio_list_content' })
|
|
if ($content);
|
|
$body .= &ui_tag('div', $item, {
|
|
'class' => &_ui_class('ui_radio_list_item',
|
|
$o->{'disabled'} ? 'ui_radio_list_disabled' : undef) });
|
|
}
|
|
return &_ui_block('div', $body, &_ui_attrs({
|
|
'class' => &_ui_class('ui_radio_list', $opts->{'class'}),
|
|
'role' => 'radiogroup',
|
|
'id' => $opts->{'id'} }));
|
|
}
|
|
|
|
=head2 ui_select_switch(name, value, &options, [&opts])
|
|
|
|
Returns HTML for a select whose choice decides which block of inputs is
|
|
shown under it : the alternative to ui_choice when the options are many
|
|
or their fields long, since only the block of the current choice takes
|
|
any space. Each option is a hash reference with keys value, label (the
|
|
select entry), desc, content and fields as for ui_choice, the last three
|
|
making up the option's block. The blocks of the other options are hidden,
|
|
and ui-lib.js switches them when the select changes; the inputs of hidden
|
|
blocks are still submitted with the form. Options are class and id for
|
|
the wrapper.
|
|
|
|
=cut
|
|
sub ui_select_switch
|
|
{
|
|
return &theme_ui_select_switch(@_) if (defined(&theme_ui_select_switch));
|
|
my ($name, $value, $options, $opts) = @_;
|
|
$opts ||= {};
|
|
my @options = grep { ref($_) eq 'HASH' } @{$options || []};
|
|
return "" if (!@options);
|
|
# A select defaults to its first option when the saved value is absent.
|
|
# Use that same value for the panels so the visible fields always agree.
|
|
if (!defined($value) ||
|
|
!(grep { (defined($_->{'value'}) ? $_->{'value'} : '') eq $value }
|
|
@options)) {
|
|
$value = defined($options[0]->{'value'}) ? $options[0]->{'value'} : '';
|
|
}
|
|
my @sel;
|
|
my $panels = "";
|
|
foreach my $o (@options) {
|
|
my $oval = defined($o->{'value'}) ? $o->{'value'} : '';
|
|
push(@sel, [ $oval,
|
|
defined($o->{'label_html'}) ? $o->{'label_html'} :
|
|
defined($o->{'label'}) ? &html_escape($o->{'label'}) :
|
|
&html_escape($oval) ]);
|
|
|
|
# The block for this option, hidden unless it is the current one. Its
|
|
# inline content is shown as a first field labelled with the option
|
|
# name, since the button that would have named it is not there
|
|
my $panel = "";
|
|
my $desc = &_ui_text($o, 'desc');
|
|
$panel .= &ui_tag('div', $desc, { 'class' => 'ui_select_switch_desc' })
|
|
if (defined($desc));
|
|
my $content = &_ui_join($o->{'content'});
|
|
$panel .= &ui_tag('div',
|
|
&ui_tag('span', $sel[-1]->[1],
|
|
{ 'class' => 'ui_select_switch_field_label' }).
|
|
&ui_tag('span', $content,
|
|
{ 'class' => 'ui_select_switch_field_input' }),
|
|
{ 'class' => 'ui_select_switch_field ui_select_switch_content' })
|
|
if ($content);
|
|
$panel .= &_ui_fields($o->{'fields'}, 'ui_select_switch');
|
|
next if ($panel eq '');
|
|
my $attrs = { 'class' => 'ui_select_switch_panel',
|
|
'data-ui-switch-value' => $oval };
|
|
$attrs->{'hidden'} = undef if ($oval ne $value);
|
|
$panels .= &_ui_block('div', $panel, $attrs);
|
|
}
|
|
my $select = &ui_select($name, $value, \@sel, undef, undef, undef, 0,
|
|
"data-ui-switch='1'");
|
|
return &_ui_block('div', $select.$panels, &_ui_attrs({
|
|
'class' => &_ui_class('ui_select_switch', $opts->{'class'}),
|
|
'id' => $opts->{'id'} }));
|
|
}
|
|
|
|
####################### multiple selection
|
|
|
|
=head2 ui_multi_select_list(name, &values, &options, [&opts] | [size], [add-if-missing], [disabled?], [options-title], [values-title], [width])
|
|
|
|
Returns a scrolling checkbox list with selection links, an expandable filter
|
|
and a selection count beside the mode selector or links. It submits
|
|
newline-joined values under name; ui-lib.js keeps them in sync.
|
|
Missing selected values are added automatically. Labels are plain text by
|
|
default; positional calls also accept pre-escaped labels. Set html to 1 for
|
|
trusted label markup.
|
|
|
|
With no entries, it shows only empty_label, preserving the selection, mode
|
|
and children form values in hidden inputs. Nonempty lists load their assets
|
|
even outside ui_page_start.
|
|
|
|
Shift-click applies the clicked state from the last clicked entry to the
|
|
current one, skipping filtered, folded and disabled entries. Labels and row
|
|
backgrounds work too.
|
|
|
|
Accepts an options hash or the legacy trailing positional arguments.
|
|
Calls without an options hash preserve selected labels, attributes, value
|
|
order and pre-escaped label text. Newly selected entries are prepended as in the old
|
|
widget. Pass an options hash (even empty) for plain labels and option ordering.
|
|
Size, add-if-missing, titles and width are ignored.
|
|
|
|
=item name - HTML name for the input.
|
|
|
|
=item values - Array reference of selected scalars or [ value, label, attributes ] entries. Attributes are also retained when a selected entry is missing from options.
|
|
|
|
=item options - Array reference of [ value, label, attributes ] entries or hashes with keys value, label, suffix (muted text after the label), level (indentation depth), tag (chip at the right), disabled and attrs. Attributes may be a hash or trusted HTML attribute string, as in ui_select. disabled applies to the checkbox; other attributes, such as title, style and class, apply to the row. Widget identity and selection remain controlled by the library.
|
|
|
|
=item opts - Optional hash reference with the keys :
|
|
|
|
=item search - Show or hide the filter button; defaults to on above eight entries. The input opens to its left in reserved space. Selection links appear above eight entries, affect visible, enabled entries and are omitted when disabled.
|
|
|
|
=item count - Show the selection count; defaults to on. Set to 0 to omit it.
|
|
|
|
=item html - Set to 1 to render labels as trusted HTML. Labels are escaped by default; values, suffixes and tags remain escaped.
|
|
|
|
=item placeholder - Hint text of the filter box.
|
|
|
|
=item empty_label - Plain text shown when there are no entries, defaulting to "No entries".
|
|
|
|
=item height - Height beyond which the list scrolls : a CSS length, 170px by default.
|
|
|
|
=item modes - Hash with name, value and options as for ui_select. The hide array lists modes that hide the list, such as "all servers". Set radios to 1 to use radio buttons.
|
|
|
|
=item children - Hash defining a switch that folds indented entries under their parent. Keys: name, value, checked, label or label_html, and note (a language key with $1 for the child count, shown beside the parent while folded). Folded selections are retained but excluded from the count.
|
|
|
|
=item disabled - Set to 1 to disable every input of the widget.
|
|
|
|
=item class - Extra CSS class names for the widget.
|
|
|
|
=item id - Widget HTML ID, ui_multi_ followed by the name by default. Explicit IDs also separate checkbox and filter IDs when forms reuse a field name.
|
|
|
|
=cut
|
|
sub ui_multi_select_list
|
|
{
|
|
return &theme_ui_multi_select_list(@_) if (defined(&theme_ui_multi_select_list));
|
|
my ($name, $values, $options, $opts) = @_;
|
|
my $legacy = ref($opts) ne 'HASH';
|
|
if (ref($opts) ne 'HASH') {
|
|
# Retain the legacy positional disabled argument.
|
|
$opts = { 'disabled' => $_[5] };
|
|
}
|
|
my $dis = $opts->{'disabled'} ? 1 : 0;
|
|
# Separate controls in forms that share a submitted field name.
|
|
my $inputname = defined($opts->{'id'}) ? $opts->{'id'} : $name;
|
|
|
|
# Normalize options without changing the caller's data.
|
|
my @items;
|
|
foreach my $o (@{$options || []}) {
|
|
if (ref($o) eq 'HASH') {
|
|
push(@items, { %$o });
|
|
}
|
|
elsif (ref($o) eq 'ARRAY') {
|
|
push(@items, { 'value' => $o->[0], 'label' => $o->[1],
|
|
'attrs' => $o->[2] });
|
|
}
|
|
}
|
|
# Index options to add missing selections without repeated scans.
|
|
my %offered = map { defined($_->{'value'}) ? ($_->{'value'}, $_) : () } @items;
|
|
my %selected;
|
|
my @chosen;
|
|
foreach my $v (@{$values || []}) {
|
|
my ($val, $label, $attrs) = ref($v) eq 'ARRAY' ? @$v : ($v);
|
|
next if (!defined($val));
|
|
next if ($selected{$val}++);
|
|
my $item = $offered{$val};
|
|
if (!$item) {
|
|
$item = { 'value' => $val, 'label' => $label, 'attrs' => $attrs };
|
|
push(@items, $item);
|
|
$offered{$val} = $item;
|
|
}
|
|
# The old selected pane uses the label and attributes supplied in values.
|
|
if ($legacy && ref($v) eq 'ARRAY') {
|
|
$item->{'label'} = defined($label) && $label ne '' ? $label : $val;
|
|
$item->{'attrs'} = $attrs;
|
|
}
|
|
push(@chosen, $item);
|
|
}
|
|
foreach my $it (@items) {
|
|
$it->{'value'} = '' if (!defined($it->{'value'}));
|
|
$it->{'label'} = $it->{'value'}
|
|
if (!defined($it->{'label'}) || $it->{'label'} eq '');
|
|
my $tags = $it->{'attrs'};
|
|
my %attrs;
|
|
if (ref($tags) eq 'HASH') {
|
|
# Copy and normalize attribute names without changing caller data.
|
|
%attrs = map { lc($_), $tags->{$_} } keys %$tags;
|
|
}
|
|
else {
|
|
# Parse legacy tags without splitting quoted values.
|
|
$tags ||= '';
|
|
while ($tags =~ /\G\s*([a-z_:][a-z0-9_.:-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'<>`]+)))?/gci) {
|
|
my ($name, $double, $single, $bare) = ($1, $2, $3, $4);
|
|
$attrs{lc($name)} = defined($double) ? $double :
|
|
defined($single) ? $single : $bare;
|
|
}
|
|
}
|
|
# HTML boolean attributes are true whenever present, even disabled="false".
|
|
$it->{'disabled'} ||= exists($attrs{'disabled'});
|
|
delete($attrs{'disabled'});
|
|
$it->{'attrs'} = \%attrs;
|
|
}
|
|
@chosen = grep { $selected{$_->{'value'}} } @items if (!$legacy);
|
|
|
|
# Resolve the mode selector and initial list visibility.
|
|
my $modes = $opts->{'modes'};
|
|
my $hasmodes = ref($modes) eq 'HASH' && defined($modes->{'name'}) &&
|
|
ref($modes->{'options'}) eq 'ARRAY';
|
|
my @hide = $hasmodes ? @{$modes->{'hide'} || []} : ();
|
|
my $hidden = $hasmodes && defined($modes->{'value'}) &&
|
|
(grep { $_ eq $modes->{'value'} } @hide) ? 1 : 0;
|
|
|
|
# Resolve the optional child-folding switch.
|
|
my $children = ref($opts->{'children'}) eq 'HASH' &&
|
|
defined($opts->{'children'}->{'name'}) ?
|
|
$opts->{'children'} : undef;
|
|
my $folded = $children && $children->{'checked'} ? 1 : 0;
|
|
|
|
my $count = '';
|
|
if (!defined($opts->{'count'}) || $opts->{'count'}) {
|
|
# Exclude folded children, retaining their submitted values.
|
|
my $nchosen = grep { !$folded || !$_->{'level'} } @chosen;
|
|
my $cattrs = { 'class' => 'ui_multi_count' };
|
|
$cattrs->{'hidden'} = undef if (!$nchosen || $hidden);
|
|
$count = &ui_tag('span',
|
|
&html_escape(&text('ui_multi_selected', $nchosen)), $cattrs);
|
|
}
|
|
my $counted = 0;
|
|
my $search = defined($opts->{'search'}) ? $opts->{'search'} : @items > 8;
|
|
|
|
# Empty lists need only a plain label; retain their submitted values.
|
|
if (!@items) {
|
|
my $empty = &ui_tag('span', &html_escape(
|
|
defined($opts->{'empty_label'}) ? $opts->{'empty_label'} :
|
|
$text{'ui_multi_noentries'})).
|
|
&ui_hidden($name, '');
|
|
if (!$dis) {
|
|
$empty .= &ui_hidden($modes->{'name'}, $modes->{'value'})
|
|
if ($hasmodes && defined($modes->{'value'}));
|
|
$empty .= &ui_hidden($children->{'name'},
|
|
defined($children->{'value'}) ? $children->{'value'} : 1)
|
|
if ($folded);
|
|
}
|
|
return $empty;
|
|
}
|
|
|
|
my $note = $children ? $children->{'note'} : undef;
|
|
# Count children for each parent's folded summary.
|
|
my $last;
|
|
foreach my $it (@items) {
|
|
if ($it->{'level'}) {
|
|
$last->{'kids'}++ if ($last);
|
|
}
|
|
else {
|
|
$last = $it;
|
|
}
|
|
}
|
|
|
|
# Render the mode selector and count.
|
|
my $rv = "";
|
|
if ($hasmodes) {
|
|
# ui_radio accepts HTML, so escape these plain-text labels first.
|
|
my @radios = map {
|
|
ref($_) eq 'ARRAY' ?
|
|
[ $_->[0], &html_escape($_->[1] || $_->[0]), $_->[2] ] :
|
|
[ $_, &html_escape($_) ]
|
|
} @{$modes->{'options'}};
|
|
$rv .= &ui_tag('div',
|
|
($modes->{'radios'} ?
|
|
&ui_radio($modes->{'name'}, $modes->{'value'},
|
|
\@radios, $dis) :
|
|
&ui_select($modes->{'name'}, $modes->{'value'},
|
|
$modes->{'options'}, 1, 0, 0, $dis)).
|
|
$count,
|
|
{ 'class' => 'ui_multi_modes' });
|
|
$counted = 1;
|
|
}
|
|
|
|
# Larger lists get themed selection links, with actions scoped to this list.
|
|
my $tools = "";
|
|
if (!$dis && @items > 8) {
|
|
my $links = &ui_links_row([
|
|
&ui_tag('a', &html_escape($text{'ui_selall'}),
|
|
{ 'href' => '#', 'class' => 'select_all',
|
|
'data-ui-multi-action' => 'all' }),
|
|
&ui_tag('a', &html_escape($text{'ui_selinv'}),
|
|
{ 'href' => '#', 'class' => 'select_invert',
|
|
'data-ui-multi-action' => 'invert' }) ]);
|
|
# Keep the links and filter on the same toolbar.
|
|
$links =~ s/<br>\s*$//i;
|
|
# Keep link separators inside one flex item.
|
|
$tools .= &ui_tag('div', $links, { 'class' => 'ui_multi_links' });
|
|
}
|
|
$tools .= $count if (!$counted);
|
|
if ($search) {
|
|
# Render the filter with clear and toggle buttons.
|
|
my $hint = defined($opts->{'placeholder'}) ? $opts->{'placeholder'} :
|
|
$text{'ui_multi_filter'};
|
|
my $attrs = { 'type' => 'search', 'name' => $name.'_search',
|
|
'id' => $inputname.'_search', 'class' => 'ui_input ui_search_input',
|
|
'placeholder' => $hint, 'aria-label' => $hint,
|
|
'data-ui-multi-search' => 1, 'autocomplete' => 'off' };
|
|
$attrs->{'disabled'} = undef if ($dis);
|
|
my $filter = &ui_tag('input', undef, $attrs);
|
|
foreach my $action ( 'filter-clear', 'filter' ) {
|
|
my $clear = $action eq 'filter-clear';
|
|
my $battrs = {
|
|
'type' => 'button',
|
|
'class' => 'ui_multi_filter_button ui_multi_'.
|
|
($clear ? 'filter_clear' : 'filter_toggle'),
|
|
'data-ui-multi-action' => $action,
|
|
'aria-label' => $text{$clear ? 'ui_multi_filter_clear' :
|
|
'ui_multi_filter'},
|
|
'aria-controls' => $inputname.'_search' };
|
|
$battrs->{'aria-expanded'} = 'false' if (!$clear);
|
|
$battrs->{'disabled'} = undef if ($dis);
|
|
$filter .= &ui_tag('button',
|
|
&ui_svg_icon($clear ? 'x-circle' : 'filter', { 'size' => 14 }),
|
|
$battrs);
|
|
}
|
|
$tools .= &ui_tag('span', $filter,
|
|
{ 'class' => 'ui_search ui_multi_filter' });
|
|
}
|
|
my $body = $tools ? &ui_tag('div', $tools, { 'class' => 'ui_multi_tools' }) : '';
|
|
|
|
# Render themed checkboxes with optional suffixes, child counts and tags.
|
|
my $rows = "";
|
|
foreach my $it (@items) {
|
|
my $val = $it->{'value'};
|
|
my $label = $opts->{'html'} ? $it->{'label'} :
|
|
&html_escape($it->{'label'}, $legacy);
|
|
# Filter on label text, excluding markup while retaining literal entities.
|
|
my $filter_label = $opts->{'html'} ?
|
|
&html_escape(&html_strip($label), 1) : $label;
|
|
$label .= &ui_tag('span', &html_escape($it->{'suffix'}),
|
|
{ 'class' => 'ui_multi_suffix' })
|
|
if (defined($it->{'suffix'}) && $it->{'suffix'} ne '');
|
|
# Checkbox renderers may place HTML outside their label element.
|
|
my $ctags = "data-ui-multi-item='1'";
|
|
$ctags .= ' aria-label="'.$filter_label.'"' if ($opts->{'html'});
|
|
my $row = &ui_checkbox($inputname.'_item', $val, $label,
|
|
$selected{$val} ? 1 : 0,
|
|
$ctags,
|
|
$dis || $it->{'disabled'} ? 1 : 0);
|
|
if ($note && $it->{'kids'}) {
|
|
my $nattrs = { 'class' => 'ui_multi_note' };
|
|
$nattrs->{'hidden'} = undef if (!$folded);
|
|
$row .= &ui_tag('span',
|
|
&html_escape(&text($note, $it->{'kids'})), $nattrs);
|
|
}
|
|
$row .= &ui_tag('span', &ui_chip($it->{'tag'}),
|
|
{ 'class' => 'ui_multi_side' })
|
|
if (defined($it->{'tag'}) && $it->{'tag'} ne '');
|
|
# Lowercase in the browser, after UTF-8 bytes have been decoded.
|
|
my $attrs = { %{$it->{'attrs'}}, %{&_ui_attrs({
|
|
'class' => &_ui_class('ui_multi_item',
|
|
$it->{'attrs'}->{'class'},
|
|
$it->{'level'} ? 'ui_multi_level'.int($it->{'level'})
|
|
: undef,
|
|
$it->{'disabled'} ? 'ui_multi_disabled' : undef),
|
|
'data-ui-multi-level' => $it->{'level'} ? int($it->{'level'})
|
|
: undef,
|
|
'data-ui-multi-text' => join(" ",
|
|
grep { defined($_) && $_ ne '' }
|
|
$filter_label.&html_escape($it->{'suffix'}, $legacy),
|
|
&html_escape($it->{'tag'}, $legacy)) }) } };
|
|
$attrs->{'hidden'} = undef if ($folded && $it->{'level'});
|
|
$rows .= &ui_tag('div', $row, $attrs);
|
|
}
|
|
|
|
# Include the initially hidden no-matches message.
|
|
$body .= &_ui_block('div',
|
|
&_ui_block('div', $rows, { 'class' => 'ui_multi_items' }).
|
|
&ui_tag('div', &ui_svg_icon('search', { 'size' => 14 })." ".
|
|
&html_escape($text{'ui_multi_nomatch'}),
|
|
{ 'class' => 'ui_multi_empty', 'hidden' => undef }),
|
|
{ 'class' => 'ui_multi_list' });
|
|
|
|
# Render the child-folding switch.
|
|
if ($children) {
|
|
$body .= &ui_tag('div',
|
|
&ui_toggle({ 'name' => $children->{'name'},
|
|
'value' => defined($children->{'value'}) ?
|
|
$children->{'value'} : 1,
|
|
'checked' => $folded,
|
|
'state' => 'primary',
|
|
'outline' => 1,
|
|
'label' => $children->{'label'},
|
|
'label_html' => $children->{'label_html'},
|
|
'attrs' => { 'data-ui-multi-action' => 'children' },
|
|
'disabled' => $dis }),
|
|
{ 'class' => 'ui_multi_foot' });
|
|
}
|
|
|
|
# Submit the selected values in the established newline-separated format.
|
|
$body .= &ui_hidden($name, join("\n", map { $_->{'value'} } @chosen));
|
|
my $battrs = { 'class' => 'ui_multi_body' };
|
|
$battrs->{'hidden'} = undef if ($hidden);
|
|
$rv .= &_ui_block('div', $body, $battrs);
|
|
my $attrs = &_ui_attrs({
|
|
'class' => &_ui_class('ui_multi', $opts->{'class'},
|
|
$dis ? 'ui_multi_disabled' : undef),
|
|
'id' => defined($opts->{'id'}) ? $opts->{'id'} : 'ui_multi_'.$name,
|
|
'style' => $opts->{'height'} ?
|
|
"--ui-multi-height:".$opts->{'height'} : undef,
|
|
'data-ui-multi' => $name,
|
|
'data-ui-multi-hide' => &html_escape(
|
|
&convert_to_json([ map { "$_" } @hide ])),
|
|
'data-ui-multi-text-selected' => $text{'ui_multi_selected'} });
|
|
# Have JavaScript retain the hidden input's initial order for resets.
|
|
$attrs->{'data-ui-multi-order'} = '' if ($legacy);
|
|
return &ui_page_assets().&_ui_block('div', $rv, $attrs);
|
|
}
|
|
|
|
|
|
1;
|