Merge pull request #526 from artdevgame/feature-listen-body

Feature: listen body events

Author: aronhelser

src/decorators/bodyMode.js

@@ -0,0 +1,104 @@
+/**
+ * Util method to get effect
+ */
+import {checkStatus} from './customEvent'
+
+const makeProxy = (e) => {
+  const proxy = {}
+  for (const key in e) {
+    if (typeof e[key] === 'function') {
+      proxy[key] = e[key].bind(e)
+    } else {
+      proxy[key] = e[key]
+    }
+  }
+  return proxy
+}
+
+const bodyListener = function (callback, options, e) {
+  const {respectEffect = false, customEvent = false} = options
+  const {id} = this.props
+
+  const tip = e.target.getAttribute('data-tip') || null
+  const forId = e.target.getAttribute('data-for') || null
+
+  const target = e.target
+  if (this.isCustomEvent(target) && !customEvent) {
+    return
+  }
+
+  const isTargetBelongsToTooltip =
+    (id == null && forId == null) || forId === id
+
+  if (tip != null &&
+    (!respectEffect || this.getEffect(target) === 'float') &&
+    isTargetBelongsToTooltip
+  ) {
+    const proxy = makeProxy(e)
+    proxy.currentTarget = target
+    callback(proxy)
+  }
+}
+
+const findCustomEvents = (targetArray, dataAttribute) => {
+  const events = {}
+  targetArray.forEach(target => {
+    const event = target.getAttribute(dataAttribute)
+    if (event) event.split(' ').forEach(event => events[event] = true)
+  })
+
+  return events
+}
+
+const getBody = () => document.getElementsByTagName('body')[0]
+
+export default function (target) {
+  target.prototype.isBodyMode = function () {
+    return !!this.props.bodyMode
+  }
+
+  target.prototype.bindBodyListener = function (targetArray) {
+    const {event, eventOff, possibleCustomEvents,
+      possibleCustomEventsOff} = this.state
+    const body = getBody()
+
+    const customEvents = findCustomEvents(targetArray, 'data-event')
+    const customEventsOff = findCustomEvents(targetArray, 'data-event-off')
+
+    if (event != null) customEvents[event] = true
+    if (eventOff != null) customEventsOff[eventOff] = true
+    possibleCustomEvents.split(' ').forEach(event => customEvents[event] = true)
+    possibleCustomEventsOff.split(' ').forEach(event => customEventsOff[event] = true)
+
+    this.unbindBodyListener(body)
+
+    const listeners = this.bodyModeListeners = {}
+    if (event == null) {
+      listeners.mouseover = bodyListener.bind(this, this.showTooltip, {})
+      listeners.mousemove = bodyListener.bind(this, this.updateTooltip, { respectEffect: true })
+      listeners.mouseout = bodyListener.bind(this, this.hideTooltip, {})
+    }
+
+    for (const event in customEvents) {
+      listeners[event] = bodyListener.bind(this, (e) => {
+        const targetEventOff = e.currentTarget.getAttribute('data-event-off') || eventOff
+        checkStatus.call(this, targetEventOff, e)
+      }, { customEvent: true })
+    }
+    for (const event in customEventsOff) {
+      listeners[event] = bodyListener.bind(this, this.hideTooltip, { customEvent: true })
+    }
+    for (const event in listeners) {
+      body.addEventListener(event, listeners[event])
+    }
+  }
+
+  target.prototype.unbindBodyListener = function (body) {
+    body = body || getBody()
+
+    const listeners = this.bodyModeListeners
+    for (const event in listeners) {
+      body.removeEventListener(event, listeners[event])
+    }
+  }
+}

src/decorators/customEvent.js

@@ -6,11 +6,10 @@
  * - `eventOff` {String}
  */
 
-const checkStatus = function (dataEventOff, e) {
+export const checkStatus = function (dataEventOff, e) {
   const {show} = this.state
   const {id} = this.props
-  const dataIsCapture = e.currentTarget.getAttribute('data-iscapture')
-  const isCapture = dataIsCapture && dataIsCapture === 'true' || this.props.isCapture
+  const isCapture = this.isCapture(e.currentTarget)
   const currentItem = e.currentTarget.getAttribute('currentItem')
 
   if (!isCapture) e.stopPropagation()

src/index.js

@@ -10,6 +10,7 @@ import windowListener from './decorators/windowListener'
 import customEvent from './decorators/customEvent'
 import isCapture from './decorators/isCapture'
 import getEffect from './decorators/getEffect'
+import bodyMode from './decorators/bodyMode'
 import trackRemoval from './decorators/trackRemoval'
 
 /* Utils */
@@ -26,6 +27,7 @@ import cssStyle from './style'
 @customEvent
 @isCapture
 @getEffect
+@bodyMode
 @trackRemoval
 class ReactTooltip extends React.Component {
 
@@ -58,6 +60,9 @@ class ReactTooltip extends React.Component {
     scrollHide: PropTypes.bool,
     resizeHide: PropTypes.bool,
     wrapper: PropTypes.string,
+    bodyMode: PropTypes.bool,
+    possibleCustomEvents: PropTypes.string,
+    possibleCustomEventsOff: PropTypes.string,
     clickable: PropTypes.bool
   };
 
@@ -93,6 +98,8 @@ class ReactTooltip extends React.Component {
       ariaProps: parseAria(props), // aria- and role attributes
       isEmptyTip: false,
       disable: false,
+      possibleCustomEvents: props.possibleCustomEvents || '',
+      possibleCustomEventsOff: props.possibleCustomEventsOff || '',
       originTooltip: null,
       isMultiline: false
     }
@@ -131,6 +138,7 @@ class ReactTooltip extends React.Component {
     if (insecure) {
       this.setStyleHeader() // Set the style to the <link>
     }
+
     this.bindListener() // Bind listener for tooltip
     this.bindWindowEvents(resizeHide) // Bind global event for static method
   }
@@ -206,25 +214,34 @@ class ReactTooltip extends React.Component {
     let targetArray = this.getTargetArray(id)
 
     targetArray.forEach(target => {
-      const isCaptureMode = this.isCapture(target)
-      const effect = this.getEffect(target)
       if (target.getAttribute('currentItem') === null) {
         target.setAttribute('currentItem', 'false')
       }
       this.unbindBasicListener(target)
-
       if (this.isCustomEvent(target)) {
-        this.customBindListener(target)
-        return
-      }
-
-      target.addEventListener('mouseenter', this.showTooltip, isCaptureMode)
-      if (effect === 'float') {
-        target.addEventListener('mousemove', this.updateTooltip, isCaptureMode)
+        this.customUnbindListener(target)
       }
-      target.addEventListener('mouseleave', this.hideTooltip, isCaptureMode)
     })
 
+    if (this.isBodyMode()) {
+      this.bindBodyListener(targetArray)
+    } else {
+      targetArray.forEach(target => {
+        const isCaptureMode = this.isCapture(target)
+        const effect = this.getEffect(target)
+        if (this.isCustomEvent(target)) {
+          this.customBindListener(target)
+          return
+        }
+
+        target.addEventListener('mouseenter', this.showTooltip, isCaptureMode)
+        if (effect === 'float') {
+          target.addEventListener('mousemove', this.updateTooltip, isCaptureMode)
+        }
+        target.addEventListener('mouseleave', this.hideTooltip, isCaptureMode)
+      })
+    }
+
     // Global event to hide tooltip
     if (globalEventOff) {
       window.removeEventListener(globalEventOff, this.hideTooltip)
@@ -240,11 +257,15 @@ class ReactTooltip extends React.Component {
    */
   unbindListener () {
     const {id, globalEventOff} = this.props
-    const targetArray = this.getTargetArray(id)
-    targetArray.forEach(target => {
-      this.unbindBasicListener(target)
-      if (this.isCustomEvent(target)) this.customUnbindListener(target)
-    })
+    if (this.isBodyMode()) {
+      this.unbindBodyListener()
+    } else {
+      const targetArray = this.getTargetArray(id)
+      targetArray.forEach(target => {
+        this.unbindBasicListener(target)
+        if (this.isCustomEvent(target)) this.customUnbindListener(target)
+      })
+    }
 
     if (globalEventOff) window.removeEventListener(globalEventOff, this.hideTooltip)
     this.unbindRemovalTracker()