← All changes | Layouts/Slideshow.php +138 -37 2.41 → 3.36 View file →

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