tyler.durden
/
icingaweb2
mirror of https://github.com/Icinga/icingaweb2.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Provide a warning on autosubmit form elements and a title for the apply btn 

resolves #7935
This commit is contained in:
Johannes Meyer 2015-02-27 13:09:13 +01:00
parent 4f0bddd7da
commit 96c132908d
4 changed files with 147 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
library/Icinga/Web/Form.php
View File

@ -13,7 +13,7 @@ use Icinga\Authentication\Manager;
use Icinga\Security\SecurityException;
use Icinga\Util\Translator;
use Icinga\Web\Form\ErrorLabeller;
use Icinga\Web\Form\Decorator\NoScriptApply;
use Icinga\Web\Form\Decorator\Autosubmit;
use Icinga\Web\Form\Element\CsrfCounterMeasure;
/**
@ -592,16 +592,27 @@ class Form extends Zend_Form
)
));
if ($this->protectIds) {
$el->setAttrib('id', $this->getRequest()->protectId($this->getId(false) . '_' . $el->getId()));
}
if ($el->getAttrib('autosubmit')) {
$noScript = new NoScriptApply(); // Non-JS environments
$autosubmitDecorator = new Autosubmit();
$autosubmitDecorator->setAccessible();
$decorators = $el->getDecorators();
$pos = array_search('Zend_Form_Decorator_ViewHelper', array_keys($decorators)) + 1;
$el->setDecorators(
array_slice($decorators, 0, $pos, true)
+ array(get_class($noScript) => $noScript)
+ array(get_class($autosubmitDecorator) => $autosubmitDecorator)
+ array_slice($decorators, $pos, count($decorators) - $pos, true)
);
if (($describedBy = $el->getAttrib('aria-describedby')) !== null) {
$el->setAttrib('aria-describedby', $describedBy . ' ' . $autosubmitDecorator->getWarningId($el));
} else {
$el->setAttrib('aria-describedby', $autosubmitDecorator->getWarningId($el));
}
$class = $el->getAttrib('class');
if (is_array($class)) {
$class[] = 'autosubmit';
@ -610,15 +621,11 @@ class Form extends Zend_Form
} else {
$class .= ' autosubmit';
}
$el->setAttrib('class', $class); // JS environments
$el->setAttrib('class', $class);
unset($el->autosubmit);
}
if ($this->protectIds) {
$el->setAttrib('id', $this->getRequest()->protectId($this->getId(false) . '_' . $el->getId()));
}
return $this->ensureElementAccessibility($el);
}
@ -642,7 +649,17 @@ class Form extends Zend_Form
}
if ($element->getDescription() !== null && ($help = $element->getDecorator('help')) !== false) {
$element->setAttrib('aria-describedby', $help->setAccessible()->getDescriptionId($element));
if (($describedBy = $element->getAttrib('aria-describedby')) !== null) {
// Assume that it's because of the element being of type autosubmit or
// that one who did set the property manually removes the help decorator
// in case it has already an aria-requiredby property set
$element->setAttrib(
'aria-describedby',
$help->setAccessible()->getDescriptionId($element) . ' ' . $describedBy
);
} else {
$element->setAttrib('aria-describedby', $help->setAccessible()->getDescriptionId($element));
}
}
return $element;

108
library/Icinga/Web/Form/Decorator/Autosubmit.php Normal file
View File

@ -0,0 +1,108 @@
<?php
/* Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
namespace Icinga\Web\Form\Decorator;
use Zend_Form_Element;
use Zend_Form_Decorator_Abstract;
use Icinga\Application\Icinga;
use Icinga\Web\View;
/**
* Decorator to add an icon and a submit button encapsulated in noscript-tags
*
* The icon is shown in JS environments to indicate that a specific form control does automatically request an update
* of its form upon it has changed. The button allows users in non-JS environments to trigger the update manually.
*/
class Autosubmit extends Zend_Form_Decorator_Abstract
{
/**
* Whether a hidden <span> should be created with the same warning as in the icon label
*
* @var bool
*/
protected $accessible = false;
/**
* The id used to identify the auto-submit warning associated with the decorated form element
*
* @var string
*/
protected $warningId;
/**
* Set whether a hidden <span> should be created with the same warning as in the icon label
*
* @param bool $state
*
* @return Autosubmit
*/
public function setAccessible($state = true)
{
$this->accessible = (bool) $state;
return $this;
}
/**
* Return the id used to identify the auto-submit warning associated with the decorated element
*
* @param Zend_Form_Element $element The element for which to generate a id
*
* @return string
*/
public function getWarningId(Zend_Form_Element $element = null)
{
if ($this->warningId === null) {
$element = $element ?: $this->getElement();
$this->warningId = 'autosubmit_warning_' . $element->getId();
}
return $this->warningId;
}
/**
* Return the current view
*
* @return View
*/
protected function getView()
{
return Icinga::app()->getViewRenderer()->view;
}
/**
* Add a auto-submit icon and submit button encapsulated in noscript-tags to the element
*
* @param string $content The html rendered so far
*
* @return string The updated html
*/
public function render($content = '')
{
if ($content) {
$warning = t('Upon its value has changed, this control issues an automatic update of this page.');
$content .= $this->getView()->icon('cw', $warning, array(
'aria-hidden' => 'true',
'class' => 'autosubmit-warning'
));
if ($this->accessible) {
$content = '<span id="' . $this->getWarningId() . '" class="sr-only">' . $warning . '</span>' . $content;
}
$content .= sprintf(
'<noscript><button'
. ' name="noscript_apply"'
. ' class="noscript-apply"'
. ' type="submit"'
. ' value="1"'
. ($this->accessible ? ' aria-label="%1$s"' : '')
. ' title="%1$s"'
. '>%2$s</button></noscript>',
t('Push this button to update the form to reflect the change that was made in the control on the left'),
$this->getView()->icon('cw') . t('Apply')
);
}
return $content;
}
}

34
library/Icinga/Web/Form/Decorator/NoScriptApply.php
View File

@ -1,34 +0,0 @@
<?php
/* Icinga Web 2 | (c) 2013-2015 Icinga Development Team | GPLv2+ */
namespace Icinga\Web\Form\Decorator;
use Zend_Form_Decorator_Abstract;
use Icinga\Application\Icinga;
/**
* Decorator to add a submit button encapsulated in noscript-tags
*
* This enables users in non-JS environments to update the contents
* of a form without the use of the main submit button.
*/
class NoScriptApply extends Zend_Form_Decorator_Abstract
{
/**
* Add a submit button encapsulated in noscript-tags to the element
*
* @param string $content The html rendered so far
*
* @return string The updated html
*/
public function render($content = '')
{
if ($content) {
$content .= '<noscript><button name="noscript_apply" style="margin-left: 0.5em;" type="submit" value="1">'
. Icinga::app()->getViewRenderer()->view->icon('refresh.png') . '&nbsp;' . t('Apply')
. '</button></noscript>';
}
return $content;
}
}

14
public/css/icinga/forms.less
View File

@ -195,6 +195,18 @@ select.grant-permissions {
width: auto;
}
label + input, label + select, label + input + input {
label ~ input, label ~ select {
margin-left: 1.6em;
}
label + i ~ input, label + i ~ select {
margin-left: 0;
}
button.noscript-apply {
margin-left: 0.5em;
}
html.no-js i.autosubmit-warning {
.sr-only;
}