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

app/Widgets/OrbitSlider/OrbitSlider.php

@@ -79,9 +79,11 @@ class OrbitSlider implements PublicWidget
         $directory->save();
 
         $settings = [
-            'directoryId' => $directory->id,
+            'directoryId'         => $directory->id,
-            'sliderClass' => isset($request->containerClass) ? $request->containerClass : '',
+            'imagePerSlide'      => $request->imagePerSlide,
-            'code'        => $request->code
+            'sliderClass'         => isset($request->containerClass) ? $request->containerClass : '',
+            'slideContainerClass' => isset($request->slideContainerClass) ? $request->slideContainerClass : '',
+            'code'                => $request->code
         ];
 
         $widget->settings = json_encode($settings);

app/Widgets/OrbitSlider/Presenters/OrbitSlider.php

@@ -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()
+        ]);
     }
 }

resources/lang/en/widgets/orbitSlider.php

@@ -1,15 +1,20 @@
 <?php
 return [
-    'widgetName'        => 'Orbit slider',
+    'widgetName'          => 'Orbit slider',
-    'widgetDescription' => 'Slider for images. Uses Foundation framework.',
+    'widgetDescription'   => 'Slider for images. Uses Foundation framework.',
-    'name'              => 'Slider name',
+    'name'                => 'Slider name',
-    'description'       => 'Slider description',
+    'description'         => 'Slider description',
-    'containerClass'    => 'Extra HTML class for slider',
+    'containerClass'      => 'Extra HTML class for slider',
-    'createNew'         => 'Create new',
+    'slideContainerClass' => 'Extra HTML class for each slide',
-    'new'               => 'Create new orbit slider',
+    'createNew'           => 'Create new',
-    'edit'              => 'Edit slider :name',
+    'new'                 => 'Create new orbit slider',
-    'editExisting'      => 'Save',
+    'edit'                => 'Edit slider :name',
-    'preview'           => 'Slider preview',
+    'editExisting'        => 'Save',
-    'upload'            => 'Add photos into slider',
+    'preview'             => 'Slider preview',
-    'code'              => 'Some extra HTML/JS code for slider'
+    'upload'              => 'Add photos into 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'
 ];

resources/views/admin/widgets/orbitSlider/edit.blade.php

@@ -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">

resources/views/admin/widgets/orbitSlider/form.blade.php

@@ -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>
 
-    <div class="row column text-center">
+    @if($settings->directoryId)
-        <a href="{{route('upload.overview', ['id' => $settings->directoryId])}}"
+        <div class="row column text-center">
-           class="button expanded large success">@lang('widgets/orbitSlider.upload')</a>
+            <a href="{{route('upload.overview', ['id' => $settings->directoryId])}}"
-    </div>
+               class="button expanded large success">@lang('widgets/orbitSlider.upload')</a>
+        </div>
+    @endif
 
 
     <button type="submit" class="button success">@lang('widgets/orbitSlider.editExisting')</button>

resources/views/admin/widgets/orbitSlider/new.blade.php

@@ -5,6 +5,6 @@
 @section('content')
     <h1>@lang('widgets/orbitSlider.new')</h1>
 
-    @include('admin.widgets.orbitSlider.newForm')
+    @include('admin.widgets.orbitSlider.form')
 @stop
 

resources/views/admin/widgets/orbitSlider/newForm.blade.php

@@ -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>

resources/views/widgets/orbitSlider/element.blade.php

@@ -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
+        <button class="orbit-previous" aria-label="previous">
-                    class="fa fa-fw fa-2x fa-chevron-left"></i></button>
+            <span class="show-for-sr">Previous Slide</span>
-        <button class="orbit-next" aria-label="next"><span class="show-for-sr">Next Slide</span><i
+            <i class="fa fa-fw fa-2x fa-chevron-left"></i>
-                    class="fa fa-fw fa-2x fa-chevron-right"></i></button>
+        </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>
 
-        @foreach($images as $i => $image)
+        @if ($settings->imagePerSlide == 'fullscreen')
-            @include('widgets.orbitSlider.image', ['image' => $image, 'order' => $i])
+            @foreach($images as $i => $image)
-        @endforeach
+                <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 !!}

resources/views/widgets/orbitSlider/image.blade.php

@@ -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>