Sticker

https://sticker.readthedocs.io/en/latest/
Admin
Sticker is a lightweight CFML framework for managing CSS and JavaScript includes on a per-request...
Tokens:2,148
Snippets:6
Trust Score:8.3
Update:1 year ago
Show doc for...
Tokens:
Raw
### Initialize and Configure Sticker (CFML)

Source: https://sticker.readthedocs.io/en/latest/index

Provides an example of initializing the Sticker API as a Singleton in `Application.cfc` and configuring asset bundles. It shows how to add bundles from local directories or remote URLs and load their definitions.

```CFML
component {
    //...
    function onApplicationStart() {

        // 1. instantiate sticker with no arguments
        var sticker = new sticker.Sticker();

        // 2. add bundles, each bundle is simply a folder containing static assets
        //    and must have a StickerBundle.cfc file in it's root directory to set its configuration
        sticker.addBundle( rootDirectory="/assets"               , rootUrl="http://mywebsite-static.com/" )
               .addBundle( rootDirectory="/myCompanyCoreAssetLib", rootUrl="/corelib/"                    );

        // 3. call load(), this will read all the bundles and merge their definitions
        sticker.load();

        application.sticker = sticker;
    }
}
```

--------------------------------

### Configure Assets with StickerBundle.cfc (CFML)

Source: https://sticker.readthedocs.io/en/latest/index

Illustrates how to configure static assets using a `StickerBundle.cfc` file. This includes registering single remote and local assets, and registering multiple assets with a directory and filter, including custom ID generation.

```CFML
component {

    // all valid StickerBundle.cfc files must implement the 'configure()' method
    public void function configure( bundle ) {
        // registering a single, remote asset
        bundle.addAsset( id="jquery", url="http://cdn.jquery.com/jquery-34.25.34.min.js" );

        // registering a single, local asset
        // note the wildcard filename map to help with cachebusters in the filename.
        bundle.addAsset( id="sitecore", path="/js/*-sitecore.min.js" );

        // registering multiple assets at once
        // notice the idGenerator closure function that can be used to format your asset IDs
        // based on each matched asset
        bundle.addAssets(
              directory   = "/css"
            , filter      = "*.min.css"
            , idGenerator = function( filePath ){
                 var id = Replace( filepath, "/", "-", "all" );
                 id = ReReplace( filePath, "\.min\.css$", "" );
                 id = ReReplace( filePath, "^-", "" );

                 return id;
              }
        );

        // same as above, but using a function for the filter
        bundle.addAssets(
              directory   = "/js"
            , filter      = function( filePath ){ return ReFindNoCase( "\.min\.js$", filePath ); }
            , idGenerator = function( filePath ){
                 var id = Replace( filepath, "/", "-", "all" );
                 id = ReReplace( filePath, "\.min\.js$", "" );
                 id = ReReplace( filePath, "^-", "" );

                 return id;
              }
        );
    }

}
```

--------------------------------

### Include and Render Assets with Sticker Data

Source: https://sticker.readthedocs.io/en/latest/index

Shows how to include data and assets for rendering in a web page using the Sticker framework. It demonstrates `sticker.includeData()` to pass server-side data to JavaScript and `sticker.renderIncludes()` to output the included assets.

```JavaScript
sticker.includeData( data={ lookupUrl="http://ajax.mysite.com/lookup/" } )
       .includeData( data={ resultsPerPage=5 } );
```

--------------------------------

### Configure Asset Dependencies and Order in Sticker

Source: https://sticker.readthedocs.io/en/latest/index

Demonstrates how to configure asset dependencies and sort order within a StickerBundle.cfc file. It shows how to use `dependsOn()`, `dependents()`, `before()`, and `after()` methods to manage asset relationships and rendering sequence.

```ColdFusion
component {

    public void function configure( bundle ) {
       // etc...

       // the sitecore asset depends on jquery, all other assets depend on sitecore
       bundle.asset( "sitecore" ).dependsOn( "jquery" ).dependents( "*" );

       // the core css file should come before all others
       bundle.asset( "core-css" ).before( "*" );

       // the blog-template css file should come after 'common-css' and 'social-css'
       bundle.asset( "blog-template-css" ).after( "common-css", "social-css" );

    }

}
```

--------------------------------

### Include and Render Assets with Sticker (CFML)

Source: https://sticker.readthedocs.io/en/latest/index

Demonstrates how to use the Sticker API in CFML to include various assets like jQuery, Bootstrap, custom CSS, and JavaScript. It also shows how to render these included assets in the HTML head and body sections.

```CFML
<cfset sticker.include( assetId="jquery" )
              .include( assetId="bootstrapjs" )
              .include( assetId="bootstrapcss" )
              .include( assetId="sitecss" )
              .include( assetId="sitejs" )
              .include( assetId="specific-#pageType#", throwOnMissing=false )
              .include( assetId="modernizr", group="headjs" ) />

    ...

    #sticker.renderIncludes( type="css" )#
    #sticker.renderIncludes( group="headjs" )#
</head>
<body>
    ...

    #sticker.renderIncludes( type="js" )#
</body>
```

--------------------------------

### Apply IE Restrictions and Media Types in Sticker

Source: https://sticker.readthedocs.io/en/latest/index

Illustrates how to apply Internet Explorer-specific restrictions and CSS media types to assets using Sticker. It shows the usage of `setIE()` for conditional loading based on IE versions and `setMedia()` for specifying media query conditions like 'print'.

```ColdFusion
component {

    public void function configure( bundle ) {
       // etc...

       bundle.asset( "hacky-ie-js" ).setIE( "lte IE 7" );
       bundle.asset( "print-css" ).setMedia( "print" );
    }

}
```
Tokens:
Raw