Skip to content

Commit 2df54cd

Browse files
author
Christoph Erdmann
committed
added Modal
1 parent 8182a8a commit 2df54cd

File tree

3 files changed

+267
-3
lines changed

3 files changed

+267
-3
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,11 @@ The following widgets are currently available:
6767
* DetailView
6868
* Fixed Action Button
6969
* DatePicker
70+
* Modal
7071

7172
These widgets are planned for development:
7273

7374
* Collection
74-
* Modal
7575
* Toast
7676
* Collapsible
7777

‎src/lib/MaterializeWidgetTrait.php

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,17 +26,21 @@ public function init()
2626
/**
2727
* @param $name
2828
*/
29-
protected function registerPlugin($name)
29+
protected function registerPlugin($name, $selector = null)
3030
{
3131
$view = $this->getView();
3232

3333
MaterializePluginAsset::register($view);
3434

3535
$id = $this->options['id'];
3636

37+
if (is_null($selector)) {
38+
$selector = '#' . $id;
39+
}
40+
3741
if ($this->clientOptions !== false) {
3842
$options = empty($this->clientOptions) ? '' : Json::htmlEncode($this->clientOptions);
39-
$js = "jQuery('#$id').$name($options);";
43+
$js = "jQuery('$selector').$name($options);";
4044
$view->registerJs($js);
4145
}
4246

‎src/widgets/Modal.php

Lines changed: 260 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,260 @@
1+
<?php
2+
3+
namespace macgyer\yii2materializecss\widgets;
4+
5+
use macgyer\yii2materializecss\lib\BaseWidget;
6+
use macgyer\yii2materializecss\lib\Html;
7+
use yii\helpers\ArrayHelper;
8+
9+
/**
10+
* Class Modal
11+
* @package macgyer\yii2materializecss\widgets
12+
*/
13+
class Modal extends BaseWidget
14+
{
15+
/**
16+
* @var array the HTML attributes for the widget container tag
17+
*
18+
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
19+
*/
20+
public $options = [];
21+
22+
/**
23+
* @var string the different modal types
24+
*
25+
* The following options are supported
26+
*
27+
* - lean (default)
28+
* - fixedFooter
29+
* - bottomSheet
30+
*
31+
* @see http://materializecss.com/modals.html
32+
*/
33+
public $modalType = 'lean'; // fixedFooter | bottomSheet
34+
35+
/**
36+
* @var array|false the options for rendering the close button tag.
37+
* The close button is displayed in the header of the modal window. Clicking
38+
* on the button will hide the modal window. If this is false, no close button will be rendered.
39+
*
40+
* The following special options are supported:
41+
*
42+
* - tag: string, the tag name of the button. Defaults to 'button'.
43+
* - label: string, the label of the button. Defaults to '&times;'.
44+
*
45+
* The rest of the options will be rendered as the HTML attributes of the button tag.
46+
* Please refer to the [Modal plugin help](http://materializecss.com/modals.html)
47+
* for the supported HTML attributes.
48+
*/
49+
public $closeButton = [];
50+
51+
/**
52+
* @var string the position of the close button
53+
*
54+
* The following options are supported:
55+
*
56+
* - beforeContent
57+
* - afterContent
58+
* - beforeFooter
59+
* - afterFooter
60+
* - precedeContainer
61+
* - succeedContainer
62+
*
63+
* Defaults to 'beforeContent'.
64+
*/
65+
public $closeButtonPosition = 'beforeContent'; // afterContent | beforeFooter | afterFooter | precedeContainer | succeedContainer
66+
67+
/**
68+
* @var array the options for rendering the toggle button tag.
69+
* The toggle button is used to toggle the visibility of the modal window.
70+
* If this property is false, no toggle button will be rendered.
71+
*
72+
* The following special options are supported:
73+
*
74+
* - tag: string, the tag name of the button. Defaults to 'button'.
75+
* - label: string, the label of the button. Defaults to 'Show'.
76+
*
77+
* The rest of the options will be rendered as the HTML attributes of the button tag.
78+
* Please refer to the [Modal plugin help](http://materializecss.com/modals.html)
79+
* for the supported HTML attributes.
80+
*/
81+
public $toggleButton = [];
82+
83+
/**
84+
* @var string the content of the footer
85+
*/
86+
public $footer;
87+
88+
/**
89+
* @var array the optional HTML attributes for the footer container
90+
*
91+
* @see \yii\helpers\Html::renderTagAttributes() for details on how attributes are being rendered.
92+
*/
93+
public $footerOptions = [];
94+
95+
/**
96+
* Initialize the widget.
97+
*/
98+
public function init()
99+
{
100+
parent::init();
101+
102+
$this->initDefaults();
103+
104+
$options = $this->options;
105+
106+
$html = $this->renderToggleButton();
107+
108+
$tag = ArrayHelper::remove($options, 'tag', 'div');
109+
$html .= Html::beginTag($tag, $options);
110+
111+
if ($this->closeButtonPosition === 'precedeContainer') {
112+
$html .= $this->renderCloseButton();
113+
}
114+
115+
$html .= Html::beginTag('div', ['class' => 'modal-content']);
116+
117+
if ($this->closeButtonPosition === 'beforeContent') {
118+
$html .= $this->renderCloseButton();
119+
}
120+
121+
echo $html;
122+
123+
$this->registerPlugin('leanModal', '.modal-trigger');
124+
}
125+
126+
/**
127+
* Executes the widget.
128+
* @return string the result of widget execution to be outputted.
129+
*/
130+
public function run()
131+
{
132+
$options = $this->options;
133+
$html = '';
134+
135+
if ($this->closeButtonPosition === 'afterContent') {
136+
$html = $this->renderCloseButton();
137+
}
138+
139+
$html .= Html::endTag('div');
140+
141+
$html .= $this->renderFooter();
142+
143+
if ($this->closeButtonPosition === 'succeedContainer') {
144+
$html .= $this->renderCloseButton();
145+
}
146+
147+
$tag = ArrayHelper::remove($options, 'tag', 'div');
148+
$html .= Html::endTag($tag);
149+
150+
echo $html;
151+
}
152+
153+
/**
154+
* @return null|string
155+
*/
156+
protected function renderToggleButton()
157+
{
158+
if (($toggleButton = $this->toggleButton) !== false) {
159+
$tag = ArrayHelper::remove($toggleButton, 'tag', 'button');
160+
$label = ArrayHelper::remove($toggleButton, 'label', 'Show');
161+
162+
if ($tag === 'button' && !isset($toggleButton['type'])) {
163+
$toggleButton['type'] = 'button';
164+
}
165+
166+
if ($tag === 'button' && !isset($toggleButton['data-target'])) {
167+
$toggleButton['data-target'] = $this->options['id'];
168+
}
169+
170+
return Html::tag($tag, $label, $toggleButton);
171+
} else {
172+
return null;
173+
}
174+
}
175+
176+
/**
177+
* @return null|string
178+
*/
179+
protected function renderCloseButton()
180+
{
181+
if (($closeButton = $this->closeButton) !== false) {
182+
$tag = ArrayHelper::remove($closeButton, 'tag', 'button');
183+
$label = ArrayHelper::remove($closeButton, 'label', '&times;');
184+
185+
Html::addCssClass($closeButton, ['close' => 'modal-close']);
186+
187+
if ($tag === 'button' && !isset($closeButton['type'])) {
188+
$closeButton['type'] = 'button';
189+
}
190+
191+
return Html::tag($tag, $label, $closeButton);
192+
} else {
193+
return null;
194+
}
195+
}
196+
197+
/**
198+
* @return string
199+
*/
200+
protected function renderFooter()
201+
{
202+
if (!$this->footer) {
203+
return '';
204+
}
205+
206+
Html::addCssClass($this->footerOptions, ['footer' => 'modal-footer']);
207+
$html = Html::beginTag('div', $this->footerOptions);
208+
209+
if ($this->closeButtonPosition === 'beforeFooter') {
210+
$html .= $this->renderCloseButton();
211+
}
212+
213+
$html .= $this->footer;
214+
215+
if ($this->closeButtonPosition === 'afterFooter') {
216+
$html .= $this->renderCloseButton();
217+
}
218+
219+
$html .= Html::endTag('div');
220+
221+
return $html;
222+
}
223+
224+
/**
225+
* Set inital default options.
226+
*/
227+
protected function initDefaults()
228+
{
229+
switch ($this->modalType) {
230+
case 'fixedFooter':
231+
Html::addCssClass($this->options, ['modalType' => 'modal-fixed-footer']);
232+
break;
233+
234+
case 'bottomSheet':
235+
Html::addCssClass($this->options, ['modalType' => 'bottom-sheet']);
236+
break;
237+
238+
default:
239+
break;
240+
}
241+
242+
Html::addCssClass($this->options, ['widget' => 'modal']);
243+
244+
if ($this->closeButton !== false) {
245+
$this->closeButton = ArrayHelper::merge([
246+
'class' => 'modal-close',
247+
], $this->closeButton);
248+
}
249+
250+
if ($this->toggleButton !== false) {
251+
$this->toggleButton = ArrayHelper::merge([
252+
'class' => 'modal-trigger btn',
253+
], $this->toggleButton);
254+
}
255+
256+
if ($this->clientOptions !== false) {
257+
$this->clientOptions = ArrayHelper::merge(['show' => false], $this->clientOptions);
258+
}
259+
}
260+
}

0 commit comments

Comments
 (0)