src/widgets/popupwindow/js/jquery.mobile.tizen.popupwindow.js

   1 /*
   2  * jQuery Mobile Widget @VERSION
   3  *
   4  * This software is licensed under the MIT licence (as defined by the OSI at
   5  * http://www.opensource.org/licenses/mit-license.php)
   6  *
   7  * ***************************************************************************
   8  * Copyright (c) 2000 - 2011 Samsung Electronics Co., Ltd.
   9  * Copyright (c) 2011 by Intel Corporation Ltd.
  10  *
  11  * Permission is hereby granted, free of charge, to any person obtaining a
  12  * copy of this software and associated documentation files (the "Software"),
  13  * to deal in the Software without restriction, including without limitation
  14  * the rights to use, copy, modify, merge, publish, distribute, sublicense,
  15  * and/or sell copies of the Software, and to permit persons to whom the
  16  * Software is furnished to do so, subject to the following conditions:
  17  *
  18  * The above copyright notice and this permission notice shall be included in
  19  * all copies or substantial portions of the Software.
  20  *
  21  * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
  22  * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
  23  * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
  24  * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
  25  * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
  26  * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER
  27  * DEALINGS IN THE SOFTWARE.
  28  * ***************************************************************************
  29  *
  30  * Authors: Gabriel Schulhof <gabriel.schulhof@intel.com>,
  31  *          Elliot Smith <elliot.smith@intel.com>
  32  */
  33
  34 /*
  35  * Shows other elements inside a popup window.
  36  *
  37  * To apply, add the attribute data-role="popupwindow" to a <div> element inside
  38  * a page. Alternatively, call popupwindow()
  39  * on an element, eg :
  40  *
  41  *     $("#mypopupwindowContent").popupwindow();
  42  * where the html might be :
  43  *     <div id="mypopupwindowContent"></div>
  44  *
  45  * To trigger the popupwindow to appear, it is necessary to make a call to its
  46  * 'open()' method. This is typically done by binding a function to an event
  47  * emitted by an input element, such as a the clicked event emitted by a button
  48  * element. The open() method takes two arguments, specifying the x and y
  49  * screen coordinates of the center of the popup window.
  50
  51  * You can associate a button with a popup window like this:
  52  *      <div id="mypopupContent" style="display: table;" data-role="popupwindow">
  53  *          <table>
  54  *              <tr> <td>Eenie</td>   <td>Meenie</td>  <td>Mynie</td>   <td>Mo</td>  </tr>
  55  *              <tr> <td>Catch-a</td> <td>Tiger</td>   <td>By-the</td>  <td>Toe</td> </tr>
  56  *              <tr> <td>If-he</td>   <td>Hollers</td> <td>Let-him</td> <td>Go</td>  </tr>
  57  *              <tr> <td>Eenie</td>   <td>Meenie</td>  <td>Mynie</td>   <td>Mo</td>  </tr>
  58  *          </table>
  59  *      </div>
  60  * <a href="#myPopupContent" data-rel="popupwindow" data-role="button">Show popup</a>
  61  *
  62  * Options:
  63  *
  64  *     theme: String; the theme for the popupwindow contents
  65  *                   Default: null
  66  *
  67  *     overlayTheme: String; the theme for the popupwindow
  68  *                   Default: null
  69  *
  70  *     shadow: Boolean; display a shadow around the popupwindow
  71  *             Default: true
  72  *
  73  *     corners: Boolean; display a shadow around the popupwindow
  74  *             Default: true
  75  *
  76  *     fade: Boolean; fades the opening and closing of the popupwindow
  77  *
  78  *     transition: String; the transition to use when opening or closing
  79  *                 a popupwindow
  80  *                 Default: $.mobile.defaultDialogTransition
  81  *
  82  * Events:
  83  *      popupbeforeposition: triggered after a popup has completed preparations for opening, but has not yet opened
  84  *      popupafteropen: triggered after a popup has completely opened
  85  *      popupafterclose triggered when a popup has completely closed
  86 */
  87
  88 (function ( $, undefined ) {
  89         $.widget( "tizen.popupwindow", $.tizen.widgetex, {
  90                 options: {
  91                         theme: null,
  92                         overlayTheme: "s",
  93                         style: "custom",
  94                         disabled: false,
  95                         shadow: true,
  96                         corners: true,
  97                         fade: false,
  98                         opacity: 0.7,
  99                         widthRatio: 0.8612,
 100                         transition: $.mobile.defaultDialogTransition,
 101                         initSelector: ":jqmData(role='popupwindow')"
 102                 },
 103
 104                 _htmlProto: {
 105                         ui: {
 106                                 screen: "#popupwindow-screen",
 107                                 container: "#popupwindow-container"
 108                         }
 109                 },
 110
 111                 _setStyle: function () {
 112                         var popup = this.element,
 113                                 style = popup.attr( 'data-style' );
 114
 115                         if ( style ) {
 116                                 this.options.style = style;
 117                         }
 118
 119                         popup.addClass( this.options.style );
 120                         popup.find( ":jqmData(role='title')" )
 121                                         .wrapAll( "<div class='popup-title'></div>" );
 122                         popup.find( ":jqmData(role='text')" )
 123                                         .wrapAll( "<div class='popup-text'></div>" );
 124                         popup.find( ":jqmData(role='button-bg')" )
 125                                         .wrapAll( "<div class='popup-button-bg'></div>" );
 126                         popup.find( ":jqmData(role='check-bg')" )
 127                                         .wrapAll( "<div class='popup-check-bg'></div>" );
 128                         popup.find( ":jqmData(role='scroller-bg')" )
 129                                         .addClass( "popup-scroller-bg" );
 130                         popup.find( ":jqmData(role='text-bottom-bg')" )
 131                                         .wrapAll( "<div class='popup-text-bottom-bg'></div>" );
 132                         popup.find( ":jqmData(role='text-left')" )
 133                                         .wrapAll( "<div class='popup-text-left'></div>" );
 134                         popup.find( ":jqmData(role='text-right')" )
 135                                         .wrapAll( "<div class='popup-text-right'></div>" );
 136                         popup.find( ":jqmData(role='progress-bg')" )
 137                                         .wrapAll( "<div class='popup-progress-bg'></div>" );
 138                 },
 139
 140                 _create: function () {
 141                         console.warn("popupwindow() was deprecated. use popup() instead.");
 142                         var thisPage = this.element.closest(":jqmData(role='page')"),
 143                                 self = this;
 144
 145                         if ( thisPage.length === 0 ) {
 146                                 thisPage = $("body");
 147                         }
 148
 149                         this._ui.placeholder =
 150                                         $( "<div><!-- placeholder for " + this.element.attr("id") + " --></div>" )
 151                                         .css("display", "none")
 152                                         .insertBefore( this.element );
 153
 154                         thisPage.append( this._ui.screen );
 155                         this._ui.container.insertAfter( this._ui.screen );
 156                         this._ui.container.append( this.element );
 157
 158                         this._setStyle();
 159
 160                         this._isOpen = false;
 161
 162                         this._ui.screen.bind( "vclick", function ( e ) {
 163                                 self.close();
 164                                 return false;
 165                         } );
 166                 },
 167
 168                 destroy: function () {
 169                         this.element.insertBefore( this._ui.placeholder );
 170
 171                         this._ui.placeholder.remove();
 172                         this._ui.container.remove();
 173                         this._ui.screen.remove();
 174                         this.element.triggerHandler("destroyed");
 175                         $.Widget.prototype.destroy.call( this );
 176                 },
 177
 178                 _placementCoords: function ( x, y, cw, ch ) {
 179                         var screenHeight = $( window ).height(),
 180                                 screenWidth = $( window ).width(),
 181                                 halfheight = ch / 2,
 182                                 maxwidth = parseFloat( this._ui.container.css( "max-width" ) ),
 183                                 roomtop = y,
 184                                 roombot = screenHeight - y,
 185                                 newtop,
 186                                 newleft;
 187
 188                         if ( roomtop > ch / 2 && roombot > ch / 2 ) {
 189                                 newtop = y - halfheight;
 190                         } else {
 191                                 newtop = roomtop > roombot ? screenHeight - ch - 30 : 30;
 192                         }
 193
 194                         if ( cw < maxwidth ) {
 195                                 newleft = ( screenWidth - cw ) / 2;
 196                         } else {
 197                                 newleft = x - cw / 2;
 198
 199                                 if ( newleft < 10 ) {
 200                                         newleft = 10;
 201                                 } else if ( ( newleft + cw ) > screenWidth ) {
 202                                         newleft = screenWidth - cw - 10;
 203                                 }
 204                         }
 205
 206                         return { x : newleft, y : newtop };
 207                 },
 208
 209                 _setPosition: function ( x_where, y_where ) {
 210                         var x = ( undefined === x_where ? $( window ).width()  / 2 : x_where ),
 211                                 y = ( undefined === y_where ? $( window ).height() / 2 : y_where ),
 212                                 coords,
 213                                 ctxpopup = this.element.data("ctxpopup"),
 214                                 popupWidth,
 215                                 menuHeight,
 216                                 menuWidth,
 217                                 screenHeight,
 218                                 screenWidth,
 219                                 roomtop,
 220                                 roombot,
 221                                 halfheight,
 222                                 maxwidth,
 223                                 newtop,
 224                                 newleft;
 225
 226                         if ( !ctxpopup ) {
 227                                 popupWidth = $( window ).width() * this.options.widthRatio;
 228                                 this._ui.container.css( "width", popupWidth );
 229
 230                                 if ( this._ui.container.outerWidth() > $( window ).width() ) {
 231                                         this._ui.container.css( {"max-width" : $( window ).width() - 30} );
 232                                 }
 233                         }
 234
 235                         coords = this._placementCoords( x, y,
 236                                         this._ui.container.outerWidth(),
 237                                         this._ui.container.outerHeight() );
 238
 239                         menuHeight = this._ui.container.innerHeight();
 240                         menuWidth = this._ui.container.innerWidth();
 241                         screenHeight = $( window ).height();
 242                         screenWidth = $( window ).width();
 243                         roomtop = y;
 244                         roombot = screenHeight - y;
 245                         halfheight = menuHeight / 2;
 246                         maxwidth = parseFloat( this._ui.container.css( "max-width" ) );
 247                         newtop = ( screenHeight - menuHeight ) / 2;
 248
 249                         if ( !maxwidth || menuWidth < maxwidth ) {
 250                                 newleft = ( screenWidth - menuWidth ) / 2;
 251                         } else {
 252                                 newleft = x - menuWidth / 2;
 253
 254                                 if ( newleft < 30 ) {
 255                                         newleft = 30;
 256                                 } else if ( ( newleft + menuWidth ) > screenWidth ) {
 257                                         newleft = screenWidth - menuWidth - 30;
 258                                 }
 259                         }
 260
 261                         if ( ctxpopup ) {
 262                                 newtop = coords.y;
 263                                 newleft = coords.x;
 264                         }
 265
 266                         this._ui.container.css({
 267                                 top: newtop,
 268                                 left: newleft
 269                         });
 270
 271                         this._ui.screen.css( "height", screenHeight );
 272                 },
 273                 open: function ( x_where, y_where, backgroundclose ) {
 274                         var self = this,
 275                                 zIndexMax = 0;
 276
 277                         if ( this._isOpen || this.options.disabled ) {
 278                                 return;
 279                         }
 280
 281                         $( document ).find("*").each( function () {
 282                                 var el = $( this ),
 283                                         zIndex = parseInt( el.css("z-index"), 10 );
 284
 285                                 if ( !( el.is( self._ui.container ) ||
 286                                                 el.is( self._ui.screen ) ||
 287                                                 isNaN( zIndex ))) {
 288                                         zIndexMax = Math.max( zIndexMax, zIndex );
 289                                 }
 290                         } );
 291
 292                         this._ui.screen.css( "height", $( window ).height() );
 293
 294                         if( backgroundclose ) {
 295                                 this._ui.screen.css( "opacity", 0 )
 296                                                 .removeClass("ui-screen-hidden");
 297                         } else {
 298                                 this._ui.removeClass("ui-screen-hidden");
 299
 300                                 if ( this.options.fade ) {
 301                                         this._ui.screen.animate( {opacity: this.options.opacity}, "fast" );
 302                                 } else {
 303                                         this._ui.screen.css( {opacity: this.options.opacity} );
 304                                 }
 305                         }
 306
 307                         this._setPosition( x_where, y_where );
 308
 309                         this.element.trigger("popupbeforeposition");
 310
 311                         this._ui.container
 312                                 .removeClass("ui-selectmenu-hidden")
 313                                 .addClass("in")
 314                                 .animationComplete( function () {
 315                                         self.element.trigger("popupafteropen");
 316                                 } );
 317
 318                         this._isOpen = true;
 319
 320                         if ( !this._reflow ) {
 321                                 this._reflow = function () {
 322                                         if ( !self._isOpen ) {
 323                                                 return;
 324                                         }
 325
 326                                         self._setPosition( x_where, y_where );
 327                                 };
 328
 329                                 $( window ).bind( "resize", this._reflow );
 330                         }
 331                 },
 332
 333                 close: function () {
 334                         if ( !this._isOpen ) {
 335                                 return;
 336                         }
 337
 338                         if ( this._reflow ) {
 339                                 $( window ).unbind( "resize", this._reflow );
 340                                 this._reflow = null;
 341                         }
 342
 343                         var self = this,
 344                                 hideScreen = function () {
 345                                         self._ui.screen.addClass("ui-screen-hidden");
 346                                         self._isOpen = false;
 347                                 };
 348
 349                         this._ui.container.removeClass("in").addClass("reverse out");
 350
 351                         if ( this.options.transition === "none" ) {
 352                                 this._ui.container
 353                                         .addClass("ui-selectmenu-hidden")
 354                                         .removeAttr("style");
 355                                 this.element.trigger("popupafterclose");
 356                         } else {
 357                                 this._ui.container.animationComplete( function () {
 358                                         self._ui.container
 359                                                 .removeClass("reverse out")
 360                                                 .addClass("ui-selectmenu-hidden")
 361                                                 .removeAttr("style");
 362                                         self.element.trigger("popupafterclose");
 363                                 } );
 364                         }
 365
 366                         if ( this.options.fade ) {
 367                                 this._ui.screen.animate( {opacity: 0}, "fast", hideScreen );
 368                         } else {
 369                                 hideScreen();
 370                         }
 371                 },
 372
 373                 _realSetTheme: function ( dst, theme ) {
 374                         var classes = ( dst.attr("class") || "" ).split(" "),
 375                                 alreadyAdded = true,
 376                                 currentTheme = null,
 377                                 matches;
 378
 379                         while ( classes.length > 0 ) {
 380                                 currentTheme = classes.pop();
 381                                 matches = currentTheme.match(/^ui-body-([a-z])$/);
 382
 383                                 if ( matches && matches.length > 1 ) {
 384                                         currentTheme = matches[1];
 385                                         break;
 386                                 } else {
 387                                         currentTheme = null;
 388                                 }
 389                         }
 390
 391                         dst.removeClass( "ui-body-" + currentTheme );
 392                         if ( ( theme || "" ).match(/[a-z]/) ) {
 393                                 dst.addClass( "ui-body-" + theme );
 394                         }
 395                 },
 396
 397                 _setTheme: function ( value ) {
 398                         this._realSetTheme( this.element, value );
 399                         this.options.theme = value;
 400                         this.element.attr( "data-" + ( $.mobile.ns || "" ) + "theme", value );
 401                 },
 402
 403                 _setOverlayTheme: function ( value ) {
 404                         this._realSetTheme( this._ui.container, value );
 405                         this.options.overlayTheme = value;
 406                         this.element.attr( "data-" + ( $.mobile.ns || "" ) + "overlay-theme", value );
 407                 },
 408
 409                 _setShadow: function ( value ) {
 410                         this.options.shadow = value;
 411                         this.element.attr( "data-" + ( $.mobile.ns || "" ) + "shadow", value );
 412                         this._ui.container[value ? "addClass" : "removeClass"]("ui-overlay-shadow");
 413                 },
 414
 415                 _setCorners: function ( value ) {
 416                         this.options.corners = value;
 417                         this.element.attr( "data-" + ( $.mobile.ns || "" ) + "corners", value );
 418                         this._ui.container[value ? "addClass" : "removeClass"]("ui-corner-all");
 419                 },
 420
 421                 _setFade: function ( value ) {
 422                         this.options.fade = value;
 423                         this.element.attr( "data-" + ( $.mobile.ns || "" ) + "fade", value );
 424                 },
 425
 426                 _setTransition: function ( value ) {
 427                         this._ui.container
 428                                 .removeClass( this.options.transition || "" )
 429                                 .addClass( value );
 430                         this.options.transition = value;
 431                         this.element.attr( "data-" + ( $.mobile.ns || "" ) + "transition", value );
 432                 },
 433
 434                 _setDisabled: function ( value ) {
 435                         $.Widget.prototype._setOption.call( this, "disabled", value );
 436                         if ( value ) {
 437                                 this.close();
 438                         }
 439                 }
 440         });
 441
 442         $.tizen.popupwindow.bindPopupToButton = function ( btn, popup ) {
 443                 if ( btn.length === 0 || popup.length === 0 ) {
 444                         return;
 445                 }
 446
 447                 var btnVClickHandler = function ( e ) {
 448                         if ( !popup.jqmData("overlay-theme-set") ) {
 449                                 popup.popupwindow( "option", "overlayTheme", btn.jqmData("theme") );
 450                         }
 451
 452                         popup.popupwindow( "open",
 453                                 btn.offset().left + btn.outerWidth()  / 2,
 454                                 btn.offset().top  + btn.outerHeight() / 2 );
 455
 456                         return false;
 457                 };
 458
 459                 if ( ( popup.popupwindow("option", "overlayTheme") || "" ).match(/[a-z]/) ) {
 460                         popup.jqmData( "overlay-theme-set", true );
 461                 }
 462
 463                 btn
 464                         .attr({
 465                                 "aria-haspopup": true,
 466                                 "aria-owns": btn.attr("href")
 467                         })
 468                         .removeAttr("href")
 469                         .bind( "vclick", btnVClickHandler );
 470
 471                 popup.bind( "destroyed", function () {
 472                         btn.unbind( "vclick", btnVClickHandler );
 473                 } );
 474         };
 475
 476         $( document ).bind( "pagecreate create", function ( e ) {
 477                 $( $.tizen.popupwindow.prototype.options.initSelector, e.target )
 478                         .not(":jqmData(role='none'), :jqmData(role='nojs')")
 479                         .popupwindow();
 480
 481                 $( "a[href^='#']:jqmData(rel='popupwindow')", e.target ).each( function () {
 482                         $.tizen.popupwindow.bindPopupToButton( $( this ), $( $( this ).attr("href") ) );
 483                 });
 484         });
 485 }( jQuery ));