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