responsive show/hide for checkboxes

This commit is contained in:
Roland Gruber 2017-12-17 11:44:28 +01:00
parent 400827889a
commit 9efa8507df
1 changed files with 38 additions and 7 deletions

View File

@ -1926,22 +1926,23 @@ class htmlInputCheckbox extends htmlElement {
// build Java script to show/hide depending fields
$onChange = '';
$script = '';
$selector = $this->getShowHideSelector();
if ((sizeof($this->tableRowsToShow) > 0) || (sizeof($this->tableRowsToHide) > 0)) {
// build onChange listener
$onChange .= 'if (jQuery(\'#' . $this->name . ':checked\').val() !== undefined) {';
for ($i = 0; $i < sizeof($this->tableRowsToShow); $i++) {
$onChange .= 'jQuery(\'#' . $this->tableRowsToShow[$i] . '\').closest(\'tr\').removeClass(\'hidden\');';
$onChange .= 'jQuery(\'#' . $this->tableRowsToShow[$i] . '\').closest(\'' . $selector . '\').removeClass(\'hidden\');';
}
for ($i = 0; $i < sizeof($this->tableRowsToHide); $i++) {
$onChange .= 'jQuery(\'#' . $this->tableRowsToHide[$i] . '\').closest(\'tr\').addClass(\'hidden\');';
$onChange .= 'jQuery(\'#' . $this->tableRowsToHide[$i] . '\').closest(\'' . $selector . '\').addClass(\'hidden\');';
}
$onChange .= '}';
$onChange .= 'else {';
for ($i = 0; $i < sizeof($this->tableRowsToShow); $i++) {
$onChange .= 'jQuery(\'#' . $this->tableRowsToShow[$i] . '\').closest(\'tr\').addClass(\'hidden\');';
$onChange .= 'jQuery(\'#' . $this->tableRowsToShow[$i] . '\').closest(\'' . $selector . '\').addClass(\'hidden\');';
}
for ($i = 0; $i < sizeof($this->tableRowsToHide); $i++) {
$onChange .= 'jQuery(\'#' . $this->tableRowsToHide[$i] . '\').closest(\'tr\').removeClass(\'hidden\');';
$onChange .= 'jQuery(\'#' . $this->tableRowsToHide[$i] . '\').closest(\'' . $selector . '\').removeClass(\'hidden\');';
}
$onChange .= '};';
// build script to set initial state
@ -1951,14 +1952,14 @@ class htmlInputCheckbox extends htmlElement {
if ($this->checked) {
$classType = 'removeClass';
}
$script .= 'jQuery(\'#' . $this->tableRowsToShow[$i] . '\').closest(\'tr\').' . $classType . '(\'hidden\');';
$script .= 'jQuery(\'#' . $this->tableRowsToShow[$i] . '\').closest(\'' . $selector . '\').' . $classType . '(\'hidden\');';
}
for ($i = 0; $i < sizeof($this->tableRowsToHide); $i++) {
$classType = 'removeClass';
if ($this->checked) {
$classType = 'addClass';
}
$script .= 'jQuery(\'#' . $this->tableRowsToHide[$i] . '\').closest(\'tr\').' . $classType . '(\'hidden\');';
$script .= 'jQuery(\'#' . $this->tableRowsToHide[$i] . '\').closest(\'' . $selector . '\').' . $classType . '(\'hidden\');';
}
$script .= '});</script>';
}
@ -2078,6 +2079,13 @@ class htmlInputCheckbox extends htmlElement {
$this->elementsToEnable = $elements;
}
/**
* Returns the CSS selector to use to find show/hide elements.
*/
protected function getShowHideSelector() {
return '.tr';
}
}
/**
@ -3574,6 +3582,8 @@ class htmlResponsiveRow extends htmlElement {
/** @var htmlResponsiveCell[] cells */
private $cells = array();
/** HTML ID */
private $id = null;
/**
* Creates a new responsive row.
@ -3591,6 +3601,15 @@ class htmlResponsiveRow extends htmlElement {
}
}
/**
* Sets the HTML id.
*
* @param string $id ID
*/
public function setId($id) {
$this->id = $id;
}
/**
* Adds a responsive cell to the row.
*
@ -3648,7 +3667,11 @@ class htmlResponsiveRow extends htmlElement {
public function generateHTML($module, $input, $values, $restricted, &$tabindex, $scope) {
$return = array();
$cssClasses = implode(' ', $this->cssClasses);
echo '<div class="row ' . $cssClasses . '">';
$idParam = '';
if ($this->id !== null) {
$idParam = ' id="' . $this->id . '"';
}
echo '<div class="row ' . $cssClasses . '"' . $idParam . '>';
foreach ($this->cells as $cell) {
$return = array_merge($return, $cell->generateHTML($module, $input, $values, $restricted, $tabindex, $scope));
}
@ -4107,6 +4130,14 @@ class htmlResponsiveInputCheckbox extends htmlInputCheckbox {
return $row->generateHTML($module, $input, $values, $restricted, $tabindex, $scope);
}
/**
* {@inheritDoc}
* @see htmlInputCheckbox::getShowHideSelector()
*/
protected function getShowHideSelector() {
return '.row';
}
}
/**