fix/annoying-closing-of-trello-card (#16)

* Fix unexpected closing of trello card when clicking on bubble

* Have latest change at the top in changelog

CHANGELOG.md

@@ -1,62 +1,92 @@
 # Changelog
+
 All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+
 - Add support for starting/stopping a timer
 - Show hours as HH:MM or decimal in the Bubble, depending on setting in MOCO
 
-
-## [1.0.18] - 2019-03-23
-### Added
-- First release of version 1
-
-## [1.0.19] - 2019-03-26
-### Changed
-- Position Bubble in the bottom right by default
+## [1.1.5] - 2019-04-24
 
 ### Fixed
-- Set default value of subdomain to `__unset__` to prevent network error if it is empty
 
-## [1.0.20] - 2019-03-26
+- Unexpected closing of Trello card when clicking on Bubble
+
+## [1.1.4] - 2019-04-11
+
 ### Added
-- Add support for tags in description
 
-## [1.0.21] - 2019-03-26
-### Changed
-- Update README with example configuration and instructions for local installation
+- Show customer name in the project select box
 
-## [1.0.22] - 2019-03-28
-### Changed
-- Change the default value of subdomain to `unset` to have a well-formed URL.
-
-## [1.1.0] - 2019-03-30
-### Added
-- Read project identifier from Asana project title
-- Add support for meistertask.com
+## [1.1.3] - 2019-04-10
 
 ### Fixed
-- Link logo in modal to MOCO activities page
-- Set full url on service, including query params
 
-## [1.1.1] - 2019-04-01
-### Fixed
-- Discard projects with undefined identifier for preselecting
+- Read projected identifier in Asana's "My tasks"-view
 
 ## [1.1.2] - 2019-04-06
+
 ### Fixed
+
 - Allow production build without BUGSNAG_API_KEY
 - Hours entered in brackets must be non-billable
 
 ### Changed
+
 - Read project identifier also from card title in the meistertask service
 
-## [1.1.3] - 2019-04-10
-### Fixed
-- Read projected identifier in Asana's "My tasks"-view
+## [1.1.1] - 2019-04-01
+
+### Fixed
+
+- Discard projects with undefined identifier for preselecting
+
+## [1.1.0] - 2019-03-30
 
-## [1.1.4] - 2019-04-11
 ### Added
-- Show customer name in the project select box
+
+- Read project identifier from Asana project title
+- Add support for meistertask.com
+
+### Fixed
+
+- Link logo in modal to MOCO activities page
+- Set full url on service, including query params
+
+## [1.0.22] - 2019-03-28
+
+### Changed
+
+- Change the default value of subdomain to `unset` to have a well-formed URL.
+
+## [1.0.21] - 2019-03-26
+
+### Changed
+
+- Update README with example configuration and instructions for local installation
+
+## [1.0.20] - 2019-03-26
+
+### Added
+
+- Add support for tags in description
+
+## [1.0.19] - 2019-03-26
+
+### Changed
+
+- Position Bubble in the bottom right by default
+
+### Fixed
+
+- Set default value of subdomain to `__unset__` to prevent network error if it is empty
+
+## [1.0.18] - 2019-03-23
+
+### Added
+
+- First release of version 1

package.json

@@ -1,7 +1,7 @@
 {
   "name": "moco-browser-extensions",
   "description": "Browser plugin for MOCO",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "license": "MIT",
   "scripts": {
     "start": "yarn start:chrome",

src/js/components/Bubble.js

@@ -12,11 +12,11 @@ const Bubble = ({ bookedHours }) => (
 )
 
 Bubble.propTypes = {
-  bookedHours: PropTypes.number
+  bookedHours: PropTypes.number,
 }
 
 Bubble.defaultProps = {
-  bookedHours: 0
+  bookedHours: 0,
 }
 
 export default Bubble

src/js/content.js

@@ -15,8 +15,15 @@ const findService = createServiceFinder(remoteServices)(document)
 chrome.runtime.onConnect.addListener(function(port) {
   const messenger = new ContentMessenger(port)
 
+  function clickHandler(event) {
+    if (event.target.closest(".moco-bx-bubble")) {
+      event.stopPropagation()
+      messenger.postMessage({ type: "togglePopup" })
+    }
+  }
   port.onDisconnect.addListener(() => {
     messenger.stop()
+    document.removeEventListener("click", clickHandler, true)
   })
 
   function updateBubble({ service, bookedHours } = {}) {
@@ -24,6 +31,7 @@ chrome.runtime.onConnect.addListener(function(port) {
       const domRoot = document.createElement("div")
       domRoot.setAttribute("id", "moco-bx-root")
       document.body.appendChild(domRoot)
+      document.addEventListener("click", clickHandler, true)
     }
 
     ReactDOM.render(
@@ -40,21 +48,14 @@ chrome.runtime.onConnect.addListener(function(port) {
             service &&
             // eslint-disable-next-line react/display-name
             (props => (
-              <animated.div
-                className="moco-bx-bubble"
-                style={{ ...props, ...service.position }}
-                onClick={event => {
-                  event.stopPropagation()
-                  messenger.postMessage({ type: "togglePopup" })
-                }}
-              >
+              <animated.div className="moco-bx-bubble" style={{ ...props, ...service.position }}>
                 <Bubble key={service.url} bookedHours={bookedHours} />
               </animated.div>
             ))
           }
         </Transition>
       </ErrorBoundary>,
-      document.getElementById("moco-bx-root")
+      document.getElementById("moco-bx-root"),
     )
   }
 
@@ -69,7 +70,7 @@ chrome.runtime.onConnect.addListener(function(port) {
       <ErrorBoundary>
         <Popup ref={popupRef} {...payload} onRequestClose={closePopup} />
       </ErrorBoundary>,
-      document.getElementById("moco-bx-popup-root")
+      document.getElementById("moco-bx-popup-root"),
     )
   }
 
@@ -86,7 +87,7 @@ chrome.runtime.onConnect.addListener(function(port) {
     const service = findService(window.location.href)
     messenger.postMessage({
       type: "newService",
-      payload: { isOpen: !!popupRef.current, service }
+      payload: { isOpen: !!popupRef.current, service },
     })
   })