Skip to content

Commit bf8ab7a

Browse files
tobystokestobystokes
committed
copy current menu from collection/wp
1 parent 9c4d1bf commit bf8ab7a

File tree

13 files changed

+459
-18
lines changed

13 files changed

+459
-18
lines changed

Diff for: ‎.editorconfig

+1-1
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ charset = utf-8
88
trim_trailing_whitespace = false
99
insert_final_newline = true
1010

11-
[{*.js,*.json,*.html,*.scss}]
11+
[{*.js,*.json,*.html,*.hbs,*.scss}]
1212
indent_style = space
1313
indent_size = 2
1414

Diff for: ‎fractal/components/_layout/header.hbs

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,11 @@
11
<!DOCTYPE html>
22
<html>
3+
34
<head>
4-
<meta charset="utf-8">
5-
<link media="all" rel="stylesheet" href="{{ path '/css/main.css' }}">
6-
<title>Preview Layout</title>
5+
<meta charset="utf-8">
6+
<link media="all" rel="stylesheet" href="{{ path '/css/main.css' }}">
7+
<title>Preview Layout</title>
78
</head>
8-
<body class="t-btn--x{{#if _target.context.theme}}{{ _target.context.theme }}{{else}}green{{/if}}">
9+
10+
<body class="t-btn--x{{#if _target.context.theme}}{{ _target.context.theme }}{{else}}green{{/if}}"
11+
{{#if _target.context.background}} style="background:{{ _target.context.background }}" {{/if}}>

Diff for: ‎fractal/components/_preview-container.hbs

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
{{> preview/header}}
2-
<div class="o-main o-container">
3-
4-
{{{ yield }}}
5-
6-
</div>
2+
<div class="o-main o-container">
73

8-
{{> preview/footer}}
4+
{{{ yield }}}
5+
6+
</div>
7+
8+
{{> preview/footer}}

Diff for: ‎fractal/components/page/01-masthead/masthead.hbs

+1
Original file line numberDiff line numberDiff line change
@@ -6,5 +6,6 @@
66
<use xlink:href="{{path '/assets/logos/sprite.symbol.svg'}}#{{slug}}" fill="#fff"></use>
77
</svg>
88
</a>
9+
<div class="c-masthead__nav">{{ render '@menu' }}</div>
910
</div>
1011
</header>

Diff for: ‎fractal/components/page/02-menu/menu.config.js

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
module.exports = {
2+
status: "ready",
3+
preview: "@preview-container",
4+
// notes: "[todo: define linking rules]",
5+
context: {
6+
background: "grey",
7+
init:
8+
"<script>document.addEventListener('DOMContentLoaded', function(event) {smgwds.menu();})</script>",
9+
10+
items: [
11+
{
12+
url: "https://www.sciencemuseumgroup.org.uk/",
13+
name: "A single link"
14+
},
15+
{
16+
url: "https://www.sciencemuseumgroup.org.uk/",
17+
name: "Another link",
18+
items: [
19+
{
20+
url: "https://www.sciencemuseumgroup.org.uk/",
21+
name: "A child link with a long title that wraps"
22+
},
23+
{
24+
url: "https://www.sciencemuseumgroup.org.uk/",
25+
name: "Another child link",
26+
items: [
27+
{
28+
url: "https://www.sciencemuseumgroup.org.uk/",
29+
name: "level 3!"
30+
},
31+
{
32+
url: "https://www.sciencemuseumgroup.org.uk/",
33+
name: "Another child link"
34+
},
35+
{
36+
url: "https://www.sciencemuseumgroup.org.uk/",
37+
name: "Another child link"
38+
}
39+
]
40+
},
41+
{
42+
url: "https://www.sciencemuseumgroup.org.uk/",
43+
name: "Another child link"
44+
}
45+
]
46+
},
47+
{
48+
url: "https://www.sciencemuseumgroup.org.uk/",
49+
name: "A single link"
50+
}
51+
]
52+
}
53+
};

Diff for: ‎fractal/components/page/02-menu/menu.hbs

+42
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<nav class="c-menu">
2+
<button class="c-menu__button" aria-controls="primary-menu" aria-expanded="false">Menu</button>
3+
<div class="c-menu__wrapper">
4+
<div id="site-navigation" class="c-menu__nav" aria-expanded="false">
5+
<ul id="primary-menu" class="c-menu__primary-ul">
6+
{{#each items}}
7+
{{#if items}}
8+
<li class="menu-item menu-item-has-children" aria-haspopup="true">
9+
<a href="{{url}}">{{name}}</a>
10+
<button aria-expanded="false" class="dropdown-toggle">
11+
<span class="screen-readers">Expand child
12+
menu</span></button>
13+
<ul class="sub-menu" hidden>
14+
{{#each items}}
15+
{{#if items}}
16+
<li class="menu-item menu-item-has-children" aria-haspopup="true">
17+
<a href="{{url}}">{{name}}</a>
18+
<button aria-expanded="false" class="dropdown-toggle">
19+
<span class="screen-readers">Expand child
20+
menu</span></button>
21+
<ul class="sub-menu" hidden>
22+
{{#each items}}
23+
<li class="menu-item"><a href="{{url}}">{{name}}</a></li>
24+
{{/each}}
25+
</ul>
26+
</li>
27+
{{else}}
28+
<li class="menu-item"><a target="_self" href="{{url}}">{{name}}</a></li>
29+
{{/if}}
30+
{{/each}}
31+
</ul>
32+
</li>
33+
{{else}}
34+
<li class="menu-item"><a target="_self" href="{{url}}">{{name}}</a></li>
35+
{{/if}}
36+
{{/each}}
37+
</ul>
38+
</div>
39+
</div>
40+
</nav>
41+
42+
{{{ init }}}

Diff for: ‎fractal/components/page/logo-panel/logo-panel.config.js

+7-4
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
11
const logos = require("../../../docs/logos.config");
22

3-
//except, delete smg (but not from the original object!)
4-
const panellogos = Object.assign({}, logos);
5-
delete panellogos.context.logos.smg;
3+
var links = {};
4+
Object.keys(logos.context.logos).forEach(function(item) {
5+
if (item != "smg") {
6+
links[item] = logos.context.logos[item];
7+
}
8+
});
69

710
module.exports = {
811
title: "Logo panel (footer)",
912
status: "wip",
1013
preview: "@preview-raw",
1114
context: {
1215
strap: "The Science Museum Group",
13-
links: panellogos.context.logos
16+
links: links
1417
}
1518
};

Diff for: ‎fractal/docs/logos.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ module.exports = {
22
context: {
33
logos: {
44
smg: {
5-
name: "Science Museum Grop",
5+
name: "Science Museum Group",
66
url: "https://group.sciencemuseum.org.uk",
77
width: 388,
88
height: 236,

Diff for: ‎handlebars.js

+3
Original file line numberDiff line numberDiff line change
@@ -109,6 +109,9 @@ exports.options = {
109109
},
110110
log(someVar) {
111111
console.log(someVar);
112+
},
113+
json(someVar) {
114+
JSON.stringify(someVar);
112115
}
113116
}
114117
};

Diff for: ‎src/js/components/menu.js

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
/*
2+
This is an adaptation of
3+
https://github.com/argenteum/accessible-nav-wp
4+
Which is used on the SMG blog sites (Wordpress)
5+
Since we're not tied to WP html output, I have applied the extra a11y attributes directly to the html in
6+
/templates/partials/global/global-header.html
7+
but kept the same class names so css can be re-used without much change.
8+
*/
9+
10+
export default function menu() {
11+
console.log("menu js");
12+
var menuContainer = document.querySelector(".c-menu");
13+
var menuToggle = menuContainer.querySelector(".c-menu__button");
14+
var siteHeaderMenu = menuContainer.querySelector(".c-menu__wrapper");
15+
var siteNavigation = menuContainer.querySelector(".c-menu__nav");
16+
17+
var screenReaderText = {
18+
expand: "Expand child menu",
19+
collapse: "Collapse child menu"
20+
};
21+
22+
// Toggles the menu button
23+
if (menuToggle) {
24+
menuToggle.addEventListener("click", function() {
25+
this.classList.toggle("toggled-on");
26+
siteHeaderMenu.classList.toggle("toggled-on");
27+
28+
this.setAttribute(
29+
"aria-expanded",
30+
this.getAttribute("aria-expanded") === "false" ? "true" : "false"
31+
);
32+
siteNavigation.setAttribute(
33+
"aria-expanded",
34+
this.getAttribute("aria-expanded") === "false" ? "true" : "false"
35+
);
36+
});
37+
}
38+
39+
// If a dropdown has no top-level link (it's dummied to act as group, then skip it from tab order)
40+
siteNavigation.querySelectorAll('[href="#"]').forEach(function(el) {
41+
el.setAttribute("tabindex", -1);
42+
el.addEventListener("click", function(e) {
43+
e.preventDefault();
44+
});
45+
});
46+
47+
// Toggles the sub-menu when dropdown toggle button clicked
48+
siteHeaderMenu.querySelectorAll(".dropdown-toggle").forEach(function(el) {
49+
el.addEventListener("click", function(e) {
50+
var screenReaderSpan = this.querySelectorAll(".screen-readers");
51+
52+
e.preventDefault();
53+
// this.classList.toggle("toggled-on");
54+
// this.nextElementSibling.classList.toggle("toggled-on");
55+
this.nextElementSibling.hidden = !this.nextElementSibling.hidden;
56+
this.setAttribute(
57+
"aria-expanded",
58+
this.getAttribute("aria-expanded") === "false" ? "true" : "false"
59+
);
60+
screenReaderSpan.forEach(function(el) {
61+
el.textContent = screenReaderText.expand
62+
? screenReaderText.collapse
63+
: screenReaderText.expand;
64+
});
65+
});
66+
});
67+
68+
// Adds a class to sub-menus for styling
69+
var submenus = document.querySelectorAll(".sub-menu .menu-item-has-children");
70+
submenus.forEach(function(el) {
71+
// console.log(el.parentNode);
72+
el.parentNode.classList.add("has-sub-menu");
73+
});
74+
}

Diff for: ‎src/js/fractal.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@
33
import accordions from "./components/accordion.js";
44
import audioplayer from "./components/audioplayer.js";
55
import illuminate from "./components/illuminate.js";
6+
import menu from "./components/menu.js";
67

78
export default {
89
accordions,
910
audioplayer,
10-
illuminate
11+
illuminate,
12+
menu
1113
};
1214

1315
import svg4everybody from "svg4everybody";

0 commit comments

Comments
 (0)