Skip to content
Permalink
Browse files

abstract out createPlaceholder

  • Loading branch information
mikesherov committed Jan 14, 2013
1 parent fd39c4e commit 3751c4d454131cfc7c37a727c42674d352e2405e
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 );
@@ -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 3751c4d

Please sign in to comment.
You can’t perform that action at this time.