Assets¶

Introduction¶

Assets are resources that are required on the clients. These resources are primarily CSS but can also be JavaScript that is ancillary to and not a core component of the Mojito application. This topic discusses the following:

• location of assets
• configuring applications to use assets
• accessing assets from controllers and views

To see code examples that demonstrate how to use assets, see Code Examples: Assets.

Location of Asset Files¶

Assets can be used at the application level and the mojit level. For application-level assets, CSS and JavaScript files are placed in the {application_name}/assets directory. For mojit-level assets, CSS and JavaScript files are placed in the {application_name}/mojits/{mojit_name}/assets directory.

To better organize your assets, you can create separate directories for CSS and JavaScript files under the assets directory. The names of the directories that you create are arbitrary, but the convention is to create the directories css for CSS files and js for JavaScript files. For example, the application-level CSS assets could be placed in the following directory: {application_name}/assets/css

Configuration¶

You specify the location of your assets in the assets object specified in the configuration file application.json. Mojito will read the configuration file and create a static path to your assets that you can use from your views.

[
  {
    "settings": [ "master" ],
    "specs": {
      "simple" : {
        "type": "simple"
      },
      "assets": {
        "css": [
          "/mojits/framed/assets/css/index.css",
          "/assets/css/defaults.css"
        ],
        "js": [
          "/mojits/framed/assets/js/index.js"
        ]
      }
    }
  }
]

[
  {
    "settings": [ "master" ],
    "specs": {
      "frame" : {
        "type" : "HTMLFrameMojit",
        "config": {
          "child" : {
            "type" : "framed"
          },
          "assets": {
            "top": {
              "css": [
                "/static/framed/assets/dog/index.css"
              ]
            }
          }
        }
      }
    }
  }
]

Accessing Assets from an Application¶

When specified in application.json, assets can be accessed through a static URL created by Mojito. The static URLs start with /static/ and point to either the assets directory under the mojit or application directory, depending on whether the asset is at the application or mojit level.

<link rel="stylesheet" type="text/css" href="/static/simple/assets/css/index.css"/>
<div id="" class="mojit">
  <h2 id="header"></h2>
  <ul class="toolbar">
  </ul>
</div>

Using the Assets Addon¶

Mojito provides an Assets addon that allows you to add inline assets or links to asset files. Using the Assets addon, you can dynamically add assets to an HTML page. Two possible use cases would be adding CSS if the HTTP request is coming from a particular device or adding JavaScript if a user takes a particular action.

In the mojit controller below, the Assets addon is used to add metadata and CSS for requests from iPhones. The assets.addBlob method adds the <meta> tag and the addCss method adds the device-specific CSS.

YUI.add('device', function(Y, NAME){
  Y.namespace('mojito.controllers')[NAME] = {
    index: function(ac) {
      var device = ac.context.device, css = "./simple";
      if (device === 'iphone') {
        // Attach viewport meta-data
        ac.assets.addBlob('<meta name = "viewport" content = "width = device-width">', 'top');
        ac.assets.addBlob('<meta name = "viewport" content = "initial-scale = 1.0">', 'top');
        // Modify the style sheet name.
        css += '.' + device;
      }
      // Attach the style sheet.
      css += '.css';
      ac.assets.addCss(css, 'top');
      // Push data to the template.
      ac.done(
        {
          title: "Device Assets",
          colors: [
            {
              id: "green", rgb: "#616536"
            },
            {
              id: "brown", rgb: "#593E1A"
            },
            {
              id: "grey",
              rgb: "#777B88"
            },
            {
              id: "blue",  rgb: "#3D72A4"
            },
            {
              id: "red",   rgb: "#990033"
            }
          ]
        }
      );
    }
  };
}, '0.0.1', {requires: ['mojito-assets-addon']});

YUI Assets¶

YUI modules should be placed in the yui_modules directory and not the assets directory. When your mojit code wants to use one of the YUI modules in the yui_modules directory, you add the module name in the requires array, and Mojito will automatically load the module.

For example, to use a YUI module called substitute in your mojit controller, you would place the substitute.js file in the yui_modules directory and then add the module name in the requires array as seen in the example mojit controller below.

YUI.add('textprocessor', function(Y, NAME){
  Y.namespace('mojito.controllers')[NAME] = {
    index: function(ac) {
      // Use the 'substitute' module
      var name = Y.substitute("Welcome {name}!", {"name":ac.getFromMerged("name")});
      ac.done (name);
    }
  }
}, '0.0.1', {requires: ['substitute']});

Rolling Up Static Assets¶

Mojito lets you compile views, configuration, and YUI modules, but has no native support for rolling up static assets. Fortunately, you can use the npm module Shaker to roll up static assets for Mojito applications. Shaker lets you create production rollups at build time, push rollups to a content delivery network (CDN), customize rollups based on context configurations, and more. See the Shaker documentation for more information.

Inline CSS¶

You can use the Mojito command-line tool to compile a mojit’s CSS so that the CSS is automatically inlined in rendered views. The mojit, however, must be a child of the HTMLFrameMojit.

When you run mojito compile inlinecss, the CSS files in /mojits/{mojit_name}/assets/ are compiled into the YUI module /mojits/{mojit_name}/yui_modules/compiled/inlinecss.common.js. Mojito will use the compiled CSS and insert inline CSS into the <head> element of the rendered view. See also Compiling Inline CSS.