diff --git a/src/Elements/Elements.es6 b/src/Elements/Elements.es6 index 31b9723..d0a1384 100644 --- a/src/Elements/Elements.es6 +++ b/src/Elements/Elements.es6 @@ -3,6 +3,7 @@ import CssStore from './CssStore.es6' import Highlight from './Highlight.es6' import Select from './Select.es6' import util from '../lib/util' +import config from '../lib/config.es6' export default class Elements extends Tool { @@ -17,6 +18,7 @@ export default class Elements extends Tool this._rmDefComputedStyle = true; this._highlightElement = false; this._selectElement = false; + this._events = {}; } init($el, parent) { @@ -32,6 +34,7 @@ export default class Elements extends Tool this._highlight = new Highlight(this._parent.$parent); this._select = new Select(); this._bindEvent(); + this._initConfig(); this._setEl(this._htmlEl); } show() @@ -40,6 +43,77 @@ export default class Elements extends Tool this._render(); } + overrideEventTarget() + { + var winEventProto = window.EventTarget.prototype; + + var origAddEvent = this._origAddEvent = winEventProto.addEventListener, + origRmEvent = this._origRmEvent = winEventProto.removeEventListener; + + var self = this; + + winEventProto.addEventListener = function (type, listener, useCapture) + { + var id = this.erudaEventId = this.erudaEventId || util.uniqId('event'); + self._addEvent(id, type, listener, useCapture); + origAddEvent.apply(this, arguments); + }; + + winEventProto.removeEventListener = function (type, listener, useCapture) + { + var id = this.erudaEventId; + if (id) self._rmEvent(id, type, listener, useCapture); + origRmEvent.apply(this, arguments); + }; + } + restoreEventTarget() + { + var winEventProto = window.EventTarget.prototype; + + if (this._origAddEvent) winEventProto.addEventListener = this._origAddEvent; + if (this._origRmEvent) winEventProto.removeEventListener = this._origRmEvent; + } + destroy() + { + super.destroy(); + + this.restoreEventTarget(); + } + _addEvent(id, type, listener, useCapture = false) + { + if (!util.isFn(listener) && !util.isBool(useCapture)) return; + + var events = this._events; + + events[id] = events[id] || {}; + events[id][type] = events[id][type] || []; + events[id][type].push({ + listener: listener, + listenerStr: listener.toString(), + useCapture: useCapture + }); + } + _rmEvent(id, type, listener, useCapture = false) + { + if (!util.isFn(listener) && !util.isBool(useCapture)) return; + + var events = this._events; + + if (!(events[id] && events[id][type])) return; + + var listeners = events[id][type]; + + for (let i = 0, len = listener.length; i < len; i++) + { + if (listener[i].listener === listener) + { + listeners.splice(i, 1); + break; + } + } + + if (listener.length === 0) delete events[id][type]; + } _back() { if (this._curEl === this._htmlEl) return; @@ -167,6 +241,13 @@ export default class Elements extends Tool ret.attributes = formatAttr(attributes); ret.name = formatElName({tagName, id, className, attributes}); + var eventId = el.erudaEventId; + if (eventId) + { + var listeners = this._events[eventId]; + if (util.keys(listeners).length !== 0) ret.listeners = listeners; + } + if (needNoStyle(tagName)) return ret; var computedStyle = cssStore.getComputedStyle(); @@ -186,6 +267,27 @@ export default class Elements extends Tool this._highlight[this._highlightElement ? 'show' : 'hide'](); this._$showArea.html(this._tpl(this._getData())); } + _initConfig() + { + var cfg = this.config = config.create('eruda-elements'); + + cfg.set(util.defaults(cfg.get(), {overrideEventTarget: true})); + + if (cfg.get('overrideEventTarget')) this.overrideEventTarget(); + + cfg.on('change', (key, val) => + { + switch (key) + { + case 'overrideEventTarget': return val ? this.overrideEventTarget(): this.restoreEventTarget(); + } + }); + + var settings = this._parent.get('settings'); + settings.text('Elements') + .add(cfg, 'overrideEventTarget', 'Show Event Listeners') + .separator(); + } } var isElExist = val => util.isEl(val) && val.parentNode; diff --git a/src/Elements/Elements.hbs b/src/Elements/Elements.hbs index 2886b98..41fc1f2 100644 --- a/src/Elements/Elements.hbs +++ b/src/Elements/Elements.hbs @@ -64,3 +64,20 @@ {{/if}} +{{#if listeners}} +
+

Event Listeners

+
+ {{#each listeners}} +
+
{{@key}}
+
    + {{#each .}} +
  • {{listenerStr}}
  • + {{/each}} +
+
+ {{/each}} +
+
+{{/if}} diff --git a/src/Elements/Elements.scss b/src/Elements/Elements.scss index 63a2fdd..d406fa0 100644 --- a/src/Elements/Elements.scss +++ b/src/Elements/Elements.scss @@ -80,7 +80,7 @@ background: #fff; font-size: 12px; .style-wrapper { - padding: 10px; + padding: $common-padding; .style-rules { box-shadow: $box-shadow; border: 1px solid $gray; @@ -99,6 +99,33 @@ } } } + .listeners { + background: #fff; + font-size: 12px; + .listener-wrapper { + padding: $common-padding; + .listener { + box-shadow: $box-shadow; + margin-bottom: 10px; + background: #fff; + .listener-type { + padding: $common-padding; + background: $blue; + color: #fff; + } + .listener-content li { + padding: $common-padding; + border: 1px solid $gray; + border-top: none; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + &.capture { + background: $gray-light; + } + } + } + } + } .bottom-bar { height: 40px; background: #fff; diff --git a/src/Sources/Sources.es6 b/src/Sources/Sources.es6 index 8b2c71c..8f801ec 100644 --- a/src/Sources/Sources.es6 +++ b/src/Sources/Sources.es6 @@ -148,6 +148,10 @@ export default class Sources extends Tool } _renderHttp() { + var val = this._data.val; + + val.hasResTxt = (val.resTxt.trim() !== ''); + this._$el.html(this._httpTpl(this._data.val)); } _renderCode() diff --git a/src/Sources/http.hbs b/src/Sources/http.hbs index 5816bdc..4d4a8ef 100644 --- a/src/Sources/http.hbs +++ b/src/Sources/http.hbs @@ -13,5 +13,7 @@ -
{{resTxt}}
+ {{#if hasResTxt}} +
{{resTxt}}
+ {{/if}} \ No newline at end of file diff --git a/test/empty.json b/test/empty.json new file mode 100644 index 0000000..e69de29 diff --git a/test/index.html b/test/index.html index 15218cd..d4b84f4 100644 --- a/test/index.html +++ b/test/index.html @@ -25,6 +25,23 @@