Mirrors/writefreely
2
0
Fork 0
mirror of https://github.com/writefreely/writefreely synced 2024-11-10 11:24:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add menu hover delay on user pages + editor

Browse source
This commit is contained in:
Matt Baer 2020-07-30 11:26:29 -04:00
parent a32fc44153
commit fee44e7c8d
7 changed files with 44 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
less/pad.less
View file

@ -60,7 +60,7 @@
&:hover {
background: @lightNavHoverBG;
}
&:hover > ul {
&:hover > ul, &.open > ul {
display: block;
}
&.selected {

34
static/js/menu.js Normal file
View file

@ -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;
});
});

3
templates/base.tmpl
View file

@ -24,7 +24,7 @@
<nav id="user-nav">
{{if .Username}}
<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}}
<li><a href="/me/settings">Account settings</a></li>
<li><a href="/me/export">Export</a></li>
@ -67,6 +67,7 @@
{{ template "footer" . }}
{{if not .JSDisabled}}
<script type="text/javascript" src="/js/menu.js"></script>
<script type="text/javascript">
{{if .WebFonts}}
try { // Google Fonts

3
templates/collection.tmpl
View file

@ -40,7 +40,7 @@
</head>
<body id="collection" itemscope itemtype="http://schema.org/WebPage">
{{if or .IsOwner .SingleUser}}<nav id="manage"><ul>
<li><a onclick="void(0)">&#9776; Menu</a>
<li class="has-submenu"><a onclick="void(0)">&#9776; Menu</a>
<ul>
{{ if .IsOwner }}
{{if .SingleUser}}
@ -117,6 +117,7 @@
<script src="/js/h.js"></script>
<script src="/js/postactions.js"></script>
<script src="/js/localdate.js"></script>
<script type="text/javascript" src="/js/menu.js"></script>
<script type="text/javascript">
var deleting = false;
function delPost(e, id, owned) {

5
templates/pad.tmpl
View file

@ -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}}
<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>
{{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>
<li class="menu-heading">Publish to...</li>
{{if .Blogs}}{{range $idx, $el := .Blogs}}
@ -45,7 +45,7 @@
</li>{{end}}
</ul></nav>
<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">
<li class="menu-heading">Font</li>
<li class="selected"><a class="font norm" href="#norm">Serif</a></li>
@ -66,6 +66,7 @@
</header>
<script src="/js/h.js"></script>
<script type="text/javascript" src="/js/menu.js"></script>
<script>
function toggleTheme() {
var btns = Array.prototype.slice.call(document.getElementById('tools').querySelectorAll('a img'));

1
templates/user/include/footer.tmpl
View file

@ -20,6 +20,7 @@
</nav>
</footer>
<script type="text/javascript" src="/js/menu.js"></script>
<script type="text/javascript">
try { // Google Fonts
WebFontConfig = {

2
templates/user/include/header.tmpl
View file

@ -30,7 +30,7 @@
<nav id="user-nav">
{{if .Username}}
<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}}
<li><a href="/me/settings">Account settings</a></li>
<li><a href="/me/import">Import posts</a></li>