Backups/Mango
1
0
Fork 0
mirror of https://github.com/hkalexling/Mango.git synced 2025-08-03 11:25:29 -04:00
Code Issues Projects Releases Wiki Activity

Prevent flash of white in cards

Browse Source
This commit is contained in:
Alex Ling 2020-03-30 20:35:30 +00:00
parent aa147602fc
commit c6369f9f26
2 changed files with 15 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
public/js/theme.js
View File

@ -15,48 +15,20 @@ const toggleTheme = () => {
saveTheme(newTheme); saveTheme(newTheme);
}; };
// https://stackoverflow.com/a/28344281
const hasClass = (ele,cls) => {
return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
};
const addClass = (ele,cls) => {
if (!hasClass(ele,cls)) ele.className += " "+cls;
};
const removeClass = (ele,cls) => {
if (hasClass(ele,cls)) {
var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
ele.className=ele.className.replace(reg,' ');
}
};
const addClassToClass = (targetCls, newCls) => {
const elements = document.getElementsByClassName(targetCls);
for (let i = 0; i < elements.length; i++) {
addClass(elements[i], newCls);
}
};
const removeClassFromClass = (targetCls, newCls) => {
const elements = document.getElementsByClassName(targetCls);
for (let i = 0; i < elements.length; i++) {
removeClass(elements[i], newCls);
}
};
const setTheme = themeStr => { const setTheme = themeStr => {
if (themeStr === 'dark') { if (themeStr === 'dark') {
document.getElementsByTagName('html')[0].style.background = 'rgb(20, 20, 20)'; $('html').css('background', 'rgb(20, 20, 20)');
addClass(document.getElementsByTagName('body')[0], 'uk-light'); $('body').addClass('uk-light');
addClassToClass('uk-card', 'uk-card-secondary'); $('.uk-card').addClass('uk-card-secondary');
removeClassFromClass('uk-card', 'uk-card-default'); $('.uk-card').removeClass('uk-card-default');
addClassToClass('ui-widget-content', 'dark'); $('.ui-widget-content').addClass('dark');
} }
else { else {
document.getElementsByTagName('html')[0].style.background = ''; $('html').css('background', '');
removeClass(document.getElementsByTagName('body')[0], 'uk-light'); $('body').removeClass('uk-light');
removeClassFromClass('uk-card', 'uk-card-secondary'); $('.uk-card').removeClass('uk-card-secondary');
addClassToClass('uk-card', 'uk-card-default'); $('.uk-card').addClass('uk-card-default');
removeClassFromClass('ui-widget-content', 'dark'); $('.ui-widget-content').removeClass('dark');
} }
}; };
@ -69,10 +41,3 @@ const styleModal = () => {
// do it before document is ready to prevent the initial flash of white // do it before document is ready to prevent the initial flash of white
setTheme(getTheme()); setTheme(getTheme());
document.addEventListener('DOMContentLoaded', () => {
// because this script is attached at the top of HTML, the style on uk-card
// won't be applied because the elements are not available yet. We have to
// apply the theme again for it to take effect
setTheme(getTheme());
}, false);

7
src/views/layout.ecr
View File

@ -10,10 +10,11 @@
<link rel="stylesheet" href="/css/mango.css" /> <link rel="stylesheet" href="/css/mango.css" />
<script defer src="/js/fontawesome.min.js"></script> <script defer src="/js/fontawesome.min.js"></script>
<script defer src="/js/solid.min.js"></script> <script defer src="/js/solid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="/js/theme.js"></script>
</head> </head>
<body> <body>
<script src="/js/theme.js"></script>
<div class="uk-offcanvas-content"> <div class="uk-offcanvas-content">
<div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar"> <div class="uk-navbar-container uk-navbar-transparent" uk-navbar="uk-navbar">
<div id="mobile-nav" uk-offcanvas="overlay: true"> <div id="mobile-nav" uk-offcanvas="overlay: true">
@ -59,7 +60,9 @@
<%= content %> <%= content %>
</div> </div>
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script>
setTheme(getTheme());
</script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/uikit@3.3.1/dist/js/uikit-icons.min.js"></script>