/js/jquery.mobile.page.sections.js

https://github.com/jjoe64/jquery-mobile · JavaScript · 96 lines · 62 code · 19 blank · 15 comment · 15 complexity · c0eae90a34824142ea38c4147d181b6b MD5 · raw file

  1. //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
  2. //>>description: Theming and layout of headers, footers, and content areas
  3. //>>label: Page Sections
  4. define( [ "jquery", "./jquery.mobile.page", "./jquery.mobile.core", "./jquery.mobile.buttonMarkup" ], function( $ ) {
  5. //>>excludeEnd("jqmBuildExclude");
  6. (function( $, undefined ) {
  7. $.mobile.page.prototype.options.backBtnText = "Back";
  8. $.mobile.page.prototype.options.addBackBtn = false;
  9. $.mobile.page.prototype.options.backBtnTheme = null;
  10. $.mobile.page.prototype.options.headerTheme = "a";
  11. $.mobile.page.prototype.options.footerTheme = "a";
  12. $.mobile.page.prototype.options.contentTheme = null;
  13. $( document ).delegate( ":jqmData(role='page'), :jqmData(role='dialog')", "pagecreate", function( e ) {
  14. var $page = $( this ),
  15. o = $page.data( "page" ).options,
  16. pageRole = $page.jqmData( "role" ),
  17. pageTheme = o.theme;
  18. $( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", this )
  19. .jqmEnhanceable()
  20. .each(function() {
  21. var $this = $( this ),
  22. role = $this.jqmData( "role" ),
  23. theme = $this.jqmData( "theme" ),
  24. contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
  25. $headeranchors,
  26. leftbtn,
  27. rightbtn,
  28. backBtn;
  29. $this.addClass( "ui-" + role );
  30. //apply theming and markup modifications to page,header,content,footer
  31. if ( role === "header" || role === "footer" ) {
  32. var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
  33. $this
  34. //add theme class
  35. .addClass( "ui-bar-" + thisTheme )
  36. // Add ARIA role
  37. .attr( "role", role === "header" ? "banner" : "contentinfo" );
  38. if( role === "header") {
  39. // Right,left buttons
  40. $headeranchors = $this.children( "a" );
  41. leftbtn = $headeranchors.hasClass( "ui-btn-left" );
  42. rightbtn = $headeranchors.hasClass( "ui-btn-right" );
  43. leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
  44. rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
  45. }
  46. // Auto-add back btn on pages beyond first view
  47. if ( o.addBackBtn &&
  48. role === "header" &&
  49. $( ".ui-page" ).length > 1 &&
  50. $page.jqmData( "url" ) !== $.mobile.path.stripHash( location.hash ) &&
  51. !leftbtn ) {
  52. backBtn = $( "<a href='#' class='ui-btn-left' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ o.backBtnText +"</a>" )
  53. // If theme is provided, override default inheritance
  54. .attr( "data-"+ $.mobile.ns +"theme", o.backBtnTheme || thisTheme )
  55. .prependTo( $this );
  56. }
  57. // Page title
  58. $this.children( "h1, h2, h3, h4, h5, h6" )
  59. .addClass( "ui-title" )
  60. // Regardless of h element number in src, it becomes h1 for the enhanced page
  61. .attr({
  62. "role": "heading",
  63. "aria-level": "1"
  64. });
  65. } else if ( role === "content" ) {
  66. if ( contentTheme ) {
  67. $this.addClass( "ui-body-" + ( contentTheme ) );
  68. }
  69. // Add ARIA role
  70. $this.attr( "role", "main" );
  71. }
  72. });
  73. });
  74. })( jQuery );
  75. //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
  76. });
  77. //>>excludeEnd("jqmBuildExclude");