111 lines
3.3 KiB
JavaScript
111 lines
3.3 KiB
JavaScript
/**
|
|
* @file
|
|
* JavaScript behaviors for iCheck integration.
|
|
*/
|
|
|
|
(function ($, Drupal) {
|
|
|
|
'use strict';
|
|
|
|
// @see http://icheck.fronteed.com/#options
|
|
Drupal.webform = Drupal.webform || {};
|
|
Drupal.webform.iCheck = Drupal.webform.iCheck || {};
|
|
Drupal.webform.iCheck.options = Drupal.webform.iCheck.options || {};
|
|
|
|
/**
|
|
* Enhance checkboxes and radios using iCheck.
|
|
*
|
|
* @type {Drupal~behavior}
|
|
*/
|
|
Drupal.behaviors.webformICheck = {
|
|
attach: function (context) {
|
|
if (!$.fn.iCheck) {
|
|
return;
|
|
}
|
|
$('input[data-webform-icheck]', context).each(function () {
|
|
var $input = $(this);
|
|
var icheck = $input.attr('data-webform-icheck');
|
|
|
|
var options = $.extend({
|
|
checkboxClass: 'icheckbox_' + icheck,
|
|
radioClass: 'iradio_' + icheck
|
|
}, Drupal.webform.iCheck.options);
|
|
|
|
// The line skin requires that the label be added to the options.
|
|
// @see http://icheck.fronteed.com/#skin-line
|
|
if (icheck.indexOf('line') === 0) {
|
|
var $label = $input.parent().find('label[for="' + $input.attr('id') + '"]');
|
|
|
|
// Set insert with label text.
|
|
options.insert = '<div class="icheck_line-icon"></div>' + $label.text();
|
|
|
|
// Make sure checkbox is outside the label and then remove the label.
|
|
$label.insertAfter($input).remove();
|
|
}
|
|
|
|
$input.addClass('js-webform-icheck')
|
|
.iCheck(options)
|
|
// @see https://github.com/fronteed/iCheck/issues/244
|
|
.on('ifChecked', function (e) {
|
|
$(e.target).attr('checked', 'checked').change();
|
|
})
|
|
.on('ifUnchecked', function (e) {
|
|
$(e.target).removeAttr('checked').change();
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Enhance table select checkall.
|
|
*
|
|
* ISSUE: Select all is not sync'd with checkboxes because iCheck overrides all existing event handlers.
|
|
*
|
|
* @type {Drupal~behavior}
|
|
*/
|
|
Drupal.behaviors.webformICheckTableSelectAll = {
|
|
attach: function (context) {
|
|
if (!$.fn.iCheck) {
|
|
return;
|
|
}
|
|
|
|
$('table[data-webform-icheck] th.select-all').bind('DOMNodeInserted', function () {
|
|
$(this).unbind('DOMNodeInserted');
|
|
$(this).find('input[type="checkbox"]').each(function () {
|
|
var icheck = $(this).closest('table[data-webform-icheck]').attr('data-webform-icheck');
|
|
|
|
var options = $.extend({
|
|
checkboxClass: 'icheckbox_' + icheck,
|
|
radioClass: 'iradio_' + icheck
|
|
}, Drupal.webform.iCheck.options);
|
|
|
|
$(this).iCheck(options);
|
|
})
|
|
.on('ifChanged', function () {
|
|
var _index = $(this).parents('th').index() + 1;
|
|
$(this).parents('thead').next('tbody').find('tr td:nth-child(' + _index + ') input')
|
|
.iCheck(!$(this).is(':checked') ? 'check' : 'uncheck')
|
|
.iCheck($(this).is(':checked') ? 'check' : 'uncheck');
|
|
});
|
|
});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sync iCheck element when checkbox/radio is enabled/disabled via the #states.
|
|
*
|
|
* @see core/misc/states.js
|
|
*/
|
|
if ($.fn.iCheck) {
|
|
$(document).on('state:disabled', function (e) {
|
|
if ($(e.target).hasClass('.js-webform-icheck')) {
|
|
$(e.target).iCheck(e.value ? 'disable' : 'enable');
|
|
}
|
|
|
|
$(e.target).iCheck(e.value ? 'disable' : 'enable');
|
|
});
|
|
}
|
|
|
|
|
|
})(jQuery, Drupal);
|