use meta HTML API for config pages

This commit is contained in:
Roland Gruber 2010-11-14 20:35:34 +00:00
parent fe8d8789b1
commit d32f1fb55e
5 changed files with 190 additions and 117 deletions

View File

@ -538,6 +538,8 @@ class htmlButton extends htmlElement {
private $title = null; private $title = null;
/** enabled or disabled */ /** enabled or disabled */
private $isEnabled = true; private $isEnabled = true;
/** icon class (CSS) for buttons with icon + text */
private $iconClass = null;
/** /**
* Constructor. * Constructor.
@ -579,7 +581,7 @@ class htmlButton extends htmlElement {
$style = ' style="background-image: url(../../graphics/' . $this->value . ');"'; $style = ' style="background-image: url(../../graphics/' . $this->value . ');"';
} }
// text button // text button
else { elseif ($this->iconClass == null) {
$class = ' class="smallPadding"'; $class = ' class="smallPadding"';
} }
if ($this->title != null) { if ($this->title != null) {
@ -595,9 +597,13 @@ class htmlButton extends htmlElement {
else { else {
echo '<button id="btn_' . $this->name . '"' . $name . $style . $class . $title . $disabled . '>' . $this->value . '</button>'; echo '<button id="btn_' . $this->name . '"' . $name . $style . $class . $title . $disabled . '>' . $this->value . '</button>';
// text buttons get JQuery style // text buttons get JQuery style
$icon = '';
if ($this->iconClass != null) {
$icon = '{ icons: { primary: \'' . $this->iconClass . '\' } }';
}
echo '<script type="text/javascript">'; echo '<script type="text/javascript">';
echo ' jQuery(document).ready(function() {'; echo ' jQuery(document).ready(function() {';
echo "jQuery('#btn_" . $this->name . "').button();"; echo "jQuery('#btn_" . $this->name . "').button(" . $icon . ");";
echo '});'; echo '});';
echo '</script>'; echo '</script>';
} }
@ -622,6 +628,16 @@ class htmlButton extends htmlElement {
$this->isEnabled = $isEnabled; $this->isEnabled = $isEnabled;
} }
/**
* Sets an additional icon for a text button.
* The icon class is a CSS class that specifies the icon image (e.g. "deleteButton" in layout.css).
*
* @param String $iconClass icon class
*/
public function setIconClass($iconClass) {
$this->iconClass = htmlspecialchars($iconClass);
}
} }
/** /**
@ -677,6 +693,8 @@ class htmlSelect extends htmlElement {
private $isEnabled = true; private $isEnabled = true;
/** width of input element */ /** width of input element */
private $width = ''; private $width = '';
/** transform select boxes with one element to text */
private $transformSingleSelect = true;
/** /**
* Constructor. * Constructor.
@ -741,7 +759,7 @@ class htmlSelect extends htmlElement {
$style = ' style="width: ' . $this->width . '"'; $style = ' style="width: ' . $this->width . '"';
} }
// hide select boxes that contain less than 2 elements // hide select boxes that contain less than 2 elements
if (sizeof($this->elements) < 2) { if ((sizeof($this->elements) < 2) && $this->transformSingleSelect) {
echo '<div class="hidden">'; echo '<div class="hidden">';
} }
// print select box // print select box
@ -761,7 +779,7 @@ class htmlSelect extends htmlElement {
} }
echo "</select>\n"; echo "</select>\n";
// if select box has only one element then show it as text // if select box has only one element then show it as text
if (sizeof($this->elements) == 1) { if ((sizeof($this->elements) == 1) && $this->transformSingleSelect) {
echo '</div>'; echo '</div>';
if ($this->hasDescriptiveElements) { if ($this->hasDescriptiveElements) {
$keys = array_keys($this->elements); $keys = array_keys($this->elements);
@ -883,6 +901,15 @@ class htmlSelect extends htmlElement {
$this->width = htmlspecialchars($width); $this->width = htmlspecialchars($width);
} }
/**
* Specifies if select boxes that contain only a single element should be transformed to a simple text field.
*
* @param boolean $transformSingleSelect transform single options to text
*/
public function setTransformSingleSelect($transformSingleSelect) {
$this->transformSingleSelect = $transformSingleSelect;
}
} }
/** /**
@ -1028,6 +1055,8 @@ class htmlOutputText extends htmlElement {
private $string; private $string;
/** specifies if HTML code should be escaped */ /** specifies if HTML code should be escaped */
private $escapeHTML; private $escapeHTML;
/** bold text */
private $isBold = false;
/** /**
* Constructor. * Constructor.
@ -1052,15 +1081,30 @@ class htmlOutputText extends htmlElement {
* @return array List of input field names and their type (name => type) * @return array List of input field names and their type (name => type)
*/ */
function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) { function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
if ($this->isBold) {
echo "<b>";
}
if ($this->escapeHTML) { if ($this->escapeHTML) {
echo htmlspecialchars($this->string); echo htmlspecialchars($this->string);
} }
else { else {
echo $this->string; echo $this->string;
} }
if ($this->isBold) {
echo "</b>";
}
return array(); return array();
} }
/**
* Specifies if the whole text should be printed in bold.
*
* @param boolean $isBold bold text
*/
public function setIsBold($isBold) {
$this->isBold = $isBold;
}
} }
/** /**
@ -1700,14 +1744,17 @@ class htmlSubTitle extends htmlElement {
/** descriptive label */ /** descriptive label */
private $label = null; private $label = null;
/** optional image */
private $image = null;
/** /**
* Constructor. * Constructor.
* *
* @param String $label label * @param String $label label
*/ */
function __construct($label) { function __construct($label, $image = null) {
$this->label = htmlspecialchars($label); $this->label = htmlspecialchars($label);
$this->image = htmlspecialchars($image);
// the title should not end at a table cell // the title should not end at a table cell
$this->colspan = 100; $this->colspan = 100;
} }
@ -1726,6 +1773,9 @@ class htmlSubTitle extends htmlElement {
function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) { function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
echo "<div class=\"subTitle\">\n"; echo "<div class=\"subTitle\">\n";
echo "<h4 class=\"subTitleText\">\n"; echo "<h4 class=\"subTitleText\">\n";
if ($this->image != null) {
echo '<img src="' . $this->image . '" alt="' . $this->label . '">&nbsp;';
}
echo $this->label; echo $this->label;
echo "</h4>\n"; echo "</h4>\n";
echo "</div>\n"; echo "</div>\n";

View File

@ -214,6 +214,7 @@ echo '</ul>';
jQuery(document).ready(function() { jQuery(document).ready(function() {
jQuery('#generalSettingsButton').addClass('ui-tabs-selected'); jQuery('#generalSettingsButton').addClass('ui-tabs-selected');
jQuery('#generalSettingsButton').addClass('ui-state-active'); jQuery('#generalSettingsButton').addClass('ui-state-active');
jQuery('#generalSettingsButton').addClass('userlist-bright');
jQuery('#saveButton').button({ jQuery('#saveButton').button({
icons: { icons: {
primary: 'saveButton' primary: 'saveButton'
@ -227,7 +228,7 @@ jQuery(document).ready(function() {
}); });
</script> </script>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom"> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom userlist-bright">
<?php <?php
echo ("<fieldset><legend><img align=\"middle\" src=\"../../graphics/profiles.png\" alt=\"profiles.png\"> " . _("Server settings") . "</legend><br>\n"); echo ("<fieldset><legend><img align=\"middle\" src=\"../../graphics/profiles.png\" alt=\"profiles.png\"> " . _("Server settings") . "</legend><br>\n");

View File

@ -181,6 +181,7 @@ echo '</ul>';
jQuery(document).ready(function() { jQuery(document).ready(function() {
jQuery('#editmodules').addClass('ui-tabs-selected'); jQuery('#editmodules').addClass('ui-tabs-selected');
jQuery('#editmodules').addClass('ui-state-active'); jQuery('#editmodules').addClass('ui-state-active');
jQuery('#editmodules').addClass('userlist-bright');
jQuery('#saveButton').button({ jQuery('#saveButton').button({
icons: { icons: {
primary: 'saveButton' primary: 'saveButton'
@ -191,10 +192,17 @@ jQuery(document).ready(function() {
primary: 'cancelButton' primary: 'cancelButton'
} }
}); });
// set common width for select boxes
var maxWidth = 0;
jQuery("select").each(function(){
if (jQuery(this).width() > maxWidth)
maxWidth = jQuery(this).width();
});
jQuery("select").width(maxWidth);
}); });
</script> </script>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom"> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom userlist-bright">
<?php <?php
@ -203,9 +211,12 @@ for ($i = 0; $i < sizeof($types); $i++) {
$account_list[] = array($types[$i], getTypeAlias($types[$i])); $account_list[] = array($types[$i], getTypeAlias($types[$i]));
} }
$container = new htmlTable();
for ($i = 0; $i < sizeof($account_list); $i++) { for ($i = 0; $i < sizeof($account_list); $i++) {
config_showAccountModules($account_list[$i][0], $account_list[$i][1]); config_showAccountModules($account_list[$i][0], $account_list[$i][1], $container);
} }
$tabindex = 1;
parseHtml(null, $container, array(), false, $tabindex, 'user');
echo "<p>\n"; echo "<p>\n";
@ -227,8 +238,9 @@ echo "</html>\n";
* *
* @param string $scope account type * @param string $scope account type
* @param string $title title for module selection (e.g. "User modules") * @param string $title title for module selection (e.g. "User modules")
* @param htmlTable $container meta HTML container
*/ */
function config_showAccountModules($scope, $title) { function config_showAccountModules($scope, $title, &$container) {
$conf = &$_SESSION['conf_config']; $conf = &$_SESSION['conf_config'];
$typeSettings = $conf->get_typeSettings(); $typeSettings = $conf->get_typeSettings();
// account modules // account modules
@ -246,71 +258,70 @@ function config_showAccountModules($scope, $title) {
} }
natcasesort($sortedAvailable); natcasesort($sortedAvailable);
// show account modules // build options for selected and available modules
$icon = '<img alt="' . $scope . '" src="../../graphics/' . $scope . '.png">&nbsp;'; $selOptions = array();
echo "<fieldset class=\"" . $scope . "edit\"><legend>$icon<b>" . $title . "</b></legend><br>\n";
echo "<table border=0 width=\"100%\">\n";
// select boxes
echo "<tr>\n";
echo "<td width=\"5%\"></td>\n";
echo "<td width=\"40%\">\n";
echo "<fieldset class=\"" . $scope . "edit\">\n";
echo "<legend>" . _("Selected modules") . "</legend><br>\n";
echo "<select class=\"" . $scope . "edit\" name=\"" . $scope . "_selected[]\" size=5 multiple>\n";
for ($i = 0; $i < sizeof($selected); $i++) { for ($i = 0; $i < sizeof($selected); $i++) {
if (in_array($selected[$i], $available)) { // selected modules must be available if (in_array($selected[$i], $available)) { // selected modules must be available
if (is_base_module($selected[$i], $scope)) { // mark base modules if (is_base_module($selected[$i], $scope)) { // mark base modules
echo "<option value=\"" . $selected[$i] . "\">"; $selOptions[getModuleAlias($selected[$i], $scope) . " (" . $selected[$i] . ")(*)"] = $selected[$i];
echo getModuleAlias($selected[$i], $scope) . " (" . $selected[$i] . ")(*)";
echo "</option>\n";
} }
else { else {
echo "<option value=\"" . $selected[$i] . "\">"; $selOptions[getModuleAlias($selected[$i], $scope) . " (" . $selected[$i] . ")"] = $selected[$i];
echo getModuleAlias($selected[$i], $scope) . " (" . $selected[$i] . ")";
echo "</option>\n";
} }
} }
} }
echo "</select>\n"; $availOptions = array();
echo "</fieldset>\n";
echo "</td>\n";
echo "<td width=\"10%\" align=\"center\">\n";
echo "<p>";
echo "<input type=submit title=\"" . _('Add') . "\" value=\" \" name=\"" . $scope . "_add\"" .
"style=\"background-image: url(../../graphics/back.gif);background-position: 2px center;background-repeat: no-repeat;width:24px;height:24px;background-color:transparent\">";
echo "<br>";
echo "<input type=submit title=\"" . _('Remove') . "\" value=\" \" name=\"" . $scope . "_remove\"" .
"style=\"background-image: url(../../graphics/forward.gif);background-position: 2px center;background-repeat: no-repeat;width:24px;height:24px;background-color:transparent\">";
echo "</p>\n";
echo "</td>\n";
echo "<td width=\"40%\">\n";
echo "<fieldset class=\"" . $scope . "edit\">\n";
echo "<legend>" . _("Available modules") . "</legend><br>\n";
echo "<select class=\"" . $scope . "edit\" name=\"" . $scope . "_available[]\" size=5 multiple>\n";
foreach ($sortedAvailable as $key => $value) { foreach ($sortedAvailable as $key => $value) {
if (! in_array($key, $selected)) { // display non-selected modules if (! in_array($key, $selected)) { // display non-selected modules
if (is_base_module($key, $scope)) { // mark base modules if (is_base_module($key, $scope)) { // mark base modules
echo "<option value=\"" . $key . "\">"; $availOptions[$value . " (" . $key . ")(*)"] = $key;
echo $value . " (" . $key . ")(*)";
echo "</option>\n";
} }
else { else {
echo "<option value=\"" . $key . "\">"; $availOptions[$value . " (" . $key . ")"] = $key;
echo $value . " (" . $key . ")";
echo "</option>\n";
} }
} }
} }
echo "</select>\n";
echo "</fieldset>\n";
echo "</td>\n";
echo "<td width=\"5%\"></td>\n";
echo "</tr>\n";
echo "</table>\n";
echo "</fieldset>\n"; // add account module selection
$container->addElement(new htmlSubTitle($title, '../../graphics/' . $scope . '.png'), true);
echo "<br>\n"; $container->addElement(new htmlOutputText(_("Selected modules")));
// add/remove buttons
$buttonContainer = new htmlTable();
$buttonContainer->rowspan = 2;
if (sizeof($availOptions) > 0) {
$addButton = new htmlButton($scope . "_add", 'back.gif', true);
$addButton->setTitle(_('Add'));
$buttonContainer->addElement($addButton, true);
}
if (sizeof($selOptions) > 0) {
$remButton = new htmlButton($scope . "_remove", 'forward.gif', true);
$remButton->setTitle(_('Remove'));
$buttonContainer->addElement($remButton, true);
}
$container->addElement($buttonContainer);
$container->addElement(new htmlOutputText(_("Available modules")), true);
// selected modules
if (sizeof($selOptions) > 0) {
$selSelect = new htmlSelect($scope . '_selected', $selOptions, array(), 5);
$selSelect->setTransformSingleSelect(false);
$selSelect->setMultiSelect(true);
$selSelect->setHasDescriptiveElements(true);
$selSelect->setSortElements(false);
$container->addElement($selSelect);
}
else {
$container->addElement(new htmlOutputText(''));
}
// available modules
if (sizeof($availOptions) > 0) {
$availSelect = new htmlSelect($scope . "_available", $availOptions, array(), 5);
$availSelect->setTransformSingleSelect(false);
$availSelect->setHasDescriptiveElements(true);
$availSelect->setMultiSelect(true);
$container->addElement($availSelect, true);
}
// spacer to next account type
$container->addElement(new htmlSpacer(null, '30px'), true);
} }
/** /**

View File

@ -157,9 +157,9 @@ for ($i = 0; $i < sizeof($errorsToDisplay); $i++) call_user_func_array('StatusMe
echo ("<form action=\"conftypes.php\" method=\"post\">\n"); echo ("<form action=\"conftypes.php\" method=\"post\">\n");
echo '<div style="text-align: right;">'; echo '<div style="text-align: right;">';
echo "<button id=\"saveButton\" name=\"saveSettings\" type=\"submit\">" . _('Save') . "</button>"; echo "<button id=\"saveButton\" name=\"saveSettings\">" . _('Save') . "</button>";
echo "&nbsp;"; echo "&nbsp;";
echo "<button id=\"cancelButton\" name=\"cancelSettings\" type=\"submit\">" . _('Cancel') . "</button>"; echo "<button id=\"cancelButton\" name=\"cancelSettings\">" . _('Cancel') . "</button>";
echo "<br><br>\n"; echo "<br><br>\n";
echo '</div>'; echo '</div>';
@ -199,6 +199,7 @@ echo '</ul>';
jQuery(document).ready(function() { jQuery(document).ready(function() {
jQuery('#edittypes').addClass('ui-tabs-selected'); jQuery('#edittypes').addClass('ui-tabs-selected');
jQuery('#edittypes').addClass('ui-state-active'); jQuery('#edittypes').addClass('ui-state-active');
jQuery('#edittypes').addClass('userlist-bright');
jQuery('#saveButton').button({ jQuery('#saveButton').button({
icons: { icons: {
primary: 'saveButton' primary: 'saveButton'
@ -212,49 +213,49 @@ jQuery(document).ready(function() {
}); });
</script> </script>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom"> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom userlist-bright">
<?php <?php
$container = new htmlTable();
// show available types // show available types
if (sizeof($availableTypes) > 0) { if (sizeof($availableTypes) > 0) {
echo "<fieldset><legend><b>" . _("Available account types") . "</b></legend>\n"; $container->addElement(new htmlSubTitle(_("Available account types")), true);
echo "<table>\n"; $availableContainer = new htmlTable();
foreach ($availableTypes as $key => $value) { foreach ($availableTypes as $key => $value) {
$icon = '<img alt="' . $value . '" src="../../graphics/' . $key . '.png">&nbsp;'; $availableContainer->addElement(new htmlImage('../../graphics/' . $key . '.png'));
echo "<tr>\n"; $availableContainer->addElement(new htmlOutputText($value));
echo "<td>$icon<b>" . $value . ": </b></td>\n"; $availableContainer->addElement(new htmlSpacer('10px', null));
echo "<td>" . getTypeDescription($key) . "</td>\n"; $availableContainer->addElement(new htmlOutputText(getTypeDescription($key)));
echo "<td><input type=\"submit\" name=\"add_" . $key ."\" title=\"" . _("Add") . "\" value=\" \"" . $button = new htmlButton('add_' . $key, 'add.png', true);
" style=\"background-image: url(../../graphics/add.png);background-position: 2px center;background-repeat: no-repeat;width:24px;height:24px;background-color:transparent\"></td>\n"; $button->setTitle(_("Add"));
echo "</tr>\n"; $availableContainer->addElement($button, true);
} }
echo "</table>\n"; $availableContainer->addElement(new htmlSpacer(null, '20px'), true);
echo "</fieldset>\n"; $container->addElement($availableContainer, true);
echo "<p><br><br></p>";
} }
// show active types // show active types
if (sizeof($activeTypes) > 0) { if (sizeof($activeTypes) > 0) {
echo "<fieldset><legend><b>" . _("Active account types") . "</b></legend><br>\n"; $container->addElement(new htmlSubTitle(_("Active account types")), true);
$activeContainer = new htmlTable();
for ($i = 0; $i < sizeof($activeTypes); $i++) { for ($i = 0; $i < sizeof($activeTypes); $i++) {
echo "<fieldset class=\"" . $activeTypes[$i] . "edit\">\n"; // title
$icon = '<img alt="' . $activeTypes[$i] . '" src="../../graphics/' . $activeTypes[$i] . '.png">&nbsp;'; $activeContainer->addElement(new htmlImage('../../graphics/' . $activeTypes[$i] . '.png'));
echo "<legend>" . $icon . "<b>" . getTypeAlias($activeTypes[$i]) . ": </b>" . getTypeDescription($activeTypes[$i]) . " " . $titleText = new htmlOutputText(getTypeAlias($activeTypes[$i]));
"<input type=\"submit\" name=\"rem_" . $activeTypes[$i] . "\" value=\" \" title=\"" . _("Remove this account type") . "\" " . $titleText->setIsBold(true);
"style=\"background-image: url(../../graphics/del.png);background-position: 2px center;background-repeat: no-repeat;width:24px;height:24px;background-color:transparent\">" . $activeContainer->addElement($titleText);
"</legend>"; $activeContainer->addElement(new htmlSpacer('10px', null));
echo "<br>\n"; $activeContainer->addElement(new htmlOutputText(getTypeDescription($activeTypes[$i])), true);
echo "<table>\n";
// LDAP suffix // LDAP suffix
echo "<tr>\n"; $suffixText = new htmlOutputText(_("LDAP suffix"));
echo "<td>" . _("LDAP suffix") . "</td>\n"; $suffixText->colspan = 2;
echo "<td><input type=\"text\" size=\"40\" name=\"suffix_" . $activeTypes[$i] . "\" value=\"" . $typeSettings['suffix_' . $activeTypes[$i]] . "\"></td>\n"; $activeContainer->addElement($suffixText);
echo "<td>"; $activeContainer->addElement(new htmlSpacer('10px', null));
printHelpLink(getHelp('', '202'), '202'); $suffixInput = new htmlInputField('suffix_' . $activeTypes[$i], $typeSettings['suffix_' . $activeTypes[$i]]);
echo "</td>\n"; $suffixInput->setFieldSize(40);
echo "</tr>\n"; $activeContainer->addElement($suffixInput);
$activeContainer->addElement(new htmlHelpLink('202'), true);
// list attributes // list attributes
if (isset($typeSettings['attr_' . $activeTypes[$i]])) { if (isset($typeSettings['attr_' . $activeTypes[$i]])) {
$attributes = $typeSettings['attr_' . $activeTypes[$i]]; $attributes = $typeSettings['attr_' . $activeTypes[$i]];
@ -262,19 +263,28 @@ if (sizeof($activeTypes) > 0) {
else { else {
$attributes = getDefaultListAttributes($activeTypes[$i]); $attributes = getDefaultListAttributes($activeTypes[$i]);
} }
echo "<tr>\n"; $attrsText = new htmlOutputText(_("List attributes"));
echo "<td>" . _("List attributes") . "</td>\n"; $attrsText->colspan = 2;
echo "<td><input type=\"text\" size=\"40\" name=\"attr_" . $activeTypes[$i] . "\" value=\"" . $attributes . "\"></td>\n"; $activeContainer->addElement($attrsText);
echo "<td>"; $activeContainer->addElement(new htmlSpacer('10px', null));
printHelpLink(getHelp('', '206'), '206'); $attrsInput = new htmlInputField('attr_' . $activeTypes[$i], $attributes);
echo "</td>\n"; $attrsInput->setFieldSize(40);
echo "</tr>\n"; $activeContainer->addElement($attrsInput);
echo "</table>\n"; $activeContainer->addElement(new htmlHelpLink('206'), true);
echo "</fieldset><br>\n"; // delete button
$delButton = new htmlButton('rem_'. $activeTypes[$i], _("Remove this account type"));
$delButton->colspan = 5;
$delButton->setIconClass('deleteButton');
$activeContainer->addElement($delButton, true); //del.png
$activeContainer->addElement(new htmlSpacer(null, '40px'), true);
} }
echo "</fieldset>\n"; $container->addElement($activeContainer, true);
} }
$tabindex = 1;
parseHtml(null, $container, array(), false, $tabindex, 'user');
echo "<input type=\"hidden\" name=\"postAvailable\" value=\"yes\">\n"; echo "<input type=\"hidden\" name=\"postAvailable\" value=\"yes\">\n";
echo ("</div></div></form>\n"); echo ("</div></div></form>\n");

View File

@ -180,6 +180,7 @@ echo '</ul>';
jQuery(document).ready(function() { jQuery(document).ready(function() {
jQuery('#moduleSettings').addClass('ui-tabs-selected'); jQuery('#moduleSettings').addClass('ui-tabs-selected');
jQuery('#moduleSettings').addClass('ui-state-active'); jQuery('#moduleSettings').addClass('ui-state-active');
jQuery('#moduleSettings').addClass('userlist-bright');
jQuery('#saveButton').button({ jQuery('#saveButton').button({
icons: { icons: {
primary: 'saveButton' primary: 'saveButton'
@ -193,7 +194,7 @@ jQuery(document).ready(function() {
}); });
</script> </script>
<div class="ui-tabs-panel ui-widget-content ui-corner-bottom"> <div class="ui-tabs-panel ui-widget-content ui-corner-bottom userlist-bright">
<?php <?php