tizen-web-ui-fw/latest/js/src/widgets/fixedToolbar.js

   1 (function( $, undefined ) {
   2
   3
   4         $.widget( "mobile.fixedtoolbar", $.mobile.widget, {
   5                 options: {
   6                         visibleOnPageShow: true,
   7                         disablePageZoom: true,
   8                         transition: "slide", //can be none, fade, slide (slide maps to slideup or slidedown)
   9                         fullscreen: false,
  10                         tapToggle: true,
  11                         tapToggleBlacklist: "a, button, input, select, textarea, .ui-header-fixed, .ui-footer-fixed, .ui-popup",
  12                         hideDuringFocus: "input, textarea, select",
  13                         updatePagePadding: true,
  14                         trackPersistentToolbars: true,
  15
  16                         // Browser detection! Weeee, here we go...
  17                         // Unfortunately, position:fixed is costly, not to mention probably impossible, to feature-detect accurately.
  18                         // Some tests exist, but they currently return false results in critical devices and browsers, which could lead to a broken experience.
  19                         // Testing fixed positioning is also pretty obtrusive to page load, requiring injected elements and scrolling the window
  20                         // The following function serves to rule out some popular browsers with known fixed-positioning issues
  21                         // This is a plugin option like any other, so feel free to improve or overwrite it
  22                         supportBlacklist: function() {
  23                                 var w = window,
  24                                         ua = navigator.userAgent,
  25                                         platform = navigator.platform,
  26                                         // Rendering engine is Webkit, and capture major version
  27                                         wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ ),
  28                                         wkversion = !!wkmatch && wkmatch[ 1 ],
  29                                         ffmatch = ua.match( /Fennec\/([0-9]+)/ ),
  30                                         ffversion = !!ffmatch && ffmatch[ 1 ],
  31                                         operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ ),
  32                                         omversion = !!operammobilematch && operammobilematch[ 1 ];
  33
  34                                 if(
  35                                         // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
  36                                         ( ( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1  || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 ) ||
  37                                         // Opera Mini
  38                                         ( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" ) ||
  39                                         ( operammobilematch && omversion < 7458 )       ||
  40                                         //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
  41                                         ( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 ) ||
  42                                         // Firefox Mobile before 6.0 -
  43                                         ( ffversion && ffversion < 6 ) ||
  44                                         // WebOS less than 3
  45                                         ( "palmGetResource" in window && wkversion && wkversion < 534 ) ||
  46                                         // MeeGo
  47                                         ( ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1 ) ) {
  48                                         return true;
  49                                 }
  50
  51                                 return false;
  52                         },
  53                         initSelector: ":jqmData(position='dummy')"
  54                 },
  55
  56                 _create: function() {
  57
  58                         var self = this,
  59                                 o = self.options,
  60                                 $el = self.element,
  61                                 tbtype = $el.is( ":jqmData(role='header')" ) ? "header" : "footer",
  62                                 $page = $el.closest( ".ui-page" );
  63
  64                         // Feature detecting support for
  65                         if ( o.supportBlacklist() ) {
  66                                 self.destroy();
  67                                 return;
  68                         }
  69
  70                         $el.addClass( "ui-"+ tbtype +"-fixed" );
  71
  72                         // "fullscreen" overlay positioning
  73                         if ( o.fullscreen ) {
  74                                 $el.addClass( "ui-"+ tbtype +"-fullscreen" );
  75                                 $page.addClass( "ui-page-" + tbtype + "-fullscreen" );
  76                         }
  77                         // If not fullscreen, add class to page to set top or bottom padding
  78                         else{
  79                                 $page.addClass( "ui-page-" + tbtype + "-fixed" );
  80                         }
  81
  82                         self._addTransitionClass();
  83                         self._bindPageEvents();
  84                         self._bindToggleHandlers();
  85                 },
  86
  87                 _addTransitionClass: function() {
  88                         var tclass = this.options.transition;
  89
  90                         if ( tclass && tclass !== "none" ) {
  91                                 // use appropriate slide for header or footer
  92                                 if ( tclass === "slide" ) {
  93                                         tclass = this.element.is( ".ui-header" ) ? "slidedown" : "slideup";
  94                                 }
  95
  96                                 this.element.addClass( tclass );
  97                         }
  98                 },
  99
 100                 _bindPageEvents: function() {
 101                         var self = this,
 102                                 o = self.options,
 103                                 $el = self.element;
 104
 105                         //page event bindings
 106                         // Fixed toolbars require page zoom to be disabled, otherwise usability issues crop up
 107                         // This method is meant to disable zoom while a fixed-positioned toolbar page is visible
 108                         $el.closest( ".ui-page" )
 109                                 .bind( "pagebeforeshow", function() {
 110                                         if ( o.disablePageZoom ) {
 111                                                 $.mobile.zoom.disable( true );
 112                                         }
 113                                         if ( !o.visibleOnPageShow ) {
 114                                                 self.hide( true );
 115                                         }
 116                                 } )
 117                                 .bind( "webkitAnimationStart animationstart updatelayout", function() {
 118                                         var thisPage = this;
 119                                         if ( o.updatePagePadding ) {
 120                                                 self.updatePagePadding( thisPage );
 121                                         }
 122                                 })
 123                                 .bind( "pageshow", function() {
 124                                         var thisPage = this;
 125                                         self.updatePagePadding( thisPage );
 126                                         if ( o.updatePagePadding ) {
 127                                                 $.mobile.$window.bind( "throttledresize." + self.widgetName, function() {
 128                                                         self.updatePagePadding( thisPage );
 129                                                 });
 130                                         }
 131                                 })
 132                                 .bind( "pagebeforehide", function( e, ui ) {
 133                                         if ( o.disablePageZoom ) {
 134                                                 $.mobile.zoom.enable( true );
 135                                         }
 136                                         if ( o.updatePagePadding ) {
 137                                                 $.mobile.$window.unbind( "throttledresize." + self.widgetName );
 138                                         }
 139
 140                                         if ( o.trackPersistentToolbars ) {
 141                                                 var thisFooter = $( ".ui-footer-fixed:jqmData(id)", this ),
 142                                                         thisHeader = $( ".ui-header-fixed:jqmData(id)", this ),
 143                                                         nextFooter = thisFooter.length && ui.nextPage && $( ".ui-footer-fixed:jqmData(id='" + thisFooter.jqmData( "id" ) + "')", ui.nextPage ) || $(),
 144                                                         nextHeader = thisHeader.length && ui.nextPage && $( ".ui-header-fixed:jqmData(id='" + thisHeader.jqmData( "id" ) + "')", ui.nextPage ) || $();
 145
 146                                                         if ( nextFooter.length || nextHeader.length ) {
 147
 148                                                                 nextFooter.add( nextHeader ).appendTo( $.mobile.pageContainer );
 149
 150                                                                 ui.nextPage.one( "pageshow", function() {
 151                                                                         nextFooter.add( nextHeader ).appendTo( this );
 152                                                                 });
 153                                                         }
 154                                         }
 155                                 });
 156                 },
 157
 158                 _visible: true,
 159
 160                 // This will set the content element's top or bottom padding equal to the toolbar's height
 161                 updatePagePadding: function( tbPage ) {
 162                         var $el = this.element,
 163                                 header = $el.is( ".ui-header" );
 164
 165                         // This behavior only applies to "fixed", not "fullscreen"
 166                         if ( this.options.fullscreen ) { return; }
 167
 168                         tbPage = tbPage || $el.closest( ".ui-page" );
 169                         $( tbPage ).css( "padding-" + ( header ? "top" : "bottom" ), $el.outerHeight() );
 170                 },
 171
 172                 _useTransition: function( notransition ) {
 173                         var $win = $.mobile.$window,
 174                                 $el = this.element,
 175                                 scroll = $win.scrollTop(),
 176                                 elHeight = $el.height(),
 177                                 pHeight = $el.closest( ".ui-page" ).height(),
 178                                 viewportHeight = $.mobile.getScreenHeight(),
 179                                 tbtype = $el.is( ":jqmData(role='header')" ) ? "header" : "footer";
 180
 181                         return !notransition &&
 182                                 ( this.options.transition && this.options.transition !== "none" &&
 183                                 (
 184                                         ( tbtype === "header" && !this.options.fullscreen && scroll > elHeight ) ||
 185                                         ( tbtype === "footer" && !this.options.fullscreen && scroll + viewportHeight < pHeight - elHeight )
 186                                 ) || this.options.fullscreen
 187                                 );
 188                 },
 189
 190                 show: function( notransition ) {
 191                         var hideClass = "ui-fixed-hidden",
 192                                 $el = this.element;
 193
 194                         if ( this._useTransition( notransition ) ) {
 195                                 $el
 196                                         .removeClass( "out " + hideClass )
 197                                         .addClass( "in" );
 198                         }
 199                         else {
 200                                 $el.removeClass( hideClass );
 201                         }
 202                         this._visible = true;
 203                 },
 204
 205                 hide: function( notransition ) {
 206                         var hideClass = "ui-fixed-hidden",
 207                                 $el = this.element,
 208                                 // if it's a slide transition, our new transitions need the reverse class as well to slide outward
 209                                 outclass = "out" + ( this.options.transition === "slide" ? " reverse" : "" );
 210
 211                         if( this._useTransition( notransition ) ) {
 212                                 $el
 213                                         .addClass( outclass )
 214                                         .removeClass( "in" )
 215                                         .animationComplete(function() {
 216                                                 $el.addClass( hideClass ).removeClass( outclass );
 217                                         });
 218                         }
 219                         else {
 220                                 $el.addClass( hideClass ).removeClass( outclass );
 221                         }
 222                         this._visible = false;
 223                 },
 224
 225                 toggle: function() {
 226                         this[ this._visible ? "hide" : "show" ]();
 227                 },
 228
 229                 _bindToggleHandlers: function() {
 230                         var self = this,
 231                                 o = self.options,
 232                                 $el = self.element;
 233
 234                         // tap toggle
 235                         $el.closest( ".ui-page" )
 236                                 .bind( "vclick", function( e ) {
 237                                         if ( o.tapToggle && !$( e.target ).closest( o.tapToggleBlacklist ).length ) {
 238                                                 self.toggle();
 239                                         }
 240                                 })
 241                                 .bind( "focusin focusout", function( e ) {
 242                                         if ( screen.width < 500 && $( e.target ).is( o.hideDuringFocus ) && !$( e.target ).closest( ".ui-header-fixed, .ui-footer-fixed" ).length ) {
 243                                                 self[ ( e.type === "focusin" && self._visible ) ? "hide" : "show" ]();
 244                                         }
 245                                 });
 246                 },
 247
 248                 destroy: function() {
 249                         this.element.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
 250                         this.element.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
 251                 }
 252
 253         });
 254
 255         //auto self-init widgets
 256         $.mobile.$document
 257                 .bind( "pagecreate create", function( e ) {
 258
 259                         // DEPRECATED in 1.1: support for data-fullscreen=true|false on the page element.
 260                         // This line ensures it still works, but we recommend moving the attribute to the toolbars themselves.
 261                         if ( $( e.target ).jqmData( "fullscreen" ) ) {
 262                                 $( $.mobile.fixedtoolbar.prototype.options.initSelector, e.target ).not( ":jqmData(fullscreen)" ).jqmData( "fullscreen", true );
 263                         }
 264
 265                         $.mobile.fixedtoolbar.prototype.enhanceWithin( e.target );
 266                 });
 267
 268 })( jQuery );