diff --git a/TogglLibrary.js b/TogglLibrary.js index a6c699da6205c491f4bc78253174628dd4a8152f..0c9ed7cdf628e6dc2c88a8466d77d4241e3b4d1c 100644 --- a/TogglLibrary.js +++ b/TogglLibrary.js @@ -16,6 +16,7 @@ function TogglButtonGM(selector, renderer) { $newApiUrl = "https://www.toggl.com/api/v8", $legacyApiUrl = "https://new.toggl.com/api/v8", $triedAlternative = false, + $addedDynamicListener = false, $api_token = null, $default_wid = null, $clientMap = {}, @@ -119,34 +120,48 @@ function TogglButtonGM(selector, renderer) { if (selector == null) { return; } - var i, len, elems = document.querySelectorAll(selector); + var i, len, elems = document.querySelectorAll(selector + ':not(.toggl)'); for (i = 0, len = elems.length; i < len; i += 1) { elems[i].classList.add('toggl'); $instances[i] = new TogglButtonGMInstance(renderer(elems[i])); } - document.addEventListener('TogglButtonGMUpdateStatus', function() { - GM_xmlhttpRequest({ - method: "GET", - url: $activeApiUrl + "/time_entries/current", - headers: { - "Authorization": "Basic " + btoa($api_token + ':api_token') - }, - onload: function (result) { - if (result.status === 200) { - var resp = JSON.parse(result.responseText), - data = resp.data || false; - if (data) { - for (i in $instances) { - $instances[i].checkCurrentLinkStatus(data); + + if (!$addedDynamicListener) { + $addedDynamicListener = true; + + document.addEventListener('TogglButtonGMUpdateStatus', function() { + GM_xmlhttpRequest({ + method: "GET", + url: $activeApiUrl + "/time_entries/current", + headers: { + "Authorization": "Basic " + btoa($api_token + ':api_token') + }, + onload: function (result) { + if (result.status === 200) { + var resp = JSON.parse(result.responseText), + data = resp.data || false; + if (data) { + for (i in $instances) { + $instances[i].checkCurrentLinkStatus(data); + } } } } - } + }); }); - }); - window.addEventListener('focus', function() { - document.dispatchEvent(new CustomEvent('TogglButtonGMUpdateStatus')); - }); + + window.addEventListener('focus', function() { + document.dispatchEvent(new CustomEvent('TogglButtonGMUpdateStatus')); + }); + + if (selector !== 'body') { + document.body.addEventListener('DOMSubtreeModified', function () { + setTimeout(function () { + render(selector, renderer); + }, 1000); + }); + } + } } this.clickLinks = function() { @@ -341,13 +356,26 @@ function TogglButtonGM(selector, renderer) { document.querySelector('body').classList.add('toggl-button-available'); if (params.targetSelectors == undefined) { - var wrapper = document.createElement('div'), + var wrapper, + existingWrapper = document.querySelectorAll('#toggl-button-wrapper'), content = createTag('div', 'content'); - wrapper.id = 'toggl-button-wrapper'; content.appendChild($link); content.appendChild(createProjectSelect()); - wrapper.appendChild(content); - document.querySelector('body').appendChild(wrapper); + if (existingWrapper.length > 0) { + console.log('Re-use existing toggl'); + wrapper = existingWrapper[0]; + while (wrapper.firstChild) { + wrapper.removeChild(wrapper.firstChild); + } + wrapper.appendChild(content); + } + else { + console.log('Create new toggl'); + wrapper = document.createElement('div'); + wrapper.id = 'toggl-button-wrapper'; + wrapper.appendChild(content); + document.querySelector('body').appendChild(wrapper); + } } else { var elem = params.targetSelectors.context || document; if (params.targetSelectors.link != undefined) {