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