0.02

assets/DebugBar/js/initializer.js

@@ -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';
         }
     }
 };

assets/DebugBar/themes/general.css

@@ -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);
 }

assets/DebugBar/themes/light/theme.css

@@ -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;