Set other classes/properties at breakpoint?

[alanhogan]

There is a case where simply swapping a class name or two and maybe setting/unsetting the placeholder property on input elements would sufficiently mobile-ize a form I have.

I do not want to overwrite the DOM/innerHTML of the form, because if the user re-sizes their window while filling out the form, I understand their data would be lost. (Not to mention it’s a ridiculous HTML weight overhead for what I want to achieve).

Is there a way to do this using response.js? As far as I could tell, either of these would work:

• Ability to declaratively set properties (besides src) on elements for various breakpoints, and add/remove classes
• Or, ability to run a function when a breakpoint is crossed / on initialization, so I could write script to do this myself

Thoughts?

[alanhogan]

Thoughts?

[ryanve]

Yo watch this video

I think "attr" functionality is a great idea. Something like this I reckon:

Response.create({
    prefix: "placeholder"
  , attr: "placeholder" // < does not exist now but should be easy to implement
  , prop: "width"
  , breakpoints: [0, 481]
});

in order to write html like:

<input placeholder="John Doe"  data-placeholder-481="Mickey Mouse">

Right?

A safe way to do it right now (v 0.7.0) is like:

(function ($, R) {
    $(function () {
        var $input = $('input');
        if ( !$input.length ) { return; }

        // copy initial placeholder values to data-placeholder
        // `R.store(els, key [, attrToReadFrom])`
        R.store($input, 'placeholder', 'placeholder'); // 3rd arg @since 0.7.0

        R.resize(function () {
            $input.each(function () {
                var newVal = R.band(481) ? R.dataset(this, 'placeholder') : 'small';
                null == newVal || $(this).attr('placeholder', newVal);
            });
        });
    });
}(jQuery, Response));

Although if you're not using Response elsewhere then I would just do it all in jQuery:

(function ($, win) {
    $(function () {

        var $input = $('input'), $win = $(win);
        if ( !$input.length ) { return; }

        $input.each(function() {
            this.setAttribute('data-placeholder', this.getAttribute('placeholder') || '');
        });

        $win.resize(function () {
            $input.each(function () {
                var newVal = $win.width() < 481 ? 'small' : this.getAttribute('data-placeholder');
                null == newVal || this.setAttribute('placeholder', newVal);
            });
        });
    });
}(jQuery, window));

Also there is Response.crossover(fn) mentioned towards the end of the video.

[alanhogan]

Hammer of Thor! A video response! You are awesome.

Thanks so much. This will be super handy.

(And sorry for waiting a few days to reply. I was sick last week.)

Some notes:

• You do, in fact, correctly understand what I was asking, and the declarative style / “ ‘attr’ functionality” you propose would do quite well in solving the issues I face!
• The intention behind mucking with placeholder properties is: A form could use “real” labels except at a “mobile” size “band”, in which it could use placeholders. (Placeholders + identical labels looks unnecessarily repetitive and confusing, so I would want to suppress the placeholder at desktop sizes, alongside revealing the suppressed labels.)
• If I were making use of the crossover function, I would want to know what band I just left, and which one I just entered. Or, equivalently, and less ambiguously, which direction I just crossed a breakpoint (and which breakpoint it was). This would be to do any operations like massaging properties or adding classes (though I would, and will, tend to not muck around with classes, and instead rely on @media rules). Because I would know what changes would need wrought when transitioning between those exact bands.

[ryanve]

@alanhogan Cool / I'll add the attr functionality in soon ( prob. early Sept ). It should be easy enough. There are several issues with the event methods that I'm hoping to have sorted for version 0.8. I agree, the direction etc. makes sense for the crossover. I think it'd also be useful to be able to add a crossover listener w/o having to first set up a breakpoint set via Response.create(). Maybe something like:

Response.crossover('width', [641, 961], function (eventData)  {
    // fires when viewport width crosses 641 or 961
});

[alanhogan]

Ryan, if you’d like to see the code I ended up using here, I’d be happy to email it to you. Figured it might be interesting as you continue to develop the library and consider adding features like the ones you mentioned above. I’m pretty sure I did some silly things, but basically I created a layer over crossover that fires off callbacks based on the breakpoint name(s) that were just crossed. (In my case, it actually fires off mobile-to-tablet and then tablet-to-desktop transitions if the user suddenly resizes from mobile to desktop, so I can think of things like a state machine with no shortcut hops…)

[ryanve]

@alanhogan Sure it's ryanve at gmail if you want, or post the link if it's online. I think I can imagine but it's always good to see exactly how stuff is being used in order to improve it :]