https://atmr.ru/local/components/mendeleev/display_mode/templates/.default/script.js?17407283316826

1class DisplayMode
2{
3    constructor()
4    {
5        this.names = {
6            classes: {},
7            elements: {
8                panel: "#display-mode"
9            },
10            buttons: {
11                panelToggle: ".js-dm, .js-panel-caption",
12                fontSize: ".js-dm-fs",
13                reset: ".js-dm-reset"
14            }
15        }
16        this.dm = {
17            params: {
18                days: 7
19            },
20            elements: {},
21            controls: {}
22        };
23    }
24
25    init()
26    {
27        this.dm.elements.html = document.querySelector("html");
28        let panel, form;
29        if(typeof this.names.elements.panel !== "undefined"){
30            panel = document.querySelector(this.names.elements.panel);
31            if(typeof panel !== "undefined"){
32                this.dm.elements.panel = panel;
33                form = panel.querySelector("form");
34                if(typeof form !== "undefined") this.dm.elements.form = form;
35            }
36        }
37        this.actions();
38        let values = this.getModeValues(this.names.classes);
39        if(Object.entries(values).length > 0){
40            for(const key in values){
41                let value = values[key];
42                if(key === "dm-img"){
43                    this.dm.elements.html.classList.add(value);
44                }else{
45                    for(const className of this.names.classes[key]){
46                        this.dm.elements.html.classList.remove(className);
47                    }
48                    this.dm.elements.html.classList.add(key + value);
49                }
50            }
51            this.dm.elements.panel.classList.add("opened");
52        }
53    }
54
55    //значения из cookie
56    getModeValues(oListParams)
57    {
58        let values = {};
59        for(let key in oListParams){
60            let paramValue = CookieManager.get(key);
61            if(paramValue !== null) values[key] = paramValue;
62        }
63        return values;
64    }
65
66    actions(){
67        for(let elementName in this.dm.elements){
68            let element = this.dm.elements[elementName];
69
70            //форма и её элементы
71            if(elementName === "form") {
72                //обработчик изменения формы
73                this.change(element);
74
75                //собираем наименования классов по группам
76                //для удаления из html при добавлении активного класса
77                let inputs = element.querySelectorAll("input");
78                for(const input of inputs){
79                    let sAttrName = input.getAttribute("data-dm-name"),
80                        value = input.value;
81
82                    if(sAttrName !== null && (typeof value !== "undefined" || value !== "")){
83                        if(typeof this.names.classes[sAttrName] === "undefined") this.names.classes[sAttrName] = [];
84                        if(input.type === "checkbox"){
85                            this.names.classes[sAttrName].push(value);
86                        }else{
87                            this.names.classes[sAttrName].push(sAttrName + value);
88                        }
89                    }
90                }
91            }
92        }
93
94        let DMPanel = this.dm.elements.panel,
95            buttons = document.querySelectorAll(this.names.buttons.panelToggle);
96
97        //открытие/закрытие панели
98        for(let button of buttons){
99            if(typeof button !== "undefined" && typeof DMPanel !== "undefined"){
100                button.addEventListener("click", function(){
101                    DMPanel.classList.toggle("opened");
102                });
103                this.dm.controls.panelToggle = button;
104            }
105        }
106
107        //сброс параметров отображения
108        buttons = document.querySelectorAll(this.names.buttons.reset);
109        for(let button of buttons){
110            if(typeof button !== "undefined" && typeof DMPanel !== "undefined"){
111                button.addEventListener("click", () => {
112                    for(const className in this.names.classes){
113                        this.reset(className);
114                    }
115                    DMPanel.classList.remove("opened");
116                });
117            }
118        }
119    }
120
121    change(form)
122    {
123        let dm = this.dm,
124            names = this.names;
125
126        form.addEventListener("submit", (event) => {
127            event.preventDefault();
128        });
129
130        form.addEventListener("change", (event) => {
131            let input = event.target,
132                type = input.type,
133                value = input.value,
134                sDMName = input.getAttribute("data-dm-name");
135
136            if(type === "radio"){
137                if(sDMName !== null && value !== ""){
138                    for(const className of names.classes[sDMName]){
139                        dm.elements.html.classList.remove(className);
140                    }
141                    dm.elements.html.classList.add(sDMName + value);
142                    CookieManager.set(sDMName, value, dm.params.days);
143                }
144            }else if(type === "checkbox"){
145                if(input.checked){
146                    CookieManager.set(sDMName, value, dm.params.days);
147                }else{
148                    CookieManager.remove(sDMName);
149                }
150                dm.elements.html.classList.toggle(value);
151            }
152        });
153    }
154
155    reset(parameterName = "")
156    {
157        if(parameterName === "") return false;

158        for(const className of this.names.classes[parameterName]){
159            if(className === null) continue;
160            this.dm.elements.html.classList.remove(className);
161        }
162        CookieManager.remove(parameterName);
163    }
164}
165
166let oDisplayMode = new DisplayMode(),
167    CookieManager;
168
169function DMOnLoadedPage(){
170    oDisplayMode.init();
171}
172
173document.addEventListener("DOMContentLoaded", DMOnLoadedPage);
174
175CookieManager = {
176    set: function(name, value, days){
177        let expires = "",
178            date = new Date();
179
180        if(days){
181            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
182            expires = "; expires=" + date.toGMTString();
183        }
184        document.cookie = name + "=" + value + expires + "; path=/";
185        return this.get(name);
186    },
187    get: function(name){
188        name += "=";
189        let b = document.cookie.split(";"), c;
190        for(let i = 0; i < b.length; i++){
191            c = b[i].replace(/(^\s+)|(\s+$)/g, "");
192            while(c.charAt(0) === " "){
193                c = c.substring(1, c.length);
194            }
195            if(c.indexOf(name) === 0) return c.substring(name.length, c.length);
196        }
197        return null;
198    },
199    remove: function(name){
200        this.set(name, "", -1);
201    }
202};