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

Commit

Permalink
Merge pull request #2 from ggrachdev/dev
Browse files Browse the repository at this point in the history 
0.02
@ggrachdev
ggrachdev authored Feb 19, 2021

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode
2 parents 6210dc4 + f66b513 commit 89f8f34
Showing 6 changed files with 264 additions and 124 deletions.
175 changes: 115 additions & 60 deletions assets/DebugBar/js/initializer.js
View file
Original file line number Diff line number Diff line change
@@ -1,73 +1,128 @@
var Ggrach = {
DebugBar: {
init: function () {
document.addEventListener('DOMContentLoaded', function () {
if (Ggrach.Utils.User.isAdmin())
var Ggrach = {};

Ggrach.Utils = {};


Ggrach.DebugBar = {

initHotKeys: function () {
// Закрываем панель при нажатии на esc
window.addEventListener('keydown', Ggrach.Handlers.onKeyEsc, true);
},

hasDebugBar: function () {
return document.querySelector('.ggrach__debug_bar') !== null;
},

init: function () {

document.addEventListener('DOMContentLoaded', function () {
if (Ggrach.Utils.User.isAdmin() && Ggrach.DebugBar.hasDebugBar())
{
if (Ggrach.Utils.Screen.isMobile())
{
if (Ggrach.Utils.Screen.isMobile())
{
document.querySelector('.ggrach__debug_bar').remove();
} else
Ggrach.DebugBar.removeBar();
} else
{
Ggrach.DebugBar.initHotKeys();

// Закрываем панель при нажатии на область затемнения
Ggrach.Utils.DOM.getOverlay().addEventListener('click', function () {
document.querySelector('[data-type-notice].active').click();
});

if (Ggrach.Utils.DOM.getButtonsNotice())
{
var $logsItems = document.querySelectorAll('[data-click="show_notice_panel"]');

if ($logsItems)
{
$logsItems.forEach(function (element) {
element.addEventListener('click', function (e) {
var type = e.target.dataset.typeNotice;

document.querySelectorAll('.ggrach__debug_bar__log').forEach(function (element) {

element.scrollTop = 0;

if (element.dataset.typeNotice !== type)
{
element.style.display = 'none';
}

});

var $targetLogPanel = document.querySelector('.ggrach__debug_bar__log[data-type-notice="' + type + '"]');

$logsItems.forEach(function (el) {
el.classList.remove('active');
});

if ($targetLogPanel.style.display === 'block')
{
e.target.classList.remove('active');
document.querySelector('body').style.overflow = null;
$targetLogPanel.style.display = 'none';
document.querySelector('.ggrach__overlay').style.display = 'none';
} else
{
e.target.classList.add('active');
document.querySelector('body').style.overflow = 'hidden';
$targetLogPanel.style.display = 'block';
document.querySelector('.ggrach__overlay').style.display = 'block';
}
});
});
}
Ggrach.Utils.DOM.getButtonsNotice().forEach(function (element) {
element.addEventListener('click', Ggrach.Handlers.onClickItemNotice);
});
}
}
});
}
}
});
},

removeBar: function () {
document.querySelector('.ggrach__debug_bar').remove();
}
};

Ggrach.Utils = {
User: {
isAdmin: function () {
return document.getElementById('panel') &&
document.getElementById('bx-panel-admin-tab');
Ggrach.Utils.Screen = {
isMobile: function () {
return window.matchMedia("(max-width: 1100px)").matches;
}
};

Ggrach.Utils.User = {
isAdmin: function () {
return document.getElementById('bx-panel-admin-tab');
}
};

Ggrach.Utils.DOM = {

getDebugBarLogsType: function (type) {
return document.querySelector('.ggrach__debug_bar__log[data-type-notice="' + type + '"]')
},

getDebugBarLogs: function () {
return document.querySelectorAll('.ggrach__debug_bar__log');
},

getButtonsNotice: function () {
return document.querySelectorAll('[data-click="show_notice_panel"]');
},

getOverlay: function () {
return document.querySelector('.ggrach__overlay');
}
};

Ggrach.Handlers = {

// Нажатие клавиши esc
onKeyEsc: function (e) {
if ((e.key == 'Escape' || e.key == 'Esc' || e.keyCode == 27) && (e.target.nodeName == 'BODY')) {

if (document.querySelector('[data-type-notice].active'))
{
document.querySelector('[data-type-notice].active').click();
}
}
},

Screen: {
isMobile: function () {
return window.matchMedia("(max-width: 1100px)").matches;
onClickItemNotice: function (e) {
var type = e.target.dataset.typeNotice;

Ggrach.Utils.DOM.getDebugBarLogs().forEach(function (element) {

element.scrollTop = 0;

if (element.dataset.typeNotice !== type)
{
element.style.display = 'none';
}

});

var $targetLogPanel = Ggrach.Utils.DOM.getDebugBarLogsType(type);

Ggrach.Utils.DOM.getButtonsNotice().forEach(function (el) {
el.classList.remove('active');
});

if ($targetLogPanel.style.display === 'block')
{
e.target.classList.remove('active');
document.querySelector('body').style.overflow = null;
$targetLogPanel.style.display = 'none';
Ggrach.Utils.DOM.getOverlay().style.display = 'none';
} else
{
e.target.classList.add('active');
document.querySelector('body').style.overflow = 'hidden';
$targetLogPanel.style.display = 'block';
Ggrach.Utils.DOM.getOverlay().style.display = 'block';
}
}
};
76 changes: 71 additions & 5 deletions assets/DebugBar/themes/general.css
View file
Original file line number Diff line number Diff line change
@@ -16,6 +16,7 @@
height: 100%;
background: #000000cc;
z-index: 9998;
cursor: pointer;
}

.ggrach__debug_bar__item {
@@ -28,13 +29,37 @@
not supported by any browser */
}

.ggrach__debug_bar__right {
position: absolute !important;
top: -1px !important;
right: 0 !important;
display: flex !important;
}

.ggrach__debug_bar__right__item {
height: calc(100% + 1px) !important;
display: flex !important;
min-width: 30px !important;
padding-left: 3px;
padding-right: 3px;
justify-content: center !important;
line-height: 33px !important;
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* Internet Explorer/Edge */
user-select: none; /* Non-prefixed version, currently
not supported by any browser */
}

.ggrach__debug_bar > .ggrach__debug_bar__item {
display: flex !important;
line-height: 33px !important;
justify-content: center !important;
padding-left: 5px;
padding-right: 5px;
height: 30px !important;
height: 31px !important;
min-width: 30px !important;
cursor: pointer !important;
font-size: 16px !important;
@@ -70,20 +95,61 @@

.ggrach__debug_bar__item.active {
font-weight: bold !important;
height: 41px !important;
line-height: 41px !important;
z-index: 1;
border-radius: 3px 3px 0 0;
}

.ggrach__debug_bar__item.type-notice-notice {
order: 3;
}

.type-notice-notice {
background-color: #93c7ec !important;
color: #fff;
background: rgb(25,60,119);
background: -moz-linear-gradient(180deg, rgba(25,60,119,1) 0%, rgba(18,97,148,1) 72%);
background: -webkit-linear-gradient(180deg, rgba(25,60,119,1) 0%, rgba(18,97,148,1) 72%);
background: linear-gradient(180deg, rgba(25,60,119,1) 0%, rgba(18,97,148,1) 72%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#193c77",endColorstr="#126194",GradientType=1);
}

.ggrach__debug_bar__item.type-notice-warning {
order: 2;
}

.type-notice-warning {
background-color: #d8ff00 !important;
color: #000;
background: rgb(179,195,43);
background: -moz-linear-gradient(180deg, rgba(179,195,43,1) 0%, rgba(213,224,27,1) 72%);
background: -webkit-linear-gradient(180deg, rgba(179,195,43,1) 0%, rgba(213,224,27,1) 72%);
background: linear-gradient(180deg, rgba(179,195,43,1) 0%, rgba(213,224,27,1) 72%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b3c32b",endColorstr="#d5e01b",GradientType=1);
}

.ggrach__debug_bar__item.type-notice-error {
order: 1;
}

.type-notice-error {
background-color: red !important;
color: #fff;
background: rgb(170,18,18);
background: -moz-linear-gradient(180deg, rgba(170,18,18,1) 0%, rgba(200,9,9,1) 72%);
background: -webkit-linear-gradient(180deg, rgba(170,18,18,1) 0%, rgba(200,9,9,1) 72%);
background: linear-gradient(180deg, rgba(170,18,18,1) 0%, rgba(200,9,9,1) 72%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aa1212",endColorstr="#c80909",GradientType=1);
}


.ggrach__debug_bar__item.type-notice-success {
order: 4;
}

.type-notice-success {
background-color: green !important;
color: #fff;
background: rgb(25,119,44);
background: -moz-linear-gradient(180deg, rgba(25,119,44,1) 0%, rgba(18,148,70,1) 72%);
background: -webkit-linear-gradient(180deg, rgba(25,119,44,1) 0%, rgba(18,148,70,1) 72%);
background: linear-gradient(180deg, rgba(25,119,44,1) 0%, rgba(18,148,70,1) 72%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#19772c",endColorstr="#129446",GradientType=1);
}
4 changes: 0 additions & 4 deletions assets/DebugBar/themes/light/theme.css
View file
Original file line number Diff line number Diff line change
@@ -4,10 +4,6 @@
border-top: 1px solid #b3b3b3 !important;
}

.ggrach__debug_bar__log {
border-top: 1px solid #b3b3b3 !important;
}

.ggrach__debug_bar__log__line {
font-size: 12px;
color: darkgrey;
Loading

0 comments on commit 89f8f34

Please sign in to comment.