Mercurial > hg > serpentron
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'!