Fixes #391: Dispatching event when toolbar is added to DOM, and added…

… class that allows clicks in toolbar block

CHANGELOG.md

@@ -4,7 +4,7 @@ Yii Framework 2 debug extension Change Log
 2.1.5 under development
 -----------------------
 
-- no changes in this release.
+- Enh #391: Dispatching event when toolbar is added to DOM, and added class that allows clicks in toolbar block (rhertogh)
 
 
 2.1.4 May 14, 2019

docs/guide/topics-creating-your-own-panels.md

@@ -97,3 +97,16 @@ if (YII_ENV_DEV) {
 ```
 
 That's it. Now we have another useful panel without writing much code.
+
+Advanced options
+----------------
+### Allow 'click' events in your toolbar summary block
+By default an inline preview is shown when clicking on the summary on the toolbar. To override this behavior add the `yii-debug-toolbar__block_ignore_click` class to your root `<div>` in `getSummary()`.
+
+### Events
+If you need client side programmatic access to the toolbar, for example to bind JavaScript events, you can listen to the `yii.debug.toolbar_attached` event on the document. For example:
+```js
+document.addEventListener('yii.debug.toolbar_attached', function(event) {
+ var toolbar = event.target;
+}
+```

src/assets/js/toolbar.js

@@ -41,6 +41,7 @@
  iframeAnimatingClass = 'yii-debug-toolbar_iframe_animating',
  titleClass = 'yii-debug-toolbar__title',
  blockClass = 'yii-debug-toolbar__block',
+ ignoreClickClass = 'yii-debug-toolbar__ignore_click',
  blockActiveClass = 'yii-debug-toolbar__block_active',
  requestStack = [];
 
@@ -55,6 +56,8 @@
  toolbarEl.parentNode && toolbarEl.parentNode.replaceChild(div, toolbarEl);
 
  showToolbar(findToolbar());
+
+ div.dispatchEvent(new Event('yii.debug.toolbar_attached', {'bubbles': true}));
  },
  error: function (xhr) {
  toolbarEl.innerText = xhr.responseText;
@@ -188,7 +191,9 @@
  var target = e.target,
  block = findAncestor(target, blockClass);
 
- if (block && !block.classList.contains(titleClass)
+ if (block
+ && !block.classList.contains(titleClass)
+ && !block.classList.contains(ignoreClickClass)
  && e.which !== 2 && !e.ctrlKey // not mouse wheel and not ctrl+click
  ) {
  while (target !== this) {