Add menu hover delay on user pages + editor
This commit is contained in:
parent
a32fc44153
commit
fee44e7c8d
|
@ -60,7 +60,7 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
background: @lightNavHoverBG;
|
background: @lightNavHoverBG;
|
||||||
}
|
}
|
||||||
&:hover > ul {
|
&:hover > ul, &.open > ul {
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
&.selected {
|
&.selected {
|
||||||
|
|
|
@ -0,0 +1,34 @@
|
||||||
|
var menuItems = document.querySelectorAll('li.has-submenu');
|
||||||
|
var menuTimer;
|
||||||
|
function closeMenu($menu) {
|
||||||
|
$menu.querySelector('a').setAttribute('aria-expanded', "false");
|
||||||
|
$menu.className = "has-submenu";
|
||||||
|
}
|
||||||
|
Array.prototype.forEach.call(menuItems, function(el, i){
|
||||||
|
el.addEventListener("mouseover", function(event){
|
||||||
|
let $menu = document.querySelectorAll(".has-submenu.open");
|
||||||
|
if ($menu.length > 0) {
|
||||||
|
closeMenu($menu[0]);
|
||||||
|
}
|
||||||
|
this.className = "has-submenu open";
|
||||||
|
this.querySelector('a').setAttribute('aria-expanded', "true");
|
||||||
|
clearTimeout(menuTimer);
|
||||||
|
});
|
||||||
|
el.addEventListener("mouseout", function(event){
|
||||||
|
menuTimer = setTimeout(function(event){
|
||||||
|
let $menu = document.querySelector(".has-submenu.open");
|
||||||
|
closeMenu($menu);
|
||||||
|
}, 500);
|
||||||
|
});
|
||||||
|
el.querySelector('a').addEventListener("click", function(event){
|
||||||
|
if (this.parentNode.className == "has-submenu") {
|
||||||
|
this.parentNode.className = "has-submenu open";
|
||||||
|
this.setAttribute('aria-expanded', "true");
|
||||||
|
} else {
|
||||||
|
this.parentNode.className = "has-submenu";
|
||||||
|
this.setAttribute('aria-expanded', "false");
|
||||||
|
}
|
||||||
|
event.preventDefault();
|
||||||
|
return false;
|
||||||
|
});
|
||||||
|
});
|
|
@ -24,7 +24,7 @@
|
||||||
<nav id="user-nav">
|
<nav id="user-nav">
|
||||||
{{if .Username}}
|
{{if .Username}}
|
||||||
<nav class="dropdown-nav">
|
<nav class="dropdown-nav">
|
||||||
<ul><li><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
|
<ul><li class="has-submenu"><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
|
||||||
{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
|
{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
|
||||||
<li><a href="/me/settings">Account settings</a></li>
|
<li><a href="/me/settings">Account settings</a></li>
|
||||||
<li><a href="/me/export">Export</a></li>
|
<li><a href="/me/export">Export</a></li>
|
||||||
|
@ -67,6 +67,7 @@
|
||||||
{{ template "footer" . }}
|
{{ template "footer" . }}
|
||||||
|
|
||||||
{{if not .JSDisabled}}
|
{{if not .JSDisabled}}
|
||||||
|
<script type="text/javascript" src="/js/menu.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
{{if .WebFonts}}
|
{{if .WebFonts}}
|
||||||
try { // Google Fonts
|
try { // Google Fonts
|
||||||
|
|
|
@ -40,7 +40,7 @@
|
||||||
</head>
|
</head>
|
||||||
<body id="collection" itemscope itemtype="http://schema.org/WebPage">
|
<body id="collection" itemscope itemtype="http://schema.org/WebPage">
|
||||||
{{if or .IsOwner .SingleUser}}<nav id="manage"><ul>
|
{{if or .IsOwner .SingleUser}}<nav id="manage"><ul>
|
||||||
<li><a onclick="void(0)">☰ Menu</a>
|
<li class="has-submenu"><a onclick="void(0)">☰ Menu</a>
|
||||||
<ul>
|
<ul>
|
||||||
{{ if .IsOwner }}
|
{{ if .IsOwner }}
|
||||||
{{if .SingleUser}}
|
{{if .SingleUser}}
|
||||||
|
@ -117,6 +117,7 @@
|
||||||
<script src="/js/h.js"></script>
|
<script src="/js/h.js"></script>
|
||||||
<script src="/js/postactions.js"></script>
|
<script src="/js/postactions.js"></script>
|
||||||
<script src="/js/localdate.js"></script>
|
<script src="/js/localdate.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/menu.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
var deleting = false;
|
var deleting = false;
|
||||||
function delPost(e, id, owned) {
|
function delPost(e, id, owned) {
|
||||||
|
|
|
@ -24,7 +24,7 @@
|
||||||
{{if not .SingleUser}}<h1><a href="/me/c/" title="View blogs"><img class="ic-24dp" src="/img/ic_blogs_dark@2x.png" /></a></h1>{{end}}
|
{{if not .SingleUser}}<h1><a href="/me/c/" title="View blogs"><img class="ic-24dp" src="/img/ic_blogs_dark@2x.png" /></a></h1>{{end}}
|
||||||
<nav id="target" {{if .SingleUser}}style="margin-left:0"{{end}}><ul>
|
<nav id="target" {{if .SingleUser}}style="margin-left:0"{{end}}><ul>
|
||||||
{{if .Editing}}<li>{{if .EditCollection}}<a href="{{.EditCollection.CanonicalURL}}">{{.EditCollection.Title}}</a>{{else}}<a>Draft</a>{{end}}</li>
|
{{if .Editing}}<li>{{if .EditCollection}}<a href="{{.EditCollection.CanonicalURL}}">{{.EditCollection.Title}}</a>{{else}}<a>Draft</a>{{end}}</li>
|
||||||
{{else}}<li><a id="publish-to"><span id="target-name">Draft</span> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
|
{{else}}<li class="has-submenu"><a id="publish-to"><span id="target-name">Draft</span> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
|
||||||
<ul>
|
<ul>
|
||||||
<li class="menu-heading">Publish to...</li>
|
<li class="menu-heading">Publish to...</li>
|
||||||
{{if .Blogs}}{{range $idx, $el := .Blogs}}
|
{{if .Blogs}}{{range $idx, $el := .Blogs}}
|
||||||
|
@ -45,7 +45,7 @@
|
||||||
</li>{{end}}
|
</li>{{end}}
|
||||||
</ul></nav>
|
</ul></nav>
|
||||||
<nav id="font-picker" class="if-room room-3 hidden" style="margin-left:-1em"><ul>
|
<nav id="font-picker" class="if-room room-3 hidden" style="margin-left:-1em"><ul>
|
||||||
<li><a href="#" id="" onclick="return false"><img class="ic-24dp" src="/img/ic_font_dark@2x.png" /> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
|
<li class="has-submenu"><a href="#" id="" onclick="return false"><img class="ic-24dp" src="/img/ic_font_dark@2x.png" /> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /></a>
|
||||||
<ul style="text-align: center">
|
<ul style="text-align: center">
|
||||||
<li class="menu-heading">Font</li>
|
<li class="menu-heading">Font</li>
|
||||||
<li class="selected"><a class="font norm" href="#norm">Serif</a></li>
|
<li class="selected"><a class="font norm" href="#norm">Serif</a></li>
|
||||||
|
@ -66,6 +66,7 @@
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<script src="/js/h.js"></script>
|
<script src="/js/h.js"></script>
|
||||||
|
<script type="text/javascript" src="/js/menu.js"></script>
|
||||||
<script>
|
<script>
|
||||||
function toggleTheme() {
|
function toggleTheme() {
|
||||||
var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
|
var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));
|
||||||
|
|
|
@ -20,6 +20,7 @@
|
||||||
</nav>
|
</nav>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
||||||
|
<script type="text/javascript" src="/js/menu.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
try { // Google Fonts
|
try { // Google Fonts
|
||||||
WebFontConfig = {
|
WebFontConfig = {
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
<nav id="user-nav">
|
<nav id="user-nav">
|
||||||
{{if .Username}}
|
{{if .Username}}
|
||||||
<nav class="dropdown-nav">
|
<nav class="dropdown-nav">
|
||||||
<ul><li><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
|
<ul><li class="has-submenu"><a>{{.Username}}</a> <img class="ic-18dp" src="/img/ic_down_arrow_dark@2x.png" /><ul>
|
||||||
{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
|
{{if .IsAdmin}}<li><a href="/admin">Admin dashboard</a></li>{{end}}
|
||||||
<li><a href="/me/settings">Account settings</a></li>
|
<li><a href="/me/settings">Account settings</a></li>
|
||||||
<li><a href="/me/import">Import posts</a></li>
|
<li><a href="/me/import">Import posts</a></li>
|
||||||
|
|
Loading…
Reference in New Issue