8 Interact on Print Event
Description
Unlike other examples, our method will fire an event.- Create an element to handle interactions
- 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')); } });