MINOR JS functionality on intercepting injected filtering of gridfields in LeftAndMain inherited Controllers.

admin/javascript/LeftAndMain.js

@@ -382,7 +382,130 @@ jQuery.noConflict();
 				});
 			}
 		});
-	});	 
+	});
+	
+	$('.cms-filter-form').entwine({
+		
+		GridField: null,
+
+		/**
+		 * Function onmatch
+		 *
+		 * Try to find the related gridfield by looking up the data-gridfield attribute on this
+		 * filter form
+		 */
+		onmatch: function() {
+			var gridfieldName = this.attr('data-gridfield');
+			this.setGridField($('.grid[data-name='+gridfieldName+']'));
+			var self = this;
+			this.getGridField().bind('reload', function(e, gridfield){
+				self.setFilterValues($(gridfield).getState());
+			});
+		},
+
+		/**
+		 * Function: onsubmit
+		 * 
+		 * Parameters:
+		 *  (Event) e
+		 */
+		onsubmit: function(e) {
+			this.changeState(jQuery(this).find(':submit:first'));
+			return false;
+		},
+
+
+		/**
+		 * Function: setFilterValues
+		 * 
+		 * Parameters:
+		 *  (JSON) state
+		 *
+		 */
+		setFilterValues: function(state){
+			var filterValues = state.GridFieldFilter.Columns;
+			if(jQuery.isEmptyObject(filterValues)){
+				this.resetFilterForm();
+				return;
+			}
+			this.filterFields().each(function(idx, element) {
+				if(typeof filterValues[element.name] !== "undefined") {
+					$(element).val(filterValues[element.name]);
+				}
+			});
+		},
+
+		/**
+		 * Function: onreset
+		 * 
+		 * Parameters:
+		 *  (Event) e
+		 */
+		onreset: function(e) {
+			if(this.resetFilterForm()) {
+				this.changeState(jQuery(this));
+			}
+			return false;
+		},
+
+		/**
+		 * Function resetFilterForm
+		 * 
+		 **/
+		resetFilterForm: function() {
+			var needUpdate = false;
+			this.filterFields().each(function(idx, element) {
+				if($(element).val()) {
+					needUpdate = true; 
+					$(element).val('');
+				}
+				if($(element).hasClass('chzn-done')){
+					$(element).trigger("liszt:updated");
+				}
+			});
+			return needUpdate;
+		},
+
+		/**
+		 * Function: changeState
+		 * 
+		 * Change the state of the gridfield, reloads it's and set loading classes on elements
+		 * 
+		 * Parameters:
+		 *  (Element) element - the element that will get a loading class added / removed
+		 *
+		 */
+		changeState: function(element) {
+			element.addClass('loading');
+			this.getGridField().setState('GridFieldFilter', {'Columns': this.filterValues()});
+			this.getGridField().reload(null, function(){
+				element.removeClass('loading');
+			});
+		},
+
+		/**
+		 * Function filterFields
+		 * Get all fields that contains filter values
+		 *
+		 */
+		filterFields: function() {
+			return this.find(':input').not(".action, .hidden");
+		},
+
+		/**
+		 * Function: filterValues
+		 * 
+		 * Returns an key-value array for the filter values set in the filter form
+		 *
+		 */
+		filterValues: function() {
+			var filterColumns = {};
+			this.filterFields().each(function(idx,elm){
+				filterColumns[$(elm).attr('name')] = $(elm).val();
+			});
+			return filterColumns;
+		}
+	});
 }(jQuery));
 
 // Backwards compatibility

javascript/GridField.js

@@ -3,6 +3,7 @@
 	$('fieldset.ss-gridfield').entwine({
 		/**
 		 * @param {Object} Additional options for jQuery.ajax() call
+		 * @param {successCallback} callback to call after reloading succeeded.
 		 */
 		reload: function(ajaxOpts, successCallback) {
 			var self = this, form = this.closest('form'), data = form.find(':input').serializeArray();
@@ -25,6 +26,7 @@
 
 					form.removeClass('loading');
 					if(successCallback) successCallback.apply(this, arguments);
+					self.trigger('reload', self);
 				},
 				error: function(e) {
 					alert(ss.i18n._t('GRIDFIELD.ERRORINTRANSACTION', 'An error occured while fetching data from the server\n Please try again later.'));
@@ -65,46 +67,6 @@
 		}
 	});
 	
-	/*
-	 * Upon focusing on a filter <input> element, move "filter" and "reset" buttons and display next to the current <input> element
-	 * ToDo ensure filter-button state is maintained after filtering (see resetState param)
-	 * ToDo get working in IE 6-7
-	 */
-	$('fieldset.ss-gridfield input.ss-gridfield-sort').entwine({
-		onfocusin: function(e) {
-			// Dodgy results in IE <=7 & ignore if only one filter-field
-			countfields = $('fieldset.ss-gridfield input.ss-gridfield-sort').length;
-			if(($.browser.msie && $.browser.version <= 7) || countfields == 1) {
-				return false;
-			}
-			var eleInput = $(this);
-
-			// Remove existing <div> and <button> elements in-lieu of cloning
-			this.getGridField().find('th > div').each(function(i,v) {$(v).remove();});	
-
-			var eleButtonSetFilter = $('#action_filter');
-			var eleButtonResetFilter = $('#action_reset');
-			// Retain current widths to ensure <th>'s don't shift widths
-			var eleButtonWidth = eleButtonSetFilter.width();					
-			// Check <th> doesn't already have an (extra) cloned <button> appended, otherwise clone
-			if(eleInput.closest('th').children().length == 1) {
-				var newButtonCss = {
-					'position':'absolute',
-					'top':'-23px',
-					'left':'0',
-					'border':'#EEE solid 1px',
-					'padding':'0',
-					'margin-left':'0'
-				};	
-				// Append a <div> element used purely for CSS positioning - table elements on their own are untrustworthy to style in this manner
-				$('<div/>').append(
-					eleButtonSetFilter.clone().css(newButtonCss),
-					eleButtonResetFilter.clone().css(newButtonCss).css('left',(eleButtonWidth+4)+'px')
-				).css({'position':'relative','margin':'0 auto','width':'65%'}).appendTo(eleInput.closest('th'));
-			}
-		}
-	});	
-
 	/**
 	 * Allows selection of one or more rows in the grid field.
 	 * Purely clientside at the moment.