bootstrap-table-rails 1.10.1 → 1.11.0

data/vendor/assets/javascripts/extensions/bootstrap-table-filter-control.js

@@ -1,24 +1,27 @@
 /**
  * @author: Dennis Hernández
  * @webSite: http://djhvscf.github.io/Blog
- * @version: v1.0.0
+ * @version: v2.1.0
  */
 
-!function ($) {
+(function ($) {
 
     'use strict';
 
-    var sprintf = $.fn.bootstrapTable.utils.sprintf;
+    var sprintf = $.fn.bootstrapTable.utils.sprintf,
+        objectKeys = $.fn.bootstrapTable.utils.objectKeys;
 
     var addOptionToSelectControl = function (selectControl, value, text) {
         value = $.trim(value);
         selectControl = $(selectControl.get(selectControl.length - 1));
-        if (existOptionInSelectControl(selectControl, value)) {
+        if (!existOptionInSelectControl(selectControl, value)) {
             selectControl.append($("<option></option>")
                 .attr("value", value)
                 .text($('<div />').html(text).text()));
+        }
+    };
 
-            // Sort it. Not overly efficient to do this here
+    var sortSelectControl = function (selectControl) {
             var $opts = selectControl.find('option:gt(0)');
             $opts.sort(function (a, b) {
                 a = $(a).text().toLowerCase();
@@ -33,7 +36,6 @@
 
             selectControl.find('option:gt(0)').remove();
             selectControl.append($opts);
-        }
     };
 
     var existOptionInSelectControl = function (selectControl, value) {
@@ -41,12 +43,12 @@
         for (var i = 0; i < options.length; i++) {
             if (options[i].value === value.toString()) {
                 //The value is not valid to add
-                return false;
+                return true;
             }
         }
 
         //If we get here, the value is valid to add
-        return true;
+        return false;
     };
 
     var fixHeaderCSS = function (that) {
@@ -71,6 +73,38 @@
         return searchControls;
     };
 
+    var getCursorPosition = function(el) {
+        if ($.fn.bootstrapTable.utils.isIEBrowser()) {
+            if ($(el).is('input')) {
+                var pos = 0;
+                if ('selectionStart' in el) {
+                    pos = el.selectionStart;
+                } else if ('selection' in document) {
+                    el.focus();
+                    var Sel = document.selection.createRange();
+                    var SelLength = document.selection.createRange().text.length;
+                    Sel.moveStart('character', -el.value.length);
+                    pos = Sel.text.length - SelLength;
+                }
+                return pos;
+            } else {
+                return -1;
+            }
+        } else {
+            return -1;
+        }
+    };
+
+    var setCursorPosition = function (el, index) {
+        if ($.fn.bootstrapTable.utils.isIEBrowser()) {
+            if(el.setSelectionRange !== undefined) {
+                el.setSelectionRange(index, index);
+            } else {
+                $(el).val(el.value);
+            }
+        }
+    };
+
     var copyValues = function (that) {
         var header = getCurrentHeader(that),
             searchControls = getCurrentSearchControls(that);
@@ -81,7 +115,8 @@
             that.options.valuesFilterControl.push(
                 {
                     field: $(this).closest('[data-field]').data('field'),
-                    value: $(this).val()
+                    value: $(this).val(),
+                    position: getCursorPosition($(this).get(0))
                 });
         });
     };
@@ -101,6 +136,7 @@
 
                 if (result.length > 0) {
                     $(this).val(result[0].value);
+                    setCursorPosition($(this).get(0), result[0].position);
                 }
             });
         }
@@ -124,9 +160,9 @@
         }
     };
 
-    var initFilterSelectControls = function (bootstrapTable) {
-        var data = bootstrapTable.options.data,
-            itemsPerPage = bootstrapTable.pageTo < bootstrapTable.options.data.length ? bootstrapTable.options.data.length : bootstrapTable.pageTo,
+    var initFilterSelectControls = function (that) {
+        var data = that.options.data,
+            itemsPerPage = that.pageTo < that.options.data.length ? that.options.data.length : that.pageTo,
 
             isColumnSearchableViaSelect = function (column) {
                 return column.filterControl && column.filterControl.toLowerCase() === 'select' && column.searchable;
@@ -140,29 +176,40 @@
                 return selectControl && selectControl.length > 0;
             };
 
-        for (var i = bootstrapTable.pageFrom - 1; i < bootstrapTable.pageTo; i++) {
-
-            $.each(bootstrapTable.header.fields, function (j, field) {
-                var column = bootstrapTable.columns[$.fn.bootstrapTable.utils.getFieldIndex(bootstrapTable.columns, field)],
-                    selectControl = $('.' + column.field);
+        var z = that.options.pagination ?
+            (that.options.sidePagination === 'server' ? that.pageTo : that.options.totalRows) :
+            that.pageTo;
 
+        $.each(that.header.fields, function (j, field) {
+            var column = that.columns[$.fn.bootstrapTable.utils.getFieldIndex(that.columns, field)],
+                selectControl = $('.bootstrap-table-filter-control-' + escapeID(column.field));
 
-                if (isColumnSearchableViaSelect(column) && isFilterDataNotGiven(column) && hasSelectControlElement(selectControl)) {
-                    if (selectControl.get(selectControl.length - 1).options.length === 0) {
-                        //Added the default option
-                        addOptionToSelectControl(selectControl, '', '');
-                    }
+            if (isColumnSearchableViaSelect(column) && isFilterDataNotGiven(column) && hasSelectControlElement(selectControl)) {
+                if (selectControl.get(selectControl.length - 1).options.length === 0) {
+                    //Added the default option
+                    addOptionToSelectControl(selectControl, '', '');
+                }
 
+                var uniqueValues = {};
+                for (var i = 0; i < z; i++) {
                     //Added a new value
                     var fieldValue = data[i][field],
-                        formattedValue = $.fn.bootstrapTable.utils.calculateObjectValue(bootstrapTable.header, bootstrapTable.header.formatters[j], [fieldValue, data[i], i], fieldValue);
+                        formattedValue = $.fn.bootstrapTable.utils.calculateObjectValue(that.header, that.header.formatters[j], [fieldValue, data[i], i], fieldValue);
 
-                    addOptionToSelectControl(selectControl, fieldValue, formattedValue);
+                    uniqueValues[formattedValue] = fieldValue;
+                }
+                for (var key in uniqueValues) {
+                    addOptionToSelectControl(selectControl, uniqueValues[key], key);
                 }
-            });
-        }
 
-    }
+                sortSelectControl(selectControl);
+            }
+        });
+    };
+
+    var escapeID = function( id ) {
+       return String(id).replace( /(:|\.|\[|\]|,)/g, "\\$1" );
+   };
 
     var createControls = function (that, header) {
         var addedFilterControl = false,
@@ -198,29 +245,48 @@
                     return false;
                 }
             });
+
             if (column.filterData !== undefined && column.filterData.toLowerCase() !== 'column') {
-                var filterDataType = column.filterData.substring(0, 3);
-                var filterDataSource = column.filterData.substring(4, column.filterData.length);
-                var selectControl = $('.' + column.field);
-                addOptionToSelectControl(selectControl, '', '');
+                var filterDataType = getFilterDataMethod(filterDataMethods, column.filterData.substring(0, column.filterData.indexOf(':')));
+                var filterDataSource, selectControl;
+
+                if (filterDataType !== null) {
+                    filterDataSource = column.filterData.substring(column.filterData.indexOf(':') + 1, column.filterData.length);
+                    selectControl = $('.bootstrap-table-filter-control-' + escapeID(column.field));
 
+                    addOptionToSelectControl(selectControl, '', '');
+                    filterDataType(filterDataSource, selectControl);
+                } else {
+                    throw new SyntaxError('Error. You should use any of these allowed filter data methods: var, json, url.' + ' Use like this: var: {key: "value"}');
+                }
+
+                var variableValues, key;
                 switch (filterDataType) {
                     case 'url':
                         $.ajax({
                             url: filterDataSource,
                             dataType: 'json',
                             success: function (data) {
-                                $.each(data, function (key, value) {
-                                    addOptionToSelectControl(selectControl, key, value);
-                                });
+                                for (var key in data) {
+                                    addOptionToSelectControl(selectControl, key, data[key]);
+                                }
+                                sortSelectControl(selectControl);
                             }
                         });
                         break;
                     case 'var':
-                        var variableValues = window[filterDataSource];
-                        for (var key in variableValues) {
+                        variableValues = window[filterDataSource];
+                        for (key in variableValues) {
                             addOptionToSelectControl(selectControl, key, variableValues[key]);
                         }
+                        sortSelectControl(selectControl);
+                        break;
+                    case 'jso':
+                        variableValues = JSON.parse(filterDataSource);
+                        for (key in variableValues) {
+                            addOptionToSelectControl(selectControl, key, variableValues[key]);
+                        }
+                        sortSelectControl(selectControl);
                         break;
                 }
             }
@@ -264,7 +330,7 @@
             if (header.find('.date-filter-control').length > 0) {
                 $.each(that.columns, function (i, column) {
                     if (column.filterControl !== undefined && column.filterControl.toLowerCase() === 'datepicker') {
-                        header.find('.date-filter-control.' + column.field).datepicker(column.filterDatepickerOptions)
+                        header.find('.date-filter-control.bootstrap-table-filter-control-' + column.field).datepicker(column.filterDatepickerOptions)
                             .on('changeDate', function (e) {
                                 //Fired the keyup event
                                 $(e.currentTarget).keyup();
@@ -288,10 +354,50 @@
             case 'auto':
                 return 'auto';
             default:
-                return 'ltr'
+                return 'ltr';
         }
     };
 
+    var filterDataMethods =
+        {
+            'var': function (filterDataSource, selectControl) {
+                var variableValues = window[filterDataSource];
+                for (var key in variableValues) {
+                    addOptionToSelectControl(selectControl, key, variableValues[key]);
+                }
+                sortSelectControl(selectControl);
+            },
+            'url': function (filterDataSource, selectControl) {
+                $.ajax({
+                    url: filterDataSource,
+                    dataType: 'json',
+                    success: function (data) {
+                        for (var key in data) {
+                            addOptionToSelectControl(selectControl, key, data[key]);
+                        }
+                        sortSelectControl(selectControl);
+                    }
+                });
+            },
+            'json':function (filterDataSource, selectControl) {
+                var variableValues = JSON.parse(filterDataSource);
+                for (var key in variableValues) {
+                    addOptionToSelectControl(selectControl, key, variableValues[key]);
+                }
+                sortSelectControl(selectControl);
+            }
+        };
+
+    var getFilterDataMethod = function (objFilterDataMethod, searchTerm) {
+        var keys = Object.keys(objFilterDataMethod);
+        for (var i = 0; i < keys.length; i++) {
+            if (keys[i] === searchTerm) {
+                return objFilterDataMethod[searchTerm];
+            }
+        }
+        return null;
+    };
+
     $.extend($.fn.bootstrapTable.defaults, {
         filterControl: false,
         onColumnSearch: function (field, text) {
@@ -299,27 +405,28 @@
         },
         filterShowClear: false,
         alignmentSelectControlOptions: undefined,
-        //internal variables
-        valuesFilterControl: [],
         filterTemplate: {
             input: function (that, field, isVisible) {
-                return sprintf('<input type="text" class="form-control %s" style="width: 100%; visibility: %s">', field, isVisible);
+                return sprintf('<input type="text" class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s">', field, isVisible);
             },
             select: function (that, field, isVisible) {
-                return sprintf('<select class="%s form-control" style="width: 100%; visibility: %s" dir="%s"></select>',
-                    field, isVisible, getDirectionOfSelectOptions(that.options.alignmentSelectControlOptions))
+                return sprintf('<select class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" dir="%s"></select>',
+                    field, isVisible, getDirectionOfSelectOptions(that.options.alignmentSelectControlOptions));
             },
             datepicker: function (that, field, isVisible) {
-                return sprintf('<input type="text" class="date-filter-control %s form-control" style="width: 100%; visibility: %s">', field, isVisible);
+                return sprintf('<input type="text" class="form-control date-filter-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s">', field, isVisible);
             }
-        }
+        },
+        //internal variables
+        valuesFilterControl: []
     });
 
     $.extend($.fn.bootstrapTable.COLUMN_DEFAULTS, {
         filterControl: undefined,
         filterData: undefined,
         filterDatepickerOptions: undefined,
-        filterStrictSearch: false
+        filterStrictSearch: false,
+        filterStartsWithSearch: false
     });
 
     $.extend($.fn.bootstrapTable.Constructor.EVENTS, {
@@ -330,6 +437,13 @@
         clear: 'glyphicon-trash icon-clear'
     });
 
+    $.extend($.fn.bootstrapTable.locales, {
+        formatClearFilters: function () {
+            return 'Clear Filters';
+        }
+    });
+    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
+
     var BootstrapTable = $.fn.bootstrapTable.Constructor,
         _init = BootstrapTable.prototype.init,
         _initToolbar = BootstrapTable.prototype.initToolbar,
@@ -341,6 +455,12 @@
         //Make sure that the filterControl option is set
         if (this.options.filterControl) {
             var that = this;
+
+            // Compatibility: IE < 9 and old browsers
+            if (!Object.keys) {
+                objectKeys();
+            }
+
             //Make sure that the internal variables are set correctly
             this.options.valuesFilterControl = [];
 
@@ -369,31 +489,22 @@
         _init.apply(this, Array.prototype.slice.apply(arguments));
     };
 
-    $.extend($.fn.bootstrapTable.locales, {
-        formatClearFilters: function () {
-            return 'Clear Filters';
-        }
-    });
-    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales);
-
     BootstrapTable.prototype.initToolbar = function () {
-        if ((!this.showToolbar) && (this.options.filterControl)) {
-            this.showToolbar = this.options.filterControl;
-        }
+        this.showToolbar = this.options.filterControl && this.options.filterShowClear;
 
         _initToolbar.apply(this, Array.prototype.slice.apply(arguments));
 
         if (this.options.filterControl && this.options.filterShowClear) {
             var $btnGroup = this.$toolbar.find('>.btn-group'),
-                $btnClear = $btnGroup.find('div.export');
+                $btnClear = $btnGroup.find('.filter-show-clear');
 
             if (!$btnClear.length) {
-              $btnClear = $([
-                    '<button class="btn btn-default" ',
+                $btnClear = $([
+                    '<button class="btn btn-default filter-show-clear" ',
                     sprintf('type="button" title="%s">', this.options.formatClearFilters()),
                     sprintf('<i class="%s %s"></i> ', this.options.iconsPrefix, this.options.icons.clear),
-                    '</button>',
-                    '</ul>'].join('')).appendTo($btnGroup);
+                    '</button>'
+                ].join('')).appendTo($btnGroup);
 
                 $btnClear.off('click').on('click', $.proxy(this.clearFilterControl, this));
             }
@@ -418,7 +529,7 @@
     BootstrapTable.prototype.initSearch = function () {
         _initSearch.apply(this, Array.prototype.slice.apply(arguments));
 
-        if (!this.options.sidePagination === 'server') {
+        if (this.options.sidePagination === 'server') {
             return;
         }
 
@@ -431,7 +542,7 @@
                 var thisColumn = that.columns[$.fn.bootstrapTable.utils.getFieldIndex(that.columns, key)];
                 var fval = fp[key].toLowerCase();
                 var value = item[key];
-                
+
                 // Fix #142: search use formated data
                 if (thisColumn && thisColumn.searchFormatter) {
                     value = $.fn.bootstrapTable.utils.calculateObjectValue(that.header,
@@ -445,8 +556,13 @@
                         value.toString().toLowerCase() === fval.toString().toLowerCase())) {
                         return false;
                     }
-                }
-                else {
+                } else if (thisColumn.filterStartsWithSearch) {
+                  if (!($.inArray(key, that.header.fields) !== -1 &&
+                      (typeof value === 'string' || typeof value === 'number') &&
+                      (value + '').toLowerCase().indexOf(fval) === 0)) {
+                      return false;
+                  }
+                } else {
                     if (!($.inArray(key, that.header.fields) !== -1 &&
                         (typeof value === 'string' || typeof value === 'number') &&
                         (value + '').toLowerCase().indexOf(fval) !== -1)) {
@@ -458,7 +574,24 @@
         }) : this.data;
     };
 
+    BootstrapTable.prototype.initColumnSearch = function(filterColumnsDefaults) {
+        copyValues(this);
+
+        if (filterColumnsDefaults) {
+            this.filterColumnsPartial = filterColumnsDefaults;
+            this.updatePagination();
+
+            for (var filter in filterColumnsDefaults) {
+              this.trigger('column-search', filter, filterColumnsDefaults[filter]);
+            }
+        }
+    };
+
     BootstrapTable.prototype.onColumnSearch = function (event) {
+        if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
+            return;
+        }
+
         copyValues(this);
         var text = $.trim($(event.currentTarget).val());
         var $field = $(event.currentTarget).closest('[data-field]').data('field');
@@ -472,9 +605,15 @@
             delete this.filterColumnsPartial[$field];
         }
 
+        // if the searchText is the same as the previously selected column value,
+        // bootstrapTable will not try searching again (even though the selected column
+        // may be different from the previous search).  As a work around
+        // we're manually appending some text to bootrap's searchText field
+        // to guarantee that it will perform a search again when we call this.onSearch(event)
+        this.searchText += "randomText";
+
         this.options.pageNumber = 1;
         this.onSearch(event);
-        this.updatePagination();
         this.trigger('column-search', $field, text);
     };
 
@@ -500,6 +639,8 @@
             if (controls.length > 0) {
                 this.filterColumnsPartial = {};
                 $(controls[0]).trigger(controls[0].tagName === 'INPUT' ? 'keyup' : 'change');
+            } else {
+                return;
             }
 
             if (search.length > 0) {
@@ -508,9 +649,11 @@
 
             // use the default sort order if it exists. do nothing if it does not
             if (that.options.sortName !== table.data('sortName') || that.options.sortOrder !== table.data('sortOrder')) {
-                var sorter = sprintf(header.find('[data-field="%s"]', $(controls[0]).closest('table').data('sortName')));
-                that.onSort(table.data('sortName'), table.data('sortName'));
-                $(sorter).find('.sortable').trigger('click');
+                var sorter = header.find(sprintf('[data-field="%s"]', $(controls[0]).closest('table').data('sortName')));
+                if (sorter.length > 0) {
+                    that.onSort(table.data('sortName'), table.data('sortName'));
+                    $(sorter).find('.sortable').trigger('click');
+                }
             }
 
             // clear cookies once the filters are clean
@@ -518,10 +661,12 @@
             timeoutId = setTimeout(function () {
                 if (cookies && cookies.length > 0) {
                     $.each(cookies, function (i, item) {
-                        that.deleteCookie(item);
+                        if (that.deleteCookie !== undefined) {
+                            that.deleteCookie(item);
+                        }
                     });
                 }
             }, that.options.searchTimeOut);
         }
     };
-}(jQuery);
+})(jQuery);