Events

Starting with version 9, the PitchPrint app is instantiated in a separate iFrame to sandbox it from your product page as well as prevent styling conflicts with the hosting page. To do this, we created two classes, the PitchPrintClient which is instantiated inside the hosting page and a PitchPrintFrame which lives in the iFrame.

The PitchPrintClient class is your entry point into the app. This is the class that handles the creation of the iFrame and some other initialization procedures.

If you are on any of the cart frameworks, you can use the; designer ready method to hook your 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.

On the PitchPrintClient class, you listen to events with the "on" method and fire by calling the "fire" method on the class.

function doSomething(_e) {
	//Do something when this function is called..
	//_e contains the event dispatched with its data
}

//Listens to an event and calls a function when it happens
ppclient.on("event-name", doSomething);

Or talk to the app by firing an event!

ppclient.fire("event-name", doSomething);

Events you can listen for

List of events your app can listen for

// 'app-validated' - Dispatched when the app has done it's validation..
ppclient.on('app-validated', _doSomething);

// 'lib-ready' - At this stage, the app has loaded the library.
// Library here refers to assets needed for that design
// like design data, list of images, fonts, layout, etc..
// This data is only loaded when you have set a designId or projectId in your options
ppclient.on('lib-ready', _doSomething);

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

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

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

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

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

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

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

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

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

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

// 'project-saved' - Dispatched when the project has been saved and pdf..
//  ..is being generated. It passes JSON data with the project details: 
// source: 'stringified 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
ppclient.on('project-saved', _doSomething);

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

Events you can fire

List of events your app can dispatch to PitchPrint

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// 'fit-page' - Zooms the current page to fit window as well as move
ppclient.fire('fit-page');

// '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
ppclient.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
ppclient.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
ppclient.fire('show-flash', {
  text: 'This is a flash',
  icon: 'icon-text_fields',
  delay: 3000
});

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

// 'blank-page' - Creates a blank new page.
// Width and Height are provided in physical values, not pixels.
// You can optionally provide all the pageData attributes like bleed,
// hfoldlines, margin etc along or leave to use default
ppclient.fire('blank-page', {
  width: 12,
  height: 10,
  title: "My new page"
});

// 'resize-page' - Resize the dimension of a page.
// Width and Height are provided in physical values, not pixels.
// pageId is either the index of the page or the ID of the page
// scaleItems tries to scale the elements so they don't go
// off the screen should you scale from large to small size.
ppclient.fire('resize-page', {
  width: 12,
  height: 10,
  pageId: 0,
  scaleItems: false
});

// 'delete-page' - Removes a page.
// page can be a value of:
// "all" - deletes all the pages in the design
// type number - specifies the index of the page
// type string - specifies the id of the page
// undefined - deletes the current page
ppclient.fire('delete-page', page);

// 'update-bleed' - Updates a Page's bleed lines.
// bleed: Value of the new bleed
// pageId can be a value of:
// type number - specifies the index of the page
// type string - specifies the id of the page
// undefined - the current page
ppclient.fire('update-bleed', { bleed: 0.3, pageId: 0 });