pagelayout : change external refresh call and ime status follow only current page
[platform/framework/web/web-ui-fw.git] / src / widgets / pagelayout / js / jquery.mobile.tizen.pagelayout.js
old mode 100755 (executable)
new mode 100644 (file)
index dd1fb27..f86067f
                                        omversion = !!operammobilematch && operammobilematch[ 1 ];
 
                                if (
-                                               // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
-                                               ( ( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1  || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 )
-                                               ||
+                                       // iOS 4.3 and older : Platform is iPhone/Pad/Touch and Webkit version is less than 534 (ios5)
+                                       ( ( platform.indexOf( "iPhone" ) > -1 || platform.indexOf( "iPad" ) > -1  || platform.indexOf( "iPod" ) > -1 ) && wkversion && wkversion < 534 ) ||
                                                // Opera Mini
-                                               ( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" )
-                                               ||
-                                               ( operammobilematch && omversion < 7458 )
-                                               ||
+                                               ( w.operamini && ({}).toString.call( w.operamini ) === "[object OperaMini]" ) ||
+                                               ( operammobilematch && omversion < 7458 ) ||
                                                //Android lte 2.1: Platform is Android and Webkit version is less than 533 (Android 2.2)
-                                               ( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 )
-                                               ||
+                                               ( ua.indexOf( "Android" ) > -1 && wkversion && wkversion < 533 ) ||
                                                // Firefox Mobile before 6.0 -
-                                               ( ffversion && ffversion < 6 )
-                                               ||
+                                               ( ffversion && ffversion < 6 ) ||
                                                // WebOS less than 3
-                                               ( "palmGetResource" in window && wkversion && wkversion < 534 )
-                                               ||
+                                               ( window.palmGetResource !== undefined && wkversion && wkversion < 534 ) ||
                                                // MeeGo
                                                ( ua.indexOf( "MeeGo" ) > -1 && ua.indexOf( "NokiaBrowser/8.5.0" ) > -1 )
                                ) {
                /* Set default page positon
                * 1. add title style to header
                * 2. Set default header/footer position */
-               setHeaderFooter: function ( event ) {
-                       var $elPage = $( event.target ),
+               setHeaderFooter: function ( thisPage ) {
+                       var $elPage = $( thisPage ),
                                $elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
-                               $elFieldcontain = $elHeader.find( ":jqmData(role='fieldcontain')" ),
-                               $elControlgroup = $elHeader.find( ":jqmData(role='controlgroup')" ),
                                $elContent = $elPage.find( ".ui-content" ),
-                               next_id,
-                               $elFooter,
-                               $elFooterGroup,
-                               gLength,
-                               footerButton,
-                               tStyle = "normal",
-                               headerBtnNum;
-
-                       if ( $elFieldcontain.length != 0 || $elControlgroup.length != 0 ) {
-                               tStyle = "extended";
-                       }
-
-                       if ( $elHeader.jqmData("position") == "fixed" || $.tizen.frameworkData.theme.match(/tizen/) || $elHeader.css("position") == "fixed" ) {
-                               $elHeader
-                                       .css( "position", "fixed" )
-                                       .css( "top", "0px" );
-
-                               if ( $elHeader.children().is(".ui-navbar") ) {
-                                       $elHeader.addClass( "ui-title-controlbar-height" );
-                                       $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-controlbar-height" );
-                               } else {
-                                       if ( $elHeader.length ) {
-                                               $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-" + tStyle + "-height" );
-                                       } else {
-                                               $( event.target ).find( ".ui-content" ).addClass( "ui-title-content-no-height" );
-                                       }
-                               }
-                       }
-
-                       if ( $elHeader.children().is(".ui-option-header") ) {
-                               $elContent.removeClass( "ui-title-content-" + tStyle + "-height" );
-                               if ( $.tizen.optionheader.prototype.options.collapseOnInit == true ) {
-                                       $elContent.addClass( "ui-title-content-option-header-collapsed-1line-height" );
-                               } else {
-                                       $elContent.addClass( "ui-title-content-option-header-expanded-1line-height" );
-                               }
-                       } else if ( $elHeader.find("input").attr("type") === "search" || $elHeader.find("input").attr("type") === "tizen-search" || $elHeader.find("input").jqmData("type") == "search" || $elHeader.find("input").jqmData("type") == "tizen-search" ) {
-                               $elContent.removeClass( "ui-title-content-" + tStyle + "-height" ).addClass( "ui-title-content-search" );
-                       }
-
-                       headerBtnNum = $elHeader.children("a").length;
-                       if ( headerBtnNum > 0  || $elHeader.children().find(".ui-radio").length != 0 ) {
-                               if ( tStyle != "normal" ) {
-                                       gLength = $elFieldcontain.length ? $elFieldcontain.find( ".ui-radio" ).length : $elControlgroup.find( "a" ).length;
-
-                                       $elHeader.addClass( "ui-title-extended-height" );
-
-                                       $elFieldcontain.length ? $elFieldcontain.find( ".ui-controlgroup" ).addClass( "ui-title-extended-controlgroup" ).addClass( "ui-extended-controlgroup" ) : $elControlgroup.addClass( "ui-title-extended-button-controlgroup" ).addClass( "ui-extended-controlgroup" );
-
-                                       $elFieldcontain.length ? $elFieldcontain.addClass( "ui-title-extended-segment-style" ) : $elControlgroup.addClass( "ui-title-extended-segment-style" );
-
-                                       if ( gLength == 2 || gLength == 3 || gLength == 4 ) {
-                                               $elFieldcontain.length ? $elFieldcontain.addClass( "ui-title-extended-controlgroup-" + gLength + "btn" ) : $elControlgroup.addClass( "ui-title-extended-controlgroup-" + gLength + "btn" );
-                                       }
-                               }
-                               $elContent.addClass( "ui-title-content-" + tStyle + "-height" );
-                       }
+                               $elFooter = $elPage.find( ":jqmData(role='footer')" ),
+                               $elFooterGroup = $elFooter.find( ":jqmData(role='fieldcontain')" );
 
                        // divide content mode scrollview and non-scrollview
-                       // recalculate content area when resize callback occur
-                       if ( $.support.scrollview ) {
-                               if ( $elHeader.css( "position" ) != "fixed" ) {
-                                       $elHeader.css( "position", "fixed" );
-                               }
-
-                       } else {
-                               if ( $elHeader.css("position") != "fixed" ) {
+                       if ( !$elPage.is( ".ui-dialog" ) ) {
+                               if ( $elHeader.jqmData("position") == "fixed" || ( $.support.scrollview && $.tizen.frameworkData.theme.match(/tizen/) ) ) {
+                                       $elHeader
+                                               .css( "position", "fixed" )
+                                               .css( "top", "0px" );
+                               } else if ( !$.support.scrollview && $elHeader.jqmData("position") != "fixed" ) {
                                        $elHeader.css( "position", "relative" );
                                }
                        }
 
-                       $elFooter = $( document ).find( ":jqmData(role='footer')" );
-
-                       if ( $elFooter.find(".ui-navbar").is(".ui-controlbar-s") ) {
-                               $elFooter
-                                       .css( "bottom", 0 )
-                                       .show();
-                       }
-
-                       if ( $elFooter.children().find(".ui-radio").length != 0 ) {
-                               $elFooterGroup = $elFooter.find( ":jqmData(role='fieldcontain')" );
-                               gLength = $elFooterGroup.find( ".ui-radio" ).length;
-
-                               $elFooterGroup.find( ".ui-controlgroup" )
-                                       .addClass( "ui-extended-controlgroup" )
-                                       .addClass( "ui-footer-extended-controlgroup" )
-                                       .css( "display", "inline" );
-
-                                       /* Groupcontrol cannot initialize inline property at first page */
-                               $elFooterGroup.addClass( "ui-footer-extended-controlgroup-" + gLength + "btn" );
-                       }
-
-                       footerButton = $elFooter.children( "a" );
-                       footerButton.each( function ( i ) {
-                               if ( footerButton.eq( i ).is(".ui-btn") && !footerButton.eq( i ).is(".ui-btn-back") ) {
-                                       footerButton.eq( i )
-                                               .removeClass( "ui-btn-left" )
-                                               .addClass( "ui-btn-footer-right" );
-                               }
-                       });
-
-                       if ( $elFooter.is(".ui-footer-fixed") ) {
-                               $elFooter.css( "bottom", 0 );
+                       /* set Title style */
+                       if ( $elHeader.find("span.ui-title-text-sub").length ) {
+                               $elHeader.addClass( "ui-title-multiline");
                        }
 
-                       /* Increase Content size with dummy <div> because of footer height */
-                       if ( $elFooter.length != 0 && $( event.target ).find( ".dummy-div" ).length == 0 ) {
-                               $( event.target ).find( ":jqmData(role='content')" ).append( '<div class="dummy-div"></div>' );
-                               $( ".dummy-div" )
-                                       .css( "width", $elFooter.width() )
-                                       .css( "height", $elFooter.height() );
+                       if ( $elFooterGroup.find( "div" ).is( ".ui-controlgroup-label" ) ) {
+                               $elFooterGroup.find( "div.ui-controlgroup-label" ).remove();
                        }
-
-                       $elFooter.show();
-
-                       /* Header position fix(remove transition) */
-                       next_id = $( event.target ).attr( "id" );
-
-                       $( "#" + next_id ).find( ":jqmData(role='header')" )
-                               .removeClass( "fade in out" )
-                               .appendTo( $.mobile.pageContainer );
                },
 
                _bindPageEvents: function () {
                        var self = this,
                                o = self.options,
-                               $el = self.element;
+                               $el = self.element,
+                               $elCurrentFooter;
 
                        //page event bindings
                        // Fixed toolbars require page zoom to be disabled, otherwise usability issues crop up
                        // This method is meant to disable zoom while a fixed-positioned toolbar page is visible
                        $el.closest( ".ui-page" )
                                .bind( "pagebeforeshow", function ( event ) {
+                                       var thisPage = this;
                                        if ( o.disablePageZoom ) {
                                                $.mobile.zoom.disable( true );
                                        }
                                        if ( !o.visibleOnPageShow ) {
                                                self.hide( true );
                                        }
-                                       self._IMEShown = false;
-                                       self.setHeaderFooter( event );
+                                       self.setHeaderFooter( thisPage );
+                                       self._setContentMinHeight( thisPage );
                                } )
                                .bind( "webkitAnimationStart animationstart updatelayout", function ( e, data ) {
+                                       var thisPage = this;
                                        if ( o.updatePagePadding ) {
-                                               self.updatePagePadding(data);   // FIXME: unused function.
-                                               self.updatePageLayout(data);
+                                               self.updatePagePadding(thisPage);
+                                               self.updatePageLayout( thisPage, data);
                                        }
                                })
 
                                .bind( "pageshow", function ( event ) {
-                                       self.updatePagePadding();                       // FIXME: unused function.
-                                       self._updateHeaderArea();
+                                       var thisPage = this;
+                                       self._setContentMinHeight( thisPage );
+                                       self.updatePagePadding( thisPage );
+                                       self._updateHeaderArea( thisPage );
                                        if ( o.updatePagePadding ) {
                                                $( window ).bind( "throttledresize." + self.widgetName, function () {
-                                                       self.updatePagePadding();       // FIXME: unused function.
-                                                       self.layoutPageIME();   // IME/resize reposition
-                                                       self.updatePageLayout();
-                                                       self._updateHeaderArea();
+                                                       self.updatePagePadding(thisPage);
+
+                                                       self.updatePageLayout( thisPage, false);
+                                                       self._updateHeaderArea( thisPage );
+                                                       self._setContentMinHeight( thisPage );
                                                });
                                        }
-
-                                       /* Header position fix(remove transition) */
-                                       $( "body" ).children( ":jqmData(role='header')" )
-                                               .insertBefore( $(event.target).find(":jqmData(role='content')").eq( 0 ) );
-/* new_header */
                                })
 
                                .bind( "pagebeforehide", function ( e, ui ) {
                                                }
                                        }
                                });
+
+                       window.addEventListener( "softkeyboardchange", function ( e ) {
+                               var thisPage = $( ".ui-page-active" );
+
+                               if ( e.state == "on" ) {
+                                       $elCurrentFooter = $( ".ui-page-active .ui-footer" );
+                                       $elCurrentFooter.hide();
+                               } else if (e.state == "off") {
+                                       $elCurrentFooter.show();
+                               }
+                               self.updatePagePadding( thisPage );
+                               self.updatePageLayout( thisPage, true );
+                       });
                },
 
                _bindContentControlEvents: function () {
                                });
                },
 
-               _updateHeaderArea : function() {
-                       var $elPage = $( ".ui-page-active" ),
+               _setContentMinHeight : function ( thisPage ) {
+                       var $elPage = $( thisPage ),
+                               $elHeader = $elPage.find( ":jqmData(role='header')" ),
+                               $elFooter = $elPage.find( ":jqmData(role='footer')" ),
+                               $elContent = $elPage.find( ":jqmData(role='content')" ),
+                               resultMinHeight;
+
+                       resultMinHeight = window.innerHeight - $elHeader.height() - $elFooter.height();
+
+                       $elContent.css( "min-height", resultMinHeight - parseFloat( $elContent.css("padding-top") ) - parseFloat( $elContent.css("padding-bottom") ) + "px" );
+               },
+
+               _updateHeaderArea : function ( thisPage ) {
+                       var $elPage = $( thisPage ),
                                $elHeader = $elPage.find( ":jqmData(role='header')" ).length ? $elPage.find( ":jqmData(role='header')") : $elPage.siblings( ":jqmData(role='header')"),
                                headerBtnNum = $elHeader.children("a").length,
                                headerSrcNum = $elHeader.children("img").length;
 
-                       $elHeader.find( "h1" ).css( "width", window.innerWidth - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 3 );
+                       if ( !$elPage.is( ".ui-dialog" ) ) {
+                               $elHeader.find( "h1" ).css( "width", window.innerWidth - $elHeader.children( "a" ).width() * headerBtnNum - $elHeader.children( "a" ).width() / 4 - $elHeader.children( "img" ).width() * headerSrcNum * 4 );
+                       }
                        /* add half width for default space between text and button, and img tag area is too narrow, so multiply three for img width*/
                },
 
                _visible: true,
-               _IMEShown : false,
-               _IMEindicatorHeight : window.outerHeight - window.innerHeight,
-
-               layoutPageIME: function () {
-                       if ( $( document.activeElement ).is( "input" ) || $( document.activeElement ).is( "textarea" )
-                                       || $(".ui-page-active .ui-header .input-search-bar").length
-                                       || $(".ui-page-active .ui-content").find("input").length
-                                       || $(".ui-page-active .ui-content").find("textarea").length) {
-                                       /* Check vertical and horizontal ratio.
-                                        * If focus on input and two values are different, IME is drawed. */
-
-                               if ( ( window.innerHeight + this._IMEindicatorHeight ) < window.outerHeight && window.innerWidth == window.outerWidth ) {
-                                       if ( this._IMEShown === false ) {
-                                               $( ".ui-page-active .ui-footer" ).hide();
-                                               this._IMEShown = true;
-                                       }
-                               } else if ( ( window.innerHeight + this._IMEindicatorHeight ) >= window.outerHeight ) {
-                                       if ( this._IMEShown === true ) {
-                                               $( ".ui-page-active .ui-footer" ).show();
-                                               this._IMEShown = false;
-                                       }
-                               }
-                       } else {
-                               if ( ( window.innerHeight + this._IMEindicatorHeight ) >= window.outerHeight ) {
-                                       if ( this._IMEShown === true ) {
-                                               $( ".ui-page-active .ui-footer" ).show();
-                                               this._IMEShown = false;
-                                       }
-                               }
-                       }
-               },
 
                // This will set the content element's top or bottom padding equal to the toolbar's height
-               updatePagePadding: function (data) {
+               updatePagePadding: function ( tbPage ) {
                        var $el = this.element,
-                               header = $el.is( ".ui-header" );
+                               header = $el.siblings( ".ui-header" ).length,
+                               footer = $el.siblings( ".ui-footer" ).length;
 
                        // This behavior only applies to "fixed", not "fullscreen"
-                       if ( this.options.fullscreen ) { return; }
+                       if ( this.options.fullscreen ) {
+                               return;
+                       }
 
-//                     $el.closest( ".ui-page" ).css( "padding-" + ( header ? "top" : "bottom" ), $el.outerHeight() );
-               },
+                       tbPage = tbPage || $el.closest( ".ui-page" );
 
+                       if ( $el.siblings( ".ui-header" ).jqmData("position") == "fixed" || $.support.scrollview ) {
+                               $( tbPage ).css( "padding-top", ( header ? $el.siblings( ".ui-header" ).outerHeight() : 0 ) );
+                       }
+                       $( tbPage ).css( "padding-bottom", ( footer ? $el.siblings( ".ui-footer" ).outerHeight() : 0 ) );
+               },
 
-               /* 1. Calculate toolbar width(only controlbar)
-               *  2. Calculate and update content height   */
-               updatePageLayout: function ( receiveType ) {
+               /* 1. Calculate and update content height   */
+               updatePageLayout: function ( thisPage, receiveType ) {
                        var $elFooter,
-                               $elFooterControlbar,
-                               $elPage = $( document ).find( ".ui-page-active" ),
+                               $elPage = $( thisPage ),
                                $elHeader = $elPage.find( ":jqmData(role='header')" ),
                                $elContent = $elPage.find( ":jqmData(role='content')" ),
                                resultContentHeight = 0,
                                resultHeaderHeight = 0;
 
                        if ( $elPage.length ) {
-                               $elFooter = $( document ).find( ".ui-page-active" ).find( ":jqmData(role='footer')" );
+                               $elFooter = $elPage.find( ":jqmData(role='footer')" );
                        } else {
                                $elFooter = $( document ).find( ":jqmData(role='footer')" ).eq( 0 );
                        }
-                       $elFooterControlbar = $elFooter.find( ".ui-navbar" );
 
                        // calculate footer height
-                       resultFooterHeight = ( $elFooter.css( "display" ) == "none" ) ? 0 : $elFooter.height();
-                       resultHeaderHeight = ( $elHeader.css( "display" ) == "none" ) ? 0 : $elHeader.height();
+                       resultFooterHeight = ( $elFooter.css( "display" ) == "none" || $elFooter.length == 0 ) ? 0 : $elFooter.height();
+                       resultHeaderHeight = ( $elHeader.css( "display" ) == "none" || $elHeader.length == 0 ) ? 0 : $elHeader.height();
 
                        if (resultFooterHeight != 0 ) {
                                $elFooter.css( "bottom", 0 );
                        }
-                       if ( $elFooterControlbar.jqmData("style") == "toolbar" ) {
-                               $elFooterControlbar.css( "width", window.innerWidth - $elFooterControlbar.siblings( ".ui-btn" ).width() - parseInt($elFooterControlbar.siblings(".ui-btn").css("right"), 10 ) * 2  );
-                       }
 
                        resultContentHeight = window.innerHeight - resultFooterHeight - resultHeaderHeight;
 
                        if ( $.support.scrollview ) {
-                               if ( $elHeader.css("position") != "fixed" ) {
-                                       $elHeader.css( "position", "fixed" );
-                               }
-
                                $elContent.height( resultContentHeight -
                                                parseFloat( $elContent.css("padding-top") ) -
                                                parseFloat( $elContent.css("padding-bottom") ) );
-                       } else {
-                               if ( $elHeader.css("position") != "fixed" ) {
-                                       $elHeader.css( "position", "relative" );
-                               } else {
-                                       $elContent.height( resultContentHeight );
-                               }
                        }
 
-                       // check this line need
-                       // because another style title will be not supported to updatePageLayout
-
-                       // in case title changed
+                       // External call page( "refresh") - in case title changed
                        if ( receiveType ) {
-                               $elContent.css( "top", resultHeaderHeight + "px" );
+                               $elPage
+                                       .css( "min-height", resultContentHeight )
+                                       .css( "padding-top", resultHeaderHeight )
+                                       .css( "padding-bottom", resultFooterHeight );
                        }
                },
 
-               _useTransition: function ( notransition ) {
-                       var $win = $( window ),
-                               $el = this.element,
-                               scroll = $win.scrollTop(),
-                               elHeight = $el.height(),
-                               pHeight = $el.closest( ".ui-page" ).height(),
-                               viewportHeight = $.mobile.getScreenHeight(),
-                               tbtype = $el.is( ":jqmData(role='header')" ) ? "header" : "footer";
-
-                       return !notransition &&
-                               ( this.options.transition && this.options.transition !== "none" &&
-                               (
-                                               ( tbtype === "header" && !this.options.fullscreen && scroll > elHeight ) ||
-                                               ( tbtype === "footer" && !this.options.fullscreen && scroll + viewportHeight < pHeight - elHeight )
-                                       ) || this.options.fullscreen
-                               );
-               },
-
                show: function ( notransition ) {
-/*                     var hideClass = "ui-fixed-hidden",
-                               $el = this.element;
-
-                       if ( this._useTransition( notransition ) ){
-                               $el
-                                       .removeClass( "out " + hideClass )
-                                       .addClass( "in" );
-                       }
-                       else {
-                               $el.removeClass( hideClass );
-                       }
-                       this._visible = true;*/
+                       /* blank function: deprecated */
                },
 
                hide: function ( notransition ) {
-/*                     var hideClass = "ui-fixed-hidden",
-                               $el = this.element,
-                               // if it's a slide transition, our new transitions need the reverse class as well to slide outward
-                               outclass = "out" + ( this.options.transition === "slide" ? " reverse" : "" );
-
-                       if ( this._useTransition( notransition ) ){
-                               $el
-                                       .addClass( outclass )
-                                       .removeClass( "in" )
-                                       .animationComplete( function () {
-                                               $el.addClass( hideClass ).removeClass( outclass );
-                                       });
-                       }
-                       else {
-                               $el.addClass( hideClass ).removeClass( outclass );
-                       }
-                       this._visible = false;*/
+                       /* blank function: deprecated */
                },
 
                toggle: function () {
                        this[ this._visible ? "hide" : "show" ]();
                },
 
-               /* support external api for adding backbutton via javascript */
-/*             backButton: function ( target, status ){
-                       this._addBackbutton( target, "external" );
-               },
-*/
                destroy: function () {
                        this.element.removeClass( "ui-header-fixed ui-footer-fixed ui-header-fullscreen ui-footer-fullscreen in out fade slidedown slideup ui-fixed-hidden" );
                        this.element.closest( ".ui-page" ).removeClass( "ui-page-header-fixed ui-page-footer-fixed ui-page-header-fullscreen ui-page-footer-fullscreen" );
                }
-
        });
 
        //auto self-init widgets
                        $.mobile.pagelayout.prototype.enhanceWithin( e.target );
                });
 
-})( jQuery );
+}( jQuery ));