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 |