8 Interact on Print Event

Description

Unlike other examples, our method will fire an event.
  1. Create an element to handle interactions
  2. Create an event method

Try printing this page

<p>Try printing this page</p>
<div 
    data-fs-sequence="onprint-event"
    data-fs-etag="onprint:trigger-example-interaction" 
    data-fs-print="trigger-example-interaction"
    data-fs-params='{ 
        "trigger": {
            "moduleid": "module-2410d449e70cdb75a0fccd29e7880c17"
         },
         "rel": {
             "interaction": {
                    "subject":"Example Interaction",
                    "description": "Interact on a print event"
             }       
          }
    }'
   ></div>
/**
 * Create an event sequence instance.
 **/
const onPrintEvent = FS.eventSequence('onprint-event');

// Create and option 
onPrintEvent.option('printed', 'create');
// Create a method
onPrintEvent.createMethod( 'onPrint', (e, elem) => {
	var mediaQueryList = window.matchMedia('print');
	mediaQueryList.addListener( ( mql ) => {
		if(mql.matches) {
          	/**
             * We've created an element to fire an interaction
             * FS.fire( selector ) is similar document.querySelector( selector ).click()
             **/
            onPrintEvent.fire('[data-fs-print]');
            
            /**
             * Create and store an option regarding this event for later use. FS.option()
             */
            onPrintEvent.option('printed', 'update', true);
		}
	});
  if( onPrintEvent.option('printed', 'get') ) {
    console.log(onPrintEvent.option('printed', 'get'));
}
});