category: google

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

  1. Google Closure Compiler

  2. UglifyJs

Google Closure Compiler

Google Closure Compiler

Google Closure Compiler is a tool for minify and uglify js.

  • From Google

  • Java

  • Command Line

  • Slow

UglifyJs

mishoo/UglifyJS2

  • 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.

Read more

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 - 全螢幕 API (Windows)

Refer - How to Use the HTML5 Full-Screen API (Again) - SitePoint

Read more