83 lines
2.8 KiB
Markdown
83 lines
2.8 KiB
Markdown
---
|
|
layout: doc
|
|
title: deliteful/features
|
|
---
|
|
|
|
# deliteful/features
|
|
|
|
This module leverages `requirejs-dplugins/has` and augments the `has()` tests with
|
|
media query based tests, such that multichannel widgets can rely on the `has()` API
|
|
for determining the channel.
|
|
Using this approach in conjunction with an optimizing compiler at build time, it is possible
|
|
to optimize out unwanted code paths for specific channel policies.
|
|
|
|
The `deliteful/features` module sets the following `has`-features:
|
|
|
|
* `has("phone-like-channel")`: `true` for small screens, `false` otherwise.
|
|
* `has("tablet-like-channel")`: `true` for medium screens, `false` otherwise.
|
|
* `has("desktop-like-channel")`: `true` for large screens, `false` otherwise.
|
|
|
|
The flags are set depending on the screen size, using CSS media queries that compare the actual
|
|
screen width (the `device-width` media feature) with the corresponding breakpoint values
|
|
provided by `deliteful/channelBreakpoints`.
|
|
|
|
Note that the screen size is the only criteria used for determining the channel. When a
|
|
channel flag is set to `true`, the other channel flags are set to `false`.
|
|
|
|
## Using deliteful/features
|
|
|
|
Example of use for determining different code paths depending on the channel:
|
|
|
|
```js
|
|
require(["deliteful/features", ...], function (has, ...) {
|
|
if (has("phone-like-channel")) { // only for the phone channel (small screen)
|
|
...
|
|
} else { // tablet-like and desktop-like channels (medium and large screens)
|
|
...
|
|
}
|
|
});
|
|
```
|
|
|
|
Example of conditional loading of dependent modules depending on the channel,
|
|
using a chained ternary operator applied to the `deliteful/features` module used as
|
|
a [requirejs plugin](http://requirejs.org/docs/plugins.html):
|
|
|
|
```js
|
|
require(["deliteful/features!phone-like-channel?./PhoneModule:tablet-like-channel?./TabletModule:./DesktopModule", ...],
|
|
function (Module, ...) {
|
|
// The Module argument points to the return value of either PhoneModule, TabletModule,
|
|
// or DesktopModule depending on the channel.
|
|
...
|
|
});
|
|
```
|
|
|
|
|
|
## Configuring deliteful/features
|
|
|
|
The channel flags can be configured statically in a hashmap provided through
|
|
[requirejs module configuration](http://requirejs.org/docs/api.html#config-moduleconfig),
|
|
for instance:
|
|
|
|
```html
|
|
<script>
|
|
// configuring RequireJS
|
|
require.config({
|
|
...
|
|
config: {
|
|
"requirejs-dplugins/has": {
|
|
"phone-like-channel": false,
|
|
"tablet-like-channel": true,
|
|
"desktop-like-channel": false,
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
```
|
|
Note that only one channel flag should be set to `true`.
|
|
|
|
If the channel flags are not configured statically, they are computed dynamically using
|
|
CSS media queries based on breakpoints values provided by `deliteful/channelBreakpoints`.
|
|
The breakpoint values can be configured using `require.config()`.
|
|
For details, see the documentation of [`deliteful/channelBreakpoints`](./channelBreakpoints.md).
|
|
|