grapple 0.2.1 → 0.3.3
Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: c1fdb17c60db0a345ed1c02b5a113fd521ed5161f4a46b8dc8ecee1333df11b1
|
4
|
+
data.tar.gz: 12a34fb7e706932732d2a45e3d4a8b385218b3e033832c4659b14c76adefb31e
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c2435e03a84bbd0a2739f3eba1bd3d65e59be0c1fbc4b4a65dab0cd45c28bcf24041229e028c792107d269ca67fed7c9e30772eff3c096c9780d836e14d6e0bb
|
7
|
+
data.tar.gz: d0de48f319d81ce46af1d1959abacb8697b440bac4950aea50d3ac64756f3daffe6d08af84d01c3912733b7b2981f051b9654a6bc9a8c5857605d7b8904a51af
|
data/README.md
CHANGED
@@ -189,7 +189,7 @@ Render the table using `table_for` in `app/views/posts/_table.html.erb`
|
|
189
189
|
|
190
190
|
## History w/AJAX (back button)
|
191
191
|
|
192
|
-
|
192
|
+
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/).
|
193
193
|
|
194
194
|
``` javascript
|
195
195
|
// app/assets/javascripts/application.js
|
@@ -4,25 +4,62 @@
|
|
4
4
|
var urlQuery = Grapple.Util.urlQuery,
|
5
5
|
parseUrlQuery = Grapple.Util.parseUrlQuery;
|
6
6
|
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
11
|
-
this.api = History;
|
7
|
+
// History.js for backwards compatibility with older browsers
|
8
|
+
// https://github.com/browserstate/history.js/
|
9
|
+
var LegacyHistory = function() {
|
10
|
+
var api = History;
|
12
11
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
}
|
12
|
+
// Initialization of history.js can be delayed
|
13
|
+
// if it was do it now
|
14
|
+
if(api.options && api.options.delayInit) {
|
15
|
+
api.options.delayInit = false;
|
16
|
+
api.init();
|
19
17
|
}
|
20
|
-
|
21
|
-
|
22
|
-
|
18
|
+
this.api = api;
|
19
|
+
};
|
20
|
+
|
21
|
+
LegacyHistory.prototype = {
|
22
|
+
push: function(params) {
|
23
|
+
return this.api.pushState(null, document.title, '?' + params);
|
24
|
+
},
|
25
|
+
get: function() {
|
26
|
+
return urlQuery(this.api.getState().url);
|
27
|
+
},
|
28
|
+
bind: function(callback) {
|
29
|
+
$(window).bind('statechange', callback);
|
30
|
+
},
|
31
|
+
unbind: function(callback) {
|
32
|
+
$(window).unbind('statechange', callback);
|
23
33
|
}
|
24
|
-
|
25
|
-
|
34
|
+
};
|
35
|
+
|
36
|
+
// Native Browser History API
|
37
|
+
var ModernHistory = function() {
|
38
|
+
|
39
|
+
};
|
40
|
+
|
41
|
+
ModernHistory.prototype = {
|
42
|
+
push: function(params) {
|
43
|
+
if(window.history && window.history.pushState) {
|
44
|
+
return window.history.pushState(params, document.title, '?' + params);
|
45
|
+
}
|
46
|
+
},
|
47
|
+
get: function() {
|
48
|
+
if(window.history) {
|
49
|
+
return window.history.state || urlQuery(document.location.toString());
|
50
|
+
}
|
51
|
+
},
|
52
|
+
bind: function(callback) {
|
53
|
+
$(window).bind('popstate', callback);
|
54
|
+
},
|
55
|
+
unbind: function(callback) {
|
56
|
+
$(window).unbind('popstate', callback);
|
57
|
+
}
|
58
|
+
};
|
59
|
+
|
60
|
+
var GrappleHistory = function(grappleTable) {
|
61
|
+
this.grappleTable = grappleTable;
|
62
|
+
this._historyChangeCallback = null;
|
26
63
|
};
|
27
64
|
|
28
65
|
// Don't clutter the url with rails form parameters
|
@@ -30,10 +67,20 @@ GrappleHistory.IGNORE_PARAMS = { 'utf8': true, 'authenticity_token': true };
|
|
30
67
|
|
31
68
|
GrappleHistory.prototype = {
|
32
69
|
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
70
|
+
init: function() {
|
71
|
+
// Use the History.js wrapper if History.js has been loaded
|
72
|
+
this.api = typeof History !== 'undefined' && History.init ? new LegacyHistory() : new ModernHistory();
|
73
|
+
this._subscribeToTableChange();
|
74
|
+
this._subscribeToHistoryChange();
|
75
|
+
},
|
76
|
+
|
77
|
+
/**
|
78
|
+
* Add an entry to the history
|
79
|
+
* @param {String} params
|
80
|
+
*/
|
81
|
+
_addHistoryEntry: function(params) {
|
82
|
+
var namespace = this.grappleTable.namespace;
|
83
|
+
var historyParams = parseUrlQuery(this.api.get());
|
37
84
|
var newParams = parseUrlQuery(params);
|
38
85
|
|
39
86
|
// Remove any parameters from the current state
|
@@ -57,14 +104,45 @@ GrappleHistory.prototype = {
|
|
57
104
|
historyParams[x] = newParams[x];
|
58
105
|
}
|
59
106
|
|
60
|
-
this.api.
|
107
|
+
this.api.push($.param(historyParams));
|
61
108
|
},
|
62
109
|
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
110
|
+
/**
|
111
|
+
* Listen for changes to the table to add them to the history
|
112
|
+
*/
|
113
|
+
_subscribeToTableChange: function() {
|
114
|
+
var self = this;
|
115
|
+
this._beforeLoadCallback = function(e, params) {
|
116
|
+
self._unsubscribeFromTableChange();
|
117
|
+
self._unsubscribeFromHistoryChange();
|
118
|
+
// Don't add params to history if this was triggered by history change
|
119
|
+
if(self._ignoreNextLoad) {
|
120
|
+
self._ignoreNextLoad = false;
|
121
|
+
}
|
122
|
+
else {
|
123
|
+
self._addHistoryEntry(params);
|
124
|
+
}
|
125
|
+
};
|
126
|
+
this.grappleTable.element.on('grapple:before_load', this._beforeLoadCallback);
|
127
|
+
},
|
128
|
+
|
129
|
+
/**
|
130
|
+
* Stop listening for changes to the table
|
131
|
+
*/
|
132
|
+
_unsubscribeFromTableChange: function() {
|
133
|
+
if(this._beforeLoadCallback) {
|
134
|
+
this.grappleTable.element.unbind('grapple:before_load', this._beforeLoadCallback);
|
135
|
+
this._beforeLoadCallback = null;
|
136
|
+
}
|
137
|
+
},
|
138
|
+
|
139
|
+
/**
|
140
|
+
* Listen for changes to the history (back button clicks)
|
141
|
+
*/
|
142
|
+
_subscribeToHistoryChange: function() {
|
143
|
+
var api = this.api, namespace = this.grappleTable.namespace, self = this;
|
144
|
+
this._historyChangeCallback = function(event) {
|
145
|
+
var params = parseUrlQuery(api.get());
|
68
146
|
// Only include the parameters for this namespace
|
69
147
|
if(namespace) {
|
70
148
|
var r = new RegExp('^' + namespace + '\\[([^\\]]+)\\]$')
|
@@ -74,15 +152,19 @@ GrappleHistory.prototype = {
|
|
74
152
|
}
|
75
153
|
}
|
76
154
|
}
|
77
|
-
|
155
|
+
self._ignoreNextLoad = true;
|
156
|
+
self.grappleTable.loadTable($.param(params));
|
78
157
|
};
|
79
|
-
|
158
|
+
this.api.bind(this._historyChangeCallback);
|
80
159
|
},
|
81
160
|
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
161
|
+
/**
|
162
|
+
* Stop listening for history changes
|
163
|
+
*/
|
164
|
+
_unsubscribeFromHistoryChange: function() {
|
165
|
+
if(this._historyChangeCallback) {
|
166
|
+
this.api.unbind(this._historyChangeCallback);
|
167
|
+
this._historyChangeCallback = null;
|
86
168
|
}
|
87
169
|
}
|
88
170
|
|
@@ -1,8 +1,5 @@
|
|
1
1
|
(function(Grapple, $) {
|
2
2
|
'use strict';
|
3
|
-
|
4
|
-
var urlQuery = Grapple.Util.urlQuery,
|
5
|
-
parseUrlQuery = Grapple.Util.parseUrlQuery;
|
6
3
|
|
7
4
|
var overrideLink = function(clickable, anchor, callback) {
|
8
5
|
var href = $(anchor).attr('href');
|
@@ -15,8 +12,8 @@ var overrideLink = function(clickable, anchor, callback) {
|
|
15
12
|
/**
|
16
13
|
* Creates a new instance of the Grapple AJAX widget.
|
17
14
|
*
|
18
|
-
* @param {String} Selector for the table container element.
|
19
|
-
* @param {Object} Hash of options for the table (url, namespace, history)
|
15
|
+
* @param {String} element - Selector for the table container element.
|
16
|
+
* @param {Object} options - Hash of options for the table (url, namespace, history)
|
20
17
|
*/
|
21
18
|
var GrappleTable = function(element, options) {
|
22
19
|
options = options || {};
|
@@ -24,16 +21,19 @@ var GrappleTable = function(element, options) {
|
|
24
21
|
this.url = options.url || this.element.data('grapple-ajax-url');
|
25
22
|
this.namespace = options.namespace || this.element.data('grapple-ajax-namespace') || null;
|
26
23
|
this.currentParams = options.params || '';
|
24
|
+
this.plugins = {};
|
27
25
|
if(typeof options.history !== 'undefined' && options.history !== true) {
|
28
|
-
this.history = options.history;
|
26
|
+
this.plugins.history = options.history;
|
29
27
|
}
|
30
28
|
else if(this.element.data('grapple-ajax-history') == 1 || options.history === true) {
|
31
|
-
this.history = new Grapple.History(this
|
32
|
-
}
|
33
|
-
else {
|
34
|
-
this.history = null;
|
29
|
+
this.plugins.history = new Grapple.History(this);
|
35
30
|
}
|
31
|
+
|
36
32
|
this.init();
|
33
|
+
|
34
|
+
if (this.element.data('grapple-ajax-init-params')) {
|
35
|
+
this.loadTable(this.element.data('grapple-ajax-init-params'))
|
36
|
+
}
|
37
37
|
};
|
38
38
|
|
39
39
|
GrappleTable.CSS_AJAX_LOADING = 'grapple-ajax-loading';
|
@@ -44,7 +44,7 @@ GrappleTable.NON_TABLE_RESPONSE = '<!DOCTYPE html>';
|
|
44
44
|
GrappleTable.prototype = {
|
45
45
|
|
46
46
|
/**
|
47
|
-
*
|
47
|
+
* Initialize the grapple table
|
48
48
|
*/
|
49
49
|
init: function() {
|
50
50
|
var self = this;
|
@@ -56,39 +56,29 @@ GrappleTable.prototype = {
|
|
56
56
|
self.initSorting();
|
57
57
|
self.initSearchForm();
|
58
58
|
self.initPagination();
|
59
|
-
self.
|
59
|
+
self.initPlugins();
|
60
60
|
|
61
61
|
self.element.removeClass(GrappleTable.CSS_AJAX_LOADING);
|
62
62
|
},
|
63
63
|
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
this.
|
70
|
-
self.onHistoryChange(params);
|
71
|
-
});
|
64
|
+
/**
|
65
|
+
* Initialize plugins
|
66
|
+
*/
|
67
|
+
initPlugins: function() {
|
68
|
+
for(var name in this.plugins) {
|
69
|
+
this.plugins[name].init();
|
72
70
|
}
|
73
71
|
},
|
74
72
|
|
75
|
-
onHistoryChange: function(params) {
|
76
|
-
this._showLoading();
|
77
|
-
this._updateTable($.param(params));
|
78
|
-
},
|
79
|
-
|
80
73
|
/**
|
81
|
-
*
|
74
|
+
* Load the table contents
|
75
|
+
* @param {String} params - Query string of parameters to load the table with
|
76
|
+
* @fires Grapple#grapple:before_load
|
77
|
+
* @fires Grapple#grapple:after_load
|
82
78
|
*/
|
83
79
|
loadTable: function(params) {
|
84
|
-
this.element.trigger('grapple:before_load');
|
80
|
+
this.element.trigger('grapple:before_load', params);
|
85
81
|
this._showLoading();
|
86
|
-
|
87
|
-
if(this.history) {
|
88
|
-
this.history.unsubscribe();
|
89
|
-
this.history.add(params);
|
90
|
-
}
|
91
|
-
|
92
82
|
this._updateTable(params);
|
93
83
|
},
|
94
84
|
|
@@ -116,17 +106,18 @@ GrappleTable.prototype = {
|
|
116
106
|
url += (url.indexOf('?') == -1 ? '?' : '&') + params;
|
117
107
|
}
|
118
108
|
$.ajax(url, {
|
109
|
+
beforeSend: function() {
|
110
|
+
var event = jQuery.Event('grapple:before_ajax_send');
|
111
|
+
self.element.trigger(event, { url: url });
|
112
|
+
return !event.isDefaultPrevented();
|
113
|
+
},
|
119
114
|
success: function(data) {
|
120
|
-
// HACK
|
115
|
+
// HACK: handle full page responses
|
121
116
|
var nonTableKeyIndex = data.indexOf(GrappleTable.NON_TABLE_RESPONSE);
|
122
117
|
if(nonTableKeyIndex > -1 && nonTableKeyIndex < 100) {
|
123
118
|
data = "Failed to load table";
|
124
119
|
}
|
125
|
-
self.
|
126
|
-
self.element.html(data);
|
127
|
-
self.init();
|
128
|
-
self._hideLoading();
|
129
|
-
self.element.trigger('grapple:after_load');
|
120
|
+
self.loadHtml(data, url);
|
130
121
|
},
|
131
122
|
error: function(a, b, c) {
|
132
123
|
// TODO: handle loading errors
|
@@ -135,6 +126,14 @@ GrappleTable.prototype = {
|
|
135
126
|
});
|
136
127
|
},
|
137
128
|
|
129
|
+
loadHtml: function(html, url) {
|
130
|
+
this.element.addClass(GrappleTable.CSS_AJAX_LOADING);
|
131
|
+
this.element.html(html);
|
132
|
+
this.init();
|
133
|
+
this._hideLoading();
|
134
|
+
this.element.trigger('grapple:after_load', { url: url, html: html });
|
135
|
+
},
|
136
|
+
|
138
137
|
initSorting: function() {
|
139
138
|
var self = this;
|
140
139
|
this.header.find('th.sortable').each(function(i, elem) {
|
@@ -19,9 +19,9 @@ module Grapple
|
|
19
19
|
|
20
20
|
if records.instance_of?(Array)
|
21
21
|
html = ' '
|
22
|
-
elsif
|
22
|
+
elsif records.empty?
|
23
23
|
html = h(t(no_results_message))
|
24
|
-
td_class = "class='text-left'"
|
24
|
+
td_class = "class='no-results-message text-left'"
|
25
25
|
else
|
26
26
|
paginate_parameters[:param_name] = url_parameter(:page) if builder.namespace
|
27
27
|
options = { renderer: renderer }.select { |_, value| !value.nil? }.merge(paginate_parameters)
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: grapple
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.3.3
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Edward Potocko
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date:
|
13
|
+
date: 2020-12-11 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: actionpack
|
@@ -206,8 +206,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
|
|
206
206
|
- !ruby/object:Gem::Version
|
207
207
|
version: '0'
|
208
208
|
requirements: []
|
209
|
-
|
210
|
-
rubygems_version: 2.7.6.2
|
209
|
+
rubygems_version: 3.1.2
|
211
210
|
signing_key:
|
212
211
|
specification_version: 4
|
213
212
|
summary: Customizable data grid for Rails
|