Plugins – OpenCities

Templates use a collection of OpenCities and third-party plugins to provide website users the best experience on all devices.

JQuery

JQuery is a fast, small, and feature-rich JavaScript library. For more information please visit http://jquery.com/.

Due to framework limitations and dependencies on other plugins, OpenCities uses JQuery1.10.1. If you choose a new plugin to use in OpenCities or write your own JavaScript, please make sure it supports this version of JQuery. If you do write custom code please keep an eye out for any updates on JQuery used in OpenCities.

Modernizr

Modernizr tells you what HTML, CSS, and JavaScript features the user’s browser has to offer. For more information please visit https://modernizr.com/.

Modernizr runs on OpenCities on page load and adds specific CSS classes to the <html> tag. You can use these in your CSS or JavaScript to perform certain actions based on the features available on the device.

For example, devices with touch capabilities will have the CSS class “touch” on the <html> tag. On other devices, you should get the CSS class “no-touch”.

Metaquery

Metaquery allows you to perform additional JavaScript when the user has moved from one breakpoint to another.

This adds the following CSS classes to the <html> that represents the current breakpoint:

breakpoint-sc-size-1 - larger than 992px (desktop and tablets in landscape mode)
breakpoint-sc-size-2 - smaller than 992px and larger than 768px (tablets in portrait mode)
breakpoint-sc-size-3 - smaller than 768px and larger than 480px (mobiles in landscape mode and smaller tablets)
breakpoint-sc-size-4 - smaller than 480px (mobiles)

If you want to perform additional actions when the user switches between breakpoints, use the following code:

// size : sc-size-1, sc-size-2, sc-size-3 or sc-size-4
// isComingIn : boolean
// lastIn : Breakpoint the user is leaving
OpenCities.Plugins.BreakpointChange.onBreakpointChange(function (size, isComingIn, lastIn) {
	if (isComingIn) {
		if (size == 'sc-size-1') {			
			// User is entering size 1
		}
	}
	else {
		if (size == 'sc-size-1') {
			//User is leaving size 1 
		}
	}
});

Google Analytics wrapper

If you’ve enabled Google Analytics on your site, you can use the easy-to-use Analytics wrapper within OpenCities to submit custom events to Google Analytics. For more information, check out Google Analytics' help center.

Use the code below to submit custom events to GA using the OpenCities wrapper. The OpenCities wrapper will make sure GA is configured for your site before trying to submit the new event. You can pass any of the optional parameters allowed in GA event tracking, and even use custom events.

OpenCities.Analytics.Send('event', [Optional parameter]);

Masonry

Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, like a mason fitting stones in a wall. For more information please visit https://masonry.desandro.com/.

In OpenCities, certain libraries are loaded on demand. This is to improve the performance of your sites.

If you want to use the included masonry plugin, please use the following JavaScript code:

var masonryPath = OpenCities.Paths.SiteTemplate + 'masonry.imagesloaded.min.js'
var callbacks = (function () {
	return {
		masonry: function () {
			// Execute code when masonry library is loaded
			$(‘selector’).masonry();
		}
	};
});
OpenCities.Dependencies.GetScript(masonryPath , callbacks.masonry);