Mercurial > hg > serpentron

changeset 9:8c7e910cb328

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Fullscreen mode.
author Mikhail Kryshen <mikhail@kryshen.net>
date Tue, 29 Mar 2016 22:15:05 +0300
parents b32efce2d860
children 5bb39198a9be
files iframed.html index.html src/Serpentron.st
diffstat 3 files changed, 43 insertions(+), 3 deletions(-) [+]
line wrap: on
line diff
--- a/iframed.html	Wed Mar 23 23:56:26 2016 +0300
+++ b/iframed.html	Tue Mar 29 22:15:05 2016 +0300
@@ -5,7 +5,7 @@
   </head>
   <body>
     <iframe src="index.html"
-            width="700" height="525" frameborder="0">
+            width="700" height="525" frameborder="0" allowfullscreen>
       <a href="http://www.games1729.com/serpentron/">Play Serpentron</a>
     </iframe>
   </body>
--- a/index.html	Wed Mar 23 23:56:26 2016 +0300
+++ b/index.html	Tue Mar 29 22:15:05 2016 +0300
@@ -40,6 +40,13 @@
          #status .player-color {
              filter: brightness(60%) saturate(180%);
          }
+         #fullscreen-button {
+             float: right;
+             padding: 0;
+             border: none;
+             background: transparent;
+             cursor: pointer;
+         }
          #serpentron canvas {
              position: absolute;
              width: 100%;
--- a/src/Serpentron.st	Wed Mar 23 23:56:26 2016 +0300
+++ b/src/Serpentron.st	Tue Mar 29 22:15:05 2016 +0300
@@ -349,12 +349,17 @@
 !
 
 renderOnSilk: aSilk
-	| scale container width height |
-	(aSilk DIV: {#id -> 'title'})
+	| scale title container width height |
+	(title := aSilk DIV: {#id -> 'title'})
 		H1: (Silk A: {	#href -> 'http://www.games1729.com/serpentron/'.
 						#target -> '_top'.
 						'Serpentron'});
 		SPAN: {#id -> 'status'. '1.0-beta2'}.
+		
+	(title BUTTON: {#id -> 'fullscreen-button'.
+					#title -> 'Toggle fullscreen'.
+					'▣'})
+		on: #click bind: [ Serpentron toggleFullscreen ].
 	
 	container := aSilk DIV: {#id -> 'field'}.
 
@@ -378,6 +383,34 @@
 	 or use vendor prefixes as browsers that do not have it
 	 will likely have other incompatibilities."
 	< return window.requestAnimationFrame && true || false >
+!
+
+toggleFullscreen
+	"Sample code from https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API"
+	<
+	if (!!document.fullscreenElement &&
+	    !!document.mozFullScreenElement && !!document.webkitFullscreenElement && !!document.msFullscreenElement ) {
+	  if (document.documentElement.requestFullscreen) {
+	    document.documentElement.requestFullscreen();
+	  } else if (document.documentElement.msRequestFullscreen) {
+	    document.documentElement.msRequestFullscreen();
+	  } else if (document.documentElement.mozRequestFullScreen) {
+	    document.documentElement.mozRequestFullScreen();
+	  } else if (document.documentElement.webkitRequestFullscreen) {
+	    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
+	  }
+	} else {
+	  if (document.exitFullscreen) {
+	    document.exitFullscreen();
+	  } else if (document.msExitFullscreen) {
+	    document.msExitFullscreen();
+	  } else if (document.mozCancelFullScreen) {
+	    document.mozCancelFullScreen();
+	  } else if (document.webkitExitFullscreen) {
+	    document.webkitExitFullscreen();
+	  }
+	}
+	>
 ! !
 
 !Serpentron class methodsFor: 'starting'!