Skip to content

Add support for css3 rotate transform #89

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Add support for css3 rotate transform #89

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 61 additions & 3 deletions src/placementcalculator.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,8 @@ function PlacementCalculator() {

if (isSvgElement(element)) {
position = getSvgPlacement(element, placementBase);
} else if (element.css('transform').indexOf('matrix') !== -1) {
position = getTransformedHtmlPlacement(element, placementBase);
} else {
position = getHtmlPlacement(element, placementBase);
}
Expand Down Expand Up @@ -90,6 +92,47 @@ function PlacementCalculator() {
return coords;
}

/**
* Calculates the size of the rotated-element's bounding box.
* @private
* @param {jQuery} element The possibly rotated element.
* @return {Object} An object with the width,height position values.
*/
function getTransformedHtmlDimensions(element) {
var cos,
sin,
width = element.width(),
height = element.height(),
matrix = element.css('transform').replace(/matrix\(|\)/g, '').split(', ');
cos = matrix[0];
sin = matrix[1];
return {
'width': Math.round(width * Math.abs(cos) + height * Math.abs(sin)),
'height': Math.round(width * Math.abs(sin) + height * Math.abs(cos))
};
}

/**
* Finds the tooltip attachment point in the document for a css
* transformed HTML DOM element for the specified placement.
* @private
* @param {jQuery} element The element that the tooltip should target.
* @param {string} placement The placement for the tooltip.
* @return {Object} An object with the top,left position values.
*/
function getTransformedHtmlPlacement(element, placement) {
var objectOffset = element.offset(),
objectWidth,
objectHeight,
objectSize;

objectSize = getTransformedHtmlDimensions(element);
objectWidth = objectSize.width;
objectHeight = objectSize.height;

return getGenericPlacement(placement, objectOffset, objectWidth, objectHeight);
}

/**
* Finds the tooltip attachment point in the document for a HTML DOM element
* for the specified placement.
Expand All @@ -101,10 +144,25 @@ function PlacementCalculator() {
function getHtmlPlacement(element, placement) {
var objectOffset = element.offset(),
objectWidth = element.outerWidth(),
objectHeight = element.outerHeight(),
left,
top;
objectHeight = element.outerHeight();

return getGenericPlacement(placement, objectOffset, objectWidth, objectHeight);
}


/**
* Returns the appropriate position. Helper for getHtmlPlacement() and
* getTransformedHtmlPlacement().
* @private
* @param {string} placement The placement for the tooltip.
* @param {Object} objectOffset Element's offset.
* @param {number} Element's width.
* @param {number} Element's height.
* @return {Object} An object with the top,left position values.
*/
function getGenericPlacement(placement, objectOffset, objectWidth, objectHeight) {
var left,
top;
// calculate the appropriate x and y position in the document
switch (placement) {
case 'n':
Expand Down