Dotclear

Changeset 2113:a134102bfd9a


Ignore:
Timestamp:
09/27/13 16:18:17 (12 years ago)
Author:
Nicolas <nikrou77@…>
Branch:
default
Children:
2114:7f63aa8eeebf, 2134:b3b9847a5d45
Message:

Refactoring for jQuery pageTabs plugin
Navigation in history comes back (onhashchange)
Fix ie7-hashchange to not use $.browser
Fix use of trigger for onetabload and tabload events

Add tests for onhashchange
Add tests for onetabload and tabload event
(Tested on chrome, IE8 and firefox 24)

Files:
1 added
4 edited

Legend:

Unmodified
Added
Removed

  • admin/js/jquery/jquery.pageTabs.js

    r2088 r2113  
    1111          }; 
    1212           
    13           var options = $.extend({}, defaults, opts); 
     13          $.pageTabs.options = $.extend({}, defaults, opts); 
    1414          var active_tab = start_tab || ''; 
    15           var hash = $.pageTabsGetHash(); 
     15          var hash = $.pageTabs.getLocationHash(); 
    1616 
    1717          if (hash !== undefined && hash) { 
    … …  
    1919               active_tab = hash; 
    2020          } else if (active_tab == '') { // open first part 
    21                active_tab = $('.'+options.contentClass+':eq(0)').attr('id'); 
     21               active_tab = $('.'+$.pageTabs.options.contentClass+':eq(0)').attr('id'); 
    2222          } 
     23 
     24          createTabs(); 
    2325           
    24           createTabs(active_tab, options); 
    25            
    26           $('ul li', '.'+options.containerClass).click(function(e) { 
    27                $(this).parent().find('li.'+options.activeClass).removeClass(options.activeClass); 
    28                $(this).addClass(options.activeClass); 
    29                $('.'+options.contentClass+'.active').removeClass('active').hide(); 
    30                $('#'+options.partPrefix+getId($(this).find('a').attr('href'))).addClass('active') 
    31                     .show() 
    32                     .onetabload() 
    33                     .tabload(); 
     26          $('ul li', '.'+$.pageTabs.options.containerClass).click(function(e) { 
     27               if ($(this).hasClass($.pageTabs.options.activeClass)) { 
     28                    return; 
     29               } 
     30 
     31               $(this).parent().find('li.'+$.pageTabs.options.activeClass).removeClass($.pageTabs.options.activeClass); 
     32               $(this).addClass($.pageTabs.options.activeClass); 
     33               $('.'+$.pageTabs.options.contentClass+'.active').removeClass('active').hide(); 
     34 
     35               var part_to_activate = $('#'+$.pageTabs.options.partPrefix+getHash($(this).find('a').attr('href'))); 
     36 
     37               part_to_activate.addClass('active').show(); 
     38               if (!part_to_activate.hasClass('loaded')) { 
     39                    part_to_activate.onetabload(); 
     40                    part_to_activate.addClass('loaded'); 
     41               } 
     42                
     43               part_to_activate.tabload(); 
    3444          }); 
     45 
     46          $(window).bind('hashchange onhashchange', function(e) { 
     47               $.pageTabs.clickTab($.pageTabs.getLocationHash()); 
     48          }); 
     49 
     50          $.pageTabs.clickTab(active_tab); 
    3551           
    3652          return this; 
    3753     }; 
    3854      
    39      var createTabs = function createTabs(start_tab, options) { 
    40           var lis = [], li_class = '', to_trigger = null; 
     55     var createTabs = function createTabs() { 
     56          var lis = [], li_class = ''; 
    4157           
    42           $('.'+options.contentClass).each(function() { 
    43                if (start_tab != $(this).attr('id')) { 
    44                     $(this).hide(); 
    45                     li_class = ''; 
    46                } else { 
    47                     $(this).addClass('active'); 
    48                     to_trigger = $(this); 
    49                     li_class = ' class="'+options.activeClass+'"'; 
    50                } 
    51                lis.push('<li id="'+options.idTabPrefix+$(this).attr('id')+'"'+li_class 
    52                      +'><a href="#'+$(this).attr('id')+'">'+$(this).attr('title')+'</a></li>'); 
    53                $(this).attr('id', options.partPrefix + $(this).attr('id')).prop('title',''); 
     58          $('.'+$.pageTabs.options.contentClass).each(function() { 
     59               $(this).hide(); 
     60               lis.push('<li id="'+$.pageTabs.options.idTabPrefix+$(this).attr('id')+'">' 
     61                     +'<a href="#'+$(this).attr('id')+'">'+$(this).attr('title')+'</a></li>'); 
     62               $(this).attr('id', $.pageTabs.options.partPrefix + $(this).attr('id')).prop('title',''); 
    5463          }); 
    5564           
    56           $('<div class="'+options.containerClass+'"><ul>'+lis.join('')+'</ul></div>') 
    57                .insertBefore($('.'+options.contentClass).get(0));      
    58  
    59           if (to_trigger != null) { 
    60                $(to_trigger).onetabload(); 
    61                $(to_trigger).tabload();  
    62           } 
    63  
     65          $('<div class="'+$.pageTabs.options.containerClass+'"><ul>'+lis.join('')+'</ul></div>') 
     66               .insertBefore($('.'+$.pageTabs.options.contentClass).get(0)); 
    6467     }; 
    6568      
    66      var getId = function getId(href) { 
    67           return href.split('#').join(''); 
     69     var getHash = function getHash(href) { 
     70          return href.replace(/.*#/, ''); 
     71     }; 
     72      
     73     $.pageTabs.clickTab = function(tab) { 
     74          $('ul li a', '.'+$.pageTabs.options.containerClass).filter(function() { 
     75               return getHash($(this).attr('href'))==tab; 
     76          }).parent().click(); 
    6877     }; 
    6978 
    70      $.pageTabsGetHash = function() { 
    71           return document.location.hash.split('#').join(''); 
     79     $.pageTabs.getLocationHash = function() { 
     80          return getHash(document.location.hash); 
    7281     }; 
    7382})(jQuery); 

  • inc/admin/lib.dc.page.php

    r2082 r2113  
    644644               $default = "'".html::escapeJS($default)."'"; 
    645645          } 
    646  
     646           
    647647          return 
    648648          self::jsLoad('js/jquery/jquery.pageTabs.js'). 
    … …  
    651651          '$(function() {'."\n". 
    652652          '$.pageTabs('.$default.');'."\n". 
    653           '});'."\n". 
     653          '});'. 
    654654          "\n//]]>\n". 
    655           "</script>\n"; 
     655          "</script>\n". 
     656          '<!--[if lt IE 8]>'."\n". 
     657          self::jsLoad('js/ie7/ie7-hashchange.js'). 
     658          '<script type="text/javascript">'."\n". 
     659          "//<![CDATA[\n". 
     660          '$(window).hashchange();'. 
     661          "\n//]]>\n". 
     662          "</script>\n". 
     663          '<![endif]-->'."\n"; 
    656664     } 
    657665 

  • tests/functional/index.html

    r2010 r2113  
    1616    <script type="text/javascript" src="../../admin/js/common.js"></script> 
    1717    <script type="text/javascript" src="../../admin/js/jquery/jquery.pageTabs.js"></script>     
    18  
     18     
     19    <!--[if lt IE 8]> 
     20     <script type="text/javascript" src="js/ie7/ie7-hashchange.js"></script> 
     21     <script type="text/javascript"> 
     22       //<![CDATA[$(window).hashchange();//]]> 
     23     </script> 
     24    <![endif]--> 
    1925    <script type="text/javascript" src="js/fix_include.js"></script> 
    2026 

  • tests/functional/spec/page_tabs.js

    r2054 r2113  
    4141          expect($('#part-user-favorites')).not.toBeVisible(); 
    4242 
    43           $('.part-tabs ul li a[href="#user-profile"]').click(); 
     43          $.pageTabs.clickTab('user-profile'); 
    4444          expect($('#part-tabs-user-profile')).toHaveClass('part-tabs-active');       
    4545          expect($('#part-user-options')).not.toBeVisible(); 
    … …  
    5151          loadStyleFixtures('default.css'); 
    5252 
    53           spyOn(jQuery, 'pageTabsGetHash').andReturn('user-favorites'); 
     53          spyOn(jQuery.pageTabs, 'getLocationHash').andReturn('user-favorites'); 
    5454          $.pageTabs(); 
    5555          expect($('#part-user-options')).not.toBeVisible(); 
    … …  
    5757          expect($('#part-user-favorites')).toBeVisible();        
    5858     }); 
     59 
     60     it("Must trigger event onetabload only the first time the tab is loaded", function() { 
     61          loadFixtures('tabs.html'); 
     62          loadStyleFixtures('default.css'); 
     63 
     64          var user_option_count_call = user_profile_count_call = user_favorites_count_call = 0; 
     65          spyOn(jQuery.fn, 'onetabload').andCallThrough(); 
     66          $('#user-options').onetabload(function() {user_option_count_call++;}); 
     67          $('#user-profile').onetabload(function() {user_profile_count_call++;}); 
     68          $('#user-favorites').onetabload(function() {user_favorites_count_call++;}); 
     69 
     70          $.pageTabs('user-options'); 
     71          expect(jQuery.fn.onetabload).toHaveBeenCalled(); 
     72          $.pageTabs.clickTab('user-profile'); 
     73          $.pageTabs.clickTab('user-options'); 
     74 
     75          expect(user_option_count_call).toBe(1); 
     76          expect(user_profile_count_call).toBe(1); 
     77          expect(user_favorites_count_call).toBe(0); 
     78     }); 
     79 
     80     it("Must trigger event tabload every first time the tab is loaded", function() { 
     81          loadFixtures('tabs.html'); 
     82          loadStyleFixtures('default.css'); 
     83           
     84          spyOn(jQuery.fn, 'tabload').andCallThrough(); 
     85 
     86          var user_option_count_call = user_profile_count_call = user_favorites_count_call = 0; 
     87          $('#user-options').tabload(function() {user_option_count_call++;}); 
     88          $('#user-profile').tabload(function() {user_profile_count_call++;}); 
     89          $('#user-favorites').tabload(function() {user_favorites_count_call++;}); 
     90      
     91          $.pageTabs('user-options'); 
     92          $.pageTabs.clickTab('user-profile'); 
     93          $.pageTabs.clickTab('user-options'); 
     94 
     95          expect(user_option_count_call).toBe(2); 
     96          expect(user_profile_count_call).toBe(1); 
     97          expect(user_favorites_count_call).toBe(0); 
     98     }); 
     99 
     100     it("Must keeps history of navigation in tabs", function() { 
     101          loadFixtures('tabs.html'); 
     102          loadStyleFixtures('default.css'); 
     103 
     104          var navigation = ['user-options', 'user-profile', 'user-favorites']; 
     105          var current_index = 0; 
     106 
     107          $.pageTabs(navigation[current_index]); 
     108          current_index++; 
     109          expect($('#part-user-options')).toBeVisible(); 
     110          expect($('#part-user-profile')).not.toBeVisible(); 
     111          expect($('#part-user-favorites')).not.toBeVisible(); 
     112           
     113          $.pageTabs.clickTab(navigation[current_index]); 
     114          current_index++; 
     115          expect($('#part-user-options')).not.toBeVisible(); 
     116          expect($('#part-user-profile')).toBeVisible(); 
     117          expect($('#part-user-favorites')).not.toBeVisible(); 
     118 
     119          $.pageTabs.clickTab(navigation[current_index]); 
     120          expect($('#part-user-options')).not.toBeVisible(); 
     121          expect($('#part-user-profile')).not.toBeVisible(); 
     122          expect($('#part-user-favorites')).toBeVisible(); 
     123 
     124          // simulate back : window.history.back(); 
     125          current_index--; 
     126          spyOn(jQuery.pageTabs, 'getLocationHash').andReturn(navigation[current_index]); 
     127          jQuery.event.trigger('hashchange'); 
     128           
     129          expect($('#part-user-options')).not.toBeVisible(); 
     130          expect($('#part-user-profile')).toBeVisible(); 
     131          expect($('#part-user-favorites')).not.toBeVisible(); 
     132     }); 
    59133}); 
    60134 
Note: See TracChangeset for help on using the changeset viewer.

Sites map