diff --git a/README.md b/README.md index e779ef1..0912284 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,4 @@ -jquery.switcher v1.1.1 +jquery.switcher v1.1.2 =============== Custom checkbox / radio button in jquery @@ -34,13 +34,13 @@ $(function () { ### Params -| Param | Default value | Info | -| ------------- | ------------- | -----------------------------------------------------------------------------| -| class | 'switcher' | class added to the html element. Useful if you want to customize it with css | -| selected | false | if the input is checked or not | -| language | 'en' | default language used for the yes/no texts | -| disabled | false | if the input is disabled | -| copy | {obj} | json object with all the languages. By default, it only contain fr/en | +| Param | Default value | Info | +| ------------- | ------------- | ----------------------------------------------------------------------------------------------| +| class | 'switcher' | class added to the html element. Useful if you want to customize it with css | +| selected | false | if the input is checked or not. If nothing is specified, it will take the input checked value | +| language | 'en' | default language used for the yes/no texts | +| disabled | false | if the input is disabled | +| copy | {obj} | json object with all the languages. By default, it only contain fr/en | #### You can change the parameters in the javascript when instantiating the plugin diff --git a/bower.json b/bower.json index 6ffbd85..4474721 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "jquery.switcher", - "version": "1.1.1", + "version": "1.1.2", "homepage": "http://djanix.github.io/jquery.switcher/", "docs": "http://amsul.github.io/pickadate.js", "authors": [ diff --git a/dist/switcher.css b/dist/switcher.css index 7076a59..3a56b50 100644 --- a/dist/switcher.css +++ b/dist/switcher.css @@ -1,5 +1,5 @@ -/* jquery.switcher - 1.1.1 -* Copyright (c) 2014-07-17 Janic Beauchemin - https://github.com/djanix/ */ +/* jquery.switcher - 1.1.2 +* Copyright (c) 2014-07-22 Janic Beauchemin - https://github.com/djanix/ */ .switcher { diff --git a/dist/switcher.js b/dist/switcher.js index a733822..89e232e 100644 --- a/dist/switcher.js +++ b/dist/switcher.js @@ -7,7 +7,7 @@ * Under MIT License */ -/* jquery.switcher - 1.1.1 +/* jquery.switcher - 1.1.2 * Copyright (c) 2014-07-11 Janic Beauchemin - https://github.com/djanix/ */ ;(function ($, window, document, undefined) { @@ -15,7 +15,7 @@ var defaults = { class: "switcher", - selected: false, + selected: null, language: "en", disabled: false, copy: { @@ -92,14 +92,22 @@ }, setValue: function (val) { - if (typeof val != 'boolean') { - return console.log('The parameter need to be true or false as a boolean'); - } - var self = this; var $input = $(self.input); var $container = $(self.container); + if (val == null) { + if ($input.attr('type') == 'radio') { + val = typeof $input.filter(':checked').val()!=='undefined'; + } else { + val = $input.prop('checked'); + } + } + + if (typeof val != 'boolean') { + return console.log('The parameter need to be true or false as a boolean'); + } + self.settings.selected = val; $input.prop("checked", val); @@ -108,15 +116,12 @@ var $inputGroup = $('input[name="' + name + '"]'); var $containerGroup = $inputGroup.parent('.' + self.settings.class); - $containerGroup.removeClass('is-active'); - $inputGroup.prop("checked", false); - if (val === true) { + $containerGroup.removeClass('is-active'); + $inputGroup.prop("checked", false); + $container.addClass('is-active'); $input.prop("checked", true); - } else { - $containerGroup.first().addClass('is-active'); - $inputGroup.first().prop("checked", true); } } else { if (val === true) { diff --git a/dist/switcher.min.css b/dist/switcher.min.css index df7e710..fc3c44f 100644 --- a/dist/switcher.min.css +++ b/dist/switcher.min.css @@ -1,5 +1,5 @@ -/* jquery.switcher - 1.1.1 -* Copyright (c) 2014-07-17 Janic Beauchemin - https://github.com/djanix/ */ +/* jquery.switcher - 1.1.2 +* Copyright (c) 2014-07-22 Janic Beauchemin - https://github.com/djanix/ */ .switcher{background-color:#fff;border:1px solid #dfdfdf;border-radius:4px;display:inline-block;font-family:"Lucida Sans Unicode","Lucida Grande",sans-serif;font-size:12px;line-height:26px;padding:2px;text-transform:uppercase;-webkit-transition:background-color 0.3s;transition:background-color 0.3s;min-width:80px}.switcher input{display:none}.switcher .content{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.switcher .text{cursor:default;overflow:hidden;text-align:center;white-space:nowrap;width:50%}.switcher .textYes{color:#fff;float:left}.switcher .textNo{color:#9f9f9f;float:right}.switcher .slider{background-color:#fff;border-radius:4px;-webkit-box-shadow:0 0 2px 1px #dfdfdf;box-shadow:0 0 2px 1px #dfdfdf;height:26px;left:0;position:absolute;top:0;-webkit-transform:translateX(0%);-ms-transform:translateX(0%);transform:translateX(0%);-webkit-transition:-webkit-transform 0.3s;transition:transform 0.3s;width:50%;z-index:2}.switcher.is-active{background-color:#519b20}.switcher.is-active .slider{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%)}.switcher.is-disabled{opacity:0.4} diff --git a/dist/switcher.min.js b/dist/switcher.min.js index fcd807a..18c8db1 100644 --- a/dist/switcher.min.js +++ b/dist/switcher.min.js @@ -1,4 +1,4 @@ -/* jquery.switcher - 1.1.1 -* Copyright (c) 2014-07-17 Janic Beauchemin - https://github.com/djanix/ */ +/* jquery.switcher - 1.1.2 +* Copyright (c) 2014-07-22 Janic Beauchemin - https://github.com/djanix/ */ -!function(a){function b(b,c){this.input=b,this.container=null,this.settings=a.extend({},h,a(b).data(),c),this._defaults=h,this._name=g,this.init()}function c(){this.removeEventListener("touchmove",d),this.removeEventListener("touchend",c),k=!1}function d(b){if(b.preventDefault(),k){var d=b.touches[0].pageX,e=b.touches[0].pageY,f=i-d,g=j-e,h=null;Math.abs(f)>=l?h=f>0?"left":"right":Math.abs(g)>=l&&(h=g>0?"down":"up"),h&&(c.call(this),a(this).trigger("swipe",h).trigger("swipe"+h))}}function e(a){1==a.touches.length&&(i=a.touches[0].pageX,j=a.touches[0].pageY,k=!0,this.addEventListener("touchmove",d,!1),this.addEventListener("touchend",c,!1))}function f(){this.addEventListener&&this.addEventListener("touchstart",e,!1)}var g="switcher",h={"class":"switcher",selected:!1,language:"en",disabled:!1,copy:{en:{yes:"yes",no:"no"},fr:{yes:"oui",no:"non"}}};a.extend(b.prototype,{init:function(){this.buildHtml(this.input,this.settings),this.bindEvents(this.container,this.settings)},buildHtml:function(b,c){var d=this,e=a(b);e.wrap('
'),e.after('
'),this.container=a(e).parent("."+c.class)[0],d.setLanguage(c.language),d.setValue(c.selected),d.setDisabled(c.disabled)},bindEvents:function(b,c){var d=this,e=a(b),f=e.find("input");e.on("click",function(){c.disabled||d.setValue("radio"==f.attr("type")?!0:!f.prop("checked"))}),e.on("swipeleft",function(){c.disabled||d.setValue(!1)}),e.on("swiperight",function(){c.disabled||d.setValue(!0)})},setValue:function(b){if("boolean"!=typeof b)return console.log("The parameter need to be true or false as a boolean");var c=this,d=a(c.input),e=a(c.container);if(c.settings.selected=b,d.prop("checked",b),"radio"==d.attr("type")){var f=d.attr("name"),g=a('input[name="'+f+'"]'),h=g.parent("."+c.settings.class);h.removeClass("is-active"),g.prop("checked",!1),b===!0?(e.addClass("is-active"),d.prop("checked",!0)):(h.first().addClass("is-active"),g.first().prop("checked",!0))}else b===!0?e.addClass("is-active"):e.removeClass("is-active")},getValue:function(a){var b=this;return a(b.settings.selected)},setDisabled:function(b){if("boolean"!=typeof b)return console.log("The parameter need to be true or false as a boolean");var c=this,d=a(c.container);c.settings.disabled=b,b===!0?d.addClass("is-disabled"):d.removeClass("is-disabled")},getDisabled:function(a){var b=this;return a(b.settings.disabled)},setLanguage:function(b){var c=this,d=a(c.container);c.settings.language=b,d.find(".textYes").text(c.settings.copy[b].yes),d.find(".textNo").text(c.settings.copy[b].no)},getLanguage:function(a){var b=this;return a(b.settings.language)},importLanguage:function(a){var b=this;b.settings.copy=a}}),a.fn[g]=function(c){var d=Array.prototype.slice.call(arguments,1);return this.each(function(){var e=a(this),f=e.data("plugin_"+g);f?"string"==typeof c&&f[c].apply(f,d):e.data("plugin_"+g,new b(this,c))}),this};var i=0,j=0,k=!1,l=30;a.event.special.swipe={setup:f},a.each(["left","up","down","right"],function(){a.event.special["swipe"+this]={setup:function(){a(this).on("swipe",a.noop)}}})}(jQuery,window,document); \ No newline at end of file +!function(a){function b(b,c){this.input=b,this.container=null,this.settings=a.extend({},h,a(b).data(),c),this._defaults=h,this._name=g,this.init()}function c(){this.removeEventListener("touchmove",d),this.removeEventListener("touchend",c),k=!1}function d(b){if(b.preventDefault(),k){var d=b.touches[0].pageX,e=b.touches[0].pageY,f=i-d,g=j-e,h=null;Math.abs(f)>=l?h=f>0?"left":"right":Math.abs(g)>=l&&(h=g>0?"down":"up"),h&&(c.call(this),a(this).trigger("swipe",h).trigger("swipe"+h))}}function e(a){1==a.touches.length&&(i=a.touches[0].pageX,j=a.touches[0].pageY,k=!0,this.addEventListener("touchmove",d,!1),this.addEventListener("touchend",c,!1))}function f(){this.addEventListener&&this.addEventListener("touchstart",e,!1)}var g="switcher",h={"class":"switcher",selected:null,language:"en",disabled:!1,copy:{en:{yes:"yes",no:"no"},fr:{yes:"oui",no:"non"}}};a.extend(b.prototype,{init:function(){this.buildHtml(this.input,this.settings),this.bindEvents(this.container,this.settings)},buildHtml:function(b,c){var d=this,e=a(b);e.wrap('
'),e.after('
'),this.container=a(e).parent("."+c.class)[0],d.setLanguage(c.language),d.setValue(c.selected),d.setDisabled(c.disabled)},bindEvents:function(b,c){var d=this,e=a(b),f=e.find("input");e.on("click",function(){c.disabled||d.setValue("radio"==f.attr("type")?!0:!f.prop("checked"))}),e.on("swipeleft",function(){c.disabled||d.setValue(!1)}),e.on("swiperight",function(){c.disabled||d.setValue(!0)})},setValue:function(b){var c=this,d=a(c.input),e=a(c.container);if(null==b&&(b="radio"==d.attr("type")?"undefined"!=typeof d.filter(":checked").val():d.prop("checked")),"boolean"!=typeof b)return console.log("The parameter need to be true or false as a boolean");if(c.settings.selected=b,d.prop("checked",b),"radio"==d.attr("type")){var f=d.attr("name"),g=a('input[name="'+f+'"]'),h=g.parent("."+c.settings.class);b===!0&&(h.removeClass("is-active"),g.prop("checked",!1),e.addClass("is-active"),d.prop("checked",!0))}else b===!0?e.addClass("is-active"):e.removeClass("is-active")},getValue:function(a){var b=this;return a(b.settings.selected)},setDisabled:function(b){if("boolean"!=typeof b)return console.log("The parameter need to be true or false as a boolean");var c=this,d=a(c.container);c.settings.disabled=b,b===!0?d.addClass("is-disabled"):d.removeClass("is-disabled")},getDisabled:function(a){var b=this;return a(b.settings.disabled)},setLanguage:function(b){var c=this,d=a(c.container);c.settings.language=b,d.find(".textYes").text(c.settings.copy[b].yes),d.find(".textNo").text(c.settings.copy[b].no)},getLanguage:function(a){var b=this;return a(b.settings.language)},importLanguage:function(a){var b=this;b.settings.copy=a}}),a.fn[g]=function(c){var d=Array.prototype.slice.call(arguments,1);return this.each(function(){var e=a(this),f=e.data("plugin_"+g);f?"string"==typeof c&&f[c].apply(f,d):e.data("plugin_"+g,new b(this,c))}),this};var i=0,j=0,k=!1,l=30;a.event.special.swipe={setup:f},a.each(["left","up","down","right"],function(){a.event.special["swipe"+this]={setup:function(){a(this).on("swipe",a.noop)}}})}(jQuery,window,document); \ No newline at end of file diff --git a/index.html b/index.html index 5370dd8..7cc92d9 100644 --- a/index.html +++ b/index.html @@ -16,7 +16,13 @@

Jquery Switcher

- +

input


+

+ +

radio


+ + + diff --git a/package.json b/package.json index 85156c6..0f76a3a 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jquery.switcher", - "version": "1.1.1", + "version": "1.1.2", "description": "", "homepage": "", "author": { diff --git a/switcher.js b/switcher.js index a733822..89e232e 100644 --- a/switcher.js +++ b/switcher.js @@ -7,7 +7,7 @@ * Under MIT License */ -/* jquery.switcher - 1.1.1 +/* jquery.switcher - 1.1.2 * Copyright (c) 2014-07-11 Janic Beauchemin - https://github.com/djanix/ */ ;(function ($, window, document, undefined) { @@ -15,7 +15,7 @@ var defaults = { class: "switcher", - selected: false, + selected: null, language: "en", disabled: false, copy: { @@ -92,14 +92,22 @@ }, setValue: function (val) { - if (typeof val != 'boolean') { - return console.log('The parameter need to be true or false as a boolean'); - } - var self = this; var $input = $(self.input); var $container = $(self.container); + if (val == null) { + if ($input.attr('type') == 'radio') { + val = typeof $input.filter(':checked').val()!=='undefined'; + } else { + val = $input.prop('checked'); + } + } + + if (typeof val != 'boolean') { + return console.log('The parameter need to be true or false as a boolean'); + } + self.settings.selected = val; $input.prop("checked", val); @@ -108,15 +116,12 @@ var $inputGroup = $('input[name="' + name + '"]'); var $containerGroup = $inputGroup.parent('.' + self.settings.class); - $containerGroup.removeClass('is-active'); - $inputGroup.prop("checked", false); - if (val === true) { + $containerGroup.removeClass('is-active'); + $inputGroup.prop("checked", false); + $container.addClass('is-active'); $input.prop("checked", true); - } else { - $containerGroup.first().addClass('is-active'); - $inputGroup.first().prop("checked", true); } } else { if (val === true) {