Fixed #1181 - Reimplement EventBus

src/AppConfigurator.vue

@@ -365,6 +365,7 @@ export default {
         }
     },
     outsideClickListener: null,
+    themeChangeListener: null,
     watch: {
         $route() {
             if (this.active) {
@@ -373,15 +374,20 @@ export default {
             }
         }
     },
+    beforeUnmount() {
+        EventBus.off('change-theme', this.themeChangeListener);
+    },
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.theme === 'nano')
                 this.scale = 12;
             else
                 this.scale = 14;
 
             this.applyScale();
-        });
+        };
+
+        EventBus.on('change-theme', this.themeChangeListener);
     },
     methods: {
         toggleConfigurator(event) {

src/AppDocumentation.vue

@@ -16,13 +16,15 @@ export default {
         component: null,
         github: null
     },
+    viewGithubListener: null,
     mounted() {
-        EventBus.on('view-github', () => {
+        this.viewGithubListener = () => {
             window.open('https://github.com/primefaces/primevue/blob/master/src/views/' + this.github, '_blank');
-        });
+        };
+        EventBus.on('view-github', this.viewGithubListener);
     },
     beforeUnmount() {
-        EventBus.off('view-github');
+        EventBus.off('view-github', this.viewGithubListener);
     },
     methods: {
         renderPanels() {

src/components/confirmdialog/ConfirmDialog.vue

@@ -23,6 +23,8 @@ export default {
             default: null
         }
     },
+    confirmListener: null,
+    closeListener: null,
     data() {
         return {
             visible: false,
@@ -30,7 +32,7 @@ export default {
         }
     },
     mounted() {
-        ConfirmationEventBus.on('confirm', (options) => {
+        this.confirmListener = (options) => {
             if (!options) {
                 return;
             }
@@ -39,16 +41,18 @@ export default {
                 this.confirmation = options;
                 this.visible = true;
             }
-        });
+        };
 
-        ConfirmationEventBus.on('close', () => {
+        this.closeListener = () => {
             this.visible = false;
             this.confirmation = null;
-        });
+        };
+        ConfirmationEventBus.on('confirm', this.confirmListener);
+        ConfirmationEventBus.on('close', this.closeListener);
     },
     beforeUnmount() {
-        ConfirmationEventBus.off('confirm');
+        ConfirmationEventBus.off('confirm', this.confirmListener);
-        ConfirmationEventBus.off('close');
+        ConfirmationEventBus.off('close', this.closeListener);
     },
     methods: {
         accept() {

src/components/confirmpopup/ConfirmPopup.vue

@@ -37,8 +37,10 @@ export default {
     scrollHandler: null,
     resizeListener: null,
     container: null,
+    confirmListener: null,
+    closeListener: null,
     mounted() {
-        ConfirmationEventBus.on('confirm', (options) => {
+        this.confirmListener = (options) => {
             if (!options) {
                 return;
             }
@@ -48,16 +50,17 @@ export default {
                 this.target = options.target;
                 this.visible = true;
             }
-        });
+        };
-
+        this.closeListener = () => {
-        ConfirmationEventBus.on('close', () => {
             this.visible = false;
             this.confirmation = null;
-        });
+        };
+        ConfirmationEventBus.on('confirm', this.confirmListener);
+        ConfirmationEventBus.on('close', this.closeListener);
     },
     beforeUnmount() {
-        ConfirmationEventBus.off('confirm');
+        ConfirmationEventBus.off('confirm', this.confirmListener);
-        ConfirmationEventBus.off('close');
+        ConfirmationEventBus.off('close', this.closeListener);
 
         this.unbindOutsideClickListener();
         if (this.scrollHandler) {

src/components/datatable/BodyCell.vue

@@ -80,6 +80,7 @@ export default {
     },
     documentEditListener: null,
     selfClick: false,
+    overlayEventListener: null,
     data() {
         return {
             d_editing: this.editing,
@@ -101,6 +102,12 @@ export default {
             this.updateStickyPosition();
         }
     },
+    beforeUnmount() {
+        if (this.overlayEventListener) {
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
+        }
+    },
     methods: {
         columnProp(prop) {
             return this.column.props ? ((this.column.type.props[prop].type === Boolean && this.column.props[prop] === '') ? true : this.column.props[prop]) : null;
@@ -145,7 +152,8 @@ export default {
         switchCellToViewMode() {
             this.d_editing = false;
             this.unbindDocumentEditListener();
-            OverlayEventBus.off('overlay-click', this.eventBusKey);
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
         },
         onClick(event) {
             if (this.editMode === 'cell' && this.isEditable()) {
@@ -156,11 +164,12 @@ export default {
                     this.bindDocumentEditListener();
                     this.$emit('cell-edit-init', {originalEvent: event, data: this.rowData, field: this.columnProp('field'), index: this.index});
 
-                    OverlayEventBus.on('overlay-click', e => {
+                    this.overlayEventListener = (e) => {
                         if (this.$el && this.$el.contains(e.target)) {
                             this.selfClick = true;
                         }
-                    }, this.eventBusKey);
+                    }
+                    OverlayEventBus.on('overlay-click', this.overlayEventListener);
                 }
             }
         },

src/components/datatable/ColumnFilter.vue

@@ -142,7 +142,13 @@ export default {
     },
     overlay: null,
     selfClick: false,
+    overlayEventListener: null,
     beforeUnmount() {
+        if (this.overlayEventListener) {
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
+        }
+
         if (this.overlay) {
             ZIndexUtils.clear(this.overlay);
             this.onOverlayHide();
@@ -352,11 +358,12 @@ export default {
             this.bindScrollListener();
             this.bindResizeListener();
 
-            OverlayEventBus.on('overlay-click', e => {
+            this.overlayEventListener = (e) => {
                 if (this.overlay.contains(e.target)) {
                     this.selfClick = true;
                 }
-            });
+            }
+            OverlayEventBus.on('overlay-click', this.overlayEventListener);
         },
         onOverlayLeave() {
             this.onOverlayHide();
@@ -369,7 +376,8 @@ export default {
             this.unbindResizeListener();
             this.unbindScrollListener();
             this.overlay = null;
-            OverlayEventBus.off('overlay-click');
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
         },
         overlayRef(el) {
             this.overlay = el;

src/components/overlaypanel/OverlayPanel.vue

@@ -62,6 +62,7 @@ export default {
     resizeListener: null,
     container: null,
     styleElement: null,
+    overlayEventListener: null,
     beforeUnmount() {
         if (this.dismissable) {
             this.unbindOutsideClickListener();
@@ -78,6 +79,12 @@ export default {
         if (this.container && this.autoZIndex) {
             ZIndexUtils.clear(this.container);
         }
+
+        if (this.overlayEventListener) {
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
+        }
+
         this.container = null;
     },
     mounted() {
@@ -116,17 +123,20 @@ export default {
                 ZIndexUtils.set('overlay', el, this.baseZIndex + this.$primevue.config.zIndex.overlay);
             }
 
-            OverlayEventBus.on('overlay-click', e => {
+            this.overlayEventListener = (e) => {
-                if (this.container && this.container.contains(e.target)) {
+                if (this.container.contains(e.target)) {
                     this.selfClick = true;
                 }
-            });
+            };
+
+            OverlayEventBus.on('overlay-click', this.overlayEventListener);
         },
         onLeave() {
             this.unbindOutsideClickListener();
             this.unbindScrollListener();
             this.unbindResizeListener();
-            OverlayEventBus.off('overlay-click');
+            OverlayEventBus.off('overlay-click', this.overlayEventListener);
+            this.overlayEventListener = null;
         },
         onAfterLeave(el) {
             if (this.autoZIndex) {

src/components/toast/Toast.vue

@@ -41,19 +41,9 @@ export default {
         }
     },
     mounted() {
-        ToastEventBus.on('add', (message) => {
+        ToastEventBus.on('add', this.onAdd);
-            if (this.group == message.group) {
+        ToastEventBus.on('remove-group', this.onRemoveGroup);
-                this.add(message);
+        ToastEventBus.on('remove-all-groups', this.onRemoveAllGroups);
-            }
-        });
-        ToastEventBus.on('remove-group', (group) => {
-            if (this.group === group) {
-                this.messages = [];
-            }
-        });
-        ToastEventBus.on('remove-all-groups', () => {
-            this.messages = [];
-        });
 
         if (this.autoZIndex) {
             ZIndexUtils.set('modal', this.$refs.container, this.baseZIndex || this.$primevue.config.zIndex.modal);
@@ -63,6 +53,10 @@ export default {
         if (this.$refs.container && this.autoZIndex) {
             ZIndexUtils.clear(this.$refs.container);
         }
+
+        ToastEventBus.off('add', this.onAdd);
+        ToastEventBus.off('remove-group', this.onRemoveGroup);
+        ToastEventBus.off('remove-all-groups', this.onRemoveAllGroups);
     },
     methods: {
         add(message) {
@@ -82,6 +76,19 @@ export default {
             }
 
             this.messages.splice(index, 1);
+        },
+        onAdd(message) {
+            if (this.group == message.group) {
+                this.add(message);
+            }
+        },
+        onRemoveGroup(group) {
+            if (this.group === group) {
+                this.messages = [];
+            }
+        },
+        onRemoveAllGroıps() {
+            this.messages = [];
         }
     },
     components: {

src/components/utils/EventBus.js

@@ -1,39 +1,29 @@
-export default function() {
+export default function primebus() {
-    let eventTarget, eventListener, eventKey;
+	const allHandlers = new Map();
 
 	return {
-        on(type, listener, key) {
+		on(type, handler) {
-            eventTarget = eventTarget || document.body.appendChild(document.createComment(''));
+			let handlers = allHandlers.get(type);
-            eventKey = key;
+            if (!handlers)
-            eventListener = function(e) { listener(e.detail); };
+                handlers = [handler];
-            eventTarget.addEventListener(type, eventListener);
+            else
-            return this;
+                handlers.push(handler);
+
+            allHandlers.set(type, handlers);
 		},
-        once(type, listener, key) {
+
-            eventTarget = eventTarget || document.body.appendChild(document.createComment(''));
+		off(type, handler) {
-            eventKey = key;
+			let handlers = allHandlers.get(type);
-            eventListener = function(e) { listener(e.detail); };
+			if (handlers) {
-            eventTarget.addEventListener(type, eventListener, { once: true });
+				handlers.splice(handlers.indexOf(handler) >>> 0, 1);
-            return this;
+			}
 		},
-        off(type, key) {
+
-            if (eventTarget && eventListener && eventKey === key) {
+		emit(type, evt) {
-                eventTarget.removeEventListener(type, eventListener);
+            let handlers = allHandlers.get(type);
-            }
+            if (handlers) {
-            return this;
+                handlers.slice().map((handler) => { handler(evt);});
-        },
-        emit(type, detail) {
-            if (eventTarget) {
-                eventTarget.dispatchEvent(new CustomEvent(type, { detail }));
-            }
-            return this;
-        },
-        reset() {
-            if (eventTarget) {
-                document.body.removeChild(eventTarget);
-                eventTarget = eventListener = eventKey = undefined;
-            }
-            return this;
             }
 		}
+	};
 }

src/views/Home.vue

@@ -231,6 +231,7 @@ export default {
             dark: false
         }
     },
+    themeChangeListener: null,
     mounted() {
         let afId = this.$route.query['af_id'];
         if (afId) {
@@ -240,21 +241,21 @@ export default {
             document.cookie = 'primeaffiliateid=' + afId + ';expires=' + expire.toUTCString() + ';path=/; domain:primefaces.org';
         }
 
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.dark = true;
             else
                 this.dark = false;
-        });
+        };
+        EventBus.on('change-theme', this.themeChangeListener);
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener);
     },
     computed: {
         introductionClass() {
             return ['introduction', {'introduction-dark': this.dark}];
         }
     }
-
 }
 </script>

src/views/chart/BarChartDemo.vue

@@ -39,20 +39,22 @@ import BarChartDoc from './BarChartDoc';
 import EventBus from '@/AppEventBus';
 
 export default {
+    themeChangeListener: null,
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.applyDarkTheme();
             else
                 this.applyLightTheme();
-        });
+        };
+        EventBus.on('change-theme', this.themeChangeListener);
 
         if (this.isDarkTheme()) {
             this.applyDarkTheme();
         }
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener);
     },
     data() {
         return {

src/views/chart/ComboChartDemo.vue

@@ -23,20 +23,22 @@ import ComboChartDoc from './ComboChartDoc';
 import EventBus from '@/AppEventBus';
 
 export default {
+    themeChangeListener: null,
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.applyDarkTheme();
             else
                 this.applyLightTheme();
-        });
+        };
+        EventBus.on('change-theme', this.themeChangeListener);
 
         if (this.isDarkTheme()) {
             this.applyDarkTheme();
         }
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener);
     },
     data() {
         return {

src/views/chart/DoughnutChartDemo.vue

@@ -23,16 +23,18 @@ import DoughnutChartDoc from './DoughnutChartDoc';
 import EventBus from '@/AppEventBus';
 
 export default {
+    themeChangeListener = null,
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.chartOptions = this.getDarkTheme();
             else
                 this.chartOptions = this.getLightTheme();
-        });
+        }
+        EventBus.on('change-theme', this.themeChangeListener );
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener );
     },
     data() {
         return {

src/views/chart/LineChartDemo.vue

@@ -34,20 +34,22 @@ import LineChartDoc from './LineChartDoc';
 import EventBus from '@/AppEventBus';
 
 export default {
+    themeChangeListener: null,
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.applyDarkTheme();
             else
                 this.applyLightTheme();
-        });
+        };
+        EventBus.on('change-theme', this.themeChangeListener);
 
         if (this.isDarkTheme()) {
             this.applyDarkTheme();
         }
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener);
     },
     data() {
         return {

src/views/chart/PieChartDemo.vue

@@ -23,16 +23,18 @@ import PieChartDoc from './PieChartDoc';
 import EventBus from '@/AppEventBus';
 
 export default {
+    themeChangeListener = null,
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.chartOptions = this.getDarkTheme();
             else
                 this.chartOptions = this.getLightTheme();
-        });
+        }
+        EventBus.on('change-theme', this.themeChangeListener );
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener);
     },
     data() {
         return {

src/views/chart/PolarAreaChartDemo.vue

@@ -23,16 +23,18 @@ import PolarAreaChartDoc from './PolarAreaChartDoc';
 import EventBus from '@/AppEventBus';
 
 export default {
+    themeChangeListener = null,
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.chartOptions = this.getDarkTheme();
             else
                 this.chartOptions = this.getLightTheme();
-        });
+        }
+        EventBus.on('change-theme', this.themeChangeListener );
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener );
     },
     data() {
         return {

src/views/chart/RadarChartDemo.vue

@@ -23,16 +23,18 @@ import RadarChartDoc from './RadarChartDoc';
 import EventBus from '@/AppEventBus';
 
 export default {
+    themeChangeListener = null,
     mounted() {
-        EventBus.on('change-theme', event => {
+        this.themeChangeListener = (event) => {
             if (event.dark)
                 this.chartOptions = this.getDarkTheme();
             else
                 this.chartOptions = this.getLightTheme();
-        });
+        }
+        EventBus.on('change-theme', this.themeChangeListener );
     },
     beforeUnmount() {
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener );
     },
     data() {
         return {

src/views/liveeditor/LiveEditor.vue

@@ -53,13 +53,15 @@ export default {
             default: null
         }
     },
+    runDemoListener: null,
     mounted() {
-        EventBus.on('run-demo', type => {
+        this.runDemoListener = (type) => {
             this.postSandboxParameters(type);
-        });
+        };
+        EventBus.on('run-demo', this.runDemoListener);
     },
     beforeUnmount() {
-        EventBus.off('run-demo').reset();
+        EventBus.off('run-demo', this.runDemoListener);
     },
     methods: {
         postSandboxParameters(sourceType) {

src/views/tabview/TabViewDemo.vue

@@ -158,19 +158,21 @@ export default {
         }
     },
     timeout: null,
+    themeChangeListener: null,
     mounted() {
-        EventBus.on('change-theme', () => {
+        this.themeChangeListener = () => {
             this.timeout = setTimeout(() => {
                 this.$refs.tabview1.updateInkBar();
                 this.$refs.tabview2.updateInkBar();
                 this.$refs.tabview3.updateInkBar();
                 this.$refs.tabview4.updateInkBar();
             }, 50);
-        });
+        };
+        EventBus.on('change-theme', this.themeChangeListener);
     },
     beforeUnmount() {
         clearTimeout(this.timeout);
-        EventBus.off('change-theme');
+        EventBus.off('change-theme', this.themeChangeListener);
     },
     components: {
         'TabViewDoc': TabViewDoc