Why is my GreaseMonkey function unexpectedly being called multiple times?
- by Ryan Fisher
I am missing something, I'm not sure why the function 'addIcon()' is being called multiple times.
Given:
<div class="ticketpostcontainer">Some text</div>
<div class="ticketpostcontainer">Some text</div>
<div class="ticketpostcontainer">Some text</div>
Using the utility function waitForKeyElements, the result is that each div element receives my "collapse icon" three times:
// ==UserScript==
// @name Collapse Kayako Response
// @grant Sandbox
// @namespace http://my.chiromatrixbase.com/fisher.chiromatrix.com/collaps_div.js
// @include http://imatrixsupport.com/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
// ==/UserScript==
/*jslint plusplus: true, undef: true, sloppy: true, vars: true, white: true, indent: 2, maxerr: 30 */
//Enable or disable GreaseMonkey function, GM_log
var GM_Debug = 1;
if (!GM_Debug) {
var GM_log = function () {};
}
//If FireBig is active, send GM log events to FB.
if (unsafeWindow.console && GM_Debug) {
var GM_log = unsafeWindow.console.log;
}
GM_log("Running collapse kayako response script");
//Don't run on frames or iframes.
if (window.top !== window.self) {
return;
}
waitForKeyElements(".ticketpostcontainer", addIcon);
function addIcon() {
var i, toCollapse = document.getElementsByClassName('ticketpostcontainer'), j = toCollapse.length;
GM_log("Number of elements to collapse: " + toCollapse.length);
for (i = 0; i < j; i++) {
var curElement = toCollapse[i];
var p = document.createElement('p');
var a = document.createElement('a');
var span = document.createElement('span');
styleLink(a);
styleParagraph(p);
styleSpan(span);
p.appendChild(a);
p.appendChild(span);
a.appendChild(document.createTextNode('-'));
span.appendChild(document.createTextNode(' Some text'));
a.addEventListener("click", toggle, false);
curElement.parentNode.insertBefore(p, curElement);
}
function toggle(e) {
if (this.firstChild.nodeValue === '-') {
this.parentNode.nextSibling.style.display = 'none';
this.firstChild.nodeValue = '+';
this.nextSibling.style.display = 'inline';
} else {
this.parentNode.nextSibling.style.display = 'block';
this.firstChild.nodeValue = '-';
this.nextSibling.style.display = 'none';
}
e.preventDefault();
}
function styleLink(a) {
a.href = '#';
a.style.fontWeight = 'bold';
a.style.background = '#F6F1E7';
a.style.border = '1px solid #cccccc';
a.style.color = '#B24C58';
a.style.textDecoration = 'none';
a.style.width = '15px';
a.style.height = '15px';
a.style.textAlign = 'center';
a.style.fontSize = '100%';
a.style.margin = '0 5px 5px 8px';
a.style.cssFloat = 'left';
a.style.display = 'block';
a.style.lineHeight = '13px';
}
function styleParagraph(p) {
p.style.margin = '0 0 0 0';
p.style.lineHeight = '16px';
p.style.clear = 'both';
p.style.height = '15px';
}
function styleSpan(span) {
span.style.display = 'none';
}
}
