Merge pull request #6 from hundertzehn/feature/meistertask

Add support for Meistertask

CHANGELOG.md

@@ -31,3 +31,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.0.22] - 2019-03-28
 ### Changed
 - Change the default value of subdomain to `unset` to have a well-formed URL.
+
+## [1.0.23] - 2019-03-28
+### Added
+- Add support for meistertask.com

package.json

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

src/css/content.scss

@@ -4,6 +4,7 @@
 #moco-bx-root {
   font-family: $font-family;
   color: $font-color;
+  pointer-events: all;
 
   .moco-bx-bubble {
     box-sizing: content-box;
@@ -48,6 +49,7 @@
 #moco-bx-popup-root {
   font-family: $font-family;
   color: $font-color;
+  pointer-events: all;
 
   iframe {
     border: 0;
@@ -58,16 +60,15 @@
   }
 
   .moco-bx-popup {
-    position: fixed; /* Stay in place */
-    z-index: 2000; /* Sit on top */
-    padding-top: 100px; /* Location of the box */
+    position: fixed;
+    z-index: 2000;
+    padding-top: 100px;
     left: 0;
     top: 0;
-    width: 100%; /* Full width */
-    height: 100%; /* Full height */
-    overflow: auto; /* Enable scroll if needed */
-    background-color: rgb(0, 0, 0); /* Fallback color */
-    background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.4);
 
     .moco-bx-popup-content {
       background-color: white;

src/js/components/Bubble.js

@@ -2,8 +2,8 @@ import React from "react"
 import PropTypes from "prop-types"
 import logoUrl from "images/logo.png"
 
-const Bubble = ({ bookedHours, onClick }) => (
-  <div className="moco-bx-bubble-inner" onClick={onClick}>
+const Bubble = ({ bookedHours }) => (
+  <div className="moco-bx-bubble-inner">
     <img className="moco-bx-logo" src={chrome.extension.getURL(logoUrl)} />
     {bookedHours > 0 ? (
       <span className="moco-bx-booked-hours">{bookedHours.toFixed(2)}</span>
@@ -12,8 +12,7 @@ const Bubble = ({ bookedHours, onClick }) => (
 )
 
 Bubble.propTypes = {
-  bookedHours: PropTypes.number,
-  onClick: PropTypes.func.isRequired
+  bookedHours: PropTypes.number
 }
 
 Bubble.defaultProps = {

src/js/content.js

@@ -43,15 +43,12 @@ chrome.runtime.onConnect.addListener(function(port) {
               <animated.div
                 className="moco-bx-bubble"
                 style={{ ...props, ...service.position }}
+                onClick={event => {
+                  event.stopPropagation()
+                  messenger.postMessage({ type: "togglePopup" })
+                }}
               >
-                <Bubble
-                  key={service.url}
-                  bookedHours={bookedHours}
-                  onClick={event => {
-                    event.stopPropagation()
-                    messenger.postMessage({ type: "togglePopup" })
-                  }}
-                />
+                <Bubble key={service.url} bookedHours={bookedHours} />
               </animated.div>
             ))
           }

src/js/remoteServices.js

@@ -1,3 +1,5 @@
+const projectRegex = /\[(\d+)\]/
+
 export default {
   asana: {
     name: "asana",
@@ -29,7 +31,7 @@ export default {
       const match = document
         .querySelector(".js-issue-title")
         ?.textContent.trim()
-        ?.match(/^\[(\d+)\]/)
+        ?.match(projectRegex)
       return match && match[1]
     }
   },
@@ -68,6 +70,24 @@ export default {
     }
   },
 
+  meistertask: {
+    name: "meistertask",
+    urlPatterns: ["https\\://www.meistertask.com/app/task/:id/:slug"],
+    description: document => {
+      const json =
+        document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
+      const data = JSON.parse(json)
+      return data.taskName
+    },
+    projectId: document => {
+      const json =
+        document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
+      const data = JSON.parse(json)
+      const match = data.projectName?.match(projectRegex)
+      return match && match[1]
+    }
+  },
+
   trello: {
     name: "trello",
     urlPatterns: ["https\\://trello.com/c/:id/:title"],