Merge branch 'feature/#127-switch-toolbar-view'

Close #127
zendframework · Apr 16, 2014 · 1a0e780 · 1a0e780
2 parents a5dacf7 + d596f08
commit 1a0e780
Show file tree

Hide file tree

Showing 4 changed files with 188 additions and 1 deletion.
diff --git a/src/ZendDeveloperTools/Listener/ToolbarListener.php b/src/ZendDeveloperTools/Listener/ToolbarListener.php
@@ -158,8 +158,13 @@ protected function injectToolbar(ProfilerEvent $event)
         $toolbarCss->setTemplate('zend-developer-tools/toolbar/style');
         $style       = $this->renderer->render($toolbarCss);
 
+        $toolbarJs  = new ViewModel();
+        $toolbarJs->setTemplate('zend-developer-tools/toolbar/script');
+        $script       = $this->renderer->render($toolbarJs);
+
         $injected    = preg_replace('/<\/body>/i', $toolbar . "\n</body>", $response->getBody(), 1);
         $injected    = preg_replace('/<\/head>/i', $style . "\n</head>", $injected, 1);
+        $injected    = preg_replace('/<\/body>/i', $script . "\n</body>", $injected, 1);
 
         $response->setContent($injected);
     }

diff --git a/view/zend-developer-tools/toolbar/script.phtml b/view/zend-developer-tools/toolbar/script.phtml
@@ -0,0 +1,7 @@
+<!-- START Zend Developer Toolbar JavaScript -->
+<script type="text/javascript">
+    <!--
+    <?php include __DIR__ . '/toolbar.js'; ?>
+    //-->
+</script>
+<!-- END Zend Developer Toolbar JavaScript -->
diff --git a/view/zend-developer-tools/toolbar/toolbar.js b/view/zend-developer-tools/toolbar/toolbar.js
@@ -0,0 +1,175 @@
+(function() {
+
+    /**
+     * @param {Cookie} cookie
+     * @returns {Toolbar}
+     * @constructor
+     */
+    var Toolbar = function(cookie) {
+        /** @type {Toolbar} */
+        var self = this;
+        /** @type {HTMLElement} */
+        var container = document.getElementById("zend-developer-toolbar");
+        /** @type {number} */
+        var width = container.offsetWidth;
+        /** @type {number} */
+        var windowWidthDifference = window.innerWidth - width;
+        /** @type {HTMLElement} */
+        var toggleTrigger = document.getElementById("zdf-toolbar-toggle");
+        /** @type {boolean} */
+        var hidden;
+        /** @type {string} */
+        var cookieKeyHidden = "zdt-hidden";
+        /** @type {number} */
+        var widthHiddenState = 25;
+
+        self.toggle = function() {
+            !self.isHidden() ? self.hide() : self.show();
+        };
+
+        /**
+         * @returns {boolean}
+         * @throws {Error}
+         */
+        self.isHidden = function() {
+            if (typeof(hidden) == "undefined") {
+                throw new Error("Field 'hidden' didn't initialize.");
+            }
+
+            return hidden;
+        };
+
+        self.hide = function() {
+            slide((widthHiddenState - width));
+
+            toggleTrigger.innerHTML = "►";
+            toggleTrigger.setAttribute("title", "Show Toolbar");
+            hidden = true;
+
+            cookie.set(cookieKeyHidden, 1);
+        };
+
+        self.show = function() {
+            slide(0);
+
+            toggleTrigger.innerHTML = "◄";
+            toggleTrigger.setAttribute("title", "Hide Toolbar");
+            hidden = false;
+
+            cookie.set(cookieKeyHidden, 0);
+        };
+
+        init();
+
+        function init() {
+            (cookie.get(cookieKeyHidden) == 1)
+                ? self.hide()
+                : self.show();
+
+            initEvents();
+        }
+
+        function initEvents() {
+            bindEvent(toggleTrigger, "click", self.toggle);
+            bindEvent(window, "resize", resize);
+        }
+
+        /**
+         * @param {number} toPosition
+         */
+        function slide(toPosition) {
+            var increment = 30;
+
+            var currentPosition = (container.style.left.length > 0)
+                ? parseInt(container.style.left)
+                : 0;
+
+            if (currentPosition == toPosition) {
+                return;
+            }
+
+            var moveLeft = (toPosition < currentPosition);
+            var newPosition = toPosition;
+
+            if (moveLeft) {
+                var leftStep = currentPosition - increment;
+
+                if (leftStep > toPosition) {
+                    newPosition = leftStep;
+                }
+            } else {
+                var rightStep = currentPosition + increment;
+
+                if (rightStep < toPosition) {
+                    newPosition = rightStep;
+                }
+            }
+
+            container.style.left = newPosition + "px";
+
+            setTimeout(function() { slide(toPosition); }, 3);
+        }
+
+        /**
+         * @param {HTMLElement} node
+         * @param {string} event
+         * @param {function} handler
+         */
+        function bindEvent(node, event, handler) {
+            if (node.attachEvent) {
+                node.attachEvent("on" + event, handler);
+            } else if (node.addEventListener) {
+                node.addEventListener(event, handler, false);
+            }
+        }
+
+        function resize() {
+            var newWidth = window.innerWidth - windowWidthDifference;
+
+            container.style.width = newWidth + "px";
+            width = newWidth;
+
+            self.isHidden() ? self.hide() : self.show();
+        }
+
+        return self;
+    };
+
+    /**
+     * @returns {Cookie}
+     * @constructor
+     */
+    var Cookie = function() {
+        /** @type {Cookie} */
+        var self = this;
+
+        /**
+         * @param {string} key
+         * @returns {string|null}
+         */
+        self.get = function(key) {
+            var cookie = document.cookie;
+
+            if (cookie.indexOf(key + "=") == -1) {
+                return null;
+            }
+
+            var regexp = new RegExp(key + "\=([^;]+)");
+
+            return regexp.exec(cookie)[1];
+        };
+
+        /**
+         * @param {string} key
+         * @param {string} value
+         */
+        self.set = function(key, value) {
+            document.cookie = key + "=" + value;
+        };
+
+        return self;
+    };
+
+    window.ZDT = new Toolbar(new Cookie());
+
+})();
diff --git a/view/zend-developer-tools/toolbar/toolbar.phtml b/view/zend-developer-tools/toolbar/toolbar.phtml
@@ -6,6 +6,6 @@
     }
     ?>
 
-    <a class="zdf-toolbar-hide-button" title="Close Toolbar" onclick="this.parentNode.style.display = 'none';">✖</a>
+    <a id="zdf-toolbar-toggle" class="zdf-toolbar-hide-button" href="javascript:void(0);"></a>
 </div>
 <!-- END Zend Developer Toolbar -->