8 |
9 |
45 |
46 |
47 |
179 |
--------------------------------------------------------------------------------
/src/utils/navbar.js:
--------------------------------------------------------------------------------
1 | var selectedClass = 'navbar-active'
2 |
3 | // It'd be nicer to use the classList API, but I prefer to support more browsers. Remove a class
4 | // if it's found on the element.
5 | function removeClassIfNeeded (el) {
6 | // If the element has no classes then we can take a shortcut.
7 | if (!el.className) {
8 | return
9 | }
10 |
11 | var splitClassName = el.className.split(' ')
12 | var replacementClassName = ''
13 |
14 | // Assemble a string of other class names.
15 | for (var i = 0, len = splitClassName.length; i < len; i++) {
16 | var className = splitClassName[i]
17 |
18 | if (className !== selectedClass) {
19 | replacementClassName += replacementClassName === '' ? className : ' ' + className
20 | }
21 | }
22 |
23 | // If the length of the className differs, then it had an selected class in and needs to be
24 | // updated.
25 | if (replacementClassName.length !== el.className.length) {
26 | el.className = replacementClassName
27 | }
28 | }
29 |
30 | // Add a class to an element if it is not found.
31 | function addClassIfNeeded (el) {
32 | // If the element has no classes then we can take a shortcut.
33 | if (!el.className) {
34 | el.className = selectedClass
35 | return
36 | }
37 |
38 | var splitClassName = el.className.split(' ')
39 |
40 | // If any of the class names match the selected class then return.
41 | for (var i = 0, len = splitClassName.length; i < len; i++) {
42 | if (splitClassName[i] === selectedClass) {
43 | return
44 | }
45 | }
46 |
47 | // If we got here then the selected class needs to be added to an existing className.
48 | el.className += ' ' + selectedClass
49 | }
50 |
51 | function createAndAppendListItems (navList, elementList, makeNavListItem) {
52 | var pairs = []
53 | var element
54 | var li
55 |
56 | // Create list elements
57 | for (var i = 0, len = elementList.length; i < len; i++) {
58 | element = elementList[i]
59 | // console.log(element)
60 | li = makeNavListItem(element)
61 |
62 | navList.appendChild(li)
63 |
64 | pairs.push({ element: element, navElement: li })
65 | }
66 |
67 | return pairs
68 | }
69 |
70 | function makeHandleScroll (pairs, debounceTime) {
71 | function handleScroll () {
72 | var frontRunner = { navElement: {} }
73 | var closestDist = Infinity
74 | var pair, absDist
75 |
76 | for (var i = 0, len = pairs.length; i < len; i++) {
77 | pair = pairs[i]
78 | absDist = Math.abs(pair.element.getBoundingClientRect().top)
79 |
80 | // If this element is not the front runner for top, deactivate it.
81 | if (absDist > closestDist) {
82 | removeClassIfNeeded(pair.navElement)
83 | continue
84 | }
85 |
86 | // If this is a new front runner, deactivate the previous front runner.
87 | removeClassIfNeeded(frontRunner)
88 |
89 | frontRunner = pair.navElement
90 | closestDist = absDist
91 | }
92 |
93 | // All other elements have been deactivated, and now the top element is known and can be set
94 | // as active.
95 | addClassIfNeeded(frontRunner, selectedClass)
96 | }
97 |
98 | // The default behaviour is no debounce.
99 | if (typeof debounceTime !== 'number' || isNaN(debounceTime)) {
100 | return handleScroll
101 | }
102 |
103 | var timeout
104 |
105 | function nullifyTimeout () {
106 | timeout = null
107 | }
108 |
109 | return function debouncedHandleScroll () {
110 | if (timeout) {
111 | return
112 | }
113 |
114 | // Immediately use handleScroll to calculate.
115 | handleScroll()
116 |
117 | // No further calls to handleScroll until debounceTime has elapsed.
118 | timeout = setTimeout(nullifyTimeout, debounceTime)
119 | }
120 | }
121 |
122 | function addScrollListener (target, handleScroll) {
123 | function scrollHandleWrapper (evt) {
124 | if (evt.target === target) {
125 | handleScroll()
126 | }
127 | }
128 |
129 | if (target.addEventListener) {
130 | target.addEventListener('scroll', scrollHandleWrapper, false)
131 | } else if (target.attachEvent) {
132 | target.attachEvent('onscroll', scrollHandleWrapper)
133 | } else {
134 | throw new Error('This browser does not support addEventListener or attachEvent.')
135 | }
136 |
137 | // To calculate the initial active list element.
138 | handleScroll()
139 | }
140 |
141 | export default function makeNav (options) {
142 | // console.log(options.makeNavListItem)
143 | if (!options || !options.elementList || !options.makeNavListItem) {
144 | throw new Error('Options object with elementList and makeNavListItem must be provided.')
145 | }
146 |
147 | var nav = document.createElement(options.tagName || 'nav')
148 | var navList = document.createElement('ul')
149 |
150 | // The target defaults to window.
151 | var target = options.target || document
152 |
153 | // Create list elements
154 | var pairs = createAndAppendListItems(navList, options.elementList, options.makeNavListItem)
155 |
156 | // Whenever the window is scrolled, recalculate the active list element. Compatible with older
157 | // versions of IE.
158 | addScrollListener(target, makeHandleScroll(pairs, options.debounceTime))
159 |
160 | nav.appendChild(navList)
161 |
162 | return nav
163 | }
164 |
--------------------------------------------------------------------------------
/src/components/alert/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
