Emulator's value changes in both Studio and Archive #8431

modules/lib/src/main/resources/assets/js/app/event/EmulatedEvent.ts

@@ -1,16 +1,12 @@
-import {Event} from '@enonic/lib-admin-ui/event/Event';
-import {ClassHelper} from '@enonic/lib-admin-ui/ClassHelper';
 import {EmulatorDevice} from '../view/context/widget/emulator/EmulatorDevice';
 
-export class EmulatedEvent
-    extends Event {
+export class EmulatedEvent {
 
-    private device: EmulatorDevice;
+    private readonly device: EmulatorDevice;
 
-    private emulator: boolean;
+    private readonly emulator: boolean;
 
     constructor(device: EmulatorDevice, emulator: boolean = true) {
-        super();
         this.device = device;
         this.emulator = emulator;
     }
@@ -36,13 +32,4 @@ export class EmulatedEvent
     public isEmulator(): boolean {
         return this.emulator;
     }
-
-    static on(handler: (event: EmulatedEvent) => void) {
-        Event.bind(ClassHelper.getFullName(this), handler);
-    }
-
-    static un(handler?: (event: EmulatedEvent) => void) {
-        Event.unbind(ClassHelper.getFullName(this), handler);
-    }
-
 }

modules/lib/src/main/resources/assets/js/app/view/ContentItemPreviewPanel.ts

@@ -18,6 +18,7 @@ import {ContentSummary} from '../content/ContentSummary';
 import {PreviewActionHelper} from '../action/PreviewActionHelper';
 import {Action} from '@enonic/lib-admin-ui/ui/Action';
 import {PreviewWidgetDropdown} from './toolbar/PreviewWidgetDropdown';
+import {EmulatorContext} from './context/widget/emulator/EmulatorContext';
 
 enum PREVIEW_TYPE {
     WIDGET,
@@ -208,8 +209,7 @@ export class ContentItemPreviewPanel
             this.fetchPreviewForPath(contentSummary);
         });
 
-        EmulatedEvent.on((event: EmulatedEvent) => {
-
+        EmulatorContext.get().onDeviceChanged((event: EmulatedEvent) => {
             if (this.previewMessage) {
                 this.previewMessage.getEl().setWidth(event.getWidthWithUnits());
                 this.previewMessage.getEl().setHeight(event.getHeightWithUnits());

modules/lib/src/main/resources/assets/js/app/view/context/ContextView.ts

@@ -36,6 +36,7 @@ import {WidgetItemView} from './WidgetItemView';
 import {WidgetsSelectionRow} from './WidgetsSelectionRow';
 import {InternalWidgetType, WidgetView} from './WidgetView';
 import {ShowContentFormEvent} from '../../wizard/ShowContentFormEvent';
+import {EmulatorContext} from './widget/emulator/EmulatorContext';
 
 export class ContextView
     extends DivEl {
@@ -619,7 +620,7 @@ export class ContextView
         }
 
         this.removeWidget(this.emulatorWidgetView);
-        new EmulatedEvent(EmulatorDevice.getFullscreen(), false).fire();
+        EmulatorContext.get().notifyDeviceChanged(new EmulatedEvent(EmulatorDevice.getFullscreen(), false));
         this.widgetsSelectionRow.updateWidgetsDropdown(this.widgetViews, this.activeWidget);
     }
 

modules/lib/src/main/resources/assets/js/app/view/context/widget/emulator/EmulatorContext.ts

@@ -0,0 +1,31 @@
+import {EmulatedEvent} from '../../../../event/EmulatedEvent';
+
+export class EmulatorContext {
+
+    private static INSTANCE: EmulatorContext;
+
+    private deviceChangedListeners: ((event: EmulatedEvent) => void)[];
+
+    private constructor() {
+        this.deviceChangedListeners = [];
+    }
+
+    static get(): EmulatorContext {
+        if (!EmulatorContext.INSTANCE) {
+            EmulatorContext.INSTANCE = new EmulatorContext();
+        }
+
+        return EmulatorContext.INSTANCE;
+    }
+
+    onDeviceChanged(listener: (event: EmulatedEvent) => void) {
+        this.deviceChangedListeners.push(listener);
+    }
+
+    notifyDeviceChanged(event: EmulatedEvent) {
+        this.deviceChangedListeners.forEach((listener: (event: EmulatedEvent) => void) => {
+            listener(event);
+        });
+
+    }
+}

modules/lib/src/main/resources/assets/js/app/view/context/widget/emulator/EmulatorWidgetItemView.ts

@@ -2,6 +2,7 @@ import {WidgetItemView} from '../../WidgetItemView';
 import {EmulatorGrid, EmulatorListElement} from './EmulatorGrid';
 import {EmulatorDevice} from './EmulatorDevice';
 import {EmulatedEvent} from '../../../../event/EmulatedEvent';
+import {EmulatorContext} from './EmulatorContext';
 
 export interface EmulatorDeviceRow {
     id: number;
@@ -50,12 +51,12 @@ export class EmulatorWidgetItemView
                 const deviceRow = this.findDeviceBySize(+width, +height, units);
 
                 if (deviceRow) {
-                    new EmulatedEvent(deviceRow.device).fire();
+                    EmulatorContext.get().notifyDeviceChanged(new EmulatedEvent(deviceRow.device));
                 }
             });
         });
 
-        EmulatedEvent.on((event: EmulatedEvent) => {
+        EmulatorContext.get().onDeviceChanged((event: EmulatedEvent) => {
             if (!event.isEmulator()) {
                 // sync selected device with external event
                 this.devicesRows.some((row: EmulatorDeviceRow) => {

modules/lib/src/main/resources/assets/js/app/view/toolbar/EmulatorDropdown.ts

@@ -1,11 +1,12 @@
 import {FilterableListBoxWrapper} from '@enonic/lib-admin-ui/ui/selector/list/FilterableListBoxWrapper';
 import Q from 'q';
 import {EmulatorDevice} from '../context/widget/emulator/EmulatorDevice';
-import {EmulatedEvent} from '../../event/EmulatedEvent';
 import {ListBox} from '@enonic/lib-admin-ui/ui/selector/list/ListBox';
 import {NamesAndIconViewer} from '@enonic/lib-admin-ui/ui/NamesAndIconViewer';
 import {NamesAndIconViewSize} from '@enonic/lib-admin-ui/app/NamesAndIconViewSize';
 import {StyleHelper} from '@enonic/lib-admin-ui/StyleHelper';
+import {EmulatorContext} from '../context/widget/emulator/EmulatorContext';
+import {EmulatedEvent} from '../../event/EmulatedEvent';
 
 
 export class EmulatorDropdown
@@ -33,7 +34,7 @@ export class EmulatorDropdown
     }
 
     private listenToEmulatedEvent() {
-        EmulatedEvent.on((event: EmulatedEvent) => {
+        EmulatorContext.get().onDeviceChanged((event: EmulatedEvent) => {
             if (!event.isEmulator()) {
                 // sync selected device with external event
                 const deviceRow = this.getList().getItems().find((item: EmulatorDevice) => {
@@ -70,7 +71,7 @@ export class EmulatorDropdown
     protected doSelect(item: EmulatorDevice) {
         this.selectedOption.setObject(item);
         this.selectedOption.show();
-        new EmulatedEvent(item, true).fire();
+        EmulatorContext.get().notifyDeviceChanged(new EmulatedEvent(item, true));
         super.doSelect(item);
     }
 

modules/lib/src/main/resources/assets/js/app/wizard/page/LiveEditPageProxy.ts

@@ -92,6 +92,7 @@ import {ComponentTextUpdatedEvent} from '../../page/region/ComponentTextUpdatedE
 import {UpdateTextComponentViewEvent} from '../../../page-editor/event/incoming/manipulation/UpdateTextComponentViewEvent';
 import {SetComponentStateEvent} from '../../../page-editor/event/incoming/manipulation/SetComponentStateEvent';
 import {PageReloadRequestedEvent} from '../../../page-editor/event/outgoing/manipulation/PageReloadRequestedEvent';
+import {EmulatorContext} from '../../view/context/widget/emulator/EmulatorContext';
 
 // This class is responsible for communication between the live edit iframe and the main iframe
 export class LiveEditPageProxy
@@ -125,7 +126,7 @@ export class LiveEditPageProxy
         PageNavigationMediator.get().addPageNavigationHandler(this);
 
 
-        EmulatedEvent.on((event: EmulatedEvent) => {
+        EmulatorContext.get().onDeviceChanged((event: EmulatedEvent) => {
             if (!this.liveEditWindow) {
                 return;
             }