add fullscreen btn
This commit is contained in:
parent
c947fe01b3
commit
7a379d0359
|
@ -34,6 +34,10 @@ var createWebSocketConnection = function() {
|
|||
}
|
||||
|
||||
var navigationClickHandler = function(e) {
|
||||
if ($(this).attr('href') === '#') {
|
||||
return
|
||||
}
|
||||
|
||||
$('.pane').hide();
|
||||
|
||||
var target = $(this).attr('href');
|
||||
|
@ -205,12 +209,12 @@ var liveClickHandler = function(e) {
|
|||
doScreenshot();
|
||||
}
|
||||
|
||||
var screenshotImgClickHandler = function(e) {
|
||||
var img = $screenshotImg.get(0);
|
||||
var isFullscreen = parseInt($screenshotImg.attr('data-fullscreen'));
|
||||
var fullscreenHandler = function(e) {
|
||||
var element = $(e.target.getAttribute('data-target'));
|
||||
var isFullscreen = parseInt($(e.target).attr('data-fullscreen'));
|
||||
|
||||
if (isFullscreen) {
|
||||
$screenshotImg.attr('data-fullscreen', '0');
|
||||
element.attr('data-fullscreen', '0');
|
||||
|
||||
if (document.exitFullscreen) {
|
||||
document.exitFullscreen();
|
||||
|
@ -220,14 +224,14 @@ var screenshotImgClickHandler = function(e) {
|
|||
document.mozCancelFullScreen();
|
||||
}
|
||||
} else {
|
||||
$screenshotImg.attr('data-fullscreen', '1');
|
||||
$(e.target).attr('data-fullscreen', '1');
|
||||
|
||||
if (img.requestFullscreen) {
|
||||
img.requestFullscreen();
|
||||
} else if (img.webkitRequestFullscreen) {
|
||||
img.webkitRequestFullscreen();
|
||||
} else if (img.mozRequestFullScreen) {
|
||||
img.mozRequestFullScreen();
|
||||
if (element.get(0).requestFullscreen) {
|
||||
element.get(0).requestFullscreen();
|
||||
} else if (element.get(0).webkitRequestFullscreen) {
|
||||
element.get(0).webkitRequestFullscreen();
|
||||
} else if (element.get(0).mozRequestFullScreen) {
|
||||
element.get(0).mozRequestFullScreen();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -268,7 +272,7 @@ var addListeners = function() {
|
|||
|
||||
$('#live').click(liveClickHandler);
|
||||
|
||||
$screenshotImg.click(screenshotImgClickHandler)
|
||||
$('.btn-fullscreen').click(fullscreenHandler)
|
||||
}
|
||||
|
||||
var bootstrap = function() {
|
||||
|
|
|
@ -28,6 +28,9 @@
|
|||
<li class="nav-item">
|
||||
<a class="nav-link no-radius" href="#pane-desktop">DESKTOP</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link no-radius btn-fullscreen" data-target="html" href="#">💻</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -212,7 +215,7 @@
|
|||
<div class="col-12">
|
||||
<button type="button" data-msg='{"type":"screenshot"}' class="btn btn-secondary">Screenshot</button>
|
||||
<button type="button" id="live" class="btn btn-secondary">Live</button>
|
||||
<div id="screenshot"><img src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
|
||||
<div id="screenshot"><img class="btn-fullscreen" data-target="#screenshot img" src="data:image/png; base64, iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4gIJDjc3srQk8gAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAADElEQVQI12P48+cPAAXsAvVTWDc6AAAAAElFTkSuQmCC"></div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
</div>
|
||||
|
|
|
@ -190,11 +190,13 @@ $server->addMessageHandler('screenshot', function (ConnectionInterface $from, ar
|
|||
unlink($tmpFilename);
|
||||
});
|
||||
|
||||
$server->addMessageHandler('messages', function (ConnectionInterface $from, array $data) use ($server) {
|
||||
$server->addMessageHandler('messages', function (ConnectionInterface $from, array $data) use ($server, $serverOutput) {
|
||||
$value = $data['value'] ?? [];
|
||||
|
||||
foreach ($value as $msg) {
|
||||
$server->onMessage($from, json_encode($msg));
|
||||
|
||||
usleep(1000000 / 3);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
Loading…
Reference in a new issue