| 1 |
<?php |
| 2 |
|
| 3 |
namespace Photonic_Plugin\Layouts; |
| 4 |
|
| 5 |
use Photonic_Plugin\Components\Photo_List; |
| 6 |
use Photonic_Plugin\Platforms\Base; |
| 7 |
|
| 8 |
require_once 'Level_One_Gallery.php'; |
| 9 |
|
| 10 |
/** |
| 11 |
* Generates the slideshow layout for level 1 objects. Level 2 cannot be displayed as slideshows. |
| 12 |
*/ |
| 13 |
class Slideshow extends Core_Layout implements Level_One_Gallery { |
| 14 |
protected function __construct() { |
| 15 |
global $photonic_slideshow_interval; |
| 16 |
|
| 17 |
$this->common_parameters = [ |
| 18 |
'fx' => 'slide', // Splide effects: fade and slide |
| 19 |
'timeout' => !empty($photonic_slideshow_interval) && is_numeric($photonic_slideshow_interval) ? $photonic_slideshow_interval : 5000, // Time between slides in ms |
| 20 |
'speed' => 1000, // Time for each transition |
| 21 |
'pause' => true, // Pause on hover |
| 22 |
'strip-style' => 'thumbs', |
| 23 |
'controls' => 'show', |
| 24 |
]; |
| 25 |
parent::__construct(); |
| 26 |
} |
| 27 |
|
| 28 |
public function generate_level_1_gallery(Photo_List $photo_list, array $short_code, Base $module): string { |
| 29 |
$photos = $photo_list->photos; |
| 30 |
if (!is_array($photos) || empty($photos)) { |
| 31 |
return ''; |
| 32 |
} |
| 33 |
|
| 34 |
$short_code = array_merge($this->common_parameters, $short_code); |
| 35 |
|
| 36 |
global $photonic_wp_slide_adjustment, $photonic_slideshow_interval; |
| 37 |
$data_attr = ''; |
| 38 |
foreach ($short_code as $key => $value) { |
| 39 |
if (in_array($key, ['speed', 'timeout', 'fx', 'pause', 'layout', 'strip-style', 'controls', 'columns'], true)) { |
| 40 |
$data_attr .= 'data-photonic-' . $key . '="' . esc_attr($value) . '" '; |
| 41 |
} |
| 42 |
} |
| 43 |
|
| 44 |
$style = esc_attr(empty($short_code['style']) ? (empty($short_code['layout']) ? '' : $short_code['layout']) : $short_code['style']); |
| 45 |
$title_position = esc_attr(empty($short_code['title_position']) ? $photo_list->title_position : $short_code['title_position']); |
| 46 |
|
| 47 |
global $photonic_slideshow_prevent_autostart; |
| 48 |
if ('wp' === $module->provider) { |
| 49 |
$pager_position = !empty($short_code['style']) ? $short_code['style'] : $short_code['layout']; |
| 50 |
} |
| 51 |
else { |
| 52 |
$pager_position = $short_code['layout']; |
| 53 |
} |
| 54 |
$pager_position = esc_attr($pager_position); |
| 55 |
|
| 56 |
$perPage = (empty($short_code['columns']) || 'auto' === $short_code['columns'] || !is_numeric($short_code['columns'])) ? 1 : $short_code['columns']; |
| 57 |
$splide_options = [ |
| 58 |
'type' => (!empty($short_code['fx']) && 'fade' === $short_code['fx']) ? 'fade' : 'loop', |
| 59 |
'perPage' => esc_attr($perPage), |
| 60 |
'autoplay' => !(isset($photonic_slideshow_prevent_autostart) && 'on' === $photonic_slideshow_prevent_autostart), |
| 61 |
'interval' => esc_attr((empty($short_code['timeout']) || !is_numeric($short_code['timeout'])) ? (empty($photonic_slideshow_interval) || !is_numeric($photonic_slideshow_interval) ? 5000 : $photonic_slideshow_interval) : $short_code['timeout']), |
| 62 |
'speed' => esc_attr((empty($short_code['speed']) || !is_numeric($short_code['speed'])) ? 1000 : $short_code['speed']), |
| 63 |
'drag' => true, |
| 64 |
'pauseOnHover' => !(0 === $short_code['pause'] || '0' === $short_code['pause']), |
| 65 |
'pagination' => ('strip-below' === $pager_position || 'strip-right' === $pager_position) && 'button' === $short_code['strip-style'], |
| 66 |
'slideFocus' => false, |
| 67 |
// 'updateOnMove' => true, |
| 68 |
'arrows' => empty($short_code['controls']) || 'hide' !== $short_code['controls'], |
| 69 |
// 'cover' => $photonic_wp_slide_adjustment !== 'side-white' && $photonic_wp_slide_adjustment !== 'adapt-height', |
| 70 |
// 'heightRatio' => ($photonic_wp_slide_adjustment !== 'side-white' && $photonic_wp_slide_adjustment !== 'adapt-height') ? 0.5 : 0, |
| 71 |
'direction' => 'ltr', |
| 72 |
'breakpoints' => [ |
| 73 |
480 => [ |
| 74 |
'perPage' => 1, |
| 75 |
] |
| 76 |
], |
| 77 |
]; |
| 78 |
|
| 79 |
$splide_options = esc_attr(wp_json_encode($splide_options)); |
| 80 |
$ret = ''; |
| 81 |
if ('strip-above' === $pager_position && 'thumbs' === $short_code['strip-style']) { |
| 82 |
// $ret .= $this->get_thumbnails($photos, $module); |
| 83 |
$ret .= $this->get_secondary_slider($photos, $module); |
| 84 |
} |
| 85 |
|
| 86 |
$ret .= "<div id='photonic-slideshow-{$module->provider}-{$module->gallery_index}' class='photonic-slideshow splide {$style} title-display-{$title_position} photonic-slideshow-" . esc_attr($photonic_wp_slide_adjustment) . "' data-splide='$splide_options'>\n"; |
| 87 |
|
| 88 |
$ret .= "\t<div class='splide__track'>\n"; |
| 89 |
// $ret .= "\t\t<ul class='photonic-slideshow-content splide__list' $data_attr>\n"; |
| 90 |
$ret .= "\t\t<ul class='photonic-slideshow-content splide__list'>\n"; |
| 91 |
|
| 92 |
foreach ($photos as $photo) { |
| 93 |
// $ret .= "\t\t\t<li class='photonic-slideshow-img splide__slide' data-thumb='{$photo->thumbnail}'>\n"; |
| 94 |
$ret .= "\t\t\t<li class='photonic-slideshow-img splide__slide'>\n"; |
| 95 |
$title = esc_attr(wp_kses_post($photo->title)); |
| 96 |
$alt = esc_attr(wp_kses_post($photo->alt_title)); |
| 97 |
$description = esc_attr(wp_kses_post($photo->description)); |
| 98 |
|
| 99 |
$titles = [ |
| 100 |
'title' => $title, |
| 101 |
'desc' => $description, |
| 102 |
'alt' => $alt, |
| 103 |
]; |
| 104 |
|
| 105 |
$title = $this->get_title($title, $titles, $short_code); |
| 106 |
/* if ('desc' === $short_code['caption'] || ('title-desc' === $short_code['caption'] && empty($title)) || ('desc-title' === $short_code['caption'] && !empty($description))) { |
| 107 |
$title = $description; |
| 108 |
} |
| 109 |
elseif (('desc-title' === $short_code['caption'] && empty($title)) || 'none' === $short_code['caption']) { |
| 110 |
$title = ''; |
| 111 |
}*/ |
| 112 |
|
| 113 |
$ret .= "\t\t\t\t<div class='splide__slide__container'>\n"; |
| 114 |
if (!isset($photo->video)) { |
| 115 |
if ('tooltip' === $title_position) { |
| 116 |
$tooltip = 'data-photonic-tooltip="' . $title . '" '; |
| 117 |
} |
| 118 |
else { |
| 119 |
$tooltip = ''; |
| 120 |
} |
| 121 |
$ret .= "\t\t\t\t<img src='" . esc_url($photo->main_image) . "' alt='{$alt}' title='" . (('regular' === $title_position || 'tooltip' === $title_position) ? $title : '') . "' $tooltip id='photonic-slideshow-{$module->provider}-{$module->gallery_index}-{$photo->id}' />\n"; |
| 122 |
} |
| 123 |
else { |
| 124 |
$ret .= "\t\t\t\t<video controls loop><source src='" . esc_url($photo->video) . "' type='video/mp4'><img src='" . esc_url($photo->main_image) . "' alt=''></video>"; |
| 125 |
} |
| 126 |
|
| 127 |
$shown_title = ''; |
| 128 |
if (in_array($title_position, ['below', 'hover-slideup-show', 'hover-slidedown-show', 'slideup-stick'], true) && !empty($title)) { |
| 129 |
$shown_title = "\t\t\t\t" . '<div class="photonic-title-info">' . "\n\t\t\t\t" . '<div class="photonic-photo-title photonic-title">' . wp_specialchars_decode($title, ENT_QUOTES) . '</div>' . "\n\t\t\t" . '</div>' . "\n"; |
| 130 |
} |
| 131 |
|
| 132 |
if (!empty($title)) { |
| 133 |
$ret .= $shown_title; |
| 134 |
} |
| 135 |
|
| 136 |
$ret .= "\t\t\t\t</div>\n"; // .splide__slide__container |
| 137 |
$ret .= "\t\t\t</li>\n"; // .splide__slide |
| 138 |
} |
| 139 |
$ret .= "\t\t</ul>\n"; // .splide__list |
| 140 |
$ret .= "\t</div><!-- splide__track -->\n"; |
| 141 |
|
| 142 |
$ret .= "</div><!-- .photonic-slideshow-->\n"; |
| 143 |
|
| 144 |
if (('strip-below' === $pager_position || 'strip-right' === $pager_position) && 'thumbs' === $short_code['strip-style']) { |
| 145 |
$ret .= $this->get_secondary_slider($photos, $module); |
| 146 |
} |
| 147 |
return $ret; |
| 148 |
} |
| 149 |
|
| 150 |
/** |
| 151 |
* @param array $photos |
| 152 |
* @param Base $module |
| 153 |
* @return string |
| 154 |
*/ |
| 155 |
private function get_secondary_slider(array $photos, Base $module): string { |
| 156 |
$thumb_options = [ |
| 157 |
'fixedWidth' => 100, |
| 158 |
'height' => 60, |
| 159 |
'gap' => 10, |
| 160 |
'cover' => true, |
| 161 |
'isNavigation' => true, |
| 162 |
'pagination' => false, |
| 163 |
'arrows' => false, |
| 164 |
// 'focus' => 'center', |
| 165 |
'breakpoints' => [ |
| 166 |
'600' => [ |
| 167 |
'fixedWidth' => 66, |
| 168 |
'height' => 40, |
| 169 |
], |
| 170 |
], |
| 171 |
]; |
| 172 |
$thumb_options = esc_attr(wp_json_encode($thumb_options)); |
| 173 |
|
| 174 |
$ret = "<div id='photonic-slideshow-{$module->provider}-{$module->gallery_index}-thumbs' class='photonic-slideshow-thumbs splide thumbnails js-thumbnails' data-splide='$thumb_options'>\n"; |
| 175 |
$ret .= "\t<div class='splide__track'>\n"; |
| 176 |
$ret .= "\t<ul class='splide__list'>\n"; |
| 177 |
foreach ($photos as $photo) { |
| 178 |
$ret .= "\t\t<li class='splide__slide' tabindex='0'>\n"; |
| 179 |
$ret .= "\t\t\t<img src='" . esc_url($photo->thumbnail) . "' alt=''>\n"; |
| 180 |
$ret .= "\t\t</li>\n"; |
| 181 |
} |
| 182 |
$ret .= "\t</ul>\n"; |
| 183 |
$ret .= "\t</div><!-- photonic-slideshow-thumbs -->\n"; |
| 184 |
$ret .= "</div>\n"; |
| 185 |
return $ret; |
| 186 |
} |
| 187 |
} |
| 188 |
|
