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:

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:

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, for instance:

<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.