diff options
Diffstat (limited to 'app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js')
-rw-r--r-- | app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js | 116 |
1 files changed, 56 insertions, 60 deletions
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js index 2955bda1a36..0bf2ba6acc2 100644 --- a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js +++ b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js @@ -31,82 +31,78 @@ * * ### How to use * - * new window.gl.LinkedTabs({ + * new LinkedTabs({ * action: "#{controller.action_name}", * defaultAction: 'tab1', * parentEl: '.tab-links' * }); */ -(() => { - window.gl = window.gl || {}; +export default class LinkedTabs { + /** + * Binds the events and activates de default tab. + * + * @param {Object} options + */ + constructor(options = {}) { + this.options = options; - window.gl.LinkedTabs = class LinkedTabs { - /** - * Binds the events and activates de default tab. - * - * @param {Object} options - */ - constructor(options) { - this.options = options || {}; + this.defaultAction = this.options.defaultAction; + this.action = this.options.action || this.defaultAction; - this.defaultAction = this.options.defaultAction; - this.action = this.options.action || this.defaultAction; - - if (this.action === 'show') { - this.action = this.defaultAction; - } + if (this.action === 'show') { + this.action = this.defaultAction; + } - this.currentLocation = window.location; + this.currentLocation = window.location; - const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`; + const tabSelector = `${this.options.parentEl} a[data-toggle="tab"]`; - // since this is a custom event we need jQuery :( - $(document) - .off('shown.bs.tab', tabSelector) - .on('shown.bs.tab', tabSelector, e => this.tabShown(e)); + // since this is a custom event we need jQuery :( + $(document) + .off('shown.bs.tab', tabSelector) + .on('shown.bs.tab', tabSelector, e => this.tabShown(e)); - this.activateTab(this.action); - } + this.activateTab(this.action); + } - /** - * Handles the `shown.bs.tab` event to set the currect url action. - * - * @param {type} evt - * @return {Function} - */ - tabShown(evt) { - const source = evt.target.getAttribute('href'); + /** + * Handles the `shown.bs.tab` event to set the currect url action. + * + * @param {type} evt + * @return {Function} + */ + tabShown(evt) { + const source = evt.target.getAttribute('href'); - return this.setCurrentAction(source); - } + return this.setCurrentAction(source); + } - /** - * Updates the URL with the path that matched the given action. - * - * @param {String} source - * @return {String} - */ - setCurrentAction(source) { - const copySource = source; + /** + * Updates the URL with the path that matched the given action. + * + * @param {String} source + * @return {String} + */ + setCurrentAction(source) { + const copySource = source; - copySource.replace(/\/+$/, ''); + copySource.replace(/\/+$/, ''); - const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`; + const newState = `${copySource}${this.currentLocation.search}${this.currentLocation.hash}`; - history.replaceState({ - url: newState, - }, document.title, newState); - return newState; - } + history.replaceState({ + url: newState, + }, document.title, newState); + return newState; + } - /** - * Given the current action activates the correct tab. - * http://getbootstrap.com/javascript/#tab-show - * Note: Will trigger `shown.bs.tab` - */ - activateTab() { - return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show'); - } - }; -})(); + /** + * Given the current action activates the correct tab. + * http://getbootstrap.com/javascript/#tab-show + * Note: Will trigger `shown.bs.tab` + */ + activateTab() { + return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show'); + } +} |