libs/patch/0006-JQM-Change-header-footer-code-to-meet-TIZEN-UI.patch

   1 From f55b2231026c520cc9899aaf8f2279c29e057da3 Mon Sep 17 00:00:00 2001
   2 From: Minkyu Kang <mk7.kang@samsung.com>
   3 Date: Wed, 29 Feb 2012 15:44:47 +0900
   4 Subject: [PATCH] JQM: Change header/footer code to meet TIZEN UI
   5
   6 Signed-off-by: Jun Jinhyuk <jinhyuk.jun@samsung.com>
   7 Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
   8 ---
   9  .../js/jquery.mobile.fixHeaderFooter.js            |  293 +++++++++++++++++++-
  10  1 files changed, 279 insertions(+), 14 deletions(-)
  11
  12 diff --git a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
  13 index 3bb5613..0216c65 100644
  14 --- a/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
  15 +++ b/libs/js/jquery-mobile-1.0.1pre/js/jquery.mobile.fixHeaderFooter.js
  16 @@ -2,6 +2,51 @@
  17  * "fixHeaderFooter" plugin - on-demand positioning for headers,footers
  18  */
  19
  20 +/*
  21 + * Header/Footer can be created using the
  22 + * data-role="header", data-role="footer" attribute to an element.
  23 + *
  24 + * Every page in SLP theme have Header&Footer and default footer contains back button
  25 + * Framework automatically generate footer even though web developer does not define footer
  26 + * For more detail footer usage, refer Page(page.section.js) guideline
  27 + *
  28 + * Attribute:
  29 + *    data-position : default value is fixed, automatically generated footer has fixed position,
  30 + *                   in header, web dev. defines header fix or not.
  31 + *
  32 + * Examples:
  33 + *
  34 + *     HTML markup for creating header :
  35 + *         <div data-role="header" data-position="fixed">
  36 + *             <h1>NBeat UI</h1>
  37 + *         </div>
  38 + *
  39 + *     HTML markup for creating 1 button title ( button is available 1~3 )
  40 + *         <div data-role="header" data-position="fixed">
  41 + *             <a>Text1</a>
  42 + *             <h1>Title Area</h1>
  43 + *         </div>
  44 + *
  45 + *     HTML markup for creating 2 button and groupControl title ( Groupcontrol is available 2~4 )
  46 + *     <div data-role="header" data-position="fixed">
  47 + *         <a>Text</a>
  48 + *         <h1>Title Extend 2 Button </h1>
  49 + *         <a>Text</a>
  50 + *         <div data-role="fieldcontain">
  51 + *             <fieldset data-role="controlgroup" data-type="horizontal">
  52 + *                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment1" value="on" checked="checked" />
  53 + *                 <label for="segment1">All</label>
  54 + *                 <input type="radio" name="radio-view-8" data-icon="segment-titlestyle-segonly" id="segment2" value="off" />
  55 + *                 <label for="segment2">Call</label>
  56 + *             </fieldset>
  57 + *         </div>
  58 + *     </div>
  59 + *
  60 + *     HTML markup for creating footer
  61 + *         <div data-role="footer" data-position="fixed">
  62 + *         </div>
  63 + */
  64 +
  65  (function( $, undefined ) {
  66
  67  var slideDownClass = "ui-header-fixed ui-fixed-inline fade",
  68 @@ -50,6 +95,7 @@ $.mobile.fixedToolbars = (function() {
  69                 touchStopEvent = supportTouch ? "touchend" : "mouseup",
  70                 stateBefore = null,
  71                 scrollTriggered = false,
  72 +               defaultFooterHeight = 114,
  73                 touchToggleEnabled = true;
  74
  75         function showEventCallback( event ) {
  76 @@ -62,6 +108,57 @@ $.mobile.fixedToolbars = (function() {
  77                 //
  78                 // If we are in autoHideMode, we don't do anything because we know the scroll
  79                 // callbacks for the plugin will fire off a show when the scrolling has stopped.
  80 +
  81 +               var footer_filter;
  82 +
  83 +               if ( $( document ).find( ".ui-page-active" ).length ) {
  84 +                       footer_filter = $( document ).find( ".ui-page-active" ).find( ":jqmData(role='footer')" );
  85 +               } else {
  86 +                       footer_filter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
  87 +               }
  88 +
  89 +               if ( footer_filter.height() < defaultFooterHeight ) {
  90 +                       footer_filter.css("height", defaultFooterHeight);
  91 +               }
  92 +
  93 +               footer_filter
  94 +                       .css( "top", $(window).height() - footer_filter.height() )
  95 +                       .show();
  96 +
  97 +               var footerNavbar = footer_filter.find(".ui-navbar");
  98 +
  99 +               if ( footerNavbar.jqmData("style") == "toolbar" ) {
 100 +                       footerNavbar
 101 +                               .css( "width", $(window).width() - footerNavbar.siblings(".ui-btn").width() );
 102 +               }
 103 +
 104 +               // divide content mode scrollview and non-scrollview
 105 +               // recalculate content area when resize callback occur
 106 +               if ( event.type == "resize" ) {
 107 +                       var s_theme_header =
 108 +                               $( document ).find( ".ui-page-active" ).find( ":jqmData(role='header')" );
 109 +                       var s_theme_content =
 110 +                               $( document ).find( ".ui-page-active" ).find( ":jqmData(role='content')" );
 111 +
 112 +                       if ( $.support.scrollview ) {
 113 +                               if ( s_theme_header.css("position") != "fixed" ) {
 114 +                                       s_theme_header.css( "position", "fixed" );
 115 +                               }
 116 +
 117 +                               s_theme_content.css( "top", s_theme_header.height() );
 118 +                               s_theme_content.css( "height",
 119 +                                               document.documentElement.clientHeight -
 120 +                                               footer_filter.height() - s_theme_header.height() );
 121 +                       } else {
 122 +                               if ( s_theme_header.css("position") != "fixed" ) {
 123 +                                       s_theme_header.css( "position", "relative" );
 124 +                                       s_theme_content
 125 +                                               .css( "top", "0" )
 126 +                                               .css( "height", "" );
 127 +                               }
 128 +                       }
 129 +               }
 130 +
 131                 if ( !autoHideMode && currentstate === "overlay" ) {
 132                         if ( !delayTimer ) {
 133                                 $.mobile.fixedToolbars.hide( true );
 134 @@ -107,6 +204,9 @@ $.mobile.fixedToolbars = (function() {
 135
 136                 ( ( $document.scrollTop() === 0 ) ? $window : $document )
 137                         .bind( "scrollstart", function( event ) {
 138 +                               if ( $( event.target ).find(":jqmData(role='header')").is(":jqmData(position='fixed')") ) {
 139 +                                       return;
 140 +                               }
 141
 142                                 scrollTriggered = true;
 143
 144 @@ -131,7 +231,6 @@ $.mobile.fixedToolbars = (function() {
 145                                 }
 146                         })
 147                         .bind( "scrollstop", function( event ) {
 148 -
 149                                 if ( $( event.target ).closest( ignoreTargets ).length ) {
 150                                         return;
 151                                 }
 152 @@ -145,13 +244,141 @@ $.mobile.fixedToolbars = (function() {
 153                                 stateBefore = null;
 154                         });
 155
 156 -                       $window.bind( "resize updatelayout", showEventCallback );
 157 +                       $window.bind( "resize", showEventCallback );
 158         });
 159
 160         // 1. Before page is shown, check for duplicate footer
 161         // 2. After page is shown, append footer to new page
 162         $( ".ui-page" )
 163                 .live( "pagebeforeshow", function( event, ui ) {
 164 +                       /* Fixed header modify for theme-s */
 165 +                       var s_theme_header = $( event.target ).find(":jqmData(role='header')");
 166 +                       var s_theme_fieldcontain = s_theme_header.find(":jqmData(role='fieldcontain')");
 167 +                       var s_theme_content = $( event.target ).find(".ui-content");
 168 +                       var title_style = "normal";
 169 +
 170 +                       if ( s_theme_fieldcontain.length != 0 ) {
 171 +                               title_style = "extended";
 172 +                       }
 173 +
 174 +                       if ( s_theme_header.jqmData("position") == "fixed" || window.S.frameworkData.theme.match(/tizen/).length ||
 175 +                               s_theme_header.css("position") == "fixed" ) {
 176 +                               s_theme_header
 177 +                                       .css( "position", "fixed" )
 178 +                                       .css( "top", "0px" );
 179 +
 180 +                               if ( s_theme_header.children().is(".ui-navbar") ) {
 181 +                                       s_theme_header.addClass("ui-title-controlbar-height");
 182 +                                       $( event.target ).find( ".ui-content" )
 183 +                                               .addClass("ui-title-content-controlbar-height");
 184 +                               } else {
 185 +                                       $( event.target ).find( ".ui-content" )
 186 +                                               .addClass("ui-title-content-" + title_style + "-height");
 187 +                               }
 188 +                       }
 189 +
 190 +                       if ( s_theme_header.children().is(".ui-option-header") ) {
 191 +                               s_theme_content.removeClass("ui-title-content-" + title_style + "-height");
 192 +
 193 +                               if ( s_theme_header.children().is(".input-search-bar") ) {
 194 +                                       s_theme_content.addClass("ui-title-content-optionheader-search");
 195 +                               } else {
 196 +                                       if ( $.tizen.optionheader.prototype.options.collapseOnInit == true ) {
 197 +                                               s_theme_content
 198 +                                                       .addClass("ui-title-content-option-header-collapsed-1line-height");
 199 +                                       } else {
 200 +                                               s_theme_content
 201 +                                                       .addClass("ui-title-content-option-header-expanded-1line-height");
 202 +                                       }
 203 +                               }
 204 +                       } else if ( s_theme_header.find("input").jqmData("type") == "search" ) {
 205 +                               s_theme_content
 206 +                                       .removeClass("ui-title-content-" + title_style + "-height")
 207 +                                       .addClass("ui-title-content-search");
 208 +                       }
 209 +
 210 +                       if ( s_theme_header.children().is("a") ||
 211 +                               s_theme_header.children().find(".ui-radio").length != 0 ) {
 212 +                               if ( title_style == "normal" ) {
 213 +                                       if ( s_theme_header.children("a").length == 3 ) {
 214 +                                               s_theme_header.find( "a" ).eq( 1 )
 215 +                                                       .removeClass("ui-btn-right")
 216 +                                                       .addClass("ui-title-normal-3btn");
 217 +
 218 +                                               s_theme_header.find( "a" ).eq( 2 )
 219 +                                                       .addClass("ui-btn-right");
 220 +                                       }
 221 +                               } else {
 222 +                                       var group_length = s_theme_fieldcontain.find(".ui-radio").length;
 223 +
 224 +                                       s_theme_header
 225 +                                               .addClass("ui-title-extended-height");
 226 +
 227 +                                       s_theme_fieldcontain
 228 +                                               .find(".ui-controlgroup")
 229 +                                               .addClass("ui-title-extended-controlgroup");
 230 +
 231 +                                       s_theme_fieldcontain
 232 +                                               .find(".ui-controlgroup")
 233 +                                               .addClass("ui-extended-controlgroup");
 234 +
 235 +                                       s_theme_fieldcontain
 236 +                                               .addClass("ui-title-extended-segment-style");
 237 +
 238 +                                       if ( group_length == 2 || group_length == 3 || group_length == 4 ) {
 239 +                                               s_theme_fieldcontain
 240 +                                                       .addClass("ui-title-extended-controlgroup-" + group_length + "btn");
 241 +                                       }
 242 +                               }
 243 +                               s_theme_content.addClass("ui-title-content-" + title_style + "-height");
 244 +                       }
 245 +
 246 +                       // divide content mode scrollview and non-scrollview
 247 +                       // recalculate content area when resize callback occur
 248 +                       if ( event.type == "resize" ) {
 249 +                               if ( $.support.scrollview ) {
 250 +                                       if ( s_theme_header.css("position") != "fixed" ) {
 251 +                                               s_theme_header.css( "position", "fixed" );
 252 +                                       }
 253 +
 254 +                                       s_theme_content.css( "top", s_theme_header.height() );
 255 +                               } else {
 256 +                                       if ( s_theme_header.css("position") != "fixed" ) {
 257 +                                               s_theme_header.css( "position", "relative" );
 258 +                                               s_theme_content.css( "top", "0" );
 259 +                                       }
 260 +                               }
 261 +                       }
 262 +
 263 +                       var footer_filter = $( document ).find(":jqmData(role='footer')");
 264 +
 265 +                       if ( footer_filter.find(".ui-navbar").is(".ui-controlbar-s") ){
 266 +                               footer_filter
 267 +                                       .css( "top", $(window).height() - footer_filter.height() )
 268 +                                       .show();
 269 +                       }
 270 +
 271 +                       if ( footer_filter.children().find(".ui-radio").length != 0 ) {
 272 +                               var footerGroup = footer_filter.find(":jqmData(role='fieldcontain')");
 273 +                               var groupLength = footerGroup.find(".ui-radio").length;
 274 +
 275 +                               footerGroup.find(".ui-controlgroup")
 276 +                                       .addClass("ui-extended-controlgroup")
 277 +                                       .addClass("ui-footer-extended-controlgroup")
 278 +                                       .css( "display", "inline" );
 279 +
 280 +                                       /* Groupcontrol cannot initialize inline property at first page */
 281 +                               footerGroup.addClass("ui-title-extended-controlgroup-" + groupLength + "btn");
 282 +
 283 +                               footerButton = footer_filter.children("a");
 284 +                               footerButton.each(function( i ) {
 285 +                                       if ( footerButton.eq( i ).is(".ui-btn") && !footerButton.eq( i ).is(".ui-btn-back") ){
 286 +                                               footerButton.eq( i )
 287 +                                                       .removeClass("ui-btn-left")
 288 +                                                       .addClass("ui-btn-footer-right");
 289 +                                       }
 290 +                               });
 291 +                       }
 292
 293                         var page = $( event.target ),
 294                                 footer = page.find( ":jqmData(role='footer')" ),
 295 @@ -162,15 +389,53 @@ $.mobile.fixedToolbars = (function() {
 296
 297                         if ( id && prevFooterMatches ) {
 298                                 stickyFooter = footer;
 299 -                               setTop( stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer ) );
 300 +                               stickyFooter.removeClass( "fade in out" ).appendTo( $.mobile.pageContainer );
 301 +                               stickyFooter
 302 +                                       .css("position", "fixed")
 303 +                                       .css("top", $(".ui-page").find(":jqmData(role='footer')").eq( 0 ).css("top"));
 304 +
 305 +                       }
 306 +
 307 +                       if ( footer.is(".ui-footer-fixed") ) {
 308 +                               footer.css( "top", $(window).height() - footer.height() );
 309 +                       }
 310 +
 311 +                       /* Increase Content size with dummy <div> because of footer height */
 312 +                       if ( footer.length != 0 && $( event.target ).find(".dummy-div").length == 0 ) {
 313 +                               $( event.target ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
 314 +                               $( ".dummy-div" )
 315 +                                       .css( "width", footer.width() )
 316 +                                       .css( "height", footer.height() );
 317 +
 318 +                               if ( $(".dummy-div").height() < defaultFooterHeight ) {
 319 +                                       $( ".dummy-div" ).css( "height", defaultFooterHeight );
 320 +                               }
 321                         }
 322 +
 323 +                       /* Header position fix(remove transition) */
 324 +                       var next_id = $( event.target ).attr( "id" );
 325 +
 326 +                       $( "#"+next_id ).find( ":jqmData(role='header')" )
 327 +                               .removeClass( "fade in out" )
 328 +                               .appendTo( $.mobile.pageContainer );
 329                 })
 330                 .live( "pageshow", function( event, ui ) {
 331 +                       /* Fixed header modify for theme-s */
 332 +                       var s_theme_header = $( event.target ).find( ":jqmData(role='header')" );
 333 +                       if ( s_theme_header.is(".ui-header-fixed") && s_theme_header.is(".ui-bar-s") ) {
 334 +                               $( event.target ).find(":jqmData(role='header')")
 335 +                                       .css( "position", "fixed" )
 336 +                                       .css( "top", "0px" );
 337 +
 338 +                                ( $( document ).scrollTop() === 0 ? $( window ) : $( document ) )
 339 +                                       .unbind("scrollstart")
 340 +                                       .unbind("silentscroll")
 341 +                                       .unbind("scrollstop");
 342 +                       }
 343
 344                         var $this = $( this );
 345
 346                         if ( stickyFooter && stickyFooter.length ) {
 347 -
 348                                 setTimeout(function() {
 349                                         setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
 350                                         stickyFooter = null;
 351 @@ -178,8 +443,13 @@ $.mobile.fixedToolbars = (function() {
 352                         }
 353
 354                         $.mobile.fixedToolbars.show( true, this );
 355 +
 356 +                       /* Header position fix(remove transition) */
 357 +                       $("body").children(":jqmData(role='header')")
 358 +                               .insertBefore( $(event.target).find(":jqmData(role='content')").eq( 0 ) );
 359                 });
 360
 361 +
 362         // When a collapsiable is hidden or shown we need to trigger the fixed toolbar to reposition itself (#1635)
 363         $( ".ui-collapsible-contain" ).live( "collapse expand", showEventCallback );
 364
 365 @@ -215,10 +485,15 @@ $.mobile.fixedToolbars = (function() {
 366         }
 367
 368         function setTop( el ) {
 369 +               if ( el.parents(".ui-page").find(":jqmData(role='header')").is(".ui-header-fixed") &&
 370 +                       el.parents(".ui-page").find(":jqmData(role='header')").is(".ui-bar-s") ) {
 371 +                       return;
 372 +               }
 373 +
 374                 var fromTop = $(window).scrollTop(),
 375                         thisTop = getOffsetTop( el[ 0 ] ), // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
 376                         thisCSStop = el.css( "top" ) == "auto" ? 0 : parseFloat(el.css( "top" )),
 377 -                       screenHeight = window.innerHeight,
 378 +                       screenHeight = $(window).height(),
 379                         thisHeight = el.outerHeight(),
 380                         useRelative = el.parents( ".ui-page:not(.ui-page-fullscreen)" ).length,
 381                         relval;
 382 @@ -260,20 +535,10 @@ $.mobile.fixedToolbars = (function() {
 383                                         fromTop = $( window ).scrollTop(),
 384                                         // el.offset().top returns the wrong value on iPad iOS 3.2.1, call our workaround instead.
 385                                         thisTop = getOffsetTop( el[ 0 ] ),
 386 -                                       screenHeight = window.innerHeight,
 387 +                                       screenHeight = $(window).height(),
 388                                         thisHeight = el.outerHeight(),
 389                                         alreadyVisible = ( el.is( ".ui-header-fixed" ) && fromTop <= thisTop + thisHeight ) ||
 390                                                                                                                 ( el.is( ".ui-footer-fixed" ) && thisTop <= fromTop + screenHeight );
 391 -
 392 -                               // Add state class
 393 -                               el.addClass( "ui-fixed-overlay" ).removeClass( "ui-fixed-inline" );
 394 -
 395 -                               if ( !alreadyVisible && !immediately ) {
 396 -                                       el.animationComplete(function() {
 397 -                                               el.removeClass( "in" );
 398 -                                       }).addClass( "in" );
 399 -                               }
 400 -                               setTop(el);
 401                         });
 402                 },
 403
 404 --
 405 1.7.5.4
 406