diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..3c3629e --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..3dc7813 --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,14 @@ +module.exports = function(grunt) { + grunt.initConfig({ + uglify: { + customSelect: { + files: { + 'jquery.customSelect.min.js': 'jquery.customSelect.js' + } + } + } + }); + + grunt.loadNpmTasks('grunt-contrib-uglify'); + grunt.registerTask('default', ['uglify:customSelect']); +}; \ No newline at end of file diff --git a/README.md b/README.md index 1b8f1f6..9d72fff 100644 --- a/README.md +++ b/README.md @@ -78,7 +78,18 @@ $('#someSelectBox').customSelect({ ## Changelog -Version 0.4.1 (26/05/2013) +Version 0.4.4 (23/07/2013) + * Added amd/commonjs wrapper. + * Added grunt file to project for minification. + +Version 0.4.3 (23/07/2013) + * Calculate length and position correct, if select box is hidden (fix issue #44 (https://github.com/adamcoulombe/jquery.customSelect/issues/44) by @eluceo) + +Version 0.4.2 (22/05/2013) + * Remember `position` of select element (fix issue #38 (https://github.com/adamcoulombe/jquery.customSelect/pull/38) by @Jako) + * `tab` key support + +Version 0.4.1 (13/05/2013) * Fixed multiple `customSelectOpen` handling in FF * `Esc` & `Enter` key support @@ -147,4 +158,4 @@ Dual licensed under the MIT and GPL licenses: * http://www.opensource.org/licenses/mit-license.php -This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable element in order to acheive your desired look. Since it makes use of default browser functionality,it can be treated just like any ordinary HTML select box. \ No newline at end of file +This lightweight, unintrusive technique uses the native select box functionality of the web browser, and overlays a stylable element in order to acheive your desired look. Since it makes use of default browser functionality,it can be treated just like any ordinary HTML select box. diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..1158943 --- /dev/null +++ b/bower.json @@ -0,0 +1,25 @@ +{ + "name": "jquery.customSelect", + "version": "0.4.3", + "main": "./jquery.customSelect.js", + "dependencies": { + "jquery": ">=1.7.2" + }, + "repository": { + "type": "git", + "url": "git://github.com/adamcoulombe/jquery.customSelect.git" + }, + "homepage": "https://github.com/adamcoulombe/jquery.customSelect", + "authors": [ + "Adam Coulombe" + ], + "description": "Lightweight, unobtrusive, custom style select boxes with jQuery", + "license": "MIT,GPL2", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "tests" + ] +} diff --git a/component.json b/component.json deleted file mode 100644 index a7d8170..0000000 --- a/component.json +++ /dev/null @@ -1,12 +0,0 @@ -{ - "name": "jquery.customSelect", - "version": "0.4.1", - "main": ["./jquery.customSelect.js", "./jquery.customSelect.min.js"], - "dependencies": { - "jquery": ">=1.7.2" - }, - "repository": { - "type": "git", - "url": "git://github.com/adamcoulombe/jquery.customSelect.git" - } -} diff --git a/index.html b/index.html index 88e197f..317b895 100644 --- a/index.html +++ b/index.html @@ -14,24 +14,29 @@ @@ -55,6 +60,17 @@

Demo:

+ + + + +

Notes:

This technique will not work for browsers IE6 and older, but rather safely and cleanly degrades to default styling for those select boxes.

Download from github:

@@ -65,7 +81,7 @@

Usage:

Javascript: 
$(document).ready(function(){
-	$('.mySelectBoxClass').customSelect();
+  $('.mySelectBoxClass').customSelect();
 });
  CSS: diff --git a/jquery.customSelect.js b/jquery.customSelect.js index cd61e8a..0eb67ec 100644 --- a/jquery.customSelect.js +++ b/jquery.customSelect.js @@ -1,14 +1,25 @@ /*! - * jquery.customSelect() - v0.4.1 + * jquery.customSelect() - v0.4.3 * http://adam.co/lab/jquery/customselect/ - * 2013-05-13 + * 2013-07-23 * * Copyright 2013 Adam Coulombe * @license http://www.opensource.org/licenses/mit-license.html MIT License * @license http://www.gnu.org/licenses/gpl.html GPL2 License */ -(function ($) { +(function (factory) { + if (typeof define === 'function' && define.amd) { + // AMD. Register as an anonymous module. + define(['jquery'], factory); + } else if (typeof exports === 'object') { + // Node/CommonJS + factory(require('jquery')); + } else { + // Browser globals + factory(jQuery); + } +}(function ($) { 'use strict'; $.fn.extend({ @@ -49,7 +60,8 @@ return this.each(function () { var $select = $(this), customSelectInnerSpan = $('').addClass(getClass('Inner')), - customSelectSpan = $(''); + customSelectSpan = $(''), + position = $select.position(); $select.after(customSelectSpan.append(customSelectInnerSpan)); @@ -65,8 +77,25 @@ $select .addClass('hasCustomSelect') .on('update', function () { - changed($select,customSelectSpan); - + changed($select,customSelectSpan); + + // if the select box is hidden the calculations for selectBoxWidth and selectBoxHeight + // will be incorrect (eg, if the selectBox is in a tab or overlay). + // ensure the elements are shown, calculate the correct length then re-hide the elements. + + var hiddenParents = $select.parents().add($select).filter(function () { + if ($(this).css('display') === 'none') { + return true; + } + }); + + hiddenParents.each(function(index, element) { + var $element = $(element); + $element.data('origStyle', $element.attr('style')); + $element.show(); + }); + + // calculate lengths var selectBoxWidth = parseInt($select.outerWidth(), 10) - (parseInt(customSelectSpan.outerWidth(), 10) - parseInt(customSelectSpan.width(), 10)); @@ -89,13 +118,35 @@ display: 'inline-block' }); + // calculate correct position + position = $select.position(); + + var customSelectSpanOuterWidth = customSelectSpan.outerWidth(); + + // re-hide hidden parents + hiddenParents.each(function (index, element) { + var $element = $(element), + origStyle = $element.data('origStyle'); + + if (origStyle) { + $element.attr('style', origStyle); + } else { + $element.removeAttr('style'); + } + + $element.removeData('origStyle'); + }); + + // modify style of select $select.css({ '-webkit-appearance': 'menulist-button', - width: customSelectSpan.outerWidth(), + width: customSelectSpanOuterWidth, position: 'absolute', opacity: 0, height: selectBoxHeight, - fontSize: customSelectSpan.css('font-size') + fontSize: customSelectSpan.css('font-size'), + left: position.left, + top: position.top }); }) .on('change', function () { @@ -107,7 +158,7 @@ $select.blur(); $select.focus(); }else{ - if(e.which==13||e.which==27){ + if(e.which==13||e.which==27||e.which==9){ changed($select,customSelectSpan); } } @@ -149,4 +200,4 @@ }); } }); -})(jQuery); +})); diff --git a/jquery.customSelect.min.js b/jquery.customSelect.min.js index 58bfb45..ad026bd 100644 --- a/jquery.customSelect.min.js +++ b/jquery.customSelect.min.js @@ -1,10 +1 @@ -/*! - * jquery.customSelect() - v0.4.1 - * http://adam.co/lab/jquery/customselect/ - * 2013-05-13 - * - * Copyright 2013 Adam Coulombe - * @license http://www.opensource.org/licenses/mit-license.html MIT License - * @license http://www.gnu.org/licenses/gpl.html GPL2 License - */ -(function(a){a.fn.extend({customSelect:function(c){if(typeof document.body.style.maxHeight==="undefined"){return this}var e={customClass:"customSelect",mapClass:true,mapStyle:true},c=a.extend(e,c),d=c.customClass,f=function(h,k){var g=h.find(":selected"),j=k.children(":first"),i=g.html()||" ";j.html(i);if(g.attr("disabled")){k.addClass(b("DisabledOption"))}else{k.removeClass(b("DisabledOption"))}setTimeout(function(){k.removeClass(b("Open"));a(document).off("mouseup."+b("Open"))},60)},b=function(g){return d+g};return this.each(function(){var g=a(this),i=a("").addClass(b("Inner")),h=a("");g.after(h.append(i));h.addClass(d);if(c.mapClass){h.addClass(g.attr("class"))}if(c.mapStyle){h.attr("style",g.attr("style"))}g.addClass("hasCustomSelect").on("update",function(){f(g,h);var k=parseInt(g.outerWidth(),10)-(parseInt(h.outerWidth(),10)-parseInt(h.width(),10));h.css({display:"inline-block"});var j=h.outerHeight();if(g.attr("disabled")){h.addClass(b("Disabled"))}else{h.removeClass(b("Disabled"))}i.css({width:k,display:"inline-block"});g.css({"-webkit-appearance":"menulist-button",width:h.outerWidth(),position:"absolute",opacity:0,height:j,fontSize:h.css("font-size")})}).on("change",function(){h.addClass(b("Changed"));f(g,h)}).on("keyup",function(j){if(!h.hasClass(b("Open"))){g.blur();g.focus()}else{if(j.which==13||j.which==27){f(g,h)}}}).on("mousedown",function(j){h.removeClass(b("Changed"))}).on("mouseup",function(j){if(!h.hasClass(b("Open"))){if(a("."+b("Open")).not(h).length>0&&typeof InstallTrigger!=="undefined"){g.focus()}else{h.addClass(b("Open"));j.stopPropagation();a(document).one("mouseup."+b("Open"),function(k){if(k.target!=g.get(0)&&a.inArray(k.target,g.find("*").get())<0){g.blur()}else{f(g,h)}})}}}).focus(function(){h.removeClass(b("Changed")).addClass(b("Focus"))}).blur(function(){h.removeClass(b("Focus")+" "+b("Open"))}).hover(function(){h.addClass(b("Hover"))},function(){h.removeClass(b("Hover"))}).trigger("update")})}})})(jQuery); \ No newline at end of file +!function(a){"function"==typeof define&&define.amd?define(["jquery"],a):"object"==typeof exports?a(require("jquery")):a(jQuery)}(function(a){"use strict";a.fn.extend({customSelect:function(b){if("undefined"==typeof document.body.style.maxHeight)return this;var c={customClass:"customSelect",mapClass:!0,mapStyle:!0},b=a.extend(c,b),d=b.customClass,e=function(b,c){var d=b.find(":selected"),e=c.children(":first"),g=d.html()||" ";e.html(g),d.attr("disabled")?c.addClass(f("DisabledOption")):c.removeClass(f("DisabledOption")),setTimeout(function(){c.removeClass(f("Open")),a(document).off("mouseup."+f("Open"))},60)},f=function(a){return d+a};return this.each(function(){var c=a(this),g=a("").addClass(f("Inner")),h=a("");c.after(h.append(g)),h.addClass(d),b.mapClass&&h.addClass(c.attr("class")),b.mapStyle&&h.attr("style",c.attr("style")),c.addClass("hasCustomSelect").on("update",function(){e(c,h);var a=parseInt(c.outerWidth(),10)-(parseInt(h.outerWidth(),10)-parseInt(h.width(),10));h.css({display:"inline-block"});var b=h.outerHeight();c.attr("disabled")?h.addClass(f("Disabled")):h.removeClass(f("Disabled")),g.css({width:a,display:"inline-block"}),c.css({"-webkit-appearance":"menulist-button",width:h.outerWidth(),position:"absolute",opacity:0,height:b,fontSize:h.css("font-size")})}).on("change",function(){h.addClass(f("Changed")),e(c,h)}).on("keyup",function(a){h.hasClass(f("Open"))?(13==a.which||27==a.which)&&e(c,h):(c.blur(),c.focus())}).on("mousedown",function(){h.removeClass(f("Changed"))}).on("mouseup",function(b){h.hasClass(f("Open"))||(a("."+f("Open")).not(h).length>0&&"undefined"!=typeof InstallTrigger?c.focus():(h.addClass(f("Open")),b.stopPropagation(),a(document).one("mouseup."+f("Open"),function(b){b.target!=c.get(0)&&a.inArray(b.target,c.find("*").get())<0?c.blur():e(c,h)})))}).focus(function(){h.removeClass(f("Changed")).addClass(f("Focus"))}).blur(function(){h.removeClass(f("Focus")+" "+f("Open"))}).hover(function(){h.addClass(f("Hover"))},function(){h.removeClass(f("Hover"))}).trigger("update")})}})}); \ No newline at end of file diff --git a/package.json b/package.json new file mode 100644 index 0000000..6c46701 --- /dev/null +++ b/package.json @@ -0,0 +1,6 @@ +{ + "devDependencies": { + "grunt": "~0.4.2", + "grunt-contrib-uglify": "~0.2.7" + } +}