Index ¦ Archives  ¦ Atom  ¦ RSS

Enyo - Device-based Assets

With multiple screen sizes available for Enyo apps, it's likely that you want a single Enyo app to work on both phones, tablets, and anything else that may come out (HP or otherwise). The code below is a simple way of separating tablets from phones, but can easily be upgraded with switches to handle more than two groups of assets.

if (document.documentElement && document.documentElement.clientWidth > 700
        ||
    document.body && document.body.clientWidth > 700)
{
    enyo.paths({'assets':'assets/tablet'});
} else {
    enyo.paths({'assets':'assets/phone'});
}

enyo.sheet(enyo.path.rewrite('$assets/css/non_common.css'));

This only differentiates between tablets and phones, providing an '\$assets' path that can be used when adding CSS to your app, as in the enyo.sheet call. This path is also accessible when setting the src attribute of images, either in its own definition:

{name:"logo", kind:"Image", src:"\$assets/images/logo.png"}

Or, when setting it later:

this.$.logo.setSrc('$assets/images/otherLogo.png');

You can also rewrite any other paths you have using enyo.path.rewrite is in the enyo.sheet call:

var filename = enyo.path.rewrite('$assets/some/file.ext');

Enyo has a lot of hidden gems like this, I really benefited from reading some of kernel/lang.js and kernel/Oop.js recently.

© Fahrzin Hemmati. Built using Pelican. Theme by Giulio Fidente on github.