if Bootstrap Selectpicker is available, use it for filter & operator selects

mistic100 · mistic100 · commit 6172080b405a · 2014-08-26T14:30:26.000+02:00
diff --git a/examples/index.html b/examples/index.html
@@ -2,6 +2,7 @@
 <html>
 <head>
   <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
   <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" href="../src/query-builder.css">
diff --git a/src/query-builder.js b/src/query-builder.js
@@ -574,6 +574,15 @@
         container.append($rule);
         $rule.find('.rule-filter-container').append($filterSelect);
 
+        if ($.fn.selectpicker) {
+            $filterSelect.selectpicker({
+              container: 'body',
+              style: 'btn-inverse btn-xs',
+              width: 'auto',
+              showIcon: false
+            });
+        }
+
         if (this.settings.onAfterAddRule) {
             this.settings.onAfterAddRule.call(this, $rule);
         }
@@ -597,6 +606,15 @@
             $operatorSelect = $(this.getRuleOperatorSelect($rule.attr('id'), operators));
 
         $operatorContainer.html($operatorSelect);
+
+        if ($.fn.selectpicker) {
+            $operatorSelect.selectpicker({
+              container: 'body',
+              style: 'btn-inverse btn-xs',
+              width: 'auto',
+              showIcon: false
+            });
+        }
     };
 
     /**
@@ -1077,9 +1095,15 @@
 <dl id="'+ group_id +'" class="rules-group-container" '+ (this.settings.sortable ? 'draggable="true"' : '') +'> \
   <dt class="rules-group-header"> \
     <div class="btn-group pull-right"> \
-      <button type="button" class="btn btn-xs btn-success" data-add="rule"><i class="glyphicon glyphicon-plus"></i> '+ this.lang.add_rule +'</button> \
-      '+ (this.settings.allow_groups ? '<button type="button" class="btn btn-xs btn-success" data-add="group"><i class="glyphicon glyphicon-plus-sign"></i> '+ this.lang.add_group +'</button>' : '') +' \
-      '+ (!main ? '<button type="button" class="btn btn-xs btn-danger" data-delete="group"><i class="glyphicon glyphicon-remove"></i> '+ this.lang.delete_group +'</button>' : '') +' \
+      <button type="button" class="btn btn-xs btn-success" data-add="rule"> \
+        <i class="glyphicon glyphicon-plus"></i> '+ this.lang.add_rule +' \
+      </button> \
+      '+ (this.settings.allow_groups ? '<button type="button" class="btn btn-xs btn-success" data-add="group"> \
+        <i class="glyphicon glyphicon-plus-sign"></i> '+ this.lang.add_group +' \
+      </button>' : '') +' \
+      '+ (!main ? '<button type="button" class="btn btn-xs btn-danger" data-delete="group"> \
+        <i class="glyphicon glyphicon-remove"></i> '+ this.lang.delete_group +' \
+      </button>' : '') +' \
     </div> \
     <div class="btn-group"> \
       '+ this.getGroupConditions(group_id) +' \
@@ -1107,7 +1131,10 @@
                 active = cond == this.settings.default_condition,
                 label = this.lang['condition_'+ cond.toLowerCase()] || cond;
 
-            h+= '<label class="btn btn-xs btn-primary '+ (active?'active':'') +'"><input type="radio" name="'+ group_id +'_cond" value="'+ cond +'" '+ (active?'checked':'') +'> '+ label +'</label>';
+            h+= '\
+            <label class="btn btn-xs btn-primary '+ (active?'active':'') +'"> \
+              <input type="radio" name="'+ group_id +'_cond" value="'+ cond +'" '+ (active?'checked':'') +'> '+ label +' \
+            </label>';
         }
 
         return h;
@@ -1123,7 +1150,9 @@
 <li id="'+ rule_id +'" class="rule-container" '+ (this.settings.sortable ? 'draggable="true"' : '') +'> \
   <div class="rule-header"> \
     <div class="btn-group pull-right"> \
-      <button type="button" class="btn btn-xs btn-danger" data-delete="rule"><i class="glyphicon glyphicon-remove"></i> '+ this.lang.delete_rule +'</button> \
+      <button type="button" class="btn btn-xs btn-danger" data-delete="rule"> \
+        <i class="glyphicon glyphicon-remove"></i> '+ this.lang.delete_rule +' \
+      </button> \
     </div> \
   </div> \
   '+ (this.settings.sortable ? '<div class="drag-handle"><i class="glyphicon glyphicon-sort"></i></div>' : '') +' \
