Open bennybee opened 10 years ago
@bennybee I agree and I've been considering how to facilitate ems in a future response.js version. It can be done in 0.7 now via Response.addTest
with something like:
Response.addTest('em-width', function(breakpoint) {
return 0 === breakpoint || Response.media('(min-width:' + breakpoint + 'em)').matches;
}).create({
prop: 'em-width'
, breakpoints: [0, 30, 60]
});
That should let you use attributes like:
<div data-min-em-width-0="content at 0+"
data-min-em-width-30="content at 30+"
data-min-em-width-60="content at 60+"
>fallback content</div>
Replace 'em-width'
with 'width'
if you want to override the default 'width'
test everywhere (and simplify the attributes). You also can customize the attributes via .prefix
. See another .addTest
example here.
Hi Ryan
Having fun playing with ProcessWire, Pocketgrid and Response.js - lovely combination!
Is this still the way to deal with working in em now that you are in v9.0? Or is there now a default method?
And where do I put the Response.addTest
- still learning here!
Great piece of work this.
Joss
Okay, I got it working.
However, the one problem with this approach is you can end up with some odd values which are hardly memorable: data-min-em-width-33.125
, for instance.
I notice elsewhere that you talked about using names instead - I have tried to work that method into this but I couldn't get it to work; beyond my ability, me thinks.
How can I get both working at the same time?
Thanks again
Thanks @jsanglier—combining my example above with the custom names idea is the best way for now
!function(Response) {
var names = ['small', 'medium', 'large'];
var values = {medium: '(min-width:50em)', large: '(min-width:75em)'};
Response.addTest('view', function(breakpoint) {
var query = values.hasOwnProperty(breakpoint) && values[breakpoint];
return !query || Response.media(values[breakpoint]).matches;
}).create({prefix: 'view-', prop: 'view', breakpoints: names, dynamic: true});
}(Response);
and lets you write markup like
<div data-view-small="small content"
data-view-medium="medium content"
data-view-large="large content"
>fallback content</div>
What a nice man!
Come play with ProcessWire if you get a chance - all the devs in there are your sort of helpful people.
It seems pretty standard to define your breakpoints in ems rather than pixels these days. Is this something that response.js will support?