fixing issue with IE11

LICENSE

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016 Jason Salzman
+Copyright (c) 2016-2017 Jason Salzman
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -88,4 +88,4 @@ The examples are hosted within the docs folder and are ran in the simple add tha
 
 ## License
 
-Copyright (c) 2016 Jason Salzman. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.
+Copyright (c) 2016-2017 Jason Salzman. Licensed under MIT license, see [LICENSE](LICENSE) for the full license.

package.json

@@ -2,7 +2,7 @@
   "author": "Jason Salzman",
   "name": "react-add-to-calendar",
   "description": "A simple and reusable add to calendar button component for React",
-  "version": "0.0.6",
+  "version": "0.0.7",
   "license": "MIT",
   "homepage": "https://github.com/jasonsalzman/react-add-to-calendar",
   "repository": {

src/ReactAddToCalendar.js

@@ -1,24 +1,22 @@
-import React, {
+import React, {Component} from 'react';
-	Component,
-} from 'react';
 
 import helpersClass from './helpers';
 const helpers = new helpersClass();
 
 export default class ReactAddToCalendar extends React.Component {
-	constructor(props) {
+    constructor(props) {
-		super(props);
+        super(props);
 
-		this.state = {
+        this.state = {
-			optionsOpen: false,
+            optionsOpen: false,
             isCrappyIE: false
-		};
+        };
 
-		this.toggleCalendarDropdown = this.toggleCalendarDropdown.bind(this);
+        this.toggleCalendarDropdown = this.toggleCalendarDropdown.bind(this);
-		this.handleDropdownLinkClick = this.handleDropdownLinkClick.bind(this);
+        this.handleDropdownLinkClick = this.handleDropdownLinkClick.bind(this);
-	}
+    }
 
-	componentWillMount() {
+    componentWillMount() {
         let isCrappyIE = false;
         if (typeof window !== 'undefined' && window.navigator.msSaveOrOpenBlob && window.Blob) {
             isCrappyIE = true;
@@ -28,13 +26,13 @@ export default class ReactAddToCalendar extends React.Component {
     }
 
     toggleCalendarDropdown() {
-    	let showOptions = !this.state.optionsOpen;
+        let showOptions = !this.state.optionsOpen;
 
         if (showOptions) {
-			document.addEventListener('click', this.toggleCalendarDropdown, false);
+            document.addEventListener('click', this.toggleCalendarDropdown, false);
-		} else {
+        } else {
-			document.removeEventListener('click', this.toggleCalendarDropdown);
+            document.removeEventListener('click', this.toggleCalendarDropdown);
-		}
+        }
 
         this.setState({optionsOpen: showOptions});
     }
@@ -43,8 +41,7 @@ export default class ReactAddToCalendar extends React.Component {
         e.preventDefault();
         let url = e.currentTarget.getAttribute('href');
 
-        if (this.state.isCrappyIE && (e.currentTarget.getAttribute('class') === 'ical-link' ||
+        if (this.state.isCrappyIE) {
-            e.currentTarget.getAttribute('class') === 'outlook-calendar-link')) {
             let blob = new Blob([url], {type: 'text/calendar'});
             window.navigator.msSaveOrOpenBlob(blob, 'download.ics');
         } else {
@@ -63,15 +60,15 @@ export default class ReactAddToCalendar extends React.Component {
 
             let icon = null;
             if (self.props.displayItemIcons) {
-                let currentIcon = (currentItem === 'outlook') ? 'windows' : currentItem;
+                let currentIcon = (currentItem === 'outlook')
+                    ? 'windows'
+                    : currentItem;
                 icon = <i className={'fa fa-' + currentIcon}/>;
             }
 
             return (
                 <li key={helpers.getRandomKey()}>
-                    <a className={currentItem + '-link'} onClick={self.handleDropdownLinkClick}
+                    <a className={currentItem + '-link'} onClick={self.handleDropdownLinkClick} href={helpers.buildUrl(self.props.event, currentItem, self.state.isCrappyIE)} target="_blank">
-                        href={helpers.buildUrl(self.props.event, currentItem, self.state.isCrappyIE)}
-                        target="_blank">
                         {icon}
                         {currentLabel}</a>
                 </li>
@@ -97,20 +94,22 @@ export default class ReactAddToCalendar extends React.Component {
             let buttonIconClass = 'react-add-to-calendar__icon--' + iconPlacement + ' fa fa-';
 
             if (template[0] === 'caret') {
-                buttonIconClass += (this.state.optionsOpen) ? 'caret-up' : 'caret-down';
+                buttonIconClass += (this.state.optionsOpen)
+                    ? 'caret-up'
+                    : 'caret-down';
             } else {
                 buttonIconClass += template[0];
             }
 
             buttonIcon = <i className={buttonIconClass}/>;
-            buttonLabel = (iconPlacement === 'right') ?
+            buttonLabel = (iconPlacement === 'right')
-                (
+                ? (
                     <span>
                         {buttonLabel + ' '}
                         {buttonIcon}
                     </span>
-                ) :
+                )
-                (
+                : (
                     <span>
                         {buttonIcon}
                         {' ' + buttonLabel}
@@ -118,18 +117,19 @@ export default class ReactAddToCalendar extends React.Component {
                 );
         }
 
-        let buttonClass = (this.state.optionsOpen) ? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen : this.props.buttonClassClosed;
+        let buttonClass = (this.state.optionsOpen)
+            ? this.props.buttonClassClosed + ' ' + this.props.buttonClassOpen
+            : this.props.buttonClassClosed;
 
         return (
             <div className={this.props.buttonWrapperClass}>
-                <a className={buttonClass}
+                <a className={buttonClass} onClick={this.toggleCalendarDropdown}>{buttonLabel}</a>
-                    onClick={this.toggleCalendarDropdown}>{buttonLabel}</a>
             </div>
         );
     }
 
-	render() {
+    render() {
-		let options = null;
+        let options = null;
         if (this.state.optionsOpen) {
             options = this.renderDropdown();
         }
@@ -145,50 +145,51 @@ export default class ReactAddToCalendar extends React.Component {
                 {options}
             </div>
         );
-	}
+    }
 }
 
 ReactAddToCalendar.displayName = 'Add To Calendar';
 
 ReactAddToCalendar.propTypes = {
-	buttonClassClosed: React.PropTypes.string,
+    buttonClassClosed: React.PropTypes.string,
-	buttonClassOpen: React.PropTypes.string,
+    buttonClassOpen: React.PropTypes.string,
-	buttonLabel: React.PropTypes.string,
+    buttonLabel: React.PropTypes.string,
     buttonTemplate: React.PropTypes.object,
-	buttonWrapperClass: React.PropTypes.string,
+    buttonWrapperClass: React.PropTypes.string,
-	displayItemIcons: React.PropTypes.bool,
+    displayItemIcons: React.PropTypes.bool,
-	dropdownClass: React.PropTypes.string,
+    dropdownClass: React.PropTypes.string,
-	event: React.PropTypes.shape({
+    event: React.PropTypes.shape({title: React.PropTypes.string, description: React.PropTypes.string, location: React.PropTypes.string, startTime: React.PropTypes.string, endTime: React.PropTypes.string}).isRequired,
-		title: React.PropTypes.string,
-		description: React.PropTypes.string,
-		location: React.PropTypes.string,
-		startTime: React.PropTypes.string,
-		endTime: React.PropTypes.string
-	}).isRequired,
     listItems: React.PropTypes.arrayOf(React.PropTypes.object),
-	rootClass: React.PropTypes.string
+    rootClass: React.PropTypes.string
 };
 
 ReactAddToCalendar.defaultProps = {
-	buttonClassClosed: 'react-add-to-calendar__button',
+    buttonClassClosed: 'react-add-to-calendar__button',
-	buttonClassOpen: 'react-add-to-calendar__button--light',
+    buttonClassOpen: 'react-add-to-calendar__button--light',
-	buttonLabel: 'Add to My Calendar',
+    buttonLabel: 'Add to My Calendar',
-    buttonTemplate: { caret: 'right' },
+    buttonTemplate: {
-	buttonWrapperClass: 'react-add-to-calendar__wrapper',
+        caret: 'right'
-	displayItemIcons: true,
+    },
-	dropdownClass: 'react-add-to-calendar__dropdown',
+    buttonWrapperClass: 'react-add-to-calendar__wrapper',
-	event: {
+    displayItemIcons: true,
-		title: 'Sample Event',
+    dropdownClass: 'react-add-to-calendar__dropdown',
-		description: 'This is the sample event provided as an example only',
+    event: {
-		location: 'Portland, OR',
+        title: 'Sample Event',
-		startTime: '2016-09-16T20:15:00-04:00',
+        description: 'This is the sample event provided as an example only',
-		endTime: '2016-09-16T21:45:00-04:00'
+        location: 'Portland, OR',
-	},
+        startTime: '2016-09-16T20:15:00-04:00',
+        endTime: '2016-09-16T21:45:00-04:00'
+    },
     listItems: [
-        { apple: 'Apple Calendar' },
+        {
-        { google: 'Google' },
+            apple: 'Apple Calendar'
-        { outlook: 'Outlook' },
+        }, {
-        { yahoo: 'Yahoo' }
+            google: 'Google'
+        }, {
+            outlook: 'Outlook'
+        }, {
+            yahoo: 'Yahoo'
+        }
     ],
-	rootClass: 'react-add-to-calendar'
+    rootClass: 'react-add-to-calendar'
 };