Added glyphicon support for dropdown button.

Author: WillemUXMendix

src/DropdownDivConverter/DropdownDivConverter.xml

@@ -11,6 +11,11 @@
             <category>General</category>
             <description>The label on the dropdown button.</description>
         </property>
+        <property key="buttonGlyphicon" type="string" defaultValue="" required="false">
+            <caption>Glyphicon icon</caption>
+            <category>General</category>
+            <description>Add a Bootstrap glyphicon icon to the button by entering the glyphicon classname (e.g. 'glyphicon-user'). If left empty, no icon will be created.</description>
+        </property>
         <property key="isDropUp" type="boolean" defaultValue="false" required="true">
             <caption>Drop up</caption>
             <category>General</category>

src/DropdownDivConverter/widget/DropdownDivConverter.js

@@ -33,6 +33,7 @@ define([
 
         // Parameters configured in the Modeler.
         buttonTitle: "",
+        buttonGlyphicon: "",
         isDropUp: "",
         isRightAligned: "",
         startOpen: "",
@@ -83,7 +84,12 @@ define([
 
         // Really render the interface, if renderAsOpen is true: render the menu in open state
         _renderInterface: function(renderAsOpen, callback) {
-            this.dropdownButton.innerHTML = this.buttonTitle + "<span class='caret'></span>";
+            this.dropdownButton.innerHTML = this.buttonTitle + "<span class='caret'></span>";            
+            // if a glyphicon icon was requested and the splitButton is not wanted: add the glyphicon to the button.
+            if (this.buttonGlyphicon !== '' && !this.splitButtonActive){
+                this._addGlyphicon(this.dropdownButton);   
+            }
+            
             this._setButtonTypes(this.dropdownButton);
 
             // implement visual settings of the widget
@@ -102,7 +108,7 @@ define([
             if (this.splitButtonActive) {
                 this._createSplitButton();  
             } else {
-                domConstruct.destroy(this.splitButton);  
+                domConstruct.destroy(this.splitButton);
             }
 
             this._setupEvents(callback);  
@@ -251,11 +257,20 @@ define([
         _createSplitButton: function() {
             // create the new split button
             this.splitButton.innerHTML = this.buttonTitle;
+            // if a glyphicon icon was requested: add the glyphicon to the button.
+            if (this.buttonGlyphicon !== ''){
+                this._addGlyphicon(this.splitButton);   
+            }
             this._setButtonTypes(this.splitButton);
 
             // adjust the dropdownButtons content
             this.dropdownButton.innerHTML = "<span class='caret'></span><span class='sr-only'>Toggle Dropdown</span";
         },
+        
+        // Add a glyphicon to a button
+        _addGlyphicon: function(buttonObject) {
+            buttonObject.innerHTML = "<span class='glyphicon " + this.buttonGlyphicon + "'></span>" + buttonObject.innerHTML;
+        },
 
         // Reset subscriptions.
         _resetSubscriptions: function () {

src/DropdownDivConverter/widget/ui/DropdownDivConverter.css

@@ -16,7 +16,11 @@
 }
 
 .dropdown-div-converter.open .dropdown-menu {
-    display:block;   
+    display: block;   
+}
+
+.dropdown-div-converter button .glyphicon {
+    margin-right: 0.8em;
 }
 
 /* for bootstrap versions below 3.1 */