select-inline

check_box_for.coffee

checkbox_for = (property, options) ->
  options.css = options.css or ""
  options.domain = options.domain or ""
  html  = "
  <div class='checkbox #{options.css}' data-domain='#{options.domain}'>
    <label>
      <input type='checkbox' data-name='#{property.name}' #{if property.value then "checked" else ""}> #{options.label}
    </label>
  </div>
  "
  return new Handlebars.SafeString(html)


# Checkbox for.
module.exports = checkbox_for

domain.js

"DO_OUI_NON": {
        "engineType": "boolean",
        "decorator": "selectInline"
    }

input_for.coffee

  switch metadata.domain
    when "DO_OUI_NON" then return oui_non_for.call(@, property, options)
    when "DO_OUI_NON_COCHE" then return checkbox_for({name: property, value: @[property]}, {domain: metadata.domain, label: "#{translationKey()}"})

oui_non_for.coffee

# Helpers which display the oui non selection.
module.exports = oui_non_for = (property, options) ->
  list = [{id: "true",label: "Oui"},{id: "false", label: "Non"}];
  _.extend(this, {"ouiNonList": list})
  options = options || {};
  options.hash = options.hash || {};
  options.hash.listKey = "ouiNonList";
  return Handlebars.helpers.options_selected.call(this, property ,options);

parseResult.js

function parseResult() {
    var selector = this;
    if (selector === undefined || selector.length === 0 || selector.length > 1) {
        console.warn("unable to find a single value for selector");
        return null;
    }
    var element = selector.first();
    var id = element.attr("data-selectinlineid");
    var isMultiple = element.prop("multiple");
    var result = [];
    $("div#selectinline-" + id).find(":checked").each(function() {
        var currentValue = $(this).attr("value");
        if (currentValue !== undefined && currentValue !== null) {
            result.push(currentValue);
        }
    });

    if (!isMultiple) {
        return result.length === 1 ? result[0] : null;
    }
    return result;
}

rendering_helpers.js

  Fmk.Helpers.postRenderingHelper.registerHelper({
      name: "selectInline",
      fn: "selectInline",
      parseFunction: "selectInline",
      parseArgument: "val"
    });

selectInline.js

/**
 * Define the select inline plugin.
 * @return {[type]} [description]
 */
function defineSelectInline() {
    $.fn.selectInline = function selectInline(options) {
        if (options && options === "val") {
            //fonction de retour des valeurs
            return parseResult.call(this);
        }

        //default parameters for the pluggin.
        var defaultOptions = {
            labelRadioCss: "radio-inline",
            labelCheckboxCss: "checkbox-inline"
        };

        //Merge default options with options
        var opts = $.extend(defaultOptions, options);

        return this.each(function() {
            var element = $(this);
            var id = Fmk.Helpers.utilHelper.guid();
            var isMultiple = element.prop("multiple");
            var type = isMultiple ? "checkbox" : "radio";
            var name = isMultiple ? "" : "name='radio" + id + "' ";
            var labelClass = isMultiple ? opts.labelCheckboxCss : opts.labelRadioCss;

            //add a data-selectInline-id with id
            element.attr("data-selectinlineid", id);

            var html = "<div id ='selectinline-" + id + "'>";
            //parse select options to insert radios or checkbox
            element.find("option").each(function() {
                var currentOption = $(this);
                var currentValue = currentOption.attr("value");
                var checked = currentOption.prop("selected");

                if (currentValue !== undefined && currentValue !== null) {
                    html += "<label class='" + labelClass + "'>";
                    html += "<input type='" + type + "' value='" + currentOption.attr("value") + "' " + name + (checked ? "checked" : "") + ">";
                    html += currentOption.text();
                    html += "</label>";
                }
            });

            html += "</div>";
            //insert select inline after the current select
            element.after(html);
            //hide the current select element 
            element.hide();
        });
    };
}