Skip to content

Commit

Permalink
Merge pull request abitgone#14 from abitgone/feature/classtoggle/chec…
Browse files Browse the repository at this point in the history 
…kboxes-and-radiobuttons

Add Checkbox and Radiobutton Support to ClassToggle
  • Loading branch information
@abitgone
abitgone committed Dec 19, 2013
2 parents 023a8d1 + a0591c0 commit 01c8e55
Show file tree
Hide file tree
Showing 3 changed files with 343 additions and 12 deletions.
2 changes: 1 addition & 1 deletion ClassToggle/abitgone-classtoggle-min.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,4 @@
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/!function(){var e=function(e,t){this.$element=$(e);this.options=$.extend({},$.fn.classToggle.defaults,t);this.options.parent&&(this.$parent=$(this.options.parent));this.options.classToggle&&this.classToggle()};e.prototype={constructor:e,classToggle:function(){var e,t,n,r,i,s=$(this.options.trigger),o=$(this.options.triggerTarget),u=this.options.classtoggleClass,a=this.options.classtoggleAltclass,f=this.options.classtoggleTriggerActiveclass,l=this.options.classtoggleTriggerSelector,c=this.options.classtoggleTarget;if(c==undefined){c=s.attr("href")==undefined?s.attr("href"):this.options.trigger.href;c=c.replace(/.*(?=#[^\s]+$)/,"")}if(c==undefined)return;e=$(c);if(u==undefined||e==undefined)return;u=u.split(",");t=!1;for(n=0;n<u.length&&!t;n++)t=e.hasClass(u[n]);r=a==undefined?!1:e.hasClass(a);if(a==undefined)this.toggleClasses(e,u);else if(t&&r||!t&&!r)e.toggleClass(a);else{e.toggleClass(a);this.toggleClasses(e,u)}if(f==undefined)return;l==undefined?i=s:i=$(l);i.toggleClass(f)},toggleClasses:function(e,t){var n,r;for(n=0;n<t.length;n++){r=t[n].match(/([-+]{2})?(\S+)/);switch(r[1]){case"--":e.removeClass(r[2]);break;case"++":e.addClass(r[2]);break;default:e.toggleClass(r[2])}}}};$.fn.classToggle=function(t){this.each(function(){var n=$(this),r=n.data("classToggle"),i=typeof t=="object"&&t;r||n.data("classToggle",r=new e(this,i));typeof t=="string"&&r[t]()})};$.fn.classToggle.defaults={classToggle:!0};$.fn.classToggle.Constructor=e;$(function(){$("body").on("click.classtoggle.data-api","[data-classtoggle-class]",function(e){var t,n=$(this),r=n.attr("data-classtoggle-target")||e.preventDefault()||(t=n.attr("href"))&&t.replace(/.*(?=#[^\s]+$)/,""),i=n.data("classToggle")?"classToggle":n.data();i.trigger=e.target;i.triggerTarget=r;$(this).classToggle(i);n.attr("data-classtoggle-target")&&n.attr("href")&&e.preventDefault()})})}(window.jQuery);
*/!function(){var e=function(e,t){this.$element=$(e);this.options=$.extend({},$.fn.classToggle.defaults,t);this.options.parent&&(this.$parent=$(this.options.parent));this.options.classToggle&&this.classToggle()};e.prototype={constructor:e,classToggle:function(){var e,t,n,r,i,s,o=$(this.options.trigger),u=$(this.options.triggerTarget),a=this.options.classtoggleClass,f=this.options.classtoggleAltclass,l=this.options.classtoggleTriggerActiveclass,c=this.options.classtoggleTriggerSelector,h=this.options.classtoggleTarget;if(h==undefined){h=o.attr("href")==undefined?o.attr("href"):this.options.trigger.href;h=h.replace(/.*(?=#[^\s]+$)/,"")}if(h==undefined)return;e=$(h);if(a==undefined||e==undefined)return;a=a.split(",");t=!1;for(n=0;n<a.length&&!t;n++)t=e.hasClass(a[n]);r=f==undefined?!1:e.hasClass(f);i=o[0];s={triggerNode:i,$tcTarget:e,$trigger:o,tcClass:a,tcClassAlt:f,tcTriggerClass:l,tcTriggerSelector:c,targetMain:t,targetAlt:r,tcThis:this};if(i.nodeName.toLowerCase()=="input")switch(i.type.toLowerCase()){case"radio":this.toggleClassesFromInput(s,!0);break;case"checkbox":this.toggleClassesFromInput(s,!1);break;default:this.toggleClassesFromElement(s,!0)}else this.toggleClassesFromElement(s,!1)},toggleClassesFromElement:function(e,t){var n;if(e.tcClassAlt==undefined||t)e.tcThis.toggleClasses(e.$tcTarget,e.tcClass);else if(e.targetMain&&e.targetAlt||!e.targetMain&&!e.targetAlt)e.$tcTarget.toggleClass(e.tcClassAlt);else{e.$tcTarget.toggleClass(e.tcClassAlt);e.tcThis.toggleClasses(e.$tcTarget,e.tcClass)}if(e.tcTriggerClass==undefined||t)return;e.tcTriggerSelector==undefined?n=e.$trigger:n=$(e.tcTriggerSelector);n.toggleClass(e.tcTriggerClass)},toggleClassesFromInput:function(e,t){var n,r,i;e.tcClassOriginal=e.tcClass;e.tcClass=e.tcClass.join(",").replace(/(\+\+|--)?\b(\w)/g,(e.triggerNode.checked?"++":"--")+"$2").split(",");this.toggleClassesFromElement(e);if(t){n=$("input[type=radio][name="+e.triggerNode.name+"]").not($(e.triggerNode)),r=e.tcClassOriginal.join(",").replace(/(\+\+|--)?\b(\w)/g,(e.triggerNode.checked?"--":"++")+"$2").split(",");for(i=0;i<n.length;i++){tcOtherTargets=$(n[i]).attr("data-classtoggle-target");this.toggleClasses($(tcOtherTargets),r)}}},toggleClasses:function(e,t){var n,r;for(n=0;n<t.length;n++){r=t[n].match(/([-+]{2})?(\S+)/);switch(r[1]){case"--":e.removeClass(r[2]);break;case"++":e.addClass(r[2]);break;default:e.toggleClass(r[2])}}}};$.fn.classToggle=function(t){this.each(function(){var n=$(this),r=n.data("classToggle"),i=typeof t=="object"&&t;r||n.data("classToggle",r=new e(this,i));typeof t=="string"&&r[t]()})};$.fn.classToggle.defaults={classToggle:!0};$.fn.classToggle.Constructor=e;$(function(){$("body").on("click.classtoggle.data-api","[data-classtoggle-class]",function(e){var t,n=$(this),r=n.attr("data-classtoggle-target")||e.preventDefault()||(t=n.attr("href"))&&t.replace(/.*(?=#[^\s]+$)/,""),i=n.data("classToggle")?"classToggle":n.data();i.trigger=e.target;i.triggerTarget=r;$(this).classToggle(i);n.attr("data-classtoggle-target")&&n.attr("href")&&e.preventDefault()})})}(window.jQuery);
99 changes: 88 additions & 11 deletions ClassToggle/abitgone-classtoggle.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,26 +98,103 @@
}
var targetAlt = tcClassAlt == undefined ? false : $tcTarget.hasClass(tcClassAlt);

if (tcClassAlt == undefined) {
this.toggleClasses($tcTarget, tcClass);
var triggerNode = $trigger[0];

var tcOptions = {
"triggerNode": triggerNode,
"$tcTarget": $tcTarget,
"$trigger": $trigger,
"tcClass": tcClass,
"tcClassAlt": tcClassAlt,
"tcTriggerClass": tcTriggerClass,
"tcTriggerSelector": tcTriggerSelector,
"targetMain": targetMain,
"targetAlt": targetAlt,
"tcThis": this
};

if (triggerNode.nodeName.toLowerCase() == "input") {
switch(triggerNode.type.toLowerCase()) {
case "radio":
// A radiobutton triggered the toggle 
this.toggleClassesFromInput(tcOptions, true);
break;
case "checkbox":
// A checkbox triggered the toggle
this.toggleClassesFromInput(tcOptions, false);
break;
default:
// Another input element triggered the toggle -- treat as normal
this.toggleClassesFromElement(tcOptions, true);
break;
}
}
else {
// A non-input element triggered the toggle -- treat as normal
this.toggleClassesFromElement(tcOptions, false);
}

},

toggleClassesFromElement: function(tcOptions, isInputElement) {

// Normal behaviour -- this will just indiscriminately toggle classes on a per-click basis, though for input
// elements, toggling a class on the trigger is not yet available (I haven't had a chance to test it well
// enough yet to include it right now).

if (tcOptions.tcClassAlt == undefined || isInputElement) {
tcOptions.tcThis.toggleClasses(tcOptions.$tcTarget, tcOptions.tcClass);
} else {
if ((targetMain && targetAlt) || (!targetMain && !targetAlt)) {
$tcTarget.toggleClass(tcClassAlt);
if ((tcOptions.targetMain && tcOptions.targetAlt) || (!tcOptions.targetMain && !tcOptions.targetAlt)) {
tcOptions.$tcTarget.toggleClass(tcOptions.tcClassAlt);
} else {
$tcTarget.toggleClass(tcClassAlt);
this.toggleClasses($tcTarget, tcClass);
tcOptions.$tcTarget.toggleClass(tcOptions.tcClassAlt);
tcOptions.tcThis.toggleClasses(tcOptions.$tcTarget, tcOptions.tcClass);
}
}

if (tcTriggerClass == undefined) return;
// If there is no trigger class, or if the trigger is an input element, don't bother with the triggers

if (tcOptions.tcTriggerClass == undefined || isInputElement) return;

var $tcTriggers;
if (tcTriggerSelector == undefined) {
$tcTriggers = $trigger;
if (tcOptions.tcTriggerSelector == undefined) {
$tcTriggers = tcOptions.$trigger;
} else {
$tcTriggers = $(tcTriggerSelector);
$tcTriggers = $(tcOptions.tcTriggerSelector);
}
$tcTriggers.toggleClass(tcOptions.tcTriggerClass);

},
toggleClassesFromInput: function(tcOptions, isRadioButton) {

// Checkbox behaviour -- this is different to the normal behaviour and attempts to modify the classes that
// are toggled when clicked. The class list to toggle - tcClassList - will be rewritten as follows:
//
// element.checked | original class name | modified class name
// =================|=======================|==============================================
// false (default) | class-name | --class-name (thus explicitly removing it)
// false (default) | ++class-name | --class-name (thus explicitly removing it)
// false (default) | --class-name | --class-name (no change)
// -----------------|-----------------------|----------------------------------------------
// true | class-name | ++class-name (thus explicitly adding it)
// true | ++class-name | ++class-name (no change)
// true | --class-name | ++class-name (thus explicitly adding it)

tcOptions.tcClassOriginal = tcOptions.tcClass;
tcOptions.tcClass = tcOptions.tcClass.join(",").replace(/(\+\+|--)?\b(\w)/g, (tcOptions.triggerNode.checked ? "++" : "--") + "$2").split(",");
this.toggleClassesFromElement(tcOptions);

if (isRadioButton) {
var $tcRadioButtons = $("input[type=radio][name=" + tcOptions.triggerNode.name + "]").not($(tcOptions.triggerNode)),
tcOtherInputClass = tcOptions.tcClassOriginal.join(",").replace(/(\+\+|--)?\b(\w)/g, (tcOptions.triggerNode.checked ? "--" : "++") + "$2").split(",");

for (var i = 0; i < $tcRadioButtons.length; i++) {
tcOtherTargets = $($tcRadioButtons[i]).attr("data-classtoggle-target");
this.toggleClasses($(tcOtherTargets), tcOtherInputClass);
};

}
$tcTriggers.toggleClass(tcTriggerClass);

},

Expand Down
254 changes: 254 additions & 0 deletions codekit-config.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,254 @@
{
"CodeKitInfo" : "This is a CodeKit project configuration file. It is designed to sync project settings across multiple machines. Modifying the contents of this file can be a poor life decision if you don't know what you're doing. This file is not useful unless accompanied by the project that created it in CodeKit. For more information, see: http:\/\/incident57.com\/codekit",
"creatorBuild" : "8403",
"files" : {
"\/GAHelper\/abitgone-gahelper-min.js" : {
"ignoreWasSetByUser" : 0,
"ignore" : 1,
"hidden" : 0,
"outputPathIsSetByUser" : 0,
"inputAbbreviatedPath" : "\/GAHelper\/abitgone-gahelper-min.js",
"outputStyle" : 1,
"syntaxCheckerStyle" : 0,
"outputAbbreviatedPath" : "\/GAHelper\/abitgone-gahelper-min-min.js",
"fileType" : 64
},
"\/GAHelper\/abitgone-gahelper.js" : {
"ignoreWasSetByUser" : 0,
"ignore" : 0,
"hidden" : 0,
"outputPathIsSetByUser" : 0,
"inputAbbreviatedPath" : "\/GAHelper\/abitgone-gahelper.js",
"outputStyle" : 1,
"syntaxCheckerStyle" : 0,
"outputAbbreviatedPath" : "\/GAHelper\/abitgone-gahelper-min.js",
"fileType" : 64
},
"\/Carousel\/abitgone-carousel.js" : {
"ignoreWasSetByUser" : 0,
"ignore" : 0,
"hidden" : 0,
"outputPathIsSetByUser" : 0,
"inputAbbreviatedPath" : "\/Carousel\/abitgone-carousel.js",
"outputStyle" : 1,
"syntaxCheckerStyle" : 0,
"outputAbbreviatedPath" : "\/Carousel\/abitgone-carousel-min.js",
"fileType" : 64
},
"\/ClassToggle\/abitgone-classtoggle-min.js" : {
"ignoreWasSetByUser" : 0,
"ignore" : 1,
"hidden" : 0,
"outputPathIsSetByUser" : 0,
"inputAbbreviatedPath" : "\/ClassToggle\/abitgone-classtoggle-min.js",
"outputStyle" : 1,
"syntaxCheckerStyle" : 0,
"outputAbbreviatedPath" : "\/ClassToggle\/abitgone-classtoggle-min-min.js",
"fileType" : 64
},
"\/Carousel\/abitgone-carousel-min.js" : {
"ignoreWasSetByUser" : 0,
"ignore" : 1,
"hidden" : 0,
"outputPathIsSetByUser" : 0,
"inputAbbreviatedPath" : "\/Carousel\/abitgone-carousel-min.js",
"outputStyle" : 1,
"syntaxCheckerStyle" : 0,
"outputAbbreviatedPath" : "\/Carousel\/abitgone-carousel-min-min.js",
"fileType" : 64
},
"\/ClassToggle\/abitgone-classtoggle.js" : {
"ignoreWasSetByUser" : 0,
"ignore" : 0,
"hidden" : 0,
"outputPathIsSetByUser" : 0,
"inputAbbreviatedPath" : "\/ClassToggle\/abitgone-classtoggle.js",
"outputStyle" : 1,
"syntaxCheckerStyle" : 0,
"outputAbbreviatedPath" : "\/ClassToggle\/abitgone-classtoggle-min.js",
"fileType" : 64
}
},
"manualImportLinks" : [

],
"projectSettings" : {
"hamlNoEscapeInAttributes" : 0,
"kitAutoOutputPathStyle" : 0,
"lessOutputStyle" : 0,
"hamlAutoOutputPathReplace2" : "",
"draggedImportConcatenationStyle" : 1,
"jadeAutoOutputPathStyle" : 0,
"hamlEscapeHTMLCharacters" : 0,
"javascriptAutoOutputPathStyle" : 0,
"hamlOutputFormat" : 2,
"stylusAutoOutputPathReplace1" : "stylus",
"lessStrictImports" : 0,
"sassAutoOutputPathStyle" : 2,
"stylusAutoOutputPathReplace2" : "css",
"lessAutoOutputPathStyle" : 2,
"lessIECompatibility" : 1,
"genericWebpageFileExtensionsString" : "html, htm, shtml, shtm, xhtml, php, jsp, asp, aspx, erb, ctp",
"lessStrictUnits" : 0,
"lessStrictMath" : 0,
"coffeeMinifyOutput" : 1,
"javascriptOutputSuffix" : "-min",
"jadeOutputStyle" : 0,
"coffeeAutoOutputPathStyle" : 0,
"autoSyncProjectSettingsFile" : 1,
"lessAutoOutputPathReplace1" : "less",
"jadeAutoOutputPathReplace1" : "",
"lessAutoOutputPathRelativePath" : "..\/css",
"hamlAutoOutputPathRelativePath" : "",
"jsCheckerReservedNamesString" : "",
"javascriptOutputStyle" : 1,
"stylusDebugStyle" : 0,
"hamlUseCDATA" : 0,
"hamlAutoOutputPathStyle" : 0,
"sassDebugStyle" : 0,
"hamlOutputStyle" : 0,
"stylusAutoOutputPathRelativePath" : "..\/css",
"jsCheckerIndent" : 4,
"kitAutoOutputPathRelativePath" : "",
"lessAutoOutputPathReplace2" : "css",
"jadeAutoOutputPathReplace2" : "",
"shouldRunBless" : 0,
"stylusAutoOutputPathStyle" : 2,
"coffeeCheckOutputStyle" : 0,
"slimOutputStyle" : 1,
"javascriptSyntaxCheckerStyle" : 0,
"sassAutoOutputPathReplace1" : "sass",
"slimAutoOutputPathReplace1" : "",
"sassOutputStyle" : 0,
"coffeeAutoOutputPathRelativePath" : "",
"slimCompileOnly" : 0,
"slimLogicless" : 0,
"uglifyIndent" : 4,
"jadeAutoOutputPathRelativePath" : "",
"hamlUseUnixNewlines" : 0,
"hamlAutoOutputPathReplace1" : "",
"javascriptAutoOutputPathReplace1" : "",
"stylusOutputStyle" : 0,
"javascriptAutoOutputPathReplace2" : "",
"sassAutoOutputPathRelativePath" : "..\/css",
"coffeeAutoOutputPathReplace1" : "",
"hamlUseDoubleQuotes" : 0,
"coffeeAutoOutputPathReplace2" : "",
"kitAutoOutputPathReplace1" : "",
"uglifyReservedNamesString" : "",
"coffeeOutputStyle" : 0,
"slimAutoOutputPathRelativePath" : "",
"jsHintFlags" : {
"latedef" : 1,
"newcap" : 1,
"curly" : 1,
"trailing" : 1,
"nonew" : 1,
"es3" : 0,
"freeze" : 1,
"yui" : 0,
"mootools" : 0,
"proto" : 0,
"boss" : 0,
"funcscope" : 0,
"jquery" : 1,
"esnext" : 0,
"camelcase" : 0,
"dojo" : 0,
"strict" : 0,
"devel" : 0,
"wsh" : 0,
"nonstandard" : 0,
"asi" : 0,
"moz" : 0,
"rhino" : 0,
"smarttabs" : 0,
"lastsemic" : 0,
"noempty" : 0,
"eqnull" : 0,
"eqeqeq" : 1,
"couch" : 0,
"evil" : 0,
"expr" : 0,
"immed" : 0,
"globalstrict" : 0,
"undef" : 1,
"iterator" : 0,
"prototypejs" : 0,
"noarg" : 1,
"supernew" : 0,
"node" : 0,
"unused" : 1,
"debug" : 0,
"bitwise" : 1,
"notypeof" : 1,
"white" : 0,
"browser" : 1,
"worker" : 0,
"laxcomma" : 0,
"multistr" : 0,
"shadow" : 0,
"sub" : 0,
"plusplus" : 0,
"scripturl" : 0,
"forin" : 0,
"loopfunc" : 0,
"laxbreak" : 0
},
"jsLintFlags" : {
"white" : 0,
"unparam" : 0,
"regexp" : 0,
"nomen" : 0,
"vars" : 0,
"sub" : 0,
"stupid" : 0,
"continue" : 0,
"bitwise" : 0,
"newcap" : 0,
"sloppy" : 0,
"closure" : 0,
"browser" : 1,
"properties" : 0,
"plusplus" : 0,
"debug" : 0,
"forin" : 0,
"eqeq" : 0,
"evil" : 0,
"node" : 0,
"rhino" : 0,
"devel" : 0,
"ass" : 0
},
"uglifyFlags" : {
"no-mangle-functions" : 0,
"no-mangle" : 0,
"no-copyright" : 0,
"no-dead-code" : 0,
"inline-script" : 0,
"ascii" : 0,
"unsafe" : 0,
"mangle-toplevel" : 0,
"no-seqs" : 1,
"beautify" : 0,
"lift-vars" : 1,
"consolidate-primitive-values" : 0,
"no-squeeze" : 0
},
"sassAutoOutputPathReplace2" : "css",
"slimAutoOutputPathReplace2" : "",
"jadeCompileDebug" : 1,
"slimRailsCompatible" : 0,
"kitAutoOutputPathReplace2" : "",
"lessRelativeURLS" : 0,
"lessDebugStyle" : 0,
"javascriptAutoOutputPathRelativePath" : "",
"slimAutoOutputPathStyle" : 0
},
"projectAttributes" : {
"bourbonEnabled" : 0,
"displayValue" : "jQuery-Plugins",
"displayValueWasSetByUser" : 0,
"compassEnabled" : 0
}
}

0 comments on commit 01c8e55

Please sign in to comment.