X-Git-Url: http://review.tizen.org/git/?a=blobdiff_plain;f=src%2Fwidgets%2Fpopupwindow%2Fjs%2Fjquery.mobile.tizen.popupwindow.js;h=347222017e0d85613ccbbab123c13629a141d621;hb=f476ccb6d18ed0c7392ad5508a4c7108c1297f2a;hp=6df99ed7535546ebb068f69924840dd768bc95bd;hpb=1ebd5ca39c5801e5c53b0d339223713e898d0b10;p=framework%2Fweb%2Fweb-ui-fw.git diff --git a/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js b/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js index 6df99ed..3472220 100755 --- a/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js +++ b/src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js @@ -31,58 +31,61 @@ * Elliot Smith */ -// Shows other elements inside a popup window. -// -// To apply, add the attribute data-role="popupwindow" to a
element inside -// a page. Alternatively, call popupwindow() -// on an element, eg : -// -// $("#mypopupwindowContent").popupwindow(); -// where the html might be : -//
-// -// To trigger the popupwindow to appear, it is necessary to make a call to its -// 'open()' method. This is typically done by binding a function to an event -// emitted by an input element, such as a the clicked event emitted by a button -// element. The open() method takes two arguments, specifying the x and y -// screen coordinates of the center of the popup window. - -// You can associate a button with a popup window like this: -//
-// -// -// -// -// -//
Eenie Meenie Mynie Mo
Catch-a Tiger By-the Toe
If-he Hollers Let-him Go
Eenie Meenie Mynie Mo
-//
-// Show popup -// -// Options: -// -// theme: String; the theme for the popupwindow contents -// Default: null -// -// overlayTheme: String; the theme for the popupwindow -// Default: null -// -// shadow: Boolean; display a shadow around the popupwindow -// Default: true -// -// corners: Boolean; display a shadow around the popupwindow -// Default: true -// -// fade: Boolean; fades the opening and closing of the popupwindow -// -// transition: String; the transition to use when opening or closing -// a popupwindow -// Default: $.mobile.defaultDialogTransition -// -// Events: -// close: Emitted when the popupwindow is closed. +/* + * Shows other elements inside a popup window. + * + * To apply, add the attribute data-role="popupwindow" to a
element inside + * a page. Alternatively, call popupwindow() + * on an element, eg : + * + * $("#mypopupwindowContent").popupwindow(); + * where the html might be : + *
+ * + * To trigger the popupwindow to appear, it is necessary to make a call to its + * 'open()' method. This is typically done by binding a function to an event + * emitted by an input element, such as a the clicked event emitted by a button + * element. The open() method takes two arguments, specifying the x and y + * screen coordinates of the center of the popup window. + + * You can associate a button with a popup window like this: + *
+ * + * + * + * + * + *
Eenie Meenie Mynie Mo
Catch-a Tiger By-the Toe
If-he Hollers Let-him Go
Eenie Meenie Mynie Mo
+ *
+ * Show popup + * + * Options: + * + * theme: String; the theme for the popupwindow contents + * Default: null + * + * overlayTheme: String; the theme for the popupwindow + * Default: null + * + * shadow: Boolean; display a shadow around the popupwindow + * Default: true + * + * corners: Boolean; display a shadow around the popupwindow + * Default: true + * + * fade: Boolean; fades the opening and closing of the popupwindow + * + * transition: String; the transition to use when opening or closing + * a popupwindow + * Default: $.mobile.defaultDialogTransition + * + * Events: + * popupbeforeposition: triggered after a popup has completed preparations for opening, but has not yet opened + * popupafteropen: triggered after a popup has completely opened + * popupafterclose triggered when a popup has completely closed +*/ (function ( $, undefined ) { - $.widget( "tizen.popupwindow", $.tizen.widgetex, { options: { theme: null, @@ -91,7 +94,8 @@ disabled: false, shadow: true, corners: true, - fade: true, + fade: false, + opacity: 0.7, widthRatio: 0.8612, transition: $.mobile.defaultDialogTransition, initSelector: ":jqmData(role='popupwindow')" @@ -99,47 +103,20 @@ _htmlProto: { ui: { - screen: "#popupwindow-screen", + screen: "#popupwindow-screen", container: "#popupwindow-container" } }, - _create: function () { - var thisPage = this.element.closest(":jqmData(role='page')"), - self = this, - popup = this.element, - o = this.options, + _setStyle: function () { + var popup = this.element, style = popup.attr( 'data-style' ); - if (thisPage.length === 0) { - thisPage = $("body"); - } - - // Drop a placeholder into the location from which we shall rip out the popup window contents - this._ui.placeholder = - $("
") - .css("display", "none") - .insertBefore(this.element); - - // Apply the proto - thisPage.append(this._ui.screen); - this._ui.container.insertAfter(this._ui.screen); - this._ui.container.append(this.element); - - // Define instance variables - $.extend( self, { - _isOpen: false - }); - - //Data Style Start - if (style) { - o.style = style; + if ( style ) { + this.options.style = style; } - popup.addClass( o.style ); + popup.addClass( this.options.style ); popup.find( ":jqmData(role='title')" ) .wrapAll( "
" ); popup.find( ":jqmData(role='text')" ) @@ -158,292 +135,324 @@ .wrapAll( "
" ); popup.find( ":jqmData(role='progress-bg')" ) .wrapAll( "
" ); - //Data Style End - - // Events on "screen" overlay - this._ui.screen.bind( "vclick", function (event) { - self.close(); - }); }, - _realSetTheme: function (dst, theme) { - - var classes = (dst.attr("class") || "").split(" "), - alreadyAdded = true, - currentTheme = null, - matches; - - while (classes.length > 0) { - currentTheme = classes.pop(); - matches = currentTheme.match(/^ui-body-([a-z])$/); - if (matches && matches.length > 1) { - currentTheme = matches[1]; - break; - } else { - currentTheme = null; - } - } + _create: function () { + var thisPage = this.element.closest(":jqmData(role='page')"), + self = this; - dst.removeClass("ui-body-" + currentTheme); - if ((theme || "").match(/[a-z]/)) { - dst.addClass("ui-body-" + theme); + if ( thisPage.length === 0 ) { + thisPage = $("body"); } - }, - _setTheme: function (value) { - this._realSetTheme(this.element, value); - this.options.theme = value; - this.element.attr("data-" + ($.mobile.ns || "") + "theme", value); - }, + this._ui.placeholder = + $( "
" ) + .css("display", "none") + .insertBefore( this.element ); - _setOverlayTheme: function (value) { - this._realSetTheme(this._ui.container, value); - // The screen must always have some kind of background for fade to work, so, if the theme is being unset, - // set the background to "a". - this._realSetTheme(this._ui.screen, (value === "" ? "a" : value)); - this.options.overlayTheme = value; - this.element.attr("data-" + ($.mobile.ns || "") + "overlay-theme", value); - }, + thisPage.append( this._ui.screen ); + this._ui.container.insertAfter( this._ui.screen ); + this._ui.container.append( this.element ); - _setShadow: function (value) { - this.options.shadow = value; - this.element.attr("data-" + ($.mobile.ns || "") + "shadow", value); - this._ui.container[value ? "addClass" : "removeClass"]("ui-overlay-shadow"); - }, + this._setStyle(); - _setCorners: function (value) { - this.options.corners = value; - this.element.attr("data-" + ($.mobile.ns || "") + "corners", value); - this._ui.container[value ? "addClass" : "removeClass"]("ui-corner-all"); - }, + this._isOpen = false; - _setFade: function (value) { - this.options.fade = value; - this.element.attr("data-" + ($.mobile.ns || "") + "fade", value); + this._ui.screen.bind( "vclick", function ( e ) { + self.close(); + return false; + } ); }, - _setTransition: function (value) { - this._ui.container - .removeClass((this.options.transition || "")) - .addClass(value); - this.options.transition = value; - this.element.attr("data-" + ($.mobile.ns || "") + "transition", value); - }, + destroy: function () { + this.element.insertBefore( this._ui.placeholder ); - _setDisabled: function (value) { - $.Widget.prototype._setOption.call(this, "disabled", value); - if (value) { - this.close(); - } + this._ui.placeholder.remove(); + this._ui.container.remove(); + this._ui.screen.remove(); + this.element.triggerHandler("destroyed"); + $.Widget.prototype.destroy.call( this ); }, - _placementCoords: function (x, y, cx, cy) { - // Try and center the overlay over the given coordinates - var ret, - scrollTop = $(window).scrollTop(), - screenHeight = $(window).height(), - screenWidth = $(window).width(), - halfheight = cy / 2, + _placementCoords: function ( x, y, cw, ch ) { + var scrollTop = $( window ).scrollTop(), + screenHeight = $( window ).height(), + screenWidth = $( window ).width(), + halfheight = ch / 2, maxwidth = parseFloat( this._ui.container.css( "max-width" ) ), roomtop = y - scrollTop, roombot = scrollTop + screenHeight - y, newtop, newleft; - if ( roomtop > cy / 2 && roombot > cy / 2 ) { + if ( roomtop > ch / 2 && roombot > ch / 2 ) { newtop = y - halfheight; } else { - // 30px tolerance off the edges - newtop = roomtop > roombot ? scrollTop + screenHeight - cy - 30 : scrollTop + 30; + newtop = roomtop > roombot ? scrollTop + screenHeight - ch - 30 : scrollTop + 30; } - // If the menuwidth is smaller than the screen center is - if ( cx < maxwidth ) { - newleft = ( screenWidth - cx ) / 2; + if ( cw < maxwidth ) { + newleft = ( screenWidth - cw ) / 2; } else { - //otherwise insure a >= 30px offset from the left - newleft = x - cx / 2; + newleft = x - cw / 2; - // 10px tolerance off the edges if ( newleft < 10 ) { newleft = 10; - } else if ( ( newleft + cx ) > screenWidth ) { - newleft = screenWidth - cx - 10; + } else if ( ( newleft + cw ) > screenWidth ) { + newleft = screenWidth - cw - 10; } } return { x : newleft, y : newtop }; }, - destroy: function () { - // Put the element back where we ripped it out from - this.element.insertBefore(this._ui.placeholder); + _setPosition: function ( x_where, y_where ) { + var x = ( undefined === x_where ? $( window ).width() / 2 : x_where ), + y = ( undefined === y_where ? $( window ).height() / 2 : y_where ), + coords, + ctxpopup = this.element.data("ctxpopup"), + popupWidth, + menuHeight, + menuWidth, + scrollTop, + screenHeight, + screenWidth, + roomtop, + roombot, + halfheight, + maxwidth, + newtop, + newleft; - // Clean up - this._ui.placeholder.remove(); - this._ui.container.remove(); - this._ui.screen.remove(); - this.element.triggerHandler("destroyed"); - $.Widget.prototype.destroy.call(this); + if ( !ctxpopup ) { + popupWidth = $( window ).width() * this.options.widthRatio; + this._ui.container.css( "width", popupWidth ); + + if ( this._ui.container.outerWidth() > $( window ).width() ) { + this._ui.container.css( {"max-width" : $( window ).width() - 30} ); + } + } + + coords = this._placementCoords( x, y, + this._ui.container.outerWidth(), + this._ui.container.outerHeight() ); + + menuHeight = this._ui.container.innerHeight(); + menuWidth = this._ui.container.innerWidth(); + scrollTop = $( window ).scrollTop(); + screenHeight = $( window ).height(); + screenWidth = $( window ).width(); + roomtop = y - scrollTop; + roombot = scrollTop + screenHeight - y; + halfheight = menuHeight / 2; + maxwidth = parseFloat( this._ui.container.css( "max-width" ) ); + newtop = ( screenHeight - menuHeight ) / 2 + scrollTop; + + if ( menuWidth < maxwidth ) { + newleft = ( screenWidth - menuWidth ) / 2; + } else { + newleft = x - menuWidth / 2; + + if ( newleft < 30 ) { + newleft = 30; + } else if ( ( newleft + menuWidth ) > screenWidth ) { + newleft = screenWidth - menuWidth - 30; + } + } + + if ( ctxpopup ) { + newtop = coords.y; + newleft = coords.x; + } + + this._ui.container.css({ + top: newtop, + left: newleft + }); }, - open: function (x_where, y_where) { - if (!(this._isOpen || this.options.disabled)) { - var self = this, - x = (undefined === x_where ? $(window).width() / 2 : x_where), - y = (undefined === y_where ? $(window).height() / 2 : y_where), - coords, - zIndexMax = 0, - ctxpopup = this.element.data("ctxpopup"), - popupWidth, - menuHeight, - menuWidth, - scrollTop, - screenHeight, - screenWidth, - roomtop, - roombot, - halfheight, - maxwidth, - newtop, - newleft; - - if ( !ctxpopup ) { - popupWidth = $(window).width() * this.options.widthRatio; - this._ui.container.css("width", popupWidth); - // If the width of the popup exceeds the width of the window, we need to limit the width here, - // otherwise outer{Width,Height}(true) below will happily report the unrestricted values, causing - // the popup to get placed wrong. - if (this._ui.container.outerWidth(true) > $(window).width()) { - this._ui.container.css({"max-width" : $(window).width() - 30}); - } + open: function ( x_where, y_where ) { + var self = this, + zIndexMax = 0; + + if ( this._isOpen || this.options.disabled ) { + return; + } + + $( document ).find("*").each( function () { + var el = $( this ), + zIndex = parseInt( el.css("z-index"), 10 ); + + if ( !( el.is( self._ui.container ) || + el.is( self._ui.screen ) || + isNaN( zIndex ))) { + zIndexMax = Math.max( zIndexMax, zIndex ); } + } ); - coords = this._placementCoords(x, y, - this._ui.container.outerWidth(true), - this._ui.container.outerHeight(true)); - - $(document) - .find("*") - .each(function () { - var el = $(this), - zIndex = parseInt(el.css("z-index"), 10); - if (!(el.is(self._ui.container) || el.is(self._ui.screen) || isNaN(zIndex))) { - zIndexMax = Math.max(zIndexMax, zIndex); - } - }); - - this._ui.screen - .height($(document).height()) + this._ui.screen.css( "height", "100%" ) .removeClass("ui-screen-hidden"); - if (this.options.fade) { - this._ui.screen.animate({opacity: 0.5}, "fast"); - } else { - this._ui.screen.css({opacity: 0.0}); - } + if ( this.options.fade ) { + this._ui.screen.animate( {opacity: this.options.opacity}, "fast" ); + } else { + this._ui.screen.css( {opacity: this.options.opacity} ); + } - //Recalculate popup position - menuHeight = this._ui.container.innerHeight(true); - menuWidth = this._ui.container.innerWidth(true); - scrollTop = $(window).scrollTop(); - screenHeight = $(window).height(); - screenWidth = $(window).width(); - roomtop = y - scrollTop; - roombot = scrollTop + screenHeight - y; - halfheight = menuHeight / 2; - maxwidth = parseFloat( this._ui.container.css( "max-width" ) ); - newtop = (screenHeight - menuHeight) / 2 + scrollTop; - - if ( menuWidth < maxwidth ) { - newleft = ( screenWidth - menuWidth ) / 2; - } else { - //otherwise insure a >= 30px offset from the left - newleft = x - menuWidth / 2; - - // 30px tolerance off the edges - if ( newleft < 30 ) { - newleft = 30; - } else if ( ( newleft + menuWidth ) > screenWidth ) { - newleft = screenWidth - menuWidth - 30; + this._setPosition( x_where, y_where ); + + this.element.trigger("popupbeforeposition"); + + this._ui.container + .removeClass("ui-selectmenu-hidden") + .addClass("in") + .animationComplete( function () { + self.element.trigger("popupafteropen"); + } ); + + this._isOpen = true; + + if ( !this._reflow ) { + this._reflow = function () { + if ( !self._isOpen ) { + return; } - } - //Recalculate popup position End - if ( ctxpopup ) { - newtop = coords.y; - newleft = coords.x; - } - this._ui.container - .removeClass("ui-selectmenu-hidden") - .css({ - top: newtop, - left: newleft - }) - .addClass("in") - .animationComplete(function () { - self._ui.screen.height($(document).height()); - }); - - this._isOpen = true; + self._setPosition( x_where, y_where ); + }; + + $( window ).bind( "resize", this._reflow ); } }, close: function () { - if (this._isOpen) { - var self = this, - hideScreen = function () { - self._ui.screen.addClass("ui-screen-hidden"); - self._isOpen = false; - self.element.trigger("closed"); - }; + if ( !this._isOpen ) { + return; + } + + if ( this._reflow ) { + $( window ).unbind( "resize", this._reflow ); + this._reflow = null; + } + + var self = this, + hideScreen = function () { + self._ui.screen.addClass("ui-screen-hidden"); + self._isOpen = false; + }; + + this._ui.container.removeClass("in").addClass("reverse out"); + if ( this.options.transition === "none" ) { this._ui.container - .removeClass("in") - .addClass("reverse out") - .animationComplete(function () { - self._ui.container - .removeClass("reverse out") - .addClass("ui-selectmenu-hidden") - .removeAttr("style"); - }); - - if (this.options.fade) { - this._ui.screen.animate({opacity: 0.0}, "fast", hideScreen); + .addClass("ui-selectmenu-hidden") + .removeAttr("style"); + this.element.trigger("popupafterclose"); + } else { + this._ui.container.animationComplete( function () { + self._ui.container + .removeClass("reverse out") + .addClass("ui-selectmenu-hidden") + .removeAttr("style"); + self.element.trigger("popupafterclose"); + } ); + } + + if ( this.options.fade ) { + this._ui.screen.animate( {opacity: 0}, "fast", hideScreen ); + } else { + hideScreen(); + } + }, + + _realSetTheme: function ( dst, theme ) { + var classes = ( dst.attr("class") || "" ).split(" "), + alreadyAdded = true, + currentTheme = null, + matches; + + while ( classes.length > 0 ) { + currentTheme = classes.pop(); + matches = currentTheme.match(/^ui-body-([a-z])$/); + + if ( matches && matches.length > 1 ) { + currentTheme = matches[1]; + break; } else { - hideScreen(); + currentTheme = null; } } + + dst.removeClass( "ui-body-" + currentTheme ); + if ( ( theme || "" ).match(/[a-z]/) ) { + dst.addClass( "ui-body-" + theme ); + } + }, + + _setTheme: function ( value ) { + this._realSetTheme( this.element, value ); + this.options.theme = value; + this.element.attr( "data-" + ( $.mobile.ns || "" ) + "theme", value ); + }, + + _setOverlayTheme: function ( value ) { + this._realSetTheme( this._ui.container, value ); + this.options.overlayTheme = value; + this.element.attr( "data-" + ( $.mobile.ns || "" ) + "overlay-theme", value ); + }, + + _setShadow: function ( value ) { + this.options.shadow = value; + this.element.attr( "data-" + ( $.mobile.ns || "" ) + "shadow", value ); + this._ui.container[value ? "addClass" : "removeClass"]("ui-overlay-shadow"); + }, + + _setCorners: function ( value ) { + this.options.corners = value; + this.element.attr( "data-" + ( $.mobile.ns || "" ) + "corners", value ); + this._ui.container[value ? "addClass" : "removeClass"]("ui-corner-all"); + }, + + _setFade: function ( value ) { + this.options.fade = value; + this.element.attr( "data-" + ( $.mobile.ns || "" ) + "fade", value ); + }, + + _setTransition: function ( value ) { + this._ui.container + .removeClass( this.options.transition || "" ) + .addClass( value ); + this.options.transition = value; + this.element.attr( "data-" + ( $.mobile.ns || "" ) + "transition", value ); + }, + + _setDisabled: function ( value ) { + $.Widget.prototype._setOption.call( this, "disabled", value ); + if ( value ) { + this.close(); + } } }); - $.tizen.popupwindow.bindPopupToButton = function (btn, popup) { - if (btn.length === 0 || popup.length === 0) { + $.tizen.popupwindow.bindPopupToButton = function ( btn, popup ) { + if ( btn.length === 0 || popup.length === 0 ) { return; } - var btnVClickHandler = function (e) { - // When /this/ button causes a popup, align the popup's theme with that of the button, unless the popup has a theme pre-set - if (!popup.jqmData("overlay-theme-set")) { - popup.popupwindow("option", "overlayTheme", btn.jqmData("theme")); + var btnVClickHandler = function ( e ) { + if ( !popup.jqmData("overlay-theme-set") ) { + popup.popupwindow( "option", "overlayTheme", btn.jqmData("theme") ); } - popup.popupwindow("open", + + popup.popupwindow( "open", btn.offset().left + btn.outerWidth() / 2, - btn.offset().top + btn.outerHeight() / 2); + btn.offset().top + btn.outerHeight() / 2 ); - // Swallow event, because it might end up getting picked up by the popup window's screen handler, which - // will in turn cause the popup window to close - Thanks Sasha! - if (e.stopPropagation) { - e.stopPropagation(); - } - if (e.preventDefault) { - e.preventDefault(); - } + return false; }; - // If the popup has a theme set, prevent it from being clobbered by the associated button - if ((popup.popupwindow("option", "overlayTheme") || "").match(/[a-z]/)) { - popup.jqmData("overlay-theme-set", true); + if ( ( popup.popupwindow("option", "overlayTheme") || "" ).match(/[a-z]/) ) { + popup.jqmData( "overlay-theme-set", true ); } btn @@ -452,21 +461,20 @@ "aria-owns": btn.attr("href") }) .removeAttr("href") - .bind("vclick", btnVClickHandler); + .bind( "vclick", btnVClickHandler ); - popup.bind("destroyed", function () { - btn.unbind("vclick", btnVClickHandler); - }); + popup.bind( "destroyed", function () { + btn.unbind( "vclick", btnVClickHandler ); + } ); }; - $(document).bind("pagecreate create", function (e) { - $($.tizen.popupwindow.prototype.options.initSelector, e.target) + $( document ).bind( "pagecreate create", function ( e ) { + $( $.tizen.popupwindow.prototype.options.initSelector, e.target ) .not(":jqmData(role='none'), :jqmData(role='nojs')") .popupwindow(); - $("a[href^='#']:jqmData(rel='popupwindow')", e.target).each(function () { - $.tizen.popupwindow.bindPopupToButton($(this), $($(this).attr("href"))); + $( "a[href^='#']:jqmData(rel='popupwindow')", e.target ).each( function () { + $.tizen.popupwindow.bindPopupToButton( $( this ), $( $( this ).attr("href") ) ); }); }); - -}(jQuery)); +}( jQuery ));