doc: ecma version switcher

doc/api/buffer.markdown

@@ -20,6 +20,8 @@ resized.
 The `Buffer` class is a global within Node.js, making it unlikely that one
 would need to ever use `require('buffer')`.
 
+Modern JavaScript:
+
 ```js
 const buf1 = new Buffer(10);
   // creates a buffer of length 10
@@ -34,13 +36,31 @@ const buf4 = new Buffer('tést', 'utf8');
   // creates a buffer containing UTF8 bytes [74, c3, a9, 73, 74]
 ```
 
+ES5:
+
+```js
+var buf1 = new Buffer(10);
+  // creates a buffer of length 10
+
+var buf2 = new Buffer([1,2,3]);
+  // creates a buffer containing [01, 02, 03]
+
+var buf3 = new Buffer('test');
+  // creates a buffer containing ASCII bytes [74, 65, 73, 74]
+
+var buf4 = new Buffer('tést', 'utf8');
+  // creates a buffer containing UTF8 bytes [74, c3, a9, 73, 74]
+```
+
 ## Buffers and Character Encodings
 
 Buffers are commonly used to represent sequences of encoded characters
 such as UTF8, UCS2, Base64 or even Hex-encoded data. It is possible to
 convert back and forth between Buffers and ordinary JavaScript string objects
 by using an explicit encoding method.
 
+Modern JavaScript:
+
 ```js
 const buf = new Buffer('hello world', 'ascii');
 console.log(buf.toString('hex'));
@@ -49,6 +69,16 @@ console.log(buf.toString('base64'));
   // prints: aGVsbG8gd29ybGQ=
 ```
 
+ES5:
+
+```js
+var buf = new Buffer('hello world', 'ascii');
+console.log(buf.toString('hex'));
+  // prints: 68656c6c6f20776f726c64
+console.log(buf.toString('base64'));
+  // prints: aGVsbG8gd29ybGQ=
+```
+
 The character encodings currently supported by Node.js include:
 
 * `'ascii'` - for 7-bit ASCII data only.  This encoding method is very fast and

doc/api/synopsis.markdown

@@ -5,6 +5,8 @@
 An example of a [web server][] written with Node.js which responds with
 `'Hello World'`:
 
+Modern JavaScript:
+
 ```js
 const http = require('http');
 
@@ -16,6 +18,19 @@ http.createServer( (request, response) => {
 console.log('Server running at http://127.0.0.1:8124/');
 ```
 
+ES5:
+
+```js
+var http = require('http');
+
+http.createServer(function (request, response) {
+  response.writeHead(200, {'Content-Type': 'text/plain'});
+  response.end('Hello World\n');
+}).listen(8124);
+
+console.log('Server running at http://127.0.0.1:8124/');
+```
+
 To run the server, put the code into a file called `example.js` and execute
 it with the node program
 

doc/api_assets/api_app.css

@@ -0,0 +1,18 @@
+.es-switcher > p.active, .es-switcher > p:hover {
+    background-color: #f2f5f0;
+    border-color: #f2f5f0;
+}
+.es-switcher > p {
+    display: inline-block;
+    margin: 0px;
+    cursor: pointer;
+    padding: 0em 21px;
+    border-style: solid;
+    border-color: rgb(255, 255, 255);
+    border-width: 3px;
+    background-color: rgb(238, 238, 238);
+}
+.es-switcher > pre {
+    border-top-left-radius: 0px !important;
+    margin: 0px;
+}

doc/api_assets/api_app.js

@@ -0,0 +1,59 @@
+'use strict'
+const esNextText = 'Modern JavaScript:'
+const es5Text = 'ES5:'
+
+function nextSiblingMatch (e, name, text) {
+  var sib = e.nextSibling
+  while (sib) {
+    if (sib.nodeType == 1) {
+      if (sib.nodeName == name && (!text || sib.textContent.indexOf(esNextText) > -1))
+        return sib
+      return null
+    }
+    sib = sib.nextSibling
+  }
+}
+
+function renderESCodeBlocks() {
+  Array.prototype.slice.call(document.querySelectorAll('p'))
+    .filter(function (p) {
+      return p.textContent.indexOf(esNextText) > -1})
+    .map(function (esNextP) {
+      var esNextPre = nextSiblingMatch(esNextP, 'PRE')
+      if (!esNextPre) return null
+      var es5P = nextSiblingMatch(esNextPre, 'P')
+      if (!es5P) return null
+      var es5Pre = nextSiblingMatch(es5P, 'PRE')
+      if (!es5Pre) return null
+      return { esNextP: esNextP, esNextPre: esNextPre, es5P: es5P, es5Pre: es5Pre }
+    })
+    .filter(Boolean)
+    .forEach(function (block) {
+      var div = document.createElement('div')
+      div.className = 'es-switcher'
+      block.esNextP.parentElement.insertBefore(div, block.esNextP)
+      block.esNextP.textContent = esNextText.replace(/:$/, '')
+      block.es5P.textContent = es5Text.replace(/:$/, '')
+      block.esNextP.className = 'active'
+      div.appendChild(block.esNextP)
+      div.appendChild(block.es5P)
+      div.appendChild(block.esNextPre)
+      div.appendChild(block.es5Pre)
+      block.es5Pre.style.display = 'none'
+      block.esNextP.addEventListener('click', function () {
+        block.esNextPre.style.display = 'block'
+        block.es5Pre.style.display = 'none'
+        block.esNextP.className = 'active'
+        block.es5P.className = ''
+      })
+      block.es5P.addEventListener('click', function () {
+        block.esNextPre.style.display = 'none'
+        block.es5Pre.style.display = 'block'
+        block.esNextP.className = ''
+        block.es5P.className = 'active'
+      })
+      div.insertAdjacentHTML('afterend', '<br>')
+    })
+}
+
+renderESCodeBlocks()

doc/template.html

@@ -6,6 +6,7 @@
   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic">
   <link rel="stylesheet" href="assets/style.css">
   <link rel="stylesheet" href="assets/sh.css">
+  <link rel="stylesheet" href="assets/api_app.css">
   <link rel="canonical" href="https://nodejs.org/api/__FILENAME__.html">
 </head>
 <body class="alt apidoc" id="api-section-__FILENAME__">
@@ -45,6 +46,7 @@ <h2>Table of Contents</h2>
     </div>
   </div>
   <script src="assets/sh_main.js"></script>
+  <script src="assets/api_app.js"></script>
   <script src="assets/sh_javascript.min.js"></script>
   <script>highlight(undefined, undefined, 'pre');</script>
 </body>