Events

PitchPrint is built on  T3 Javascript Framework and adheres to its core philosophy of modular design. To this end, everything on the PitchPrint app is actually a module and are loosely coupled, which means modules don't talk directly to each other. They simply broadcast events and any interested listener can plug in and perform an action based on the event.

There is only one custom event pipe in PitchPrint and is based on the  T3's EventTarget object.

This can be accessed easily via the designer once it has been  instantiated as described here.

JavaScript

var iEvents = designer.events;
	
If you are on any of our frameworks, you can use the  designer ready method to hook your events

Developers can attach listeners to this object.

Adds a new event handler for a particular type of event.

function doSomething(_e) {
	//Do something when this function is called..
	//_e contains the event dispatched with its data
}
iEvents.on('after-show', doSomething);
	

Or talk to the app by firing an event!

iEvents.fire('show-preview', null);
	

Events you can listen for

List of events your app can listen for

// 'resize' - Dispatched when the window is resized.
iEvents.on('resize', _doSomething);

// 'window-focused' - Dispatched when the window gains focus
iEvents.on('window-focused', _doSomething);

// 'fonts-loaded' - Dispatched when all fonts have been loaded
iEvents.on('fonts-loaded', _doSomething);

// 'before-show' - Dispatched before the editor is lunched
iEvents.on('before-show', _doSomething);

// 'after-show' - Dispatched when the editor is fully lunched
iEvents.on('after-show', _doSomething);

// 'design-loaded' - Dispatched when a design has been loaded to canvas
iEvents.on('design-loaded', _doSomething);

// 'app-shown' - Dispatched when the editor has been displayed
iEvents.on('app-shown', _doSomething);

// 'app-closed' - Dispatched when the editor has been closed
iEvents.on('app-closed', _doSomething);

// 'app-client-pageCount' - Dispatched when number of pages has changed.
iEvents.on('app-client-pageCount', _doSomething);

// 'app-client-templateChange' - Dispatched when the template image is changed
iEvents.on('app-client-templateChange', _doSomething);

// 'app-client-canvasResized' - Dispatched when page dimensions are changed
iEvents.on('app-client-canvasResized', _doSomething);

// 'page-created' - Dispatched when a page has been added
iEvents.on('page-created', _doSomething);

// 'page-select-end' - Dispatched when another page is selected
iEvents.on('page-select-end', _doSomething);

// 'before-start-save' - Dispatched before the app start saving
iEvents.on('before-save', _doSomething);

// 'project-saved' - Dispatched when the project has been saved and pdf..
//  ..is being generated. It passes an JSON data with the project details: 
// source: 'strgified JSON of the project source code',
// projectId: 'string',
// numPages: number of pages in the project,
// previews: [] array of the page previews,
// meta: Additional meta data relating to the project
iEvents.on('project-saved', _doSomething);

// 'stage-adjusted' - Dispatched when current canvas size adjusts
iEvents.on('stage-adjusted', _doSomething);

// 'before-preview' - Dispatched before the preview is shown
// In your _doSomething function, you can set this variable to true to prevent
// PPCLIENT.designer.getModel().runtime.act.overidePreview = true;
iEvents.on('before-preview', _doSomething);

// 'module-initialized' - Dispatched when a module has finished initializing
iEvents.on('module-initialized', _doSomething);

// 'lib-ready' - Dispatched when the library files have all been loaded
iEvents.on('lib-ready', _doSomething);

// 'design-before-loading-pages' - Dispatched just before the designer loads
// the pages unto canvas..
iEvents.on('design-before-loading-pages', _doSomething);

// 'design-before-after-pages' - Dispatched just after the designer loads
// the pages unto canvas..
iEvents.on('design-after-loading-pages', _doSomething);
	

Events you can fire

List of events your app can dispatch to PitchPrint

// 'show-preview' - Show design preview
iEvents.fire('show-preview');

// 'hide-preview' - Hide design preview
iEvents.fire('hide-preview');

// 'select-preview' - Select a preview page. Parameter should be a string
// + : Next page
// - : Previous page
iEvents.fire('select-preview', '+');

// 'delete-items' - Delete all currently selected items
iEvents.fire('delete-items');

// 'copy-items' - Copy all currently selected items into clipboard
iEvents.fire('copy-items');

// 'cut-items' - Cut all currently selected items
iEvents.fire('cut-items');

// 'paste-items' - Paste items in the clipboard on the current canvas
iEvents.fire('paste-items');

// 'discard-selection' - Deselect currently selected items
iEventss.fire('discard-selection');

// 'undo' - Undo last action
iEvents.fire('undo');

// 'redo' - Redo previous action
iEvents.fire('redo');

// 'show-editor' - Launch the editor window
iEvents.fire('show-editor');

// 'load-design' - Load design
iEvents.fire('load-design', _designJsonData);

// 'load-design-by-id' - Load design by designId
iEvents.fire('load-design-by-id', _designId);

// 'show-preset-form' - Show the preset form
iEvents.fire('show-preset-form');

// 'hide-preset-form' - Hide the preset form
iEvents.fire('hide-preset-form');

// 'close-app' - Close the app
iEvents.fire('close-app');

// 'resume-app' - Resume app after closing it
iEvents.fire('resume-app');

// 'launch-tour' - Start the tour help
iEvents.fire('launch-tour');

// 'show-welcome' - Show the welcome message if any one was set
iEvents.fire('show-welcome');

// 'reload-app' - Reload the design
iEvents.fire('reload-app');

// 'select-page' - Change to page.. Parameter is page index
iEvents.fire('select-page', _idx);

// 'page-swap-dimension' - Swap the current page dimension
// Between potrait and landscape
iEvents.fire('page-swap-dimension');

// 'zoom-page' - Zoom current page. Parameters are:
// + : Zoom in
// - : Zoom out
iEvents.fire('zoom-page', '+');

// 'scale-to-fit' - Zoom the current page to fit window
iEvents.fire('scale-to-fit');

// 'fit' - Zooms the current page to fit window as well as move
// it to center if the canvas has been panned before
iEvents.fire('fit');

// 'load-image' - Will load an image unto the canvas
// Be reminded, if the image source is not CORS compliant,
// It will taint the canvas. Read more here:
// https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image
// http://enable-cors.org/server_apache.html
iEvents.fire('load-image', { 
  url: _imageUrl,
  type: 'image' || 'shape',
  canvas: _canvas /* Optional. If null, it is loaded unto current canvas */
});

// 'new-text' - Adds a new text to the current canvas
iEvents.fire('new-text', {
  text: 'This is my text',
  type: 'i-text' || 'textbox',
  fontFamily: 'Arial',
  fontStyle: 'normal',
  fontWeight: 'normal',
  textAlign: 'left',
  textDecoration: '',
  top: 50,
  left: 50,
  opacity: 1,
  angle: 0,
  scale: 1,
  canvas: _canvas /* Optional. If null, it is loaded unto current canvas */
});

// 'flash-show' - Show a flash message. The delay before hide is in ms
// icons: ok, warning, cancel, error, font-size, info, help, zip
iEvents.fire('flash-show', {
  text: 'This is a flash',
  icon: 'info',
  delay: 3000
});

// 'flash-hide' - Hides the flash message if the hide delay has not
iEvents.fire('flash-hide');

// 'dialog-show' - Shows a dialog box. You can pass in your own function
// to either of the buttons or just 'close' to close the dialog.
// in your function, you will need to dispatch 'dialog-hide' to close it
iEvents.fire('dialog-show', {
  text: 'Do you want to continue?',
  buttons: {
    ok: {
      label: 'Yep',
      click: yourFunction || 'close'
    },
    cancel: {
      label: 'Nahh',
      click: yourFunction || 'close'
    }
  }
});

// 'dialog-show-top' - Shows a dialog on top of the app
iEvents.fire('dialog-show-top', {
  title: 'Dialog Title',
  content: 'Do you want to continue?',
  buttons: {
    ok: {
      label: 'Yep',
      click: yourFunction || 'close'
    },
    cancel: {
      label: 'Nahh',
      click: yourFunction || 'close'
    }
  }
});

// 'dialog-hide' - Hides the current dialog
iEvents.fire('dialog-hide');

// 'context-show' - Shows the context menu against current item
iEvents.fire('context-show');

// 'context-hide' - Hides the context menu
iEvents.fire('context-hide');

// 'alert-modal' - Show a loading modal window
iEvents.fire('alert-modal', _message);

// 'alert-hide-modal' - Hide current modal window
iEvents.fire('alert-hide-modal', _message);

// 'add-panel' - Creates a new panel on the left panel stack
// Button is optional, you can add button by firing the event 'create-panel-btn'
// Ensure your _jQueryElement has class "pp-hidden" so it will not appear when added
// Until the button is clicked to show it or you fire up "select-panel"
iEvents.fire('add-panel', {
  id: 'uniquePanel',
  element: _jQueryElement,
  button: {
    icon: 'texture',
    tip: 'tooltip message'
  }
});

// 'select-panel' - Shows a panel and hides the current one
iEvents.fire('select-panel', 'uniquePanel');

// 'hide-panel' - Hides the left panel
iEvents.fire('hide-panel');

// 'create-panel-btn' - Creates a panel button (top left button set)
iEvents.fire('create-panel-btn', {
  dt: 'data-type',
  tip: 'toolTip message',
  icon: 'icon'
});

// 'create-primary-btn' - Creates a panel button (top right button set)
iEvents.fire('create-primary-btn', {
  dt: 'data-type',
  tip: 'toolTip message',
  icon: 'icon',
  attr: ''
});

// 'create-secondary-btn' - Creates a panel button (bottom center button set)
iEvents.fire('create-secondary-btn', {
  dt: 'data-type',
  tip: 'toolTip message',
  icon: 'icon'
});
	

Still need help? Contact Us Contact Us