libs/patch/0020-JQM-Apply-tizen-style-context-popup.patch

   1 From d96db7f8a2ab691ca92492ac3b0c253afea40250 Mon Sep 17 00:00:00 2001
   2 From: "hjnim.kim" <hjnim.kim@samsung.com>
   3 Date: Thu, 25 Apr 2013 12:38:27 +0900
   4 Subject: [PATCH] JQM Apply Tizen style context popup and window popup
   5
   6 Apply tizen style and operation
   7
   8 Change-Id: I73884fd8bd78e4704b1d6357d1c2a10bc6609a4f
   9 Signed-off-by: hyunjung kim <hjnim.kim@samsung.com>
  10 ---
  11  libs/js/jquery-mobile-1.2.0/js/widgets/popup.js |  129 +++++++++++++++++++++--
  12  1 files changed, 119 insertions(+), 10 deletions(-)
  13
  14 diff --git a/libs/js/jquery-mobile-1.2.0/js/widgets/popup.js b/libs/js/jquery-mobile-1.2.0/js/widgets/popup.js
  15 index 8174055..c4d6a22 100644
  16 --- a/libs/js/jquery-mobile-1.2.0/js/widgets/popup.js
  17 +++ b/libs/js/jquery-mobile-1.2.0/js/widgets/popup.js
  18 @@ -58,7 +58,7 @@ define( [ "jquery",
  19                         //      https://github.com/jquery/jquery-mobile/issues/4784
  20                         //
  21                         // NOTE this option is modified in _create!
  22 -                       history: !$.mobile.browser.ie
  23 +                       history: false
  24                 },
  25
  26                 _eatEventAndClose: function( e ) {
  27 @@ -109,7 +109,7 @@ define( [ "jquery",
  28                 },
  29
  30                 _resizeTimeout: function() {
  31 -                       if ( !this._maybeRefreshTimeout() ) {
  32 +                       if ( !this._maybeRefreshTimeout() && this.positionTo === "window" ) {
  33                                 // effectively rapid-open the popup while leaving the screen intact
  34                                 this._trigger( "beforeposition" );
  35                                 this._ui.container
  36 @@ -124,6 +124,11 @@ define( [ "jquery",
  37
  38                 _handleWindowResize: function( e ) {
  39                         if ( this._isOpen ) {
  40 +                               // Context popup close when Window resize event
  41 +                               if( this.positionTo !== "window" ) {
  42 +                                       this.close();
  43 +                                       return false;
  44 +                               }
  45                                 this._maybeRefreshTimeout();
  46                         }
  47                 },
  48 @@ -144,7 +149,8 @@ define( [ "jquery",
  49                         var ui = {
  50                                         screen: $( "<div class='ui-screen-hidden ui-popup-screen'></div>" ),
  51                                         placeholder: $( "<div style='display: none;'><!-- placeholder --></div>" ),
  52 -                                       container: $( "<div class='ui-popup-container ui-selectmenu-hidden'></div>" )
  53 +                                       container: $( "<div class='ui-popup-container ui-selectmenu-hidden'></div>" ),
  54 +                                       arrow : $("<div class='ui-arrow'></div>")
  55                                 },
  56                                 thisPage = this.element.closest( ".ui-page" ),
  57                                 myId = this.element.attr( "id" ),
  58 @@ -174,7 +180,7 @@ define( [ "jquery",
  59                                 ui.placeholder.html( "<!-- placeholder for " + myId + " -->" );
  60                         }
  61                         ui.container.append( this.element );
  62 -
  63 +                       ui.container.append( ui.arrow );
  64                         // Add class to popup element
  65                         this.element.addClass( "ui-popup" );
  66
  67 @@ -276,7 +282,7 @@ define( [ "jquery",
  68                 },
  69
  70                 _setTolerance: function( value ) {
  71 -                       var tol = { t: 30, r: 15, b: 30, l: 15 };
  72 +                       var tol = { t: 5, r: 5, b: 5, l: 5 };
  73
  74                         if ( value ) {
  75                                 var ar = String( value ).split( "," );
  76 @@ -361,7 +367,11 @@ define( [ "jquery",
  77                                         cx: winCoords.cx - this._tolerance.l - this._tolerance.r,
  78                                         cy: winCoords.cy - this._tolerance.t - this._tolerance.b
  79                                 },
  80 -                               menuSize, ret;
  81 +                               menuSize, ret,
  82 +                               linkOffset = $(this.link).offset(),
  83 +                               positionOffsets = [],
  84 +                               correctionValue = [0,0],
  85 +                               arrayIdx;
  86
  87                         // Clamp the width of the menu before grabbing its size
  88                         this._ui.container.css( "max-width", rc.cx );
  89 @@ -389,7 +399,50 @@ define( [ "jquery",
  90
  91                         ret.y -= Math.min( ret.y, Math.max( 0, ret.y + menuSize.cy - docHeight ) );
  92
  93 -                       return { left: ret.x, top: ret.y };
  94 +                       if ( this.positionTo !== "origin" )
  95 +                       {
  96 +                               return { left: ret.x, top: ret.y , arrowleft: 0 , arrowtop: 0};
  97 +                       }
  98 +
  99 +                       positionOffsets = [ linkOffset.left,
 100 +                                                               linkOffset.top,
 101 +                                                               docEl.clientHeight - ( linkOffset.top + $(this.link).height() ),
 102 +                                                               docEl.clientWidth - ( linkOffset.left + $(this.link).width() )];
 103 +                       arrayIdx = positionOffsets.indexOf(Math.max.apply(window,positionOffsets));
 104 +
 105 +                       switch( arrayIdx )
 106 +                       {
 107 +                               case 0:
 108 +                                       correctionValue = [ -$(this.link).width() , 0];
 109 +                                       arrowtop = ( linkOffset.top - ret.y  ) + ( $(this.link).height() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) ;
 110 +                                       arrowleft = menuSize.cx;
 111 +                                       $(this._ui.arrow).attr( "class", "" )
 112 +                                                                       .addClass( "ui-arrow left" )
 113 +                                       break;
 114 +                               case 1:
 115 +                                       correctionValue = [ 0 , -(ret.y + menuSize.cy - linkOffset.top)];
 116 +                                       arrowtop = menuSize.cy - 2;
 117 +                                       arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
 118 +                                       $(this._ui.arrow).attr( "class", "" )
 119 +                                                                       .addClass( "ui-arrow bottom" );
 120 +                                       break;
 121 +                               case 2:
 122 +                                       correctionValue = [ 0 , ( linkOffset.top + $(this.link).height() - ret.y ) ];
 123 +                                       arrowtop = - parseInt( $(this._ui.arrow).css("border-width") ) * 2 + 1;
 124 +                                       arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
 125 +                                       $(this._ui.arrow).attr( "class", "" )
 126 +                                                                       .addClass("ui-arrow top");
 127 +                                       break;
 128 +                               case 3:
 129 +                                       correctionValue = [ ( menuSize.cx < $(this.link).width() ) ? ( $(this.link).width() / 2 ) + ( menuSize.cx / 2) : $(this.link).width() , 0];
 130 +                                       arrowtop = ( linkOffset.top - ret.y  ) + ( $(this.link).height() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) ;
 131 +                                       arrowleft = - parseInt( $(this._ui.arrow).css("border-width") ) * 2;
 132 +                                       $(this._ui.arrow).attr( "class", "" )
 133 +                                                                       .addClass("ui-arrow right");
 134 +                                       break;
 135 +                       }
 136 +
 137 +                       return { left: ret.x + correctionValue[0], top: ret.y + correctionValue[1] , arrowleft: arrowleft , arrowtop: arrowtop };
 138                 },
 139
 140                 _createPrereqs: function( screenPrereq, containerPrereq, whenDone ) {
 141 @@ -461,6 +514,8 @@ define( [ "jquery",
 142                 _desiredCoords: function( x, y, positionTo ) {
 143                         var dst = null, offset, winCoords = windowCoords();
 144
 145 +                       self.positionTo = positionTo;
 146 +
 147                         // Establish which element will serve as the reference
 148                         if ( positionTo && positionTo !== "origin" ) {
 149                                 if ( positionTo === "window" ) {
 150 @@ -499,6 +554,19 @@ define( [ "jquery",
 151                         return { x: x, y: y };
 152                 },
 153
 154 +               _reposition: function() {
 155 +                       var self = this,
 156 +                                       coords;
 157 +
 158 +                       if( self._isOpen
 159 +                               && self.link
 160 +                               && self.positionTo !== "window") {
 161 +                                       coords = self._placementCoords( self._desiredCoords( $(self.link).offset().left + $(self.link).outerWidth() /2 , $(self.link).offset().top + $(self.link).outerHeight() /2 , self.positionTo || self.options.positionTo || "origin" ) );
 162 +                                       self._ui.container
 163 +                                               .offset( { top : coords.top } );
 164 +                       }
 165 +               },
 166 +
 167                 _openPrereqsComplete: function() {
 168                         var self = this;
 169
 170 @@ -512,6 +580,7 @@ define( [ "jquery",
 171                         setTimeout(function(){
 172                                 self._ui.container.attr( "tabindex", "0" ).focus();
 173                                 self._trigger( "afteropen" );
 174 +                               self._reposition();
 175                         });
 176                 },
 177
 178 @@ -569,7 +638,7 @@ define( [ "jquery",
 179                         this._ui.container
 180                                 .removeClass( "ui-selectmenu-hidden" )
 181                                 .offset( coords );
 182 -
 183 +                       this._ui.arrow.css( { top : coords.arrowtop, left : coords.arrowleft } );
 184                         if ( this.options.overlayTheme && androidBlacklist ) {
 185                                 /* TODO:
 186                                 The native browser on Android 4.0.X ("Ice Cream Sandwich") suffers from an issue where the popup overlay appears to be z-indexed
 187 @@ -694,15 +763,55 @@ define( [ "jquery",
 188                 // what should be in _open. Seems to be "visual" vs "history" for now
 189                 open: function( options ) {
 190                         var self = this, opts = this.options, url, hashkey, activePage, currentIsDialog, hasHash, urlHistory;
 191 -
 192 +                       // self.link = ( $(event.target).attr('data-role') === 'button') ? event.target : $(event.target).closest('[data-role="button"]')[0];
 193                         // make sure open is idempotent
 194                         if( $.mobile.popup.active ) {
 195                                 return;
 196                         }
 197 -
 198                         // set the global popup mutex
 199                         $.mobile.popup.active = this;
 200 +                       if( !options ) {
 201 +                               options = [];
 202 +                       }
 203 +
 204 +                       if ( !options.link ) {
 205 +                               if ( !event ) {
 206 +                                       self.positionTo = "window";
 207 +                               } else {
 208 +                                       self.link = ( $(event.target).closest('a')[0] || $(event.target).closest('div')[0] );
 209 +                               }
 210 +                       } else {
 211 +                               self.link = options.link;
 212 +                       }
 213 +                       if ( event ) {
 214 +                               self.positionTo = ( options != null && options.positionTo != null ) ? options.positionTo : "origin";
 215 +                       }
 216
 217 +                       if ( $(self.link).jqmData("position-to") !== "window"
 218 +                                       && self.positionTo !== "window" ) {
 219 +
 220 +                               $(self.element).addClass("ui-ctxpopup");
 221 +                               $(self._ui.container).removeClass("ui-popup-container")
 222 +                                       .addClass("ui-ctxpopup-container");
 223 +
 224 +                               if( self.positionTo !== "origin" ) {
 225 +                                       $(self._ui.arrow).hide();
 226 +                               } else {
 227 +                                       $(self._ui.arrow).show();
 228 +                               }
 229 +                       } else {
 230 +                               $(self._ui.arrow).hide();
 231 +                               // apply opacity back screen
 232 +                               this._setOverlayTheme( "dim" );
 233 +                       }
 234 +                       if( !options.x
 235 +                               && self.positionTo === "origin" ) {
 236 +                               options.x = $(self.link).offset().left + $(self.link).outerWidth() / 2;
 237 +                       }
 238 +                       if( !options.y
 239 +                               && self.positionTo === "origin" ) {
 240 +                               options.y = $(self.link).offset().top + $(self.link).outerHeight() / 2;
 241 +                       }
 242                         // if history alteration is disabled close on navigate events
 243                         // and leave the url as is
 244                         if( !( opts.history ) ) {
 245 --
 246 1.7.5.4
 247