vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #1181 - Reimplement EventBus

pull/1088/head
Cagatay Civici 2021-04-15 17:53:33 +03:00
parent f586985d4d
commit f200fc102e
19 changed files with 168 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/AppConfigurator.vue
View File

@ -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) {

8
src/AppDocumentation.vue
View File

@ -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() {

16
src/components/confirmdialog/ConfirmDialog.vue
View File

@ -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('close');
ConfirmationEventBus.off('confirm', this.confirmListener);
ConfirmationEventBus.off('close', this.closeListener);
},
methods: {
accept() {

17
src/components/confirmpopup/ConfirmPopup.vue
View File

@ -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;
}
});
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('close');
ConfirmationEventBus.off('confirm', this.confirmListener);
ConfirmationEventBus.off('close', this.closeListener);
this.unbindOutsideClickListener();
if (this.scrollHandler) {

15
src/components/datatable/BodyCell.vue
View File

@ -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);
}
}
},

14
src/components/datatable/ColumnFilter.vue
View File

@ -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;

18
src/components/overlaypanel/OverlayPanel.vue
View File

@ -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 => {
if (this.container && this.container.contains(e.target)) {
this.overlayEventListener = (e) => {
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) {

33
src/components/toast/Toast.vue
View File

@ -41,19 +41,9 @@ export default {
}
},
mounted() {
ToastEventBus.on('add', (message) => {
if (this.group == message.group) {
this.add(message);
}
});
ToastEventBus.on('remove-group', (group) => {
if (this.group === group) {
this.messages = [];
}
});
ToastEventBus.on('remove-all-groups', () => {
this.messages = [];
});
ToastEventBus.on('add', this.onAdd);
ToastEventBus.on('remove-group', this.onRemoveGroup);
ToastEventBus.on('remove-all-groups', this.onRemoveAllGroups);
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: {

54
src/components/utils/EventBus.js
View File

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

9
src/views/Home.vue
View File

@ -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>

8
src/views/chart/BarChartDemo.vue
View File

@ -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 {

8
src/views/chart/ComboChartDemo.vue
View File

@ -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 {

8
src/views/chart/DoughnutChartDemo.vue
View File

@ -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 {

8
src/views/chart/LineChartDemo.vue
View File

@ -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 {

8
src/views/chart/PieChartDemo.vue
View File

@ -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 {

8
src/views/chart/PolarAreaChartDemo.vue
View File

@ -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 {

8
src/views/chart/RadarChartDemo.vue
View File

@ -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 {

8
src/views/liveeditor/LiveEditor.vue
View File

@ -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) {

8
src/views/tabview/TabViewDemo.vue
View File

@ -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