FIX Display rules for page breaks/editable form steps now works again

This was previously broken in a regression from https://github.com/silverstripe/silverstripe-userforms/pull/575
where the fields themselves could still be toggled, but the jQuery event dispatches for the form steps
were removed. This pull request re-introduces those jQuery event triggers when hiding and showing
editable form fields via display rules.
This commit is contained in:
Robbie Averill 2019-03-26 14:11:04 +13:00
parent 53eb9d1802
commit 0a3ebcb224
4 changed files with 45 additions and 5 deletions

View File

@ -241,11 +241,33 @@ class EditableCustomRule extends DataObject
* Returns the opposite visibility function for the value of the initial visibility field, e.g. show/hide. This * Returns the opposite visibility function for the value of the initial visibility field, e.g. show/hide. This
* will toggle the "hide" class either way, which is handled by CSS. * will toggle the "hide" class either way, which is handled by CSS.
* *
* @param string $text * @param string $initialState
* @param boolean $invert
* @return string * @return string
*/ */
public function toggleDisplayText($text) public function toggleDisplayText($initialState, $invert = false)
{ {
return (strtolower($text) === 'hide') ? 'removeClass("hide")' : 'addClass("hide")'; $action = strtolower($initialState) === 'hide' ? 'removeClass' : 'addClass';
if ($invert) {
$action = $action === 'removeClass' ? 'addClass' : 'removeClass';
}
return sprintf('%s("hide")', $action);
}
/**
* Returns an event name to be dispatched when the field is changed. Matches up with the visibility classes
* added or removed in `toggleDisplayText()`.
*
* @param string $initialState
* @param bool $invert
* @return string
*/
public function toggleDisplayEvent($initialState, $invert = false)
{
$action = strtolower($initialState) === 'hide' ? 'show' : 'hide';
if ($invert) {
$action = $action === 'hide' ? 'show' : 'hide';
}
return sprintf('userform.field.%s', $action);
} }
} }

View File

@ -767,6 +767,7 @@ JS
$conjunction = $rule['conjunction']; $conjunction = $rule['conjunction'];
$operations = implode(" {$conjunction} ", $rule['operations']); $operations = implode(" {$conjunction} ", $rule['operations']);
$target = $rule['targetFieldID']; $target = $rule['targetFieldID'];
$holder = $rule['holder'];
$result .= <<<EOS $result .= <<<EOS
\n \n
@ -775,8 +776,10 @@ JS
function (){ function (){
if ({$operations}) { if ({$operations}) {
$('{$target}').{$rule['view']}; $('{$target}').{$rule['view']};
{$holder}.{$rule['view']}.trigger('{$rule['holder_event']}');
} else { } else {
$('{$target}').{$rule['opposite']}; $('{$target}').{$rule['opposite']};
{$holder}.{$rule['opposite']}.trigger('{$rule['holder_event_opposite']}');
} }
}); });
$("{$target}").find('.hide').removeClass('hide'); $("{$target}").find('.hide').removeClass('hide');

View File

@ -1093,9 +1093,11 @@ class EditableFormField extends DataObject
$result['operations'][] = $expression['operation']; $result['operations'][] = $expression['operation'];
// View/Show should read // View/Show should read
$opposite = ($result['initialState'] === 'hide') ? 'show' : 'hide';
$result['view'] = $rule->toggleDisplayText($result['initialState']); $result['view'] = $rule->toggleDisplayText($result['initialState']);
$result['opposite'] = $rule->toggleDisplayText($opposite); $result['opposite'] = $rule->toggleDisplayText($result['initialState'], true);
$result['holder'] = $this->getSelectorHolder();
$result['holder_event'] = $rule->toggleDisplayEvent($result['initialState']);
$result['holder_event_opposite'] = $rule->toggleDisplayEvent($result['initialState'], true);
} }
return (count($result['selectors'])) ? $result : null; return (count($result['selectors'])) ? $result : null;

View File

@ -35,8 +35,21 @@ class EditableCustomRuleTest extends SapphireTest
*/ */
public function testToggleDisplayText() public function testToggleDisplayText()
{ {
/** @var EditableCustomRule $rule1 */
$rule1 = $this->objFromFixture('EditableCustomRule', 'rule1'); $rule1 = $this->objFromFixture('EditableCustomRule', 'rule1');
$this->assertSame('addClass("hide")', $rule1->toggleDisplayText('show')); $this->assertSame('addClass("hide")', $rule1->toggleDisplayText('show'));
$this->assertSame('removeClass("hide")', $rule1->toggleDisplayText('hide')); $this->assertSame('removeClass("hide")', $rule1->toggleDisplayText('hide'));
$this->assertSame('removeClass("hide")', $rule1->toggleDisplayText('show', true));
$this->assertSame('addClass("hide")', $rule1->toggleDisplayText('hide', true));
}
public function testToggleDisplayEvent()
{
/** @var EditableCustomRule $rule1 */
$rule1 = $this->objFromFixture('EditableCustomRule', 'rule1');
$this->assertSame('userform.field.hide', $rule1->toggleDisplayEvent('show'));
$this->assertSame('userform.field.show', $rule1->toggleDisplayEvent('hide'));
$this->assertSame('userform.field.show', $rule1->toggleDisplayEvent('show', true));
$this->assertSame('userform.field.hide', $rule1->toggleDisplayEvent('hide', true));
} }
} }