Skip to content

Commit 85e9f81

Browse files
committed
fix cross browser compatibility & toggle fullscreen
1 parent 2dee8c6 commit 85e9f81

File tree

6 files changed

+114
-60
lines changed

6 files changed

+114
-60
lines changed

index.html

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -32,11 +32,6 @@ <h3>
3232
</h3>
3333
</button>
3434
<div class="top-menu-buttons">
35-
<div class="btn" id="btn_fullscreen">
36-
<div class="wrapper">
37-
<i class="fa fa-arrows-alt"></i> Fullscreen
38-
</div>
39-
</div>
4035
<div class="btn" id="btn_share">
4136
<div class="wrapper">
4237
<i class="fa fa-share" aria-hidden="true"></i> Share <input type="text" class="collapse" id="shared">
@@ -63,6 +58,12 @@ <h3>
6358
Interval: <input type="number" value="" id="interval"> sec
6459
</div>
6560
</div>
61+
<div class="btn" id="btn_fullscreen">
62+
<div class="wrapper">
63+
<i class="fa fa-arrows-alt"></i>
64+
<span class="btn-text">Fullscreen</span>
65+
</div>
66+
</div>
6667
</div>
6768
</nav>
6869
<section class="sidemenu active">

js/dom/enable_fullscreen.js

Lines changed: 35 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,40 @@
11
'use strict';
22

33
module.exports = () => {
4-
let $func = 'requestFullScreen',
5-
vendorPrefixes = ['webkit', 'moz', 'ms', 'o'],
6-
db = document.body;
4+
let reqFunc = null;
5+
let extFunc = null;
6+
let reqFuncs = [
7+
'requestFullscreen',
8+
'webkitRequestFullscreen',
9+
'mozRequestFullScreen',
10+
'msRequestFullscreen',
11+
];
12+
let extFuncs = [
13+
'exitFullscreen',
14+
'webkitExitFullscreen',
15+
'mozCancelFullScreen',
16+
'msExitFullscreen'
17+
];
718

8-
for (let p of vendorPrefixes) {
9-
let fName = p + $func [0].toUpperCase () + $func.slice (1);
10-
if (db [fName]) {
11-
$func = fName;
12-
break;
13-
}
14-
}
19+
for (let tmpReqFunc of reqFuncs) {
20+
if (document.body[tmpReqFunc]) {
21+
reqFunc = tmpReqFunc;
22+
}
23+
}
1524

16-
$('#btn_fullscreen').click (function () {
17-
db [$func] ();
18-
});
19-
};
25+
for (let tmpExtFunc of extFuncs) {
26+
if (document[tmpExtFunc]) {
27+
extFunc = tmpExtFunc;
28+
}
29+
}
30+
31+
const $btnFullscreen = $('#btn_fullscreen');
32+
33+
$btnFullscreen.click(function () {
34+
if (document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen) {
35+
if (extFunc) document[extFunc]();
36+
} else {
37+
if (reqFunc) document.body[reqFunc]();
38+
}
39+
});
40+
};

public/algorithm_visualizer.js

Lines changed: 68 additions & 36 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/algorithm_visualizer.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/algorithm_visualizer.min.js

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

public/algorithm_visualizer.min.js.map

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy