flagstrap 0.0.2

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: 5471201f39e30efa466c6022f5e8ba7386fe85bc
+  data.tar.gz: 280b5dcd5e60cc50a19938c32665441d201cf9f2
+SHA512:
+  metadata.gz: 0b43cd8a028431b7a771bee0800aa48ec65b06878757d35a4db4e1b44123856fc83854eff25558c632457c85bbe82fc20c445ea345c25f65b067217a680663a0
+  data.tar.gz: fd17173e8ebc9a067ad810b5ece86f7c7077baf4858fa8075336e950741f551f8adc7bb8a3dc4ee83032392ba8db6b8c3e4852c2bbf1310a836b3b647942ff27

data/.gitignore

@@ -0,0 +1,4 @@
+.idea
+.DS_Store
+node_modules
+pkg

data/.jshintrc

@@ -0,0 +1,13 @@
+{
+  "boss": true,
+  "curly": true,
+  "eqeqeq": true,
+  "eqnull": true,
+  "expr": true,
+  "immed": true,
+  "noarg": true,
+  "onevar": true,
+  "quotmark": "double",
+  "unused": true,
+  "node": true
+}

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in flagstrap.gemspec
+gemspec

data/Gruntfile.js

@@ -0,0 +1,67 @@
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+
+        // Import package manifest
+        pkg: grunt.file.readJSON("flagstrap.jquery.json"),
+
+        // Banner definitions
+        meta: {
+            banner: "/*\n" +
+            " *  <%= pkg.title || pkg.name %> - v<%= pkg.version %>\n" +
+            " *  <%= pkg.description %>\n" +
+            " *  <%= pkg.homepage %>\n" +
+            " *\n" +
+            " *  Made by <%= pkg.author.name %>\n" +
+            " *  Under <%= pkg.licenses[0].type %> License\n" +
+            " */\n"
+        },
+
+        // Concat definitions
+        concat: {
+            dist: {
+                src: ["src/jquery.flagstrap.js"],
+                dest: "dist/js/jquery.flagstrap.js"
+            },
+            options: {
+                banner: "<%= meta.banner %>"
+            }
+        },
+
+        // Lint definitions
+        jshint: {
+            files: ["src/jquery.boilerplate.js"],
+            options: {
+                jshintrc: ".jshintrc"
+            }
+        },
+
+        // Minify definitions
+        uglify: {
+            my_target: {
+                src: ["dist/js/jquery.flagstrap.js"],
+                dest: "dist/js/jquery.flagstrap.min.js"
+            },
+            options: {
+                banner: "<%= meta.banner %>"
+            }
+        },
+
+        // watch for changes to source
+        // Better than calling grunt a million times
+        // (call 'grunt watch')
+        watch: {
+            files: ['src/*'],
+            tasks: ['default']
+        }
+
+    });
+
+    grunt.loadNpmTasks("grunt-contrib-concat");
+    grunt.loadNpmTasks("grunt-contrib-jshint");
+    grunt.loadNpmTasks("grunt-contrib-uglify");
+    grunt.loadNpmTasks("grunt-contrib-watch");
+
+    grunt.registerTask("default", ["jshint", "concat", "uglify"]);
+
+};

data/LICENSE.md

@@ -0,0 +1,20 @@
+##The MIT License (MIT)
+####Copyright © 2015 Alex Carter <alex@blazeworx.com>
+
+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.**

data/README.md

@@ -0,0 +1,172 @@
+# Flagstrap
+
+A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
+
+![Flagstrap Demo](http://blazeworx.com/flagstrap.gif)
+
+###Demo
+http://blazeworx.github.io/flagstrap
+
+###Usage
+
+####Basic
+
+```html
+<form class="form-horizontal">
+	<div class="form-group">
+        <label>Select Country</label><br>
+        <div class="flagstrap" data-input-name="country"></div>
+    </div>
+</form>
+```
+
+```html
+<script>
+    $('.flagstrap').flagStrap();
+</script>
+```
+
+####Options
+
+#####Using Data Attributes
+This example will create a Flagstrap Dropdown giving the input field the name of `country` with all countries available and `Germany` pre selected and in a `scrollable` dropdown with `max-height` of `250px`.
+
+```html
+<form>
+    <div class="form-group">
+        <label>Select Country</label><br>
+        <div id="flagstrap2"
+             data-input-name="country2"
+             data-selected-country="DE"
+             data-button-size="btn-md"
+             data-button-type="btn-default"
+             data-scrollable-height="250px"
+             data-scrollable="true">
+        </div>
+    </div>
+</form>
+```
+
+```html
+<script>
+    $('#flagstrap2').flagStrap();
+</script>
+```
+
+#####Using Instance Options
+This example will create a Flagstrap Dropdown giving the input field the name of `country` with only `Australia`, `USA` and `Canada` as available options and no pre selection.
+
+```html
+<form class="form-horizontal">
+    <div class="form-group">
+        <label>Select Country</label><br>
+        <div id="flagstrap3"></div>
+    </div>
+</form>
+```
+
+```html
+<script>
+    $('#flagstrap3').flagStrap({
+        countries: {
+            "AU": "Australia",
+            "GB": "United Kingdom",
+            "US": "United States"
+        },
+        inputName: 'country',
+        buttonSize: "btn-lg",
+        buttonType: "btn-primary",
+        labelMargin: "20px",
+        scrollable: false,
+        scrollableHeight: "350px",
+        onSelect: function(value, element) {
+            //
+        },
+        placeholder: {
+            value: "",
+            text: "Please select a country"
+        }
+    });
+</script>
+```
+
+### Options
+<table class="table table-bordered table-striped">
+    <thead>
+    <tr>
+        <th style="width: 100px;">Name</th>
+        <th style="width: 100px;">Type</th>
+        <th style="width: 100px;">Default</th>
+        <th>Description</th>
+    </tr>
+    </thead>
+    <tbody>
+    <tr>
+        <td>inputName</td>
+        <td>string</td>
+        <td>uniquely generated</td>
+        <td>the `name` attribute for the actual `select` input</td>
+    </tr>
+    <tr>
+        <td>inputId</td>
+        <td>string</td>
+        <td>uniquely generated</td>
+        <td>the `id` attribute for the actual `select` input</td>
+    </tr>
+    <tr>
+        <td>buttonSize</td>
+        <td>string</td>
+        <td>"btn-md"</td>
+        <td>The bootstrap button size `class` for this drop down</td>
+    </tr>
+    <tr>
+        <td>buttonType</td>
+        <td>string</td>
+        <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>
+        <td>false</td>
+        <td>Scrollable or full height drop down</td>
+    </tr>
+    <tr>
+        <td>scrollableHeight</td>
+        <td>string</td>
+        <td>"250px"</td>
+        <td>`max-height` for the scrollable drop down</td>
+    </tr>
+    <tr>
+        <td>countries (optional)</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>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>
+        <td>placeholder</td>
+        <td>bool|object</td>
+        <td>{value: "", text: "Please select a country"}</td>
+        <td>Set the placeholder value and text. To disable the placeholder define as (boolean) false.</td>
+    </tr>
+    </tbody>
+</table>
+
+### Contributors
+
+This project was created by Alex Carter. I owe many thanks to the following people who have helped make flagstrap even better.
+
+* [Matthew Machuga](https://github.com/machuga)
+* [TJ Miller](https://github.com/sixlive)

data/Rakefile

@@ -0,0 +1,6 @@
+require "bundler/gem_tasks"
+require "rspec/core/rake_task"
+
+RSpec::Core::RakeTask.new(:spec)
+
+task :default => :spec

data/bin/console

@@ -0,0 +1,14 @@
+#!/usr/bin/env ruby
+
+require "bundler/setup"
+require "flagstrap"
+
+# You can add fixtures and/or initialization code here to make experimenting
+# with your gem easier. You can also use a different console, if you like.
+
+# (If you use this, don't forget to add pry to your Gemfile!)
+# require "pry"
+# Pry.start
+
+require "irb"
+IRB.start(__FILE__)

data/bin/setup

@@ -0,0 +1,8 @@
+#!/usr/bin/env bash
+set -euo pipefail
+IFS=$'\n\t'
+set -vx
+
+bundle install
+
+# Do any other automated setup that you need to do here

data/bower.json

@@ -0,0 +1,19 @@
+{
+  "name": "flagstrap",
+  "version": "0.3",
+  "homepage": "http://www.blazeworx.com/flagstrap",
+  "authors": [
+    "Alex Carter <alex@blazeworx.com>"
+  ],
+  "description": "A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.",
+  "main": "src/jquery.flagstrap.js",
+  "keywords": [
+    "jquery",
+    "bootstrap",
+    "country",
+    "flag",
+    "flagstrap",
+    "jquery-flagstrap"
+  ],
+  "license": "MIT"
+}

data/demo/index.html

@@ -0,0 +1,340 @@
+<!DOCTYPE html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <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="../dist/css/flags.css" rel="stylesheet">
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/prettify.min.js"></script>
+    <style>
+        /* Tomorrow Theme */
+        /* Original theme - https://github.com/chriskempson/tomorrow-theme */
+        .prettyprint {
+            background: white;
+            font-family: Menlo, 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', Monaco, Consolas, monospace;
+            font-size: 12px;
+            line-height: 1.5;
+            border: 1px solid #ccc;
+            padding: 10px;
+        }
+
+        .pln {
+            color: #4d4d4c;
+        }
+
+        @media screen {
+            .str {
+                color: #718c00;
+            }
+
+            .kwd {
+                color: #8959a8;
+            }
+
+            .com {
+                color: #8e908c;
+            }
+
+            .typ {
+                color: #4271ae;
+            }
+
+            .lit {
+                color: #f5871f;
+            }
+
+            .pun {
+                color: #4d4d4c;
+            }
+
+            .opn {
+                color: #4d4d4c;
+            }
+
+            .clo {
+                color: #4d4d4c;
+            }
+
+            .tag {
+                color: #c82829;
+            }
+
+            .atn {
+                color: #f5871f;
+            }
+
+            .atv {
+                color: #3e999f;
+            }
+
+            .dec {
+                color: #f5871f;
+            }
+
+            .var {
+                color: #c82829;
+            }
+
+            .fun {
+                color: #4271ae;
+            }
+        }
+        @media print, projection {
+            .str {
+                color: #006600;
+            }
+
+            .kwd {
+                color: #006;
+                font-weight: bold;
+            }
+
+            .com {
+                color: #600;
+                font-style: italic;
+            }
+
+            .typ {
+                color: #404;
+                font-weight: bold;
+            }
+
+            .lit {
+                color: #004444;
+            }
+
+            .pun, .opn, .clo {
+                color: #444400;
+            }
+
+            .tag {
+                color: #006;
+                font-weight: bold;
+            }
+
+            .atn {
+                color: #440044;
+            }
+
+            .atv {
+                color: #006600;
+            }
+        }
+        /* Specify class=linenums on a pre to get line numbering */
+        ol.linenums {
+            margin-top: 0;
+            margin-bottom: 0;
+        }
+
+        /* IE indents via margin-left */
+        li.L0,
+        li.L1,
+        li.L2,
+        li.L3,
+        li.L4,
+        li.L5,
+        li.L6,
+        li.L7,
+        li.L8,
+        li.L9 {
+            /* */
+        }
+
+        /* Alternate shading for lines */
+        li.L1,
+        li.L3,
+        li.L5,
+        li.L7,
+        li.L9 {
+            /* */
+        }
+    </style>
+</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>
+
+<div class="container" style="margin-top:50px;">
+    <h1>FlagStrap v1.1</h1><a href="https://github.com/blazeworx/flagstrap">View on Github</a>
+    <hr>
+
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <h3>Default
+                <small>No options or data attributes</small>
+            </h3>
+<pre class="prettyprint lang-js">
+$('#basic').flagStrap();
+</pre>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <h3>Result</h3>
+
+            <form>
+                <div class="form-group">
+                    <label>Select Country</label><br>
+
+                    <div id="basic" data-input-name="country"></div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <hr>
+
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <h3>Example
+                <small>Customer default value</small>
+            </h3>
+<pre class="prettyprint lang-js">
+$('#origin').flagStrap({
+    placeholder: {
+        value: "",
+        text: "Country of origin"
+    }
+});
+</pre>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <h3>Result</h3>
+
+            <form>
+                <div class="form-group">
+                    <label>Where did these items originate from?</label><br>
+                    <div id="origin" data-input-name="origin"></div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <hr>
+
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <h3>Example
+                <small>Using data attributes to pre-select a country</small>
+            </h3>
+<pre class="prettyprint lang-js">
+ $('#options').flagStrap({
+    countries: {
+        "AU": "Australia",
+        "GB": "United Kingdom",
+        "US": "United States"
+    },
+    buttonSize: "btn-sm",
+    buttonType: "btn-info",
+    labelMargin: "10px",
+    scrollable: false,
+    scrollableHeight: "350px"
+});
+</pre>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <h3>Result</h3>
+
+            <form>
+                <div class="form-group">
+                    <label>Select Country</label><br>
+
+                    <div id="options"
+                         data-input-name="country2"
+                         data-selected-country="GB">
+                    </div>
+                </div>
+            </form>
+        </div>
+    </div>
+
+    <hr>
+
+    <div class="row">
+        <div class="col-xs-12 col-md-6">
+            <h3>Example
+                <small>Custom onChange event</small>
+            </h3>
+<pre class="prettyprint lang-js">
+$('#advanced').flagStrap({
+    buttonSize: "btn-lg",
+    buttonType: "btn-primary",
+    labelMargin: "20px",
+    scrollable: false,
+    scrollableHeight: "350px",
+    onSelect: function (value, element) {
+        alert(value);
+        console.log(element);
+    }
+});
+</pre>
+        </div>
+        <div class="col-xs-12 col-md-6">
+            <h3>Result</h3>
+
+            <form>
+                <div class="form-group">
+                    <label>Select Country</label>
+
+                    <div id="advanced"
+                         data-input-name="country3"
+                         data-selected-country="CA"
+                         data-button-size="btn-lg"
+                         data-button-type="btn-warning"
+                         data-scrollable="true"
+                         data-scrollable-height="250px"
+                         data-countries='{"US": "United States","CA": "Canada"}'>
+                    </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>
+    $('#basic').flagStrap();
+
+    $('#origin').flagStrap({
+        placeholder: {
+            value: "",
+            text: "Country of origin"
+        }
+    });
+
+    $('#options').flagStrap({
+        countries: {
+            "AU": "Australia",
+            "GB": "United Kingdom",
+            "US": "United States"
+        },
+        buttonSize: "btn-sm",
+        buttonType: "btn-info",
+        labelMargin: "10px",
+        scrollable: false,
+        scrollableHeight: "350px"
+    });
+
+    $('#advanced').flagStrap({
+        buttonSize: "btn-lg",
+        buttonType: "btn-primary",
+        labelMargin: "20px",
+        scrollable: false,
+        scrollableHeight: "350px",
+        onSelect: function (value, element) {
+            alert(value);
+            console.log(element);
+        }
+    });
+
+</script>
+
+</body>