Permalink
Browse files

allow use of data-customforms="disabled" to prevent custom form field…

…s from being displayed. so for example <input type="checkbox" id="checkbox1" data-customforms="disabled"> will prevent custom form styles from being applied.
  • Loading branch information...
1 parent c83520f commit 5a7e88b9957fbff2cf92358fb7f38631551dd020 @mhayes mhayes committed Jun 12, 2012
Showing with 75 additions and 72 deletions.
  1. +4 −0 javascripts/app.js
  2. +71 −72 javascripts/jquery.customforms.js
View
@@ -83,4 +83,8 @@ jQuery(document).ready(function ($) {
/* DISABLED BUTTONS ------------- */
/* Gives elements with a class of 'disabled' a return: false; */
+ /* CUSTOM FORMS */
+ $.foundation.customForms.appendCustomMarkup();
+
+
});
@@ -10,11 +10,16 @@ jQuery.foundation = jQuery.foundation || {};
jQuery.foundation.customForms = jQuery.foundation.customForms || {};
jQuery(document).ready(function ($) {
-
- function appendCustomMarkup(type) {
- $('form.custom input:' + type).each(function () {
-
- var $this = $(this).hide(),
+
+ $.foundation.customForms.appendCustomMarkup = function (options) {
+ var defaults = {
+ disable_class: "js-disable-custom"
+ };
+ var options = $.extend(defaults, options);
+
+ function appendCustomMarkup(idx, sel) {
+ var $this = $(sel).hide(),
+ type = $this.attr('type'),
$span = $this.next('span.custom.' + type);
if ($span.length === 0) {
@@ -23,85 +28,79 @@ jQuery(document).ready(function ($) {
$span.toggleClass('checked', $this.is(':checked'));
$span.toggleClass('disabled', $this.is(':disabled'));
- });
- }
+ }
+
+ function appendCustomSelect(idx, sel) {
+ var $this = $(sel),
+ $customSelect = $this.next('div.custom.dropdown'),
+ $options = $this.find('option'),
+ $seloptions = $this.find('option:selected'),
+ maxWidth = 0,
+ $li;
+
+ if ($this.hasClass('no-custom')) { return; }
+ if ($customSelect.length === 0) {
+ $customSelectSize = '';
+ if ($(sel).hasClass('small')) {
+ $customSelectSize = 'small';
+ } else if ($(sel).hasClass('medium')) {
+ $customSelectSize = 'medium';
+ } else if ($(sel).hasClass('large')) {
+ $customSelectSize = 'large';
+ } else if ($(sel).hasClass('expand')) {
+ $customSelectSize = 'expand';
+ }
+ $customSelect = $('<div class="custom dropdown ' + $customSelectSize + '"><a href="#" class="selector"></a><ul></ul></div>"');
+ $options.each(function () {
+ $li = $('<li>' + $(this).html() + '</li>');
+ $customSelect.find('ul').append($li);
+ });
+ $customSelect.prepend('<a href="#" class="current">' + $seloptions.html() + '</a>');
- function appendCustomSelect(sel) {
- var $this = $(sel),
- $customSelect = $this.next('div.custom.dropdown'),
- $options = $this.find('option'),
- $seloptions = $this.find('option:selected'),
- maxWidth = 0,
- $li;
+ $this.after($customSelect);
+ $this.hide();
- if ($this.hasClass('no-custom')) { return; }
- if ($customSelect.length === 0) {
- $customSelectSize = '';
- if ($(sel).hasClass('small')) {
- $customSelectSize = 'small';
- } else if ($(sel).hasClass('medium')) {
- $customSelectSize = 'medium';
- } else if ($(sel).hasClass('large')) {
- $customSelectSize = 'large';
- } else if ($(sel).hasClass('expand')) {
- $customSelectSize = 'expand';
+ } else {
+ // refresh the ul with options from the select in case the supplied markup doesn't match
+ $customSelect.find('ul').html('');
+ $options.each(function () {
+ $li = $('<li>' + $(this).html() + '</li>');
+ $customSelect.find('ul').append($li);
+ });
}
- $customSelect = $('<div class="custom dropdown ' + $customSelectSize + '"><a href="#" class="selector"></a><ul></ul></div>"');
- $options.each(function () {
- $li = $('<li>' + $(this).html() + '</li>');
- $customSelect.find('ul').append($li);
- });
- $customSelect.prepend('<a href="#" class="current">' + $seloptions.html() + '</a>');
- $this.after($customSelect);
- $this.hide();
-
- } else {
- // refresh the ul with options from the select in case the supplied markup doesn't match
- $customSelect.find('ul').html('');
- $options.each(function () {
- $li = $('<li>' + $(this).html() + '</li>');
- $customSelect.find('ul').append($li);
- });
- }
+ $customSelect.toggleClass('disabled', $this.is(':disabled'));
- $customSelect.toggleClass('disabled', $this.is(':disabled'));
+ $options.each(function (index) {
+ if (this.selected) {
+ $customSelect.find('li').eq(index).addClass('selected');
+ $customSelect.find('.current').html($(this).html());
+ }
+ });
- $options.each(function (index) {
- if (this.selected) {
- $customSelect.find('li').eq(index).addClass('selected');
- $customSelect.find('.current').html($(this).html());
- }
- });
+ $customSelect.css('width', 'inherit');
+ $customSelect.find('ul').css('width', 'inherit');
- $customSelect.css('width', 'inherit');
- $customSelect.find('ul').css('width', 'inherit');
+ $customSelect.find('li').each(function () {
+ $customSelect.addClass('open');
+ if ($(this).outerWidth() > maxWidth) {
+ maxWidth = $(this).outerWidth();
+ }
+ $customSelect.removeClass('open');
+ });
- $customSelect.find('li').each(function () {
- $customSelect.addClass('open');
- if ($(this).outerWidth() > maxWidth) {
- maxWidth = $(this).outerWidth();
+ if (!$customSelect.is('.small, .medium, .large, .expand')) {
+ $customSelect.css('width', maxWidth + 18 + 'px');
+ $customSelect.find('ul').css('width', maxWidth + 16 + 'px');
}
- $customSelect.removeClass('open');
- });
-
- if (!$customSelect.is('.small, .medium, .large, .expand')) {
- $customSelect.css('width', maxWidth + 18 + 'px');
- $customSelect.find('ul').css('width', maxWidth + 16 + 'px');
- }
- }
-
- $.foundation.customForms.appendCustomMarkup = function () {
- appendCustomMarkup('checkbox');
- appendCustomMarkup('radio');
-
- $('form.custom select').each(function () {
- appendCustomSelect(this);
- });
+ }
+
+ $('form.custom input:radio[data-customforms!=disabled]').each(appendCustomMarkup);
+ $('form.custom input:checkbox[data-customforms!=disabled]').each(appendCustomMarkup);
+ $('form.custom select[data-customforms!=disabled]').each(appendCustomSelect);
};
- $.foundation.customForms.appendCustomMarkup();
});
(function ($) {

0 comments on commit 5a7e88b

Please sign in to comment.