Widget:Fullscreen

Nykyinen versio 23. toukokuuta 2024 kello 09.24

@@ Rivi 1: / Rivi 1: @@
 <includeonly>
-	<div id="<!--{$id|default:Fullscreen|escape:'html'}-->_container"></div>
+	<script type="text/javascript">
-	<script type="text/javascript">
 		(function() {
+			var id = 'fs_' + Math.random().toString(16).slice(2);
-			console.log( "a" );
+			document.write( '<div id="' + id + '_container" style="float: right;"></div>' );
-			function <!--{$id|default:Fullscreen|escape:'html'}-->_jQueryTest() {
+			this[ id + '_jQt' ] = function() {
 				if ( typeof window.jQuery == 'undefined' ) {
-					setTimeout( function(){ <!--{$id|default:Fullscreen|escape:'html'}-->_jQueryTest() }, 300);
+					setTimeout( function() { this[ id + '_jQt' ]() }, 300);
 				} else {
-					console.log( "b" );
+					if ( jQuery( "#" + id + "_container" ).length > 0 ) {
-					if ( jQuery( "#<!--{$id|default:Fullscreen|escape:'html'}-->_container" ).length > 0 ) {
+						this[ id + '_func' ]();
-						<!--{$id|default:Fullscreen|escape:'html'}-->_func();
 					} else {
-						setTimeout( function(){ <!--{$id|default:Fullscreen|escape:'html'}-->_jQueryTest() }, 300);
+						setTimeout( function() { this[ id + '_jQt' ]() }, 300);
 					}
 				}
 			}
-			setTimeout( function(){ <!--{$id|default:Fullscreen|escape:'html'}-->_jQueryTest() }, 300);
+			setTimeout( function() { this[ id + '_jQt' ]() }, 300);
+			this[ id + '_func' ] = function() {
+				var output = '<div class="fullscreen-button" style="margin-left: 10px; float: right; border-radius: 50%;"><button id="' + id + '_button" title="fullscreen" style="width: 24px; height: 24px; padding: 0; margin: 0; color: #1B599B; background: none; border: none;"><i class="fas fa-expand"></i></button></div>';
+				console.log( id );
+console.log( jQuery( "#" + id + "_container" ) );
+				jQuery( "#" + id + "_container" ).html( output );
+				jQuery( "#" + id + "_button" ).on( 'click', function() {
+					var cardEl = jQuery( this ).parents( '.JwCard' );
+					var elem = cardEl[0];
+					if (!!document.fullscreenElement) {
+						if (document.exitFullscreen) {
+							document.exitFullscreen();
+						} else if (document.mozCancelFullScreen) { /* Firefox */
+							document.mozCancelFullScreen();
+						} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
+							document.webkitExitFullscreen();
+						} else if (document.msExitFullscreen) { /* IE/Edge */
+							document.msExitFullscreen();
+						}
+						jQuery( this ).html( '<i class="fas fa-expand"></i>' );
+						cardEl.css( 'overflow', 'inherit' );
+					} else {
+						if (elem.requestFullscreen) {
+							elem.requestFullscreen();
+						} else if (elem.mozRequestFullScreen) { /* Firefox */
+							elem.mozRequestFullScreen();
+						} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
+							elem.webkitRequestFullscreen();
+						} else if (elem.msRequestFullscreen) { /* IE/Edge */
+							elem.msRequestFullscreen();
+						}
-			function <!--{$id|default:Fullscreen|escape:'html'}-->_func() {
+						jQuery( this ).html( '<i class="fas fa-compress"></i>' );
+						cardEl.css( 'overflow', 'auto' );
-				console.log( "c" );
+					}
-				var output = '<div class="Xobschartbutton fullscreen-button" style="margin-left: 10px; float: right; border-radius: 50%;"><button title="fullscreen" style="width: 24px; height: 24px; padding: 0; margin: 0; color: #1B599B; background: none; border: none;"><i class="fas fa-expand"></i></button></div>';
+				});
-				console.log( output );
+			}
-				console.log( jQuery( "#<!--{$id|default:Fullscreen|escape:'html'}-->_container" ).length );
-				jQuery( "#<!--{$id|default:Fullscreen|escape:'html'}-->_container" ).html( output );
-			}
 		})(); // We call our anonymous function immediately
 	</script>
 </includeonly>