Merge pull request #41 from coston/allow-html-href-if-human-interaction

Allow html href if human interaction

dist/obfuscate.js

@@ -89,15 +89,18 @@ function (_Component) {
   }, {
     key: "handleClick",
     value: function handleClick(event) {
-      var onClick = this.props.onClick;
-      event.preventDefault(); // Allow instantiator to provide an onClick method to be called
-      // before we change location (e.g. for analytics tracking)
+      var onClick = this.props.onClick; // If focused or hovered, this js will be skipped with preference for html
 
-      if (onClick && typeof onClick === 'function') {
-        onClick();
-      }
+      if (this.state.humanInteraction === false) {
+        event.preventDefault(); // Allow instantiator to provide an onClick method to be called
+        // before we change location (e.g. for analytics tracking)
+
+        if (onClick && typeof onClick === 'function') {
+          onClick();
+        }
 
-      window.location.href = this.createContactLink(this.props);
+        window.location.href = this.createContactLink(this.props);
+      }
     }
   }, {
     key: "handleCopiability",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-obfuscate",
-  "version": "3.4.0",
+  "version": "3.5.0-0",
   "description": "An intelligent React component to obfuscate any contact link",
   "main": "dist/obfuscate.js",
   "files": [

readme.md

@@ -70,20 +70,26 @@ export default () => (
 </p>
 ```
 
-## Options
-
-| Prop      | Type        | Argument     | Default      | Description                                                    |
-| --------- | ----------- | ------------ | ------------ | -------------------------------------------------------------- |
-| email     | `string`    | `<optional>` | `null`       | email address of the intended recipient                        |
-| tel       | `string`    | `<optional>` | `null`       | telephone number of the intended recipient                     |
-| sms       | `string`    | `<optional>` | `null`       | sms number of the intended recipient                           |
-| facetime  | `string`    | `<optional>` | `null`       | facetime address of the intended recipient                     |
-| href      | `string`    | `<optional>` | `null`       | Obfuscate any other URL type                                   |
-| headers   | `object`    | `<optional>` | `null`       | subject, cc, bcc, body, etc                                    |
-| obfuscate | `boolean`   | `<optional>` | `true`       | set to false to disable obfuscation                            |
-| linkText  | `string`    | `<optional>` | `obfuscated` | add custom pre-interaction href attribute placeholder text     |
-| element   | `string`    | `<optional>` | `'a'`        | custom element to render instead of an `a` tag                 |
-| onClick   | `function`  | `<optional>` | `null`       | called prior to setting location (e.g. for analytics tracking) |
+## Common Options
+
+| Prop     | Type     | Argument   | Default | Description                                  |
+| -------- | -------- | ---------- | ------- | -------------------------------------------- |
+| email    | `string` | `optional` | `null`  | email address of the intended recipient      |
+| headers  | `object` | `optional` | `null`  | subject, cc, bcc, body, etc                  |
+| tel      | `string` | `optional` | `null`  | telephone number of the intended recipient   |
+| sms      | `string` | `optional` | `null`  | sms number of the intended recipient         |
+| facetime | `string` | `optional` | `null`  | facetime address of the intended recipient   |
+| href     | `string` | `optional` | `null`  | Obfuscate any other URL type (e.g. WhatsApp) |
+
+## Uncommon Options
+
+| Prop      | Type       | Argument   | Default      | Description                                                    |
+| --------- | ---------- | ---------- | ------------ | -------------------------------------------------------------- |
+| linkText  | `string`   | `optional` | `obfuscated` | add custom pre-interaction href attribute placeholder text     |
+| obfuscate | `boolean`  | `optional` | `true`       | set to false to disable obfuscation                            |
+| element   | `string`   | `optional` | `'a'`        | use if you want to override the default `a` tag                |
+| onClick   | `function` | `optional` | `null`       | called prior to setting location (e.g. for analytics tracking) |
+
 
 ## Development
 

src/obfuscate.js

@@ -46,15 +46,18 @@ export default class Obfuscate extends Component {
   handleClick(event) {
     const { onClick } = this.props
 
-    event.preventDefault()
+    // If focused or hovered, this js will be skipped with preference for html
+    if (this.state.humanInteraction === false) {
+      event.preventDefault()
+
+      // Allow instantiator to provide an onClick method to be called
+      // before we change location (e.g. for analytics tracking)
+      if (onClick && typeof onClick === 'function') {
+        onClick()
+      }
 
-    // Allow instantiator to provide an onClick method to be called
-    // before we change location (e.g. for analytics tracking)
-    if (onClick && typeof onClick === 'function') {
-      onClick()
+      window.location.href = this.createContactLink(this.props)
     }
-
-    window.location.href = this.createContactLink(this.props)
   }
 
   handleCopiability() {

test/obfuscate.test.js

@@ -4,14 +4,15 @@ import Obfuscate from '../src/obfuscate.js'
 const testEmail = '[email protected]'
 const testTel = '205-454-1234'
 const testTelReveresed = '4321-454-502'
+const originalLocation = 'https://example.com/'
 
 
 describe('obfuscate', () => {
   beforeEach(() => {
     delete global.window.location
 
     global.window.location = {
-      href: new URL('https://example.com'),
+      href: new URL(originalLocation),
     }
   })
 
@@ -152,6 +153,15 @@ describe('obfuscate', () => {
     expect(wrapper.prop('href')).toEqual(`mailto:${testEmail}`)
   })
 
+   test('Human interaction disables onClick setting js location.href', () => {
+    const wrapper = shallow(
+      <Obfuscate facetime={testTel} />
+    )
+    wrapper.simulate('mouseover')
+        wrapper.simulate('click')
+    expect(global.window.location.href.toString()).toEqual(originalLocation)
+  })
+
   test('Return empty href link if child is an object and no link is provided', () => {
     const wrapper = shallow(
       <Obfuscate ><button>This is a child object</button></Obfuscate>