Only target non-active buttons with Greasemonkey

Question

I'm trying to put together a short Greasemonkey script for the site Lift.do that will click all my connections' "Prop" buttons. These function like the 'like' button on Facebook - you can turn them on and off.

The problem is, when reloading the page, the script will deactivate buttons it activated previously. So how do I modify the script to only target non-active "Prop" buttons?

I used Brock Adams' tutorial on this page as a guide - Choosing and activating the right controls on an AJAX-driven site - and in fact most everything below is a direct copy/paste from info I got from answers to StackExchange questions.

// ==UserScript==
// @name        Lift Propper
// @namespace   https://lift.do/app/activity
// @description Props friends' lifts automatically
// @include     https://lift.do/app/activity
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// @version     1
// @grant       none
// ==/UserScript==

waitForKeyElements ("a.action-button", triggerMostButtons);

function triggerMostButtons (jNode) {

    triggerMouseEvent (jNode[0], "mouseover");
    triggerMouseEvent (jNode[0], "mousedown");
    triggerMouseEvent (jNode[0], "click"); //only needs click event, I think
    triggerMouseEvent (jNode[0], "mouseup");
}

function triggerMouseEvent (node, eventType) {
    var clickEvent = document.createEvent('MouseEvents');
    clickEvent.initEvent (eventType, true, true);
    node.dispatchEvent (clickEvent);
}

I copied the URL's source and put it up here: http://pastebin.com/mfF8tbdC , although I don't know how much help that is because the content of the activity feed looks like it's coming in via AJAX.

The URL I'm trying to work on is https://lift.do/app/activity , but that's tied to my specific account, of course.

Here's the html of the node I'm targeting (from firebug):

<a class="action-button prop-button" ng-class="{active: item.propId}" ng-click="prop(item.id, item.propId)" ng-show="item.proppable"></a>

And here's the same button in the active state:

<a class="action-button prop-button active" ng-class="{active: item.propId}" ng-click="prop(item.id, item.propId)" ng-show="item.proppable"></a>

These two have the same CSS Path. So how do I, using waitForKeyElements, distinguish between the two? How to target only non-active Prop buttons?

htxryan · Accepted Answer · 2013-08-24T20:20:38.737

1

Try this:

waitForKeyElements ("a.action-button:not(.active)", triggerMostButtons);

The first parameter here works like a jquery selector. It finds:

"a" tags (a)
with a class of "action-button" (.action-button)
without a class of "active" (:not(.active))

Note that the "." character is CSS notation for a class identifier.

Here's the jquery reference for "not": http://api.jquery.com/not-selector/

edited Aug 24 '13 at 20:20

answered Aug 24 '13 at 19:32

htxryan

2,871
2
21
21

Cool, it worked! I understand the javascript :not element works...can you flesh out the background of .active? Does that distinguish between css states? Why wouldn't firebug's css path distinguish between the two? – NickG Aug 24 '13 at 19:53
Added further explanation. Not sure about firebug's issue specifically. – htxryan Aug 24 '13 at 20:15
Firebug's ***Copy CSS Path*** tool only shows one class, even if there are more. It is a bit annoying, and probably worth a bug-report/feature-request, but I always inspect the source anyway. – Brock Adams Aug 24 '13 at 22:27

Only target non-active buttons with Greasemonkey

1 Answers1