Permalink
Browse files

Merge pull request #3 from mikesherov/clip

abstract out createPlaceholder
  • Loading branch information...
mpetrovich committed Jan 14, 2013
2 parents fd39c4e + 3751c4d commit edb021375ca1bda5e08052f6f9cd3e136e7a777d
Showing with 29 additions and 36 deletions.
  1. +15 −36 ui/jquery.ui.effect-clip.js
  2. +14 −0 ui/jquery.ui.effect.js
@@ -14,9 +14,12 @@
(function( $, undefined ) {
var clipRegex = /^rect\((-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|auto)\)$/,
- parseClip = function( str, outerWidth, outerHeight ) {
- var values = clipRegex.exec( str ) || [ "", 0, outerWidth, outerHeight, 0 ];
-
+ parseClip = function( el ) {
+ var str = el.css("clip"),
+ outerWidth = el.outerWidth(),
+ outerHeight = el.outerHeight(),
+ values = clipRegex.exec( str ) || [ "", 0, outerWidth, outerHeight, 0 ];
+
// Webkit getComputedStyle incorrectly returns "0px" for specified "auto" values, so we have to guess
// https://bugs.webkit.org/show_bug.cgi?id=20454
// Support: Chrome, Safari
@@ -39,61 +42,37 @@ var clipRegex = /^rect\((-?\d*\.?\d*px|-?\d+%|auto),?\s+(-?\d*\.?\d*px|-?\d+%|au
};
$.effects.effect.clip = function( o, done ) {
- var width, height, outerWidth, outerHeight, offset, start, end, shadow, temp, display,
+ var start, end, shadow, temp, position,
el = $( this ),
props = [ "display", "position", "left", "right", "width", "height", "clip" ],
mode = $.effects.setMode( el, o.mode || "hide" ),
show = mode === "show",
direction = o.direction || "vertical",
both = direction === "both",
horizontal = both || direction === "horizontal",
- vertical = both || direction === "vertical",
- position = el.css("position");
+ vertical = both || direction === "vertical";
if ( show ) {
el.show();
}
- display = el.css("display");
- width = el.width();
- height = el.height();
- outerWidth = el.outerWidth();
- outerHeight = el.outerHeight();
- offset = el.position();
- start = parseClip( el.css("clip"), outerWidth, outerHeight );
+ position = el.position();
+ start = parseClip( el );
end = {
top: vertical ? ( start.bottom - start.top ) / 2 : start.top,
right: horizontal ? ( start.right - start.left ) / 2 : start.right,
bottom: vertical ? ( start.bottom - start.top ) / 2 : start.bottom,
left: horizontal ? ( start.right - start.left ) / 2 : start.left
};
- if ( /^(inline|ruby)/.test( display ) ) {
- display = "inline-block";
- } else {
- display = "block";
- }
-
- if ( position === "static" || position === "relative" ) {
- position = "absolute";
-
- // Since clip can only be applied to elements with position:absolute,
- // we need to create a stand-in for the non-absolutely positioned element being clipped
- shadow = $("<div>").css({
- display: display,
- visibility: "hidden"
- })
- .outerWidth( el.outerWidth(true), true )
- .outerHeight( el.outerHeight(true), true )
- .insertAfter( el );
- }
-
$.effects.save( el, props );
+ shadow = $.effects.createPlaceholder( el );
+
el.css({
- position: position,
- left: offset.left,
- top: offset.top
+ position: shadow ? "absolute" : el.css("position"),
+ left: position.left,
+ top: position.top
})
.outerWidth( el.outerWidth(true), true )
.outerHeight( el.outerHeight(true), true );
View
@@ -949,6 +949,20 @@ $.extend( $.effects, {
};
},
+ // Creates a placeholder element so that the original element can be made absolute
+ createPlaceholder: function( element ) {
+ if ( /^(static|relative)/.test( element.css("position") ) ) {
+
+ return $("<div>").css({
+ display: /^(inline|ruby)/.test( element.css("display") ) ? "inline-block" : "block",
+ visibility: "hidden"
+ })
+ .outerWidth( element.outerWidth(true), true )
+ .outerHeight( element.outerHeight(true), true )
+ .insertAfter( element );
+ }
+ },
+
// Wraps the element around a wrapper that copies position properties
createWrapper: function( element ) {

0 comments on commit edb0213

Please sign in to comment.