Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[BUG] Added a click event to the generated button… #36

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

[BUG] Added a click event to the generated button… #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
16281ee
[BUG] Added a click event to the generated button and a toggle() on t…
sjoller Oct 3, 2018
1839831
[TASK] Moved changes to dist and minified the (changed) source.
sjoller Oct 4, 2018
bfc4ba7
[FEATURE] Added an optional onDomReady() callback, as well as mrhewit…
sjoller Nov 19, 2018
950eeba
[ADD] Added option to make a searchable (by external plugin) version …
sjoller Dec 12, 2018
5b6c39d
[ADD] Added option to turn off autocomplete/fill on the search field.
sjoller Apr 26, 2019
499b715
[REFACTOR] Refactored rendered html to use BS flexbox and colors, and…
sjoller Apr 30, 2019
8833c3e
[TASK] Updated the readme file.
sjoller Apr 30, 2019
28d477f
[TASK] Minor changes to the readme file.
sjoller Apr 30, 2019
a9d6ad4
[TASK] Fixed demo page to use more up-to-date versions of Bootstrap a…
sjoller Apr 30, 2019
48c14db
[TASK] Changed search input to not use currently selected value, for …
sjoller May 6, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 85 additions & 15 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,9 @@
# Flagstrap

A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
A lightwieght jQuery plugin for creating Bootstrap 4 compatible country select boxes with flags.

![Flagstrap Demo](http://blazeworx.com/flagstrap.gif)

### Demo
http://blazeworx.github.io/flagstrap

### Usage

#### Basic
Expand Down Expand Up @@ -76,7 +73,6 @@ This example will create a Flagstrap Dropdown giving the input field the name of
inputName: 'country',
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
scrollable: false,
scrollableHeight: "350px",
onSelect: function(value, element) {
Expand All @@ -90,6 +86,43 @@ This example will create a Flagstrap Dropdown giving the input field the name of
</script>
```

##### Setting value of widget after creation
You cannot set the value of the widget using the val() method on the underlying select, as this does not notify the plugin of the change.

Passing a string value to the plugin instead of an object will change value of the underlying select and update the UI display. The string passed should be the country code of the country to select.

The example below will take the flagstrap widget created in the example above and change its selected value to the United States.

```html
<script>
$('#flagstrap3').flagStrap('US');
</script>
```

##### Making it searchable

You can probably use any search plugin you like, but here's how you could do it, using https://github.com/stidges/jquery-searchable.

```html
<script>
$('#flagstrap4').flagStrap({
searchable: true,
searchPlaceholder: 'Type to search for countries...',
searchClass: 'text-light bg-dark',
onDomReady: function() {
$('#flagstrap4 ul').searchable({
selector: 'li',
childSelector: 'a',
searchField: '#flagstrap4 input:first',
searchType: 'default'
})
}
});
</script>
```
Note: The rendered input element already has the ```form-control``` class added.


### Options
<table class="table table-bordered table-striped">
<thead>
Expand Down Expand Up @@ -125,12 +158,6 @@ This example will create a Flagstrap Dropdown giving the input field the name of
<td>"btn-default"</td>
<td>The bootstrap button type `class` for this drop down</td>
</tr>
<tr>
<td>labelMargin</td>
<td>string</td>
<td>"20px"</td>
<td>The `margin` between `flag` and `text label`</td>
</tr>
<tr>
<td>scrollable</td>
<td>boolean</td>
Expand All @@ -144,18 +171,60 @@ This example will create a Flagstrap Dropdown giving the input field the name of
<td>`max-height` for the scrollable drop down</td>
</tr>
<tr>
<td>countries (optional)</td>
<td>searchable</td>
<td>boolean</td>
<td>false</td>
<td>Embed an search input element into the button. This element has no search functionality out of the box - you'd have to use an actual search plugin like https://github.com/stidges/jquery-searchable</td>
</tr>
<tr>
<td>searchPlaceholder</td>
<td>string</td>
<td>"Search country"</td>
<td>Placeholder text in the search input element.</td>
</tr>
<tr>
<td>searchAutoComplete</td>
<td>string</td>
<td>Randomly generated string</td>
<td>Turns OFF autocomplete by setting the search input element autocomplete property to some random string. This is currently the best option for actually disabling autocomplete on an input element - browser support is sketchy at best.</td>
</tr>
<tr>
<td>searchClass</td>
<td>string</td>
<td>"FancySearchElement"</td>
<td>Add one or more classes to the search input element.</td>
</tr>
<tr>
<td>countries</td>
<td>object</td>
<td>(all)</td>
<td>Only show specific countries<br>Example:<br><br>{"GB": "United Kingdom", "US": "United States"}<br><br>will only show the USA and UK.</td>
</tr>
<tr>
<td>onSelect (optional)</td>
<td>selectedCountry</td>
<td>string</td>
<td></td>
<td>Set (single) selected country. "GB" or "US" ...</td>
</tr>
<tr>
<td>onSelect</td>
<td>function</td>
<td>null</td>
<td>This callback gets called each time the select is changed. It receives two parameters, the new value, and the select element.</td>
</tr>
<tr>
</tr>
<tr>
<td>onDomReady</td>
<td>function</td>
<td>null</td>
<td>This callback gets called as the last thing, before the plugin returns.</td>
</tr>
<tr>
<td>onPostSelect</td>
<td>function</td>
<td>null</td>
<td>This callback gets called as the last thing, after an item in the list is clicked.</td>
</tr>
<tr>
<td>placeholder</td>
<td>bool|object</td>
<td>{value: "", text: "Please select a country"}</td>
Expand All @@ -170,3 +239,4 @@ This project was created by Alex Carter. I owe many thanks to the following peop

* [Matthew Machuga](https://github.com/machuga)
* [TJ Miller](https://github.com/sixlive)
* [Mads Jensen](https://github.com/sjoller)
136 changes: 99 additions & 37 deletions demo/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@
<title>Flagstrap Demo</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/css/flags.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
<style>
/* Tomorrow Theme */
/* Original theme - https://github.com/chriskempson/tomorrow-theme */
Expand Down Expand Up @@ -154,15 +154,16 @@
</head>
<body onload="prettyPrint()">

<a href="https://github.com/blazeworx/flagstrap">
<img style="position: absolute; top: 0; left: 0; border: 0;"
src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67"
alt="Fork me on GitHub"
data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png">
<a href="https://github.com/sjoller/flagstrap">
<img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/567c3a48d796e2fc06ea80409cc9dd82bf714434/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_darkblue_121621.png">
</a>

<div class="container" style="margin-top:50px;">
<h1>FlagStrap v1.1</h1><a href="https://github.com/blazeworx/flagstrap">View on Github</a>
<span class="h1">FlagStrap v1.2</span><br>
<a class="h4" href="https://github.com/sjoller/flagstrap">View on Github</a> <small>(Forked from <a href="https://github.com/blazeworx/flagstrap">blazeworx</a>)</small>
<p class="mt-3">
The plugin now works with Bootstrap 4.x and has an option to add search functionality (See <a href="https://github.com/sjoller/flagstrap#making-it-searchable">README.md</a> or <a href="#search-example">further down</a>).
</p>
<hr>

<div class="row">
Expand Down Expand Up @@ -197,8 +198,8 @@ <h3>Example
<pre class="prettyprint lang-js">
$('#origin').flagStrap({
placeholder: {
value: "",
text: "Country of origin"
value: '',
text: 'Country of origin'
}
});
</pre>
Expand All @@ -225,15 +226,14 @@ <h3>Example
<pre class="prettyprint lang-js">
$('#options').flagStrap({
countries: {
"AU": "Australia",
"GB": "United Kingdom",
"US": "United States"
'AU': 'Australia',
'GB': 'United Kingdom',
'US': 'United States'
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
buttonSize: 'btn-sm',
buttonType: 'btn-info',
scrollable: false,
scrollableHeight: "350px"
scrollableHeight: '350px'
});
</pre>
</div>
Expand Down Expand Up @@ -262,11 +262,10 @@ <h3>Example
</h3>
<pre class="prettyprint lang-js">
$('#advanced').flagStrap({
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
buttonSize: 'btn-lg',
buttonType: 'btn-primary',
scrollable: false,
scrollableHeight: "350px",
scrollableHeight: '350px',
onSelect: function (value, element) {
alert(value);
console.log(element);
Expand Down Expand Up @@ -294,47 +293,110 @@ <h3>Result</h3>
</form>
</div>
</div>
<hr>

<a id="search-example"></a>
<div class="row">
<div class="col-xs-12 col-md-6">
<h3>Example
<small>Searchable</small>
</h3>
<pre class="prettyprint lang-js">
$('#searchable').flagStrap({
buttonSize: 'btn-lg',
buttonType: 'btn-success',
searchable: true,
searchPlaceholder: 'Type to search for countries...',
placeholder: false,
onDomReady: function() {
$('#searchable ul').searchable({
selector: 'li',
childSelector: 'a',
searchField: '#searchable input:first',
searchType: 'default'
})
},
onPostSelect: function() {
$('#searchable ul li').attr('style', '');
}
});
</pre>
</div>
<div class="col-xs-12 col-md-6">
<h3>Result</h3>

<form>
<div class="form-row">
<div class="form-group col-12">
<label>Search Country</label>
<div id="searchable"></div>
</div>
</div>
</form>
</div>
</div>

</div>

<script src="https://code.jquery.com/jquery-1.11.2.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="../dist/js/jquery.flagstrap.js"></script>
<script src="//code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="../dist/js/jquery.flagstrap.min.js"></script>
<script src="//rawgithub.com/stidges/jquery-searchable/master/dist/jquery.searchable-1.0.0.min.js"></script>

<script>
$('#basic').flagStrap();

$('#origin').flagStrap({
placeholder: {
value: "",
text: "Country of origin"
value: '',
text: 'Country of origin'
}
});

$('#options').flagStrap({
countries: {
"AU": "Australia",
"GB": "United Kingdom",
"US": "United States"
'AU': 'Australia',
'GB': 'United Kingdom',
'US': 'United States'
},
buttonSize: "btn-sm",
buttonType: "btn-info",
labelMargin: "10px",
buttonSize: 'btn-sm',
buttonType: 'btn-info',
labelMargin: '10px',
scrollable: false,
scrollableHeight: "350px"
scrollableHeight: '350px'
});

$('#advanced').flagStrap({
buttonSize: "btn-lg",
buttonType: "btn-primary",
labelMargin: "20px",
buttonSize: 'btn-lg',
buttonType: 'btn-primary',
labelMargin: '20px',
scrollable: false,
scrollableHeight: "350px",
scrollableHeight: '350px',
onSelect: function (value, element) {
alert(value);
console.log(element);
}
});

$('#searchable').flagStrap({
buttonSize: 'btn-lg',
buttonType: 'btn-success',
searchable: true,
searchPlaceholder: 'Type to search for countries...',
placeholder: false,
onDomReady: function() {
$('#searchable ul').searchable({
selector: 'li',
childSelector: 'a',
searchField: '#searchable input:first',
searchType: 'default'
})
},
onPostSelect: function() {
$('#searchable ul li').attr('style', '');
}
});

</script>

</body>
Loading