Merge pull request #44 from humrochagf/master

Changing flags to match intl-tel-input

build/js/countrySelect.js

@@ -131,7 +131,7 @@
 			// CSS triangle
 			$("<div>", {
 				"class": "arrow"
-			}).appendTo(this.selectedFlagInner);
+			}).appendTo(selectedFlag);
 			// country list contains: preferred countries, then divider, then all countries
 			this.countryList = $("<ul>", {
 				"class": "country-list v-hide"
@@ -291,7 +291,7 @@
 			// bind all the dropdown-related listeners: mouseover, click, click-off, keydown
 			this._bindDropdownListeners();
 			// update the arrow
-			this.selectedFlagInner.children(".arrow").addClass("up");
+			this.selectedFlagInner.parent().children(".arrow").addClass("up");
 		},
 		// decide where to position dropdown (depends on position within viewport, and scroll)
 		_setDropdownPosition: function() {
@@ -465,7 +465,7 @@
 		_closeDropdown: function() {
 			this.countryList.addClass("hide");
 			// update the arrow
-			this.selectedFlagInner.children(".arrow").removeClass("up");
+			this.selectedFlagInner.parent().children(".arrow").removeClass("up");
 			// unbind event listeners
 			$(document).off("keydown" + this.ns);
 			$("html").off("click" + this.ns);

demo.html

@@ -22,7 +22,7 @@ <h1>Country Select JS</h1>
 
 		<!-- Load jQuery from CDN so can run demo immediately -->
 		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
-		<script src="build/js/countrySelect.min.js"></script>
+		<script src="build/js/countrySelect.js"></script>
 		<script>
 			$("#country_selector").countrySelect({
 				//defaultCountry: "jp",

package.json

@@ -19,8 +19,6 @@
 	},
 	"homepage": "https://github.com/mrmarkfrench/country-select-js",
 	"devDependencies": {
-		"browser-sync": "^2.18.11",
-		"ecstatic": "^2.1.0",
 		"gulp": "^3.9.1",
 		"gulp-autoprefixer": "^4.0.0",
 		"gulp-clean-css": "^3.3.1",

src/js/countrySelect.js

@@ -131,7 +131,7 @@
 			// CSS triangle
 			$("<div>", {
 				"class": "arrow"
-			}).appendTo(this.selectedFlagInner);
+			}).appendTo(selectedFlag);
 			// country list contains: preferred countries, then divider, then all countries
 			this.countryList = $("<ul>", {
 				"class": "country-list v-hide"
@@ -293,7 +293,7 @@
 			// bind all the dropdown-related listeners: mouseover, click, click-off, keydown
 			this._bindDropdownListeners();
 			// update the arrow
-			this.selectedFlagInner.children(".arrow").addClass("up");
+			this.selectedFlagInner.parent().children(".arrow").addClass("up");
 		},
 		// decide where to position dropdown (depends on position within viewport, and scroll)
 		_setDropdownPosition: function() {
@@ -467,7 +467,7 @@
 		_closeDropdown: function() {
 			this.countryList.addClass("hide");
 			// update the arrow
-			this.selectedFlagInner.children(".arrow").removeClass("up");
+			this.selectedFlagInner.parent().children(".arrow").removeClass("up");
 			// unbind event listeners
 			$(document).off("keydown" + this.ns);
 			$("html").off("click" + this.ns);

src/scss/_selector.scss

@@ -0,0 +1,214 @@
+.country-select {
+	// need position on the container so the selected flag can be
+	// absolutely positioned over the input
+	position: relative;
+	// keep the input's default inline properties
+	display: inline-block;
+
+	// paul irish says this is ok
+	// http://www.paulirish.com/2012/box-sizing-border-box-ftw/
+	* {
+		-moz-box-sizing: border-box;
+		-webkit-box-sizing: border-box;
+		box-sizing: border-box;
+	}
+
+	.hide {
+		display: none;
+	}
+
+	// need this during init, to get the height of the dropdown
+	.v-hide {
+		visibility: hidden;
+	}
+
+	// specify types to increase specificity e.g. to override bootstrap v2.3
+	input, input[type=text] {
+		position: relative;
+
+		// input is bottom level, below selected flag and dropdown
+		z-index: 0;
+
+		// any vertical margin the user has on their inputs would no longer work as expected
+		// because we wrap everything in a container div. i justify the use of !important
+		// here because i don't think the user should ever have vertical margin here - when
+		// the input is wrapped in a container, vertical margin messes up alignment with other
+		// inline elements (e.g. an adjacent button) in firefox, and probably other browsers.
+		margin-top: 0 !important;
+		margin-bottom: 0 !important;
+
+		// make space for the selected flag
+		// Note: no !important here, as the user may want to tweak this so that the
+		// perceived input padding matches their existing styles
+		padding-right: $selected-flag-width;
+
+		// any margin-right here will push the selected-flag away
+		margin-right: 0;
+	}
+
+	.flag-dropdown {
+		// positioned over the top of the input
+		position: absolute;
+
+		// full height
+		top: 0;
+		bottom: 0;
+		right: 0;
+
+		// prevent the highlighted child from overlapping the input border
+		padding: $border-width;
+	}
+
+	.selected-flag {
+		// render above the input
+		z-index: 1;
+		position: relative;
+		width: $selected-flag-width;
+
+		// this must be full-height both for the hover highlight, and to push down the
+		// dropdown so it appears below the input
+		height: 100%;
+		padding: 0 0 0 $flag-padding;
+
+		// vertically center the flag
+		.flag {
+			position: absolute;
+			top: 0;
+			bottom: 0;
+			margin: auto;
+		}
+
+		.arrow {
+			position: absolute;
+			// split the difference between the flag and the arrow height to verically center
+			top: 50%;
+			margin-top: -1 * ($arrow-height / 2);
+			right: $arrow-padding;
+
+			// css triangle
+			width: 0;
+			height: 0;
+			border-left: $triangle-border solid transparent;
+			border-right: $triangle-border solid transparent;
+			border-top: $arrow-height solid $arrow-color;
+
+			&.up {
+				border-top: none;
+				border-bottom: $arrow-height solid $arrow-color;
+			}
+		}
+	}
+
+	// the dropdown
+	.country-list {
+		position: absolute;
+		// popup so render above everything else
+		z-index: 2;
+
+		// override default list styles
+		list-style: none;
+		// in case any container has text-align:center
+		text-align: left;
+
+		// dropdown flags need consistent width, so wrap in a container
+		.flag {
+			display: inline-block;
+			width: $flag-width;
+		}
+
+		padding: 0;
+		// margin-left to compensate for the padding on the parent
+		margin: 0 0 0 (-$border-width);
+
+		box-shadow: 1px 1px 4px rgba(0,0,0,0.2);
+		background-color: white;
+		border: $border-width solid $grey-border;
+
+		// don't let the contents wrap AKA the container will be as wide as the contents
+		white-space: nowrap;
+		// except on small screens, where we force the dropdown width to match the input
+		@media (max-width: 500px) {
+			white-space: normal;
+		}
+
+		max-height: 200px;
+		overflow-y: scroll;
+
+		// the divider below the preferred countries
+		.divider {
+			padding-bottom: 5px;
+			margin-bottom: 5px;
+			border-bottom: $border-width solid $grey-border;
+		}
+
+		// each country item in dropdown (we must have separate class to differentiate from dividers)
+		.country {
+			// Note: decided not to use line-height here for alignment because it causes issues e.g. large font-sizes will overlap, and also looks bad if one country overflows onto 2 lines
+			padding: 5px 10px;
+		}
+
+		.country.highlight {
+			background-color: $hover-color;
+		}
+
+		.flag, .country-name {
+			vertical-align: middle;
+		}
+
+		// spacing between country flag and name
+		.flag {
+			margin-right: 6px;
+		}
+	}
+
+	&.inside {
+		input, input[type=text] {
+			padding-right: $input-padding;
+			padding-left: $selected-flag-arrow-width + $input-padding;
+			margin-left: 0;
+		}
+
+		.flag-dropdown {
+			right: auto;
+			left: 0;
+		}
+
+		.selected-flag {
+			width: $selected-flag-arrow-width;
+		}
+	}
+
+	&.inside {
+		// hover state - show flag is clickable
+		.flag-dropdown:hover {
+			cursor: pointer;
+
+			.selected-flag {
+				background-color: $hover-color;
+			}
+		}
+		// disable hover state when input is disabled
+		input[disabled] + .flag-dropdown:hover, input[readonly] + .flag-dropdown:hover {
+			cursor: default;
+
+			.selected-flag {
+				background-color: transparent;
+			}
+		}
+	}
+
+	.flag {
+		width: $flag-width;
+		height: $flag-height;
+		box-shadow: 0px 0px 1px 0px #888;
+		background-image: url("#{$flags-image-path}#{$flags-image-name}.#{$flags-image-extension}");
+		background-repeat: no-repeat;
+		// empty state
+		background-color: #dbdbdb;
+		background-position: $flag-width 0;
+
+		@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2 / 1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 192dpi), only screen and (min-resolution: 2dppx) {
+			background-image: url("#{$flags-image-path}#{$flags-image-name}@2x.#{$flags-image-extension}");
+		}
+	}
+}