Some improvements - Cookie / Filter-Control extensions (#2463)

* Adding missing locale

* Feature - Add cookieStorage option where we can set what storage will use the cookie extension. cookieStorage, localStorage or sessionStorage

CHANGELOG.md

@@ -20,9 +20,11 @@ ChangeLog
 - fix(export extension): fix #2220, selected rows does not work when data-pagination-side is server
 - fix(reorder-row extension): fix #1343, reorder rows bug with pagination
 - feat(cookie extension): fix #2386, add `getCookies` method
+- feat(cookie extension): fix #2371, add `cookieStorage` option
 - feat(multiple-selection-row extension): add multiple-selection-row extension
 - feat(filter-control extension): fix #1540, disable unnecessary/unused values from select options
 - feat(filter-control extension): fix #2448, create a css file which contains the style for this extension
+- feat(filter-control extension): fix #2189, set placeholder of the filter-control input
 
 #### Breaking changes in 1.11.1
 - **Filter-Control extension**: deleted the inline-style and now this extension is using a separated css file.

src/extensions/cookie/README.md

@@ -47,6 +47,12 @@ Use Plugin: [bootstrap-table-cookie](https://github.com/wenzhixin/bootstrap-tabl
 * description: You must set this property if the cookie property is enabled to set an unique cookie with an identifier for each table in your page or project. You must set this property because we need create cookies with an identifier.
 * default: ``
 
+### cookieStorage
+
+* type: String
+* description: Set the storage that this extension will use. Use `cookieStorage` or `localStorage` or `sessionStorage`.
+* default: `cookieStorage`
+
 ### cookiesEnabled
 
 * type: Array

src/extensions/cookie/bootstrap-table-cookie.js

@@ -64,11 +64,27 @@
         }
 
         cookieName = that.options.cookieIdTable + '.' + cookieName;
-        if (!cookieName || /^(?:expires|max\-age|path|domain|secure)$/i.test(cookieName)) {
-            return false;
+
+        switch(that.options.cookieStorage) {
+            case 'cookieStorage':
+                document.cookie = [
+                        cookieName, '=', cookieValue,
+                        '; expires=' + that.options.cookieExpire,
+                        that.options.cookiePath ? '; path=' + that.options.cookiePath : '',
+                        that.options.cookieDomain ? '; domain=' + that.options.cookieDomain : '',
+                        that.options.cookieSecure ? '; secure' : ''
+                    ].join('');
+            break;
+            case 'localStorage':
+                localStorage.setItem(cookieName, cookieValue);
+            break;
+            case 'sessionStorage':
+                sessionStorage.setItem(cookieName, cookieValue);
+            break;
+            default:
+                return false;
         }
 
-        document.cookie = encodeURIComponent(cookieName) + '=' + encodeURIComponent(cookieValue) + calculateExpiration(that.options.cookieExpire) + (that.options.cookieDomain ? '; domain=' + that.options.cookieDomain : '') + (that.options.cookiePath ? '; path=' + that.options.cookiePath : '') + (that.cookieSecure ? '; secure' : '');
         return true;
     };
 
@@ -83,22 +99,38 @@
 
         cookieName = tableName + '.' + cookieName;
 
-        return decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(cookieName).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1')) || null;
-    };
-
-    var hasCookie = function (cookieName) {
-        if (!cookieName) {
-            return false;
+        switch(that.options.cookieStorage) {
+            case 'cookieStorage':
+                return decodeURIComponent(document.cookie.replace(new RegExp('(?:(?:^|.*;)\\s*' + encodeURIComponent(cookieName).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=\\s*([^;]*).*$)|^.*$'), '$1')) || null;
+            case 'localStorage':
+                return localStorage.getItem(cookieName);
+            case 'sessionStorage':
+                return sessionStorage.getItem(cookieName);
+            default:
+                return null;
         }
-        return (new RegExp('(?:^|;\\s*)' + encodeURIComponent(cookieName).replace(/[\-\.\+\*]/g, '\\$&') + '\\s*\\=')).test(document.cookie);
     };
 
-    var deleteCookie = function (tableName, cookieName, sPath, sDomain) {
+    var deleteCookie = function (that, tableName, cookieName) {
         cookieName = tableName + '.' + cookieName;
-        if (!hasCookie(cookieName)) {
-            return false;
+        
+        switch(that.options.cookieStorage) {
+            case 'cookieStorage':
+                document.cookie = [
+                        encodeURIComponent(cookieName), '=',
+                        '; expires=Thu, 01 Jan 1970 00:00:00 GMT',
+                        that.options.cookiePath ? '; path=' + that.options.cookiePath : '',
+                        that.options.cookieDomain ? '; domain=' + that.options.cookieDomain : '',
+                    ].join('');
+                break;
+            case 'localStorage':
+                localStorage.removeItem(cookieName);
+            break;
+            case 'sessionStorage':
+                sessionStorage.removeItem(cookieName);
+            break;
+
         }
-        document.cookie = encodeURIComponent(cookieName) + '=; expires=Thu, 01 Jan 1970 00:00:00 GMT' + (sDomain ? '; domain=' + sDomain : '') + (sPath ? '; path=' + sPath : '');
         return true;
     };
 
@@ -178,6 +210,7 @@
             'bs.table.columns', 'bs.table.searchText',
             'bs.table.filterControl'
         ],
+        cookieStorage: 'cookieStorage', //localStorage, sessionStorage
         //internal variable
         filterControls: [],
         filterControlValuesLoaded: false
@@ -396,6 +429,6 @@
             return;
         }
 
-        deleteCookie(this.options.cookieIdTable, cookieIds[cookieName], this.options.cookiePath, this.options.cookieDomain);
+        deleteCookie(this, this.options.cookieIdTable, cookieIds[cookieName]);
     };
 })(jQuery);

src/extensions/filter-control/README.md

@@ -65,9 +65,20 @@ Dependence if you use the datepicker option: [bootstrap-datepicker](https://gith
 * description: Set to true if you want to use the starts with search mode.
 * default: `false`
 
+### filterControlPlaceholder
+* type: String
+* description: Set this in order to show a placeholder only in the input filter control.
+* default: ``
+
 ### Icons
 * clear: 'glyphicon-trash icon-clear'
 
+## Locale
+
+### formatClearFilters
+* type: Function
+* default: `function () { return "Clear Filters";}`
+
 ## Events
 
 ### onColumnSearch(column-search.bs.table)

src/extensions/filter-control/bootstrap-table-filter-control.js

@@ -257,7 +257,7 @@
                 if (column.searchable && that.options.filterTemplate[nameControl]) {
                     addedFilterControl = true;
                     isVisible = 'visible';
-                    html.push(that.options.filterTemplate[nameControl](that, column.field, isVisible));
+                    html.push(that.options.filterTemplate[nameControl](that, column.field, isVisible, column.filterControlPlaceholder));
                 }
             }
 
@@ -430,8 +430,8 @@
         filterShowClear: false,
         alignmentSelectControlOptions: undefined,
         filterTemplate: {
-            input: function (that, field, isVisible) {
-                return sprintf('<input type="text" class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s">', field, isVisible);
+            input: function (that, field, isVisible, placeholder) {
+                return sprintf('<input type="text" class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" placeholder="%s">', field, isVisible, placeholder);
             },
             select: function (that, field, isVisible) {
                 return sprintf('<select class="form-control bootstrap-table-filter-control-%s" style="width: 100%; visibility: %s" dir="%s"></select>',
@@ -450,7 +450,8 @@
         filterData: undefined,
         filterDatepickerOptions: undefined,
         filterStrictSearch: false,
-        filterStartsWithSearch: false
+        filterStartsWithSearch: false,
+        filterControlPlaceholder: ""
     });
 
     $.extend($.fn.bootstrapTable.Constructor.EVENTS, {