Bridge.Event

Remote preso events

Triggers and listeners to allow for communication between master and client during Remote Presos through the passing of serializable data (ie. objects, arrays, strings & numbers).

caution

To avoid potential conflicts with other LivePreso events in the Bridge.Event namespace, we recommend you prefix the names of your remote preso events with master: - unless they are called from the client side, in which case you will be prefixing with client:.

warning

Events are scoped to the slide that creates them.

.on(event, fn)

Registers an event listener over sockets.

Bridge.Event.on("master:addClass", (elemSelector, className) => {
	$(elemSelector, "#slide_id").addClass(className);
});

.off(event, fn)

De-registers an event listener.

Bridge.Event.trigger("master:addClass", ".selector", "active");

.trigger(event[, arguments...])

Triggers registered listeners over sockets.

Bridge.Event.trigger("master:addClass", ".selector", "active");

caution

Only basic data can be passed through bridge, that is things like numbers, strings, etc. Pass selector ids and classes instead, and use these to find the relevant DOM element from within the Bridge.Event.on() function.

client: prefix

When wanting to trigger a Bridge Event from the client it must use the client: prefix. Events with the client: prefix will only be triggered from the client's browser.

if ($("body").hasClass("master")) {
	Bridge.Event.on("client:fetchState", () => {
		Bridge.Event.trigger(
			"master:updateState",
			Bridge.Context.match(".state", {})
		);
	});
} else if ($("body").hasClass("client")) {
	Bridge.Event.on("master:updateState", (state) => {
		// DOM manipulates relevant to the provided state data
	});
}

Bridge.Event.trigger("client:fetchState");

Global events

.on("deckready", fn, "deck")

Executed once, when the presentation loads. Can be a useful place to register other global event listeners associated with sliderendered, slideclosed etc.

Bridge.Event.on(
	"deckready",
	function () {
		// Example: set up a static class value once, from the context,
		//          allowing it to be accessed throughout the deck code
	},
	"deck"
);

.on("sliderendered", fn, "deck")

Executed every time a slide is rendered.

Bridge.Event.on(
	"sliderendered",
	function (pageId) {
		// Example: add a class modifier to the current slide, based on a context value
		//          (useful for on-the-fly branding)
	},
	"deck"
);

This event is triggered after the equivalent, slide-specific jquery handler is called, if registered.

.on("slideready", fn, "deck")

Executed every time a slide comes into focus in the presentation view.

Bridge.Event.on(
	"slideready",
	function (pageId) {
		// Example: add a class to trigger slide animations
	},
	"deck"
);

This event is triggered after the equivalent, slide-specific jquery handler is called, if registered.

.on("slideclosed", fn, "deck")

Executed just before a slide is removed from the DOM.

Bridge.Event.on(
	"slideclosed",
	function (pageId) {
		// Example: perform global cleanup actions associated with event listeners, charts etc
	},
	"deck"
);

This event is triggered after the equivalent, slide-specific jquery handler is called, if registered.

.on("resize", fn, "deck")

Executed when the application or browser window size changes.

Bridge.Event.on(
	"resize",
	function () {
		// Example: recalculate scaling factors for drag drop and other handlers
	},
	"deck"
);

This listener can be useful for updating any cached values being used to calculate the position or dimensions of DOM elements. It is a cleaner alternative to attaching your own resize listener to the window object, which is outside your deck's DOM node. It can fire many times in quick sucession, and as such it is recommended that you pair it with Underscore's _.throttle() to limit the number of times it can be called in a short space of time.

Additional events

.on("contentchanged")

Triggered when the presentation's content changes, including toggling or ordering sections and slides.

Bridge.Event.on("contentchanged", function () {});

.on("showpage:slideKey[/subslideKey]")

Executed when the screenshotter is ready to capture page n.

Used to set up a given snapshot when creating a PDF. This event will fire as many times as pages have been set by a previous call to the Bridge.Navigation.setPages.

Argument	Type	Description
n	Integer	Page to be captured (eg. 1, 2, 3 etc.)
done	Function	Delays capturing the current page until called

Slide path example:

Bridge.Event.on("showpage:roi_infographic", function (n, done) {
	// code that sets up page n for screenshotting
	// on slide with key "roi_infographic"
});

Subslide path example:

Bridge.Event.on("showpage:about_us/subslide-2", function (n, done) {
	// code that sets up page n for screenshotting
	// on slide with key "about_us" on "subslide-2"
});

Complete example:

var $slide = Bridge.Slides.getArticle();
var slideKey = Bridge.Slides.getArticleID();
var maxHeight = 400;

$slide.on("sliderendered", function () {
	var screenshotMode = $("body").hasClass("screenshot-full");
	if (screenshotMode) {
		var $scrollDiv = $slide.find("#test-scrolly");
		var $scrollContents = $scrollDiv.find("#test-scrolly-contents");
		// a rough example of how to calculate the number of pages
		var pages = Math.ceil($scrollContents.height() / maxHeight);

		if (pages > 1) {
			// only invoke the `showpage` mechanism if required
			Bridge.Navigation.setPages(slideKey, pages);
			Bridge.Event.on(`showpage:${slideKey}`, function (number, done) {
				var top = maxHeight * number - maxHeight;
				$scrollDiv.scrollTop(top);
				done();
			});
		}
	}
});

info

If setPages has not been called for the current slide ID then this event will not fire.

See Bridge.Navigation.setPages reference.

warning

If done is declared it must be called, more on done().

.on("overlayopened")

Executed when the slides overlay is opened during a presentation. Users have the ability to access the slide sorter during a preso, this gives them the ability to reorder and toggle slides while they are presenting to their client (in-person and remote).

Bridge.Event.on("overlayopened", function () {
	// Example: pause YouTube video
});

.on("overlayclosed")

Executed when the slides overlay is closed during a presentation. Closing the slide overlay signals that the user has returned to the presentation, and structural changes may have taken place on the preso.

For example:

• Slides toggled (on/off)
• Slides reordered

Bridge.Event.on("overlayopened", function () {
	// Example: refresh the slide list displayed on a contents/agenda slide
});

info

overlayopened and overlayclosed events are automatically triggered on the client side of a remote preso. This means there is no need for content developers to setup any additional remote preso Bridge.Events to update the client.