[Toolbar] Handle info position via javascript

Place info div to not float out of the window
ostrolucky · Jan 3, 2015 · 23c0ddc · 23c0ddc
1 parent 7a8582e
commit 23c0ddc
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar.css.twig
@@ -139,10 +139,6 @@
     border-radius: 4px 4px 0 0;
 }
 
-.sf-toolbarreset > div:last-of-type .sf-toolbar-info {
-    right: -1px;
-}
-
 .sf-toolbar-block .sf-toolbar-info:empty {
     visibility: hidden;
 }

diff --git a/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig b/src/Symfony/Bundle/WebProfilerBundle/Resources/views/Profiler/toolbar_js.html.twig
@@ -31,6 +31,26 @@
                 }
 
                 Sfjs.renderAjaxRequests();
+
+                /* Handle toolbar-info position */
+                var toolbarBlocks = document.getElementsByClassName('sf-toolbar-block');
+                for (var i = 0; i < toolbarBlocks.length; i += 1) {
+                    toolbarBlocks[i].onmouseover = function () {
+                        var toolbarInfo = this.getElementsByClassName('sf-toolbar-info')[0];
+                        var pageWidth = document.body.clientWidth;
+                        var elementWidth = toolbarInfo.offsetWidth;
+                        var leftValue = (elementWidth + this.offsetLeft) - pageWidth;
+                        var rightValue = (elementWidth + (pageWidth - this.offsetLeft)) - pageWidth;
+
+                        if (leftValue > 0 && rightValue > 0) {
+                            toolbarInfo.style.right = (rightValue * -1) + 'px';
+                        } else if (leftValue < 0) {
+                            toolbarInfo.style.left = 0;
+                        } else {
+                            toolbarInfo.style.right = '-1px';
+                        }
+                    };
+                }
             },
             function(xhr) {
                 if (xhr.status !== 0) {