changed: added start/stop capabilities to slideshow

ColdTrick · Oct 30, 2023 · dcbfbe9 · dcbfbe9
1 parent c8d7c3e
commit dcbfbe9
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 8 deletions.
diff --git a/languages/en.php b/languages/en.php
@@ -39,6 +39,7 @@
 	'widgets:image_slideshow:orientation:help' => "If you change the orientation you will also need to check your slides",
 	'widgets:image_slideshow:orientation:landscape' => "Landscape",
 	'widgets:image_slideshow:orientation:portrait' => "Portrait",
+	'widgets:image_slideshow:autoplay' => "Auto Play Slideshow",
 
 	// twitter_search
 	'widgets:twitter_search:name' => "Twitter search",

diff --git a/views/default/widgets/image_slideshow/content.css b/views/default/widgets/image_slideshow/content.css
@@ -23,7 +23,7 @@
 	}
 
 	/* Next & previous buttons */
-	.slide-next, .slide-previous {
+	.slide-next, .slide-previous, .slide-startstop {
 		display: none;
 		cursor: pointer;
 		position: absolute;
@@ -37,6 +37,7 @@
 		transition: 0.6s ease;
 		border-radius: 0 3px 3px 0;
 		user-select: none;
+		line-height: 1rem;
 	}
 
 	/* Position the "next button" to the right */
@@ -45,13 +46,37 @@
 		border-radius: 3px 0 0 3px;
 	}
 
+	/* Position the "startstop button" in the center*/
+	.slide-startstop {
+		left: calc(50% - 1.5rem);
+		width: 3rem;
+		text-align: center;
+		border-radius: 3px;
+
+		.elgg-icon-play {
+			display: block;
+		}
+		.elgg-icon-pause {
+			display: none;
+		}
+	}
+
+	&.slideshow-autoplay {
+		.elgg-icon-play {
+			display: none;
+		}
+		.elgg-icon-pause {
+			display: block;
+		}
+	}
+
 	/* On hover, add a black background color with a little bit see-through */
-	.slide-previous:hover, .slide-next:hover {
+	.slide-previous:hover, .slide-next:hover, .slide-startstop:hover {
 		background-color: rgba(0,0,0,0.5);
 	}
 
 	&:hover {
-		.slide-next, .slide-previous {
+		.slide-next, .slide-previous, .slide-startstop {
 			display: block;
 		}
 	}

diff --git a/views/default/widgets/image_slideshow/content.js b/views/default/widgets/image_slideshow/content.js
@@ -13,10 +13,15 @@ define(['jquery'], function ($) {
 		this.$container.on('click', '.slide-previous', function() {
 			SlideShow.movePrevious();
 		});
+		this.$container.on('click', '.slide-startstop', function() {
+			SlideShow.startStop();
+		});
 
-		this.timeoutId = setTimeout(function() {
-			SlideShow.moveNext();
-		}, this.slideTimeout);
+		if (this.$container.hasClass('slideshow-autoplay')) {
+			this.timeoutId = setTimeout(function() {
+				SlideShow.moveNext();
+			}, this.slideTimeout);
+		}
 	}
 
 	SlideShow.prototype = {
@@ -27,7 +32,9 @@ define(['jquery'], function ($) {
 
 			this.$container.find('> .slide-fade').eq(index - 1).removeClass('hidden');
 
-			this.timeoutId = setTimeout(this.moveNext.bind(this), this.slideTimeout);
+			if (this.$container.hasClass('slideshow-autoplay')) {
+				this.timeoutId = setTimeout(this.moveNext.bind(this), this.slideTimeout);
+			}
 		},
 		moveNext: function() {
 			if (this.currentSlide >= this.totalSlides) {
@@ -46,6 +53,15 @@ define(['jquery'], function ($) {
 			}
 
 			this.showSlide(this.currentSlide);
+		},
+		startStop: function() {
+			this.$container.toggleClass('slideshow-autoplay');
+
+			if (this.$container.hasClass('slideshow-autoplay')) {
+				this.timeoutId = setTimeout(this.moveNext.bind(this), this.slideTimeout);
+			} else {
+				clearTimeout(this.timeoutId);
+			}
 		}
 	};
 

diff --git a/views/default/widgets/image_slideshow/content.php b/views/default/widgets/image_slideshow/content.php
@@ -51,11 +51,17 @@
 }
 
 $slides .= elgg_format_element('div', ['class' => 'slide-next'], elgg_view_icon('angle-right'));
+$slides .= elgg_format_element('div', ['class' => 'slide-startstop'], elgg_view_icon('play') . elgg_view_icon('pause'));
 $slides .= elgg_format_element('div', ['class' => 'slide-previous'], elgg_view_icon('angle-left'));
 
 $id = "slideshow_{$widget->guid}";
 
-echo elgg_format_element('div', ['id' => $id, 'class' => 'widget-slideshow-container'], $slides);
+$container_class = ['widget-slideshow-container'];
+if ((bool) $widget->autoplay) {
+	$container_class[] = 'slideshow-autoplay';
+}
+
+echo elgg_format_element('div', ['id' => $id, 'class' => $container_class], $slides);
 ?>
 <script>
 require(['widgets/image_slideshow/content'], function(SlideShow) {

diff --git a/views/default/widgets/image_slideshow/edit.php b/views/default/widgets/image_slideshow/edit.php
@@ -38,6 +38,16 @@
 	],
 ]);
 
+echo elgg_view_field([
+	'#type' => 'checkbox',
+	'#label' => elgg_echo('widgets:image_slideshow:autoplay'),
+	'name' => 'params[autoplay]',
+	'checked' => (bool) $widget->autoplay,
+	'default' => 0,
+	'value' => 1,
+	'switch' => true,
+]);
+
 $menu = elgg_view_menu('slide_menu', [
 	'class' => 'elgg-menu-hz',
 	'items' => [