Add Names instead of Widths as an option?

[mdmoura]

Hello,

At the moment Response uses the following syntax:

<img src="lo-fi.png" data-src1025="hi-fi.png" alt="example" />

Imagine that later on I need to change the breakpoint 1025 ro 1020 ...

Then I will be forced to change the data-src1025 in all images.

Wouldn't it be possible to associated breakpoints values to names?

For example:

1025 would be "desktop", 760 would be "Tablet" ...

Then the images would become:

<img src="lo-fi.png" data-srcdesktop="hi-fi.png" alt="example" />

So in Response.Create there would be an option to associate widths to names as an option.

What do you think?

Thank You, Miguel

[ryanve]

@shapper That was actually something I was already meaning to do—I'll make sure to include it in next update. Thanks for the reminder :] Also be advised it's Response.create with a lowercase c.

[mdmoura]

I will be waiting for the change ... Any idea when it will be available?

It seems logic to have the names option. But great work.

I am using Response on a project and it works great.

Thank You, Miguel

[ryanve]

@shapper I just updated the source in the repo to version 0.6.0 and it has what you seek. You have to define a custom test. Like this—this works:

Response.addTest('myCustom', (function(R) { 
    // The hash's keys must match the breakpoint nicknames:
    var hash = { lo: 0, med: 481, hi: 961 }; 
    return function(breakpoint) {
        return R.viewportW() >= hash[breakpoint];
    };
}(Response))).create({
    prefix: 'my-' // specify a prefix
  , prop: 'myCustom' // must match first parameter of .addTest()
  , breakpoints: ['lo', 'med', 'hi'] // must be ordered lowest to highest
  , dynamic: true // because it changes on resize
});

and use:

<div data-my-lo="looooooo"
     data-my-med="meeeeed"
     data-my-hi="hiiiiiii"
>fallback content</div>