bootstrap-tab-history-rails 0.0.1 → 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +9 -6
- data/lib/bootstrap-tab-history-rails/version.rb +1 -1
- data/vendor/assets/javascripts/bootstrap-tab-history.js +58 -31
- metadata +2 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 559e4eb8d0a3a7f3d050fa6d12447564b9f453de
|
4
|
+
data.tar.gz: 680007dfcf06e279b03d093c0e6ab55d57465b22
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: dcc970cde2e440fb7817c112966cbe966d2f66976303418dfefaa46daf7f67b53d7909403d4973a1d1c4008fe9fe7e3acda2618d9da59bb3464aa259a77e3d31
|
7
|
+
data.tar.gz: f57b4b2698899582bb04ecfb17bf539e432847920c1683f5eb973df6d6db77279913d10d710f629821c6b38760c423daa3dc5f66cbc236ba62fd05ea900f29f2
|
data/README.md
CHANGED
@@ -8,6 +8,8 @@ with [`bootstrap/tab.js`](http://getbootstrap.com/javascript/#tabs). This enable
|
|
8
8
|
To enable tracking on a tab element, simply set the `data-tab-history` attribute to `true` (or a string denoting a tab
|
9
9
|
grouping).
|
10
10
|
|
11
|
+
Visit our [GitHub Page](http://mnarayan01.github.io/bootstrap-tab-history/) to see it in action.
|
12
|
+
|
11
13
|
Installation
|
12
14
|
------------
|
13
15
|
|
@@ -38,6 +40,9 @@ Individual elements are configured by setting the following data attributes:
|
|
38
40
|
|
39
41
|
* `data-tab-history` - Required. Set to `true` to enable tracking on a tab. Can also be set to an arbitrary string
|
40
42
|
value to support pages with multiple tab groups.
|
43
|
+
* `data-tab-history-anchor-y-offset` - When the anchor portion of the URI is used to activate a tab, scroll down to
|
44
|
+
the given offset, rather than the element with the given `id` attribute. Set to null to disable. Only relevant if
|
45
|
+
`BootstrapTabHistory.options.showTabsBasedOnAnchor` is true.
|
41
46
|
* `data-tab-history-changer`
|
42
47
|
* 'push' - Use [`history.pushState`](https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Manipulating_the_browser_history#The_pushState%28%29.C2.A0method)
|
43
48
|
to update `history.state`. This will allow the use of `history.forward` and `history.back` as users switch
|
@@ -52,6 +57,9 @@ Individual elements are configured by setting the following data attributes:
|
|
52
57
|
|
53
58
|
```javascript
|
54
59
|
BootstrapTabHistory.options = {
|
60
|
+
// Default value corresponding to the `data-tab-history-anchor-y-offset` attribute.
|
61
|
+
defaultAnchorYOffset: 0,
|
62
|
+
|
55
63
|
// Default value corresponding to the `data-tab-history-changer` attribute.
|
56
64
|
defaultChanger: 'replace',
|
57
65
|
|
@@ -60,12 +68,7 @@ BootstrapTabHistory.options = {
|
|
60
68
|
|
61
69
|
// Should the anchor portion of the loaded URI be used to activate a single tab if no history was
|
62
70
|
// present on page load.
|
63
|
-
showTabsBasedOnAnchor: true
|
64
|
-
|
65
|
-
// When the anchor portion of the URI is used to activate a tab, prevent the browser from
|
66
|
-
// scrolling down to the element with the given `id` attribute. Only relevant if
|
67
|
-
// showTabsBasedOnAnchor is true.
|
68
|
-
showTabsBasedOnAnchorPreventScroll: true
|
71
|
+
showTabsBasedOnAnchor: true
|
69
72
|
};
|
70
73
|
```
|
71
74
|
|
@@ -39,6 +39,16 @@
|
|
39
39
|
|
40
40
|
BootstrapTabHistory = {
|
41
41
|
options: {
|
42
|
+
/**
|
43
|
+
* When the anchor portion of the URI is used to activate a tab, scroll down to the given offset, rather than the
|
44
|
+
* element with the given `id` attribute. Set to null to disable. Only relevant if showTabsBasedOnAnchor is true.
|
45
|
+
*
|
46
|
+
* May be overriden on a per-element basis by the attribute `data-tab-history-anchor-y-offset`.
|
47
|
+
*
|
48
|
+
* @public
|
49
|
+
* @type {?number}
|
50
|
+
*/
|
51
|
+
defaultAnchorYOffset: 0,
|
42
52
|
/**
|
43
53
|
* Either 'push' or 'replace', for whether to use `history.pushState` or `history.replaceState`, resp.
|
44
54
|
*
|
@@ -65,15 +75,7 @@ BootstrapTabHistory = {
|
|
65
75
|
* @public
|
66
76
|
* @type {boolean}
|
67
77
|
*/
|
68
|
-
showTabsBasedOnAnchor: true
|
69
|
-
/**
|
70
|
-
* When the anchor portion of the URI is used to activate a tab, prevent the browser from scrolling down to the
|
71
|
-
* element with the given `id` attribute. Only relevant if showTabsBasedOnAnchor is true.
|
72
|
-
*
|
73
|
-
* @public
|
74
|
-
* @type {boolean}
|
75
|
-
*/
|
76
|
-
showTabsBasedOnAnchorPreventScroll: true
|
78
|
+
showTabsBasedOnAnchor: true
|
77
79
|
}
|
78
80
|
};
|
79
81
|
|
@@ -92,7 +94,7 @@ BootstrapTabHistory = {
|
|
92
94
|
|
93
95
|
backfillHistoryState();
|
94
96
|
|
95
|
-
jQuery(
|
97
|
+
jQuery(document).on('shown.bs.tab', onShownTab);
|
96
98
|
jQuery(window).on('popstate', onPopState);
|
97
99
|
} else {
|
98
100
|
showTabsBasedOnAnchor();
|
@@ -180,7 +182,7 @@ BootstrapTabHistory = {
|
|
180
182
|
*/
|
181
183
|
function onShownTab(shownEvt) {
|
182
184
|
if(!showingTabsBasedOnState) {
|
183
|
-
var $activatedTab = jQuery(shownEvt.
|
185
|
+
var $activatedTab = jQuery(shownEvt.target);
|
184
186
|
var selector = getTabSelector($activatedTab);
|
185
187
|
|
186
188
|
if(selector) {
|
@@ -237,19 +239,30 @@ BootstrapTabHistory = {
|
|
237
239
|
var anchor = window.location && window.location.hash;
|
238
240
|
|
239
241
|
if(anchor) {
|
240
|
-
var
|
241
|
-
|
242
|
-
|
243
|
-
|
244
|
-
|
245
|
-
|
246
|
-
|
247
|
-
|
248
|
-
|
249
|
-
|
250
|
-
|
251
|
-
|
252
|
-
|
242
|
+
var $tabElement = showTabForSelector(anchor);
|
243
|
+
|
244
|
+
if($tabElement && window.addEventListener && window.removeEventListener) {
|
245
|
+
var anchorYOffset = (function ($tabElement) {
|
246
|
+
var elementSetting = $tabElement.data('tab-history-anchor-y-offset');
|
247
|
+
|
248
|
+
if(elementSetting === undefined) {
|
249
|
+
return BootstrapTabHistory.options.defaultAnchorYOffset;
|
250
|
+
} else {
|
251
|
+
return elementSetting;
|
252
|
+
}
|
253
|
+
})($tabElement);
|
254
|
+
|
255
|
+
// HACK: This prevents scrolling to the tab on page load. This relies on the fact that we should never get
|
256
|
+
// here on `history.forward`, `history.back`, or `location.reload`, since in all those situations the
|
257
|
+
// `history.state` object should have been used (unless the browser did not support the modern History API).
|
258
|
+
if(anchorYOffset || anchorYOffset === 0) {
|
259
|
+
var scrollListener = function resetAnchorScroll () {
|
260
|
+
window.removeEventListener('scroll', scrollListener);
|
261
|
+
window.scrollTo(0, anchorYOffset);
|
262
|
+
};
|
263
|
+
|
264
|
+
window.addEventListener('scroll', scrollListener);
|
265
|
+
}
|
253
266
|
}
|
254
267
|
}
|
255
268
|
}
|
@@ -259,18 +272,32 @@ BootstrapTabHistory = {
|
|
259
272
|
* Show a tab which corresponds to the provided selector.
|
260
273
|
*
|
261
274
|
* @param {string} selector - A CSS selector.
|
262
|
-
* @returns {
|
275
|
+
* @returns {?jQuery} - The tab which was found to show (even if said tab was already active).
|
263
276
|
*/
|
264
277
|
function showTabForSelector(selector) {
|
265
|
-
var tabElement =
|
278
|
+
var $tabElement = (function (selector) {
|
279
|
+
var $ret = null;
|
266
280
|
|
267
|
-
|
268
|
-
|
281
|
+
jQuery('[data-toggle="tab"], [data-toggle="pill"]').each(function () {
|
282
|
+
var $potentialTab = jQuery(this);
|
269
283
|
|
270
|
-
|
271
|
-
|
272
|
-
|
284
|
+
if(($potentialTab.attr('href') === selector || $potentialTab.data('target') === selector) && getTabGroup($potentialTab)) {
|
285
|
+
$ret = $potentialTab;
|
286
|
+
|
287
|
+
return false;
|
288
|
+
} else {
|
289
|
+
return null;
|
290
|
+
}
|
291
|
+
});
|
292
|
+
|
293
|
+
return $ret;
|
294
|
+
})(selector);
|
295
|
+
|
296
|
+
if($tabElement) {
|
297
|
+
$tabElement.tab('show');
|
273
298
|
}
|
299
|
+
|
300
|
+
return $tabElement;
|
274
301
|
}
|
275
302
|
|
276
303
|
/**
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: bootstrap-tab-history-rails
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.0
|
4
|
+
version: 0.1.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Michael Narayan
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2014-02-
|
11
|
+
date: 2014-02-11 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: railties
|