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

   1 From 0df0afd2b03ab688210b9ff71d65dff73a33419c Mon Sep 17 00:00:00 2001
   2 From: "hjnim.kim" <hjnim.kim@samsung.com>
   3 Date: Tue, 11 Dec 2012 19:14:31 +0900
   4 Subject: [PATCH] Apply tizen style context popup
   5
   6 ---
   7  libs/js/jquery-mobile-1.2.0/js/widgets/popup.js |   95 ++++++++++++++++++++---
   8  1 files changed, 84 insertions(+), 11 deletions(-)
   9
  10 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
  11 index de2af2c..6470bc4 100644
  12 --- a/libs/js/jquery-mobile-1.2.0/js/widgets/popup.js
  13 +++ b/libs/js/jquery-mobile-1.2.0/js/widgets/popup.js
  14 @@ -58,7 +58,7 @@ define( [ "jquery",
  15                         //      https://github.com/jquery/jquery-mobile/issues/4784
  16                         //
  17                         // NOTE this option is modified in _create!
  18 -                       history: !$.mobile.browser.ie
  19 +                       history: false
  20                 },
  21
  22                 _eatEventAndClose: function( e ) {
  23 @@ -109,7 +109,7 @@ define( [ "jquery",
  24                 },
  25
  26                 _resizeTimeout: function() {
  27 -                       if ( !this._maybeRefreshTimeout() ) {
  28 +                       if ( !this._maybeRefreshTimeout() && this.positionTo === "window" ) {
  29                                 // effectively rapid-open the popup while leaving the screen intact
  30                                 this._trigger( "beforeposition" );
  31                                 this._ui.container
  32 @@ -144,7 +144,8 @@ define( [ "jquery",
  33                         var ui = {
  34                                         screen: $( "<div class='ui-screen-hidden ui-popup-screen'></div>" ),
  35                                         placeholder: $( "<div style='display: none;'><!-- placeholder --></div>" ),
  36 -                                       container: $( "<div class='ui-popup-container ui-selectmenu-hidden'></div>" )
  37 +                                       container: $( "<div class='ui-popup-container ui-selectmenu-hidden'></div>" ),
  38 +                                       arrow : $("<div class='ui-arrow'></div>")
  39                                 },
  40                                 thisPage = this.element.closest( ".ui-page" ),
  41                                 myId = this.element.attr( "id" ),
  42 @@ -174,7 +175,7 @@ define( [ "jquery",
  43                                 ui.placeholder.html( "<!-- placeholder for " + myId + " -->" );
  44                         }
  45                         ui.container.append( this.element );
  46 -
  47 +                       ui.container.append( ui.arrow );
  48                         // Add class to popup element
  49                         this.element.addClass( "ui-popup" );
  50
  51 @@ -276,7 +277,7 @@ define( [ "jquery",
  52                 },
  53
  54                 _setTolerance: function( value ) {
  55 -                       var tol = { t: 30, r: 15, b: 30, l: 15 };
  56 +                       var tol = { t: 10, r: 10, b: 10, l: 10 };
  57
  58                         if ( value ) {
  59                                 var ar = String( value ).split( "," );
  60 @@ -361,7 +362,11 @@ define( [ "jquery",
  61                                         cx: winCoords.cx - this._tolerance.l - this._tolerance.r,
  62                                         cy: winCoords.cy - this._tolerance.t - this._tolerance.b
  63                                 },
  64 -                               menuSize, ret;
  65 +                               menuSize, ret,
  66 +                               linkOffset = $(this.link).offset(),
  67 +                               positionOffsets = [],
  68 +                               correctionValue = [0,0],
  69 +                               arrayIdx;
  70
  71                         // Clamp the width of the menu before grabbing its size
  72                         this._ui.container.css( "max-width", rc.cx );
  73 @@ -388,8 +393,48 @@ define( [ "jquery",
  74                                 docHeight = Math.max( docEl.clientHeight, docBody.scrollHeight, docBody.offsetHeight, docEl.scrollHeight, docEl.offsetHeight );
  75
  76                         ret.y -= Math.min( ret.y, Math.max( 0, ret.y + menuSize.cy - docHeight ) );
  77 +                       if ( this.positionTo === "window" )
  78 +                       {
  79 +                               return { left: ret.x, top: ret.y , arrowleft: 0 , arrowtop: 0};
  80 +                       }
  81 +
  82 +                       positionOffsets = [ linkOffset.left,
  83 +                                                               linkOffset.top,
  84 +                                                               docEl.clientHeight - ( linkOffset.top + $(this.link).height() ),
  85 +                                                               docEl.clientWidth - ( linkOffset.left + $(this.link).width() )];
  86 +                       arrayIdx = positionOffsets.indexOf(Math.max.apply(window,positionOffsets));
  87 +
  88 +                       switch( arrayIdx )
  89 +                       {
  90 +                               case 0:
  91 +                                       correctionValue = [ -$(this.link).width() , 0];
  92 +                                       arrow.attr( "class", "" )
  93 +                                                                       .addClass( "ui-arrow right" );
  94 +                                       break;
  95 +                               case 1:
  96 +                                       correctionValue = [ 0 , -(ret.y + menuSize.cy - linkOffset.top)];
  97 +                                       arrowtop = menuSize.cy;
  98 +                                       arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
  99 +                                       $(this._ui.arrow).attr( "class", "" )
 100 +                                                                       .addClass( "ui-arrow bottom" );
 101 +                                       break;
 102 +                               case 2:
 103 +                                       correctionValue = [ 0 , ( linkOffset.top + $(this.link).height() - ret.y ) ];
 104 +                                       arrowtop = - parseInt( $(this._ui.arrow).css("border-width") ) * 2;
 105 +                                       arrowleft = (linkOffset.left - ret.x + correctionValue[0]) + ( $(this.link).width() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") ) / 2;
 106 +                                       $(this._ui.arrow).attr( "class", "" )
 107 +                                                                       .addClass("ui-arrow top");
 108 +                                       break;
 109 +                               case 3:
 110 +                                       correctionValue = [ ( menuSize.cx < $(this.link).width() ) ? ( $(this.link).width() / 2 ) + ( menuSize.cx / 2) : $(this.link).width() , 0];
 111 +                                       arrowtop = ( linkOffset.top - ret.y  ) + ( $(this.link).height() / 2 ) - parseInt( $(this._ui.arrow).css("border-width") );
 112 +                                       arrowleft = - parseInt( $(this._ui.arrow).css("border-width") ) * 2;
 113 +                                       $(this._ui.arrow).attr( "class", "" )
 114 +                                                                       .addClass("ui-arrow right");
 115 +                                       break;
 116 +                       }
 117
 118 -                       return { left: ret.x, top: ret.y };
 119 +                       return { left: ret.x + correctionValue[0], top: ret.y + correctionValue[1] , arrowleft: arrowleft , arrowtop: arrowtop};
 120                 },
 121
 122                 _createPrereqs: function( screenPrereq, containerPrereq, whenDone ) {
 123 @@ -569,7 +614,7 @@ define( [ "jquery",
 124                         this._ui.container
 125                                 .removeClass( "ui-selectmenu-hidden" )
 126                                 .offset( coords );
 127 -
 128 +                       this._ui.arrow.css( { top : coords.arrowtop, left : coords.arrowleft } );
 129                         if ( this.options.overlayTheme && androidBlacklist ) {
 130                                 /* TODO:
 131                                 The native browser on Android 4.0.X ("Ice Cream Sandwich") suffers from an issue where the popup overlay appears to be z-indexed
 132 @@ -587,6 +632,7 @@ define( [ "jquery",
 133                                 // TODO sort out why this._page isn't working
 134                                 this.element.closest( ".ui-page" ).addClass( "ui-popup-open" );
 135                         }
 136 +
 137                         this._animate({
 138                                 additionalCondition: true,
 139                                 transition: transition,
 140 @@ -691,15 +737,42 @@ define( [ "jquery",
 141                 // what should be in _open. Seems to be "visual" vs "history" for now
 142                 open: function( options ) {
 143                         var self = this, opts = this.options, url, hashkey, activePage, currentIsDialog, hasHash, urlHistory;
 144 -
 145 +                       // self.link = ( $(event.target).attr('data-role') === 'button') ? event.target : $(event.target).closest('[data-role="button"]')[0];
 146                         // make sure open is idempotent
 147                         if( $.mobile.popup.active ) {
 148                                 return;
 149                         }
 150 -
 151                         // set the global popup mutex
 152                         $.mobile.popup.active = this;
 153 -
 154 +                       if( !options )
 155 +                       {
 156 +                               options = [];
 157 +                       }
 158 +                       if ( !options.link )
 159 +                       {
 160 +                               self.link = $(event.target).closest('a')[0];
 161 +                       } else {
 162 +                               self.link = options.link;
 163 +                       }
 164 +                       self.positionTo = ( options != null && options.positionTo != null ) ? options.positionTo : "origin";
 165 +                       if ( $(self.link).jqmData("position-to") !== "window")
 166 +                       {
 167 +                               $(self.element).addClass("ui-ctxpopup");
 168 +                               $(self._ui.container).removeClass("ui-popup-container")
 169 +                                       .addClass("ui-ctxpopup-container");
 170 +                       } else {
 171 +                               $(self._ui.arrow).hide();
 172 +                       }
 173 +                       if( !options.x
 174 +                               && self.positionTo !== "window" )
 175 +                       {
 176 +                               options.x = $(self.link).offset().left + $(self.link).outerWidth() / 2;
 177 +                       }
 178 +                       if( !options.y
 179 +                               && self.positionTo !== "window" )
 180 +                       {
 181 +                               options.y = $(self.link).offset().top + $(self.link).outerHeight() / 2;
 182 +                       }
 183                         // if history alteration is disabled close on navigate events
 184                         // and leave the url as is
 185                         if( !( opts.history ) ) {
 186 --
 187 1.7.5.4
 188