pryley /
site-reviews
| Conditions | 1 |
| Paths | 4 |
| Total Lines | 86 |
| Lines | 0 |
| Ratio | 0 % |
| Changes | 1 | ||
| Bugs | 0 | Features | 0 |
Small methods make your code easier to understand, in particular if combined with a good name. Besides, if your method is small, finding a good name is usually much easier.
For example, if you find yourself adding comments to a method's body, this is usually a good sign to extract the commented part to a new method, and use the comment as a starting point when coming up with a good name for this new method.
Commonly applied refactorings include:
If many parameters/temporary variables are present:
| 1 | /** global: GLSR, jQuery */ |
||
| 2 | ;(function( x ) { |
||
| 3 | |||
| 4 | 'use strict'; |
||
| 5 | |||
| 6 | var Tabs = function( options ) { |
||
| 7 | this.options = x.extend( {}, this.defaults, options ); |
||
| 8 | this.active = document.querySelector( 'input[name=_active_tab]' ); |
||
| 9 | this.referrer = document.querySelector( 'input[name=_wp_http_referer]' ); |
||
| 10 | this.tabs = document.querySelectorAll( this.options.tabSelector ); |
||
| 11 | this.views = document.querySelectorAll( this.options.viewSelector ); |
||
| 12 | if( !this.active || !this.referrer || !this.tabs || !this.views )return; |
||
| 13 | this.init_(); |
||
| 14 | }; |
||
| 15 | |||
| 16 | Tabs.prototype = { |
||
| 17 | defaults: { |
||
| 18 | tabSelector: '.glsr-nav-tab', |
||
| 19 | viewSelector: '.glsr-nav-view', |
||
| 20 | }, |
||
| 21 | |||
| 22 | /** @return void */ |
||
| 23 | init_: function() { |
||
| 24 | x( window ).on( 'hashchange', this.onHashchange_.bind( this )); |
||
| 25 | [].forEach.call( this.tabs, function( tab, index ) { |
||
| 26 | var active = location.hash ? tab.getAttribute( 'href' ).slice(1) === location.hash.slice(2) : index === 0; |
||
| 27 | if( active ) { |
||
| 28 | this.setTab_( tab ); |
||
| 29 | } |
||
| 30 | tab.addEventListener( 'click', this.onClick_.bind( this )); |
||
| 31 | tab.addEventListener( 'touchend', this.onClick_.bind( this )); |
||
| 32 | }.bind( this )); |
||
| 33 | }, |
||
| 34 | |||
| 35 | /** @return string */ |
||
| 36 | getAction_: function( bool ) { |
||
| 37 | return bool ? 'add' : 'remove'; |
||
| 38 | }, |
||
| 39 | |||
| 40 | /** @return void */ |
||
| 41 | onClick_: function( ev ) { |
||
| 42 | ev.preventDefault(); |
||
| 43 | ev.target.blur(); |
||
| 44 | this.setTab_( ev.target ); |
||
| 45 | location.hash = '!' + ev.target.getAttribute( 'href' ).slice(1); |
||
| 46 | }, |
||
| 47 | |||
| 48 | /** @return void */ |
||
| 49 | onHashchange_: function() { |
||
| 50 | var id = location.hash.split('#!')[1]; |
||
| 51 | for( var i = 0; i < this.views.length; i++ ) { |
||
| 52 | if( id !== this.views[i].id )continue; |
||
| 53 | this.setTab_( this.tabs[i] ); |
||
| 54 | break; |
||
| 55 | } |
||
| 56 | }, |
||
| 57 | |||
| 58 | /** @return void */ |
||
| 59 | setReferrer_: function( index ) { |
||
| 60 | var referrerUrl = this.referrer.value.split('#')[0] + '#!' + this.views[index].id; |
||
| 61 | this.referrer.value = referrerUrl; |
||
| 62 | }, |
||
| 63 | |||
| 64 | /** @return void */ |
||
| 65 | setTab_: function( el ) { |
||
| 66 | [].forEach.call( this.tabs, function( tab, index ) { |
||
| 67 | var action = this.getAction_( tab === el ); |
||
| 68 | if( action === 'add' ) { |
||
| 69 | this.active.value = this.views[index].id; |
||
| 70 | this.setReferrer_( index ); |
||
| 71 | this.setView_( index ); |
||
| 72 | } |
||
| 73 | tab.classList[action]( 'nav-tab-active' ); |
||
| 74 | }.bind( this )); |
||
| 75 | }, |
||
| 76 | |||
| 77 | /** @return void */ |
||
| 78 | setView_: function( idx ) { |
||
| 79 | [].forEach.call( this.views, function( view, index ) { |
||
| 80 | var action = this.getAction_( index !== idx ); |
||
| 81 | view.classList[action]( 'ui-tabs-hide' ); |
||
| 82 | }.bind( this )); |
||
| 83 | }, |
||
| 84 | }; |
||
| 85 | |||
| 86 | GLSR.Tabs = Tabs; |
||
| 87 | })( jQuery ); |
||
| 88 |
