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
6 Signed-off-by: Jun Jinhyuk <jinhyuk.jun@samsung.com>
7 Signed-off-by: Minkyu Kang <mk7.kang@samsung.com>
9 .../js/jquery.mobile.fixHeaderFooter.js | 293 +++++++++++++++++++-
10 1 files changed, 279 insertions(+), 14 deletions(-)
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
17 * "fixHeaderFooter" plugin - on-demand positioning for headers,footers
21 + * Header/Footer can be created using the
22 + * data-role="header", data-role="footer" attribute to an element.
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
29 + * data-position : default value is fixed, automatically generated footer has fixed position,
30 + * in header, web dev. defines header fix or not.
34 + * HTML markup for creating header :
35 + * <div data-role="header" data-position="fixed">
39 + * HTML markup for creating 1 button title ( button is available 1~3 )
40 + * <div data-role="header" data-position="fixed">
42 + * <h1>Title Area</h1>
45 + * HTML markup for creating 2 button and groupControl title ( Groupcontrol is available 2~4 )
46 + * <div data-role="header" data-position="fixed">
48 + * <h1>Title Extend 2 Button </h1>
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>
60 + * HTML markup for creating footer
61 + * <div data-role="footer" data-position="fixed">
65 (function( $, undefined ) {
67 var slideDownClass = "ui-header-fixed ui-fixed-inline fade",
68 @@ -50,6 +95,7 @@ $.mobile.fixedToolbars = (function() {
69 touchStopEvent = supportTouch ? "touchend" : "mouseup",
71 scrollTriggered = false,
72 + defaultFooterHeight = 114,
73 touchToggleEnabled = true;
75 function showEventCallback( event ) {
76 @@ -62,6 +108,57 @@ $.mobile.fixedToolbars = (function() {
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.
83 + if ( $( document ).find( ".ui-page-active" ).length ) {
84 + footer_filter = $( document ).find( ".ui-page-active" ).find( ":jqmData(role='footer')" );
86 + footer_filter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
89 + if ( footer_filter.height() < defaultFooterHeight ) {
90 + footer_filter.css("height", defaultFooterHeight);
94 + .css( "top", $(window).height() - footer_filter.height() )
97 + var footerNavbar = footer_filter.find(".ui-navbar");
99 + if ( footerNavbar.jqmData("style") == "toolbar" ) {
101 + .css( "width", $(window).width() - footerNavbar.siblings(".ui-btn").width() );
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')" );
112 + if ( $.support.scrollview ) {
113 + if ( s_theme_header.css("position") != "fixed" ) {
114 + s_theme_header.css( "position", "fixed" );
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() );
122 + if ( s_theme_header.css("position") != "fixed" ) {
123 + s_theme_header.css( "position", "relative" );
126 + .css( "height", "" );
131 if ( !autoHideMode && currentstate === "overlay" ) {
133 $.mobile.fixedToolbars.hide( true );
134 @@ -107,6 +204,9 @@ $.mobile.fixedToolbars = (function() {
136 ( ( $document.scrollTop() === 0 ) ? $window : $document )
137 .bind( "scrollstart", function( event ) {
138 + if ( $( event.target ).find(":jqmData(role='header')").is(":jqmData(position='fixed')") ) {
142 scrollTriggered = true;
144 @@ -131,7 +231,6 @@ $.mobile.fixedToolbars = (function() {
147 .bind( "scrollstop", function( event ) {
149 if ( $( event.target ).closest( ignoreTargets ).length ) {
152 @@ -145,13 +244,141 @@ $.mobile.fixedToolbars = (function() {
156 - $window.bind( "resize updatelayout", showEventCallback );
157 + $window.bind( "resize", showEventCallback );
160 // 1. Before page is shown, check for duplicate footer
161 // 2. After page is shown, append footer to new 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";
170 + if ( s_theme_fieldcontain.length != 0 ) {
171 + title_style = "extended";
174 + if ( s_theme_header.jqmData("position") == "fixed" || window.S.frameworkData.theme.match(/tizen/).length ||
175 + s_theme_header.css("position") == "fixed" ) {
177 + .css( "position", "fixed" )
178 + .css( "top", "0px" );
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");
185 + $( event.target ).find( ".ui-content" )
186 + .addClass("ui-title-content-" + title_style + "-height");
190 + if ( s_theme_header.children().is(".ui-option-header") ) {
191 + s_theme_content.removeClass("ui-title-content-" + title_style + "-height");
193 + if ( s_theme_header.children().is(".input-search-bar") ) {
194 + s_theme_content.addClass("ui-title-content-optionheader-search");
196 + if ( $.tizen.optionheader.prototype.options.collapseOnInit == true ) {
198 + .addClass("ui-title-content-option-header-collapsed-1line-height");
201 + .addClass("ui-title-content-option-header-expanded-1line-height");
204 + } else if ( s_theme_header.find("input").jqmData("type") == "search" ) {
206 + .removeClass("ui-title-content-" + title_style + "-height")
207 + .addClass("ui-title-content-search");
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");
218 + s_theme_header.find( "a" ).eq( 2 )
219 + .addClass("ui-btn-right");
222 + var group_length = s_theme_fieldcontain.find(".ui-radio").length;
225 + .addClass("ui-title-extended-height");
227 + s_theme_fieldcontain
228 + .find(".ui-controlgroup")
229 + .addClass("ui-title-extended-controlgroup");
231 + s_theme_fieldcontain
232 + .find(".ui-controlgroup")
233 + .addClass("ui-extended-controlgroup");
235 + s_theme_fieldcontain
236 + .addClass("ui-title-extended-segment-style");
238 + if ( group_length == 2 || group_length == 3 || group_length == 4 ) {
239 + s_theme_fieldcontain
240 + .addClass("ui-title-extended-controlgroup-" + group_length + "btn");
243 + s_theme_content.addClass("ui-title-content-" + title_style + "-height");
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" );
254 + s_theme_content.css( "top", s_theme_header.height() );
256 + if ( s_theme_header.css("position") != "fixed" ) {
257 + s_theme_header.css( "position", "relative" );
258 + s_theme_content.css( "top", "0" );
263 + var footer_filter = $( document ).find(":jqmData(role='footer')");
265 + if ( footer_filter.find(".ui-navbar").is(".ui-controlbar-s") ){
267 + .css( "top", $(window).height() - footer_filter.height() )
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;
275 + footerGroup.find(".ui-controlgroup")
276 + .addClass("ui-extended-controlgroup")
277 + .addClass("ui-footer-extended-controlgroup")
278 + .css( "display", "inline" );
280 + /* Groupcontrol cannot initialize inline property at first page */
281 + footerGroup.addClass("ui-title-extended-controlgroup-" + groupLength + "btn");
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");
293 var page = $( event.target ),
294 footer = page.find( ":jqmData(role='footer')" ),
295 @@ -162,15 +389,53 @@ $.mobile.fixedToolbars = (function() {
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 );
302 + .css("position", "fixed")
303 + .css("top", $(".ui-page").find(":jqmData(role='footer')").eq( 0 ).css("top"));
307 + if ( footer.is(".ui-footer-fixed") ) {
308 + footer.css( "top", $(window).height() - footer.height() );
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>' );
315 + .css( "width", footer.width() )
316 + .css( "height", footer.height() );
318 + if ( $(".dummy-div").height() < defaultFooterHeight ) {
319 + $( ".dummy-div" ).css( "height", defaultFooterHeight );
323 + /* Header position fix(remove transition) */
324 + var next_id = $( event.target ).attr( "id" );
326 + $( "#"+next_id ).find( ":jqmData(role='header')" )
327 + .removeClass( "fade in out" )
328 + .appendTo( $.mobile.pageContainer );
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" );
338 + ( $( document ).scrollTop() === 0 ? $( window ) : $( document ) )
339 + .unbind("scrollstart")
340 + .unbind("silentscroll")
341 + .unbind("scrollstop");
344 var $this = $( this );
346 if ( stickyFooter && stickyFooter.length ) {
348 setTimeout(function() {
349 setTop( stickyFooter.appendTo( $this ).addClass( "fade" ) );
351 @@ -178,8 +443,13 @@ $.mobile.fixedToolbars = (function() {
354 $.mobile.fixedToolbars.show( true, this );
356 + /* Header position fix(remove transition) */
357 + $("body").children(":jqmData(role='header')")
358 + .insertBefore( $(event.target).find(":jqmData(role='content')").eq( 0 ) );
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 );
365 @@ -215,10 +485,15 @@ $.mobile.fixedToolbars = (function() {
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") ) {
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,
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 );
393 - el.addClass( "ui-fixed-overlay" ).removeClass( "ui-fixed-inline" );
395 - if ( !alreadyVisible && !immediately ) {
396 - el.animationComplete(function() {
397 - el.removeClass( "in" );
398 - }).addClass( "in" );