grapple 0.2.0 → 0.3.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
-SHA1:
-  metadata.gz: 670fc0f6b9406162b5de3113dc4869e181f64b73
-  data.tar.gz: da7f27323caa88f1847c1a58f753ca94a96d1888
+SHA256:
+  metadata.gz: 9a76259d2dd289df0f09d714b30fa6ead30003ac4b63554c8232027f0f729317
+  data.tar.gz: 47fad8fb8ea7b8e3015d4598301149f0a3fb7c2a761a464be85081d0865ea339
 SHA512:
-  metadata.gz: a6bd235b2e4ad38bb45cf7755f5b84b82e0461d2f7124e3131d11a85f64f8f57d69619d8135531c475682559e2570b4946c807796413b2c9121873ba53c37412
-  data.tar.gz: bc324f20226c679b46f848032a5eabdf00502a395afd12ff2e61962c244304fe56a09f0da3717d22cf418cf5d64f9d5a39583e28b9b6dd40f0cf4101bfdad633
+  metadata.gz: de415d06be64cd90a834600fe9964f3d5df2a65e361e8175789a9a5e4d240d4d4b12ec0c061c4cbddc450708422f2da1c164c269b484ecd3b6844cb10f5d3729
+  data.tar.gz: 995d9c603e2f9a09ef9ede25a26af02a51aa112ae3bdb4756542d234dd2fdb07af4772a99634c4a7241e70a9831483ba6fe704205c77f4542d2e1fc49dbda986

data/README.md

@@ -189,7 +189,7 @@ Render the table using `table_for` in `app/views/posts/_table.html.erb`
 
 ## History w/AJAX (back button)
 
-Requires: https://github.com/browserstate/history.js/
+Uses the native `window.history` API by default. If History.js is present it will use that instead for compatibility with older browsers (https://github.com/browserstate/history.js/).
 
 ``` javascript
 // app/assets/javascripts/application.js

data/app/assets/javascripts/grapple-history.js

@@ -4,25 +4,62 @@
 var urlQuery = Grapple.Util.urlQuery, 
 	parseUrlQuery = Grapple.Util.parseUrlQuery;
 
-var GrappleHistory = function(namespace) {
-	this.namespace = namespace;
-	if(History.init) {
-		// https://github.com/browserstate/history.js/
-		this.api = History;
+// History.js for backwards compatibility with older browsers
+// https://github.com/browserstate/history.js/
+var LegacyHistory = function() {
+	var api = History;
 		
-		// Initialization of history.js can be delayed
-		// if it was do it now
-		if(this.api.options && this.api.options.delayInit) {
-			this.api.options.delayInit = false;
-			this.api.init();
-		}
+	// Initialization of history.js can be delayed
+	// if it was do it now
+	if(api.options && api.options.delayInit) {
+		api.options.delayInit = false;
+		api.init();
 	}
-	else {
-		// TODO: support native history api
-		this.api = window.history;
+	this.api = api;
+};
+
+LegacyHistory.prototype = {
+	push: function(params) {
+		return this.api.pushState(null, document.title, '?' + params);
+	},
+	get: function() {
+		return urlQuery(this.api.getState().url);
+	},
+	bind: function(callback) {
+		$(window).bind('statechange', callback);
+	},
+	unbind: function(callback) {
+		$(window).unbind('statechange', callback);
 	}
-	this.api = History;
-	this.changeCallback = null;
+};
+
+// Native Browser History API
+var ModernHistory = function() {
+
+};
+
+ModernHistory.prototype = {
+	push: function(params) {
+		if(window.history && window.history.pushState) {
+			return window.history.pushState(params, document.title, '?' + params);
+		}
+	},
+	get: function() {
+		if(window.history) {
+			return window.history.state || urlQuery(document.location.toString());
+		}
+	},
+	bind: function(callback) {
+		$(window).bind('popstate', callback);
+	},
+	unbind: function(callback) {
+		$(window).unbind('popstate', callback);
+	}
+};
+
+var GrappleHistory = function(grappleTable) {
+	this.grappleTable = grappleTable;
+	this._historyChangeCallback = null;
 };
 
 // Don't clutter the url with rails form parameters
@@ -30,10 +67,20 @@ GrappleHistory.IGNORE_PARAMS = { 'utf8': true, 'authenticity_token': true };
 
 GrappleHistory.prototype = {
 
-	add: function(params) {
-		var namespace = this.namespace;
-		var state = this.api.getState();
-		var historyParams = parseUrlQuery(urlQuery(state.url));
+	init: function() {
+		// Use the History.js wrapper if History.js has been loaded
+		this.api = typeof History !== 'undefined' && History.init ? new LegacyHistory() : new ModernHistory();
+		this._subscribeToTableChange();
+		this._subscribeToHistoryChange();
+	},
+
+	/**
+	 * Add an entry to the history
+	 * @param {String} params 
+	 */
+	_addHistoryEntry: function(params) {
+		var namespace = this.grappleTable.namespace;
+		var historyParams = parseUrlQuery(this.api.get());
 		var newParams = parseUrlQuery(params);
 
 		// Remove any parameters from the current state 
@@ -57,14 +104,45 @@ GrappleHistory.prototype = {
 			historyParams[x] = newParams[x];
 		}
 		
-		this.api.pushState(null, document.title, '?' + $.param(historyParams));
+		this.api.push($.param(historyParams));
 	},
 	
-	subscribe: function(callback) {
-		var api = this.api, namespace = this.namespace;
-		this.changeCallback = function(event) {
-			var state = api.getState();
-			var params = parseUrlQuery(urlQuery(state.url));
+	/**
+	 * Listen for changes to the table to add them to the history
+	 */
+	_subscribeToTableChange: function() {
+		var self = this;
+		this._beforeLoadCallback = function(e, params) {
+			self._unsubscribeFromTableChange();
+			self._unsubscribeFromHistoryChange();
+			// Don't add params to history if this was triggered by history change
+			if(self._ignoreNextLoad) {
+				self._ignoreNextLoad = false;
+			}
+			else {
+				self._addHistoryEntry(params);
+			}
+		};
+		this.grappleTable.element.on('grapple:before_load', this._beforeLoadCallback);
+	},
+
+	/**
+	 * Stop listening for changes to the table
+	 */
+	_unsubscribeFromTableChange: function() {
+		if(this._beforeLoadCallback) {
+			this.grappleTable.element.unbind('grapple:before_load', this._beforeLoadCallback);
+			this._beforeLoadCallback = null;
+		}
+	},
+
+	/**
+	 * Listen for changes to the history (back button clicks)
+	 */
+	_subscribeToHistoryChange: function() {
+		var api = this.api, namespace = this.grappleTable.namespace, self = this;
+		this._historyChangeCallback = function(event) {
+			var params = parseUrlQuery(api.get());
 			// Only include the parameters for this namespace
 			if(namespace) {
 				var r = new RegExp('^' + namespace + '\\[([^\\]]+)\\]$')
@@ -74,15 +152,19 @@ GrappleHistory.prototype = {
 					}
 				}
 			}
-			callback(params);
+			self._ignoreNextLoad = true;
+			self.grappleTable.loadTable($.param(params));
 		};
-		$(window).bind('statechange', this.changeCallback);
+		this.api.bind(this._historyChangeCallback);
 	},
 	
-	unsubscribe: function() {
-		if(this.changeCallback) {
-			$(window).unbind('statechange', this.changeCallback);
-			this.changeCallback = null;
+	/**
+	 * Stop listening for history changes
+	 */
+	_unsubscribeFromHistoryChange: function() {
+		if(this._historyChangeCallback) {
+			this.api.unbind(this._historyChangeCallback);
+			this._historyChangeCallback = null;
 		}
 	}
 	

data/app/assets/javascripts/grapple-jquery.js

@@ -1,8 +1,5 @@
 (function(Grapple, $) {
 	'use strict';
-
-var urlQuery = Grapple.Util.urlQuery, 
-	parseUrlQuery = Grapple.Util.parseUrlQuery;
 	
 var overrideLink = function(clickable, anchor, callback) {
 	var href = $(anchor).attr('href');
@@ -15,8 +12,8 @@ var overrideLink = function(clickable, anchor, callback) {
 /**
  * Creates a new instance of the Grapple AJAX widget.
  *
- * @param {String} Selector for the table container element.
- * @param {Object} Hash of options for the table (url, namespace, history)
+ * @param {String} element - Selector for the table container element.
+ * @param {Object} options - Hash of options for the table (url, namespace, history)
  */
 var GrappleTable = function(element, options) {
 	options = options || {};
@@ -24,16 +21,19 @@ var GrappleTable = function(element, options) {
 	this.url = options.url || this.element.data('grapple-ajax-url');
 	this.namespace = options.namespace || this.element.data('grapple-ajax-namespace') || null;
 	this.currentParams = options.params || '';
+	this.plugins = {};
 	if(typeof options.history !== 'undefined' && options.history !== true) {
-		this.history = options.history;
+		this.plugins.history = options.history;
 	}
 	else if(this.element.data('grapple-ajax-history') == 1 || options.history === true) {
-		this.history = new Grapple.History(this.namespace);
-	}
-	else {
-		this.history = null;
+		this.plugins.history = new Grapple.History(this);
 	}
+
 	this.init();
+
+	if (this.element.data('grapple-ajax-init-params')) {
+		this.loadTable(this.element.data('grapple-ajax-init-params'))
+	}
 };
 
 GrappleTable.CSS_AJAX_LOADING = 'grapple-ajax-loading';
@@ -44,7 +44,7 @@ GrappleTable.NON_TABLE_RESPONSE = '<!DOCTYPE html>';
 GrappleTable.prototype = {
 	
 	/**
-	 *
+	 * Initialize the grapple table
 	 */
 	init: function() {
 		var self = this;
@@ -56,39 +56,29 @@ GrappleTable.prototype = {
 		self.initSorting();
 		self.initSearchForm();
 		self.initPagination();
-		self.initHistory();
+		self.initPlugins();
 		
 		self.element.removeClass(GrappleTable.CSS_AJAX_LOADING);
 	},
 
-	initHistory: function() {
-		if(this.history) {
-			var self = this;
-			this.history.unsubscribe();
-			this.history = new Grapple.History(this.namespace);
-			this.history.subscribe(function(params) {
-				self.onHistoryChange(params);
-			});
+	/**
+	 * Initialize plugins
+	 */
+	initPlugins: function() {
+		for(var name in this.plugins) {
+			this.plugins[name].init();
 		}
 	},
 	
-	onHistoryChange: function(params) {
-		this._showLoading();
-		this._updateTable($.param(params));
-	},
-	
 	/**
-	 *
+	 * Load the table contents
+	 * @param {String} params - Query string of parameters to load the table with
+	 * @fires Grapple#grapple:before_load
+	 * @fires Grapple#grapple:after_load
 	 */
 	loadTable: function(params) {
-		this.element.trigger('grapple:before_load');
+		this.element.trigger('grapple:before_load', params);
 		this._showLoading();
-
-		if(this.history) {
-			this.history.unsubscribe();
-			this.history.add(params);
-		}
-		
 		this._updateTable(params);
 	},
 	
@@ -117,7 +107,7 @@ GrappleTable.prototype = {
 		}
 		$.ajax(url, {
 			success: function(data) {
-				// HACK
+				// HACK: handle full page responses
 				var nonTableKeyIndex = data.indexOf(GrappleTable.NON_TABLE_RESPONSE);
 				if(nonTableKeyIndex > -1 && nonTableKeyIndex < 100) {
 					data = "Failed to load table";

data/app/assets/javascripts/grapple.js

@@ -1,9 +1,6 @@
 (function(globals) {
 	'use strict';
 
-// Namespace
-var Grapple = {};
-
 var decodeParam = function(str) { 
 	return decodeURIComponent(str.replace(/\+/g, " "));
 };

data/config/locales/en.yml

@@ -1,2 +1,5 @@
 en:
-  no_search_results: "We're sorry. No results were found."
+  displaying_x_y_of_z_results: "Displaying %{x} - %{y} of %{z} results"
+  no_search_results: "We're sorry. No results were found."
+  search: "Search"
+  zero_results: "0 results"

data/lib/grapple/components/search_query_field.rb

@@ -9,7 +9,7 @@ module Grapple
 				template.text_field_tag(
 					search_query_param.to_s, 
 					params[search_query_param.to_sym], 
-					{ :class => search_query_field_class, placeholder: "Search" }
+					{ class: search_query_field_class, placeholder: I18n.translate(:search) }
 				)
 			end
 

data/lib/grapple/components/will_paginate_infobar.rb

@@ -2,9 +2,6 @@ module Grapple
 	module Components
 		class WillPaginateInfobar < HtmlComponent
 
-			setting :message, "Displaying %s - %s of %s results"
-			setting :no_results_message, "0 results"
-
 			def render
 				if records.total_entries > 0
 					start_range = records.offset + 1
@@ -14,12 +11,12 @@ module Grapple
 					end_range = ActiveSupport::NumberHelper.number_to_delimited(end_range)
 					total = ActiveSupport::NumberHelper.number_to_delimited(records.total_entries)
 
-					html = sprintf(message, start_range, end_range, total)
+					html = I18n.translate(:displaying_x_y_of_z_results, x: start_range, y: end_range, z: total)
 				else
-					html = no_results_message
+					html = I18n.translate(:zero_results)
 				end
 
-				builder.row "<th colspan=\"#{num_columns}\">#{html}</th>", :class => 'infobar'
+				builder.row "<th colspan=\"#{num_columns}\">#{html}</th>", class: 'infobar'
 			end
 
 		end

data/lib/grapple/components/will_paginate_pagination.rb

@@ -19,9 +19,9 @@ module Grapple
 
 				if records.instance_of?(Array)
 					html = ' '
-				elsif params.has_key?(:query) && records.empty?
+				elsif records.empty?
 					html = h(t(no_results_message))
-					td_class = "class='text-left'"
+					td_class = "class='no-results-message text-left'"
 				else
 					paginate_parameters[:param_name] = url_parameter(:page) if builder.namespace
 					options = { renderer: renderer }.select { |_, value| !value.nil? }.merge(paginate_parameters)

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: grapple
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.3.2
 platform: ruby
 authors:
 - Edward Potocko
@@ -10,7 +10,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2019-11-18 00:00:00.000000000 Z
+date: 2020-12-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -206,8 +206,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubyforge_project: 
-rubygems_version: 2.6.14.1
+rubygems_version: 3.1.2
 signing_key: 
 specification_version: 4
 summary: Customizable data grid for Rails