diff options
| -rw-r--r-- | README.md | 8 | ||||
| -rw-r--r-- | archetypes/default.md | 2 | ||||
| -rw-r--r-- | layouts/index.html | 2 | ||||
| -rw-r--r-- | layouts/partials/footer.html | 1 | ||||
| -rw-r--r-- | layouts/partials/google_analytics.html | 16 | ||||
| -rw-r--r-- | layouts/partials/head.html | 30 | ||||
| -rw-r--r-- | layouts/partials/prev_next_post.html | 2 | ||||
| -rw-r--r-- | layouts/partials/sidemenu.html | 2 | ||||
| -rw-r--r-- | layouts/partials/social.html | 61 | ||||
| -rw-r--r-- | layouts/post/post.html (renamed from layouts/indexes/post.html) | 0 | ||||
| -rw-r--r-- | static/css/blackburn.css | 12 | ||||
| -rw-r--r-- | static/js/menus.js | 172 |
12 files changed, 256 insertions, 52 deletions
@@ -37,7 +37,7 @@ Blackburn is a clear and responsive theme for [Hugo](//gohugo.io). * Client-side syntax highlighting by [Highlight.js](//highlightjs.org) (v9.12.0) * Web analytics by Google Analytics * Comments by Disqus -* Icons by Font Awesome (v4.7.0) +* Icons by Font Awesome (v5.9.0) ## Demo @@ -187,18 +187,18 @@ paginate = 10 url = "/about/" ``` -* Override the theme by linking to custom CSS files: +* Override the theme by linking to custom CSS files or URLs: ```toml [params] custom_css = ["css/my.css"] ``` -* Add new behaviours by linking to custom JS files: +* Add new behaviours by linking to custom JS files or URLs: ```toml [params] - custom_js = ["js/my.js"] + custom_js = ["js/my.js", "https://cdnjs.cloudflare.com/ajax/libs/zooming/1.4.2/zooming.min.js"] ``` ## Shortcodes diff --git a/archetypes/default.md b/archetypes/default.md index d41ff85..35f1a6b 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -1,5 +1,5 @@ +++ -title = "{{ replace .TranslationBaseName "-" " " | title }}" +title = "{{ replace .Name "-" " " | title }}" date = "{{ .Date }}" draft = true tags = [] diff --git a/layouts/index.html b/layouts/index.html index 132386f..ef21430 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -6,7 +6,7 @@ </div> <div class="content"> - {{ range ( .Paginate (where .Data.Pages "Type" "post")).Pages }} + {{ range ( .Paginate (where .Site.RegularPages "Type" "post")).Pages }} {{ .Render "summary"}} {{ end }} diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 64f11f3..0ce4001 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,6 +1,7 @@ </div> </div> <script src="{{ .Site.BaseURL }}js/ui.js"></script> +<script src="{{ .Site.BaseURL }}js/menus.js"></script> {{ partial "google_analytics.html" . }} {{ partial "piwik_analytics.html" . }} diff --git a/layouts/partials/google_analytics.html b/layouts/partials/google_analytics.html index 1548a33..e3b83a9 100644 --- a/layouts/partials/google_analytics.html +++ b/layouts/partials/google_analytics.html @@ -1,12 +1,14 @@ {{ with .Site.Params.googleAnalytics }} <script> - (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ - (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), - m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) - })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); - - ga('create', '{{ . }}', 'auto'); - ga('send', 'pageview'); + // Never report traffic that originates from local testing. + if (window.location.hostname != "localhost") { + (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ + (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), + m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) + })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); + ga('create', '{{ . }}', 'auto'); + ga('send', 'pageview'); + } </script> {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index fa9dd3d..4eda3b6 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -2,10 +2,14 @@ <meta http-equiv="content-type" content="text/html; charset=utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="description" content="{{ if .IsNode }}{{ with .Site.Params.description }}{{ . }}{{ end }}{{ else }}{{ with .Description }}{{ . }}{{ end }}{{ end }}"> - {{.Hugo.Generator}} + {{hugo.Generator}} <title>{{ if .IsHome }}{{ .Title }}{{ else }}{{ .Title }} · {{ .Site.Title }}{{ end }}</title> + {{ if .Params.canonical }} + <link rel="canonical" href="{{ .Params.canonical }}"> + {{ end }} + <!-- CSS --> {{ $purecss := "https://cdnjs.cloudflare.com/ajax/libs/pure/1.0.0/" }} <link rel="stylesheet" href="{{ $purecss }}pure-min.css"> @@ -27,14 +31,18 @@ <link rel="stylesheet" href="/css/blackburn.css"> <!-- Icons --> - <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> + <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.9.0/css/all.css"> <!-- Fonts --> <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet" type="text/css"> - <!-- RSS --> - {{ if .RSSLink }} - <link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" href="{{ .RSSLink }}" /> + <!-- MathJax --> + <script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> + + <!-- RSS --> + {{ if .OutputFormats.Get "RSS" }} + <link rel="alternate" type="application/rss+xml" title="{{ .Site.Title }}" + href='{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}' /> {{ end }} {{ with .Site.Params.highlightjs }} @@ -49,10 +57,18 @@ {{ partial "favicon.html" . }} {{ range .Site.Params.custom_css }} - <link rel="stylesheet" href="{{ $.Site.BaseURL }}{{ . }}"> + {{ if findRE "https?://" . }} + <link rel="stylesheet" href="{{ . }}"> + {{ else }} + <link rel="stylesheet" href="{{ $.Site.BaseURL }}{{ . }}"> + {{ end }} {{ end }} {{ range .Site.Params.custom_js }} - <script src="{{ $.Site.BaseURL }}{{ . }}"></script> + {{ if findRE "https?://" . }} + <script src="{{ . }}"></script> + {{ else }} + <script src="{{ $.Site.BaseURL }}{{ . }}"></script> + {{ end }} {{ end }} </head> diff --git a/layouts/partials/prev_next_post.html b/layouts/partials/prev_next_post.html index fb61c00..e82380b 100644 --- a/layouts/partials/prev_next_post.html +++ b/layouts/partials/prev_next_post.html @@ -1,4 +1,4 @@ -{{ if or (.Prev) (.Next) }} +{{ if or (.NextPage) (.PrevPage) }} <div class="prev-next-post pure-g"> <div class="pure-u-1-24" style="text-align: left;"> {{ if .PrevInSection }} diff --git a/layouts/partials/sidemenu.html b/layouts/partials/sidemenu.html index 87fa03c..4ed0801 100644 --- a/layouts/partials/sidemenu.html +++ b/layouts/partials/sidemenu.html @@ -16,7 +16,7 @@ <ul class="pure-menu-children"> {{ range .Children }} <li class="pure-menu-item"> - <a href="{{ .URL }}">{{ .Name }}</a> + <a class="pure-menu-link" href="{{ .URL }}">{{ .Name }}</a> </li> {{ end }} </ul> diff --git a/layouts/partials/social.html b/layouts/partials/social.html index 33e438d..f1cc534 100644 --- a/layouts/partials/social.html +++ b/layouts/partials/social.html @@ -1,9 +1,10 @@ <div class="pure-menu social"> <ul class="pure-menu-list"> - {{ if .RSSLink }} + {{ if .OutputFormats.Get "RSS" }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="{{ .RSSLink }}"><i class="fa fa-rss fa-fw"></i>RSS</a> + <a class="pure-menu-link" href='{{ with .OutputFormats.Get "RSS" }}{{ .RelPermalink }}{{ end }}'><i + class="fas fa-rss"></i>RSS</a> </li> {{ end }} @@ -11,37 +12,37 @@ {{ with .Site.Social.twitter }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://twitter.com/{{ . }}" target="_blank"><i class="fa fa-twitter-square fa-fw"></i>Twitter</a> + <a class="pure-menu-link" href="https://twitter.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-twitter-square fa-fw"></i>Twitter</a> </li> {{ end }} {{ with .Site.Social.gnusocial }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="{{ . }}" target="_blank"><i class="fa fa-comment fa-fw"></i>GNU social</a> + <a class="pure-menu-link" href="{{ . }}" rel="me" target="_blank"><i class="fas fa-comment"></i>GNU social</a> </li> {{ end }} {{ with .Site.Social.facebook }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://facebook.com/{{ . }}" target="_blank"><i class="fa fa-facebook-square fa-fw"></i>Facebook</a> + <a class="pure-menu-link" href="https://facebook.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-facebook-square fa-fw"></i>Facebook</a> </li> {{ end }} {{ with .Site.Social.googleplus }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://plus.google.com/+{{ . }}" target="_blank"><i class="fa fa-google-plus-square fa-fw"></i>Google+</a> + <a class="pure-menu-link" href="https://plus.google.com/+{{ . }}" rel="me" target="_blank"><i class="fab fa-google-plus-square fa-fw"></i>Google+</a> </li> {{ end }} {{ with .Site.Social.weibo }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="http://weibo.com/{{ . }}" target="_blank"><i class="fa fa-weibo fa-fw"></i>Weibo</a> + <a class="pure-menu-link" href="http://weibo.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-weibo fa-fw"></i>Weibo</a> </li> {{ end }} {{ with .Site.Social.tumblr }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://{{ . }}.tumblr.com/" target="_blank"><i class="fa fa-tumblr-square fa-fw"></i>Tumblr</a> + <a class="pure-menu-link" href="https://{{ . }}.tumblr.com/" rel="me" target="_blank"><i class="fab fa-tumblr-square fa-fw"></i>Tumblr</a> </li> {{ end }} @@ -49,49 +50,49 @@ {{ with .Site.Social.instagram }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://instagram.com/{{ . }}" target="_blank"><i class="fa fa-instagram fa-fw"></i>Instagram</a> + <a class="pure-menu-link" href="https://instagram.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-instagram fa-fw"></i>Instagram</a> </li> {{ end }} {{ with .Site.Social.flickr }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://flickr.com/photos/{{ . }}" target="_blank"><i class="fa fa-flickr fa-fw"></i>Flickr</a> + <a class="pure-menu-link" href="https://flickr.com/photos/{{ . }}" rel="me" target="_blank"><i class="fab fa-flickr fa-fw"></i>Flickr</a> </li> {{ end }} {{ with .Site.Social.photo500px }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://500px.com/{{ . }}" target="_blank"><i class="fa fa-500px fa-fw"></i>500px</a> + <a class="pure-menu-link" href="https://500px.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-500px fa-fw"></i>500px</a> </li> {{ end }} {{ with .Site.Social.pinterest }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://pinterest.com/{{ . }}" target="_blank"><i class="fa fa-pinterest-square fa-fw"></i>Pinterest</a> + <a class="pure-menu-link" href="https://pinterest.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-pinterest-square fa-fw"></i>Pinterest</a> </li> {{ end }} {{ with .Site.Social.youtube }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://youtube.com/user/{{ . }}" target="_blank"><i class="fa fa-youtube-square fa-fw"></i>YouTube</a> + <a class="pure-menu-link" href="https://youtube.com/user/{{ . }}" rel="me" target="_blank"><i class="fab fa-youtube-square fa-fw"></i>YouTube</a> </li> {{ end }} {{ with .Site.Social.vimeo }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://vimeo.com/{{ . }}" target="_blank"><i class="fa fa-vimeo-square fa-fw"></i>Vimeo</a> + <a class="pure-menu-link" href="https://vimeo.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-vimeo-square fa-fw"></i>Vimeo</a> </li> {{ end }} {{ with .Site.Social.vine }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://vine.co/{{ . }}" target="_blank"><i class="fa fa-vine fa-fw"></i>Vine</a> + <a class="pure-menu-link" href="https://vine.co/{{ . }}" rel="me" target="_blank"><i class="fab fa-vine fa-fw"></i>Vine</a> </li> {{ end }} {{ with .Site.Social.slideshare }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="http://slideshare.net/{{ . }}" target="_blank"><i class="fa fa-slideshare fa-fw"></i>SlideShare</a> + <a class="pure-menu-link" href="http://slideshare.net/{{ . }}" rel="me" target="_blank"><i class="fab fa-slideshare fa-fw"></i>SlideShare</a> </li> {{ end }} @@ -99,13 +100,13 @@ {{ with .Site.Social.linkedin }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://linkedin.com/in/{{ . }}" target="_blank"><i class="fa fa-linkedin-square fa-fw"></i>LinkedIn</a> + <a class="pure-menu-link" href="https://linkedin.com/in/{{ . }}" rel="me" target="_blank"><i class="fab fa-linkedin"></i></i>LinkedIn</a> </li> {{ end }} {{ with .Site.Social.xing }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://xing.com/profile/{{ . }}" target="_blank"><i class="fa fa-xing-square fa-fw"></i>Xing</a> + <a class="pure-menu-link" href="https://xing.com/profile/{{ . }}" rel="me" target="_blank"><i class="fab fa-xing-square fa-fw"></i>Xing</a> </li> {{ end }} @@ -113,13 +114,13 @@ {{ with .Site.Social.reddit }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://reddit.com/user/{{ . }}" target="_blank"><i class="fa fa-reddit-square fa-fw"></i>Reddit</a> + <a class="pure-menu-link" href="https://reddit.com/user/{{ . }}" rel="me" target="_blank"><i class="fab fa-reddit-square fa-fw"></i>Reddit</a> </li> {{ end }} {{ with .Site.Social.hackernews }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://news.ycombinator.com/user?id={{ . }}" target="_blank"><i class="fa fa-hacker-news fa-fw"></i>Hacker News</a> + <a class="pure-menu-link" href="https://news.ycombinator.com/user?id={{ . }}" rel="me" target="_blank"><i class="fab fa-hacker-news fa-fw"></i>Hacker News</a> </li> {{ end }} @@ -127,31 +128,31 @@ {{ with .Site.Social.github }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://github.com/{{ . }}" target="_blank"><i class="fa fa-github-square fa-fw"></i>GitHub</a> + <a class="pure-menu-link" href="https://github.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-github-square fa-fw"></i>GitHub</a> </li> {{ end }} {{ with .Site.Social.gitlab }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://gitlab.com/{{ . }}" target="_blank"><i class="fa fa-gitlab fa-fw"></i>GitLab</a> + <a class="pure-menu-link" href="https://gitlab.com/{{ . }}" rel="me" target="_blank"><i class="fab fa-gitlab fa-fw"></i>GitLab</a> </li> {{ end }} {{ with .Site.Social.bitbucket }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://bitbucket.org/{{ . }}" target="_blank"><i class="fa fa-bitbucket-square fa-fw"></i>Bitbucket</a> + <a class="pure-menu-link" href="https://bitbucket.org/{{ . }}" rel="me" target="_blank"><i class="fab fa-bitbucket"></i>Bitbucket</a> </li> {{ end }} {{ with .Site.Social.stackoverflow }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://stackoverflow.com/users/{{ . }}" target="_blank"><i class="fa fa-stack-overflow fa-fw"></i>Stack Overflow</a> + <a class="pure-menu-link" href="https://stackoverflow.com/users/{{ . }}" rel="me" target="_blank"><i class="fab fa-stack-overflow fa-fw"></i>Stack Overflow</a> </li> {{ end }} {{ with .Site.Social.serverfault }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://serverfault.com/users/{{ . }}" target="_blank"><i class="fa fa-server fa-fw"></i>Server Fault</a> + <a class="pure-menu-link" href="https://serverfault.com/users/{{ . }}" rel="me" target="_blank"><i class="fab fa-server fa-fw"></i>Server Fault</a> </li> {{ end }} @@ -159,13 +160,13 @@ {{ with .Site.Social.steam }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://steamcommunity.com/id/{{ . }}" target="_blank"><i class="fa fa-steam-square fa-fw"></i>Steam</a> + <a class="pure-menu-link" href="https://steamcommunity.com/id/{{ . }}" rel="me" target="_blank"><i class="fab fa-steam-square fa-fw"></i>Steam</a> </li> {{ end }} {{ with .Site.Social.mobygames }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://www.mobygames.com/developer/sheet/view/developerId,{{ . }}" target="_blank"><i class="fa fa-gamepad fa-fw"></i>MobyGames</a> + <a class="pure-menu-link" href="https://www.mobygames.com/developer/sheet/view/developerId,{{ . }}" rel="me" target="_blank"><i class="fas fa-gamepad"></i>MobyGames</a> </li> {{ end }} @@ -173,13 +174,13 @@ {{ with .Site.Social.lastfm }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="http://last.fm/user/{{ . }}" target="_blank"><i class="fa fa-lastfm-square fa-fw"></i>Last.fm</a> + <a class="pure-menu-link" href="http://last.fm/user/{{ . }}" rel="me" target="_blank"><i class="fab fa-lastfm-square fa-fw"></i>Last.fm</a> </li> {{ end }} {{ with .Site.Social.discogs }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://www.discogs.com/user/{{ . }}" target="_blank"><i class="fa fa-music fa-fw"></i>Discogs</a> + <a class="pure-menu-link" href="https://www.discogs.com/user/{{ . }}" rel="me" target="_blank"><i class="fab fa-music fa-fw"></i>Discogs</a> </li> {{ end }} @@ -187,7 +188,7 @@ {{ with .Site.Social.keybase }} <li class="pure-menu-item"> - <a class="pure-menu-link" href="https://keybase.io/{{ . }}" target="_blank"><i class="fa fa-key fa-fw"></i>Keybase</a> + <a class="pure-menu-link" href="https://keybase.io/{{ . }}" rel="me" target="_blank"><i class="fas fa-key"></i>Keybase</a> </li> {{ end }} diff --git a/layouts/indexes/post.html b/layouts/post/post.html index 4f88857..4f88857 100644 --- a/layouts/indexes/post.html +++ b/layouts/post/post.html diff --git a/static/css/blackburn.css b/static/css/blackburn.css index c591985..0ddd380 100644 --- a/static/css/blackburn.css +++ b/static/css/blackburn.css @@ -47,6 +47,14 @@ article > footer { overflow: hidden; } +#menu { + overflow-y: visible; +} + +#menu a { + padding: 0.6em; +} + #menu .brand { font-family: Raleway; font-weight: bold; @@ -62,6 +70,10 @@ article > footer { font-size: 0.9em; } +#menu .pure-menu ul.pure-menu-children { + border-top: none; +} + i { display: inline-block; margin-right: 0.2em; diff --git a/static/js/menus.js b/static/js/menus.js new file mode 100644 index 0000000..3172361 --- /dev/null +++ b/static/js/menus.js @@ -0,0 +1,172 @@ +(function (window, document) { + 'use strict'; + + // Enable drop-down menus in Pure + // Inspired by YUI3 gallery-simple-menu by Julien LeComte + // [https://github.com/yui/yui3-gallery/blob/master/src/gallery-simple-menu/js/simple-menu.js] + + function PureDropdown(dropdownParent) { + + var PREFIX = 'pure-', + ACTIVE_CLASS_NAME = PREFIX + 'menu-active', + ARIA_ROLE = 'role', + ARIA_HIDDEN = 'aria-hidden', + MENU_OPEN = 0, + MENU_CLOSED = 1, + MENU_PARENT_CLASS_NAME = 'pure-menu-has-children', + MENU_ACTIVE_SELECTOR = '.pure-menu-active', + MENU_LINK_SELECTOR = '.pure-menu-link', + MENU_SELECTOR = '.pure-menu-children', + DISMISS_EVENT = (window.hasOwnProperty && + window.hasOwnProperty('ontouchstart')) ? + 'touchstart' : 'mousedown', + + ARROW_KEYS_ENABLED = true, + + ddm = this; // drop down menu + + this._state = MENU_CLOSED; + + this.show = function () { + if (this._state !== MENU_OPEN) { + this._dropdownParent.classList.add(ACTIVE_CLASS_NAME); + this._menu.setAttribute(ARIA_HIDDEN, false); + this._state = MENU_OPEN; + } + }; + + this.hide = function () { + if (this._state !== MENU_CLOSED) { + this._dropdownParent.classList.remove(ACTIVE_CLASS_NAME); + this._menu.setAttribute(ARIA_HIDDEN, true); + this._link.focus(); + this._state = MENU_CLOSED; + } + }; + + this.toggle = function () { + this[this._state === MENU_CLOSED ? 'show' : 'hide'](); + }; + + this.halt = function (e) { + e.stopPropagation(); + e.preventDefault(); + }; + + this._dropdownParent = dropdownParent; + this._link = this._dropdownParent.querySelector(MENU_LINK_SELECTOR); + this._menu = this._dropdownParent.querySelector(MENU_SELECTOR); + this._firstMenuLink = this._menu.querySelector(MENU_LINK_SELECTOR); + + // Set ARIA attributes + this._link.setAttribute('aria-haspopup', 'true'); + this._menu.setAttribute(ARIA_ROLE, 'menu'); + this._menu.setAttribute('aria-labelledby', this._link.getAttribute('id')); + this._menu.setAttribute('aria-hidden', 'true'); + [].forEach.call( + this._menu.querySelectorAll('li'), + function(el){ + el.setAttribute(ARIA_ROLE, 'presentation'); + } + ); + [].forEach.call( + this._menu.querySelectorAll('a'), + function(el){ + el.setAttribute(ARIA_ROLE, 'menuitem'); + } + ); + + // Toggle on click + this._link.addEventListener('click', function (e) { + e.stopPropagation(); + e.preventDefault(); + ddm.toggle(); + }); + + // Keyboard navigation + document.addEventListener('keydown', function (e) { + var currentLink, + previousSibling, + nextSibling, + previousLink, + nextLink; + + // if the menu isn't active, ignore + if (ddm._state !== MENU_OPEN) { + return; + } + + // if the menu is the parent of an open, active submenu, ignore + if (ddm._menu.querySelector(MENU_ACTIVE_SELECTOR)) { + return; + } + + currentLink = ddm._menu.querySelector(':focus'); + + // Dismiss an open menu on ESC + if (e.keyCode === 27) { + /* Esc */ + ddm.halt(e); + ddm.hide(); + } + // Go to the next link on down arrow + else if (ARROW_KEYS_ENABLED && e.keyCode === 40) { + /* Down arrow */ + ddm.halt(e); + // get the nextSibling (an LI) of the current link's LI + nextSibling = (currentLink) ? currentLink.parentNode.nextSibling : null; + // if the nextSibling is a text node (not an element), go to the next one + while (nextSibling && nextSibling.nodeType !== 1) { + nextSibling = nextSibling.nextSibling; + } + nextLink = (nextSibling) ? nextSibling.querySelector('.pure-menu-link') : null; + // if there is no currently focused link, focus the first one + if (!currentLink) { + ddm._menu.querySelector('.pure-menu-link').focus(); + } + else if (nextLink) { + nextLink.focus(); + } + } + // Go to the previous link on up arrow + else if (ARROW_KEYS_ENABLED && e.keyCode === 38) { + /* Up arrow */ + ddm.halt(e); + // get the currently focused link + previousSibling = (currentLink) ? currentLink.parentNode.previousSibling : null; + while (previousSibling && previousSibling.nodeType !== 1) { + previousSibling = previousSibling.previousSibling; + } + previousLink = (previousSibling) ? previousSibling.querySelector('.pure-menu-link') : null; + // if there is no currently focused link, focus the last link + if (!currentLink) { + ddm._menu.querySelector('.pure-menu-item:last-child .pure-menu-link').focus(); + } + // else if there is a previous item, go to the previous item + else if (previousLink) { + previousLink.focus(); + } + } + }); + + // Dismiss an open menu on outside event + document.addEventListener(DISMISS_EVENT, function (e) { + var target = e.target; + if (target !== ddm._link && !ddm._menu.contains(target)) { + ddm.hide(); + ddm._link.blur(); + } + }); + + } + + function initDropdowns() { + var dropdownParents = document.querySelectorAll('.pure-menu-has-children'); + for (var i = 0; i < dropdownParents.length; i++) { + var ddm = new PureDropdown(dropdownParents[i]); + } + } + + initDropdowns(); + +}(this, this.document));
\ No newline at end of file |