Skip to content

Commit 8948d10

Browse files
jgthmsjgthms
committed
Fix JavaScript
1 parent 8a477fe commit 8948d10

8 files changed

Lines changed: 77 additions & 46 deletions

File tree

‎_layouts/single.html‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html class="is-single">
2+
<html class="is-single" data-template="single">
33
<head>
44
<meta charset="UTF-8">
55
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
@@ -40,6 +40,5 @@
4040
{% include google-fonts.html %}
4141
<script src="{{site.url}}/javascript/clipboard.min.js"></script>
4242
<script src="{{site.url}}/javascript/main.js"></script>
43-
<script src="{{site.url}}/javascript/single.js"></script>
4443
</body>
4544
</html>

‎css/website.css‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
---
44

55
<!DOCTYPE html>
6-
<html class="is-index">
6+
<html class="is-index" data-template="index">
77
<head>
88
<meta charset="UTF-8">
99
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

‎javascript/main.js‎

Lines changed: 41 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,8 @@
11
document.addEventListener('DOMContentLoaded', function() {
2-
// Menu search
2+
var $root = document.documentElement;
3+
var template = $root.dataset.template;
4+
5+
// Menu: Search
36
var $searchInput = document.getElementById('menu-search-input');
47
var $menuList = document.getElementById('menu-list');
58
var $menuItems = document.querySelectorAll('#menu-list li a');
@@ -59,16 +62,22 @@ document.addEventListener('DOMContentLoaded', function() {
5962
});
6063

6164
window.addEventListener('keydown', function(event) {
62-
var key = event.key || false;
65+
var key = event.code || event.key || false;
6366

6467
switch (key) {
6568
case 'Enter':
6669
if (isSearching) {
67-
event.preventDefault();
68-
var $target = document.getElementById(matches[currentMatch].propertyName);
70+
var propertyName = matches[currentMatch].propertyName;
6971

70-
if ($target) {
71-
$target.scrollIntoView();
72+
if (template === 'index') {
73+
event.preventDefault();
74+
var $target = document.getElementById(propertyName);
75+
76+
if ($target) {
77+
$target.scrollIntoView();
78+
}
79+
} else {
80+
window.location = window.location.origin + '/#' + propertyName;
7281
}
7382
}
7483
break;
@@ -108,7 +117,7 @@ document.addEventListener('DOMContentLoaded', function() {
108117
cleanMenu($menuItems, true, true);
109118
}
110119

111-
// Menu scroll
120+
// Menu: Shadows
112121
var $menuUl = document.getElementById('menu-list-ul');
113122
var $menuShadowTop = document.getElementById('menu-shadow-top');
114123
var $menuShadowBottom = document.getElementById('menu-shadow-bottom');
@@ -148,7 +157,28 @@ document.addEventListener('DOMContentLoaded', function() {
148157
}
149158
setMenuShadows();
150159

151-
// Copy to clipboard
160+
// Menu: Mobile
161+
var $menuNav = document.getElementById('menu-nav');
162+
var $menuNavOpen = document.getElementById('menu-nav-open');
163+
var $menuNavClose = document.getElementById('menu-nav-close');
164+
165+
$menuNavOpen.addEventListener('click', function(event) {
166+
$menuNav.classList.add('is-active');
167+
});
168+
169+
$menuNavClose.addEventListener('click', function(event) {
170+
$menuNav.classList.remove('is-active');
171+
});
172+
173+
Array.prototype.forEach.call($menuItems, function($menuItem, index) {
174+
$menuItem.addEventListener('click', function(event) {
175+
if (window.innerWidth < 800) {
176+
$menuNav.classList.remove('is-active');
177+
}
178+
});
179+
});
180+
181+
// Property: Copy to clipboard
152182
var clipboard = new Clipboard('.example-value');
153183

154184
Array.prototype.forEach.call(document.querySelectorAll('.example-value'), function($el) {
@@ -162,7 +192,7 @@ document.addEventListener('DOMContentLoaded', function() {
162192
e.trigger.classList.add('is-copied');
163193
});
164194

165-
// Share property
195+
// Property: Share modal
166196
var $propertyShares = document.querySelectorAll('.property-share');
167197
var $modalInput = document.getElementById('modal-input');
168198
var baseURL = '' + window.location.origin + window.location.pathname;
@@ -233,20 +263,7 @@ document.addEventListener('DOMContentLoaded', function() {
233263
setTimeout(function() { e.trigger.innerHTML = 'Copy'; }, 500);
234264
});
235265

236-
// Mobile menu
237-
var $menuNav = document.getElementById('menu-nav');
238-
var $menuNavOpen = document.getElementById('menu-nav-open');
239-
var $menuNavClose = document.getElementById('menu-nav-close');
240-
241-
$menuNavOpen.addEventListener('click', function(event) {
242-
$menuNav.classList.add('is-active');
243-
});
244-
245-
$menuNavClose.addEventListener('click', function(event) {
246-
$menuNav.classList.remove('is-active');
247-
});
248-
249-
// Launch animations
266+
// Property: Launch animations
250267
var $launchButtons = document.querySelectorAll('.property-animation-toggle');
251268

252269
Array.prototype.forEach.call($launchButtons, function($launchButton, index) {
@@ -262,7 +279,7 @@ document.addEventListener('DOMContentLoaded', function() {
262279
});
263280
});
264281

265-
// Enable fixed
282+
// Property: Enable fixed
266283
var $fixedButtons = document.querySelectorAll('.example-fixed-toggle');
267284

268285
Array.prototype.forEach.call($fixedButtons, function($fixedButton, index) {

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"build-clean": "rm css/website.css",
1010
"build-sass": "node-sass --output-style compressed css/website.sass css/website.css",
1111
"develop": "node-sass --output-style expanded css/website.sass css/website.css",
12-
"start": "npm run build-sass -- --watch"
12+
"start": "npm run develop -- --watch"
1313
},
1414
"keywords": [
1515
"css",

‎sass/controls.sass‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,7 @@
9090
width: 14px
9191
&:before,
9292
&:after
93-
background: $text-strong
93+
background: $link-invert
9494
border-radius: 4px
9595
content: ""
9696
display: block

‎sass/header.sass‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,10 +8,10 @@ $gradient-bottom: linear-gradient($primary, lighten($primary, 5%))
88
background: $plum
99
color: $plum-dark
1010
display: flex
11-
justify-content: center
12-
padding: 3rem 2rem
11+
justify-content: flex-start
12+
padding: 2rem
1313
position: relative
14-
text-align: center
14+
text-align: left
1515

1616
$height: 96px
1717
$width: 486px
@@ -21,12 +21,11 @@ $width: 486px
2121
background-position: center center
2222
background-repeat: no-repeat
2323
background-size: $width $height
24-
display: block
24+
display: inline-block
2525
height: $height
26-
margin-left: auto
27-
margin-right: auto
2826
overflow: hidden
2927
text-indent: -290486px
28+
vertical-align: top
3029
width: $width
3130
@media (max-width: 600px)
3231
background-size: ($width / 2) ($height / 2)
@@ -37,7 +36,8 @@ $width: 486px
3736
color: $plum-invert
3837
font-size: 1.4rem
3938
font-weight: $weight-bold
40-
margin-top: 0.5rem
39+
margin-bottom: 0.5rem
40+
margin-top: 1rem
4141
text-shadow: 0 2px 4px rgba(#000, 0.1)
4242

4343
.header-subtitle
@@ -74,9 +74,11 @@ $width: 486px
7474
+desktop
7575
.header
7676
height: $header-height
77+
justify-content: center
7778
left: $menu-width
7879
min-height: 200px
7980
padding: 0 3rem
8081
position: fixed
8182
right: 0
83+
text-align: center
8284
top: 0

‎sass/menu.sass‎

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,6 @@
22
background: #fff
33
position: relative
44

5-
.menu-header
6-
padding: 2rem
7-
padding-bottom: 1.5rem
8-
95
.menu-logo
106
align-items: center
117
display: flex
@@ -35,7 +31,6 @@
3531
.menu-share
3632
align-items: center
3733
display: flex
38-
margin-top: 0.5rem
3934
position: relative
4035

4136
.menu-share-label
@@ -72,8 +67,8 @@
7267
.menu-share-nav
7368
font-weight: $weight-bold
7469
position: absolute
75-
right: 0
76-
top: 0.5rem
70+
right: 1rem
71+
top: 1rem
7772

7873
.menu-nav
7974
align-items: stretch
@@ -156,19 +151,33 @@
156151

157152
.menu-close
158153
align-items: center
159-
color: $text-strong
154+
background: $link
155+
color: $link-invert
160156
display: flex
161157
flex-grow: 0
162158
flex-shrink: 0
163159
font-weight: $weight-bold
164160
justify-content: center
165161
padding: 1rem
166162
text-align: center
163+
strong
164+
color: $link-invert
167165
.icon
168166
margin-right: 0.25rem
169-
margin-top: 2px
167+
margin-top: 1px
170168

171169
+mobile
170+
.menu-logo,
171+
.menu-title
172+
display: none
173+
.menu-share
174+
background: #fff
175+
bottom: 0
176+
box-shadow: 0 0 1rem rgba(#000, 0.2)
177+
left: 0
178+
padding: 0.5rem 1rem
179+
position: fixed
180+
right: 0
172181
.menu-nav
173182
+overlay
174183
background: #fff
@@ -194,6 +203,10 @@
194203
.menu-header
195204
flex-grow: 0
196205
flex-shrink: 0
206+
padding: 2rem
207+
padding-bottom: 1.5rem
208+
.menu-share
209+
margin-top: 0.5rem
197210
.menu-share-nav
198211
display: none
199212
.menu-nav

0 commit comments

Comments
 (0)