Use jQuery and use data-* instead of plain attributes

pull/26/head
cpsdqs 6 years ago
parent a63e605a15
commit 09a4b50697
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
  1. 32
      resources/assets/js/app.js
  2. 4
      resources/views/layouts/app.blade.php
  3. 4
      resources/views/layouts/main-nav.blade.php

@ -68,38 +68,36 @@ $(document).on('input keypress paste keyup', 'input[data-autoalias]', function (
$(function () { $(function () {
// theme switcher without reloading // theme switcher without reloading
let themeStyle = document.querySelector('#theme-style'); let themeStyle = $('#theme-style');
const lightURL = themeStyle.getAttribute('light-url'); const lightURL = themeStyle.data('light-url');
const darkURL = themeStyle.getAttribute('dark-url'); const darkURL = themeStyle.data('dark-url');
const navbar = document.querySelector('.page-navbar'); const navbar = $('.page-navbar');
const logo = document.querySelector('#navbar-logo'); const logo = $('#navbar-logo');
window.toggleDarkMode = function () { window.toggleDarkMode = function () {
let newStyle = document.createElement('link'); let newStyle = document.createElement('link');
newStyle.rel = 'stylesheet'; newStyle.rel = 'stylesheet';
if (themeStyle.href === lightURL) { if (themeStyle.attr('href') === lightURL) {
newStyle.href = darkURL; newStyle.href = darkURL;
navbar.classList.remove('navbar-light'); navbar.removeClass('navbar-light');
navbar.classList.add('navbar-dark'); navbar.addClass('navbar-dark');
logo.src = logo.getAttribute('src-dark'); logo.attr('src', logo.data('src-dark'));
document.cookie = "dark_mode=1"; document.cookie = "dark_mode=1";
} else { } else {
newStyle.href = lightURL; newStyle.href = lightURL;
navbar.classList.remove('navbar-dark'); navbar.removeClass('navbar-dark');
navbar.classList.add('navbar-light'); navbar.addClass('navbar-light');
logo.src = logo.getAttribute('src-light'); logo.attr('src', logo.data('src-light'));
document.cookie = "dark_mode=0;expires=" + new Date().toUTCString(); document.cookie = "dark_mode=0;expires=" + new Date().toUTCString();
} }
// remove old css after new css has loaded to prevent FOUC // remove old css after new css has loaded to prevent FOUC
let oldThemeStyle = themeStyle; let oldThemeStyle = themeStyle;
themeStyle = newStyle; themeStyle = $(newStyle);
newStyle.addEventListener('load', () => { themeStyle.on('load', () => oldThemeStyle.remove());
document.head.removeChild(oldThemeStyle); $(document.head).append(themeStyle);
});
document.head.appendChild(newStyle);
}; };
}); });

@ -18,8 +18,8 @@
rel="stylesheet" rel="stylesheet"
id="theme-style" id="theme-style"
href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}" href="{{ dark_mode() ? asset('css/app-dark.css') : asset('css/app.css') }}"
light-url="{{ asset('css/app.css') }}" data-light-url="{{ asset('css/app.css') }}"
dark-url="{{ asset('css/app-dark.css') }}"> data-dark-url="{{ asset('css/app-dark.css') }}">
<link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet"> <link href="{{ asset('fonts/fa-dtbl-1.css') }}" rel="stylesheet">
</head> </head>
<body> <body>

@ -6,8 +6,8 @@
<img <img
id="navbar-logo" id="navbar-logo"
src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg" src="/images/logo{{ dark_mode() ? '-dark' : '' }}.svg"
src-light="/images/logo.svg" data-src-light="/images/logo.svg"
src-dark="/images/logo-dark.svg" data-src-dark="/images/logo-dark.svg"
aria-hidden=true aria-hidden=true
alt="LOGO" alt="LOGO"
height="32px" height="32px"

Loading…
Cancel
Save