changeset 9:8c7e910cb328

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 diff
     1.1 --- a/iframed.html	Wed Mar 23 23:56:26 2016 +0300
     1.2 +++ b/iframed.html	Tue Mar 29 22:15:05 2016 +0300
     1.3 @@ -5,7 +5,7 @@
     1.4    </head>
     1.5    <body>
     1.6      <iframe src="index.html"
     1.7 -            width="700" height="525" frameborder="0">
     1.8 +            width="700" height="525" frameborder="0" allowfullscreen>
     1.9        <a href="http://www.games1729.com/serpentron/">Play Serpentron</a>
    1.10      </iframe>
    1.11    </body>
     2.1 --- a/index.html	Wed Mar 23 23:56:26 2016 +0300
     2.2 +++ b/index.html	Tue Mar 29 22:15:05 2016 +0300
     2.3 @@ -40,6 +40,13 @@
     2.4           #status .player-color {
     2.5               filter: brightness(60%) saturate(180%);
     2.6           }
     2.7 +         #fullscreen-button {
     2.8 +             float: right;
     2.9 +             padding: 0;
    2.10 +             border: none;
    2.11 +             background: transparent;
    2.12 +             cursor: pointer;
    2.13 +         }
    2.14           #serpentron canvas {
    2.15               position: absolute;
    2.16               width: 100%;
     3.1 --- a/src/Serpentron.st	Wed Mar 23 23:56:26 2016 +0300
     3.2 +++ b/src/Serpentron.st	Tue Mar 29 22:15:05 2016 +0300
     3.3 @@ -349,12 +349,17 @@
     3.4  !
     3.5  
     3.6  renderOnSilk: aSilk
     3.7 -	| scale container width height |
     3.8 -	(aSilk DIV: {#id -> 'title'})
     3.9 +	| scale title container width height |
    3.10 +	(title := aSilk DIV: {#id -> 'title'})
    3.11  		H1: (Silk A: {	#href -> 'http://www.games1729.com/serpentron/'.
    3.12  						#target -> '_top'.
    3.13  						'Serpentron'});
    3.14  		SPAN: {#id -> 'status'. '1.0-beta2'}.
    3.15 +		
    3.16 +	(title BUTTON: {#id -> 'fullscreen-button'.
    3.17 +					#title -> 'Toggle fullscreen'.
    3.18 +					'▣'})
    3.19 +		on: #click bind: [ Serpentron toggleFullscreen ].
    3.20  	
    3.21  	container := aSilk DIV: {#id -> 'field'}.
    3.22  
    3.23 @@ -378,6 +383,34 @@
    3.24  	 or use vendor prefixes as browsers that do not have it
    3.25  	 will likely have other incompatibilities."
    3.26  	< return window.requestAnimationFrame && true || false >
    3.27 +!
    3.28 +
    3.29 +toggleFullscreen
    3.30 +	"Sample code from https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API"
    3.31 +	<
    3.32 +	if (!!document.fullscreenElement &&
    3.33 +	    !!document.mozFullScreenElement && !!document.webkitFullscreenElement && !!document.msFullscreenElement ) {
    3.34 +	  if (document.documentElement.requestFullscreen) {
    3.35 +	    document.documentElement.requestFullscreen();
    3.36 +	  } else if (document.documentElement.msRequestFullscreen) {
    3.37 +	    document.documentElement.msRequestFullscreen();
    3.38 +	  } else if (document.documentElement.mozRequestFullScreen) {
    3.39 +	    document.documentElement.mozRequestFullScreen();
    3.40 +	  } else if (document.documentElement.webkitRequestFullscreen) {
    3.41 +	    document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
    3.42 +	  }
    3.43 +	} else {
    3.44 +	  if (document.exitFullscreen) {
    3.45 +	    document.exitFullscreen();
    3.46 +	  } else if (document.msExitFullscreen) {
    3.47 +	    document.msExitFullscreen();
    3.48 +	  } else if (document.mozCancelFullScreen) {
    3.49 +	    document.mozCancelFullScreen();
    3.50 +	  } else if (document.webkitExitFullscreen) {
    3.51 +	    document.webkitExitFullscreen();
    3.52 +	  }
    3.53 +	}
    3.54 +	>
    3.55  ! !
    3.56  
    3.57  !Serpentron class methodsFor: 'starting'!