Skip to content

Commit de89ce5

Browse files
sionguisiongui
committed
Bulma dropdown with Go toggle
1 parent 1f31afe commit de89ce5

File tree

6 files changed

+162
-19
lines changed

6 files changed

+162
-19
lines changed

‎021-bulma-navbar/app.js

+9-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
document.addEventListener('DOMContentLoaded', function () {
44

5-
// Dropdowns
5+
// Dropdowns in navbar
66

77
var $dropdowns = getAll('.navbar-item.has-dropdown:not(.is-hoverable)');
88

@@ -25,6 +25,14 @@ document.addEventListener('DOMContentLoaded', function () {
2525
});
2626
}
2727

28+
// Close dropdowns if ESC pressed
29+
document.addEventListener('keydown', function (event) {
30+
var e = event || window.event;
31+
if (e.keyCode === 27) {
32+
closeDropdowns();
33+
}
34+
});
35+
2836
// Toggles
2937

3038
var $burgers = getAll('.burger');

‎021-bulma-navbar/appdom.go

+27-16
Original file line numberDiff line numberDiff line change
@@ -18,28 +18,39 @@ func SetupNavbarBurgers() {
1818
}
1919
}
2020

21-
func SetupDropdownsInNavbar() {
22-
dds := Document.QuerySelectorAll(".navbar-item.has-dropdown:not(.is-hoverable)")
23-
24-
if len(dds) > 0 {
25-
for _, dd := range dds {
26-
dd.AddEventListener("click", func(e Event) {
27-
e.StopPropagation()
28-
dd.ClassList().Toggle("is-active")
29-
})
30-
}
21+
func main() {
22+
Document.AddEventListener("DOMContentLoaded", func(e Event) {
23+
24+
// Dropdowns in navbar
25+
dds := Document.QuerySelectorAll(".navbar-item.has-dropdown:not(.is-hoverable)")
3126

32-
Document.AddEventListener("click", func(e Event) {
27+
closeDropdowns := func() {
3328
for _, dd := range dds {
3429
dd.ClassList().Remove("is-active")
3530
}
31+
}
32+
33+
if len(dds) > 0 {
34+
for _, dd := range dds {
35+
dd.AddEventListener("click", func(e Event) {
36+
e.StopPropagation()
37+
dd.ClassList().Toggle("is-active")
38+
})
39+
}
40+
41+
Document.AddEventListener("click", func(e Event) {
42+
closeDropdowns()
43+
})
44+
}
45+
46+
// Close dropdowns if ESC pressed
47+
Document.AddEventListener("keydown", func(e Event) {
48+
if e.KeyCode() == 27 {
49+
closeDropdowns()
50+
}
3651
})
37-
}
38-
}
3952

40-
func main() {
41-
Document.AddEventListener("DOMContentLoaded", func(e Event) {
53+
// Toggles
4254
SetupNavbarBurgers()
43-
SetupDropdownsInNavbar()
4455
})
4556
}

‎024-bulma-dropdown/app.js

+41
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
'use strict';
2+
3+
document.addEventListener('DOMContentLoaded', function () {
4+
5+
// Dropdowns
6+
7+
var $dropdowns = getAll('.dropdown:not(.is-hoverable)');
8+
9+
if ($dropdowns.length > 0) {
10+
$dropdowns.forEach(function ($el) {
11+
$el.addEventListener('click', function (event) {
12+
event.stopPropagation();
13+
$el.classList.toggle('is-active');
14+
});
15+
});
16+
17+
document.addEventListener('click', function (event) {
18+
closeDropdowns();
19+
});
20+
}
21+
22+
function closeDropdowns() {
23+
$dropdowns.forEach(function ($el) {
24+
$el.classList.remove('is-active');
25+
});
26+
}
27+
28+
// Close dropdowns if ESC pressed
29+
document.addEventListener('keydown', function (event) {
30+
var e = event || window.event;
31+
if (e.keyCode === 27) {
32+
closeDropdowns();
33+
}
34+
});
35+
36+
// Functions
37+
38+
function getAll(selector) {
39+
return Array.prototype.slice.call(document.querySelectorAll(selector), 0);
40+
}
41+
});

‎024-bulma-dropdown/appdom.go

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
package main
2+
3+
import (
4+
. "github.com/siongui/godom"
5+
)
6+
7+
func main() {
8+
Document.AddEventListener("DOMContentLoaded", func(e Event) {
9+
10+
// Dropdowns
11+
dds := Document.QuerySelectorAll(".dropdown:not(.is-hoverable)")
12+
13+
closeDropdowns := func() {
14+
for _, dd := range dds {
15+
dd.ClassList().Remove("is-active")
16+
}
17+
}
18+
19+
if len(dds) > 0 {
20+
for _, dd := range dds {
21+
dd.AddEventListener("click", func(e Event) {
22+
e.StopPropagation()
23+
dd.ClassList().Toggle("is-active")
24+
})
25+
}
26+
27+
Document.AddEventListener("click", func(e Event) {
28+
closeDropdowns()
29+
})
30+
}
31+
32+
// Close dropdowns if ESC pressed
33+
Document.AddEventListener("keydown", func(e Event) {
34+
if e.KeyCode() == 27 {
35+
closeDropdowns()
36+
}
37+
})
38+
})
39+
}

‎024-bulma-dropdown/index.html

+44
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1">
6+
<title>Bulma dropdown with Go toggle</title>
7+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
8+
</head>
9+
<body>
10+
11+
<div class="dropdown is-active">
12+
<div class="dropdown-trigger">
13+
<button class="button" aria-haspopup="true" aria-controls="dropdown-menu">
14+
<span>Dropdown button</span>
15+
<span class="icon is-small">
16+
<i class="fas fa-angle-down" aria-hidden="true"></i>
17+
</span>
18+
</button>
19+
</div>
20+
<div class="dropdown-menu" id="dropdown-menu" role="menu">
21+
<div class="dropdown-content">
22+
<a href="#" class="dropdown-item">
23+
Dropdown item
24+
</a>
25+
<a class="dropdown-item">
26+
Other dropdown item
27+
</a>
28+
<a href="#" class="dropdown-item is-active">
29+
Active dropdown item
30+
</a>
31+
<a href="#" class="dropdown-item">
32+
Other dropdown item
33+
</a>
34+
<hr class="dropdown-divider">
35+
<a href="#" class="dropdown-item">
36+
With a divider
37+
</a>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<script src="app.js"></script>
43+
</body>
44+
</html>

‎Makefile

+2-2
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ ifndef TRAVIS
77
export PATH := $(GOROOT)/bin:$(GOPATH)/bin:$(PATH)
88
endif
99

10-
GO_VERSION=1.9.2
10+
GO_VERSION=1.9.3
1111

12-
WEBSITE_DIR=023-keyboard-event-gopherjs-vue
12+
WEBSITE_DIR=024-bulma-dropdown
1313

1414
default: fmt js devserver
1515
godom: fmt domjs devserver

0 commit comments

Comments
 (0)