|
| 1 | +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); |
| 2 | +//>>description: Behavior for "fixed" headers and footers - be sure to also include the item 'Browser specific workarounds for "fixed" headers and footers' when supporting Android 2.x or iOS 5 |
| 3 | +//>>label: Toolbars: Fixed |
| 4 | +//>>group: Widgets |
| 5 | +//>>css.structure: ../css/structure/jquery.mobile.fixedToolbar.css |
| 6 | +//>>css.theme: ../css/themes/default/jquery.mobile.theme.css |
| 7 | + |
| 8 | +define( [ "jquery", "../jquery.mobile.widget", "../jquery.mobile.core", "../jquery.mobile.navigation", "./page", "../jquery.mobile.zoom" ], function( jQuery ) { |
| 9 | +//>>excludeEnd("jqmBuildExclude"); |
| 10 | +(function( $, undefined ) { |
| 11 | + |
| 12 | + |
| 13 | + $.widget( "mobile.toolbar", $.mobile.widget, { |
| 14 | + options: { |
| 15 | + theme: "a", |
| 16 | + addBackBtn: false, |
| 17 | + backBtnTheme: null, |
| 18 | + backBtnText: "Back" |
| 19 | + }, |
| 20 | + |
| 21 | + _create: function() { |
| 22 | + var leftbtn, rightbtn, backBtn, |
| 23 | + role = this.element.is( ":jqmData(role='header')" ) ? "header" : "footer", |
| 24 | + page = this.element.closest(".ui-page"); |
| 25 | + |
| 26 | + if( page.length === 0 ){ |
| 27 | + page = false; |
| 28 | + this._on($.mobile.document, { |
| 29 | + "pageshow":"refresh" |
| 30 | + |
| 31 | + }); |
| 32 | + } |
| 33 | + $.extend( this, { |
| 34 | + role:role, |
| 35 | + page:page |
| 36 | + }) |
| 37 | + this.element.attr( "role", role === "header" ? "banner" : "contentinfo" ).addClass("ui-"+role); |
| 38 | + |
| 39 | + this._setOptions( this.options ); |
| 40 | + this.refresh(); |
| 41 | + }, |
| 42 | + _setOptions:function( o ){ |
| 43 | + if( o.addBackBtn !== undefined){ |
| 44 | + if( this.options.addBackBtn && |
| 45 | + this.role === "header" && |
| 46 | + $( ".ui-page" ).length > 1 && |
| 47 | + this.page[ 0 ].getAttribute( attrPrefix + "url" ) !== $.mobile.path.stripHash( location.hash ) && |
| 48 | + !leftbtn){ |
| 49 | + this._addBackButton(); |
| 50 | + } else { |
| 51 | + this.element.find(".ui-toolbar-back-btn").remove(); |
| 52 | + } |
| 53 | + } |
| 54 | + if( o.backBtnTheme !== undefined){ |
| 55 | + this.element.find(".ui-toolbar-back-btn").attr( "data-"+ $.mobile.ns +"theme", o.theme).buttonMarkup(); |
| 56 | + } |
| 57 | + if( o.backBtnText !== undefined){ |
| 58 | + this.element.find(".ui-toolbar-back-btn .ui-btn-text").text( o.backBtnText ); |
| 59 | + } |
| 60 | + if( o.theme !== undefined ){ |
| 61 | + this.element.removeClass("ui-bar-" + this.options.theme ).addClass( "ui-bar-" + o.theme ); |
| 62 | + } |
| 63 | + this._superApply( o ); |
| 64 | + |
| 65 | + }, |
| 66 | + refresh: function(){ |
| 67 | + if( this.role === "header") { |
| 68 | + this._addHeaderButtonClasses(); |
| 69 | + } |
| 70 | + if( !this.page ){ |
| 71 | + $("[data-role='page']").css({"position":"relative"}); |
| 72 | + //this.element.css({"position":"relative"}); |
| 73 | + if( this.role === "footer" ){ |
| 74 | + this.element.appendTo("body"); |
| 75 | + } |
| 76 | + } |
| 77 | + this._addHeadingClasses(); |
| 78 | + this._btnMarkup(); |
| 79 | + }, |
| 80 | + _btnMarkup: function(){ |
| 81 | + this.element.children("a").buttonMarkup({ theme:this.options.theme}); |
| 82 | + }, |
| 83 | + _addHeaderButtonClasses:function(){ |
| 84 | + var $headeranchors = this.element.children( "a, button" ); |
| 85 | + leftbtn = $headeranchors.hasClass( "ui-btn-left" ); |
| 86 | + rightbtn = $headeranchors.hasClass( "ui-btn-right" ); |
| 87 | + |
| 88 | + leftbtn = leftbtn || $headeranchors.eq( 0 ).not( ".ui-btn-right" ).addClass( "ui-btn-left" ).length; |
| 89 | + |
| 90 | + rightbtn = rightbtn || $headeranchors.eq( 1 ).addClass( "ui-btn-right" ).length; |
| 91 | + }, |
| 92 | + _addBackButton:function(){ |
| 93 | + backBtn = $( "<a href='javascript:void(0);' class='ui-btn-left ui-toolbar-back-btn' data-"+ $.mobile.ns +"rel='back' data-"+ $.mobile.ns +"icon='arrow-l'>"+ this.options.backBtnText +"</a>" ) |
| 94 | + // If theme is provided, override default inheritance |
| 95 | + .attr( "data-"+ $.mobile.ns +"theme", this.options.backBtnTheme || this.options.theme ) |
| 96 | + .prependTo( this.element ); |
| 97 | + }, |
| 98 | + _addHeadingClasses:function(){ |
| 99 | + this.element.children( "h1, h2, h3, h4, h5, h6" ) |
| 100 | + .addClass( "ui-title" ) |
| 101 | + // Regardless of h element number in src, it becomes h1 for the enhanced page |
| 102 | + .attr({ |
| 103 | + "role": "heading", |
| 104 | + "aria-level": "1" |
| 105 | + }); |
| 106 | + } |
| 107 | + }); |
| 108 | + $.mobile.toolbar.initSelector = ":jqmData(role='footer'), :jqmData(role='header')"; |
| 109 | + |
| 110 | + $.mobile._enhancer.add( "mobile.toolbar"); |
| 111 | + |
| 112 | +})( jQuery ); |
| 113 | +//>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude); |
| 114 | +}); |
| 115 | +//>>excludeEnd("jqmBuildExclude"); |
0 commit comments