Added jquery.flagstrap.js definition suport (DefinitelyTyped#11710)

leniartek · Oct 4, 2016 · f1595fd · f1595fd
1 parent 8922f46
commit f1595fd
Show file tree

Hide file tree

Showing 2 changed files with 161 additions and 0 deletions.
diff --git a/jquery.flagstrap/jquery.flagstrap-tests.ts b/jquery.flagstrap/jquery.flagstrap-tests.ts
@@ -0,0 +1,77 @@
+///<reference path="../jquery/jquery.d.ts" />
+///<reference path="jquery.flagstrap.d.ts" />
+
+class TestObject {
+
+}
+
+$(function () {
+    // basic test 
+    // written in according to basic example from documentation 
+    var htmlSelect = '<form class="form-horizontal">' + 
+                    '   <div class="form-group">' +
+                    '       <label>Select Country</label><br>' +
+                    '       <div class="flagstrap" data-input-name="country"></div>' +
+                    '   </div>' +
+                    '</form>';
+    $('body').html(htmlSelect);
+    $('#flagstrap').flagStrap();
+
+    // for this test we expect more than 30 thousands of characters
+    console.log('characters count: ' + $('#flagstrap').html().length + '\n' +  $('#flagstrap').html());
+
+    // options test
+    // options -> data attributes 
+    // written in according to options -> data attributes example from documentation
+    htmlSelect = '<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>';
+    $('body').html(htmlSelect);
+    $('#flagstrap2').flagStrap();
+
+    console.log('\n\ncharacters count: ' + $('#flagstrap2').html().length + '\n' +  $('#flagstrap2').html());
+
+    // options test
+    // options -> instance options 
+    // written in according to options -> instance options example from documentation
+    htmlSelect = '<form>' +
+                '   <div class="form-group">' +
+                '       <label>Select Country</label><br>' +
+                '       <div id="flagstrap3"></div>' +
+                '   </div>' +
+                '</form>';
+    $('body').html(htmlSelect);
+    $('#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: any, element: any) {
+            //
+        },
+        placeholder: {
+            value: "",
+            text: "Please select a country"
+        }
+    });
+
+    console.log('\n\ncharacters count: ' + $('#flagstrap3').html().length + '\n' +  $('#flagstrap3').html());
+})
+
diff --git a/jquery.flagstrap/jquery.flagstrap.d.ts b/jquery.flagstrap/jquery.flagstrap.d.ts
@@ -0,0 +1,84 @@
+// Type definitions for jQuery Flagstrap Plugin v1.0
+// Project: https://github.com/blazeworx/flagstrap
+// Definitions by: Felipe de Sena Garcia <https://github.com/felipedgarcia>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+///<reference path="../jquery/jquery.d.ts" />
+
+declare module jQueryFlagStrap {
+    interface FlagStrapOptions {
+        /**
+         * Default: uniquely generated
+         * the `name` attribute for the actual `select` input
+         */
+        inputName: string;
+        /**
+         * Default: uniquely generated
+         * the `id` attribute for the actual `select` input
+         */
+        inputId?: string;
+        /**
+         * Default: "btn-md"
+         * The bootstrap button size `class` for this drop down
+         */
+        buttonSize: string;
+        /**
+         * Default: "btn-default"
+         * The bootstrap button type `class` for this drop down
+         */
+        buttonType: string;
+        /**
+         * Default: "20px"
+         * The `margin` between `flag` and `text label`
+         */
+        labelMargin: string;
+        /**
+         * Default: false
+         * Scrollable or full height drop down
+         */
+        scrollable: boolean;
+        /**
+         * Default: "250px"
+         * `max-height` for the scrollable drop down
+         */
+        scrollableHeight?: string;
+        /**
+        * Default: (all)
+        * Only show specific countries
+        * Example:
+        * 
+        * {"GB": "United Kingdom", "US": "United States"}
+        * 
+        * will only show the USA and UK.
+        */
+        countries?: Object;
+        /**
+         * Default: {value: "", text: "Please select a country"}
+         * Set the placeholder value and text. To disable the placeholder define as (boolean) false.
+         */
+        placeholder: boolean | FlagStrapPlaceholderOptions; 
+        /**
+         * Default: null
+         * This callback gets called each time the select is changed. It receives two parameters, the new value, and the select element.
+         */
+        onSelect?(value: any, element: any): void; 
+    }
+
+    interface FlagStrapStatic {
+        flagStrap?: void;
+    }
+
+    interface FlagStrapPlaceholderOptions {
+        value: string;
+        text: string;
+    }
+}
+
+interface JQuery {
+    /**
+     * A lightwieght jQuery plugin for creating Bootstrap 3 compatible country select boxes with flags.
+     */
+
+    flagStrap(): void;
+    flagStrap(options: jQueryFlagStrap.FlagStrapOptions): void;
+}