jev/opensem
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Multi-images component, refactoring medias functions

Browse Source
This commit is contained in:
Ludovic CANDELLIER
2022-04-16 19:33:17 +02:00
parent 1dc815bf39
commit fe1e14d2c0
16 changed files with 559 additions and 9192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/Datatables/Shop/ArticlesDataTable.php
View File

@@ -76,10 +76,13 @@ class ArticlesDataTable extends DataTable
->editColumn('tags2', function (Article $article) {
$html = '';
foreach ($article->tags as $tag) {
$html .= '<span class="btn btn-xs btn-success pb-2">' . Tags::getFullnameByTag($tag) . '</span> ';
$html .= '<span class="btn btn-xs btn-success pb-2 mb-1" style="font-size: 0.8em;">' . Tags::getFullnameByTag($tag) . '</span> ';
}
return $html;
})
->editColumn('images_count2', function (Article $article) {
return Articles::countFullImagesByArticle($article);
})
->rawColumns(['tags2', 'thumb', 'action']);
return parent::modifier($datatables);
}
@@ -97,6 +100,7 @@ class ArticlesDataTable extends DataTable
Column::make('categories_count')->title('#Ray')->class('text-right')->searchable(false)->width(40),
Column::make('offers_count')->title('#Ofr')->class('text-right')->searchable(false)->width(40),
Column::make('images_count')->title('#Pho')->class('text-right')->searchable(false)->width(40),
Column::make('images_count2')->title('#PhoH')->class('text-right')->searchable(false)->orderable(false)->width(40),
$this->makeColumnButtons(),
];
}

2
app/Repositories/Botanic/Species.php
View File

@@ -51,7 +51,7 @@ class Species
public static function get($id)
{
return Specie::with('tags.group')->findOrFail($id);
return Specie::with('tags.tag_group')->findOrFail($id);
}
public static function storeFull($data)

2
app/Repositories/Botanic/Varieties.php
View File

@@ -48,7 +48,7 @@ class Varieties
public static function get($id)
{
return Variety::with('tags.group')->findOrFail($id);
return Variety::with('tags.tag_group')->findOrFail($id);
}
public static function getFull($id)

10
app/Repositories/Core/Images.php Normal file
View File

@@ -0,0 +1,10 @@
<?php
namespace App\Repositories\Core;
use App\Traits\Repository\Imageable;
class Images
{
use Imageable;
}

39
app/Repositories/Core/Medias.php
View File

@@ -80,33 +80,38 @@ class Medias
return null;
}
$id = $image['id'];
$image['name'] = str_replace(['#', '/', '\\', ' '], '-', $image['name']);
$filename = $image['name'] . self::getExtension($image['file_name']);
$filename = self::getFilename($image);
return "/storage/$id/$filename";
}
public static function getThumbSrc($image)
{
if (!$image) {
return null;
}
$id = $image['id'];
$image['name'] = str_replace(['#', '/', '\\', ' '], '-', $image['name']);
$filename = $image['name'] . '-thumb' . self::getExtension($image['file_name']);
return "/storage/$id/conversions/$filename";
return self::getSrcByType($image, 'thumb');
}
public static function getPreviewSrc($image)
{
if (!$image) {
return null;
return self::getSrcByType($image, 'preview');
}
$id = $image['id'];
$image['name'] = str_replace(['#', '/', '\\', ' '], '-', $image['name']);
$filename = $image['name'] . '-preview' . self::getExtension($image['file_name']);
return "/storage/$id/conversions/$filename";
public static function getNormalSrc($image)
{
return self::getSrcByType($image, 'normal');
}
public static function getSrcByType($image, $type)
{
return $image ? '/storage/' . $image['id'] . '/conversions/' . self::getFilename($image, $type) : false;
}
public static function getFilename($image, $type = false)
{
$image['name'] = self::convertName($image['name']);
return $image['name'] . ($type ? '-' . $type : '') . self::getExtension($image['file_name']);
}
public static function convertName($name)
{
return str_replace(['#', '/', '\\', ' '], '-', $name);
}
}

22
app/Repositories/Shop/Articles.php
View File

@@ -82,9 +82,10 @@ class Articles
$data = $article->toArray();
$parents = self::getInheritedByProduct($article->product_id, $article->product_type);
$data['description'] = self::getFullDescriptionByArticle($article);
$image = self::getFullImageByArticle($article);
$data['image'] = self::getPreviewSrc($image);
$data['image_big'] = self::getImageSrc($image);
$images = self::getFullImagesByArticle($article);
$data['image'] = self::getPreviewSrc($images[0] ?? false);
$data['images'] = $images;
$data['image_big'] = self::getImageSrc($images[0] ?? false);
$data['inherited'] = self::getInherited($id);
$data['categories'] = self::getCategoriesNameByArticle($article);
$data['tags'] = self::getTagsSlugByArticle($article);
@@ -233,7 +234,7 @@ class Articles
public static function getInherited($id)
{
$article = Article::with('product.tags.group')->findOrFail($id);
$article = Article::with('product.tags.tag_group')->findOrFail($id);
$product_type = $article->product_type;
switch ($product_type) {
case 'App\Models\Botanic\Variety':
@@ -406,24 +407,23 @@ class Articles
public static function getFullImagesByArticle($article)
{
$images = count($article->images) ? $article->images : collect([]);
switch ($article->product_type) {
case 'App\Models\Botanic\Variety':
$variety = $article->product;
$specie = $variety->specie;
$images = count($variety->images) ? $variety->images : [];
$images = count($specie->images) ? $images->push($specie->images) : $images;
$images = $variety ? (count($variety->images) ? $images->merge($variety->images) : $images) : $images;
$images = $specie ? (count($specie->images) ? $images->merge($specie->images) : $images) : $images;
break;
case 'App\Models\Botanic\Specie':
$specie = $article->product;
$images = count($specie->images) ? $specie->images : [];
$images = count($specie->images) ? $specie->images : $images;
break;
case 'App\Models\Shop\Merchandise':
$merchandise = $article->product;
$images = count($merchandise->images) ? $merchandise->images : [];
$images = count($merchandise->images) ? $merchandise->images : $images;
break;
default:
$images = [];
}
$images = count($article->images) ? $images->push($article->images) : $images;
return $images;
}

4
app/Traits/Model/Imageable.php
View File

@@ -12,12 +12,12 @@ trait Imageable
public function images()
{
return $this->hasMany('App\Models\Core\Media', 'model_id')->where('model_type', get_class($this));
return $this->hasMany(Media::class, 'model_id')->where('model_type', get_class($this));
}
public function image()
{
return $this->hasOne('App\Models\Core\Media', 'model_id')->where('model_type', get_class($this))->latest();
return $this->hasOne(Media::class, 'model_id')->where('model_type', get_class($this))->latest();
}
public function registerMediaConversions(Media $media = null) : void

11
app/Traits/Repository/Imageable.php
View File

@@ -38,6 +38,17 @@ trait Imageable
return $image ? Medias::getPreviewSrc($image) : ($with_undefined ? '/img/visuel-non-disponible.jpg' : '');
}
public static function getNormal($image, $with_undefined = true)
{
$src = self::getNormalSrc($image, $with_undefined);
return $src ? "<img src='$src'>" : '';
}
public static function getNormalSrc($image, $with_undefined = true)
{
return $image ? Medias::getNormalSrc($image) : ($with_undefined ? '/img/visuel-non-disponible.jpg' : '');
}
public static function getImage($image, $with_undefined = true)
{
$src = self::getImageSrc($image, $with_undefined);

184
build/js/plugins/smooth_products/css/smoothproducts.css Normal file
View File

@@ -0,0 +1,184 @@
/* Needed for the lightbox */
html, body {
height: 100%;
width: 100%;
}
/* CSS for the loading div */
.sp-loading {
text-align: center;
max-width: 270px;
padding: 15px;
border: 5px solid #eee;
border-radius: 3px;
font-size: 12px;
color: #888;
}
/* Element wrapper */
.sp-wrap {
display: none;
line-height: 0;
font-size: 0;
background: #eee;
border: 5px solid #eee;
border-radius: 3px;
position: relative;
margin: 0 25px 15px 0;
float: left;
/**************
Set max-width to your thumbnail width
***************/
max-width: 480px;
}
/* Thumbnails */
.sp-thumbs {
text-align: left;
display: inline-block;
}
.sp-thumbs img {
min-height: 50px;
min-width: 50px;
max-width: 50px;
}
.sp-thumbs a:link, .sp-thumbs a:visited {
width: 50px;
height: 50px;
overflow: hidden;
opacity: .3;
display: inline-block;
background-size: cover;
background-position: center;
-webkit-transition: all .2s ease-out;
-moz-transition: all .2s ease-out;
-ms-transition: all .2s ease-out;
-o-transition: all .2s ease-out;
transition: all .2s ease-out;
}
.sp-thumbs a:hover {
opacity: 1;
}
/* Styles for the currently selected thumbnail */
.sp-thumbs a:active, .sp-current {
opacity: 1!important;
position: relative;
}
/* Image currently being viewed */
.sp-large {
position: relative;
overflow: hidden;
top: 0;
left: 0;
}
.sp-large a img {
max-width: 100%;
height: auto;
}
.sp-large a {
display: block;
}
/* Panning Zoomed Image */
.sp-zoom {
position: absolute;
left: -50%;
top: -50%;
cursor: -webkit-zoom-in;
cursor: -moz-zoom-in;
cursor: zoom-in;
display: none;
}
/* Lightbox */
.sp-lightbox {
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgb(0, 0, 0);
background: rgba(0, 0, 0, .9);
z-index: 500;
display: none;
cursor: pointer;
}
.sp-lightbox img {
position: absolute;
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
max-width: 90%;
max-height: 90%;
border: 2px solid #fff;
}
#sp-prev, #sp-next {
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 501;
color: #fff;
padding: 14px;
text-decoration: none;
background: #000;
border-radius: 25px;
border: 2px solid #fff;
width: 50px;
height: 50px;
box-sizing: border-box;
transition: .2s;
-webkit-transition: .2s;
-moz-transition: .2s;
-ms-transition: .2s;
-o-transition: .2s;
}
#sp-prev {
left: 10px;
}
#sp-prev:before {
content: '';
border: 7px solid transparent;
border-right: 15px solid #fff;
position: absolute;
top: 16px;
left: 7px;
}
#sp-next {
right: 10px;
}
#sp-next:before {
content: '';
border: 7px solid transparent;
border-left: 15px solid white;
position: absolute;
top: 16px;
left: 18px;
}
#sp-prev:hover, #sp-next:hover {
background: #444;
}
/* Tweak styles for small viewports */
@media screen and (max-width: 400px) {
.sp-wrap {
margin: 0 0 15px 0;
}
#sp-prev, #sp-next {
top: auto;
margin-top: 0;
bottom: 25px;
}
}

274
build/js/plugins/smooth_products/js/smoothproducts.js Normal file
View File

@@ -0,0 +1,274 @@
/*
* Smoothproducts version 2.0.2
* http://kthornbloom.com/smoothproducts.php
*
* Copyright 2013, Kevin Thornbloom
* Free to use and abuse under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
*/
(function($) {
$.fn.extend({
deleteSmoothProducts: function () {
$(document.body).off('click', '.sp-lightbox');
$(document.body).off('click', '#sp-prev');
$(document.body).off('click', '#sp-next');
$(document.body).off('click', '.sp-large a');
$(document.body).off('click', '.sp-noff-touch .sp-zoom');
$(document.body).off('click', '.sp-tb-active a');
$(document.body).off('click', '.sp-thumbs');
},
smoothproducts: function() {
// Add some markup & set some CSS
$('.sp-loading').hide();
$('.sp-wrap').each(function() {
$(this).addClass('sp-touch');
var thumbQty = $('a', this).length;
// If more than one image
if (thumbQty > 1) {
var firstLarge,firstThumb,
defaultImage = $('a.sp-default', this)[0]?true:false;
$(this).append('<div class="sp-large"></div><div class="sp-thumbs sp-tb-active"></div>');
$('a', this).each(function(index) {
var thumb = $('img', this).attr('src'),
large = $(this).attr('href'),
classes = '';
//set default image
if((index === 0 && !defaultImage) || $(this).hasClass('sp-default')){
classes = ' class="sp-current"';
firstLarge = large;
firstThumb = $('img', this)[0].src;
}
$(this).parents('.sp-wrap').find('.sp-thumbs').append('<a href="' + large + '" style="background-image:url(' + thumb + ')"'+classes+'></a>');
$(this).remove();
});
$('.sp-large', this).append('<a href="' + firstLarge + '" class="sp-current-big"><img src="' + firstThumb + '" alt="" /></a>');
$('.sp-wrap').css('display', 'inline-block');
// If only one image
} else {
$(this).append('<div class="sp-large"></div>');
$('a', this).appendTo($('.sp-large', this)).addClass('.sp-current-big');
$('.sp-wrap').css('display', 'inline-block');
}
});
// Prevent clicking while things are happening
$(document.body).on('click', '.sp-thumbs', function(event) {
event.preventDefault();
});
// Is this a touch screen or not?
$(document.body).on('mouseover', function(event) {
$('.sp-wrap').removeClass('sp-touch').addClass('sp-non-touch');
event.preventDefault();
});
$(document.body).on('touchstart', function() {
$('.sp-wrap').removeClass('sp-non-touch').addClass('sp-touch');
});
// Clicking a thumbnail
$(document.body).on('click', '.sp-tb-active a', function(event) {
event.preventDefault();
$(this).parent().find('.sp-current').removeClass();
$(this).addClass('sp-current');
$(this).parents('.sp-wrap').find('.sp-thumbs').removeClass('sp-tb-active');
$(this).parents('.sp-wrap').find('.sp-zoom').remove();
var currentHeight = $(this).parents('.sp-wrap').find('.sp-large').height(),
currentWidth = $(this).parents('.sp-wrap').find('.sp-large').width();
$(this).parents('.sp-wrap').find('.sp-large').css({
overflow: 'hidden',
height: currentHeight + 'px',
width: currentWidth + 'px'
});
$(this).addClass('sp-current').parents('.sp-wrap').find('.sp-large a').remove();
var nextLarge = $(this).parent().find('.sp-current').attr('href'),
nextThumb = get_url_from_background($(this).parent().find('.sp-current').css('backgroundImage'));
$(this).parents('.sp-wrap').find('.sp-large').html('<a href="' + nextLarge + '" class="sp-current-big"><img src="' + nextThumb + '"/></a>');
$(this).parents('.sp-wrap').find('.sp-large').hide().fadeIn(250, function() {
var autoHeight = $(this).parents('.sp-wrap').find('.sp-large img').height();
$(this).parents('.sp-wrap').find('.sp-large').animate({
height: autoHeight
}, 'fast', function() {
$('.sp-large').css({
height: 'auto',
width: 'auto'
});
});
$(this).parents('.sp-wrap').find('.sp-thumbs').addClass('sp-tb-active');
});
});
// Zoom In non-touch
$(document.body).on('mouseenter', '.sp-non-touch .sp-large', function(event) {
var largeUrl = $('a', this).attr('href');
$(this).append('<div class="sp-zoom"><img src="' + largeUrl + '"/></div>');
$(this).find('.sp-zoom').fadeIn(250);
event.preventDefault();
});
// Zoom Out non-touch
$(document.body).on('mouseleave', '.sp-non-touch .sp-large', function(event) {
$(this).find('.sp-zoom').fadeOut(250, function() {
$(this).remove();
});
event.preventDefault();
});
// Open in Lightbox non-touch
$(document.body).on('click', '.sp-non-touch .sp-zoom', function(event) {
var currentImg = $(this).html(),
thumbAmt = $(this).parents('.sp-wrap').find('.sp-thumbs a').length,
currentThumb = ($(this).parents('.sp-wrap').find('.sp-thumbs .sp-current').index())+1;
$(this).parents('.sp-wrap').addClass('sp-selected');
$('body').append("<div class='sp-lightbox' data-currenteq='"+currentThumb+"'>" + currentImg + "</div>");
if(thumbAmt > 1){
$('.sp-lightbox').append("<a href='#' id='sp-prev'></a><a href='#' id='sp-next'></a>");
if(currentThumb == 1) {
$('#sp-prev').css('opacity','.1');
} else if (currentThumb == thumbAmt){
$('#sp-next').css('opacity','.1');
}
}
$('.sp-lightbox').fadeIn();
event.preventDefault();
});
// Open in Lightbox touch
$(document.body).on('click', '.sp-large a', function(event) {
var currentImg = $(this).attr('href'),
thumbAmt = $(this).parents('.sp-wrap').find('.sp-thumbs a').length,
currentThumb = ($(this).parents('.sp-wrap').find('.sp-thumbs .sp-current').index())+1;
$(this).parents('.sp-wrap').addClass('sp-selected');
$('body').append('<div class="sp-lightbox" data-currenteq="'+currentThumb+'"><img src="' + currentImg + '"/></div>');
if(thumbAmt > 1){
$('.sp-lightbox').append("<a href='#' id='sp-prev'></a><a href='#' id='sp-next'></a>");
if(currentThumb == 1) {
$('#sp-prev').css('opacity','.1');
} else if (currentThumb == thumbAmt){
$('#sp-next').css('opacity','.1');
}
}
$('.sp-lightbox').fadeIn();
event.preventDefault();
});
// Pagination Forward
$(document.body).on('click', '#sp-next', function(event) {
event.stopPropagation();
var currentEq = $('.sp-lightbox').data('currenteq'),
totalItems = $('.sp-selected .sp-thumbs a').length;
if(currentEq >= totalItems) {
} else {
var nextEq = currentEq + 1,
newImg = $('.sp-selected .sp-thumbs').find('a:eq('+currentEq+')').attr('href'),
newThumb = get_url_from_background($('.sp-selected .sp-thumbs').find('a:eq('+currentEq+')').css('backgroundImage'));
if (currentEq == (totalItems - 1)) {
$('#sp-next').css('opacity','.1');
}
$('#sp-prev').css('opacity','1');
$('.sp-selected .sp-current').removeClass();
$('.sp-selected .sp-thumbs a:eq('+currentEq+')').addClass('sp-current');
$('.sp-selected .sp-large').empty().append('<a href='+newImg+'><img src="'+newThumb+'"/></a>');
$('.sp-lightbox img').fadeOut(250, function() {
$(this).remove();
$('.sp-lightbox').data('currenteq',nextEq).append('<img src="'+newImg+'"/>');
$('.sp-lightbox img').hide().fadeIn(250);
});
}
event.preventDefault();
});
// Pagination Backward
$(document.body).on('click', '#sp-prev', function(event) {
event.stopPropagation();
var currentEq = $('.sp-lightbox').data('currenteq'),
currentEq = currentEq - 1;
if(currentEq <= 0) {
} else {
if (currentEq == 1) {
$('#sp-prev').css('opacity','.1');
}
var nextEq = currentEq - 1,
newImg = $('.sp-selected .sp-thumbs').find('a:eq('+nextEq+')').attr('href'),
newThumb = get_url_from_background($('.sp-selected .sp-thumbs').find('a:eq('+nextEq+')').css('backgroundImage'));
$('#sp-next').css('opacity','1');
$('.sp-selected .sp-current').removeClass();
$('.sp-selected .sp-thumbs a:eq('+nextEq+')').addClass('sp-current');
$('.sp-selected .sp-large').empty().append('<a href='+newImg+'><img src="'+newThumb+'"/></a>');
$('.sp-lightbox img').fadeOut(250, function() {
$(this).remove();
$('.sp-lightbox').data('currenteq',currentEq).append('<img src="'+newImg+'"/>');
$('.sp-lightbox img').hide().fadeIn(250);
});
}
event.preventDefault();
});
// Close Lightbox
$(document.body).on('click', '.sp-lightbox', function() {
closeModal();
});
// Close on Esc
$(document).keydown(function(e) {
if (e.keyCode == 27) {
closeModal();
return false;
}
});
function closeModal (){
$('.sp-selected').removeClass('sp-selected');
$('.sp-lightbox').fadeOut(function() {
$(this).remove();
});
}
// Panning zoomed image (non-touch)
$('.sp-large').mousemove(function(e) {
var viewWidth = $(this).width(),
viewHeight = $(this).height(),
viewOffset = $(this).offset(),
largeWidth = $(this).find('.sp-zoom').width(),
largeHeight = $(this).find('.sp-zoom').height(),
relativeXPosition = (e.pageX - viewOffset.left),
relativeYPosition = (e.pageY - viewOffset.top),
moveX = Math.floor((relativeXPosition * (viewWidth - largeWidth) / viewWidth)),
moveY = Math.floor((relativeYPosition * (viewHeight - largeHeight) / viewHeight));
$(this).find('.sp-zoom').css({
left: moveX,
top: moveY
});
});
function get_url_from_background(bg){
return bg.match(/url\([\"\']{0,1}(.+)[\"\']{0,1}\)+/i)[1];
}
}
});
})(jQuery);

1
build/js/plugins/smooth_products/js/smoothproducts.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

9140
build/js/theme.js
View File

File diff suppressed because one or more lines are too long

8
resources/views/Admin/Shop/Articles/partials/product/description.blade.php
View File

@@ -1,5 +1,9 @@
@if (count($article['inherited'] ?? []))
@component('components.layout.box-collapse', ['id' => 'product_description_box', 'title' => 'Informations héritées', 'collapsed' => $collapsed ?? false])
@component('components.layout.box-collapse', [
'id' => 'product_description_box',
'title' => 'Informations héritées',
'collapsed' => $collapsed ?? false,
])
@foreach ($article['inherited'] as $inherited)
@component('components.card', ['title' => $inherited['name'], 'class' => 'mb-3'])
{!! $inherited['description'] !!}
@@ -7,7 +11,7 @@
@if ($inherited['tags'])
<h6> Tags</h6>
@foreach ($inherited['tags'] as $tag)
<button type="button" class="btn btn-secondary btn-xs">{{ $tag['group']['name'] }}-{{ $tag['name']['fr'] ?? $tag['name'] }}</button>
<button type="button" class="btn btn-secondary btn-xs">{{ $tag['tag_group']['name'] }}-{{ $tag['name'] ?? $tag['name'] }}</button>
@endforeach
@endif
@endcomponent

6
resources/views/Shop/Articles/show.blade.php
View File

@@ -9,10 +9,10 @@
</div>
</div>
<div class="row">
<div class="col-4">
<img src="{{ $article['image_big'] }}" class="img-fluid border">
<div class="col-9 text-justify">
<div style="max-width: 360px;">
@include('components.multi-images', ['images' => $article['images']])
</div>
<div class="col-5">
{!! $article['description'] !!}
</div>
<div class="col-3">

14
resources/views/components/multi-images.blade.php Normal file
View File

@@ -0,0 +1,14 @@
<div class="sp-loading"><img src="images/sp-loading.gif" alt=""><br>LOADING IMAGES</div>
<div class="sp-wrap" style="width: 100%;">
@foreach ($images as $image)
<a href="{{ App\Repositories\Core\Images::getImageSrc($image) }}"><img src="{{ App\Repositories\Core\Images::getNormalSrc($image) }}"></a>
@endforeach
</div>
@push('js')
<script>
$(window).load(function() {
$('.sp-wrap').smoothproducts();
});
</script>
@endpush