1 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
2 //>>description: Shows popup on the page
4 //>>group: Tizen:Widgets
6 define( [ '../jquery.mobile.tizen.core', 'jquery.mobile.tizen.widgetex' ], function ( ) {
7 //>>excludeEnd("jqmBuildExclude");
10 * jQuery Mobile Widget @VERSION
12 * This software is licensed under the MIT licence (as defined by the OSI at
13 * http://www.opensource.org/licenses/mit-license.php)
15 * ***************************************************************************
16 * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
17 * Copyright (c) 2011 by Intel Corporation Ltd.
19 * Permission is hereby granted, free of charge, to any person obtaining a
20 * copy of this software and associated documentation files (the "Software"),
21 * to deal in the Software without restriction, including without limitation
22 * the rights to use, copy, modify, merge, publish, distribute, sublicense,
23 * and/or sell copies of the Software, and to permit persons to whom the
24 * Software is furnished to do so, subject to the following conditions:
26 * The above copyright notice and this permission notice shall be included in
27 * all copies or substantial portions of the Software.
29 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
30 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
31 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
32 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
33 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
34 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
35 * DEALINGS IN THE SOFTWARE.
36 * ***************************************************************************
38 * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>,
39 * Elliot Smith <elliot.smith@intel.com>
40 * Hyunjung Kim <hjnim.kim@samsung.com>
44 * % Popupwindow widget do not use anymore(will be deprecated, internal use only)
47 * Shows other elements inside a popup window.
49 * To apply, add the attribute data-role="popupwindow" to a <div> element inside
50 * a page. Alternatively, call popupwindow()
53 * $("#mypopupwindowContent").popupwindow();
54 * where the html might be :
55 * <div id="mypopupwindowContent"></div>
57 * To trigger the popupwindow to appear, it is necessary to make a call to its
58 * 'open()' method. This is typically done by binding a function to an event
59 * emitted by an input element, such as a the clicked event emitted by a button
60 * element. The open() method takes two arguments, specifying the x and y
61 * screen coordinates of the center of the popup window.
63 * You can associate a button with a popup window like this:
64 * <div id="mypopupContent" style="display: table;" data-role="popupwindow">
66 * <tr> <td>Eenie</td> <td>Meenie</td> <td>Mynie</td> <td>Mo</td> </tr>
67 * <tr> <td>Catch-a</td> <td>Tiger</td> <td>By-the</td> <td>Toe</td> </tr>
68 * <tr> <td>If-he</td> <td>Hollers</td> <td>Let-him</td> <td>Go</td> </tr>
69 * <tr> <td>Eenie</td> <td>Meenie</td> <td>Mynie</td> <td>Mo</td> </tr>
72 * <a href="#myPopupContent" data-rel="popupwindow" data-role="button">Show popup</a>
76 * theme: String; the theme for the popupwindow contents
79 * overlayTheme: String; the theme for the popupwindow
82 * shadow: Boolean; display a shadow around the popupwindow
85 * corners: Boolean; display a shadow around the popupwindow
88 * fade: Boolean; fades the opening and closing of the popupwindow
90 * transition: String; the transition to use when opening or closing
92 * Default: $.mobile.defaultDialogTransition
95 * popupbeforeposition: triggered after a popup has completed preparations for opening, but has not yet opened
96 * popupafteropen: triggered after a popup has completely opened
97 * popupafterclose triggered when a popup has completely closed
102 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.
103 To add a pop-up widget to the application, use the following code:
106 <div id="center_info" data-role="popup" data-style="center_info">
107 <div data-role="text">
109 Pop-up dialog box, a child window that blocks user interaction in the parent window
113 // Pop-up with a title and button
114 <div id="center_title_1btn" data-role="popup" data-style="center_title_1btn">
115 <p data-role="title">
121 <div data-role="button-bg">
122 <input type="button" value="Text Button" />
126 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.
128 @deprecated 2.0 verisons
132 @property {String} data-style
133 Defines the pop-up window style.
134 The following styles are available:
136 center_info: basic pop-up message
137 center_title: pop-up message with a title
138 center_basic_1btn: pop-up message with 1 button
139 center_basic_2btn: pop-up message with 2 horizontal buttons
140 center_title_1btn: pop-up message with a title and 1 button
141 center_title_2btn: pop-up message with a title and 2 horizontal buttons
142 center_title_3btn: pop-up message with a title and 3 horizontal buttons
143 center_button_vertical: pop-up message with vertical buttons
144 center_checkbox: pop-up message with a check box
145 center_liststyle_1btn>: pop-up message with a list and 1 button
146 center_liststyle_2btn: pop-up message with a list and 2 horizontal buttons
147 center_liststyle_3btn: pop-up message with a list and 3 horizontal buttons
150 (function ( $, undefined ) {
151 $.widget( "tizen.popupwindow", $.tizen.widgetex, {
162 transition: $.mobile.defaultDialogTransition,
163 initSelector: ":jqmData(role='popupwindow')"
168 screen: "#popupwindow-screen",
169 container: "#popupwindow-container"
173 _setStyle: function () {
174 var popup = this.element,
175 style = popup.attr( 'data-style' );
178 this.options.style = style;
181 popup.addClass( this.options.style );
182 popup.find( ":jqmData(role='title')" )
183 .wrapAll( "<div class='popup-title'></div>" );
184 popup.find( ":jqmData(role='text')" )
185 .wrapAll( "<div class='popup-text'></div>" );
186 popup.find( ":jqmData(role='button-bg')" )
187 .wrapAll( "<div class='popup-button-bg'></div>" );
188 popup.find( ":jqmData(role='check-bg')" )
189 .wrapAll( "<div class='popup-check-bg'></div>" );
190 popup.find( ":jqmData(role='scroller-bg')" )
191 .addClass( "popup-scroller-bg" );
192 popup.find( ":jqmData(role='text-bottom-bg')" )
193 .wrapAll( "<div class='popup-text-bottom-bg'></div>" );
194 popup.find( ":jqmData(role='text-left')" )
195 .wrapAll( "<div class='popup-text-left'></div>" );
196 popup.find( ":jqmData(role='text-right')" )
197 .wrapAll( "<div class='popup-text-right'></div>" );
198 popup.find( ":jqmData(role='progress-bg')" )
199 .wrapAll( "<div class='popup-progress-bg'></div>" );
202 _create: function () {
203 console.warn("popupwindow() was deprecated. use popup() instead.");
204 var thisPage = this.element.closest(":jqmData(role='page')"),
207 if ( thisPage.length === 0 ) {
208 thisPage = $("body");
211 this._ui.placeholder =
212 $( "<div><!-- placeholder for " + this.element.attr("id") + " --></div>" )
213 .css("display", "none")
214 .insertBefore( this.element );
216 thisPage.append( this._ui.screen );
217 this._ui.container.insertAfter( this._ui.screen );
218 this._ui.container.append( this.element );
222 this._isOpen = false;
224 this._ui.screen.bind( "vclick", function ( e ) {
229 this.element.bind( "vclick", function ( e ) {
230 if ( $( e.target ).is("ui-btn-ctxpopup-close") ) {
236 destroy: function () {
237 this.element.insertBefore( this._ui.placeholder );
239 this._ui.placeholder.remove();
240 this._ui.container.remove();
241 this._ui.screen.remove();
242 this.element.triggerHandler("destroyed");
243 $.Widget.prototype.destroy.call( this );
246 _placementCoords: function ( x, y, cw, ch ) {
247 var screenHeight = $( window ).height(),
248 screenWidth = $( window ).width(),
250 maxwidth = parseFloat( this._ui.container.css( "max-width" ) ),
252 roombot = screenHeight - y,
256 if ( roomtop > ch / 2 && roombot > ch / 2 ) {
257 newtop = y - halfheight;
259 newtop = roomtop > roombot ? screenHeight - ch - 30 : 30;
262 if ( cw < maxwidth ) {
263 newleft = ( screenWidth - cw ) / 2;
265 newleft = x - cw / 2;
267 if ( newleft < 10 ) {
269 } else if ( ( newleft + cw ) > screenWidth ) {
270 newleft = screenWidth - cw - 10;
274 return { x : newleft, y : newtop };
277 _setPosition: function ( x_where, y_where ) {
278 var x = ( undefined === x_where ? $( window ).width() / 2 : x_where ),
279 y = ( undefined === y_where ? $( window ).height() / 2 : y_where ),
281 ctxpopup = this.element.data("ctxpopup"),
295 popupWidth = $( window ).width() * this.options.widthRatio;
296 this._ui.container.css( "width", popupWidth );
298 if ( this._ui.container.outerWidth() > $( window ).width() ) {
299 this._ui.container.css( {"max-width" : $( window ).width() - 30} );
303 coords = this._placementCoords( x, y,
304 this._ui.container.outerWidth(),
305 this._ui.container.outerHeight() );
307 menuHeight = this._ui.container.innerHeight();
308 menuWidth = this._ui.container.innerWidth();
309 screenHeight = $( window ).height();
310 screenWidth = $( window ).width();
312 roombot = screenHeight - y;
313 halfheight = menuHeight / 2;
314 maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
315 newtop = ( screenHeight - menuHeight ) / 2;
317 if ( !maxwidth || menuWidth < maxwidth ) {
318 newleft = ( screenWidth - menuWidth ) / 2;
320 newleft = x - menuWidth / 2;
322 if ( newleft < 30 ) {
324 } else if ( ( newleft + menuWidth ) > screenWidth ) {
325 newleft = screenWidth - menuWidth - 30;
334 this._ui.container.css({
339 this._ui.screen.css( "height", screenHeight );
341 open: function ( x_where, y_where, backgroundclose ) {
345 if ( this._isOpen || this.options.disabled ) {
349 $( document ).find("*").each( function () {
351 zIndex = parseInt( el.css("z-index"), 10 );
353 if ( !( el.is( self._ui.container ) ||
354 el.is( self._ui.screen ) ||
356 zIndexMax = Math.max( zIndexMax, zIndex );
360 this._ui.screen.css( "height", $( window ).height() );
362 if ( backgroundclose ) {
363 this._ui.screen.css( "opacity", 0 )
364 .removeClass("ui-screen-hidden");
366 this._ui.removeClass("ui-screen-hidden");
368 if ( this.options.fade ) {
369 this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
371 this._ui.screen.css( {opacity: this.options.opacity} );
375 this._setPosition( x_where, y_where );
377 this.element.trigger("popupbeforeposition");
380 .removeClass("ui-selectmenu-hidden")
382 .animationComplete( function () {
383 self.element.trigger("popupafteropen");
388 if ( !this._reflow ) {
389 this._reflow = function () {
390 if ( !self._isOpen ) {
394 self._setPosition( x_where, y_where );
397 $( window ).bind( "resize", this._reflow );
402 if ( !this._isOpen ) {
406 if ( this._reflow ) {
407 $( window ).unbind( "resize", this._reflow );
412 hideScreen = function () {
413 self._ui.screen.addClass("ui-screen-hidden");
414 self._isOpen = false;
417 this._ui.container.removeClass("in").addClass("reverse out");
419 if ( this.options.transition === "none" ) {
421 .addClass("ui-selectmenu-hidden")
422 .removeAttr("style");
423 this.element.trigger("popupafterclose");
425 this._ui.container.animationComplete( function () {
427 .removeClass("reverse out")
428 .addClass("ui-selectmenu-hidden")
429 .removeAttr("style");
430 self.element.trigger("popupafterclose");
434 if ( this.options.fade ) {
435 this._ui.screen.animate( {opacity: 0}, "fast", hideScreen );
441 _realSetTheme: function ( dst, theme ) {
442 var classes = ( dst.attr("class") || "" ).split(" "),
447 while ( classes.length > 0 ) {
448 currentTheme = classes.pop();
449 matches = currentTheme.match(/^ui-body-([a-z])$/);
451 if ( matches && matches.length > 1 ) {
452 currentTheme = matches[1];
459 dst.removeClass( "ui-body-" + currentTheme );
460 if ( ( theme || "" ).match(/[a-z]/) ) {
461 dst.addClass( "ui-body-" + theme );
465 _setTheme: function ( value ) {
466 this._realSetTheme( this.element, value );
467 this.options.theme = value;
468 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "theme", value );
471 _setOverlayTheme: function ( value ) {
472 this._realSetTheme( this._ui.container, value );
473 this.options.overlayTheme = value;
474 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "overlay-theme", value );
477 _setShadow: function ( value ) {
478 this.options.shadow = value;
479 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "shadow", value );
480 this._ui.container[value ? "addClass" : "removeClass"]("ui-overlay-shadow");
483 _setCorners: function ( value ) {
484 this.options.corners = value;
485 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "corners", value );
486 this._ui.container[value ? "addClass" : "removeClass"]("ui-corner-all");
489 _setFade: function ( value ) {
490 this.options.fade = value;
491 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "fade", value );
494 _setTransition: function ( value ) {
496 .removeClass( this.options.transition || "" )
498 this.options.transition = value;
499 this.element.attr( "data-" + ( $.mobile.ns || "" ) + "transition", value );
502 _setDisabled: function ( value ) {
503 $.Widget.prototype._setOption.call( this, "disabled", value );
510 $.tizen.popupwindow.bindPopupToButton = function ( btn, popup ) {
511 if ( btn.length === 0 || popup.length === 0 ) {
515 var btnVClickHandler = function ( e ) {
516 if ( !popup.jqmData("overlay-theme-set") ) {
517 popup.popupwindow( "option", "overlayTheme", btn.jqmData("theme") );
520 popup.popupwindow( "open",
521 btn.offset().left + btn.outerWidth() / 2,
522 btn.offset().top + btn.outerHeight() / 2 );
527 if ( ( popup.popupwindow("option", "overlayTheme") || "" ).match(/[a-z]/) ) {
528 popup.jqmData( "overlay-theme-set", true );
533 "aria-haspopup": true,
534 "aria-owns": btn.attr("href")
537 .bind( "vclick", btnVClickHandler );
539 popup.bind( "destroyed", function () {
540 btn.unbind( "vclick", btnVClickHandler );
544 $( document ).bind( "pagecreate create", function ( e ) {
545 $( $.tizen.popupwindow.prototype.options.initSelector, e.target )
546 .not(":jqmData(role='none'), :jqmData(role='nojs')")
549 $( "a[href^='#']:jqmData(rel='popupwindow')", e.target ).each( function () {
550 $.tizen.popupwindow.bindPopupToButton( $( this ), $( $( this ).attr("href") ) );
555 //>>excludeStart("jqmBuildExclude", pragmas.jqmBuildExclude);
557 //>>excludeEnd("jqmBuildExclude");