1
|
|
|
<?php |
2
|
|
|
|
3
|
|
|
namespace dominus77\lightslider; |
4
|
|
|
|
5
|
|
|
use yii\base\Widget; |
6
|
|
|
use yii\helpers\Html; |
7
|
|
|
use yii\helpers\Json; |
8
|
|
|
use yii\helpers\ArrayHelper; |
9
|
|
|
use yii\web\JsExpression; |
10
|
|
|
use dominus77\lightslider\assets\SliderAsset; |
11
|
|
|
use dominus77\lightslider\assets\GalleryAsset; |
12
|
|
|
|
13
|
|
|
/** |
14
|
|
|
* Class Slider |
15
|
|
|
* Renders a JQuery LightSlider widget for Yii2. |
16
|
|
|
* @package dominus77\lightslider |
17
|
|
|
* @see http://sachinchoolur.github.io/lightslider/ |
18
|
|
|
* |
19
|
|
|
* Render Slider |
20
|
|
|
* ------------------------------------------------- |
21
|
|
|
* <?= \dominus77\lightslider\Slider::widget([ |
22
|
|
|
* 'items' => ['Slide 1', 'Slide 2', 'Slide 3', 'Slide 4', 'Slide 5', 'Slide 6', 'Slide 7', '...'], |
23
|
|
|
* 'clientOptions' => [ |
24
|
|
|
* 'item' => 3, |
25
|
|
|
* 'autoWidth' => false, |
26
|
|
|
* 'slideMove' => 1, // slidemove will be 1 if loop is true |
27
|
|
|
* 'slideMargin' => 10, |
28
|
|
|
* //... |
29
|
|
|
* ], |
30
|
|
|
* 'listOptions' => [], // Set <ul> options |
31
|
|
|
* 'itemsOptions' => [], // Set options <li> all |
32
|
|
|
* ]); ?> |
33
|
|
|
* |
34
|
|
|
* Integrate with lightGallery (http://sachinchoolur.github.io/lightGallery/) |
35
|
|
|
* ------------------------------------------------- |
36
|
|
|
* <?= \dominus77\lightslider\Slider::widget([ |
37
|
|
|
* 'id' => 'myGalleryID', |
38
|
|
|
* 'items' => [ |
39
|
|
|
* [ |
40
|
|
|
* 'item' => \yii\helpers\Html::img(Yii::getAlias('@web/uploads/img/image1.jpg')), |
41
|
|
|
* 'options' => [ |
42
|
|
|
* 'data-thumb' => \Yii::getAlias('@web/uploads/img/thumb/image1.jpg'), |
43
|
|
|
* 'data-src' => \Yii::getAlias('@web/uploads/img/largeImage1.jpg'), |
44
|
|
|
* //... |
45
|
|
|
* ] |
46
|
|
|
* ], |
47
|
|
|
* [ |
48
|
|
|
* 'item' => \yii\helpers\Html::img(Yii::getAlias('@web/uploads/img/image2.jpg')), |
49
|
|
|
* 'options' => [ |
50
|
|
|
* 'data' => [ |
51
|
|
|
* 'thumb' => \Yii::getAlias('@web/uploads/img/thumb/image2.jpg'), |
52
|
|
|
* 'src' => \Yii::getAlias('@web/uploads/img/largeImage2.jpg'), |
53
|
|
|
* ], |
54
|
|
|
* //... |
55
|
|
|
* ] |
56
|
|
|
* ], |
57
|
|
|
* //... |
58
|
|
|
* ], |
59
|
|
|
* 'clientOptions' => [ |
60
|
|
|
* 'gallery' => true, |
61
|
|
|
* 'item' => 1, |
62
|
|
|
* 'loop' => true, |
63
|
|
|
* 'thumbItem' => 9, |
64
|
|
|
* 'slideMargin' => 0, |
65
|
|
|
* 'enableDrag' => false, |
66
|
|
|
* 'currentPagerPosition' => 'left', |
67
|
|
|
* 'onSliderLoad' => new \yii\web\JsExpression("function(el) { |
68
|
|
|
* el.lightGallery({ |
69
|
|
|
* selector: '#myGalleryID .lslide' |
70
|
|
|
* }); |
71
|
|
|
* }"), |
72
|
|
|
* //... |
73
|
|
|
* ], |
74
|
|
|
* //... |
75
|
|
|
* ]); ?> |
76
|
|
|
*/ |
77
|
|
|
class Slider extends Widget |
78
|
|
|
{ |
79
|
|
|
/** |
80
|
|
|
* @var string |
81
|
|
|
* 'id' => 'myId', |
82
|
|
|
*/ |
83
|
|
|
public $id = ''; |
84
|
|
|
|
85
|
|
|
/** |
86
|
|
|
* Set Items |
87
|
|
|
* @var array |
88
|
|
|
* |
89
|
|
|
* Example 1: Indexed items array |
90
|
|
|
* --------------------------------- |
91
|
|
|
* $items = [ |
92
|
|
|
* '<h1>Slide 1</h1><p>Text 1</p>', |
93
|
|
|
* '<h1>Slide 2</h1><p>Text 2</p>', |
94
|
|
|
* '...', |
95
|
|
|
* ] |
96
|
|
|
* |
97
|
|
|
* Example 2: Associative items array |
98
|
|
|
* --------------------------------- |
99
|
|
|
* $items = [ |
100
|
|
|
* [ |
101
|
|
|
* 'item' => '<h1>Slide 1</h1><p>Text 1</p>', |
102
|
|
|
* 'options' => [ |
103
|
|
|
* 'class' => 'text-success', |
104
|
|
|
* ] |
105
|
|
|
* ], |
106
|
|
|
* [ |
107
|
|
|
* 'item' => '<h1>Slide 2</h1><p>Text 2</p>', |
108
|
|
|
* 'options' => [ |
109
|
|
|
* 'class' => 'text-danger', |
110
|
|
|
* ] |
111
|
|
|
* ], |
112
|
|
|
* //... |
113
|
|
|
* ] |
114
|
|
|
*/ |
115
|
|
|
public $items = []; |
116
|
|
|
|
117
|
|
|
/** |
118
|
|
|
* @var array |
119
|
|
|
* @see http://sachinchoolur.github.io/lightslider/ |
120
|
|
|
*/ |
121
|
|
|
public $clientOptions = []; |
122
|
|
|
|
123
|
|
|
/** |
124
|
|
|
* List Options |
125
|
|
|
* @var array |
126
|
|
|
* |
127
|
|
|
* Usage: |
128
|
|
|
* 'listOptions' => ['class' => 'myListCssClass'] |
129
|
|
|
* Result: |
130
|
|
|
* <ul class="myListCssClass">...</ul> |
131
|
|
|
*/ |
132
|
|
|
public $listOptions = []; |
133
|
|
|
|
134
|
|
|
/** |
135
|
|
|
* Global Items options |
136
|
|
|
* @var array |
137
|
|
|
* |
138
|
|
|
* Usage: |
139
|
|
|
* 'itemsOptions' => ['class' => 'myItemsCssClass'] |
140
|
|
|
* Result: |
141
|
|
|
* <li class="myItemsCssClass">...</li> |
142
|
|
|
*/ |
143
|
|
|
public $itemsOptions = []; |
144
|
|
|
|
145
|
|
|
/** |
146
|
|
|
* @var string |
147
|
|
|
*/ |
148
|
|
|
private $_selector = ''; |
149
|
|
|
|
150
|
|
|
/** |
151
|
|
|
* @var array |
152
|
|
|
*/ |
153
|
|
|
private $_options = []; |
154
|
|
|
|
155
|
|
|
/** |
156
|
|
|
* Initializes the widget. |
157
|
|
|
*/ |
158
|
3 |
|
public function init() |
159
|
|
|
{ |
160
|
3 |
|
parent::init(); |
161
|
3 |
|
$this->_selector = $this->id ? $this->id : $this->getId(); |
162
|
3 |
|
$this->listOptions['id'] = $this->_selector; |
163
|
3 |
|
$this->_options = $this->getOptions(); |
164
|
3 |
|
} |
165
|
|
|
|
166
|
|
|
/** |
167
|
|
|
* Renders widget |
168
|
|
|
* @return string|void |
169
|
|
|
*/ |
170
|
2 |
|
public function run() |
171
|
|
|
{ |
172
|
2 |
|
if (!empty($this->items)) { |
173
|
2 |
|
$this->registerAssets(); |
174
|
2 |
|
$this->renderSlider(); |
175
|
|
|
} |
176
|
2 |
|
} |
177
|
|
|
|
178
|
|
|
/** |
179
|
|
|
* Render List |
180
|
|
|
*/ |
181
|
2 |
|
public function renderSlider() |
182
|
|
|
{ |
183
|
2 |
|
echo PHP_EOL . Html::beginTag('ul', $this->listOptions) . PHP_EOL; |
184
|
2 |
|
if (ArrayHelper::isAssociative($this->items[0])) { |
185
|
1 |
|
$this->renderAssociativeItems(); |
186
|
|
|
} else { |
187
|
1 |
|
$this->renderIndexedItems(); |
188
|
|
|
} |
189
|
2 |
|
echo Html::endTag('ul') . PHP_EOL; |
190
|
2 |
|
} |
191
|
|
|
|
192
|
|
|
/** |
193
|
|
|
* Render Indexed array items |
194
|
|
|
*/ |
195
|
1 |
|
public function renderIndexedItems() |
196
|
|
|
{ |
197
|
1 |
|
foreach ($this->items as $key => $item) { |
198
|
1 |
|
echo Html::tag('li', $item, $this->itemsOptions) . PHP_EOL; |
199
|
|
|
} |
200
|
1 |
|
} |
201
|
|
|
|
202
|
|
|
/** |
203
|
|
|
* Render Associative array items |
204
|
|
|
*/ |
205
|
1 |
|
public function renderAssociativeItems() |
206
|
|
|
{ |
207
|
1 |
|
foreach ($this->items as $item) { |
208
|
1 |
|
$itemData = []; |
209
|
1 |
|
if (isset($item['options'])) { |
210
|
1 |
|
foreach ($item['options'] as $key => $data) { |
211
|
1 |
|
$itemData[$key] = $data; |
212
|
|
|
} |
213
|
|
|
} |
214
|
1 |
|
$itemOptions = ArrayHelper::merge($itemData, $this->itemsOptions); |
215
|
1 |
|
echo Html::tag('li', $item['item'], $itemOptions) . PHP_EOL; |
216
|
|
|
} |
217
|
1 |
|
} |
218
|
|
|
|
219
|
|
|
/** |
220
|
|
|
* Set client options |
221
|
|
|
* @return array |
222
|
|
|
*/ |
223
|
3 |
|
public function getOptions() |
224
|
|
|
{ |
225
|
3 |
|
$options = []; |
226
|
3 |
|
return ArrayHelper::merge($options, $this->clientOptions); |
227
|
|
|
} |
228
|
|
|
|
229
|
|
|
/** |
230
|
|
|
* Register resource |
231
|
|
|
*/ |
232
|
2 |
|
public function registerAssets() |
233
|
|
|
{ |
234
|
2 |
|
$options = Json::encode($this->_options); |
235
|
2 |
|
$view = $this->getView(); |
236
|
2 |
|
SliderAsset::register($view); |
237
|
2 |
|
if (isset($this->_options['gallery']) && $this->_options['gallery'] === true) { |
238
|
1 |
|
GalleryAsset::register($view); |
239
|
|
|
} |
240
|
2 |
|
$script = new JsExpression(" |
241
|
2 |
|
var slider = $('#{$this->_selector}').lightSlider({$options}); |
242
|
|
|
"); |
243
|
2 |
|
$view->registerJs($script, $view::POS_READY); |
244
|
2 |
|
} |
245
|
|
|
} |
246
|
|
|
|