CP responsive image logic

do_mobify.js

by John Allan

HTML

<img x-src="/images/banners/banner.jpg">
<img x-src="/images/filecabinets/filecabinet.jpg">
<img x-src="/images/icons/icon.png?ver=23">
<img x-src="/images/highres/content.jpg">
<img x-src="/images/lowres/content.jpg">

JavaScript

/**
 * @fileOverview Profiler, Responsive Images and Mobify setup.
 *
 * @author Mark Bice, John Allan
 */

/*! Habanero - Licensed under MIT */


//#region $NAMESPACE

var Hcf = Hcf || {}; // Global namespace
Hcf.Mobify = Hcf.Mobify || {}; // Module specific namespace
Hcf.ResponsiveImages = Hcf.ResponsiveImages || {}; //Module specific namespace
Hcf.Profiler = Hcf.Profiler || {}; //Module specific namespace
//#endregion


/**
 * Profiler setup module
 * @namespace Hcf.Profiler
 */ 
(function (module, window, document, undefined) {
    'use strict';
    
    var profiles = [
            {
                'name': 'mobile',
                'media': '(max-width: 47.99em)',
                'renditions': {
                    'banners': {'size': [360, 350]},
                    'filecabinets': {'size': [335, 118]},
                    'icons': {'size': [null, 36]}
                }
            },
            {
                'name': 'tablet',
                'media': '(min-width: 48em) and (max-width: 63.99em)',
                'renditions': {
                    'banners': {'size': [768, 512]},
                    'filecabinets': {'size': [335, 118]},
                    'icons': {'size': [null, 36]}
                }
            },
            {
                'name': 'desktop',
                'media': 'screen',
                'renditions': {
                    'banners': {'size': [1280, 512]},
                    'filecabinets': {'size': [335, 118]},
                    'icons': {'size': [null, 36]}
                }
            }
        ];

    // Get the profile required for images
    module.getProfile = function () {
        
        // Default to mobile high resolution for IE10+ phones
        if (navigator.userAgent.match(/IEMobile\/1\d\.0/)) {
            profiles[0].scale = 2;
            return profiles[0];
        }

        // Check to see if matchMedia is implemented
        if (window.matchMedia) {

            // Loop through each profile
      ...