Skip to content

Commit

Permalink
Merge pull request #1 from Sly777/windowResize
Browse files Browse the repository at this point in the history 
New Feature: watchWindow
  • Loading branch information
@Sly777
Sly777 committed Nov 26, 2015
2 parents 4e4e85e + 4107474 commit f055328
Show file tree
Hide file tree
Showing 2 changed files with 155 additions and 85 deletions.
127 changes: 83 additions & 44 deletions dist/react-tooltip.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ var ReactTooltip = (function (_Component) {
_classCallCheck(this, ReactTooltip);

_Component.call(this, props);
this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus');
this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize');
this.mount = true;
this.state = {
show: false,
Expand Down Expand Up @@ -114,6 +114,11 @@ var ReactTooltip = (function (_Component) {

window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild);
window.addEventListener('__react_tooltip_rebuild_event', this.globalRebuild.bind(this), false);

if (this.props.watchWindow) {
window.removeEventListener('resize', this.onWindowResize);
window.addEventListener('resize', this.onWindowResize.bind(this), false);
}
};

ReactTooltip.prototype.componentWillUpdate = function componentWillUpdate() {
Expand All @@ -130,18 +135,13 @@ var ReactTooltip = (function (_Component) {
this.mount = false;
window.removeEventListener('__react_tooltip_hide_event', this.globalHide);
window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild);
if (this.props.watchWindow) {
window.removeEventListener('resize', this.onWindowResize);
}
};

ReactTooltip.prototype.bindListener = function bindListener() {
var id = this.props.id;

var targetArray = undefined;

if (id === undefined) {
targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
} else {
targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]');
}
var targetArray = this.getTargetArray();

var dataEvent = undefined;
for (var i = 0; i < targetArray.length; i++) {
Expand All @@ -165,6 +165,43 @@ var ReactTooltip = (function (_Component) {
}
};

ReactTooltip.prototype.getTargetArray = function getTargetArray() {
var id = this.props.id;

var targetArray = undefined;

if (id === undefined) {
targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
} else {
targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]');
}

return targetArray;
};

ReactTooltip.prototype.onWindowResize = function onWindowResize() {
if (!this.mount) return;
var targetArray = this.getTargetArray();

for (var i = 0; i < targetArray.length; i++) {
if (targetArray[i].getAttribute('currentItem') === 'true') {
// todo: timer for performance

var _getPosition = this.getPosition(targetArray[i]);

var x = _getPosition.x;
var y = _getPosition.y;

_reactDom.findDOMNode(this).style.left = x + 'px';
_reactDom.findDOMNode(this).style.top = y + 'px';
/*this.setState({
x,
y
})*/
}
}
};

ReactTooltip.prototype.checkStatus = function checkStatus(e) {
if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
this.hideTooltip(e);
Expand All @@ -176,15 +213,7 @@ var ReactTooltip = (function (_Component) {
};

ReactTooltip.prototype.setUntargetItems = function setUntargetItems(currentTarget) {
var id = this.props.id;

var targetArray = undefined;

if (id === undefined) {
targetArray = document.querySelectorAll('[data-tip]:not([data-for])');
} else {
targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]');
}
var targetArray = this.getTargetArray();

for (var i = 0; i < targetArray.length; i++) {
if (currentTarget !== targetArray[i]) {
Expand Down Expand Up @@ -258,9 +287,6 @@ var ReactTooltip = (function (_Component) {

ReactTooltip.prototype.updateTooltip = function updateTooltip(e) {
if (this.trim(this.state.placeholder).length > 0) {
var place = this.state.place;

var node = _reactDom.findDOMNode(this);
if (this.state.effect === 'float') {
// const offsetY = e.clientY
this.setState({
Expand All @@ -269,28 +295,11 @@ var ReactTooltip = (function (_Component) {
y: e.clientY
});
} else if (this.state.effect === 'solid') {
var boundingClientRect = e.currentTarget.getBoundingClientRect();
var targetTop = boundingClientRect.top;
var targetLeft = boundingClientRect.left;
var tipWidth = node.clientWidth;
var tipHeight = node.clientHeight;
var targetWidth = e.currentTarget.clientWidth;
var targetHeight = e.currentTarget.clientHeight;
var x = undefined;
var y = undefined;
if (place === 'top') {
x = targetLeft - tipWidth / 2 + targetWidth / 2;
y = targetTop - tipHeight - 8;
} else if (place === 'bottom') {
x = targetLeft - tipWidth / 2 + targetWidth / 2;
y = targetTop + targetHeight + 8;
} else if (place === 'left') {
x = targetLeft - tipWidth - 6;
y = targetTop + targetHeight / 2 - tipHeight / 2;
} else if (place === 'right') {
x = targetLeft + targetWidth + 6;
y = targetTop + targetHeight / 2 - tipHeight / 2;
}
var _getPosition2 = this.getPosition(e.currentTarget);

var x = _getPosition2.x;
var y = _getPosition2.y;

this.setState({
show: true,
x: x,
Expand All @@ -300,6 +309,36 @@ var ReactTooltip = (function (_Component) {
}
};

ReactTooltip.prototype.getPosition = function getPosition(currentTarget) {
var place = this.state.place;

var node = _reactDom.findDOMNode(this);
var boundingClientRect = currentTarget.getBoundingClientRect();
var targetTop = boundingClientRect.top;
var targetLeft = boundingClientRect.left;
var tipWidth = node.clientWidth;
var tipHeight = node.clientHeight;
var targetWidth = currentTarget.clientWidth;
var targetHeight = currentTarget.clientHeight;
var x = undefined;
var y = undefined;
if (place === 'top') {
x = targetLeft - tipWidth / 2 + targetWidth / 2;
y = targetTop - tipHeight - 8;
} else if (place === 'bottom') {
x = targetLeft - tipWidth / 2 + targetWidth / 2;
y = targetTop + targetHeight + 8;
} else if (place === 'left') {
x = targetLeft - tipWidth - 6;
y = targetTop + targetHeight / 2 - tipHeight / 2;
} else if (place === 'right') {
x = targetLeft + targetWidth + 6;
y = targetTop + targetHeight / 2 - tipHeight / 2;
}

return { x: x, y: y };
};

/**
* When mouse leave, hide tooltip
*/
Expand Down
113 changes: 72 additions & 41 deletions src/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export default class ReactTooltip extends Component {

constructor (props) {
super(props)
this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus')
this._bind('showTooltip', 'updateTooltip', 'hideTooltip', 'checkStatus', 'onWindowResize')
this.mount = true
this.state = {
show: false,
Expand Down Expand Up @@ -68,6 +68,11 @@ export default class ReactTooltip extends Component {

window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild)
window.addEventListener('__react_tooltip_rebuild_event', ::this.globalRebuild, false)

if (this.props.watchWindow) {
window.removeEventListener('resize', this.onWindowResize)
window.addEventListener('resize', ::this.onWindowResize, false)
}
}

componentWillUpdate () {
Expand All @@ -84,17 +89,13 @@ export default class ReactTooltip extends Component {
this.mount = false
window.removeEventListener('__react_tooltip_hide_event', this.globalHide)
window.removeEventListener('__react_tooltip_rebuild_event', this.globalRebuild)
if (this.props.watchWindow) {
window.removeEventListener('resize', this.onWindowResize)
}
}

bindListener () {
const {id} = this.props
let targetArray

if (id === undefined) {
targetArray = document.querySelectorAll('[data-tip]:not([data-for])')
} else {
targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]')
}
let targetArray = this.getTargetArray()

let dataEvent
for (let i = 0; i < targetArray.length; i++) {
Expand All @@ -118,6 +119,37 @@ export default class ReactTooltip extends Component {
}
}

getTargetArray () {
const {id} = this.props
let targetArray

if (id === undefined) {
targetArray = document.querySelectorAll('[data-tip]:not([data-for])')
} else {
targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]')
}

return targetArray
}

onWindowResize () {
if(!this.mount) return;
let targetArray = this.getTargetArray()

for (let i = 0; i < targetArray.length; i++) {
if (targetArray[i].getAttribute('currentItem') === 'true') {
// todo: timer for performance
let {x,y} = this.getPosition(targetArray[i])
findDOMNode(this).style.left = x + 'px'
findDOMNode(this).style.top = y + 'px'
/*this.setState({
x,
y
})*/
}
}
}

checkStatus (e) {
if (this.state.show && e.currentTarget.getAttribute('currentItem') === 'true') {
this.hideTooltip(e)
Expand All @@ -129,14 +161,7 @@ export default class ReactTooltip extends Component {
}

setUntargetItems (currentTarget) {
const {id} = this.props
let targetArray

if (id === undefined) {
targetArray = document.querySelectorAll('[data-tip]:not([data-for])')
} else {
targetArray = document.querySelectorAll('[data-tip][data-for="' + id + '"]')
}
let targetArray = this.getTargetArray()

for (let i = 0; i < targetArray.length; i++) {
if (currentTarget !== targetArray[i]) {
Expand Down Expand Up @@ -206,8 +231,6 @@ export default class ReactTooltip extends Component {
*/
updateTooltip (e) {
if (this.trim(this.state.placeholder).length > 0) {
const {place} = this.state
const node = findDOMNode(this)
if (this.state.effect === 'float') {
// const offsetY = e.clientY
this.setState({
Expand All @@ -216,28 +239,7 @@ export default class ReactTooltip extends Component {
y: e.clientY
})
} else if (this.state.effect === 'solid') {
const boundingClientRect = e.currentTarget.getBoundingClientRect()
const targetTop = boundingClientRect.top
const targetLeft = boundingClientRect.left
const tipWidth = node.clientWidth
const tipHeight = node.clientHeight
const targetWidth = e.currentTarget.clientWidth
const targetHeight = e.currentTarget.clientHeight
let x
let y
if (place === 'top') {
x = targetLeft - (tipWidth / 2) + (targetWidth / 2)
y = targetTop - tipHeight - 8
} else if (place === 'bottom') {
x = targetLeft - (tipWidth / 2) + (targetWidth / 2)
y = targetTop + targetHeight + 8
} else if (place === 'left') {
x = targetLeft - tipWidth - 6
y = targetTop + (targetHeight / 2) - (tipHeight / 2)
} else if (place === 'right') {
x = targetLeft + targetWidth + 6
y = targetTop + (targetHeight / 2) - (tipHeight / 2)
}
let {x,y} = this.getPosition(e.currentTarget)
this.setState({
show: true,
x,
Expand All @@ -247,6 +249,35 @@ export default class ReactTooltip extends Component {
}
}

getPosition (currentTarget) {
const {place} = this.state
const node = findDOMNode(this)
const boundingClientRect = currentTarget.getBoundingClientRect()
const targetTop = boundingClientRect.top
const targetLeft = boundingClientRect.left
const tipWidth = node.clientWidth
const tipHeight = node.clientHeight
const targetWidth = currentTarget.clientWidth
const targetHeight = currentTarget.clientHeight
let x
let y
if (place === 'top') {
x = targetLeft - (tipWidth / 2) + (targetWidth / 2)
y = targetTop - tipHeight - 8
} else if (place === 'bottom') {
x = targetLeft - (tipWidth / 2) + (targetWidth / 2)
y = targetTop + targetHeight + 8
} else if (place === 'left') {
x = targetLeft - tipWidth - 6
y = targetTop + (targetHeight / 2) - (tipHeight / 2)
} else if (place === 'right') {
x = targetLeft + targetWidth + 6
y = targetTop + (targetHeight / 2) - (tipHeight / 2)
}

return { x, y }
}

/**
* When mouse leave, hide tooltip
*/
Expand Down

0 comments on commit f055328

Please sign in to comment.