clinical:device

clinical:device

Meteor Device-Detection is a smart package which features client-side device type detection & template switching with optional meteor-router support.

===============================

Example

An example which uses this package can be found on github, and can be seen in action at device-detection.meteor.com.

===============================

Installation

Device-Detection is on Atmosphere, so you can install it very easily with Meteorite.

$ meteor add mystor:device-detection

NOTE: Device-Detection has been updated to support 0.8.0 and Blaze. It's helpers will no longer function correctly on older versions of Meteor running Spark.

===============================

Detecting Devices

Meteor Device-Detection runs only on the client.

To determine the current type of device, you can call the following functions:

1Meteor.Device.isTV();
2Meteor.Device.isTablet();
3Meteor.Device.isPhone();
4Meteor.Device.isDesktop();
5Meteor.Device.isBot();

If you are using Handlebars for templating, then they are also avaliable as handlebars helpers:

{{#if isTV}}TV{{/if}}
{{#if isTablet}}Tablet{{/if}}
{{#if isPhone}}Phone{{/if}}
{{#if isDesktop}}Desktop{{/if}}
{{#if isBot}}Bot{{/if}}

===============================

Detection Options

Meteor Device-Detection is based off of express-device, this means that it supports some of the same customization options.

You can set the following values in Javascript and then call Meteor.Device.detectDevice(); to redetect the current device.

1// These are the default values
2Meteor.Device.emptyUserAgentDeviceName = 'desktop';
3Meteor.Device.botUserAgentDeviceName = 'bot';
4Meteor.Device.unknownUserAgentDeviceType = 'phone';
5
6// Don't forget to re-detect the device!
7Meteor.Device.detectDevice();

===============================

User Preferences

If you are offering a different user experience to users who are on different devices, it is usually a good idea to offer them the option to change the experience which they are experiencing. Device-Detection makes this easy by giving access to a few functions to set user preferences.

1Meteor.Device.preferTV();
2Meteor.Device.preferTablet();
3Meteor.Device.preferPhone();
4Meteor.Device.preferDesktop();
5Meteor.Device.preferBot();
6
7// Clear any preferences and re-analyze user-agent
8Meteor.Device.clearPreference();

You can also get whether the user has a preference by calling

1Meteor.Device.hasPreference();

===============================

Templates

A common use case for device detection is to serve a different user experience to the user based on what their device type is. This will often involve different templates to be displayed to the user.

Device-Detection provides a simple way to avoid ugly {{#if isPhone}} ... {{/if}} statements in your code, by using the {{> deviceRender}} helper!

If you call the device render helper with a parameter (the parameter being the name of the template), the helper will first search for, and then render, a template with that name, as well as a suffix (_tv for TV, _tablet for Tablet, _phone for Phone, _desktop for Desktop, and _bot for a Bot). If it cannot find that template it will instead render the template name without any suffix as a fallback.

1<template name="body">
2  <!-- This template will render the following
3	tv:      the template "page"
4	tablet:  the template "page"
5	phone:   the template "page_phone"
6	desktop: the template "page"
7	bot:     the template "page"
8  -->
9  {{> deviceRender 'page'}}
10</template>
11
12<template name="page">
13  <h1>Default Page</h1>
14</template>
15
16<template name="page_phone">
17  <h1>Phone specific page</h1>
18</template>

Naturally, you can customize the suffixes which you use:

1Meteor.Device.setTVSuffix('_tv');
2Meteor.Device.setTabletSuffix('_tablet');
3Meteor.Device.setPhoneSuffix('_phone');
4Meteor.Device.setDesktopSuffix('_desktop');
5Meteor.Device.setBotSuffix('_bot');

===============================

Meteor-Router Integration

If you are using meteor-router, you can also call {{> deviceRender}} with no parameters. If you do this, deviceRouter will default to using Meteor.Router.page() as the template name.

===============================

Contributing

If you have any ideas on how to improve this project, or any bug fixes or corrections to make, plase fork and make a pull request. I am always open to new improvements.

===============================

Licensing