Modal.php 6.17 KB
Newer Older
1 2 3 4 5 6 7
<?php
/**
 * @link http://www.yiiframework.com/
 * @copyright Copyright (c) 2008 Yii Software LLC
 * @license http://www.yiiframework.com/license/
 */

Antonio Ramirez committed
8
namespace yii\bootstrap;
9 10 11

use Yii;
use yii\helpers\ArrayHelper;
12
use yii\helpers\Html;
13 14

/**
15
 * Modal renders a modal window that can be toggled by clicking on a button.
16
 *
17 18 19 20
 * The following example will show the content enclosed between the [[begin()]]
 * and [[end()]] calls within the modal window:
 *
 * ~~~php
Alexander Makarov committed
21
 * Modal::begin([
22
 *     'header' => '<h2>Hello world</h2>',
Alexander Makarov committed
23 24
 *     'toggleButton' => ['label' => 'click me'],
 * ]);
25 26 27 28 29 30
 *
 * echo 'Say hello...';
 *
 * Modal::end();
 * ~~~
 *
MarsuBoss committed
31
 * @see http://getbootstrap.com/javascript/#modals
32
 * @author Antonio Ramirez <amigo.cobos@gmail.com>
33
 * @author Qiang Xue <qiang.xue@gmail.com>
34 35
 * @since 2.0
 */
Antonio Ramirez committed
36
class Modal extends Widget
37
{
Christophe BOULAIN committed
38 39 40
	const SIZE_LARGE = "modal-lg";
	const SIZE_SMALL = "modal-sm";
	const SIZE_DEFAULT = "";
41

42
	/**
43
	 * @var string the header content in the modal window.
44
	 */
45
	public $header;
46
	/**
47
	 * @var string the footer content in the modal window.
48
	 */
49
	public $footer;
50 51 52 53
	/**
	 * @var string the modal size. Can be MODAL_LG or MODAL_SM, or empty for default.
	 */
	public $size;
54
	/**
55 56 57 58 59 60 61 62 63 64
	 * @var array the options for rendering the close button tag.
	 * The close button is displayed in the header of the modal window. Clicking
	 * on the button will hide the modal window. If this is null, no close button will be rendered.
	 *
	 * The following special options are supported:
	 *
	 * - tag: string, the tag name of the button. Defaults to 'button'.
	 * - label: string, the label of the button. Defaults to '&times;'.
	 *
	 * The rest of the options will be rendered as the HTML attributes of the button tag.
MarsuBoss committed
65
	 * Please refer to the [Modal plugin help](http://getbootstrap.com/javascript/#modals)
66
	 * for the supported HTML attributes.
67
	 */
Alexander Makarov committed
68
	public $closeButton = [];
69
	/**
70 71 72 73 74 75 76 77 78 79
	 * @var array the options for rendering the toggle button tag.
	 * The toggle button is used to toggle the visibility of the modal window.
	 * If this property is null, no toggle button will be rendered.
	 *
	 * The following special options are supported:
	 *
	 * - tag: string, the tag name of the button. Defaults to 'button'.
	 * - label: string, the label of the button. Defaults to 'Show'.
	 *
	 * The rest of the options will be rendered as the HTML attributes of the button tag.
MarsuBoss committed
80
	 * Please refer to the [Modal plugin help](http://getbootstrap.com/javascript/#modals)
81
	 * for the supported HTML attributes.
82
	 */
83
	public $toggleButton;
84 85 86


	/**
87
	 * Initializes the widget.
88 89 90 91 92
	 */
	public function init()
	{
		parent::init();

Qiang Xue committed
93
		$this->initOptions();
94

Qiang Xue committed
95
		echo $this->renderToggleButton() . "\n";
96
		echo Html::beginTag('div', $this->options) . "\n";
Christophe BOULAIN committed
97
		echo Html::beginTag('div', ['class' => 'modal-dialog ' . $this->size]) . "\n";
Alexander Makarov committed
98
		echo Html::beginTag('div', ['class' => 'modal-content']) . "\n";
Qiang Xue committed
99 100
		echo $this->renderHeader() . "\n";
		echo $this->renderBodyBegin() . "\n";
101 102 103
	}

	/**
104
	 * Renders the widget.
105 106 107
	 */
	public function run()
	{
Qiang Xue committed
108 109
		echo "\n" . $this->renderBodyEnd();
		echo "\n" . $this->renderFooter();
110 111
		echo "\n" . Html::endTag('div'); // modal-content
		echo "\n" . Html::endTag('div'); // modal-dialog
Qiang Xue committed
112
		echo "\n" . Html::endTag('div');
113

114
		$this->registerPlugin('modal');
115 116 117
	}

	/**
118 119
	 * Renders the header HTML markup of the modal
	 * @return string the rendering result
120
	 */
121
	protected function renderHeader()
122
	{
123 124 125 126 127
		$button = $this->renderCloseButton();
		if ($button !== null) {
			$this->header = $button . "\n" . $this->header;
		}
		if ($this->header !== null) {
Alexander Makarov committed
128
			return Html::tag('div', "\n" . $this->header . "\n", ['class' => 'modal-header']);
129 130 131
		} else {
			return null;
		}
132 133 134
	}

	/**
Qiang Xue committed
135
	 * Renders the opening tag of the modal body.
136
	 * @return string the rendering result
137
	 */
Qiang Xue committed
138
	protected function renderBodyBegin()
139
	{
Alexander Makarov committed
140
		return Html::beginTag('div', ['class' => 'modal-body']);
Qiang Xue committed
141 142 143 144 145 146 147 148
	}

	/**
	 * Renders the closing tag of the modal body.
	 * @return string the rendering result
	 */
	protected function renderBodyEnd()
	{
Qiang Xue committed
149
		return Html::endTag('div');
150 151 152
	}

	/**
153 154
	 * Renders the HTML markup for the footer of the modal
	 * @return string the rendering result
155
	 */
156
	protected function renderFooter()
157
	{
158
		if ($this->footer !== null) {
Alexander Makarov committed
159
			return Html::tag('div', "\n" . $this->footer . "\n", ['class' => 'modal-footer']);
160 161 162
		} else {
			return null;
		}
163 164 165
	}

	/**
166 167
	 * Renders the toggle button.
	 * @return string the rendering result
168
	 */
169
	protected function renderToggleButton()
170
	{
171 172 173 174 175 176
		if ($this->toggleButton !== null) {
			$tag = ArrayHelper::remove($this->toggleButton, 'tag', 'button');
			$label = ArrayHelper::remove($this->toggleButton, 'label', 'Show');
			if ($tag === 'button' && !isset($this->toggleButton['type'])) {
				$this->toggleButton['type'] = 'button';
			}
Qiang Xue committed
177
			return Html::tag($tag, $label, $this->toggleButton);
178 179 180
		} else {
			return null;
		}
181 182 183
	}

	/**
184 185
	 * Renders the close button.
	 * @return string the rendering result
186
	 */
187
	protected function renderCloseButton()
188
	{
189 190 191 192 193 194 195 196 197 198
		if ($this->closeButton !== null) {
			$tag = ArrayHelper::remove($this->closeButton, 'tag', 'button');
			$label = ArrayHelper::remove($this->closeButton, 'label', '&times;');
			if ($tag === 'button' && !isset($this->closeButton['type'])) {
				$this->closeButton['type'] = 'button';
			}
			return Html::tag($tag, $label, $this->closeButton);
		} else {
			return null;
		}
199
	}
Qiang Xue committed
200 201 202 203 204 205 206

	/**
	 * Initializes the widget options.
	 * This method sets the default values for various options.
	 */
	protected function initOptions()
	{
Alexander Makarov committed
207
		$this->options = array_merge([
208 209 210
			'class' => 'fade',
			'role' => 'dialog',
			'tabindex' => -1,
Alexander Makarov committed
211
		], $this->options);
212
		Html::addCssClass($this->options, 'modal');
213 214
		
		if ($this->clientOptions !== false) {
Alexander Makarov committed
215
			$this->clientOptions = array_merge(['show' => false], $this->clientOptions);
216
		}
Qiang Xue committed
217 218

		if ($this->closeButton !== null) {
Alexander Makarov committed
219
			$this->closeButton = array_merge([
Qiang Xue committed
220 221 222
				'data-dismiss' => 'modal',
				'aria-hidden' => 'true',
				'class' => 'close',
Alexander Makarov committed
223
			], $this->closeButton);
Qiang Xue committed
224 225 226
		}

		if ($this->toggleButton !== null) {
Alexander Makarov committed
227
			$this->toggleButton = array_merge([
Qiang Xue committed
228
				'data-toggle' => 'modal',
Alexander Makarov committed
229
			], $this->toggleButton);
Qiang Xue committed
230
			if (!isset($this->toggleButton['data-target']) && !isset($this->toggleButton['href'])) {
231
				$this->toggleButton['data-target'] = '#' . $this->options['id'];
Qiang Xue committed
232 233 234
			}
		}
	}
235
}