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