Add new `canvas:frame:*` events

src/canvas/types.ts

@@ -100,6 +100,36 @@ export enum CanvasEvents {
    * });
    */
   pointer = 'canvas:pointer',
+
+  /**
+   * @event `canvas:frame:load` Frame loaded in canvas.
+   * The event is triggered right after iframe's `onload`.
+   * @example
+   * editor.on('canvas:frame:load', ({ window }) => {
+   *  console.log('Frame loaded', window);
+   * });
+   */
+  frameLoad = 'canvas:frame:load',
+
+  /**
+   * @event `canvas:frame:load:head` Frame head loaded in canvas.
+   * The event is triggered right after iframe's finished to load the head elemenets (eg. scripts)
+   * @example
+   * editor.on('canvas:frame:load:head', ({ window }) => {
+   *  console.log('Frame head loaded', window);
+   * });
+   */
+  frameLoadHead = 'canvas:frame:load:head',
+
+  /**
+   * @event `canvas:frame:load:body` Frame body loaded in canvas.
+   * The event is triggered when the body is rendered with components.
+   * @example
+   * editor.on('canvas:frame:load:body', ({ window }) => {
+   *  console.log('Frame completed the body render', window);
+   * });
+   */
+  frameLoadBody = 'canvas:frame:load:body',
 }
 /**{END_EVENTS}*/
 

src/canvas/view/FrameView.ts

@@ -1,6 +1,6 @@
 import { bindAll, debounce, isString, isUndefined } from 'underscore';
 import { ModuleView } from '../../abstract';
-import { BoxRect } from '../../common';
+import { BoxRect, ObjectAny } from '../../common';
 import CssRulesView from '../../css_composer/view/CssRulesView';
 import ComponentWrapperView from '../../dom_components/view/ComponentWrapperView';
 import Droppable from '../../utils/Droppable';
@@ -18,6 +18,7 @@ import { hasDnd, setViewEl } from '../../utils/mixins';
 import Canvas from '../model/Canvas';
 import Frame from '../model/Frame';
 import FrameWrapView from './FrameWrapView';
+import CanvasEvents from '../types';
 
 export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
   /** @ts-ignore */
@@ -290,14 +291,14 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
     const { $el, ppfx, em } = this;
     $el.attr({ class: `${ppfx}frame` });
     this.renderScripts();
-    em.trigger('frame:render', this);
+    em.trigger('frame:render', this); // deprecated
     return this;
   }
 
   renderScripts() {
     const { el, model, em } = this;
     const evLoad = 'frame:load';
-    const evOpts = { el, model, view: this };
+    const evOpts: ObjectAny = { el, model, view: this };
     const canvas = this.getCanvasModel();
     const appendScript = (scripts: any[]) => {
       if (scripts.length > 0) {
@@ -314,8 +315,10 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
           scriptEl.onerror = scriptEl.onload = appendScript.bind(null, scripts);
         }
       } else {
+        em?.trigger(CanvasEvents.frameLoadHead, evOpts);
         this.renderBody();
-        em && em.trigger(evLoad, evOpts);
+        em?.trigger(CanvasEvents.frameLoadBody, evOpts);
+        em?.trigger(evLoad, evOpts); // deprecated
       }
     };
 
@@ -327,7 +330,9 @@ export default class FrameView extends ModuleView<Frame, HTMLIFrameElement> {
         doc.write(frameContent);
         doc.close();
       }
-      em && em.trigger(`${evLoad}:before`, evOpts);
+      evOpts.window = this.getWindow();
+      em?.trigger(`${evLoad}:before`, evOpts); // deprecated
+      em?.trigger(CanvasEvents.frameLoad, evOpts);
       appendScript([...canvas.get('scripts')]);
     };
   }