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 7 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 () { $(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);
}; };
}); });

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

@ -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>

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

@ -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"

Write Preview
Loading…
Cancel
Save