Merge pull request #383 from berta-cms/enh-twig-background-gallery-ed…

…itor Twig: background gallery editor
berta-cms · May 11, 2020 · eb1290b · eb1290b
2 parents 5f2f348 + 5c895e7
commit eb1290b
Show file tree

Hide file tree

Showing 10 changed files with 275 additions and 173 deletions.
diff --git a/_api_app/app/Http/routes.php b/_api_app/app/Http/routes.php
@@ -63,6 +63,7 @@
     $app->get('sections/render-head[/{site}]', 'SiteSectionsController@renderHead');
     $app->get('sections/render-menu[/{site}]', 'SiteSectionsController@renderMenu');
     $app->get('sections/render-background-gallery[/{siteSlug}]', 'SiteSectionsController@renderBackgroundGallery');
+    $app->get('sections/render-background-gallery-editor[/{siteSlug}]', 'SiteSectionsController@renderBackgroundGalleryEditor');
     $app->get('sections/render-grid-view[/{siteSlug}]', 'SiteSectionsController@renderGridView');
     $app->get('sections/render-additional-text[/{site}]', 'SiteSectionsController@renderAdditionalText');
     $app->get('sections/render-additional-footer-text[/{site}]', 'SiteSectionsController@renderAdditionalFooterText');

diff --git a/_api_app/app/Sites/Sections/Entries/Galleries/EntryGalleryEditorRenderService.php b/_api_app/app/Sites/Sections/Entries/Galleries/EntryGalleryEditorRenderService.php
@@ -8,7 +8,7 @@ class EntryGalleryEditorRenderService
 {
     private function getGalleryItems($entry, $storageService, $basePath)
     {
-        $files = $entry['mediaCacheData']['file'];
+        $files = !empty($entry['mediaCacheData']['file']) ? $entry['mediaCacheData']['file'] : [];
         $items = array_map(function ($item, $index) use ($entry, $storageService, $basePath) {
             $thumbnail = '';
             $imagePath = '';
@@ -26,7 +26,6 @@ private function getGalleryItems($entry, $storageService, $basePath)
             $autoplay = !empty($item['@attributes']['autoplay']) ? $item['@attributes']['autoplay'] : '0';
 
             return array_merge($item['@attributes'], [
-                'index' => $index,
                 'imagePath' => $imagePath,
                 'thumbnail' => $thumbnail,
                 'caption' => $item['@value'],

diff --git a/_api_app/app/Sites/Sections/SectionBackgroundGalleryEditorRenderService.php b/_api_app/app/Sites/Sections/SectionBackgroundGalleryEditorRenderService.php
@@ -0,0 +1,103 @@
+<?php
+
+namespace App\Sites\Sections;
+
+use App\Shared\ImageHelpers;
+
+class SectionBackgroundGalleryEditorRenderService
+{
+    private function getGalleryItems($currentSection, $storageService, $basePath)
+    {
+        $files = !empty($currentSection['mediaCacheData']['file']) ? $currentSection['mediaCacheData']['file'] : [];
+
+        $items = array_map(function ($item, $index) use ($currentSection, $storageService, $basePath) {
+            $imagePath = "{$storageService->MEDIA_URL}/{$currentSection['mediafolder']}/{$item['@attributes']['src']}";
+            $thumbnail = ImageHelpers::getThumbnail($imagePath);
+
+            return array_merge($item['@attributes'], [
+                'thumbnail' => $thumbnail,
+                'caption' => $item['@value'],
+                'captionDataPath' => "{$basePath}/mediaCacheData/file/{$index}/@value"
+            ]);
+        }, $files, array_keys($files));
+
+        return $items;
+    }
+
+    private function getViewData(
+        $siteSlug,
+        $currentSection,
+        $currentSectionIndex,
+        $storageService
+    ) {
+        $basePath = "{$siteSlug}/section/{$currentSectionIndex}";
+        $hideNavigation = !empty($currentSection['mediaCacheData']['@attributes']['hide_navigation']) ? $currentSection['mediaCacheData']['@attributes']['hide_navigation'] : 'no';
+        $animation = !empty($currentSection['mediaCacheData']['@attributes']['animation']) ? $currentSection['mediaCacheData']['@attributes']['animation'] : 'enabled';
+        $fadeContent = !empty($currentSection['mediaCacheData']['@attributes']['fade_content']) ? $currentSection['mediaCacheData']['@attributes']['fade_content'] : 'disabled';
+        $backgroundColor = !empty($currentSection['sectionBgColor']) ? $currentSection['sectionBgColor'] : 'none';
+        $captionColor = !empty($currentSection['mediaCacheData']['@attributes']['caption_color']) ? $currentSection['mediaCacheData']['@attributes']['caption_color'] : 'none';
+        $captionBackgroundColor = 'none';
+        if (!empty($currentSection['mediaCacheData']['@attributes']['caption_bg_color'])) {
+            $captionBackgroundColor = '#';
+            foreach (explode(',', $currentSection['mediaCacheData']['@attributes']['caption_bg_color']) as $val) {
+                $captionBackgroundColor .= dechex($val);
+            }
+        }
+        $imageSize = !empty($currentSection['mediaCacheData']['@attributes']['image_size']) ? $currentSection['mediaCacheData']['@attributes']['image_size'] : 'medium';
+        $autoPlay = !empty($currentSection['mediaCacheData']['@attributes']['autoplay']) ? $currentSection['mediaCacheData']['@attributes']['autoplay'] : '0';
+
+        $dataPath = [
+            'addMedia' => $basePath,
+            'hideNavigation' => "{$basePath}/mediaCacheData/@attributes/hide_navigation",
+            'animation' => "{$basePath}/mediaCacheData/@attributes/animation",
+            'fadeContent' => "{$basePath}/mediaCacheData/@attributes/fade_content",
+            'backgroundColor' => "{$basePath}/sectionBgColor",
+            'captionColor' => "{$basePath}/mediaCacheData/@attributes/caption_color",
+            'captionBackgroundColor' => "{$basePath}/mediaCacheData/@attributes/caption_bg_color",
+            'imageSize' => "{$basePath}/mediaCacheData/@attributes/image_size",
+            'autoPlay' => "{$basePath}/mediaCacheData/@attributes/autoplay"
+        ];
+
+        $items = $this->getGalleryItems($currentSection, $storageService, $basePath);
+
+        return [
+            'dataPath' => $dataPath,
+            'hideNavigation' => $hideNavigation,
+            'animation' => $animation,
+            'fadeContent' => $fadeContent,
+            'backgroundColor' => $backgroundColor,
+            'captionColor' => $captionColor,
+            'captionBackgroundColor' => $captionBackgroundColor,
+            'imageSize' => $imageSize,
+            'autoPlay' => $autoPlay,
+            'items' => $items
+        ];
+    }
+
+    public function render(
+        $siteSlug,
+        $sectionSlug,
+        $sections,
+        $storageService
+    ) {
+        $currentSection = null;
+
+        if (!empty($sections)) {
+            $currentSectionIndex = array_search($sectionSlug, array_column($sections, 'name'));
+            $currentSection = $sections[$currentSectionIndex];
+        }
+
+        if (!$currentSection) {
+            return '';
+        }
+
+        $data = $this->getViewData(
+            $siteSlug,
+            $currentSection,
+            $currentSectionIndex,
+            $storageService
+        );
+
+        return view('Sites/Sections/sectionBackgroundGalleryEditor', $data);
+    }
+}
diff --git a/_api_app/app/Sites/Sections/SiteSectionsController.php b/_api_app/app/Sites/Sections/SiteSectionsController.php
@@ -14,6 +14,7 @@
 use App\Sites\Sections\SiteSectionsDataService;
 use App\Sites\Sections\SectionsMenuRenderService;
 use App\Sites\Sections\SectionBackgroundGalleryRenderService;
+use App\Sites\Sections\SectionBackgroundGalleryEditorRenderService;
 use App\Sites\Sections\GridViewRenderService;
 use App\Sites\Sections\SectionFooterRenderService;
 use App\Sites\Sections\SectionHeadRenderService;
@@ -307,6 +308,23 @@ public function renderBackgroundGallery($siteSlug = '', Request $request)
         );
     }
 
+    public function renderBackgroundGalleryEditor($siteSlug = '', Request $request)
+    {
+        $sectionsDS = new SiteSectionsDataService($siteSlug);
+        $sections = $sectionsDS->getState();
+        $sectionSlug = $request->get('section');
+        $storageService = new Storage($siteSlug);
+
+        $backgroundGalleryEditorRS = new SectionBackgroundGalleryEditorRenderService();
+
+        return $backgroundGalleryEditorRS->render(
+            $siteSlug,
+            $sectionSlug,
+            $sections,
+            $storageService
+        );
+    }
+
     public function renderGridView($siteSlug = '', Request $request)
     {
         $siteSettingsDS = new SiteSettingsDataService($siteSlug);

diff --git a/_api_app/app/Sites/Sections/SiteSectionsDataService.php b/_api_app/app/Sites/Sections/SiteSectionsDataService.php
@@ -568,7 +568,7 @@ public function backgroundGalleryOrder($name, $new_files)
         if ($section_order !== false) {
             $section = &$sections['section'][$section_order];
             $section['mediaCacheData'] = isset($section['mediaCacheData']) ? $section['mediaCacheData'] : ['file' => []];
-            $files = $this->asList($section['mediaCacheData']['file']);
+            $files = isset($section['mediaCacheData']['file']) ? $this->asList($section['mediaCacheData']['file']) : [];
 
             $reordered = [];
 
@@ -634,7 +634,8 @@ public function backgroundGalleryUpload($path, $file)
             $section['mediafolder'] = $mediaDirName;
         }
 
-        if (!isset($section['mediaCacheData'])) {
+        if (!isset($section['mediaCacheData']['file'])) {
+            unset($section['mediaCacheData']['@value']);
             $section['mediaCacheData']['file'] = [];
         }
 

diff --git a/_api_app/app/Sites/Sections/sectionBackgroundGalleryEditor.twig b/_api_app/app/Sites/Sections/sectionBackgroundGalleryEditor.twig
@@ -0,0 +1,120 @@
+<div id="xBgEditorPanel" class="xPanel">
+  <div class="xBgEditorTabs">
+    <div class="xBgMediaTab tab">
+      <a href="#" class="xParams-media selected" title="add images and videos">
+        <span>media</span>
+      </a>
+    </div>
+    <div class="xBgSettingsTab tab">
+      <a href="#" class="xParams-settings" title="background settings">
+        <span>background settings</span>
+      </a>
+    </div>
+    <div class="xBgSlideshowSettingsTab tab">
+      <a href="#" class="xParams-slideshow_settings" title="slideshow settings">
+        <span>slideshow settings</span>
+      </a>
+    </div>
+    <div class="xBgImgSizeSettingsTab tab">
+      <a href="#" class="xParams-image_size_settings" title="image size">
+        <span>image size</span>
+      </a>
+    </div>
+    <a class="xBgEditorCloseLink" href="#" title="close background editor">
+      <span>X</span>
+    </a>
+  </div>
+  <div class="xBgAddMedia">
+    <input type="file" name="Filedata" class="xHidden" multiple>
+    <a class="xEntryAddImagesLink" href="/_api/v1/sites/sections/backgrounds" data-path="{{ dataPath.addMedia }}">+ add media</a>
+  </div>
+  <div class="xBgSettings xHidden">
+    <div class="xBgNavigationSettings">
+      <div class="caption">hide navigation arrows</div>
+      <div class="xBgNavigation xFloatLeft xEditableSelectRC xCommand-SET_BG_NAVIGATION" x_options="no||yes" data-path="{{ dataPath.hideNavigation }}">
+        {{ hideNavigation }}
+      </div>
+      <div class="clear"></div>
+    </div>
+    <div class="xBgAnimationSettings">
+      <div class="caption">animation</div>
+      <div class="xBgAnimation xEditableSelectRC xCommand-SET_BG_ANIMATION" x_options="enabled||disabled" data-path="{{ dataPath.animation }}">
+        {{ animation }}
+      </div>
+      <div class="clear"></div>
+    </div>
+    <div class="xBgFadingSettings">
+      <div class="caption">fade content</div>
+      <div class="xBgFading xEditableSelectRC xCommand-SET_BG_FADE_CONTENT" x_options="enabled||disabled" data-path="{{ dataPath.fadeContent }}">
+        {{ fadeContent }}
+      </div>
+      <div class="clear"></div>
+    </div>
+    <div class="xBgColorSettings">
+      <div class="caption">background color</div>
+      <div class="xBgColor xEditableColor xProperty-sectionBgColor xNoHTMLEntities xCSSUnits-0 xRequired-1" data-path="{{ dataPath.backgroundColor }}">
+        {{ backgroundColor }}
+      </div>
+      <div class="xBgColorReset xReset xCommand-sectionBgColorReset xParams-sectionBgColor" data-path="{{ dataPath.backgroundColor }}">
+        <a href="#">
+          <span>remove</span>
+        </a>
+      </div>
+      <div class="clear"></div>
+      <div class="caption">caption text color</div>
+      <div class="xBgColor xEditableColor xCommand-SET_BG_CAPTION_COLOR xNoHTMLEntities xCSSUnits-0 xRequired-1" data-path="{{ dataPath.captionColor }}">
+        {{ captionColor }}
+      </div>
+      <div class="xBgColorReset xReset xCommand-RESET_BG_CAPTION_COLOR xParams-SET_BG_CAPTION_COLOR" data-path="{{ dataPath.captionColor }}">
+        <a href="#">
+          <span>remove</span>
+        </a>
+      </div>
+      <div class="clear"></div>
+      <div class="caption">caption background color</div>
+      <div class="xBgColor xEditableColor xCommand-SET_BG_CAPTION_BACK_COLOR xNoHTMLEntities xCSSUnits-0 xRequired-1" data-path="{{ dataPath.captionBackgroundColor }}">
+        {{ captionBackgroundColor }}
+      </div>
+      <div class="xBgColorReset xReset xCommand-RESET_BG_CAPTION_BACK_COLOR xParams-SET_BG_CAPTION_BACK_COLOR" data-path="{{ dataPath.captionBackgroundColor }}">
+        <a href="#">
+          <span>remove</span>
+        </a>
+      </div>
+      <div class="clear"></div>
+    </div>
+  </div>
+  <div class="xBgImgSizeSettings xHidden">
+    <div class="caption">background image size</div>
+    <div class="xBgImgSize xEditableSelectRC xCommand-SET_BG_IMG_SIZE" x_options="large||medium||small" data-path="{{ dataPath.imageSize }}">
+      {{ imageSize }}
+    </div>
+    <div class="clear"></div>
+  </div>
+  <div class="xBgSlideshowSettings xHidden">
+    <div class="caption">autoplay seconds</div>
+    <div class="xBgAutoPlay xEditableRC xCommand-SET_AUTOPLAY xCaption-0" title="{{ autoPlay }}" data-path="{{ dataPath.autoPlay }}">
+      {{ autoPlay }}
+    </div>
+    <div class="clear"></div>
+  </div>
+  <div class="images">
+    <ul>
+      {% for item in items %}
+        <li class="image" filename="{{ item.src }}">
+          <img class="img" src="{{ item.thumbnail }}">
+          <span class="grabHandle xMAlign-container">
+            <span class="xMAlign-outer">
+              <a class="xMAlign-inner" title="click and drag to move">
+                <span></span>
+              </a>
+            </span>
+          </span>
+          <a href="#" class="delete"></a>
+          <div class="xEGEImageCaption xEditableMCESimple xProperty-galleryImageCaption xCaption-caption xParam-{{ item.src }}" data-path="{{ item.captionDataPath }}">
+            {{ item.caption|raw }}
+          </div>
+        </li>
+      {% endfor %}
+    </ul>
+  </div>
+</div>