Seperate and improve custom events

Author: wwayne

Makefile

@@ -26,15 +26,23 @@ genStand:
 	@$(NODE_BIN)/browserify -t babelify -t browserify-shim $(SRC)/index.js --standalone ReactTooltip | $(NODE_BIN)/uglifyjs > $(STANDALONE)/react-tooltip.min.js
 	@cp $(DIST)/style.js $(STANDALONE)/style.js
 
+devJS:
+	@$(NODE_BIN)/watchify -t babelify $(EXAMPLE_SRC)/index.js -o $(EXAMPLE_DIST)/index.js -dv
+
+devCSS:
+	@$(NODE_BIN)/node-sass $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
+	@$(NODE_BIN)/node-sass -w $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
+
+devServer:
+	@echo Listening 8888...
+	@$(NODE_BIN)/http-server example -p 8888 -s
+
 dev:
 	@echo starting dev server...
 	@rm -rf $(EXAMPLE_DIST)
 	@mkdir -p $(EXAMPLE_DIST)
 	@make convertCSS
-	@$(NODE_BIN)/watchify -t babelify $(EXAMPLE_SRC)/index.js -o $(EXAMPLE_DIST)/index.js -dv
-	@$(NODE_BIN)/node-sass $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
-	@$(NODE_BIN)/node-sass -w $(EXAMPLE_SRC)/index.scss $(EXAMPLE_DIST)/index.css
-	@$(NODE_BIN)/http-server example -p 8888 -s -o
+	@$(NODE_BIN)/concurrently --kill-others "make devJS" "make devCSS" "make devServer"
 
 deployJS:
 	@echo Generating deploy JS files...
@@ -56,4 +64,4 @@ deploy: lint
 	@make genStand
 	@echo success!
 
-.PHONY: lint convertCSS genStand dev deployJS deployCSS deploy
+.PHONY: lint convertCSS genStand devJS devCSS devServer dev deployJS deployCSS deploy

example/src/index.js

@@ -2,7 +2,7 @@
 
 import React from 'react'
 import {render} from 'react-dom'
-import ReactTooltip from '../../src/index'
+import ReactTooltip from '../../src'
 
 const Test = React.createClass({
 
@@ -152,14 +152,23 @@ const Test = React.createClass({
 
             <div className="example-jsx">
               <div className="side">
-                <a data-for='customer-event' data-tip='customer event' data-event='click' data-type='info'>( •̀д•́)</a>
+                <a data-for='customer-event' data-tip='customer show' data-event='click'>( •̀д•́)</a>
                 <ReactTooltip id='customer-event' />
               </div>
+
+              <div className="side">
+                <a data-for='customer-off-event' data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>
+                <ReactTooltip id='customer-off-event'/>
+              </div>
             </div>
             <br />
             <pre className='example-pre'>
               <div>
-                <p>{"<a data-tip='customer event' data-event='click' data-type='info'>( •̀д•́)</a>\n" +
+                <p>{"<a data-tip='customer show' data-event='click'>( •̀д•́)</a>\n" +
+                "<ReactTooltip />"}</p>
+              </div>
+              <div>
+                <p>{"<a data-tip='custom show and hide' data-event='click' data-event-off='dblclick'>( •̀д•́)</a>\n" +
                 "<ReactTooltip/>"}</p>
               </div>
             </pre>

package.json

@@ -59,6 +59,7 @@
     "chai": "^3.5.0",
     "chai-enzyme": "^0.5.0",
     "cheerio": "^0.20.0",
+    "concurrently": "^2.1.0",
     "enzyme": "^2.3.0",
     "http-server": "^0.8.0",
     "jsdom": "^9.2.1",

src/decorators/customEvent.js

@@ -0,0 +1,64 @@
+/**
+ * Custom events to control showing and hiding of tooltip
+ *
+ * @attributes
+ * - `event` {String}
+ * - `eventOff` {String}
+ */
+
+const checkStatus = function (dataEventOff, e) {
+  const {show} = this.state
+  const dataIsCapture = e.currentTarget.getAttribute('data-iscapture')
+  const isCapture = dataIsCapture && dataIsCapture === 'true' || this.state.isCapture
+  const currentItem = e.currentTarget.getAttribute('currentItem')
+
+  if (!isCapture) e.stopPropagation()
+  if (show && currentItem === 'true') {
+    if (!dataEventOff) this.hideTooltip(e)
+  } else {
+    e.currentTarget.setAttribute('currentItem', 'true')
+    setUntargetItems(e.currentTarget, this.getTargetArray())
+    this.showTooltip(e)
+  }
+}
+
+const setUntargetItems = function (currentTarget, targetArray) {
+  for (let i = 0; i < targetArray.length; i++) {
+    if (currentTarget !== targetArray[i]) {
+      targetArray[i].setAttribute('currentItem', 'false')
+    } else {
+      targetArray[i].setAttribute('currentItem', 'true')
+    }
+  }
+}
+
+export default function (target) {
+  target.prototype.isCustomEvent = function (ele) {
+    const {event} = this.state
+    return event || ele.getAttribute('data-event')
+  }
+
+  /* Bind listener for custom event */
+  target.prototype.customBindListener = function (ele) {
+    const {event, eventOff} = this.state
+    const dataEvent = event || ele.getAttribute('data-event')
+    const dataEventOff = eventOff || ele.getAttribute('data-event-off')
+
+    ele.removeEventListener(dataEvent, checkStatus)
+    ele.addEventListener(dataEvent, checkStatus.bind(this, dataEventOff), false)
+    if (dataEventOff) {
+      ele.removeEventListener(dataEventOff, this.hideTooltip)
+      ele.addEventListener(dataEventOff, ::this.hideTooltip, false)
+    }
+  }
+
+  /* Unbind listener for custom event */
+  target.prototype.customUnbindListener = function (ele) {
+    const {event, eventOff} = this.state
+    const dataEvent = event || ele.getAttribute('data-event')
+    const dataEventOff = eventOff || ele.getAttribute('data-event-off')
+
+    ele.removeEventListener(dataEvent, checkStatus)
+    if (dataEventOff) ele.removeEventListener(dataEventOff, this.hideTooltip)
+  }
+}