nodejs.org/layouts/about.hbs at 900f951b15133435ad547abbad142a22f3922887 · nodejs/nodejs.org · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<!DOCTYPE html>
<html lang="{{site.locale}}">
{{> html-head }}

<body>
    {{> header }}

    <div id="main">
        <div class="container has-side-nav">

            <aside>
                <ul>
                    <li{{#equals path site.about.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.about.link}}/">{{site.about.text}}</a>
                    </li>
                    <li{{#equals path site.about.governance.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.about.governance.link}}/">{{site.about.governance.text}}</a>
                    </li>
                    <li{{#equals path site.about.workinggroups.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.about.workinggroups.link}}/">{{site.about.workinggroups.text}}</a>
                    </li>
                    <li{{#equals path site.about.releases.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.about.releases.link}}/">{{site.about.releases.text}}</a>
                    </li>
                    <li{{#equals path site.about.resources.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.about.resources.link}}/">{{site.about.resources.text}}</a>
                    </li>
                    <li{{#equals path site.foundation.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.foundation.link}}/">{{site.foundation.text}}</a>
                    </li>
                    <li{{#equals path site.security.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.security.link}}/">{{site.security.text}}</a>
                    </li>
                    <li{{#equals path site.trademark.link}} class="active"{{/equals}}>
                        <a href="/{{site.locale}}/{{site.trademark.link}}/">{{site.trademark.text}}</a>
                    </li>
                </ul>
            </aside>

            <article>
                {{{ contents }}}
            </article>

        </div>
    </div>

    <style>
        .es-switcher > p.active, .es-switcher > p:hover {
            color: #FFF;
            background-color: rgb(51, 51, 51);
            border-color: rgb(51, 51, 51);
        }
        .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);
            border-top-right-radius: 3px;
            border-top-left-radius: 3px;
        }
        .es-switcher > pre {
            border-top-left-radius: 0px !important;
            margin: 0px;
        }
    </style>

    <script>
var esNextText = 'Modern JavaScript:'
var es5Text = 'ES5:'

function nextSiblingMatch (e, name, text) {
  var sib = e.nextSibling
  while (sib) {
    if (sib.nodeType == 1) {
      if (sib.nodeName == name && (!text || sib.textContent == text))
        return sib
      return null
    }
    sib = sib.nextSibling
  }
}

Array.prototype.slice.call(document.querySelectorAll('p'))
  .filter(function (p) { return p.textContent == esNextText })
  .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'
    })
  })
    </script>
    {{> footer }}
</body>
</html>