From: fomichev Date: Mon, 31 Mar 2025 08:32:45 +0000 (+0300) Subject: Лайтбоксы для изображений X-Git-Url: https://gitweb.erp-flowers.ru/?a=commitdiff_plain;h=5afdd8345322736579e676d80c2365167ba62132;p=erp24_rep%2Fyii-erp24%2F.git Лайтбоксы для изображений --- diff --git a/erp24/views/bouquet/index.php b/erp24/views/bouquet/index.php index 597893cf..51952bf0 100644 --- a/erp24/views/bouquet/index.php +++ b/erp24/views/bouquet/index.php @@ -10,8 +10,12 @@ use yii_app\records\Files; use yii_app\records\MatrixType; use yii_app\records\Products1c; use yii_app\records\WriteOffsErp; +use yii\web\View; /** @var yii\web\View $this */ + +$this->registerCssFile('@web/css/lightbox.min.css'); +$this->registerJsFile('@web/js/lightbox.min.js', ['position' => View::POS_END]); $this->title = 'Содержание матрицы'; ?>
@@ -71,148 +75,177 @@ $this->title = 'Содержание матрицы';
$dataProvider, - 'layout' => "{items}\n{pager}", + 'layout' => "{items}\n{pager}", 'tableOptions' => ['class' => 'table'], - 'columns' => [ + 'columns' => [ [ - 'attribute' => 'name', - 'format' => 'raw', - 'value' => function ($model) { + 'attribute' => 'name', + 'format' => 'raw', + 'value' => function ($model) { $compositionHtml = "
"; - if (is_array($model->bouquetCompositionProducts)) { foreach ($model->bouquetCompositionProducts as $item) { - $product = Products1c::findOne($item->product_guid); + $product = Products1c::findOne($item->product_guid); $productName = $product ? $product->name : 'Неизвестный продукт'; - $compositionHtml .= " -
-
{$productName}
-
{$item->count}
-
"; +
+
{$productName}
+
{$item->count}
+
"; } } + $compositionHtml .= "
"; - $images = Files::find() - ->where(['entity_id' => $model->id, 'entity' => \yii_app\records\BouquetComposition::PHOTO_BOUQUET]) - ->limit(3) + $images = Files::find() + ->where([ + 'entity_id' => $model->id, + 'entity' => BouquetComposition::PHOTO_BOUQUET + ]) ->all(); - $imageUrls = array_map(fn($file) => Url::to($file->url), $images); - $imageUrls += array_fill(0, 3 - count($imageUrls), null); - $compositionHtml .= "
"; + $allImageUrls = array_map(fn($file) => Url::to($file->url), $images); + $previewImageUrls = array_slice($allImageUrls, 0, 3); + $previewImageUrls += array_fill(0, 3 - count($previewImageUrls), null); + + $galleryId = 'gallery-' . $model->id; + + $hiddenLinks = ""; + if (count($allImageUrls) > 3) { + foreach (array_slice($allImageUrls, 3) as $url) { + $hiddenLinks .= Html::a('', $url, [ + 'data-lightbox' => $galleryId, + 'style' => 'display:none;' + ]); + } + } - return " -
-
-
-

{$model->name}

-
- {$compositionHtml} -
-
- Себестоимость: " . $model->getSelfCost() . "
- Наценка: " . $model->getMarkUp() . "
- Цена: " . $model->getCost() . "
-
+ $html = " +
+
+
+

{$model->name}

+
+ {$compositionHtml} +
+
+ Себестоимость: " . $model->getSelfCost() . "
+ Наценка: " . $model->getMarkUp() . "
+ Цена: " . $model->getCost() . "
+
+
+ +
+
+
"; + if (isset($previewImageUrls[0])) { + $html .= Html::a( + Html::img($previewImageUrls[0], [ + 'style' => 'width: 100%; height: 100%; object-fit: cover;', + ]), + $previewImageUrls[0], + ['data-lightbox' => $galleryId] + ); + } + $html .= "
- -
-
-
" . - Html::img(Url::to($imageUrls[0]), [ - 'style' => 'width: 100%; height: 100%; object-fit: cover;' - ]) . " -
-
- -
-
+
+ +
+
" . Html::tag('video', '', [ - 'class' => 'video-preview', - 'src' => Url::to($model->presentation->url ?? null), - 'style' => 'width: 100%; height: 100%; object-fit: cover;', - 'autoplay' => true, - 'muted' => true, - 'loop' => true, - 'playsinline' => true + 'class' => 'video-preview', + 'src' => Url::to($model->presentation->url ?? null), + 'style' => 'width: 100%; height: 100%; object-fit: cover;', + 'autoplay' => true, + 'muted' => true, + 'loop' => true, + 'playsinline' => true, ]) . " -
Презентация
-
-
" . - Html::img(Url::to($imageUrls[1]), [ - 'style' => 'width: 100%; height: 100%; object-fit: cover;' - ]) . " -
-
- -
-
" . - Html::tag('video', '', [ - 'class' => 'video-preview', - 'src' => Url::to($model->buildProcess->url ?? null), - 'style' => 'width: 100%; height: 100%; object-fit: cover;', - 'autoplay' => true, - 'muted' => true, - 'loop' => true, - 'playsinline' => true +
Презентация
+
+
"; + if (isset($previewImageUrls[1])) { + $html .= Html::a( + Html::img($previewImageUrls[1], [ + 'style' => 'width: 100%; height: 100%; object-fit: cover;', + ]), + $previewImageUrls[1], + ['data-lightbox' => $galleryId] + ); + } + $html .= " +
+
+ +
+
+ " . Html::tag('video', '', [ + 'class' => 'video-preview', + 'src' => Url::to($model->buildProcess->url ?? null), + 'style' => 'width: 100%; height: 100%; object-fit: cover;', + 'autoplay' => true, + 'muted' => true, + 'loop' => true, + 'playsinline' => true, ]) . " -
Процесс сборки
-
-
" . - Html::img(is_array($imageUrls) && isset($imageUrls[2]) ? Url::to($imageUrls[2]) : null, - ['style' => 'width: 100%; height: 100%; object-fit: cover;']) . " -
-
-
-
- " . (!empty($model->status) ? " - - 'bg-success', - WriteOffsErp::STATUS_SEND => 'bg-warning', - WriteOffsErp::STATUS_DISABLE, - WriteOffsErp::STATUS_ERROR_1С => 'bg-danger', - default => 'bg-secondary', - } . - " fs-6 text-white px-7 w-100 mb-4 d-block'> - " . Html::encode(\yii_app\records\WriteOffsErp::STATUSES[$model->status] ?? '') . " - - " : "") . " -
- " . (!empty($model->error_text) ? " -
- - - " . Html::encode($model->error_text) . " - -
- " : "") . " -
-
-
-
- " . - Html::a('Редактировать', Url::to(['/bouquet/view', 'id' => $model['id']]), [ +
Процесс сборки
+
+
"; + if (isset($previewImageUrls[2])) { + $html .= Html::a( + Html::img($previewImageUrls[2], [ + 'style' => 'width: 100%; height: 100%; object-fit: cover;' + ]), + $previewImageUrls[2], + ['data-lightbox' => $galleryId] + ); + } + $html .= " +
+
+
+
+ " . (!empty($model->status) ? " + + 'bg-success', + WriteOffsErp::STATUS_SEND => 'bg-warning', + WriteOffsErp::STATUS_DISABLE, + WriteOffsErp::STATUS_ERROR_1С => 'bg-danger', + default => 'bg-secondary', + } . + " fs-6 text-white px-7 w-100 mb-4 d-block'> + " . Html::encode(\yii_app\records\WriteOffsErp::STATUSES[$model->status] ?? '') . " + + " : "") . " +
+ " . (!empty($model->error_text) ? " +
+ + + " . Html::encode($model->error_text) . " + +
+ " : "") . " +
+
+
+
+ " . Html::a('Редактировать', Url::to(['/bouquet/view', 'id' => $model['id']]), [ 'class' => 'btn btn-warning btn-edit' -// . -// ((Yii::$app->request->get('year') < date('Y') || // Если год в прошлом → disabled -// (Yii::$app->request->get('year') == date('Y') && Yii::$app->request->get('month') < date('m')) || -// (Yii::$app->request->get('year') == date('Y') && Yii::$app->request->get('month') == date('m') && BouquetComposition::disabledButtons()) || -// (Yii::$app->request->get('year') == date('Y') && Yii::$app->request->get('month') == date('m') + 1 &&BouquetComposition::disabledButtons()) -// ) ? ' disabled' : ''), - ]) - . " -
-
+ ]) . "
-
"; +
+
+ " . $hiddenLinks . " +
"; + return $html; }, 'contentOptions' => ['class' => 'align-top'], - 'headerOptions' => ['style' => 'display:none'], + 'headerOptions' => ['style' => 'display:none'], ], ], ]) ?> diff --git a/erp24/web/css/lightbox.min.css b/erp24/web/css/lightbox.min.css new file mode 100644 index 00000000..adbaa837 --- /dev/null +++ b/erp24/web/css/lightbox.min.css @@ -0,0 +1 @@ +.lb-loader,.lightbox{text-align:center;line-height:0;position:absolute;left:0}body.lb-disable-scrolling{overflow:hidden}.lightboxOverlay{position:absolute;top:0;left:0;z-index:9999;background-color:#000;filter:alpha(Opacity=80);opacity:.8;display:none}.lightbox{width:100%;z-index:10000;font-weight:400;outline:0}.lightbox .lb-image{display:block;height:auto;max-width:inherit;max-height:none;border-radius:3px;border:4px solid #fff}.lightbox a img{border:none}.lb-outerContainer{position:relative;width:250px;height:250px;margin:0 auto;border-radius:4px;background-color:#fff}.lb-outerContainer:after{content:"";display:table;clear:both}.lb-loader{top:43%;height:25%;width:100%}.lb-cancel{display:block;width:32px;height:32px;margin:0 auto;background:url(../images/loading.gif) no-repeat}.lb-nav{position:absolute;top:0;left:0;height:100%;width:100%;z-index:10}.lb-container>.nav{left:0}.lb-nav a{outline:0;background-image:url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==)}.lb-next,.lb-prev{height:100%;cursor:pointer;display:block}.lb-nav a.lb-prev{width:34%;left:0;float:left;background:url(../images/prev.png) left 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-prev:hover{filter:alpha(Opacity=100);opacity:1}.lb-nav a.lb-next{width:64%;right:0;float:right;background:url(../images/next.png) right 48% no-repeat;filter:alpha(Opacity=0);opacity:0;-webkit-transition:opacity .6s;-moz-transition:opacity .6s;-o-transition:opacity .6s;transition:opacity .6s}.lb-nav a.lb-next:hover{filter:alpha(Opacity=100);opacity:1}.lb-dataContainer{margin:0 auto;padding-top:5px;width:100%;border-bottom-left-radius:4px;border-bottom-right-radius:4px}.lb-dataContainer:after{content:"";display:table;clear:both}.lb-data{padding:0 4px;color:#ccc}.lb-data .lb-details{width:85%;float:left;text-align:left;line-height:1.1em}.lb-data .lb-caption{font-size:13px;font-weight:700;line-height:1em}.lb-data .lb-caption a{color:#4ae}.lb-data .lb-number{display:block;clear:left;padding-bottom:1em;font-size:12px;color:#999}.lb-data .lb-close{display:block;float:right;width:30px;height:30px;background:url(../images/close.png) top right no-repeat;text-align:right;outline:0;filter:alpha(Opacity=70);opacity:.7;-webkit-transition:opacity .2s;-moz-transition:opacity .2s;-o-transition:opacity .2s;transition:opacity .2s}.lb-data .lb-close:hover{cursor:pointer;filter:alpha(Opacity=100);opacity:1} \ No newline at end of file diff --git a/erp24/web/js/lightbox.min.js b/erp24/web/js/lightbox.min.js new file mode 100644 index 00000000..efb7acde --- /dev/null +++ b/erp24/web/js/lightbox.min.js @@ -0,0 +1,15 @@ +/*! + * Lightbox v2.11.3 + * by Lokesh Dhakar + * + * More info: + * http://lokeshdhakar.com/projects/lightbox2/ + * + * Copyright Lokesh Dhakar + * Released under the MIT license + * https://github.com/lokesh/lightbox2/blob/master/LICENSE + * + * @preserve + */ +!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],b):"object"==typeof exports?module.exports=b(require("jquery")):a.lightbox=b(a.jQuery)}(this,function(a){function b(b){this.album=[],this.currentImageIndex=void 0,this.init(),this.options=a.extend({},this.constructor.defaults),this.option(b)}return b.defaults={albumLabel:"Image %1 of %2",alwaysShowNavOnTouchDevices:!1,fadeDuration:600,fitImagesInViewport:!0,imageFadeDuration:600,positionFromTop:50,resizeDuration:700,showImageNumberLabel:!0,wrapAround:!1,disableScrolling:!1,sanitizeTitle:!1},b.prototype.option=function(b){a.extend(this.options,b)},b.prototype.imageCountLabel=function(a,b){return this.options.albumLabel.replace(/%1/g,a).replace(/%2/g,b)},b.prototype.init=function(){var b=this;a(document).ready(function(){b.enable(),b.build()})},b.prototype.enable=function(){var b=this;a("body").on("click","a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]",function(c){return b.start(a(c.currentTarget)),!1})},b.prototype.build=function(){if(!(a("#lightbox").length>0)){var b=this;a('
').appendTo(a("body")),this.$lightbox=a("#lightbox"),this.$overlay=a("#lightboxOverlay"),this.$outerContainer=this.$lightbox.find(".lb-outerContainer"),this.$container=this.$lightbox.find(".lb-container"),this.$image=this.$lightbox.find(".lb-image"),this.$nav=this.$lightbox.find(".lb-nav"),this.containerPadding={top:parseInt(this.$container.css("padding-top"),10),right:parseInt(this.$container.css("padding-right"),10),bottom:parseInt(this.$container.css("padding-bottom"),10),left:parseInt(this.$container.css("padding-left"),10)},this.imageBorderWidth={top:parseInt(this.$image.css("border-top-width"),10),right:parseInt(this.$image.css("border-right-width"),10),bottom:parseInt(this.$image.css("border-bottom-width"),10),left:parseInt(this.$image.css("border-left-width"),10)},this.$overlay.hide().on("click",function(){return b.end(),!1}),this.$lightbox.hide().on("click",function(c){"lightbox"===a(c.target).attr("id")&&b.end()}),this.$outerContainer.on("click",function(c){return"lightbox"===a(c.target).attr("id")&&b.end(),!1}),this.$lightbox.find(".lb-prev").on("click",function(){return 0===b.currentImageIndex?b.changeImage(b.album.length-1):b.changeImage(b.currentImageIndex-1),!1}),this.$lightbox.find(".lb-next").on("click",function(){return b.currentImageIndex===b.album.length-1?b.changeImage(0):b.changeImage(b.currentImageIndex+1),!1}),this.$nav.on("mousedown",function(a){3===a.which&&(b.$nav.css("pointer-events","none"),b.$lightbox.one("contextmenu",function(){setTimeout(function(){this.$nav.css("pointer-events","auto")}.bind(b),0)}))}),this.$lightbox.find(".lb-loader, .lb-close").on("click",function(){return b.end(),!1})}},b.prototype.start=function(b){function c(a){d.album.push({alt:a.attr("data-alt"),link:a.attr("href"),title:a.attr("data-title")||a.attr("title")})}var d=this,e=a(window);e.on("resize",a.proxy(this.sizeOverlay,this)),this.sizeOverlay(),this.album=[];var f,g=0,h=b.attr("data-lightbox");if(h){f=a(b.prop("tagName")+'[data-lightbox="'+h+'"]');for(var i=0;ik||g.height>j)&&(g.width/k>g.height/j?(i=k,h=parseInt(g.height/(g.width/i),10),f.width(i),f.height(h)):(h=j,i=parseInt(g.width/(g.height/h),10),f.width(i),f.height(h))),c.sizeContainer(f.width(),f.height())},g.src=this.album[b].link,this.currentImageIndex=b},b.prototype.sizeOverlay=function(){var b=this;setTimeout(function(){b.$overlay.width(a(document).width()).height(a(document).height())},0)},b.prototype.sizeContainer=function(a,b){function c(){d.$lightbox.find(".lb-dataContainer").width(g),d.$lightbox.find(".lb-prevLink").height(h),d.$lightbox.find(".lb-nextLink").height(h),d.$overlay.focus(),d.showImage()}var d=this,e=this.$outerContainer.outerWidth(),f=this.$outerContainer.outerHeight(),g=a+this.containerPadding.left+this.containerPadding.right+this.imageBorderWidth.left+this.imageBorderWidth.right,h=b+this.containerPadding.top+this.containerPadding.bottom+this.imageBorderWidth.top+this.imageBorderWidth.bottom;e!==g||f!==h?this.$outerContainer.animate({width:g,height:h},this.options.resizeDuration,"swing",function(){c()}):c()},b.prototype.showImage=function(){this.$lightbox.find(".lb-loader").stop(!0).hide(),this.$lightbox.find(".lb-image").fadeIn(this.options.imageFadeDuration),this.updateNav(),this.updateDetails(),this.preloadNeighboringImages(),this.enableKeyboardNav()},b.prototype.updateNav=function(){var a=!1;try{document.createEvent("TouchEvent"),a=!!this.options.alwaysShowNavOnTouchDevices}catch(a){}this.$lightbox.find(".lb-nav").show(),this.album.length>1&&(this.options.wrapAround?(a&&this.$lightbox.find(".lb-prev, .lb-next").css("opacity","1"),this.$lightbox.find(".lb-prev, .lb-next").show()):(this.currentImageIndex>0&&(this.$lightbox.find(".lb-prev").show(),a&&this.$lightbox.find(".lb-prev").css("opacity","1")),this.currentImageIndex1&&this.options.showImageNumberLabel){var c=this.imageCountLabel(this.currentImageIndex+1,this.album.length);this.$lightbox.find(".lb-number").text(c).fadeIn("fast")}else this.$lightbox.find(".lb-number").hide();this.$outerContainer.removeClass("animating"),this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration,function(){return a.sizeOverlay()})},b.prototype.preloadNeighboringImages=function(){if(this.album.length>this.currentImageIndex+1){(new Image).src=this.album[this.currentImageIndex+1].link}if(this.currentImageIndex>0){(new Image).src=this.album[this.currentImageIndex-1].link}},b.prototype.enableKeyboardNav=function(){this.$lightbox.on("keyup.keyboard",a.proxy(this.keyboardAction,this)),this.$overlay.on("keyup.keyboard",a.proxy(this.keyboardAction,this))},b.prototype.disableKeyboardNav=function(){this.$lightbox.off(".keyboard"),this.$overlay.off(".keyboard")},b.prototype.keyboardAction=function(a){var b=a.keyCode;27===b?(a.stopPropagation(),this.end()):37===b?0!==this.currentImageIndex?this.changeImage(this.currentImageIndex-1):this.options.wrapAround&&this.album.length>1&&this.changeImage(this.album.length-1):39===b&&(this.currentImageIndex!==this.album.length-1?this.changeImage(this.currentImageIndex+1):this.options.wrapAround&&this.album.length>1&&this.changeImage(0))},b.prototype.end=function(){this.disableKeyboardNav(),a(window).off("resize",this.sizeOverlay),this.$lightbox.fadeOut(this.options.fadeDuration),this.$overlay.fadeOut(this.options.fadeDuration),this.options.disableScrolling&&a("body").removeClass("lb-disable-scrolling")},new b}); +//# sourceMappingURL=lightbox.min.map \ No newline at end of file