search

cfenzo / Ractive-decorators-minmaxwidth

Ractive.js decorator for element min/max width
http://cfenzo.github.io/Ractive-decorators-minmaxwidth/
MIT License
6 stars 1 forks source link

Suggestion for new syntax/usage #7

Open cfenzo opened 10 years ago

cfenzo commented 10 years ago

As the new resizeListener is based on ideas from http://www.backalleycoder.com/2014/04/18/element-queries-from-the-feet-up/ (we're using <object>, but not transitionend listeners), who support regular media-query syntax (with both width and height), I started to ponder wether to keep todays syntax (and add support for height somehow), or to add a more verbose syntax like: 1:

<div decorator="media:{small:{'max-width':300},medium:{'min-width':301,'max-width':600}},size_keypath">width: {{size_keypath.width}} height:{{size_keypath.height}}</div>

2:

<div decorator="media:{small:'max-width:300px',medium:'min-width:301px; max-width:600px;'},size_keypath">width: {{size_keypath.width}} height:{{size_keypath.height}}</div>

3:

<div decorator="media:{small:'300maxw',medium:'301minw,600maxw'},size_keypath">width: {{size_keypath.width}} height:{{size_keypath.height}}</div>

4:

<div decorator="media:['small,300maxw','medium,301minw,600maxw'],size_keypath">width: {{size_keypath.width}} height:{{size_keypath.height}}</div>

Which, like backAlleyCoder's solution, would generate something like:

<div matched-media="small">width: 280 height: 102</div>

And then usable in css:

div[matched-media~="small"] {
font-size: 50%;
}

Any suggestions/opinions are welcome!

Rich-Harris commented 10 years ago

That backAlleyCoder post is mind-blowing. Those are some seriously clever hacks.

I quite like the idea of sticking closely to the media query syntax, since it's one less 'what was the syntax again?' question to ask yourself while developing. Especially since these are 'real' media queries (presumably it's now possible to use em values etc?)

So a fifth option would be

<div decorator="media: {
  small:  '(max-width: 300px)',
  medium: '(min-width: 301px) and (max-width: 600px)'
},'size_keypath'">
  width: {{size_keypath.width}} height:{{size_keypath.height}}
</div>

Totally explicit, and people who know media queries can learn it instantly (and presumably it makes it very easy to create the actual media query inside the <object>?), but it is a little verbose. Maybe there's room for an alternate short syntax for the common case where decisions are taken on the basis of pixel width alone, e.g.

<div decorator="media: {
  small:  '<=300',
  medium: '301-600'
},'size_keypath'">
  width: {{size_keypath.width}} height:{{size_keypath.height}}
</div>

...where <=300 becomes (max-width: 300px), 301-600 becomes (min-width: 301px) and (max-width: 600px), and >768 becomes (min-width: 769px). Though actually there's not much to choose between that short syntax and the one in (3) above. What do you reckon?

I like the idea of renaming the decorator to media instead of minmaxwidth - seems like a better fit now, and certainly easier to type :-)

This is exciting stuff.

cfenzo commented 10 years ago

Thanks for the input @Rich-Harris :)

Yes, the work put in by Back Alley Coder is just amazing! It's the third or fourth concept of element resize-detection explored on that blog, targeting the browser-changes over the years.. Without it I would have given up on this plugin a long time ago.

I haven't included the "media-queries in the object" part, as it depends on the transitionend event which sadly isn't supported in IE<10.. Also, not relying on media-queries should make it work with IE8 (which doesn't support media-queries at all).

But, there are more ways to detect what element query is triggered (on window resize), so I might take a stab at making the media-query-version work in all browsers that supports media-queries :) (Maybe add a legacy-option like with Ractive itself for IE8)

Regarding em: it probably won't work as expected, as the <body> inside the <object> won't inherit the em size of the parent element..

Anyways, I do like the fifth syntax (with short version). And I agree on the part about keeping it close to the media queries syntax for simplicity.

So unless someone suggests a new brilliant 6th syntax, I'll take a look at implementing the fifth, with or without using the actual media-queries inside the object :)

zzolo commented 10 years ago

I think keeping the syntax as close to original media queries is best. Yes, it's verbose, but people already know it and assumingly it makes it easier to code.

I am not sure if this plugin/method supports other media query units (not ems as stated above) and options, but there is much more to media queries than width and pixels. Though I guess by the name of the plugin, its is specifically aimed at just width.

cfenzo commented 10 years ago

Thanks for the input @zzolo! I'm working on implementing the more verbose media query-like syntax suggested by @Rich-Harris, it will hopefully be ready for testing next week (as a part-time dad, side-projects tends to take a bit more time some weeks)..

Yes, this plugin will aim at media queries targeting the element itself (width, height, min/max-width/height), as anything "global" like device-pixel-ratio, dpi, orientation, etc is (in my opinion) best handled with regular media queries.

I might look into calculating em/%, but that's a bit further down the road. I do, however, plan to extract the resize event/query-matching into a standalone plugin for when you can't use Ractive.js..

cfenzo commented 10 years ago

I got em solved thanks to this brilliant piece of code. I also got the 5th syntax implemented (no short syntax yet).

I'll get docs/gh-pages updated and push the name-change during the weekend.

zzolo commented 10 years ago

There's no real specific rule that I have come by; its dependent on how much the code is used, in my opinion. Github will redirect the old one if you rename it, I think. But, if there's not a lot of people that will be affected by it, then just rename it; this is my vote.