1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2 //>>description: Set a layout of pages
4 //>>group: Tizen:Widgets
6 define( [ '../jquery.mobile.tizen.core' ], function ( ) {
7 //>>excludeEnd("jqmBuildExclude");
9 /* ***************************************************************************
10 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
12 * Permission is hereby granted, free of charge, to any person obtaining a
13 * copy of this software and associated documentation files (the "Software"),
14 * to deal in the Software without restriction, including without limitation
15 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
16 * and/or sell copies of the Software, and to permit persons to whom the
17 * Software is furnished to do so, subject to the following conditions:
19 * The above copyright notice and this permission notice shall be included in
20 * all copies or substantial portions of the Software.
22 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
23 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
24 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
25 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
26 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
27 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
28 * DEALINGS IN THE SOFTWARE.
29 * ***************************************************************************
31 * Author: Jinhyuk Jun <jinhyuk.jun@samsung.com>
34 (function ( $, undefined ) {
36 $.widget( "mobile.pagelayout", $.mobile.widget, {
38 visibleOnPageShow: true,
39 disablePageZoom: true,
40 transition: "slide", //can be none, fade, slide (slide maps to slideup or slidedown)
43 tapToggleBlacklist: "a, input, select, textarea, .ui-header-fixed, .ui-footer-fixed",
44 hideDuringFocus: "input, textarea, select",
45 updatePagePadding: true,
46 // Browser detection! Weeee, here we go...
47 // Unfortunately, position:fixed is costly, not to mention probably impossible, to feature-detect accurately.
48 // Some tests exist, but they currently return false results in critical devices and browsers, which could lead to a broken experience.
49 // Testing fixed positioning is also pretty obtrusive to page load, requiring injected elements and scrolling the window
50 // The following function serves to rule out some popular browsers with known fixed-positioning issues
51 // This is a plugin option like any other, so feel free to improve or overwrite it
52 supportBlacklist: function () {
54 ua = navigator.userAgent,
55 platform = navigator.platform,
56 // Rendering engine is Webkit, and capture major version
57 wkmatch = ua.match( /AppleWebKit\/([0-9]+)/ ),
58 wkversion = !!wkmatch && wkmatch[ 1 ],
59 ffmatch = ua.match( /Fennec\/([0-9]+)/ ),
60 ffversion = !!ffmatch && ffmatch[ 1 ],
61 operammobilematch = ua.match( /Opera Mobi\/([0-9]+)/ ),
62 omversion = !!operammobilematch && operammobilematch[ 1 ];
65 // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
66 ( ( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1 || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 ) ||
68 ( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" ) ||
69 ( operammobilematch && omversion < 7458 ) ||
70 //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
71 ( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 ) ||
72 // Firefox Mobile before 6.0 -
73 ( ffversion && ffversion < 6 ) ||
75 ( window.palmGetResource !== undefined && wkversion && wkversion < 534 ) ||
77 ( ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1 )
84 initSelector: ":jqmData(role='content')"
87 _create: function () {
93 // Feature detecting support for
94 if ( o.supportBlacklist() ) {
99 self._addFixedClass();
100 self._addTransitionClass();
101 self._bindPageEvents();
104 self._bindContentControlEvents();
107 /* add minimum fixed css style to bar(header/footer) and content
108 * it need to update when core source modified(jquery.mobile.page.section.js)
109 * modified from core source cuz initSelector different */
110 _addFixedClass: function () {
114 $elHeader = $el.siblings( ":jqmData(role='header')" ),
115 $elFooter = $el.siblings( ":jqmData(role='footer')" ),
116 $elPage = $el.closest(".ui-page");
118 $elHeader.addClass( "ui-header-fixed" );
119 $elFooter.addClass( "ui-footer-fixed" );
121 // "fullscreen" overlay positioning
122 if ( o.fullscreen ) {
123 $elHeader.addClass( "ui-header-fullscreen" );
124 $elFooter.addClass( "ui-footer-fullscreen" );
126 .addClass( "ui-page-header-fullscreen" )
127 .addClass( "ui-page-footer-fullscreen" );
129 // If not fullscreen, add class to page to set top or bottom padding
130 $elPage.addClass( "ui-page-header-fixed" )
131 .addClass( "ui-page-footer-fixed" );
135 /* original core source(jquery.mobile.fixedToolbar.js)
137 _addTransitionClass: function () {
138 var tclass = this.options.transition;
140 if ( tclass && tclass !== "none" ) {
141 // use appropriate slide for header or footer
142 if ( tclass === "slide" ) {
143 tclass = this.element.is( ".ui-header" ) ? "slidedown" : "slideup";
146 this.element.addClass( tclass );
151 /* Set default page positon
152 * 1. add title style to header
153 * 2. Set default header/footer position */
154 setHeaderFooter: function ( thisPage ) {
155 var $elPage = $( thisPage ),
156 $elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
157 $elContent = $elPage.find( ".ui-content" ),
158 $elFooter = $elPage.find( ":jqmData(role='footer')" ),
159 $elFooterGroup = $elFooter.find( ":jqmData(role='fieldcontain')" ),
160 $elFooterControlGroup = $elFooter.find( ".ui-controlgroup" );
162 // divide content mode scrollview and non-scrollview
163 if ( !$elPage.is( ".ui-dialog" ) ) {
164 if ( $elHeader.jqmData("position") == "fixed" || ( $.support.scrollview && $.tizen.frameworkData.theme.match(/tizen/) ) ) {
166 .css( "position", "fixed" )
167 .css( "top", "0px" );
168 } else if ( !$.support.scrollview && $elHeader.jqmData("position") != "fixed" ) {
169 $elHeader.css( "position", "relative" );
173 /* set Title style */
174 if ( $elHeader.find("span.ui-title-text-sub").length ) {
175 $elHeader.addClass( "ui-title-multiline");
178 if ( $elFooterGroup.find( "div" ).is( ".ui-controlgroup-label" ) ) {
179 $elFooterGroup.find( "div.ui-controlgroup-label" ).remove();
182 if ( $elFooterControlGroup.length ) {
183 var anchorPer = 100 / $elFooterControlGroup.find( "a" ).length;
184 $elFooterControlGroup.find( "a" ).each( function ( i ) {
185 $elFooterControlGroup.find( "a" ).eq( i ).width( anchorPer + "%" );
190 _bindPageEvents: function () {
196 //page event bindings
197 // Fixed toolbars require page zoom to be disabled, otherwise usability issues crop up
198 // This method is meant to disable zoom while a fixed-positioned toolbar page is visible
199 $el.closest( ".ui-page" )
200 .bind( "pagebeforeshow", function ( event ) {
202 if ( o.disablePageZoom ) {
203 $.mobile.zoom.disable( true );
205 if ( !o.visibleOnPageShow ) {
208 self.setHeaderFooter( thisPage );
209 self._setContentMinHeight( thisPage );
211 .bind( "webkitAnimationStart animationstart updatelayout", function ( e, data ) {
213 if ( o.updatePagePadding ) {
214 self.updatePagePadding(thisPage);
215 self.updatePageLayout( thisPage, data);
219 .bind( "pageshow", function ( event ) {
221 self._setContentMinHeight( thisPage );
222 self.updatePagePadding( thisPage );
223 self._updateHeaderArea( thisPage );
224 if ( o.updatePagePadding ) {
225 $( window ).bind( "throttledresize." + self.widgetName, function () {
226 self.updatePagePadding(thisPage);
228 self.updatePageLayout( thisPage, false);
229 self._updateHeaderArea( thisPage );
230 self._setContentMinHeight( thisPage );
235 .bind( "pagebeforehide", function ( e, ui ) {
236 if ( o.disablePageZoom ) {
237 $.mobile.zoom.enable( true );
239 if ( o.updatePagePadding ) {
240 $( window ).unbind( "throttledresize." + self.widgetName );
244 window.addEventListener( "softkeyboardchange", function ( e ) {
245 var $elDownBtn = $( "<div class='ui-btn-footer-down'></div>" ),
246 $elPage = $( ".ui-page-active" ),
247 backBtnPosition = "footer";
249 if ( $elPage.data( "addBackBtn" ) ) {
250 $elPage.data( "addBackBtn" ) == "header" ? backBtnPosition = "header" : backBtnPosition = "footer";
252 if ( e.state == "on" ) {
253 if ( !$elPage.find( ".ui-" + backBtnPosition + " .ui-btn-footer-down" ).length ) {
254 $elDownBtn.buttonMarkup( { icon: "down" } ).appendTo( $elPage.find( ".ui-" + backBtnPosition ) );
256 $( ".ui-page-active .ui-btn-back" ).hide();
257 } else if ( e.state == "off" ) {
258 $( ".ui-page-active .ui-btn-back" ).show();
259 $( ".ui-btn-footer-down" ).remove();
266 _bindContentControlEvents: function () {
271 $el.closest( ".ui-page" )
272 .bind( "pagebeforeshow", function ( event ) {
277 _setContentMinHeight : function ( thisPage ) {
278 var $elPage = $( thisPage ),
279 $elHeader = $elPage.find( ":jqmData(role='header')" ),
280 $elFooter = $elPage.find( ":jqmData(role='footer')" ),
281 $elContent = $elPage.find( ":jqmData(role='content')" ),
284 layoutInnerHeight = window.innerHeight;
286 if ( !$.support.scrollview ) {
287 dpr = window.outerWidth / window.innerWidth;
288 layoutInnerHeight = Math.floor( window.outerHeight / dpr );
291 resultMinHeight = layoutInnerHeight - $elHeader.height() - $elFooter.height();
293 $elContent.css( "min-height", resultMinHeight - parseFloat( $elContent.css("padding-top") ) - parseFloat( $elContent.css("padding-bottom") ) + "px" );
296 _updateHeaderArea : function ( thisPage ) {
297 var $elPage = $( thisPage ),
298 $elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
299 headerBtnNum = $elHeader.children("a").length,
300 headerSrcNum = $elHeader.children("img").length;
302 if ( !$elPage.is( ".ui-dialog" ) ) {
303 $elHeader.find( "h1" ).css( "width", window.innerWidth - parseInt( $elHeader.find( "h1" ).css( "margin-left" ), 10 ) * 2 - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 4 );
305 /* add half width for default space between text and button, and img tag area is too narrow, so multiply three for img width*/
310 // This will set the content element's top or bottom padding equal to the toolbar's height
311 updatePagePadding: function ( tbPage ) {
312 var $el = this.element,
313 header = $el.siblings( ".ui-header" ).length,
314 footer = $el.siblings( ".ui-footer" ).length;
316 // This behavior only applies to "fixed", not "fullscreen"
317 if ( this.options.fullscreen ) {
321 tbPage = tbPage || $el.closest( ".ui-page" );
323 if ( $el.siblings( ".ui-header" ).jqmData("position") == "fixed" || $.support.scrollview ) {
324 $( tbPage ).css( "padding-top", ( header ? $el.siblings( ".ui-header" ).outerHeight() : 0 ) );
326 $( tbPage ).css( "padding-bottom", ( footer ? $el.siblings( ".ui-footer" ).outerHeight() : 0 ) );
329 /* 1. Calculate and update content height */
330 updatePageLayout: function ( thisPage, receiveType ) {
332 $elPage = $( thisPage ),
333 $elHeader = $elPage.find( ":jqmData(role='header')" ),
334 $elContent = $elPage.find( ":jqmData(role='content')" ),
335 resultContentHeight = 0,
336 resultFooterHeight = 0,
337 resultHeaderHeight = 0,
338 layoutInnerHeight = window.innerHeight,
341 if ( $elPage.length ) {
342 $elFooter = $elPage.find( ":jqmData(role='footer')" );
344 $elFooter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
347 // calculate footer height
348 resultFooterHeight = ( $elFooter.css( "display" ) == "none" || $elFooter.length == 0 ) ? 0 : $elFooter.height();
349 resultHeaderHeight = ( $elHeader.css( "display" ) == "none" || $elHeader.length == 0 ) ? 0 : $elHeader.height();
351 if (resultFooterHeight != 0 ) {
352 $elFooter.css( "bottom", 0 );
355 if ( !$.support.scrollview ) {
356 dpr = window.outerWidth / window.innerWidth;
357 layoutInnerHeight = Math.floor( window.outerHeight / dpr );
360 resultContentHeight = layoutInnerHeight - resultFooterHeight - resultHeaderHeight;
362 if ( $.support.scrollview ) {
363 $elContent.height( resultContentHeight -
364 parseFloat( $elContent.css("padding-top") ) -
365 parseFloat( $elContent.css("padding-bottom") ) );
368 // External call page( "refresh") - in case title changed
371 .css( "min-height", resultContentHeight )
372 .css( "padding-top", resultHeaderHeight )
373 .css( "padding-bottom", resultFooterHeight );
377 show: function ( notransition ) {
378 /* blank function: deprecated */
381 hide: function ( notransition ) {
382 /* blank function: deprecated */
385 toggle: function () {
386 this[ this._visible ? "hide" : "show" ]();
389 destroy: function () {
390 this.element.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
391 this.element.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
394 refresh: function () {
395 var $elPage = $( ".ui-page-active" );
396 this.setHeaderFooter( $elPage );
397 this._updateHeaderArea( $elPage );
401 //auto self-init widgets
403 .bind( "pagecreate create", function ( e ) {
404 // DEPRECATED in 1.1: support for data-fullscreen=true|false on the page element.
405 // This line ensures it still works, but we recommend moving the attribute to the toolbars themselves.
406 if ( $( e.target ).jqmData( "fullscreen" ) ) {
407 $( $.mobile.pagelayout.prototype.options.initSelector, e.target ).not( ":jqmData(fullscreen)" ).jqmData( "fullscreen", true );
409 $.mobile.pagelayout.prototype.enhanceWithin( e.target );
414 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
416 //>>excludeEnd("jqmBuildExclude");