Commit ca0dcfeb authored by Carsten  Rose's avatar Carsten Rose
Browse files

Alert: implemented 'modal' and 'timeout'.

Link.php: added parameter to JS alert code
parent 9018f45a
......@@ -1308,7 +1308,7 @@ Column: link
+---+---+----------+-----------------------------------+---------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
| | |Target |g:<text> |g:_blank |target=_blank,_self,_parent,<custom>. Default: no target |
+---+---+----------+-----------------------------------+---------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
| | |Question |q:<text> |q:please confirm |Link will be executed only if user clicks ok, default: 'Please confirm' |
| | |Question |q:<text> |q:please confirm |See: `question`_. Link will be executed only if user clicks ok/cancel, default: 'Please confirm' |
+---+---+----------+-----------------------------------+---------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
| | |Encryption|e:0|1|... |e:1 |Encryption of the e-mail: 0: no encryption, 1:via Javascript (default) |
+---+---+----------+-----------------------------------+---------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
......@@ -1359,7 +1359,7 @@ Link Examples
+-----------------------------------------------------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
|SELECT "u:http://www.example.com" AS _link |*http://www.example* as link, class=external |
+-----------------------------------------------------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
|SELECT "u:www.example.com|q:Please confirm" AS _link |www.example as link, class=external, ?JavaScript Window which has to be confirmed with click on 'ok' |
|SELECT "u:www.example.com|q:Please confirm" AS _link |www.example as link, class=external, See: `question`_ |
+-----------------------------------------------------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
|SELECT "u:www.example.com|c:i" AS _link |*http://www.example* as link, class=internal |
+-----------------------------------------------------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
......@@ -1378,6 +1378,54 @@ Link Examples
|SELECT "p:form_person|C:green" AS _link |<a class="internal" href="?form_person"><img alttext="Check" src="typo3conf/ext/qfq/Resources/Public/icons/checked-green.gif"></a> |
+-----------------------------------------------------------------------+----------------------------------------------------------------------------------------------------------------------------------------+
.. _question:
Question
^^^^^^^^
**Syntax**
::
q[:<alert text>[:<level>[:<positive button text>[:<negative button text>[:<timeout>[:<flag modal>]]]]]]
* If a user clicks on a link, an alert is shown. If the user answers the alert by clicking on the 'positive button', the browser opens the specified link.
If the user click on the negative answer (or waits for timout), the alert is closed and the browser does nothing.
* All parameter are optional.
* Parameter are seperated by ':'
* To use ':' inside the text, the colon has to be escaped by '\'. E.g. 'ok\: I understand'.
+----------------------+--------------------------------------------------------------------------------------------------------------------------+
| **Parameter** | **Description** |
+=================================================================================================================================================+
| Text | The text shown by the alert. HTML is allowed to format the text. Any ':' needs to be escaped. Default: 'Please confirm'. |
+----------------------+--------------------------------------------------------------------------------------------------------------------------+
| Level | success, info, warning, danger |
+----------------------+--------------------------------------------------------------------------------------------------------------------------+
| Positive button text | Default: 'Ok' |
+----------------------+--------------------------------------------------------------------------------------------------------------------------+
| Negative button text | Default: 'Cancel' |
+----------------------+--------------------------------------------------------------------------------------------------------------------------+
| Timeout in seconds | 0: no timeout, >0: after the specified time in seconds, the alert will dissapear and behaves like 'negative answer' |
+----------------------+--------------------------------------------------------------------------------------------------------------------------+
| Flag modal | 0: Alert behaves not modal. 1: (default) Alert behaves modal. |
+----------------------+--------------------------------------------------------------------------------------------------------------------------+
Examples:
+------------------------------------------------------------+---------------------------------------------------------------------------+
| **SQL-Query** | **Result** |
+============================================================+===========================================================================+
| SELECT "p:form_person|q:Edit Person:warn" AS _link | Shows alert with level 'warn' |
+------------------------------------------------------------+---------------------------------------------------------------------------+
| SELECT "p:form_person|q:Edit Person::I do:No way" AS _link | Instead of 'Ok' and 'Cancel', the button text will be 'I do' and 'No way' |
+------------------------------------------------------------+---------------------------------------------------------------------------+
| SELECT "p:form_person|q:Edit Person:::10" AS _link | The Alert will be shown 10 seconds |
+------------------------------------------------------------+---------------------------------------------------------------------------+
| SELECT "p:form_person|q:Edit Person:::10:0" AS _link | The Alert will be shown 10 seconds and is not modal. |
+------------------------------------------------------------+---------------------------------------------------------------------------+
Columns: _page[X]
^^^^^^^^^^^^^^^^^
......@@ -1431,8 +1479,8 @@ The colum name is composed of the string *page* and a trailing character to spec
+-------------+-------------------------------------------------------------------------------------------------+----------------------------------------------------------+---------------------------------------------------------------+
|<tooltip> |Text to appear as a ToolTip |empty string | |
+-------------+-------------------------------------------------------------------------------------------------+----------------------------------------------------------+---------------------------------------------------------------+
|<msgbox> |If there is a msgbox text given, a msgbox will be opened. Only if the user clicks on ok, the link|**Expected "=" to follow "see"** | |
| |will be called | | |
|<question> |If there is a question text given, an alert will be opened. Only if the user clicks on 'ok', |**Expected "=" to follow "see"** | |
| |the link will be called | | |
+-------------+-------------------------------------------------------------------------------------------------+----------------------------------------------------------+---------------------------------------------------------------+
|<class> |CSS Class for the <a> tag |The default class defined for internal links in | |
| | |ext_localconf.php (see ...) | |
......
......@@ -139,6 +139,8 @@ const QUESTION_INDEX_TEXT = 0;
const QUESTION_INDEX_LEVEL = 1;
const QUESTION_INDEX_BUTTON_OK = 2;
const QUESTION_INDEX_BUTTON_FALSE = 3;
const QUESTION_INDEX_TIMEOUT = 4;
const QUESTION_INDEX_FLAG_MODAL = 5;
/**
* Class Link
......@@ -763,7 +765,7 @@ class Link {
}
$arr = OnArray::explodeWithoutEscaped(':', $vars[NAME_QUESTION]);
$arr = array_merge($arr, ['', '', '', '']);
$arr = array_merge($arr, ['', '', '', '', '', '']);
$id = ($this->phpUnit === true) ? '12345' : uniqid('a_');
$content = Support::doAttribute('id', $id);
......@@ -772,14 +774,15 @@ class Link {
$level = ($arr[QUESTION_INDEX_LEVEL] === '') ? DEFAULT_QUESTION_LEVEL : $arr[QUESTION_INDEX_LEVEL];
$ok = ($arr[QUESTION_INDEX_BUTTON_OK] === '') ? 'Ok' : $arr[QUESTION_INDEX_BUTTON_OK];
$cancel = ($arr[QUESTION_INDEX_BUTTON_FALSE] === '') ? 'Cancel' : $arr[QUESTION_INDEX_BUTTON_FALSE];
$timeout = ($arr[QUESTION_INDEX_TIMEOUT] === '') ? '0' : $arr[QUESTION_INDEX_TIMEOUT] * 1000;
$flagModalStatus = ($arr[QUESTION_INDEX_FLAG_MODAL] === '') ? '1' : $arr[QUESTION_INDEX_FLAG_MODAL];
$flagModal = ($flagModalStatus === "1") ? 'true' : 'false';
$js = <<<EOF
var alert = new QfqNS.Alert('$text', '$level', [
var alert = new QfqNS.Alert({ message: '$text', type: '$level', modal: $flagModal, timeout: $timeout, buttons: [
{ label: '$ok', eventName: 'ok' },
{ label: '$cancel',eventName: 'cancel'}
]);
] } );
alert.on('alert.ok', function() {
window.location = $('#$id').attr('href');
});
......
......@@ -923,11 +923,10 @@ class LinkTest extends \PHPUnit_Framework_TestCase {
$link = new Link(null, $this->sip, true);
$js = <<<EOF
id="12345" onClick="var alert = new QfqNS.Alert('Please confirm', 'info', [
id="12345" onClick="var alert = new QfqNS.Alert({ message: 'Please confirm', type: 'info', modal: true, timeout: 0, buttons: [
{ label: 'Ok', eventName: 'ok' },
{ label: 'Cancel',eventName: 'cancel'}
]);
] } );
alert.on('alert.ok', function() {
window.location = $('#12345').attr('href');
});
......@@ -936,32 +935,56 @@ alert.show();
return false;"
EOF;
// Question
// Question: all default
$result = $link->renderLink('p:person|c:n|q');
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Question
// Question: all default
$result = $link->renderLink('p:person|c:n|q:');
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Question: individual text
$js = str_replace('Please confirm', 'do you really want', $js);
$result = $link->renderLink('p:person|c:n|q:do you really want');
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
$js = str_replace('info', 'warn', $js);
$result = $link->renderLink('p:person|c:n|q:do you really want:warn');
// Question: individual text, level: warning
$js = str_replace('info', 'warning', $js);
$result = $link->renderLink('p:person|c:n|q:do you really want:warning');
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Question: individual text, level: warning, positive button: I do
$js = str_replace('Ok', 'I do', $js);
$result = $link->renderLink('p:person|c:n|q:do you really want:warn:I do');
$result = $link->renderLink('p:person|c:n|q:do you really want:warning:I do');
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Question: individual text, level: warning, positive button: I do, negative button: Shut up
$js = str_replace('Cancel', 'Shut up', $js);
$result = $link->renderLink('p:person|c:n|q:do you really want:warn:I do:Shut up');
$result = $link->renderLink('p:person|c:n|q:do you really want:warning:I do:Shut up');
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Question: individual text (with escaped colon)), level: warning, positive button: I do, negative button: Shut up
$js = str_replace('do you really want', 'My Question:some nice value', $js);
$result = $link->renderLink("p:person|c:n|q:My Question\\:some nice value:warn:I do:Shut up");
$result = $link->renderLink("p:person|c:n|q:My Question\\:some nice value:warning:I do:Shut up");
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Question: individual text (with escaped colon)), level: warning, positive button: I do (with escaped colon), negative button: Shut up
$js = str_replace('I do', 'I do: hurry up', $js);
$result = $link->renderLink("p:person|c:n|q:My Question\\:some nice value:warning:I do\\: hurry up:Shut up");
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Timeout:
$js = str_replace('timeout: 0', 'timeout: 10000', $js);
$result = $link->renderLink("p:person|c:n|q:My Question\\:some nice value:warning:I do\\: hurry up:Shut up:10");
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Modal: 1
$result = $link->renderLink("p:person|c:n|q:My Question\\:some nice value:warning:I do\\: hurry up:Shut up:10:1");
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
// Modal: 0
$js = str_replace('modal: true', 'modal: false', $js);
$result = $link->renderLink("p:person|c:n|q:My Question\\:some nice value:warning:I do\\: hurry up:Shut up:10:0");
$this->assertEquals('<a href="?id=person" ' . $js . ' >?id=person</a>', $result);
}
......
......@@ -406,11 +406,10 @@ class ReportTest extends AbstractDatabaseTest {
*/
public function testReportPageTokenQuestion() {
$js = <<<EOF
id="12345" onClick="var alert = new QfqNS.Alert('Please confirm', 'info', [
id="12345" onClick="var alert = new QfqNS.Alert({ message: 'Please confirm', type: 'info', modal: true, timeout: 0, buttons: [
{ label: 'Ok', eventName: 'ok' },
{ label: 'Cancel',eventName: 'cancel'}
]);
] } );
alert.on('alert.ok', function() {
window.location = $('#12345').attr('href');
});
......@@ -479,11 +478,10 @@ EOF;
public function testReportPageFix() {
$js = <<<EOF
id="12345" onClick="var alert = new QfqNS.Alert('Please confirm', 'info', [
id="12345" onClick="var alert = new QfqNS.Alert({ message: 'Please confirm', type: 'info', modal: true, timeout: 0, buttons: [
{ label: 'Ok', eventName: 'ok' },
{ label: 'Cancel',eventName: 'cancel'}
]);
] } );
alert.on('alert.ok', function() {
window.location = $('#12345').attr('href');
});
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment