Export 0.1.63

[platform/framework/web/web-ui-fw.git] / src / widgets / popupwindow / js / jquery.mobile.tizen.popupwindow.js

diff --git a/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js b/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js
index 9293c82..5458567 100755 (executable)
--- a/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js
+++ b/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js
@@ -85,6 +85,54 @@
  *     popupafterclose triggered when a popup has completely closed
 */
 
+/**
+       @class Popup
+       The pop-up widget shows a list of items in a pop-up window in the middle of the screen. It automatically optimizes the pop-up window size within the screen.
+       To add a pop-up widget to the application, use the following code:
+
+               // Basic pop-up
+               <div id="center_info" data-role="popup" data-style="center_info">
+                       <div data-role="text">
+                               <p>
+                               Pop-up dialog box, a child window that blocks user interaction in the parent window
+                               </p>
+                       </div>
+               </div>
+               // Pop-up with a title and button
+               <div id="center_title_1btn" data-role="popup" data-style="center_title_1btn">
+                       <p data-role="title">
+                               Pop-up title
+                       </p>
+                       <p data-role="text">
+                               Pop-up dialog box
+                       </p>
+               <div data-role="button-bg">
+                       <input type="button" value="Text Button" />
+               </div>
+               </div>
+
+       The pop-up can define callbacks for events as described in the jQueryMobile documentation for pop-up events. <br/>You can use methods with the pop-up as described in the jQueryMobile documentation for pop-up methods.
+*/
+
+/**
+       @property {String} data-style
+       Defines the pop-up window style.
+       The following styles are available:
+
+       center_info: basic pop-up message
+       center_title: pop-up message with a title
+       center_basic_1btn: pop-up message with 1 button
+       center_basic_2btn: pop-up message with 2 horizontal buttons
+       center_title_1btn: pop-up message with a title and 1 button
+       center_title_2btn: pop-up message with a title and 2 horizontal buttons
+       center_title_3btn: pop-up message with a title and 3 horizontal buttons
+       center_button_vertical: pop-up message with vertical buttons
+       center_checkbox: pop-up message with a check box
+       center_liststyle_1btn>: pop-up message with a list and 1 button
+       center_liststyle_2btn: pop-up message with a list and 2 horizontal buttons
+       center_liststyle_3btn: pop-up message with a list and 3 horizontal buttons
+*/
+
 (function ( $, undefined ) {
        $.widget( "tizen.popupwindow", $.tizen.widgetex, {
                options: {
@@ -126,7 +174,7 @@
                        popup.find( ":jqmData(role='check-bg')" )
                                        .wrapAll( "<div class='popup-check-bg'></div>" );
                        popup.find( ":jqmData(role='scroller-bg')" )
-                                       .wrapAll( "<div class='popup-scroller-bg'></div>" );
+                                       .addClass( "popup-scroller-bg" );
                        popup.find( ":jqmData(role='text-bottom-bg')" )
                                        .wrapAll( "<div class='popup-text-bottom-bg'></div>" );
                        popup.find( ":jqmData(role='text-left')" )
@@ -138,6 +186,7 @@
                },
 
                _create: function () {
+                       console.warn("popupwindow() was deprecated. use popup() instead.");
                        var thisPage = this.element.closest(":jqmData(role='page')"),
                                self = this;
 
@@ -162,6 +211,12 @@
                                self.close();
                                return false;
                        } );
+
+                       this.element.bind( "vclick", function( e ) {
+                               if ( $( e.target ).is("ui-btn-ctxpopup-close") ) {
+                                       self.close();
+                               }
+                       } );
                },
 
                destroy: function () {
@@ -245,7 +300,7 @@
                        maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
                        newtop = ( screenHeight - menuHeight ) / 2;
 
-                       if ( menuWidth < maxwidth ) {
+                       if ( !maxwidth || menuWidth < maxwidth ) {
                                newleft = ( screenWidth - menuWidth ) / 2;
                        } else {
                                newleft = x - menuWidth / 2;
@@ -266,9 +321,10 @@
                                top: newtop,
                                left: newleft
                        });
-               },
 
-               open: function ( x_where, y_where ) {
+                       this._ui.screen.css( "height", screenHeight );
+               },
+               open: function ( x_where, y_where, backgroundclose ) {
                        var self = this,
                                zIndexMax = 0;
 
@@ -287,13 +343,19 @@
                                }
                        } );
 
-                       this._ui.screen.css( "height", "100%" )
-                                       .removeClass("ui-screen-hidden");
+                       this._ui.screen.css( "height", $( window ).height() );
 
-                       if ( this.options.fade ) {
-                               this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
+                       if( backgroundclose ) {
+                               this._ui.screen.css( "opacity", 0 )
+                                               .removeClass("ui-screen-hidden");
                        } else {
-                               this._ui.screen.css( {opacity: this.options.opacity} );
+                               this._ui.removeClass("ui-screen-hidden");
+
+                               if ( this.options.fade ) {
+                                       this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
+                               } else {
+                                       this._ui.screen.css( {opacity: this.options.opacity} );
+                               }
                        }
 
                        this._setPosition( x_where, y_where );