SliderWidget.php
5.52 KB
<?phpnamespace frontend\widgets;use yii\base\Widget;use yii\web\View;use frontend\assets\FlipclockAsset;class SliderWidget extends Widget{ public $title; public function init(){ parent::init(); } /** * @var bool флаг загрузки скрипта слайдера */ public $is_init_slider = false; public function run() { $slider = \common\models\Slider::find()->where([\common\models\Slider::tableName().'.title'=>$this->title])->joinWith("sliderImage")->one(); if (! empty ($slider)) { // изображения $images = $slider->sliderImage; if (! empty ($images)) { // подключаем jssor-slider $this->initSliderJs(); // скрипт-обработчик $this->initSliderScript($slider); // html return $this->htmlSlider($slider, $images); } } return $this->render('slider',[ 'slider'=>$slider ]); } // ==== DISPLAY ==== public function initSliderJs () { if (! $this->is_init_slider) { // TODO:: wiget подключение jcarousel $this->view->registerJsFile(\Yii::$app->request->baseUrl . '/js/widget-carousel/lib/jquery.jcarousel.min.js',[ 'position' => View::POS_END, 'depends' => ['yii\web\JqueryAsset'] ]); $this->is_init_slider = true; } } public function initSliderScript ($slider) { FlipclockAsset::register($this->view); $this->view->registerJs(' var '.$slider->title.'_option_1 = { $AutoPlayInterval: '.$slider->duration.', $SlideDuration: '.$slider->speed.', }; ', 1); $this->view->registerCssFile (\Yii::$app->request->BaseUrl . '/js/widget-carousel/'.$slider->title.'/style.css'); $this->view->registerJsFile(\Yii::$app->request->BaseUrl . '/js/widget-carousel/'.$slider->title.'/style.js',[ 'position' => View::POS_END, 'depends' => ['yii\web\JqueryAsset'] ]); } public function htmlSlider ($slider, $images) { ob_start(); if (! empty ($images)) { echo '<div id="'.$slider->title.'">'; echo ' <!-- Loading Screen --> <div u="loading" class="loading"> <div class="load-1"></div> <div class="load-2"></div> </div> <!-- Slides Container --> <div u="slides" class="item-list">'; foreach ($images as $row) { if($row->isActive()){ echo '<div class="item">'; if(!empty($row->end_at) && strtotime($row->end_at) > strtotime(date("Y-m-d"))){ ?> <div class="clock_style clock_<?= $row->primaryKey ?>"></div> <script type="text/javascript"> var clock; $(document).ready(function() { var clock; clock = $('.clock_<?= $row->primaryKey ?>').FlipClock({ clockFace: 'DailyCounter', language: 'ru', classes: { active: 'flip-clock-active', before: 'flip-clock-before', divider: 'flip-clock-divider', dot: 'flip-clock-dot', label: 'flip-clock-label', flip: 'flip', play: 'play', wrapper: 'flip-clock-wrapper' }, }); clock.setTime(<?= strtotime($row->end_at) - strtotime(date("Y-m-d H:i:s"))?>); clock.setCountdown(true); clock.start(); }); </script> <?php } if (! empty ($row->url)) { echo '<a href="'.$row->url.'">'; } if (empty ($row->image)) { $row->image = '/img/notpic.gif'; } echo '<img u="image" src="/storage/slider/'.$row->image.'" alt ="'.$row->alt.'" class="glossy" />'; //echo '<div u="caption" class="title bg-transparent">'.$row->title.'</div>'; if (! empty ($row->url)) { echo '</a>'; } echo '</div>'; } } echo '</div>'; echo ' <div u="navigator" class="jssorb03"> <div u="prototype"> </div> </div> <span u="arrowleft" class="jssora03l"></span> <span u="arrowright" class="jssora03r"></span>'; echo '</div>'; } return ob_get_clean(); }}