Allow several different modal dialog box on the same page

This commit is contained in:
jerome 2014-04-13 14:34:40 +02:00
parent d3a318b7dc
commit 3c5703c1ac
10 changed files with 73 additions and 45 deletions

View File

@ -80,10 +80,10 @@ abstract class AbstractController implements ControllerInterface {
protected $sidebar;
/**
* Modal to add
* @var \psm\Util\Module\ModalInterface $modal
* array of Modal to add
* @var \psm\Util\Module\ModalInterface[] $modal
*/
protected $modal;
protected $modal = array();
/**
* Database object
@ -183,8 +183,13 @@ abstract class AbstractController implements ControllerInterface {
$tpl_data['html_menu'] = $this->createHTMLMenu();
}
// add modal dialog to page ?
if($this->modal != null) {
$tpl_data['html_modal'] = $this->modal->createHTML();
if(sizeof($this->modal)) {
$html_modal = '';
foreach ($this->modal as $modal)
{
$html_modal .= $modal->createHTML();
}
$tpl_data['html_modal'] = $html_modal;
}
// add sidebar to page?
if($this->sidebar !== null) {
@ -459,8 +464,8 @@ abstract class AbstractController implements ControllerInterface {
* @param \psm\Util\Module\ModalInterface $modal
* @return \psm\Module\ControllerInterface
*/
public function setModal(\psm\Util\Module\ModalInterface $modal) {
$this->modal = $modal;
public function addModal(\psm\Util\Module\ModalInterface $modal) {
$this->modal[$modal->getModalID()] = $modal;
return $this;
}
}

View File

@ -65,8 +65,8 @@ class ServerController extends AbstractServerController {
// check if user is admin, in that case we add the buttons
if($this->user->getUserLevel() == PSM_USER_ADMIN) {
$modal = new \psm\Util\Module\Modal($this->tpl, \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
$this->setModal($modal);
$modal = new \psm\Util\Module\Modal($this->tpl, 'delete', \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
$this->addModal($modal);
$modal->setTitle(psm_get_lang('servers', 'delete_title'));
$modal->setMessage(psm_get_lang('servers', 'delete_message'));
$modal->setOKButtonLabel(psm_get_lang('system', 'delete'));
@ -270,8 +270,8 @@ class ServerController extends AbstractServerController {
$tpl_data['url_delete'] = psm_build_url(array('mod' => 'server', 'action' => 'delete', 'id' => $this->server_id));
$tpl_data['server_name'] = $server['label'];
$modal = new \psm\Util\Module\Modal($this->tpl, \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
$this->setModal($modal);
$modal = new \psm\Util\Module\Modal($this->tpl, 'delete', \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
$this->addModal($modal);
$modal->setTitle(psm_get_lang('servers', 'delete_title'));
$modal->setMessage(psm_get_lang('servers', 'delete_message'));
$modal->setOKButtonLabel(psm_get_lang('system', 'delete'));

View File

@ -79,8 +79,8 @@ class UserController extends AbstractController {
'plus icon-white', 'success'
);
$modal = new \psm\Util\Module\Modal($this->tpl, \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
$this->setModal($modal);
$modal = new \psm\Util\Module\Modal($this->tpl, 'delete', \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
$this->addModal($modal);
$modal->setTitle(psm_get_lang('users', 'delete_title'));
$modal->setMessage(psm_get_lang('users', 'delete_message'));
$modal->setOKButtonLabel(psm_get_lang('system', 'delete'));

View File

@ -41,6 +41,12 @@ class Modal implements ModalInterface {
*/
protected $tpl;
/**
* prefix used for modal dialog box elements
* @var string $modal_id
*/
protected $modal_id;
/**
* @var int $type Type of modal dialog
*/
@ -64,11 +70,20 @@ class Modal implements ModalInterface {
*/
protected $ok_label;
public function __construct(Template $tpl, $type = self::MODAL_TYPE_OK ) {
public function __construct(Template $tpl, $modal_id = 'main', $type = self::MODAL_TYPE_OK ) {
$this->modal_id = $modal_id;
$this->tpl = $tpl;
$this->type = $type;
}
/**
* get the modal dialog box element prefix
* @return string
*/
public function getModalID() {
return $this->modal_id;
}
/**
* Set the modal dialog type
* @param int $type
@ -115,7 +130,7 @@ class Modal implements ModalInterface {
{
case self::MODAL_TYPE_OK:
$buttons[] = array(
'modal_button_id' => 'mainModalOKButton',
'modal_button_class' => 'modalOKButton',
'modal_button_type' => 'primary',
'modal_button_dismiss' => '',
'modal_button_label' => empty($this->ok_label) ? psm_get_lang('system', 'ok') : $this->ok_label,
@ -124,30 +139,30 @@ class Modal implements ModalInterface {
case self::MODAL_TYPE_OKCANCEL:
$buttons[] = array(
'modal_button_id' => 'mainModalCancelButton',
'modal_button_class' => 'modalCancelButton',
'modal_button_type' => 'default',
'modal_button_dismiss' => 'modal',
'modal_button_attr' => 'data-dismiss="modal"',
'modal_button_label' => psm_get_lang('system', 'cancel'),
);
$buttons[] = array(
'modal_button_id' => 'mainModalOKButton',
'modal_button_class' => 'modalOKButton',
'modal_button_type' => 'primary',
'modal_button_dismiss' => '',
'modal_button_attr' => '',
'modal_button_label' => empty($this->ok_label) ? psm_get_lang('system', 'ok') : $this->ok_label,
);
break;
case self::MODAL_TYPE_DANGER:
$buttons[] = array(
'modal_button_id' => 'mainModalCancelButton',
'modal_button_class' => 'modalCancelButton',
'modal_button_type' => 'default',
'modal_button_dismiss' => 'modal',
'modal_button_attr' => 'data-dismiss="modal"',
'modal_button_label' => psm_get_lang('system', 'cancel'),
);
$buttons[] = array(
'modal_button_id' => 'mainModalOKButton',
'modal_button_class' => 'modalOKButton',
'modal_button_type' => 'danger',
'modal_button_dismiss' => '',
'modal_button_attr' => '',
'modal_button_label' => empty($this->ok_label) ? psm_get_lang('system', 'ok') : $this->ok_label,
);
break;
@ -161,11 +176,12 @@ class Modal implements ModalInterface {
$matches = array();
if(preg_match_all('/%(\d)/', $message, $matches, PREG_SET_ORDER)) {
foreach($matches as $match) {
$message = str_replace($match[0], '<span class="mainModalP' . $match[1] . '"></span>', $message);
$message = str_replace($match[0], '<span class="modalP' . $match[1] . '"></span>', $message);
}
}
$this->tpl->addTemplateData($tpl_id, array(
'modal_id' => $this->modal_id,
'modal_title' => !empty($this->title) ? $this->title : psm_get_lang('system', 'title'),
'modal_body' => $message,
));

View File

@ -32,6 +32,6 @@ interface ModalInterface {
public function __construct(\psm\Service\Template $tpl);
public function getModalID();
public function createHTML();
}

View File

@ -1,14 +1,14 @@
<!--%tpl_main_modal_container-->
<div id="mainModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="mainModalLabel" aria-hidden="true">
<div id="{modal_id}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{modal_id}ModalLabel" aria-hidden="true">
<div class="modal-header">
<h3 id="mainModalLabel">{modal_title}</h3>
<h3 id="{modal_id}ModalLabel">{modal_title}</h3>
</div>
<div class="modal-body">
<p>{modal_body}</p>
</div>
<div class="modal-footer">
<!--%tpl_repeat_buttons-->
<a href="#" id="{modal_button_id}" class="btn btn-{modal_button_type}" data-dismiss="{modal_button_dismiss}">{modal_button_label}</a>
<a href="#" class="btn btn-{modal_button_type} {modal_button_class}" {modal_button_attr}>{modal_button_label}</a>
<!--%%tpl_repeat_buttons-->
{buttons}
</div>

View File

@ -42,10 +42,10 @@
<!--%%tpl_server_list-->
<!--%tpl_server_list_admin_actions-->
<a class="btn btn-small" href="index.php?mod=server&amp;action=edit&amp;id={server_id}" title="{label_edit}">
<a class="btn btn-small show-modal" href="index.php?mod=server&amp;action=edit&amp;id={server_id}" title="{label_edit}">
<i class="icon-pencil"></i>
</a>
<a class="btn btn-small btn-danger show-modal" href="index.php?mod=server&action=delete&id={server_id}" title="{label_delete}" data-modal-param="{label}">
<a class="btn btn-small btn-danger show-modal" href="index.php?mod=server&action=delete&id={server_id}" title="{label_delete}" data-modal-id="delete" data-modal-param="{label}">
<i class="icon-remove icon-white"></i>
</a>
<!--%%tpl_server_list_admin_actions-->

View File

@ -80,7 +80,7 @@
<a class="btn btn-success" href="{url_edit}">
<i class="icon-edit icon-white"></i>&nbsp;{label_edit}
</a>
<a class="btn btn-danger show-modal" href="{url_delete}" data-modal-param="{server_name}">
<a class="btn btn-danger show-modal" href="{url_delete}" data-modal-id="delete" data-modal-param="{server_name}">
<i class="icon-remove icon-white"></i>&nbsp;{label_delete}
</a>
</td>

View File

@ -24,7 +24,7 @@
<a class="btn btn-small" href="index.php?mod=user&amp;action=edit&amp;id={user_id}" title="{label_edit}">
<i class="icon-pencil"></i>
</a>
<a class="btn btn-small btn-danger show-modal" href="index.php?mod=user&action=delete&id={user_id}" title="{label_delete}" data-modal-param="{user_name}">
<a class="btn btn-small btn-danger show-modal" href="index.php?mod=user&action=delete&id={user_id}" title="{label_delete}" data-modal-id="delete" data-modal-param="{user_name}">
<i class="icon-remove icon-white"></i>
</a>
</td>

View File

@ -1,26 +1,33 @@
$().ready(function() {
var $modal = $('#mainModal');
if($modal.length) {
$('.show-modal').click(function (e) {
var $this = $(this);
if ($this.is('a')) {
e.preventDefault();
}
var href = $this.attr('href');
$('#mainModalOKButton').attr('href', href);
$('.show-modal').click(function (e) {
var $this = $(this);
if ($this.is('a')) {
e.preventDefault();
}
var $modal_id = $this.attr('data-modal-id') || 'main';
var $modal = $('#' + $modal_id + 'Modal');
var href = $this.attr('href');
if($modal.length) {
$modal.find('.modalOKButton').attr('href', href);
var param = $this.attr('data-modal-param');
if(param) {
var ary = param.split(',');
for (var index = 0; index < ary.length && index < 9; ++index) {
var value = ary[index];
$('#mainModal span.mainModalP' + (index+1)).text(value);
$($modal).find('span.modalP' + (index+1)).text(value);
}
}
$modal.modal('show');
return false;
});
}
} else {
// Just in case we forgot the dialog box
var conf = confirm("Are you sure?");
if (conf === true) {
window.location = href;
}
}
return false;
});
});
function psm_tooltips() {