1 /* ***************************************************************************
2 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
4 * Permission is hereby granted, free of charge, to any person obtaining a
5 * copy of this software and associated documentation files (the "Software"),
6 * to deal in the Software without restriction, including without limitation
7 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
8 * and/or sell copies of the Software, and to permit persons to whom the
9 * Software is furnished to do so, subject to the following conditions:
11 * The above copyright notice and this permission notice shall be included in
12 * all copies or substantial portions of the Software.
14 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
15 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
16 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
17 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
18 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
19 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
20 * DEALINGS IN THE SOFTWARE.
21 * ***************************************************************************
23 * Author: Jinhyuk Jun <jinhyuk.jun@samsung.com>
26 (function ( $, undefined ) {
28 $.widget( "mobile.pagelayout", $.mobile.widget, {
30 visibleOnPageShow: true,
31 disablePageZoom: true,
32 transition: "slide", //can be none, fade, slide (slide maps to slideup or slidedown)
35 tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed",
36 hideDuringFocus: "input, textarea, select",
37 updatePagePadding: true,
38 trackPersistentToolbars: true,
39 // Browser detection! Weeee, here we go...
40 // Unfortunately, position:fixed is costly, not to mention probably impossible, to feature-detect accurately.
41 // Some tests exist, but they currently return false results in critical devices and browsers, which could lead to a broken experience.
42 // Testing fixed positioning is also pretty obtrusive to page load, requiring injected elements and scrolling the window
43 // The following function serves to rule out some popular browsers with known fixed-positioning issues
44 // This is a plugin option like any other, so feel free to improve or overwrite it
45 supportBlacklist: function () {
47 ua = navigator.userAgent,
48 platform = navigator.platform,
49 // Rendering engine is Webkit, and capture major version
50 wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ ),
51 wkversion = !!wkmatch && wkmatch[ 1 ],
52 ffmatch = ua.match( /Fennec\/([0-9]+)/ ),
53 ffversion = !!ffmatch && ffmatch[ 1 ],
54 operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ ),
55 omversion = !!operammobilematch && operammobilematch[ 1 ];
58 // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
59 ( ( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 ) ||
61 ( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" ) ||
62 ( operammobilematch && omversion < 7458 ) ||
63 //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
64 ( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 ) ||
65 // Firefox Mobile before 6.0 -
66 ( ffversion && ffversion < 6 ) ||
68 ( window.palmGetResource !== undefined && wkversion && wkversion < 534 ) ||
70 ( ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1 )
77 initSelector: ":jqmData(role='content')"
80 _create: function () {
86 // Feature detecting support for
87 if ( o.supportBlacklist() ) {
92 self._addFixedClass();
93 self._addTransitionClass();
94 self._bindPageEvents();
97 self._bindContentControlEvents();
100 /* add minimum fixed css style to bar(header/footer) and content
101 * it need to update when core source modified(jquery.mobile.page.section.js)
102 * modified from core source cuz initSelector different */
103 _addFixedClass: function () {
107 $elHeader = $el.siblings( ":jqmData(role='header')" ),
108 $elFooter = $el.siblings( ":jqmData(role='footer')" ),
109 $elPage = $el.closest(".ui-page");
111 $elHeader.addClass( "ui-header-fixed" );
112 $elFooter.addClass( "ui-footer-fixed" );
114 // "fullscreen" overlay positioning
115 if ( o.fullscreen ) {
116 $elHeader.addClass( "ui-header-fullscreen" );
117 $elFooter.addClass( "ui-footer-fullscreen" );
119 .addClass( "ui-page-header-fullscreen" )
120 .addClass( "ui-page-footer-fullscreen" );
122 // If not fullscreen, add class to page to set top or bottom padding
123 $elPage.addClass( "ui-page-header-fixed" )
124 .addClass( "ui-page-footer-fixed" );
128 /* original core source(jquery.mobile.fixedToolbar.js)
130 _addTransitionClass: function () {
131 var tclass = this.options.transition;
133 if ( tclass && tclass !== "none" ) {
134 // use appropriate slide for header or footer
135 if ( tclass === "slide" ) {
136 tclass = this.element.is( ".ui-header" ) ? "slidedown" : "slideup";
139 this.element.addClass( tclass );
144 /* Set default page positon
145 * 1. add title style to header
146 * 2. Set default header/footer position */
147 setHeaderFooter: function ( thisPage ) {
148 var $elPage = $( thisPage ),
149 $elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
150 $elContent = $elPage.find( ".ui-content" ),
151 $elFooter = $elPage.find( ":jqmData(role='footer')" ),
152 $elFooterGroup = $elFooter.find( ":jqmData(role='fieldcontain')" );
154 // divide content mode scrollview and non-scrollview
155 if ( !$elPage.is( ".ui-dialog" ) ) {
156 if ( $elHeader.jqmData("position") == "fixed" || ( $.support.scrollview && $.tizen.frameworkData.theme.match(/tizen/) ) ) {
158 .css( "position", "fixed" )
159 .css( "top", "0px" );
160 } else if ( !$.support.scrollview && $elHeader.jqmData("position") != "fixed" ) {
161 $elHeader.css( "position", "relative" );
165 /* set Title style */
166 if ( $elHeader.find("span.ui-title-text-sub").length ) {
167 $elHeader.addClass( "ui-title-multiline");
170 if ( $elFooterGroup.find( "div" ).is( ".ui-controlgroup-label" ) ) {
171 $elFooterGroup.find( "div.ui-controlgroup-label" ).remove();
175 _bindPageEvents: function () {
181 //page event bindings
182 // Fixed toolbars require page zoom to be disabled, otherwise usability issues crop up
183 // This method is meant to disable zoom while a fixed-positioned toolbar page is visible
184 $el.closest( ".ui-page" )
185 .bind( "pagebeforeshow", function ( event ) {
187 if ( o.disablePageZoom ) {
188 $.mobile.zoom.disable( true );
190 if ( !o.visibleOnPageShow ) {
193 self.setHeaderFooter( thisPage );
194 self._setContentMinHeight( thisPage );
196 .bind( "webkitAnimationStart animationstart updatelayout", function ( e, data ) {
198 if ( o.updatePagePadding ) {
199 self.updatePagePadding(thisPage);
200 self.updatePageLayout( false, thisPage);
204 .bind( "pageshow", function ( event ) {
206 self._setContentMinHeight( thisPage );
207 self.updatePagePadding( thisPage );
208 self._updateHeaderArea( thisPage );
209 if ( o.updatePagePadding ) {
210 $( window ).bind( "throttledresize." + self.widgetName, function () {
211 self.updatePagePadding(thisPage);
213 self.updatePageLayout( false, thisPage);
214 self._updateHeaderArea( thisPage );
215 self._setContentMinHeight( thisPage );
220 .bind( "pagebeforehide", function ( e, ui ) {
221 if ( o.disablePageZoom ) {
222 $.mobile.zoom.enable( true );
224 if ( o.updatePagePadding ) {
225 $( window ).unbind( "throttledresize." + self.widgetName );
228 if ( o.trackPersistentToolbars ) {
229 var thisFooter = $( ".ui-footer-fixed:jqmData(id)", this ),
230 thisHeader = $( ".ui-header-fixed:jqmData(id)", this ),
231 nextFooter = thisFooter.length && ui.nextPage && $( ".ui-footer-fixed:jqmData(id='" + thisFooter.jqmData( "id" ) + "')", ui.nextPage ),
232 nextHeader = thisHeader.length && ui.nextPage && $( ".ui-header-fixed:jqmData(id='" + thisHeader.jqmData( "id" ) + "')", ui.nextPage );
234 nextFooter = nextFooter || $();
236 if ( nextFooter.length || nextHeader.length ) {
238 nextFooter.add( nextHeader ).appendTo( $.mobile.pageContainer );
240 ui.nextPage.one( "pageshow", function () {
241 nextFooter.add( nextHeader ).appendTo( this );
247 window.addEventListener( "softkeyboardchange", function ( e ) {
250 if ( e.state == "on" ) {
251 $elCurrentFooter = $( ".ui-page-active .ui-footer" );
252 $elCurrentFooter.hide();
253 } else if (e.state == "off") {
254 $elCurrentFooter.show();
256 self.updatePagePadding( thisPage );
257 self.updatePageLayout( true, thisPage );
261 _bindContentControlEvents: function () {
266 $el.closest( ".ui-page" )
267 .bind( "pagebeforeshow", function ( event ) {
272 _setContentMinHeight : function ( thisPage ) {
273 var $elPage = $( thisPage ),
274 $elHeader = $elPage.find( ":jqmData(role='header')" ),
275 $elFooter = $elPage.find( ":jqmData(role='footer')" ),
276 $elContent = $elPage.find( ":jqmData(role='content')" ),
279 resultMinHeight = window.innerHeight - $elHeader.height() - $elFooter.height();
281 $elContent.css( "min-height", resultMinHeight - parseFloat( $elContent.css("padding-top") ) - parseFloat( $elContent.css("padding-bottom") ) + "px" );
284 _updateHeaderArea : function ( thisPage ) {
285 var $elPage = $( thisPage ),
286 $elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
287 headerBtnNum = $elHeader.children("a").length,
288 headerSrcNum = $elHeader.children("img").length;
290 if ( !$elPage.is( ".ui-dialog" ) ) {
291 $elHeader.find( "h1" ).css( "width", window.innerWidth - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 4 );
293 /* add half width for default space between text and button, and img tag area is too narrow, so multiply three for img width*/
298 // This will set the content element's top or bottom padding equal to the toolbar's height
299 updatePagePadding: function ( tbPage ) {
300 var $el = this.element,
301 header = $el.siblings( ".ui-header" ).length,
302 footer = $el.siblings( ".ui-footer" ).length;
304 // This behavior only applies to "fixed", not "fullscreen"
305 if ( this.options.fullscreen ) {
309 tbPage = tbPage || $el.closest( ".ui-page" );
311 if ( $el.siblings( ".ui-header" ).jqmData("position") == "fixed" || $.support.scrollview ) {
312 $( tbPage ).css( "padding-top", ( header ? $el.siblings( ".ui-header" ).outerHeight() : 0 ) );
314 $( tbPage ).css( "padding-bottom", ( footer ? $el.siblings( ".ui-footer" ).outerHeight() : 0 ) );
317 /* 1. Calculate and update content height */
318 updatePageLayout: function ( receiveType, thisPage ) {
320 $elPage = $( thisPage ),
321 $elHeader = $elPage.find( ":jqmData(role='header')" ),
322 $elContent = $elPage.find( ":jqmData(role='content')" ),
323 resultContentHeight = 0,
324 resultFooterHeight = 0,
325 resultHeaderHeight = 0;
327 if ( $elPage.length ) {
328 $elFooter = $elPage.find( ":jqmData(role='footer')" );
330 $elFooter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
333 // calculate footer height
334 resultFooterHeight = ( $elFooter.css( "display" ) == "none" ) ? 0 : $elFooter.height();
335 resultHeaderHeight = ( $elHeader.css( "display" ) == "none" ) ? 0 : $elHeader.height();
337 if (resultFooterHeight != 0 ) {
338 $elFooter.css( "bottom", 0 );
341 resultContentHeight = window.innerHeight - resultFooterHeight - resultHeaderHeight;
343 if ( $.support.scrollview ) {
344 $elContent.height( resultContentHeight -
345 parseFloat( $elContent.css("padding-top") ) -
346 parseFloat( $elContent.css("padding-bottom") ) );
349 // External call page( "refresh") - in case title changed
352 .css( "min-height", resultContentHeight )
353 .css( "padding-top", resultHeaderHeight )
354 .css( "padding-bottom", resultFooterHeight );
358 show: function ( notransition ) {
359 /* blank function: deprecated */
362 hide: function ( notransition ) {
363 /* blank function: deprecated */
366 toggle: function () {
367 this[ this._visible ? "hide" : "show" ]();
370 destroy: function () {
371 this.element.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
372 this.element.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
376 //auto self-init widgets
378 .bind( "pagecreate create", function ( e ) {
379 // DEPRECATED in 1.1: support for data-fullscreen=true|false on the page element.
380 // This line ensures it still works, but we recommend moving the attribute to the toolbars themselves.
381 if ( $( e.target ).jqmData( "fullscreen" ) ) {
382 $( $.mobile.pagelayout.prototype.options.initSelector, e.target ).not( ":jqmData(fullscreen)" ).jqmData( "fullscreen", true );
384 $.mobile.pagelayout.prototype.enhanceWithin( e.target );