Allow several different modal dialog box on the same page

src/psm/Module/AbstractController.class.php

@@ -80,10 +80,10 @@ abstract class AbstractController implements ControllerInterface {
 	protected $sidebar;
 
 	/**
-	 * Modal to add
+	 * array of Modal to add
-	 * @var \psm\Util\Module\ModalInterface $modal
+	 * @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) {
+		if(sizeof($this->modal)) {
-			$tpl_data['html_modal'] = $this->modal->createHTML();
+			$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) {
+	public function addModal(\psm\Util\Module\ModalInterface $modal) {
-		$this->modal = $modal;
+		$this->modal[$modal->getModalID()] = $modal;
 		return $this;
 	}
 }

src/psm/Module/Server/Controller/ServerController.class.php

@@ -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);
+			$modal = new \psm\Util\Module\Modal($this->tpl, 'delete', \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
-			$this->setModal($modal);
+			$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);
+			$modal = new \psm\Util\Module\Modal($this->tpl, 'delete', \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
-			$this->setModal($modal);
+			$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'));

src/psm/Module/User/Controller/UserController.class.php

@@ -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);
+		$modal = new \psm\Util\Module\Modal($this->tpl, 'delete', \psm\Util\Module\Modal::MODAL_TYPE_DANGER);
-		$this->setModal($modal);
+		$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'));

src/psm/Util/Module/Modal.class.php

@@ -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,
 		));

src/psm/Util/Module/ModalInterface.class.php

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

src/templates/main_modal.tpl.html

@@ -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>

src/templates/server/server.tpl.html

@@ -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-->

src/templates/server/view.tpl.html

@@ -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>

src/templates/user/user.tpl.html

@@ -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>

static/js/scripts.js

@@ -1,26 +1,33 @@
 $().ready(function() {
-	var $modal = $('#mainModal');
+	$('.show-modal').click(function (e) {
-	if($modal.length) {
+		var $this = $(this);
-		$('.show-modal').click(function (e) {
+		if ($this.is('a')) {
-			var $this = $(this);
+			e.preventDefault();
-			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');
+		var href = $this.attr('href');
-			$('#mainModalOKButton').attr('href', 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() {