Как сделать, чтобы изменения toggleClass сохранялись при перемещении посетителя между страницами? - PullRequest
Новая
       44

Как сделать, чтобы изменения toggleClass сохранялись при перемещении посетителя между страницами?

1 голос
/ 09 июня 2019

За исключением потенциальных проблем эффективности кодирования, я собрал функцию jQuery для моей кнопки переключения.При нажатии на включение и выключение сайт применяет различные классы и стили CSS для темного режима.Это работает очень хорошо: 

$(function() {
   $(".slider.round").click(function() {
     $("#canvas-wrapper").toggleClass("dark-canvas");
     $("#page-body-wrapper p").toggleClass("dark-body-text");
     $("h2, h3, .summary-title a, .summary-read-more-link, .summary-excerpt a, #block-yui_3_17_2_32_1456852631790_12688 a").toggleClass("dark-headings-links");
     $("#block-yui_3_17_2_2_1457035305182_118918 h2").toggleClass("dark-intro");
     $(".summary-item").toggleClass("dark-summary");
     $(".summary-excerpt strong, #sidebar-one h2").toggleClass("dark-excerpt-sidebar");
     $("#sidebar-one, .sqs-col-1").toggleClass("dark-sidebar");
     $(".summary-metadata-item a, .summary-metadata-item--date").toggleClass("dark-metadata");
   });
});

Однако есть одна большая проблема.Скажем, посетитель переключается в темный режим, соответственно изменяя внешний вид.Когда они перезагружают страницу или перемещаются между страницами, это состояние каждый раз сбрасывается.Это раздражает, когда пользователь перемещается по темному интерфейсу, а затем неожиданно появляется белый дизайн.

Что я мог бы добавить к этой функции, чтобы эти toggleClass состояния сохранялись от страницы к странице?Другой пользователь указал мне на localStorage и sessionStorage.К сожалению, я все еще новичок в jQuery, и мне не хватает знаний, чтобы составить что-то запутанное, а тем более понять смысл связанной терминологии.

Может кто-нибудь помочь с этим?Это было бы огромной помощью и сделало шаг вперед!

Спасибо миллиону ребят, вы рок-звезды:)

Ответы [ 2 ]

1 голос
/ 10 июня 2019

Проблема, с которой вы столкнулись, является признаком отсутствия разделения между вашим уровнем данных и вашим уровнем представления. Вместо непосредственного изменения html-кода, когда пользователь нажимает на переключатель, вы хотите обновить слой данных, а затем пересмотреть представление. В идеале вы должны использовать какой-нибудь шаблон JavaScript для рендеринга вашего html, например, функцию lodash template, или фреймворк, такой как angular / реагировать. Тем не менее, я сохранил пример только с помощью jquery. Поток будет выглядеть примерно так:

Начальная загрузка страницы: Data -> View

Переключение: Update Data -> Rerender View

Таким образом, вы отслеживаете свой темный режим в переменной, а затем обновляете свой HTML, когда он меняется: 

var localStorageKey = 'appState';
var appState;

function loadState() {
    const json = localStorage[localStorageKey];

    if (json) appState = JSON.parse(json);
    else appState = {};
}

function saveState() {
    localStorage[localStorageKey] = JSON.stringify(appState);
}

function render() {
    $('body').toggleClass('mode--dark', state.isDarkMode);
}

loadState();
render();

$('.darkModeToggle').click(function() {
    appState.isDarkMode = !appState.isDarkMode;
    saveState();
    render();
});
1 голос
/ 09 июня 2019

Я рекомендую вам упростить код прямо в файле CSS. Вам абсолютно не нужно добавлять gazillion классов к каждому элементу, используя JavaScript.

Вместо этого вы можете работать с одним классом, назовем его «mode - dark», и мы добавим его в тело.

В вашем CSS этот класс может выглядеть так: 

.mode--dark #canvas-wrapper {
 // your styles
}

.mode--dark #page-body-wrapper p {
 // your styles
}


//--------------------> right after body script start (this should go right after <body> tag
function getMode() {
    // let's check whether key "mode" exists in our localStorage and if so return true, false otherwise
    return localStorage.getItem('mode') == 'true' ? true : false;
}

var body = document.querySelector('body'),
      modeClass = 'mode--dark',
      switchClass = 'js-switch'; // add any class name to your input for switching between themes and retype it here


if (getMode()) {
    body.classList.add(modeClass);
}

document.addEventListener('change', function (e) {
    var target = e.target;

    if (target.className.indexOf(switchClass) > -1) {
        if(!getMode()) {
            body.classList.add(modeClass);
            // set dark mode to true
            localStorage.setItem('mode', true);
        } else {
            body.classList.remove(modeClass);
            // set dark mode to false
            localStorage.setItem('mode', false);
        }
    }
});

//--------------------> right after body script end

//--------------------> this can be put anywhere start
document.addEventListener('DOMContentLoaded', function (e) {
    var switchInput = document.querySelector('.' + switchClass);

    if(getMode()) {
        switchInput.checked = true;
    }
});
//--------------------> this can be put anywhere end
...