tizen-web-ui-fw/latest/js/src/widgets/page.sections.js

   1 (function( $, undefined ) {
   2
   3 $.mobile.page.prototype.options.backBtnText  = "Back";
   4 $.mobile.page.prototype.options.addBackBtn   = false;
   5 $.mobile.page.prototype.options.backBtnTheme = null;
   6 $.mobile.page.prototype.options.headerTheme  = "a";
   7 $.mobile.page.prototype.options.footerTheme  = "a";
   8 $.mobile.page.prototype.options.contentTheme = null;
   9
  10 // NOTE bind used to force this binding to run before the buttonMarkup binding
  11 //      which expects .ui-footer top be applied in its gigantic selector
  12 // TODO remove the buttonMarkup giant selector and move it to the various modules
  13 //      on which it depends
  14 $.mobile.$document.bind( "pagecreate", function( e ) {
  15         var $page = $( e.target ),
  16                 o = $page.data( "page" ).options,
  17                 prefix = "data-"+$.mobile.ns,
  18                 pageRole = $page[0].getAttribute( prefix + "role" ) || undefined,
  19                 pageTheme = o.theme;
  20
  21         $( ":jqmData(role='header'), :jqmData(role='footer'), :jqmData(role='content')", $page )
  22                 .jqmEnhanceable()
  23                 .each(function() {
  24
  25                 var $this = $( this ),
  26                         role = $this[0].getAttribute( prefix + "role" ) || undefined,
  27                         theme = $this[0].getAttribute( prefix + "theme" ) || undefined,
  28                         contentTheme = theme || o.contentTheme || ( pageRole === "dialog" && pageTheme ),
  29                         $headeranchors,
  30                         leftbtn,
  31                         rightbtn,
  32                         $dest = $page.find( ".ui-footer" ),
  33                         backBtn;
  34
  35                 $this.addClass( "ui-" + role );
  36
  37                 //apply theming and markup modifications to page,header,content,footer
  38                 if ( role === "header" || role === "footer" ) {
  39
  40                         var thisTheme = theme || ( role === "header" ? o.headerTheme : o.footerTheme ) || pageTheme;
  41
  42                         $this
  43                                 //add theme class
  44                                 .addClass( "ui-bar-" + thisTheme )
  45                                 // Add ARIA role
  46                                 .attr( "role", role === "header" ? "banner" : "contentinfo" );
  47
  48                         if ( role === "header") {
  49                                 // Right,left buttons
  50                                 $headeranchors  = $this.children( "a, div.naviframe-button, a.naviframe-button, button" );
  51                                 leftbtn = $headeranchors.hasClass( "ui-btn-left" );
  52                                 rightbtn = $headeranchors.hasClass( "ui-btn-right" );
  53
  54                                 leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length;
  55
  56                                 rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length;
  57
  58                                 $( $headeranchors.get().reverse() ).each( function ( i ) {
  59                                         $( this ).addClass( "ui-btn-right-" + i );
  60                                 });
  61                         }
  62
  63                         // Auto-add back btn on pages beyond first view
  64                         if ( o.addBackBtn &&
  65                                 ( role === "footer" || role === "header" ) &&
  66                                 $page[0].getAttribute( prefix + "url" ) !== $.mobile.path.stripHash( location.hash ) &&
  67                                 !leftbtn ) {
  68
  69                                 if ( o.addBackBtn == "header" ) {
  70                                         $dest = $page.find( ".ui-header" );
  71                                 } else {
  72                                         $dest = $page.find( ".ui-footer" );
  73                                 }
  74
  75                                 if ( !$dest.find( ".ui-btn-back" ).length ) {
  76                                         backBtn = $( "<a href='javascript:void(0);' class='ui-btn-back' data-" + $.mobile.ns + "rel='back'></a>" )
  77                                                 // // If theme is provided, override default inheritance
  78                                                 .buttonMarkup( { icon: "header-back-btn", theme: o.backBtnTheme || thisTheme } );
  79
  80                                         backBtn.find( ".ui-btn-text" ).text( o.backBtnText );
  81                                         backBtn.appendTo( $dest );
  82                                 }
  83                         }
  84
  85                         // Page title
  86                         $this.children( "h1, h2, h3, h4, h5, h6" )
  87                                 .addClass( "ui-title" )
  88                                 // Regardless of h element number in src, it becomes h1 for the enhanced page
  89                                 .attr({
  90                                         "role": "heading",
  91                                         "aria-level": "1",
  92                                         "aria-label": "title",
  93                                         "tabindex": "0"
  94                                 });
  95
  96                         $( ".ui-title-text-sub" ).attr( { "tabindex": "0", "aria-label": "subtitle" } );
  97
  98                 } else if ( role === "content" ) {
  99                         if ( contentTheme ) {
 100                                 $this.addClass( "ui-body-" + ( contentTheme ) );
 101                         }
 102
 103                         // Add ARIA role
 104                         $this.attr( "role", "main" );
 105                 }
 106         });
 107 });
 108
 109 })( jQuery );