Skip to content
This repository was archived by the owner on Sep 6, 2023. It is now read-only.

Commit 168e224

Browse files
ggrachdevggrachdev
committed
Панель с дебагом закрывается при нажатии на esc, улучшена структура js
1 parent 30ae8d0 commit 168e224

File tree

2 files changed

+117
-60
lines changed

2 files changed

+117
-60
lines changed

‎assets/DebugBar/js/initializer.js‎

Lines changed: 112 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,125 @@
1-
var Ggrach = {
2-
DebugBar: {
3-
init: function () {
4-
document.addEventListener('DOMContentLoaded', function () {
5-
if (Ggrach.Utils.User.isAdmin())
1+
var Ggrach = {};
2+
3+
Ggrach.Utils = {};
4+
5+
6+
Ggrach.DebugBar = {
7+
8+
initHotKeys: function () {
9+
// Закрываем панель при нажатии на esc
10+
window.addEventListener('keydown', Ggrach.Handlers.onKeyEsc, true);
11+
},
12+
13+
init: function () {
14+
15+
document.addEventListener('DOMContentLoaded', function () {
16+
if (Ggrach.Utils.User.isAdmin())
17+
{
18+
if (Ggrach.Utils.Screen.isMobile())
619
{
7-
if (Ggrach.Utils.Screen.isMobile())
8-
{
9-
document.querySelector('.ggrach__debug_bar').remove();
10-
} else
20+
Ggrach.DebugBar.removeBar();
21+
} else
22+
{
23+
Ggrach.DebugBar.initHotKeys();
24+
25+
// Закрываем панель при нажатии на область затемнения
26+
Ggrach.Utils.DOM.getOverlay().addEventListener('click', function () {
27+
document.querySelector('[data-type-notice].active').click();
28+
});
29+
30+
if (Ggrach.Utils.DOM.getButtonsNotice())
1131
{
12-
var $logsItems = document.querySelectorAll('[data-click="show_notice_panel"]');
13-
14-
if ($logsItems)
15-
{
16-
$logsItems.forEach(function (element) {
17-
element.addEventListener('click', function (e) {
18-
var type = e.target.dataset.typeNotice;
19-
20-
document.querySelectorAll('.ggrach__debug_bar__log').forEach(function (element) {
21-
22-
element.scrollTop = 0;
23-
24-
if (element.dataset.typeNotice !== type)
25-
{
26-
element.style.display = 'none';
27-
}
28-
29-
});
30-
31-
var $targetLogPanel = document.querySelector('.ggrach__debug_bar__log[data-type-notice="' + type + '"]');
32-
33-
$logsItems.forEach(function (el) {
34-
el.classList.remove('active');
35-
});
36-
37-
if ($targetLogPanel.style.display === 'block')
38-
{
39-
e.target.classList.remove('active');
40-
document.querySelector('body').style.overflow = null;
41-
$targetLogPanel.style.display = 'none';
42-
document.querySelector('.ggrach__overlay').style.display = 'none';
43-
} else
44-
{
45-
e.target.classList.add('active');
46-
document.querySelector('body').style.overflow = 'hidden';
47-
$targetLogPanel.style.display = 'block';
48-
document.querySelector('.ggrach__overlay').style.display = 'block';
49-
}
50-
});
51-
});
52-
}
32+
Ggrach.Utils.DOM.getButtonsNotice().forEach(function (element) {
33+
element.addEventListener('click', Ggrach.Handlers.onClickItemNotice);
34+
});
5335
}
5436
}
55-
});
56-
}
37+
}
38+
});
39+
},
40+
41+
removeBar: function () {
42+
document.querySelector('.ggrach__debug_bar').remove();
43+
}
44+
};
45+
46+
Ggrach.Utils.Screen = {
47+
isMobile: function () {
48+
return window.matchMedia("(max-width: 1100px)").matches;
49+
}
50+
};
51+
52+
Ggrach.Utils.User = {
53+
isAdmin: function () {
54+
return document.getElementById('panel') &&
55+
document.getElementById('bx-panel-admin-tab');
5756
}
5857
};
5958

60-
Ggrach.Utils = {
61-
User: {
62-
isAdmin: function () {
63-
return document.getElementById('panel') &&
64-
document.getElementById('bx-panel-admin-tab');
59+
Ggrach.Utils.DOM = {
60+
61+
getDebugBarLogsType: function (type) {
62+
return document.querySelector('.ggrach__debug_bar__log[data-type-notice="' + type + '"]')
63+
},
64+
65+
getDebugBarLogs: function () {
66+
return document.querySelectorAll('.ggrach__debug_bar__log');
67+
},
68+
69+
getButtonsNotice: function () {
70+
return document.querySelectorAll('[data-click="show_notice_panel"]');
71+
},
72+
73+
getOverlay: function () {
74+
return document.querySelector('.ggrach__overlay');
75+
}
76+
};
77+
78+
Ggrach.Handlers = {
79+
80+
// Нажатие клавиши esc
81+
onKeyEsc: function (e) {
82+
if ((e.key == 'Escape' || e.key == 'Esc' || e.keyCode == 27) && (e.target.nodeName == 'BODY')) {
83+
84+
if (document.querySelector('[data-type-notice].active'))
85+
{
86+
document.querySelector('[data-type-notice].active').click();
87+
}
6588
}
6689
},
6790

68-
Screen: {
69-
isMobile: function () {
70-
return window.matchMedia("(max-width: 1100px)").matches;
91+
onClickItemNotice: function (e) {
92+
var type = e.target.dataset.typeNotice;
93+
94+
Ggrach.Utils.DOM.getDebugBarLogs().forEach(function (element) {
95+
96+
element.scrollTop = 0;
97+
98+
if (element.dataset.typeNotice !== type)
99+
{
100+
element.style.display = 'none';
101+
}
102+
103+
});
104+
105+
var $targetLogPanel = Ggrach.Utils.DOM.getDebugBarLogsType(type);
106+
107+
Ggrach.Utils.DOM.getButtonsNotice().forEach(function (el) {
108+
el.classList.remove('active');
109+
});
110+
111+
if ($targetLogPanel.style.display === 'block')
112+
{
113+
e.target.classList.remove('active');
114+
document.querySelector('body').style.overflow = null;
115+
$targetLogPanel.style.display = 'none';
116+
Ggrach.Utils.DOM.getOverlay().style.display = 'none';
117+
} else
118+
{
119+
e.target.classList.add('active');
120+
document.querySelector('body').style.overflow = 'hidden';
121+
$targetLogPanel.style.display = 'block';
122+
Ggrach.Utils.DOM.getOverlay().style.display = 'block';
71123
}
72124
}
73125
};

‎assets/DebugBar/themes/general.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
height: 100%;
1717
background: #000000cc;
1818
z-index: 9998;
19+
cursor: pointer;
1920
}
2021

2122
.ggrach__debug_bar__item {
@@ -89,6 +90,7 @@
8990
}
9091

9192
.type-notice-notice {
93+
order: 3;
9294
color: #fff;
9395
background: rgb(25,60,119);
9496
background: -moz-linear-gradient(180deg, rgba(25,60,119,1) 0%, rgba(18,97,148,1) 72%);
@@ -98,6 +100,7 @@
98100
}
99101

100102
.type-notice-warning {
103+
order: 2;
101104
color: #000;
102105
background: rgb(179,195,43);
103106
background: -moz-linear-gradient(180deg, rgba(179,195,43,1) 0%, rgba(213,224,27,1) 72%);
@@ -107,6 +110,7 @@
107110
}
108111

109112
.type-notice-error {
113+
order: 1;
110114
color: #fff;
111115
background: rgb(170,18,18);
112116
background: -moz-linear-gradient(180deg, rgba(170,18,18,1) 0%, rgba(200,9,9,1) 72%);
@@ -116,6 +120,7 @@
116120
}
117121

118122
.type-notice-success {
123+
order: 4;
119124
color: #fff;
120125
background: rgb(25,119,44);
121126
background: -moz-linear-gradient(180deg, rgba(25,119,44,1) 0%, rgba(18,148,70,1) 72%);

0 commit comments

Comments
 (0)