Skip to content

Commit cd67bc6

Browse files
yyx990803yyx990803
committed
fixing some scripts
1 parent 5a92c07 commit cd67bc6

File tree

1 file changed

+168
-158
lines changed

1 file changed

+168
-158
lines changed

‎themes/vue/source/js/common.js

Lines changed: 168 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,184 +1,194 @@
11
(function () {
22

3-
var each = [].forEach
4-
var main = document.getElementById('main')
5-
var doc = document.documentElement
6-
var body = document.body
7-
var header = document.getElementById('header')
8-
var menu = document.querySelector('.sidebar')
9-
var content = document.querySelector('.content')
10-
var mobileBar = document.getElementById('mobile-bar')
11-
12-
var menuButton = mobileBar.querySelector('.menu-button')
13-
menuButton.addEventListener('click', function () {
14-
menu.classList.toggle('open')
15-
})
16-
17-
body.addEventListener('click', function (e) {
18-
if (e.target !== menuButton && !menu.contains(e.target)) {
19-
menu.classList.remove('open')
20-
}
21-
})
22-
23-
// build sidebar
24-
var currentPageAnchor = menu.querySelector('.sidebar-link.current')
25-
var isAPI = document.querySelector('.content').classList.contains('api')
26-
if (currentPageAnchor || isAPI) {
27-
var allHeaders = []
28-
var sectionContainer
29-
if (isAPI) {
30-
sectionContainer = document.querySelector('.menu-root')
31-
} else {
32-
sectionContainer = document.createElement('ul')
33-
sectionContainer.className = 'menu-sub'
34-
currentPageAnchor.parentNode.appendChild(sectionContainer)
35-
}
36-
var headers = content.querySelectorAll('h2')
37-
if (headers.length) {
38-
each.call(headers, function (h) {
39-
sectionContainer.appendChild(makeLink(h))
40-
var h3s = collectH3s(h)
41-
allHeaders.push(h)
42-
allHeaders.push.apply(allHeaders, h3s)
43-
if (h3s.length) {
44-
sectionContainer.appendChild(makeSubLinks(h3s, isAPI))
45-
}
46-
})
47-
} else {
48-
headers = content.querySelectorAll('h3')
49-
each.call(headers, function (h) {
50-
sectionContainer.appendChild(makeLink(h))
51-
allHeaders.push(h)
52-
})
53-
}
3+
if (PAGE_TYPE) {
4+
initSubHeaders()
5+
initVersionSelect()
6+
}
7+
initSearch()
8+
9+
function initSubHeaders () {
10+
var each = [].forEach
11+
var main = document.getElementById('main')
12+
var doc = document.documentElement
13+
var body = document.body
14+
var header = document.getElementById('header')
15+
var menu = document.querySelector('.sidebar')
16+
var content = document.querySelector('.content')
17+
var mobileBar = document.getElementById('mobile-bar')
18+
19+
var menuButton = mobileBar.querySelector('.menu-button')
20+
menuButton.addEventListener('click', function () {
21+
menu.classList.toggle('open')
22+
})
5423

55-
var animating = false
56-
sectionContainer.addEventListener('click', function (e) {
57-
e.preventDefault()
58-
if (e.target.classList.contains('section-link')) {
24+
body.addEventListener('click', function (e) {
25+
if (e.target !== menuButton && !menu.contains(e.target)) {
5926
menu.classList.remove('open')
60-
setActive(e.target)
61-
animating = true
62-
setTimeout(function () {
63-
animating = false
64-
}, 400)
6527
}
66-
}, true)
28+
})
29+
30+
// build sidebar
31+
var currentPageAnchor = menu.querySelector('.sidebar-link.current')
32+
var isAPI = document.querySelector('.content').classList.contains('api')
33+
if (currentPageAnchor || isAPI) {
34+
var allHeaders = []
35+
var sectionContainer
36+
if (isAPI) {
37+
sectionContainer = document.querySelector('.menu-root')
38+
} else {
39+
sectionContainer = document.createElement('ul')
40+
sectionContainer.className = 'menu-sub'
41+
currentPageAnchor.parentNode.appendChild(sectionContainer)
42+
}
43+
var headers = content.querySelectorAll('h2')
44+
if (headers.length) {
45+
each.call(headers, function (h) {
46+
sectionContainer.appendChild(makeLink(h))
47+
var h3s = collectH3s(h)
48+
allHeaders.push(h)
49+
allHeaders.push.apply(allHeaders, h3s)
50+
if (h3s.length) {
51+
sectionContainer.appendChild(makeSubLinks(h3s, isAPI))
52+
}
53+
})
54+
} else {
55+
headers = content.querySelectorAll('h3')
56+
each.call(headers, function (h) {
57+
sectionContainer.appendChild(makeLink(h))
58+
allHeaders.push(h)
59+
})
60+
}
6761

68-
// make links clickable
69-
allHeaders.forEach(makeHeaderClickable)
62+
var animating = false
63+
sectionContainer.addEventListener('click', function (e) {
64+
e.preventDefault()
65+
if (e.target.classList.contains('section-link')) {
66+
menu.classList.remove('open')
67+
setActive(e.target)
68+
animating = true
69+
setTimeout(function () {
70+
animating = false
71+
}, 400)
72+
}
73+
}, true)
7074

71-
// init smooth scroll
72-
smoothScroll.init({
73-
speed: 400,
74-
offset: window.innerWidth > 720
75-
? 40
76-
: 58
77-
})
78-
}
75+
// make links clickable
76+
allHeaders.forEach(makeHeaderClickable)
7977

80-
// listen for scroll event to do positioning & highlights
81-
window.addEventListener('scroll', updateSidebar)
82-
window.addEventListener('resize', updateSidebar)
83-
84-
function updateSidebar () {
85-
var top = doc && doc.scrollTop || body.scrollTop
86-
var headerHeight = header.offsetHeight
87-
if (top > headerHeight) {
88-
main.className = 'fix-sidebar'
89-
} else {
90-
main.className = ''
78+
// init smooth scroll
79+
smoothScroll.init({
80+
speed: 400,
81+
offset: window.innerWidth > 720
82+
? 40
83+
: 58
84+
})
9185
}
92-
if (animating || !allHeaders) return
93-
var last
94-
for (var i = 0; i < allHeaders.length; i++) {
95-
var link = allHeaders[i]
96-
if (link.offsetTop > top) {
97-
if (!last) last = link
98-
break
86+
87+
// listen for scroll event to do positioning & highlights
88+
window.addEventListener('scroll', updateSidebar)
89+
window.addEventListener('resize', updateSidebar)
90+
91+
function updateSidebar () {
92+
var top = doc && doc.scrollTop || body.scrollTop
93+
var headerHeight = header.offsetHeight
94+
if (top > headerHeight) {
95+
main.className = 'fix-sidebar'
9996
} else {
100-
last = link
97+
main.className = ''
10198
}
99+
if (animating || !allHeaders) return
100+
var last
101+
for (var i = 0; i < allHeaders.length; i++) {
102+
var link = allHeaders[i]
103+
if (link.offsetTop > top) {
104+
if (!last) last = link
105+
break
106+
} else {
107+
last = link
108+
}
109+
}
110+
if (last)
111+
setActive(last.id)
102112
}
103-
if (last)
104-
setActive(last.id)
105-
}
106113

107-
function makeLink (h) {
108-
var link = document.createElement('li')
109-
var text = h.textContent.replace(/\(.*\)$/, '')
110-
// make sure the ids are link-able...
111-
h.id = h.id
112-
.replace(/_28.*$/, '') // remove anything after brackets
113-
.replace(/_24/g, '') // remove $
114-
link.innerHTML =
115-
'<a class="section-link" data-scroll href="#' + h.id + '">' +
116-
text +
117-
'</a>'
118-
return link
119-
}
114+
function makeLink (h) {
115+
var link = document.createElement('li')
116+
var text = h.textContent.replace(/\(.*\)$/, '')
117+
// make sure the ids are link-able...
118+
h.id = h.id
119+
.replace(/_28.*$/, '') // remove anything after brackets
120+
.replace(/_24/g, '') // remove $
121+
link.innerHTML =
122+
'<a class="section-link" data-scroll href="#' + h.id + '">' +
123+
text +
124+
'</a>'
125+
return link
126+
}
120127

121-
function collectH3s (h) {
122-
var h3s = []
123-
var next = h.nextSibling
124-
while (next && next.tagName !== 'H2') {
125-
if (next.tagName === 'H3') {
126-
h3s.push(next)
128+
function collectH3s (h) {
129+
var h3s = []
130+
var next = h.nextSibling
131+
while (next && next.tagName !== 'H2') {
132+
if (next.tagName === 'H3') {
133+
h3s.push(next)
134+
}
135+
next = next.nextSibling
127136
}
128-
next = next.nextSibling
137+
return h3s
129138
}
130-
return h3s
131-
}
132139

133-
function makeSubLinks (h3s, small) {
134-
var container = document.createElement('ul')
135-
if (small) {
136-
container.className = 'menu-sub'
140+
function makeSubLinks (h3s, small) {
141+
var container = document.createElement('ul')
142+
if (small) {
143+
container.className = 'menu-sub'
144+
}
145+
h3s.forEach(function (h) {
146+
container.appendChild(makeLink(h))
147+
})
148+
return container
137149
}
138-
h3s.forEach(function (h) {
139-
container.appendChild(makeLink(h))
140-
})
141-
return container
142-
}
143150

144-
function setActive (id) {
145-
var previousActive = menu.querySelector('.section-link.active')
146-
var currentActive = typeof id === 'string'
147-
? menu.querySelector('.section-link[href="#' + id + '"]')
148-
: id
149-
if (currentActive !== previousActive) {
150-
if (previousActive) previousActive.classList.remove('active')
151-
currentActive.classList.add('active')
151+
function setActive (id) {
152+
var previousActive = menu.querySelector('.section-link.active')
153+
var currentActive = typeof id === 'string'
154+
? menu.querySelector('.section-link[href="#' + id + '"]')
155+
: id
156+
if (currentActive !== previousActive) {
157+
if (previousActive) previousActive.classList.remove('active')
158+
currentActive.classList.add('active')
159+
}
160+
}
161+
162+
function makeHeaderClickable (link) {
163+
var wrapper = document.createElement('a')
164+
wrapper.href = '#' + link.id
165+
wrapper.setAttribute('data-scroll', '')
166+
link.parentNode.insertBefore(wrapper, link)
167+
wrapper.appendChild(link)
152168
}
153169
}
154170

155-
function makeHeaderClickable (link) {
156-
var wrapper = document.createElement('a')
157-
wrapper.href = '#' + link.id
158-
wrapper.setAttribute('data-scroll', '')
159-
link.parentNode.insertBefore(wrapper, link)
160-
wrapper.appendChild(link)
171+
function initVersionSelect () {
172+
// version select
173+
document.querySelector('.version-select').addEventListener('change', function (e) {
174+
var version = e.target.value
175+
if (version.indexOf('1.') !== 0) {
176+
version = version.replace('.', '')
177+
var section = window.location.pathname.match(/\/(\w+?)\//)[1]
178+
window.location.assign('http://' + version + '.vuejs.org/' + section + '/')
179+
} else {
180+
// TODO when 1.x is out
181+
}
182+
})
161183
}
162184

163-
// Search with SwiftType
164-
165-
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
166-
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
167-
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
168-
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
169-
170-
_st('install','HgpxvBc7pUaPUWmG9sgv','2.0.0');
171-
172-
// version select
173-
document.querySelector('.version-select').addEventListener('change', function (e) {
174-
var version = e.target.value
175-
if (version.indexOf('1.') !== 0) {
176-
version = version.replace('.', '')
177-
var section = window.location.pathname.match(/\/(\w+?)\//)[1]
178-
window.location.assign('http://' + version + '.vuejs.org/' + section + '/')
179-
} else {
180-
// TODO when 1.x is out
181-
}
182-
})
185+
function initSearch () {
186+
// Search with SwiftType
187+
(function(w,d,t,u,n,s,e){w['SwiftypeObject']=n;w[n]=w[n]||function(){
188+
(w[n].q=w[n].q||[]).push(arguments);};s=d.createElement(t);
189+
e=d.getElementsByTagName(t)[0];s.async=1;s.src=u;e.parentNode.insertBefore(s,e);
190+
})(window,document,'script','//s.swiftypecdn.com/install/v2/st.js','_st');
183191

192+
_st('install','HgpxvBc7pUaPUWmG9sgv','2.0.0');
193+
}
184194
})()

0 commit comments

Comments
 (0)