Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   переключение между 2 режимами отображения (https://javascript.ru/forum/dom-window/73883-pereklyuchenie-mezhdu-2-rezhimami-otobrazheniya.html)

Seran4ek 25.05.2018 16:11

переключение между 2 режимами отображения
 
Всем привет, имеется страничка, на которой контент может отображаться в 2 вида - по центру( с max-width) и по всей ширине, выполнено это сейчас довольно топорно - имеется функция setStyle, меняет стиль по клику на кнопочку:
var setStyle = function(style) {
		    	if(style == 'default') {
		    		storage.style.сохранить('default')
		    	    обертка_контента.classList.remove('centered');
		    	} else {
		    		storage.style.сохранить('centered');
		    		обертка_контента.classList.add('centered');
		    	}
		    }

она упрощена, но суть понятна. Далее при загрузке страницы сразу после html кода обертки добавляется <script> </script> с содержимым вроде
if(storage.read('style') == 'centered') {
	обертка_контента.classList.add('centered');
}


Работает это как ожидается, хорошо и быстро, но вопрос в том, что у меня подозрительное ощущение, что это все можно сделать "красивее", но я толком даже не могу придумать что именно мне надо искать в гугле, какой паттерн рассматривать.

Соответственно жду, что форумчане натолкнут меня на какую-то мысль по этому поводу, чтобы реализовать красивее, может есть какие-то известные сайты с похожим поведением, где я смогу поискать реализацию

void() 26.05.2018 01:46

window.addEventListener("DOMContentLoaded", function() {
обертка_контента.classList.add(storage.read('style'));

function setStyle() {
  обертка_контента.classList.toggle('centered');
  storage.style.сохранить(обертка_контента.classList);
}
});

Seran4ek 26.05.2018 13:48

DOMContentLoaded не подходит, так как при добавлении класса на этом этапе наблюдается "мигание" при переключении стилей, класс нужно добавить как можно раньше, потому это и делается сразу после html кода обертки инлайн скриптом, а вот насчет toggle открыли мне глаза, спасибо, забыл совсем про этот чудный метод


Часовой пояс GMT +3, время: 04:55.