MightyPork
/
datatable.directory
1
0
Fork 1
Code Issues 25 Pull Requests Releases Wiki Activity

Use jQuery and use data-* instead of plain attributes

Browse Source
pull/26/head
cpsdqs 6 years ago
parent a63e605a15
commit 09a4b50697
Signed by untrusted user: cpsdqs
GPG Key ID: 3F59586BB7448DD1
3 changed files with 19 additions and 21 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 32
      resources/assets/js/app.js
  2. 4
      resources/views/layouts/app.blade.php
  3. 4
      resources/views/layouts/main-nav.blade.php

32
resources/assets/js/app.js vendored
Unescape View File

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

4
resources/views/layouts/app.blade.php
Unescape View File

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

4
resources/views/layouts/main-nav.blade.php
Unescape View File

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

Write Preview
Loading…
Cancel
Save