Skip to content
Browse files

Popup: Remove arrow background div

Fixes gh-7037
  • Loading branch information...
1 parent a85aa3a commit 5e1a830903b70dd7d13d0c74a8844fb98ed5a304 @gabrielschulhof gabrielschulhof committed Feb 1, 2014
Showing with 9 additions and 87 deletions.
  1. +4 −69 css/structure/jquery.mobile.popup.arrow.css
  2. +5 −18 js/widgets/popup.arrow.js
View
73 css/structure/jquery.mobile.popup.arrow.css
@@ -72,12 +72,12 @@
* For each side, the arrow is twice the desired size and its corner is aligned
* with the edge of the container:
*
- * /\ /\ +----+ /\
- * / \ / \ | /\ |top / \
+ * /\ /\ +----+ /\
+ * / \ / \ | /\ |top / \
* +----+ \ / +----+ +-->|/ \| / \
* left| / | \ / | \ |right | | | / \
- * |/ | \ / | \| | /| |\ / \
- * |\ | / \ | /| | / +----+ \ \ +----+ /
+ * |/ | \ / | \| | /| |\ / \
+ * |\ | / \ | /| | / +----+ \ \ +----+ /
* | \ | / \ | / | | \ / \| |/
* +----+ / \ +----+ | \ / | |
* ^ \ / \ / ^ | \ / +->|\ /|
@@ -136,22 +136,6 @@
margin-top: -5.857864376269049px;
}
-.ui-popup-arrow-background {
- /* desired triangle height is used here */
- width: 20px;
- height: 20px;
-}
-
-.ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow-background
-.ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow-background {
- background-position: 0 10px;
-}
-
-.ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow-background,
-.ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow-background {
- background-position: 10px 0;
-}
-
/* structure */
.ui-popup > .ui-popup-arrow-guide {
position: absolute;
@@ -185,52 +169,3 @@
M22=0.7071067811865474,
SizingMethod='auto expand');
}
-
-.ui-popup-arrow-background {
- position: absolute;
- border: 0;
-}
-
-.ui-popup-arrow-container.ie .ui-popup-arrow-background {
- background: none;
-}
-
-.ui-popup-arrow-container.ui-popup-arrow-t .ui-popup-arrow-background,
-.ui-popup-arrow-container.ui-popup-arrow-b .ui-popup-arrow-background {
- /* Undo rotation and reflect in x axis */
- -webkit-transform: rotate(-45deg) scale(1, -1);
- -moz-transform: rotate(-45deg) scale(1, -1);
- -ms-transform: rotate(-45deg) scale(1, -1);
- transform: rotate(-45deg) scale(1, -1);
-}
-
-.ui-popup-arrow-container.ui-popup-arrow-t.ie .ui-popup-arrow-background,
-.ui-popup-arrow-container.ui-popup-arrow-b.ie .ui-popup-arrow-background {
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=0.7071067811865483, M12=-0.7071067811865467, M21=-0.7071067811865467, M22=-0.7071067811865483, SizingMethod='auto expand')";
- filter: progid:DXImageTransform.Microsoft.Matrix(
- M11=0.7071067811865483,
- M12=-0.7071067811865467,
- M21=-0.7071067811865467,
- M22=-0.7071067811865483,
- SizingMethod='auto expand');
-}
-
-.ui-popup-arrow-container.ui-popup-arrow-l .ui-popup-arrow-background,
-.ui-popup-arrow-container.ui-popup-arrow-r .ui-popup-arrow-background {
- /* Undo rotation and reflect in y axis */
- -webkit-transform: rotate(-45deg) scale(-1, 1);
- -moz-transform: rotate(-45deg) scale(-1, 1);
- -ms-transform: rotate(-45deg) scale(-1, 1);
- transform: rotate(-45deg) scale(-1, 1);
-}
-
-.ui-popup-arrow-container.ui-popup-arrow-l.ie .ui-popup-arrow-background,
-.ui-popup-arrow-container.ui-popup-arrow-r.ie .ui-popup-arrow-background {
- -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(M11=-0.7071067811865483, M12=0.7071067811865467, M21=0.7071067811865467, M22=0.7071067811865483, SizingMethod='auto expand')";
- filter: progid:DXImageTransform.Microsoft.Matrix(
- M11=-0.7071067811865483,
- M12=0.7071067811865467,
- M21=0.7071067811865467,
- M22=0.7071067811865483,
- SizingMethod='auto expand');
-}
View
23 js/widgets/popup.arrow.js
@@ -16,22 +16,17 @@ var ieHack = ( $.mobile.browser.oldIE && $.mobile.browser.oldIE <= 8 ),
uiTemplate = $(
"<div class='ui-popup-arrow-guide'></div>" +
"<div class='ui-popup-arrow-container" + ( ieHack ? " ie" : "" ) + "'>" +
- "<div class='ui-popup-arrow'>" +
- "<div class='ui-popup-arrow-background'></div>" +
- "</div>" +
+ "<div class='ui-popup-arrow'></div>" +
"</div>"
- ),
- // Needed for transforming coordinates from screen to arrow background
- txFactor = Math.sqrt( 2 ) / 2;
+ );
function getArrow() {
var clone = uiTemplate.clone(),
gd = clone.eq( 0 ),
ct = clone.eq( 1 ),
- ar = ct.children(),
- bg = ar.children();
+ ar = ct.children();
- return { arEls: ct.add( gd ), gd: gd, ct: ct, ar: ar, bg: bg };
+ return { arEls: ct.add( gd ), gd: gd, ct: ct, ar: ar };
}
$.widget( "mobile.popup", $.mobile.popup, {
@@ -58,7 +53,6 @@ $.widget( "mobile.popup", $.mobile.popup, {
theme = this._themeClassFromOption( "ui-body-", opts.theme );
ar.ar.addClass( theme + ( opts.shadow ? " ui-overlay-shadow" : "" ) );
- ar.bg.addClass( theme );
ar.arEls.hide().appendTo( this.element );
return ar;
@@ -140,7 +134,7 @@ $.widget( "mobile.popup", $.mobile.popup, {
},
_placementCoords: function( desired ) {
- var state, best, params, bgOffset, elOffset, diff, bgRef,
+ var state, best, params, elOffset, bgRef,
optionValue = this.options.arrow,
ar = this._ui.arrow;
@@ -189,12 +183,6 @@ $.widget( "mobile.popup", $.mobile.popup, {
left: elOffset.left + state.contentBox.x,
top: elOffset.top + state.contentBox.y
};
- bgOffset = ar.bg
- .removeAttr( "style" )
- .css( ( "cx" === params[ best.dir ].dimKey ? "width" : "height" ), state.contentBox[ params[ best.dir ].dimKey ] )
- .offset();
- diff = { dx: bgRef.x.left - bgOffset.left, dy: bgRef.y.top - bgOffset.top };
- ar.bg.css( { left: txFactor * diff.dy + txFactor * diff.dx, top: txFactor * diff.dy - txFactor * diff.dx } );
}
return best.result;
@@ -227,7 +215,6 @@ $.widget( "mobile.popup", $.mobile.popup, {
oldTheme = this._themeClassFromOption( "ui-body-", oldTheme );
newTheme = this._themeClassFromOption( "ui-body-", opts.theme );
ar.ar.removeClass( oldTheme ).addClass( newTheme );
- ar.bg.removeClass( oldTheme ).addClass( newTheme );
}
if ( opts.shadow !== undefined ) {

0 comments on commit 5e1a830

Please sign in to comment.
Something went wrong with that request. Please try again.