library-mirrors/pure
1
0
Fork 0
mirror of https://github.com/pure-css/pure.git synced 2024-11-24 10:44:21 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix #800 - add ui js for menu toggle

Browse Source
This commit is contained in:
redonkulus 2020-05-15 20:53:27 -07:00
parent c53dbde8ad
commit b56a501d93
2 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
site/src/theme/Layout.js
View File

@ -1,4 +1,4 @@
import React from 'react';
import React, { useEffect } from 'react';
import Head from '@docusaurus/Head';
import isInternalUrl from '@docusaurus/isInternalUrl';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
@ -13,6 +13,8 @@ import '../../../build/grids-responsive-min.css';
import '../../static/css/main-grid.css';
import '../../static/css/main.css';
let jsLoaded = false;
function Layout(props) {
const {siteConfig = {}} = useDocusaurusContext();
const {
@ -42,6 +44,17 @@ function Layout(props) {
const faviconUrl = useBaseUrl(favicon);
// load external menu js dynamically
useEffect(() => {
if (!jsLoaded) {
const script = document.createElement('script');
script.type = 'text/javascript';
script.src = '/js/ui.js';
document.head.appendChild(script);
jsLoaded = true;
}
});
return (
<>
<Head>

21
site/static/js/ui.js
View File

@ -10,7 +10,7 @@
length = classes.length,
i = 0;
for(; i < length; i++) {
for (; i < length; i++) {
if (classes[i] === className) {
classes.splice(i, 1);
break;
@ -25,6 +25,7 @@
}
function toggleAll(e) {
console.log('toggle', e.target);
var active = 'active';
e.preventDefault();
@ -33,14 +34,16 @@
toggleClass(menuLink, active);
}
menuLink.onclick = function (e) {
toggleAll(e);
};
content.onclick = function(e) {
if (menu.className.indexOf('active') !== -1) {
toggleAll(e);
function handleEvent(e) {
if (e.target.id === menuLink.id) {
return toggleAll(e);
}
};
if (menu.className.indexOf('active') !== -1) {
return toggleAll(e);
}
}
document.addEventListener('click', handleEvent);
}(this, this.document));