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

Commit 89f8f34

Browse files
ggrachdevggrachdev
authored
Merge pull request #2 from ggrachdev/dev
0.02
2 parents 6210dc4 + f66b513 commit 89f8f34

6 files changed

Lines changed: 264 additions & 124 deletions

File tree

‎assets/DebugBar/js/initializer.js‎

Lines changed: 115 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,128 @@
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+
hasDebugBar: function () {
14+
return document.querySelector('.ggrach__debug_bar') !== null;
15+
},
16+
17+
init: function () {
18+
19+
document.addEventListener('DOMContentLoaded', function () {
20+
if (Ggrach.Utils.User.isAdmin() && Ggrach.DebugBar.hasDebugBar())
21+
{
22+
if (Ggrach.Utils.Screen.isMobile())
623
{
7-
if (Ggrach.Utils.Screen.isMobile())
8-
{
9-
document.querySelector('.ggrach__debug_bar').remove();
10-
} else
24+
Ggrach.DebugBar.removeBar();
25+
} else
26+
{
27+
Ggrach.DebugBar.initHotKeys();
28+
29+
// Закрываем панель при нажатии на область затемнения
30+
Ggrach.Utils.DOM.getOverlay().addEventListener('click', function () {
31+
document.querySelector('[data-type-notice].active').click();
32+
});
33+
34+
if (Ggrach.Utils.DOM.getButtonsNotice())
1135
{
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-
}
36+
Ggrach.Utils.DOM.getButtonsNotice().forEach(function (element) {
37+
element.addEventListener('click', Ggrach.Handlers.onClickItemNotice);
38+
});
5339
}
5440
}
55-
});
56-
}
41+
}
42+
});
43+
},
44+
45+
removeBar: function () {
46+
document.querySelector('.ggrach__debug_bar').remove();
5747
}
5848
};
5949

60-
Ggrach.Utils = {
61-
User: {
62-
isAdmin: function () {
63-
return document.getElementById('panel') &&
64-
document.getElementById('bx-panel-admin-tab');
50+
Ggrach.Utils.Screen = {
51+
isMobile: function () {
52+
return window.matchMedia("(max-width: 1100px)").matches;
53+
}
54+
};
55+
56+
Ggrach.Utils.User = {
57+
isAdmin: function () {
58+
return document.getElementById('bx-panel-admin-tab');
59+
}
60+
};
61+
62+
Ggrach.Utils.DOM = {
63+
64+
getDebugBarLogsType: function (type) {
65+
return document.querySelector('.ggrach__debug_bar__log[data-type-notice="' + type + '"]')
66+
},
67+
68+
getDebugBarLogs: function () {
69+
return document.querySelectorAll('.ggrach__debug_bar__log');
70+
},
71+
72+
getButtonsNotice: function () {
73+
return document.querySelectorAll('[data-click="show_notice_panel"]');
74+
},
75+
76+
getOverlay: function () {
77+
return document.querySelector('.ggrach__overlay');
78+
}
79+
};
80+
81+
Ggrach.Handlers = {
82+
83+
// Нажатие клавиши esc
84+
onKeyEsc: function (e) {
85+
if ((e.key == 'Escape' || e.key == 'Esc' || e.keyCode == 27) && (e.target.nodeName == 'BODY')) {
86+
87+
if (document.querySelector('[data-type-notice].active'))
88+
{
89+
document.querySelector('[data-type-notice].active').click();
90+
}
6591
}
6692
},
6793

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

‎assets/DebugBar/themes/general.css‎

Lines changed: 71 additions & 5 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 {
@@ -28,13 +29,37 @@
2829
not supported by any browser */
2930
}
3031

32+
.ggrach__debug_bar__right {
33+
position: absolute !important;
34+
top: -1px !important;
35+
right: 0 !important;
36+
display: flex !important;
37+
}
38+
39+
.ggrach__debug_bar__right__item {
40+
height: calc(100% + 1px) !important;
41+
display: flex !important;
42+
min-width: 30px !important;
43+
padding-left: 3px;
44+
padding-right: 3px;
45+
justify-content: center !important;
46+
line-height: 33px !important;
47+
-webkit-touch-callout: none; /* iOS Safari */
48+
-webkit-user-select: none; /* Chrome/Safari/Opera */
49+
-khtml-user-select: none; /* Konqueror */
50+
-moz-user-select: none; /* Firefox */
51+
-ms-user-select: none; /* Internet Explorer/Edge */
52+
user-select: none; /* Non-prefixed version, currently
53+
not supported by any browser */
54+
}
55+
3156
.ggrach__debug_bar > .ggrach__debug_bar__item {
3257
display: flex !important;
3358
line-height: 33px !important;
3459
justify-content: center !important;
3560
padding-left: 5px;
3661
padding-right: 5px;
37-
height: 30px !important;
62+
height: 31px !important;
3863
min-width: 30px !important;
3964
cursor: pointer !important;
4065
font-size: 16px !important;
@@ -70,20 +95,61 @@
7095

7196
.ggrach__debug_bar__item.active {
7297
font-weight: bold !important;
98+
height: 41px !important;
99+
line-height: 41px !important;
100+
z-index: 1;
101+
border-radius: 3px 3px 0 0;
102+
}
103+
104+
.ggrach__debug_bar__item.type-notice-notice {
105+
order: 3;
73106
}
74107

75108
.type-notice-notice {
76-
background-color: #93c7ec !important;
109+
color: #fff;
110+
background: rgb(25,60,119);
111+
background: -moz-linear-gradient(180deg, rgba(25,60,119,1) 0%, rgba(18,97,148,1) 72%);
112+
background: -webkit-linear-gradient(180deg, rgba(25,60,119,1) 0%, rgba(18,97,148,1) 72%);
113+
background: linear-gradient(180deg, rgba(25,60,119,1) 0%, rgba(18,97,148,1) 72%);
114+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#193c77",endColorstr="#126194",GradientType=1);
115+
}
116+
117+
.ggrach__debug_bar__item.type-notice-warning {
118+
order: 2;
77119
}
78120

79121
.type-notice-warning {
80-
background-color: #d8ff00 !important;
122+
color: #000;
123+
background: rgb(179,195,43);
124+
background: -moz-linear-gradient(180deg, rgba(179,195,43,1) 0%, rgba(213,224,27,1) 72%);
125+
background: -webkit-linear-gradient(180deg, rgba(179,195,43,1) 0%, rgba(213,224,27,1) 72%);
126+
background: linear-gradient(180deg, rgba(179,195,43,1) 0%, rgba(213,224,27,1) 72%);
127+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3c32b",endColorstr="#d5e01b",GradientType=1);
128+
}
129+
130+
.ggrach__debug_bar__item.type-notice-error {
131+
order: 1;
81132
}
82133

83134
.type-notice-error {
84-
background-color: red !important;
135+
color: #fff;
136+
background: rgb(170,18,18);
137+
background: -moz-linear-gradient(180deg, rgba(170,18,18,1) 0%, rgba(200,9,9,1) 72%);
138+
background: -webkit-linear-gradient(180deg, rgba(170,18,18,1) 0%, rgba(200,9,9,1) 72%);
139+
background: linear-gradient(180deg, rgba(170,18,18,1) 0%, rgba(200,9,9,1) 72%);
140+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aa1212",endColorstr="#c80909",GradientType=1);
141+
}
142+
143+
144+
.ggrach__debug_bar__item.type-notice-success {
145+
order: 4;
85146
}
86147

87148
.type-notice-success {
88-
background-color: green !important;
149+
color: #fff;
150+
background: rgb(25,119,44);
151+
background: -moz-linear-gradient(180deg, rgba(25,119,44,1) 0%, rgba(18,148,70,1) 72%);
152+
background: -webkit-linear-gradient(180deg, rgba(25,119,44,1) 0%, rgba(18,148,70,1) 72%);
153+
background: linear-gradient(180deg, rgba(25,119,44,1) 0%, rgba(18,148,70,1) 72%);
154+
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#19772c",endColorstr="#129446",GradientType=1);
89155
}

‎assets/DebugBar/themes/light/theme.css‎

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,6 @@
44
border-top: 1px solid #b3b3b3 !important;
55
}
66

7-
.ggrach__debug_bar__log {
8-
border-top: 1px solid #b3b3b3 !important;
9-
}
10-
117
.ggrach__debug_bar__log__line {
128
font-size: 12px;
139
color: darkgrey;

0 commit comments

Comments
 (0)