JavaScript - Google Closure Compiler V.S. Gulp uglify
on 2015-08-15
JavaScript - Google Closure Compiler V.S. Gulp uglify
Intro
I have two choice
-
Google Closure Compiler
-
UglifyJs
Google Closure Compiler
Google Closure Compiler is a tool for minify and uglify js.
-
From Google
-
Java
-
Command Line
-
Slow
UglifyJs
-
More option setting
-
Node.js
-
Command Line
-
Fast
Test
Google Closure Compiler
When i run command line, it used lot of cpu source.
Can feel it lock some seconds.
If compiler error,it can show error message.
UglifyJs
It’s so fast.
It can fix some small error when it compiler.
So i recommendation this tool.
Finally i use Gulp handle uglifyJs.
HTML5 - Full Screen Mode
on 2014-05-08
HTML5 - Full Screen Mode
It can control full screen the browser IE if it is to be more than IE11
Code
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Example
HTML
<button id="full">Full Screen</button>
JavaScript
document.querySelector('#full').addEventListener('click', function() {
toggleFullScreen();
});
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
CodePen
Other use
Use it make youtube api player full screen
If render player on <div id="player"></div>
document.querySelector('#full').addEventListener('click', function () {
toggleFullScreen(document.querySelector('#player'));
});
function toggleFullScreen(el) {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
el.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
el.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
el.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
Refer - Using fullscreen mode - Web developer guide | MDN
Refer - How to Use the HTML5 Full-Screen API (Again) - SitePoint