[FEATURE] Added an optional onDomReady() callback, as well as mrhewit…

…t's commit (blazeworx#35)

README.md

@@ -90,6 +90,19 @@ 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>
+```
+
 ### Options
 <table class="table table-bordered table-striped">
     <thead>
@@ -154,8 +167,14 @@ This example will create a Flagstrap Dropdown giving the input field the name of
         <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 (optional)</td>
+        <td>function</td>
+        <td>null</td>
+        <td>This callback gets called as the last thing, before the plugin returns, thus multiple selects can be rendered and when they're all done, this is called.</td>
+    </tr>
+    <tr>
         <td>placeholder</td>
         <td>bool|object</td>
         <td>{value: "", text: "Please select a country"}</td>

dist/js/jquery.flagstrap.js

@@ -268,14 +268,13 @@
     };
 
     $.flagStrap = function (element, options, i) {
-
         let plugin = this;
 
         let uniqueId = generateId(8);
 
         plugin.countries = {};
-        plugin.selected = { value: null, text: null };
-        plugin.settings = { inputName: 'country-' + uniqueId };
+        plugin.selected = {value: null, text: null};
+        plugin.settings = {inputName: 'country-' + uniqueId};
 
         let $container = $(element);
         let htmlSelectId = 'flagstrap-' + uniqueId;
@@ -319,15 +318,28 @@
 
         };
 
+        plugin.val = function (country_code) {
+            // set the underlying select to the new value
+            $(htmlSelect).val(country_code);
+            // update the UI of the flag widget to show the new country selection
+            let html = '';
+            if ( country_code === plugin.settings.placeholder.value ) {
+                html = '<i class="flagstrap-icon flagstrap-placeholder"></i> ' + plugin.settings.placeholder.text;
+            } else {
+                html = $container.find('li a[data-val='+country_code+']').html();
+            }
+            $('.flagstrap-selected-' + uniqueId).html( html );
+        };
+
         let buildHtmlSelect = function () {
             let htmlSelectElement = $('<select/>').attr('id', htmlSelectId).attr('name', plugin.settings.inputName);
 
             $.each(plugin.countries, function (code, country) {
-                let optionAttributes = { value: code };
+                let optionAttributes = {value: code};
                 if (plugin.settings.selectedCountry !== undefined) {
                     if (plugin.settings.selectedCountry === code) {
-                        optionAttributes = { value: code, selected: "selected" };
-                        plugin.selected = { value: code, text: country }
+                        optionAttributes = {value: code, selected: "selected"};
+                        plugin.selected = {value: code, text: country}
                     }
                 }
                 htmlSelectElement.append($('<option>', optionAttributes).text(country));
@@ -338,7 +350,7 @@
                     value: plugin.settings.placeholder.value,
                     text: plugin.settings.placeholder.text,
                 }));
-                plugin.selected = { value: plugin.settings.placeholder.value, text: plugin.settings.placeholder.text }
+                plugin.selected = {value: plugin.settings.placeholder.value, text: plugin.settings.placeholder.text}
             }
 
             return htmlSelectElement;
@@ -446,17 +458,27 @@
         }
 
         plugin.init();
-
     };
 
     $.fn.flagStrap = function (options) {
 
-        return this.each(function (i) {
-            if ($(this).data('flagStrap') === undefined) {
-                $(this).data('flagStrap', new $.flagStrap(this, options, i));
+        let res = this.each(function (i) {
+
+            if (typeof options === 'string' && $(this).data('flagStrap') !== undefined) {
+                $(this).data('flagStrap').val(options);
+            }
+            else {
+                if ($(this).data('flagStrap') === undefined) {
+                    $(this).data('flagStrap', new $.flagStrap(this, options, i));
+                }
             }
         });
 
+        if (options.onDomReady !== undefined && options.onDomReady instanceof Function) {
+            options.onDomReady.call(this);
+        }
+
+        return res;
     }
 
 })(jQuery);