From: Vincent Vanwaelscappel <vincent@cubedesigners.com>
Date: Mon, 13 Jun 2022 17:32:35 +0000 (+0200)
Subject: wip #4210 @1.5
X-Git-Url: http://git.cubedesigners.com/?a=commitdiff_plain;h=017f439018a06a3ad8db598c8f909def5179c5dc;p=fluidbook-toolbox.git

wip #4210 @1.5
---

diff --git a/app/Fields/FluidbookTheme.php b/app/Fields/FluidbookTheme.php
index 368f41ca8..c4f0f48b1 100644
--- a/app/Fields/FluidbookTheme.php
+++ b/app/Fields/FluidbookTheme.php
@@ -8,6 +8,9 @@ use Cubist\Backpack\Magic\Fields\SelectFromModel;
 
 class FluidbookTheme extends SelectFromModel
 {
+    protected $_adminType = 'fluidbook_theme_selector';
+    protected $_viewNamespace='fields';
+
     public function __construct($attributes)
     {
         $attributes['optionsmodel'] = \App\Models\FluidbookTheme::class;
diff --git a/app/Models/FluidbookPublication.php b/app/Models/FluidbookPublication.php
index dfdd529a7..b94b66a00 100644
--- a/app/Models/FluidbookPublication.php
+++ b/app/Models/FluidbookPublication.php
@@ -55,8 +55,8 @@ class FluidbookPublication extends ToolboxModel
         $this->addField('section_composition', FormBigSection::class, __('Composition'));
         $this->addField('page_numbers', Textarea::class, __('Numérotation'));
 
-        $this->addField('section_theme', FormBigSection::class, __('Thème'));
-        $this->addField('theme', \App\Fields\FluidbookTheme::class);
+        $this->addField('section_theme', FormBigSection::class, __('Thème graphique'));
+        $this->addField('theme', \App\Fields\FluidbookTheme::class,__('Thème'));
 
         $this->addField('section_locale', FormBigSection::class, __('Langue'));
         $this->addField('locale', FluidbookLocale::class, __('Langue principale'), ['default' => 'fr', 'allows_null' => false, 'filter' => true, 'filter_label' => 'Langue', 'column' => true, 'column_label' => '<i class="la la-language"></i>']);
diff --git a/app/Models/FluidbookTheme.php b/app/Models/FluidbookTheme.php
index f44db8912..c22d5867d 100644
--- a/app/Models/FluidbookTheme.php
+++ b/app/Models/FluidbookTheme.php
@@ -744,6 +744,14 @@ class FluidbookTheme extends ToolboxModel
 
     public function getPreviewURL($params = [], $page = 2)
     {
+        return self::getThemePreviewURL($this->getIdValue(), $params, $page);
+    }
+
+    public static function getThemePreviewURL($id, $params = [], $page = 2)
+    {
+        $defaultParams = ['shortLoading' => '1'];
+        $params = array_merge($defaultParams, $params);
+
         if (count($params) > 0) {
             $g = [];
             foreach ($params as $k => $v) {
@@ -753,7 +761,7 @@ class FluidbookTheme extends ToolboxModel
         } else {
             $get = '';
         }
-        return 'https://workshop.fluidbook.com/viewerh/20098-' . $this->getIdValue() . '_f2e0452eed6dba9878016ce5603fdc54/' . $get . '#/page/' . $page;
+        return 'https://workshop.fluidbook.com/viewerh/20098-' . $id . '_f2e0452eed6dba9878016ce5603fdc54/' . $get . '#/page/' . $page;
     }
 
 
diff --git a/resources/views/fields/fluidbook_theme_selector.blade.php b/resources/views/fields/fluidbook_theme_selector.blade.php
new file mode 100644
index 000000000..a8943759b
--- /dev/null
+++ b/resources/views/fields/fluidbook_theme_selector.blade.php
@@ -0,0 +1,86 @@
+@if (!isset($seenThemeSelector))
+    @php $seenThemeSelector=true;@endphp
+    @push('crud_fields_scripts')
+        <script>
+            var selector = '.select2_from_array[name="{{$field['name']}}"]';
+            $(function () {
+                $(document).on('change', selector, function () {
+                    updateThemeSelector();
+                })
+                $(window).on('resize', resizeThemeSelector);
+                updateThemeSelector();
+                resizeThemeSelector();
+
+                function resizeThemeSelector() {
+                    var ifr = $('.themeSelector iframe');
+                    var ih = ifr.outerWidth() * 0.62;
+                    ifr.css('height', ih);
+                    $('.themeSelector .preview').css('max-height', (ih / 2) + 10);
+                }
+            });
+
+
+            function updateThemeSelector() {
+                var themeID = $(selector).val();
+                var iframe = $('.themeSelector .preview iframe');
+                $(iframe).attr('src', $(iframe).data('url').replace(/\$id/, themeID));
+                $(".themeSelector .actions a").each(function () {
+                    $(this).attr('href', $(this).data('url').replace(/\$id/, themeID));
+                });
+            }
+
+        </script>
+    @endpush
+    @push('crud_fields_styles')
+        <style>
+            .themeSelector {
+                padding: 10px 18px 0;
+                width: 100%;
+                white-space: nowrap;
+            }
+
+            .themeSelector .preview {
+                width: 70%;
+                display: inline-block;
+                overflow: hidden;
+            }
+
+            .themeSelector .preview iframe {
+                width: 200%;
+                border: 0;
+                border-radius: 6px;
+                transform: scale(0.5);
+                transform-origin: 0 0;
+            }
+
+            .themeSelector .actions {
+                display: inline-block;
+                width: 30%;
+                vertical-align: top;
+                padding: 0 0 0 20px;
+            }
+
+            .themeSelector .actions a {
+                display: block;
+                width: 100%;
+                text-align: left;
+                margin-bottom: 10px;
+            }
+        </style>
+    @endpush
+@endif
+@include('cubist_back::fields.select2_from_array')
+<div class="themeSelector">
+    <div class="preview">
+        <iframe
+            data-url="{{\App\Models\FluidbookTheme::getThemePreviewURL('$id',['widget'=>'1','action'=>'fullscreen','theme'=>''],0)}}"
+            id="themePreviewIframe" src="" frameborder="0" allowfullscreen></iframe>
+    </div>
+    <div class="actions">
+        <a data-url="{{backpack_url('fluidbook-theme/$id/clone-edit')}}" class="btn btn-sm btn-secondary"><i
+                class="la la-clone"></i> {{__('Dupliquer et éditer')}}</a>
+        <a data-url="{{backpack_url('fluidbook-theme/$id/edit')}}" class="btn btn-sm btn-success"><i
+                class="la la-edit"></i> {{__('Éditer')}}
+        </a>
+    </div>
+</div>