How can I add support for styles BTN-GROUP and BTN-GROUP-YESNO as found in Protostar?

Question

While we're developing our component using Protostar, we have found that the btn-group and btn-group-yesno classes are not "native" per se, in that they're not necessarily supported in other templates such as Rockettheme/Gantry.

The classes are found in Bootstrap, but the RT template seems to override them somehow rendering some useless HTML where the button group is expected to appear.

Is there a way to include the Bootstrap css/logic in the component (without forcing any template overrides), in spite of what the templates might be doing? I'd like to insure that those classes are available and working without special instructions for a particular template.

Answer 1

The btn-group-yesno class from what I've seem simply has very minor styling differences.

If you're looking for the same logic (left green and red right), but not dimensions as the btn-group-yesno button group, then what you can do is use integers for your option values.

For example:

<field name="test" type="radio" default="1" class="btn-group">
    <option value="1">JYES</option>
    <option value="0">JNO</option>
</field>

This however will output the same, but will only use the green active state:

<field name="test" type="radio" default="1" class="btn-group">
    <option value="yes">JYES</option>
    <option value="no">JNO</option>
</field>

I might have completely misunderstood your question, but if not, then hope the above helps

Answer 2

Not sure that this is the best-practice answer, but here's the simple change I made to have btn-group/btn-groupyesno supported in a Rockettheme template, though apparently has no effect with the Beez template:

From protostar\js\template.js, I copied/pasted the below code into the javascript that is being loaded for all my forms. No CSS change was apparently needed, presumably because this code engaged the styles from the bootstrap.css that was installed with joomla

(function($) {
    $(document).ready(function() {
        // Turn radios into btn-group
        $('.radio.btn-group label').addClass('btn');
        $(".btn-group label:not(.active)").click(function()
            {
                var label = $(this);
                var input = $('#' + label.attr('for'));

                if (!input.prop('checked')) {
                    label.closest('.btn-group').find("label").removeClass('active btn-success btn-danger btn-primary');
                    if (input.val() == '') {
                        label.addClass('active btn-primary');
                    } else if (input.val() == 0) {
                        label.addClass('active btn-danger');
                    } else {
                        label.addClass('active btn-success');
                    }
                    input.prop('checked', true);
                }
        });
        $(".btn-group input[checked=checked]").each(function()
            {
                if ($(this).val() == '') {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-primary');
                } else if ($(this).val() == 0) {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-danger');
                } else {
                    $("label[for=" + $(this).attr('id') + "]").addClass('active btn-success');
                }
        });
    })
})(jQuery);