first commit

2026-06-06 13:55:42 +02:00
commit a75adf3c39
2371 changed files with 511696 additions and 0 deletions
@@ -0,0 +1 @@
+node_modules/
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Mark French
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
@@ -0,0 +1,205 @@
+# Country Select JS
+A jQuery plugin for selecting a country, based on the excellent [International Telephone Input](https://github.com/Bluefieldscom/intl-tel-input.git) plugin. It adds a flag dropdown to any input, which lists all the countries in English and the predominant national language next to their flags.
+
+![alt tag](https://raw.github.com/mrmarkfrench/country-select-js/master/screenshot.png)
+
+
+## Table of Contents
+
+- [Demo](#demo)
+- [Features](#features)
+- [Getting Started](#getting-started)
+- [Options](#options)
+- [Public Methods](#public-methods)
+- [Static Methods](#static-methods)
+- [Troubleshooting](#troubleshooting)
+- [Contributing](#contributing)
+- [Attributions](#attributions)
+
+
+## Demo
+Try it for yourself using the included demo.html.
+
+
+## Features
+* Automatically select the country as the user types
+* Navigate the country dropdown by typing a country's name, or using up/down keys
+* Selecting a country from the dropdown will update the country name in the input
+* Dropdown appears above or below the input depending on available space/scroll position
+* Lots of initialisation options for customisation, as well as public methods for interaction
+* Can optionally update a related field with the two-letter ISO country code on selection
+
+## Getting Started
+1. Download the [latest version](https://github.com/mrmarkfrench/country-select-js/archive/master.zip)
+
+2. Link the stylesheet (note that this references the image flags.png)
+  ```html
+  <link rel="stylesheet" href="build/css/countrySelect.css">
+  ```
+
+3. Add the plugin script and initialise it on your input element
+  ```html
+  <input type="text" id="country">
+  
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  <script src="build/js/countrySelect.min.js"></script>
+  <script>
+    $("#country").countrySelect();
+  </script>
+  ```
+  
+4. Optional: add an extra input field (with type hidden or text) named the same as your selector input appended with "_code". This will automatically be updated with the [ISO 3166-1 alpha-2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) code for the selected country.
+  ```html
+  <input type="text" id="country" />
+  <input type="hidden" id="country_code" />
+  
+  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
+  <script src="build/js/countrySelect.min.js"></script>
+  <script>
+    $("#country").countrySelect();
+  </script>
+  ```
+
+
+## Options
+Pass an (optional) object as a parameter to the `countrySelect` method when initializing the selector.
+  ```
+  $("#country").countrySelect({
+    defaultCountry: "jp",
+    onlyCountries: ['us', 'gb', 'ch', 'ca', 'do', 'jp'],
+    preferredCountries: ['ca', 'gb', 'us'],
+    responsiveDropdown: true
+  });
+  ```
+
+Note: any options that take country codes should be lower case [ISO 3166-1 alpha-2](http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) codes  
+
+**defaultCountry**  
+Type: `String` Default: `""`  
+Set the default country by it's country code. Otherwise it will just be the first country in the list.
+
+**onlyCountries**  
+Type: `Array` Default: `undefined`  
+Display only the countries you specify. Takes an array of country codes.
+
+**excludeCountries**  
+Type: `Array` Default: `undefined`  
+Display only the countries not specified. Takes an array of country codes.
+
+**preferredCountries**  
+Type: `Array` Default: `["us", "gb"]`  
+Specify the countries to appear at the top of the list.
+
+**responsiveDropdown**  
+Type: `Boolean` Default: `false`  
+Set the dropdown's width to be the same as the input. This is automatically enabled for small screens.
+
+**localizedCountries**  
+Type: `Object` Default: `{}`  
+Allows to translate the countries by its given iso code e.g.:
+ ```js
+{ 'de': 'Deutschland' }
+```
+
+## Public Methods
+**destroy**  
+Remove the plugin from the input, and unbind any event listeners.  
+```js
+$("#country").countrySelect("destroy");
+```
+
+**getSelectedCountryData**  
+Get the country data for the currently selected flag.  
+```js
+var countryData = $("#country").countrySelect("getSelectedCountryData");
+```
+Returns something like this:
+```js
+{
+  name: "Afghanistan (‫افغانستان‬‎)",
+  iso2: "af",
+}
+```
+
+**selectCountry**  
+Change the country selection (e.g. when the user is entering their address).  
+```js
+$("#country").countrySelect("selectCountry", "gb");
+```
+
+**setCountry**  
+Insert a country name, and update the selected flag accordingly.  
+```js
+$("#country").countrySelect("setCountry", "United States");
+```
+
+
+## Static Methods
+**getCountryData**  
+Get all of the plugin's country data.  
+```js
+var countryData = $.fn.countrySelect.getCountryData();
+```
+Returns an array of country objects:
+```js
+[{
+  name: "Afghanistan (‫افغانستان‬‎)",
+  iso2: "af",
+}, ...]
+```
+
+**setCountryData**  
+Set all of the plugin's country data.  
+```js
+$.fn.countrySelect.setCountryData(countryData);
+```
+
+
+## Troubleshooting
+**Image path**  
+Depending on your project setup, you may need to override the path to flags.png in your CSS.  
+```css
+.country-select .flag {background-image: url("path/to/flags.png");}
+```
+
+**Full width input**  
+If you want your input to be full-width, you need to set the container to be the same i.e.
+```css
+.country-select {width: 100%;}
+```
+
+**Input margin**  
+For the sake of alignment, the default CSS forces the input's vertical margin to `0px`. If you want vertical margin, you should add it to the container (with class `country-select`).
+
+**Displaying error messages**  
+If your error handling code inserts an error message before the `<input>` it will break the layout. Instead you must insert it before the container (with class `country-select`).
+
+**Dropdown position**  
+The dropdown should automatically appear above/below the input depending on the available space. For this to work properly, you must only initialise the plugin after the `<input>` has been added to the DOM.
+
+## Contributing
+Contributions and improvements to the library are welcome! For instructions on contributing to a project on Github, see this guide: [Fork A Repo](https://help.github.com/articles/fork-a-repo).
+
+If you are treating the library as a Node package, the following will be relevant to you.
+> To start a local devserver with source code live reload install the dependencies with:
+>
+> ```
+> $ npm install
+> ```
+>
+> And run:
+>
+> ```
+> $ gulp
+> ```
+>
+> To transpile the scss source, minify and prepare your changes at src to build run:
+>
+>```
+> $ gulp build
+> ```
+
+## Attributions
+* This library is built based on the excellent [International Telephone Input](https://github.com/Bluefieldscom/intl-tel-input.git), the authors of which deserve any credit you might like to give (though none of the blame)
+* Flag images and CSS from [Region-Flags](https://github.com/behdad/region-flags)
+* Original country data from mledoze's [World countries in JSON, CSV and XML](https://github.com/mledoze/countries)
@@ -0,0 +1,34 @@
+{
+	"name": "country-select-js",
+	"version": "2.1.1",
+	"description": "A jQuery plugin for selecting a country",
+	"main": [
+		"build/js/countrySelect.js",
+		"build/css/countrySelect.css"
+	],
+	"dependencies": {
+		"jquery": ">=1.9.1"
+	},
+	"moduleType": [
+		"amd",
+		"globals",
+		"node"
+	],
+	"keywords": [
+		"country",
+		"international",
+		"jQuery"
+	],
+	"authors": [
+		"Mark French"
+	],
+	"license": "MIT",
+	"ignore": [
+		"**/.*",
+		"demo.html"
+	],
+	"repository": {
+		"type": "git",
+		"url": "git://github.com/mrmarkfrench/country-select-js.git"
+	}
+}
@@ -0,0 +1,66 @@
+* {
+	box-sizing: border-box;
+	-moz-box-sizing: border-box; }
+
+body {
+	margin: 20px;
+	font-size: 14px;
+	font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+	color: #555; }
+
+.hide {
+	display: none; }
+
+pre {
+	margin: 0 !important;
+	display: inline-block; }
+
+.form-item {
+	margin: 1em;
+}
+
+.token.operator,
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string,
+.token.variable {
+	background: none; }
+
+input, button {
+	height: 35px;
+	margin: 0;
+	padding: 6px 12px;
+	border-radius: 2px;
+	font-family: inherit;
+	font-size: 100%;
+	color: inherit; }
+	input[disabled], button[disabled] {
+		background-color: #eee; }
+
+input, select {
+	border: 1px solid #CCC;
+	width: 250px; }
+
+::-webkit-input-placeholder {
+	color: #BBB; }
+
+::-moz-placeholder {
+	/* Firefox 19+ */
+	color: #BBB;
+	opacity: 1; }
+
+:-ms-input-placeholder {
+	color: #BBB; }
+
+button {
+	color: #FFF;
+	background-color: #428BCA;
+	border: 1px solid #357EBD; }
+	button:hover {
+		background-color: #3276B1;
+		border-color: #285E8E;
+		cursor: pointer; }
+
+#result {
+	margin-bottom: 100px; }
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Country Select JS</title>
+		<link rel="stylesheet" href="build/css/countrySelect.css">
+		<link rel="stylesheet" href="build/css/demo.css">
+	</head>
+	<body>
+		<h1>Country Select JS</h1>
+		<form>
+			<div class="form-item">
+				<input id="country_selector" type="text">
+				<label for="country_selector" style="display:none;">Select a country here...</label>
+			</div>
+			<div class="form-item" style="display:none;">
+				<input type="text" id="country_selector_code" name="country_selector_code" data-countrycodeinput="1" readonly="readonly" placeholder="Selected country code will appear here" />
+				<label for="country_selector_code">...and the selected country code will be updated here</label>
+			</div>
+			<button type="submit" style="display:none;">Submit</button>
+		</form>
+
+		<!-- 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.js"></script>
+		<script>
+			$("#country_selector").countrySelect({
+				// defaultCountry: "jp",
+				// onlyCountries: ['us', 'gb', 'ch', 'ca', 'do'],
+				// responsiveDropdown: true,
+				preferredCountries: ['ca', 'gb', 'us']
+			});
+		</script>
+	</body>
+</html>
@@ -0,0 +1,72 @@
+var gulp = require('gulp');
+var sass = require('gulp-sass');
+var prefix = require('gulp-autoprefixer');
+var notify = require('gulp-notify');
+var cleanCSS = require('gulp-clean-css');
+var minifyJS = require('gulp-minify');
+var rename = require('gulp-rename');
+var webserver = require('gulp-webserver');
+var runSequence = require('run-sequence');
+
+gulp.task('scss', function () {
+	return gulp.src('./src/scss/countrySelect.scss')
+		.pipe(sass({ errLogToConsole: true  }))
+		.pipe(prefix())
+		.pipe(cleanCSS({compatibility: 'ie8', format: {
+			breaks: {
+				afterAtRule: true,
+				afterBlockBegins: true,
+				afterBlockEnds: true,
+				afterComment: true,
+				afterProperty: true,
+				afterRuleBegins: true,
+				afterRuleEnds: true,
+				beforeBlockEnds: true,
+				betweenSelectors: true
+			},
+			indentBy: 1,
+			indentWith: 'tab' }, level: 0}))
+		.pipe(gulp.dest('./build/css'))
+		.pipe(notify("styles compiled"));
+});
+
+gulp.task('js', function () {
+	return gulp.src('./src/js/countrySelect.js')
+		.pipe(gulp.dest('./build/js'))
+		.pipe(notify("javascript updated"));
+});
+
+gulp.task('handle-sources', ['scss', 'js']);
+
+gulp.task('minify-scss', function () {
+	return gulp.src('./build/css/countrySelect.css')
+		.pipe(cleanCSS({level: 2, inline: ['all']}))
+		.pipe(rename({extname: '.min.css'}))
+		.pipe(gulp.dest('./build/css'))
+		.pipe(notify("styles minified"));
+});
+
+gulp.task('minify-js', function () {
+	return gulp.src('./build/js/countrySelect.js')
+		.pipe(minifyJS({ext:{min:'.min.js'}}))
+		.pipe(gulp.dest('./build/js'))
+		.pipe(notify("javascript minified"));
+});
+
+gulp.task('minify-sources', ['minify-scss', 'minify-js']);
+
+gulp.task('webserver', function() {
+	gulp.src('.')
+		.pipe(webserver({
+			livereload: true,
+			directoryListing: true,
+			open: './demo.html'
+		}));
+	gulp.watch('./src/scss/**/*.scss', ['scss']);
+	gulp.watch('./src/js/**/*.js', ['js']);
+});
+
+gulp.task('default', ['handle-sources', 'webserver']);
+gulp.task('build', function() {
+	runSequence('handle-sources', 'minify-sources');
+});
@@ -0,0 +1 @@
+module.exports = require('./build/js/countrySelect.js');
@@ -0,0 +1,35 @@
+{
+	"name": "country-select-js",
+	"version": "2.1.1",
+	"description": "A jQuery plugin for selecting a country",
+	"main": "build/js/countrySelect.js",
+	"repository": {
+		"type": "git",
+		"url": "https://mrmarkfrench@github.com/mrmarkfrench/country-select-js.git"
+	},
+	"keywords": [
+		"country",
+		"international",
+		"jQuery"
+	],
+	"scripts": {
+		"build": "gulp build"
+	},
+	"author": "Mark French",
+	"license": "MIT",
+	"bugs": {
+		"url": "https://github.com/mrmarkfrench/country-select-js/issues"
+	},
+	"homepage": "https://github.com/mrmarkfrench/country-select-js",
+	"devDependencies": {
+		"gulp": "^3.9.1",
+		"gulp-autoprefixer": "^4.0.0",
+		"gulp-clean-css": "^3.3.1",
+		"gulp-minify": "^1.0.0",
+		"gulp-notify": "^3.0.0",
+		"gulp-rename": "^1.2.2",
+		"gulp-sass": "^3.1.0",
+		"gulp-webserver": "^0.9.1",
+		"run-sequence": "^2.2.1"
+	}
+}
@@ -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}");
+		}
+	}
+}
@@ -0,0 +1,7 @@
+@function retina-size($value) {
+	@return floor($value / 2);
+}
+
+@mixin retina-bg-size($spriteWidth, $spriteHeight) {
+	background-size: floor($spriteWidth / 2) floor($spriteHeight / 2);
+}
@@ -0,0 +1,30 @@
+// rgba is needed for the selected flag hover state to blend in with
+// the border-highlighting some browsers give the input on focus
+$hover-color: rgba(0, 0, 0, 0.05) !default;
+$grey-text: #999 !default;
+$grey-border: #ccc !default;
+
+$flag-height: 15px !default;
+$flag-width: 20px !default;
+$flag-padding: 8px !default;
+// this border width is used for the popup and divider, but it is also
+// assumed to be the border width of the input, which we do not control
+$border-width: 1px !default;
+
+$arrow-height: 4px !default;
+$arrow-width: 6px !default;
+$triangle-border: 3px !default;
+$arrow-padding: 6px !default;
+$arrow-color: #555 !default;
+
+$input-padding: 6px !default;
+$selected-flag-width: $flag-width + (2 * $flag-padding) !default;
+$selected-flag-arrow-width: $flag-width + $flag-padding + $arrow-width + (2 * $arrow-padding) !default;
+
+// image related variables
+$flags-image-path: "../../build/img/" !default;
+$flags-image-name: "flags" !default;
+$flags-image-extension: "png" !default;
+
+// enough space for them to click off to close
+$mobile-popup-margin: 30px;
@@ -0,0 +1,4 @@
+@import 'variables';
+@import 'utils';
+@import 'selector';
+@import 'sprites';
				`@@ -0,0 +1 @@`
				`module.exports = require('./build/js/countrySelect.js');`