FEATURE #1527: add settings for displaying more images per row

This commit is contained in:
Michal Kváček
2016-04-02 09:56:53 +02:00
parent 19e0977bbb
commit 9f4cc158db
9 changed files with 162 additions and 110 deletions
+2
View File
@@ -80,7 +80,9 @@ class OrbitSlider implements PublicWidget
$settings = [
'directoryId' => $directory->id,
'imagePerSlide' => $request->imagePerSlide,
'sliderClass' => isset($request->containerClass) ? $request->containerClass : '',
'slideContainerClass' => isset($request->slideContainerClass) ? $request->slideContainerClass : '',
'code' => $request->code
];
@@ -8,6 +8,45 @@ use App\Widgets\Contracts\WidgetRenderer;
class OrbitSlider implements WidgetRenderer
{
/**
* Method for populating settings array with default values
*
* @param $settings
*/
protected static function prepareSettings(&$settings)
{
if (!isset($settings->slideContainerClass)) {
$settings->slideContainerClass = '';
}
if (!isset($settings->imagesPerSlide)) {
$settings->imagesPerSlide = 4;
}
if (!isset($settings->directoryId)) {
$settings->directoryId = false;
}
if (!isset($settings->sliderClass)) {
$settings->sliderClass = '';
}
if (!isset($settings->code)) {
$settings->code = '';
}
}
protected static function getAvailableColumns()
{
return [
'fullscreen' => trans('widgets/orbitSlider.fullscreen'),
1 => '1',
2 => '2',
3 => '3',
4 => '4',
6 => '6',
12 => '12',
];
}
/**
* Method used for displaying widget.
*
@@ -25,7 +64,18 @@ class OrbitSlider implements WidgetRenderer
->where('mime_type', 'LIKE', 'image%')
->get();
return view('widgets.orbitSlider.element', ['images' => $images, 'settings' => $settings]);
// add some non-existing values
self::prepareSettings($settings);
$slidesCount = ($settings->imagePerSlide == 'fullscreen') ? count($images) : ceil(count($images) / $settings->imagePerSlide);
$htmlGridNumber = ($settings->imagePerSlide == 'fullscreen') ? false : 12 / $settings->imagePerSlide;
return view('widgets.orbitSlider.element', [
'images' => $images,
'settings' => $settings,
'slidesCount' => $slidesCount,
'gridNumber' => $htmlGridNumber
]);
}
/**
@@ -37,7 +87,17 @@ class OrbitSlider implements WidgetRenderer
*/
public static function renderAddForm(WidgetType $type)
{
return view('admin.widgets.orbitSlider.new', ['type' => $type]);
$widget = new Widget();
// create default object with settings
$settings = new \stdClass();
self::prepareSettings($settings);
return view('admin.widgets.orbitSlider.new', [
'type' => $type,
'widget' => $widget,
'availableColumns' => self::getAvailableColumns()
]);
}
/**
@@ -51,6 +111,13 @@ class OrbitSlider implements WidgetRenderer
{
$settings = json_decode($widget->settings);
return view('admin.widgets.orbitSlider.edit', ['widget' => $widget, 'settings' => $settings]);
// create default object with settings
self::prepareSettings($settings);
return view('admin.widgets.orbitSlider.edit', [
'widget' => $widget,
'settings' => $settings,
'availableColumns' => self::getAvailableColumns()
]);
}
}
+6 -1
View File
@@ -5,11 +5,16 @@ return [
'name' => 'Slider name',
'description' => 'Slider description',
'containerClass' => 'Extra HTML class for slider',
'slideContainerClass' => 'Extra HTML class for each slide',
'createNew' => 'Create new',
'new' => 'Create new orbit slider',
'edit' => 'Edit slider :name',
'editExisting' => 'Save',
'preview' => 'Slider preview',
'upload' => 'Add photos into slider',
'code' => 'Some extra HTML/JS code for slider'
'code' => 'Some extra HTML/JS code for slider',
'showInFullscreen' => 'Show as fullscreen',
'fullscreen' => 'Display slider in fullscreen',
'imagesPerSlide' => 'Images per slide',
'extraSettings' => 'Extra settings'
];
@@ -7,7 +7,7 @@
<div class="row">
<div class="column large-8">
@include('admin.widgets.orbitSlider.editForm')
@include('admin.widgets.orbitSlider.form')
</div>
<div class="column large-4">
@@ -17,7 +17,8 @@
<label>
@lang('widgets/orbitSlider.name')
<input type="text" name="name" value="{{$widget->name}}" placeholder="@lang('widgets/orbitSlider.name')" />
<input type="text" name="name" value="{{old('name', $widget->name)}}"
placeholder="@lang('widgets/orbitSlider.name')" />
@if (isset($errors) && $errors->has('name'))
<div class="callout alert">
@@ -39,11 +40,26 @@
@endif
</label>
<label>
@lang('widgets/orbitSlider.imagesPerSlide')
<select name="imagePerSlide">
@foreach($availableColumns as $value => $name)
<option value="{{$value}}"
@if (old('imagesPerSlide', $settings->imagesPerSlide) == $value) selected="selected" @endif>
{{$name}}
</option>
@endforeach
</select>
</label>
<h4>@lang('widgets/orbitSlider.extraSettings')</h4>
<label>
@lang('widgets/orbitSlider.containerClass')
<input type="text" name="containerClass" placeholder="@lang('widgets/orbitSlider.containerClass')"
value="{{$settings->sliderClass}}" />
value="{{old('sliderClass', $settings->sliderClass)}}" />
@if (isset($errors) && $errors->has('containerClass'))
<div class="callout alert">
@@ -52,6 +68,19 @@
@endif
</label>
<label>
@lang('widgets/orbitSlider.slideContainerClass')
<input type="text" name="slideContainerClass" placeholder="@lang('widgets/orbitSlider.slideContainerClass')"
value="{{old('slideContainerClass', $settings->slideContainerClass)}}" />
@if (isset($errors) && $errors->has('slideContainerClass'))
<div class="callout alert">
{{ $errors->first('description') }}
</div>
@endif
</label>
<label>
@lang('widgets/orbitSlider.code')
@@ -64,10 +93,12 @@
@endif
</label>
@if($settings->directoryId)
<div class="row column text-center">
<a href="{{route('upload.overview', ['id' => $settings->directoryId])}}"
class="button expanded large success">@lang('widgets/orbitSlider.upload')</a>
</div>
@endif
<button type="submit" class="button success">@lang('widgets/orbitSlider.editExisting')</button>
@@ -5,6 +5,6 @@
@section('content')
<h1>@lang('widgets/orbitSlider.new')</h1>
@include('admin.widgets.orbitSlider.newForm')
@include('admin.widgets.orbitSlider.form')
@stop
@@ -1,69 +0,0 @@
@if (!isset($hideMessages))
@if (session('success'))
<div class="callout success">
{{ session('success') }}
</div>
@endif
@if (session('error'))
<div class="callout alert">
{{ session('error') }}
</div>
@endif
@endif
<form action="{{route('widgets.postNew', ['type' => $type])}}" method="POST">
{!! csrf_field() !!}
<label>
@lang('widgets/orbitSlider.name')
<input type="text" name="name" value="{{old("name")}}" placeholder="@lang('widgets/orbitSlider.name')" />
@if (isset($errors) && $errors->has('name'))
<div class="callout alert">
{{ $errors->first('name') }}
</div>
@endif
</label>
<label>
@lang('widgets/orbitSlider.description')
<input type="text" name="description" placeholder="@lang('widgets/orbitSlider.description')"
value="{{old("description")}}" />
@if (isset($errors) && $errors->has('description'))
<div class="callout alert">
{{ $errors->first('description') }}
</div>
@endif
</label>
<label>
@lang('widgets/orbitSlider.containerClass')
<input type="text" name="containerClass" placeholder="@lang('widgets/orbitSlider.containerClass')"
value="{{old("containerClass")}}" />
@if (isset($errors) && $errors->has('containerClass'))
<div class="callout alert">
{{ $errors->first('description') }}
</div>
@endif
</label>
<label>
@lang('widgets/orbitSlider.code')
<textarea rows="4" name="code" placeholder="@lang('widgets/orbitSlider.code')">{{old('code')}}</textarea>
@if (isset($errors) && $errors->has('code'))
<div class="callout alert">
{{ $errors->first('code') }}
</div>
@endif
</label>
<button type="submit" class="button success">@lang('widgets/orbitSlider.createNew')</button>
</form>
@@ -1,19 +1,40 @@
<div class="orbit header {{$settings->sliderClass}}" role="region" data-orbit>
<div class="orbit {{$settings->sliderClass}}" role="region" data-orbit>
<ul class="orbit-container">
<button class="orbit-previous" aria-label="previous"><span class="show-for-sr">Previous Slide</span><i
class="fa fa-fw fa-2x fa-chevron-left"></i></button>
<button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i
class="fa fa-fw fa-2x fa-chevron-right"></i></button>
<button class="orbit-previous" aria-label="previous">
<span class="show-for-sr">Previous Slide</span>
<i class="fa fa-fw fa-2x fa-chevron-left"></i>
</button>
<button class="orbit-next" aria-label="next">
<span class="show-for-sr">Next Slide</span>
<i class="fa fa-fw fa-2x fa-chevron-right"></i>
</button>
@if ($settings->imagePerSlide == 'fullscreen')
@foreach($images as $i => $image)
@include('widgets.orbitSlider.image', ['image' => $image, 'order' => $i])
<li class="orbit-slide {{$settings->slideContainerClass}} @if($i == 0)is-active @endif">
<h2>{{$image->name}}</h2>
<h3>{{$image->description}}</h3>
<div class="img"
style="background-image: url({{config('app.upload_url')}}/{{$image->filename}})"></div>
</li>
@endforeach
@else
@for($i = 0; $i < $slidesCount; $i++)
<li class="orbit-slide row {{$settings->slideContainerClass}} @if($i == 0)is-active @endif">
@for ($j = 0; $j < $settings->imagePerSlide; $j++)
<div class="column medium-{{$gridNumber}}">
<img src="{{config('app.upload_url')}}/{{$images[$j]->filename}}" />
</div>
@endfor
</li>
@endfor
@endif
</ul>
<nav class="orbit-bullets">
@foreach($images as $i => $image)
@for($i = 0; $i < $slidesCount; $i++)
<button @if($i == 0) class="is-active" @endif data-slide="{{$i}}"></button>
@endforeach
@endfor
</nav>
{!! $settings->code !!}
@@ -1,5 +0,0 @@
<li class="orbit-slide @if($order == 0)is-active @endif">
<h2>{{$image->name}}</h2>
<h3>{{$image->description}}</h3>
<div class="img" style="background-image: url({{config('app.upload_url')}}/{{$image->filename}})"></div>
</li>