-
-
Save Studira/0312c0565e26e7cb28f4 to your computer and use it in GitHub Desktop.
Code snippet to launch the iCheck plugin
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name = iCheck Quickfix | |
description = This module suggests a quickfix for iCheck needs. | |
package = Custom | |
core = 7.x |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
(function($) { | |
Drupal.behaviors.icheck = { | |
attach: function (context, settings) { | |
$('input[type=radio]',context).each(function(){ | |
var label = $(this).next(), | |
var label_text = label.text(); | |
label.remove(); | |
$(this).iCheck({ | |
checkboxClass: 'icheckbox_line-realred', | |
radioClass: 'iradio_line-realred', | |
insert: '<div class="icheck_line-icon"></div>' + label_text | |
}); | |
}); | |
} | |
}; | |
})(jQuery); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?php | |
function icheck_form_job_query_node_form_alter(&$form, &$form_state, $form_id) { | |
//dpm($form); | |
$path_to_icheck = libraries_get_path('iCheck'); | |
drupal_add_css($path_to_icheck . '/skins/line/realred.css'); | |
drupal_add_js ($path_to_icheck . '/jquery.icheck.js'); | |
drupal_add_js (drupal_get_path('module', 'icheck') .'/icheck.js', 'file'); | |
return $form; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*! | |
* iCheck v0.9.1, http://git.io/uhUPMA | |
* ================================= | |
* Powerful jQuery plugin for checkboxes and radio buttons customization | |
* | |
* (c) 2013 Damir Foy, http://damirfoy.com | |
* MIT Licensed | |
*/ | |
(function($) { | |
// Cached vars | |
var _iCheck = 'iCheck', | |
_iCheckHelper = _iCheck + '-helper', | |
_checkbox = 'checkbox', | |
_radio = 'radio', | |
_checked = 'checked', | |
_unchecked = 'un' + _checked, | |
_disabled = 'disabled', | |
_determinate = 'determinate', | |
_indeterminate = 'in' + _determinate, | |
_update = 'update', | |
_type = 'type', | |
_click = 'click', | |
_touch = 'touchbegin.i touchend.i', | |
_add = 'addClass', | |
_remove = 'removeClass', | |
_callback = 'trigger', | |
_label = 'label', | |
_cursor = 'cursor', | |
_mobile = /ipad|iphone|ipod|android|blackberry|windows phone|opera mini/i.test(navigator.userAgent); | |
// Plugin init | |
$.fn[_iCheck] = function(options, fire) { | |
// Walker | |
var handle = ':' + _checkbox + ', :' + _radio, | |
stack = $(), | |
walker = function(object) { | |
object.each(function() { | |
var self = $(this); | |
if (self.is(handle)) { | |
stack = stack.add(self); | |
} else { | |
stack = stack.add(self.find(handle)); | |
}; | |
}); | |
}; | |
// Check if we should operate with some method | |
if (/^(check|uncheck|toggle|indeterminate|determinate|disable|enable|update|destroy)$/i.test(options)) { | |
// Normalize method's name | |
options = options.toLowerCase(); | |
// Find checkboxes and radio buttons | |
walker(this); | |
return stack.each(function() { | |
if (options == 'destroy') { | |
tidy(this, 'ifDestroyed'); | |
} else { | |
operate($(this), true, options); | |
}; | |
// Fire method's callback | |
if ($.isFunction(fire)) { | |
fire(); | |
}; | |
}); | |
// Customization | |
} else if (typeof options == 'object' || !options) { | |
// Check if any options were passed | |
var settings = $.extend({ | |
checkedClass: _checked, | |
disabledClass: _disabled, | |
indeterminateClass: _indeterminate, | |
labelHover: true | |
}, options), | |
selector = settings.handle, | |
hoverClass = settings.hoverClass || 'hover', | |
focusClass = settings.focusClass || 'focus', | |
activeClass = settings.activeClass || 'active', | |
labelHover = !!settings.labelHover, | |
labelHoverClass = settings.labelHoverClass || 'hover', | |
// Setup clickable area | |
area = ('' + settings.increaseArea).replace('%', '') | 0; | |
// Selector limit | |
if (selector == _checkbox || selector == _radio) { | |
handle = ':' + selector; | |
}; | |
// Clickable area limit | |
if (area < -50) { | |
area = -50; | |
}; | |
// Walk around the selector | |
walker(this); | |
return stack.each(function() { | |
// If already customized | |
tidy(this); | |
var self = $(this), | |
node = this, | |
id = node.id, | |
// Layer styles | |
offset = -area + '%', | |
size = 100 + (area * 2) + '%', | |
layer = { | |
position: 'absolute', | |
top: offset, | |
left: offset, | |
display: 'block', | |
width: size, | |
height: size, | |
margin: 0, | |
padding: 0, | |
background: '#fff', | |
border: 0, | |
opacity: 0 | |
}, | |
// Choose how to hide input | |
hide = _mobile ? { | |
position: 'absolute', | |
visibility: 'hidden' | |
} : area ? layer : { | |
position: 'absolute', | |
opacity: 0 | |
}, | |
// Get proper class | |
className = node[_type] == _checkbox ? settings.checkboxClass || 'i' + _checkbox : settings.radioClass || 'i' + _radio, | |
// Find assigned labels | |
label = $(_label + '[for="' + id + '"]').add(self.closest(_label)), | |
// Wrap input | |
parent = self.wrap('<div class="' + className + '"/>')[_callback]('ifCreated').parent().append(settings.insert), | |
// Layer addition | |
helper = $('<ins class="' + _iCheckHelper + '"/>').css(layer).appendTo(parent); | |
// Finalize customization | |
self.data(_iCheck, {o: settings, s: self.attr('style')}).css(hide); | |
!!settings.inheritClass && parent[_add](node.className); | |
!!settings.inheritID && id && parent.attr('id', _iCheck + '-' + id); | |
parent.css('position') == 'static' && parent.css('position', 'relative'); | |
operate(self, true, _update); | |
// Label events | |
if (label.length) { | |
label.on(_click + '.i mouseenter.i mouseleave.i ' + _touch, function(event) { | |
var type = event[_type], | |
item = $(this); | |
// Do nothing if input is disabled | |
if (!node[_disabled]) { | |
// Click | |
if (type == _click) { | |
operate(self, false, true); | |
// Hover state | |
} else if (labelHover) { | |
// mouseleave|touchend | |
if (/ve|nd/.test(type)) { | |
parent[_remove](hoverClass); | |
item[_remove](labelHoverClass); | |
} else { | |
parent[_add](hoverClass); | |
item[_add](labelHoverClass); | |
}; | |
}; | |
if (_mobile) { | |
event.stopPropagation(); | |
} else { | |
return false; | |
}; | |
}; | |
}); | |
}; | |
// Input events | |
self.on(_click + '.i focus.i blur.i keyup.i keydown.i keypress.i', function(event) { | |
var type = event[_type], | |
key = event.keyCode; | |
// Click | |
if (type == _click) { | |
return false; | |
// Keydown | |
} else if (type == 'keydown' && key == 32) { | |
if (!(node[_type] == _radio && node[_checked])) { | |
if (node[_checked]) { | |
off(self, _checked); | |
} else { | |
on(self, _checked); | |
}; | |
}; | |
return false; | |
// Keyup | |
} else if (type == 'keyup' && node[_type] == _radio) { | |
!node[_checked] && on(self, _checked); | |
// Focus/blur | |
} else if (/us|ur/.test(type)) { | |
parent[type == 'blur' ? _remove : _add](focusClass); | |
}; | |
}); | |
// Helper events | |
helper.on(_click + ' mousedown mouseup mouseover mouseout ' + _touch, function(event) { | |
var type = event[_type], | |
// mousedown|mouseup | |
toggle = /wn|up/.test(type) ? activeClass : hoverClass; | |
// Do nothing if input is disabled | |
if (!node[_disabled]) { | |
// Click | |
if (type == _click) { | |
operate(self, false, true); | |
// Active and hover states | |
} else { | |
// State is on | |
if (/wn|er|in/.test(type)) { | |
// mousedown|mouseover|touchbegin | |
parent[_add](toggle); | |
// State is off | |
} else { | |
parent[_remove](toggle + ' ' + activeClass); | |
}; | |
// Label hover | |
if (label.length && labelHover && toggle == hoverClass) { | |
// mouseout|touchend | |
label[/ut|nd/.test(type) ? _remove : _add](labelHoverClass); | |
}; | |
}; | |
if (_mobile) { | |
event.stopPropagation(); | |
} else { | |
return false; | |
}; | |
}; | |
}); | |
}); | |
} else { | |
return this; | |
}; | |
}; | |
// Do something with inputs | |
function operate(input, direct, method) { | |
var node = input[0]; | |
state = /er/.test(method) ? _indeterminate : /bl/.test(method) ? _disabled : _checked, | |
active = method == _update ? { | |
checked: node[_checked], | |
disabled: node[_disabled], | |
indeterminate: input.attr(_indeterminate) == 'true' || input.attr(_determinate) == 'false' | |
} : node[state]; | |
// Check, disable or indeterminate | |
if (/^(ch|di|in)/.test(method) && !active) { | |
on(input, state); | |
// Uncheck, enable or determinate | |
} else if (/^(un|en|de)/.test(method) && active) { | |
off(input, state); | |
// Update | |
} else if (method == _update) { | |
// Handle states | |
for (var state in active) { | |
if (active[state]) { | |
on(input, state, true); | |
} else { | |
off(input, state, true); | |
}; | |
}; | |
} else if (!direct || method == 'toggle') { | |
// Helper or label was clicked | |
if (!direct) { | |
input[_callback]('ifClicked'); | |
}; | |
// Toggle checked state | |
if (active) { | |
if (node[_type] !== _radio) { | |
off(input, state); | |
}; | |
} else { | |
on(input, state); | |
}; | |
}; | |
}; | |
// Add checked, disabled or indeterminate state | |
function on(input, state, keep) { | |
var node = input[0], | |
parent = input.parent(), | |
checked = state == _checked, | |
indeterminate = state == _indeterminate, | |
callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', | |
regular = option(node, callback + capitalize(node[_type])), | |
specific = option(node, state + capitalize(node[_type])); | |
// Prevent unnecessary actions | |
if (node[state] !== true) { | |
// Toggle assigned radio buttons | |
if (!keep && state == _checked && node[_type] == _radio && node.name) { | |
var form = input.closest('form'), | |
inputs = 'input[name="' + node.name + '"]'; | |
inputs = form.length ? form.find(inputs) : $(inputs); | |
inputs.each(function() { | |
if (this !== node && $.data(this, _iCheck)) { | |
off($(this), state); | |
}; | |
}); | |
}; | |
// Indeterminate state | |
if (indeterminate) { | |
// Add indeterminate state | |
node[state] = true; | |
// Remove checked state | |
if (node[_checked]) { | |
off(input, _checked, 'force'); | |
}; | |
// Checked or disabled state | |
} else { | |
// Add checked or disabled state | |
if (!keep) { | |
node[state] = true; | |
}; | |
// Remove indeterminate state | |
if (checked && node[_indeterminate]) { | |
off(input, _indeterminate, false); | |
}; | |
}; | |
// Trigger callbacks | |
callbacks(input, checked, state, keep); | |
}; | |
// Add proper cursor | |
if (node[_disabled] && !!option(node, _cursor, true)) { | |
parent.find('.' + _iCheckHelper).css(_cursor, 'default'); | |
}; | |
// Add state class | |
parent[_add](specific || option(node, state)); | |
// Remove regular state class | |
parent[_remove](regular || option(node, callback) || ''); | |
}; | |
// Remove checked, disabled or indeterminate state | |
function off(input, state, keep) { | |
var node = input[0], | |
parent = input.parent(), | |
checked = state == _checked, | |
indeterminate = state == _indeterminate, | |
callback = indeterminate ? _determinate : checked ? _unchecked : 'enabled', | |
regular = option(node, callback + capitalize(node[_type])), | |
specific = option(node, state + capitalize(node[_type])); | |
// Prevent unnecessary actions | |
if (node[state] !== false) { | |
// Toggle state | |
if (indeterminate || !keep || keep == 'force') { | |
node[state] = false; | |
}; | |
// Trigger callbacks | |
callbacks(input, checked, callback, keep); | |
}; | |
// Add proper cursor | |
if (!node[_disabled] && !!option(node, _cursor, true)) { | |
parent.find('.' + _iCheckHelper).css(_cursor, 'pointer'); | |
}; | |
// Remove state class | |
parent[_remove](specific || option(node, state) || ''); | |
// Add regular state class | |
parent[_add](regular || option(node, callback)); | |
}; | |
// Remove all traces | |
function tidy(node, callback) { | |
if ($.data(node, _iCheck)) { | |
var input = $(node); | |
// Remove everything except input | |
input.parent().html(input.attr('style', $.data(node, _iCheck).s || '')[_callback](callback || '')); | |
// Unbind events | |
input.off('.i').unwrap(); | |
$(_label + '[for="' + node.id + '"]').add(input.closest(_label)).off('.i'); | |
}; | |
}; | |
// Get some option | |
function option(node, state, regular) { | |
if ($.data(node, _iCheck)) { | |
return $.data(node, _iCheck).o[state + (regular ? '' : 'Class')]; | |
}; | |
}; | |
// Capitalize some string | |
function capitalize(string) { | |
return string.charAt(0).toUpperCase() + string.slice(1); | |
}; | |
// Executable handlers | |
function callbacks(input, checked, callback, keep) { | |
if (!keep) { | |
if (checked) { | |
input[_callback]('ifToggled'); | |
}; | |
input[_callback]('ifChanged')[_callback]('if' + capitalize(callback)); | |
}; | |
}; | |
})(jQuery); |
I forgot to mention that I need the "Line Skin"
The above code is functioning up to the point where the icheck.js file is called, that file never get called so I am a bit uncertain why?
Ignore: the file is now loading..
This is what I have: https://www.evernote.com/shard/s257/sh/6f0d464c-a997-4d8b-8754-2388c1554f84/62df5033ade39894247823bdf10f7dd4/deep/0/Screenshot%202013/06/15%205:06%20PM.jpg
This is what I get:
https://www.evernote.com/shard/s257/sh/4204473a-d818-429e-9746-fff418029f7b/e5674a74cd3b8825380f158a65f969b1/deep/0/Screenshot%202013/06/15%205:06%20PM.jpg
This is page source code:
https://www.evernote.com/shard/s257/sh/a01d6ce0-5a94-4417-a54e-611dca870a22/74ae5440ea0f7a2e15c1db135d8d9a1e/deep/0/Screenshot%202013/06/15%205:07%20PM.jpg
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
I need some help:
What I have:
1.) I have included the JS and CSS files for the iCheck plugin (http://damirfoy.com/iCheck/#features) in my custom theme.
2.) Then I included them in my sub theme's .info file and check that they are available.
3.) The code snippet above need to be run on my form to alter the radio and checkboxes to those of iCheck but I have no idea where to include the above.
4.) I want to run above only on my one specific form therefore I have to change the line "$('input').each(function(){" to "$('#job-query-node-form input').each(function(){" to target just my inputs on the "#job-query-node-form"
What I need is to include the above code in the html of the node/add/job-query page and THAT IS WHAT I DO NOT KNOW?
Would somebody be so kind to help me out?