Allow several different modal dialog box on the same page
parent
d3a318b7dc
commit
3c5703c1ac
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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'));
|
||||
|
|
|
@ -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,
|
||||
));
|
||||
|
|
|
@ -32,6 +32,6 @@ interface ModalInterface {
|
|||
|
||||
public function __construct(\psm\Service\Template $tpl);
|
||||
|
||||
public function getModalID();
|
||||
public function createHTML();
|
||||
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -42,10 +42,10 @@
|
|||
<!--%%tpl_server_list-->
|
||||
|
||||
<!--%tpl_server_list_admin_actions-->
|
||||
<a class="btn btn-small" href="index.php?mod=server&action=edit&id={server_id}" title="{label_edit}">
|
||||
<a class="btn btn-small show-modal" href="index.php?mod=server&action=edit&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-->
|
||||
|
|
|
@ -80,7 +80,7 @@
|
|||
<a class="btn btn-success" href="{url_edit}">
|
||||
<i class="icon-edit icon-white"></i> {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> {label_delete}
|
||||
</a>
|
||||
</td>
|
||||
|
|
|
@ -24,7 +24,7 @@
|
|||
<a class="btn btn-small" href="index.php?mod=user&action=edit&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>
|
||||
|
|
|
@ -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() {
|
||||
|
|
Loading…
Reference in New Issue