gboudreau / sabconnectplusplus

SABnzbd extension for Google Chrome
GNU General Public License v3.0
77 stars 44 forks source link

Integrating with website #127

Open ghost opened 9 years ago

ghost commented 9 years ago

I want my users to be able to use Sabconnect++ and I'm running Newznab with a custom theme.

Can I decide where the Sab icon should show by placing some sort of HTML on the page? A HTML comment for example or an empty div?

ppslim commented 9 years ago

It depends which script you are viewing as to where it is placed. Do have one in mind?

In list view: The link is always placed to the immediately before the text title link. You could move it by relocating the link with class 'title' to be a child of location you want the icon.

ghost commented 9 years ago

Roger thanks. I'm writing a new theme at the moment so when I figured out how to display the releases I will have a go with the title class.

ppslim commented 9 years ago

Ahh, that makes a little more sense. It's complex and done based on the required matches.

So there are multiple views, each with their own locators.

List view: First we need to obtain each row. This is matched by locating the parent of a 'td' element. The 'td' element as a class of 'check'.

From this, we need the href of the download URL. The search is made within the 'tr' above, by looking for an 'a' element, whos parent as a class 'icon_nzb'

Armed with that href, we then inject the icon. This is done by finding an 'a' element that has class 'title' and pre-pending a child to it's parent (i.e. adding it before the 'a' element).

<tr class="" id="guidad8918f">
    <td class="check"><!-- This cell is needed to obtain the table row -->
        <input id="chkad8918f" type="checkbox" class="nzb_check" value="ad8918f"></td>
    <td class="item">
        <label for="chkad8918f"><!--- Inject icon here --><a class="title rel" title="View details" href="/details/ad8918f">Title of item</a></label>
        <div class="resextra"><div class="btns"></div></div>
    </td>
    <td class="less"><a title="Browse ABC > EF" href="/browse?t=9876" class="cat">ABC &gt; EF</a><br />
        <a title="Browse abc.efg.hijklmnop" href="/browse?g=abc.efg.hijklmnop">abc.efg.hijklmnop</a></td>
    <td class="less mid" title="2015-03-26 21:31:43">1 Hour</td>
    <td class="less right">1.23 GB<br />100%</td>
    <td class="less mid"><a class="files" title="View file list" href="/filelist/ad8918f">123</a>
        <div class="rarfilelist"><img src="/templates/nzbsin_light/images/icons/magnifier.png" alt="ad8918f" class="tooltip"></div></td>
    <td class="less nowrap"><a class="stats" alt="ad8918f" href="/details/ad8918f/#nzb-info-comments">0 cmts</a><br />1 grab</td>
    <td class="icons"><div class="icon icon_none" style="opacity: 0.699999988079071;"></div>
        <div class="icon icon_nzb" style="opacity: 0.699999988079071;"><a title="Download Nzb" href="/getnzb/ad8918f/">&nbsp;</a></div><!-- This row is needed as with find the a tag, whos parent (div) has class icon_nzb -->
        <div class="icon icon_cart" title="Add to Cart" style="opacity: 0.699999988079071;"></div></td>
</tr>

Are you looking to theme the other pages?

ghost commented 9 years ago

I'm writing a whole new template for my Newznab install based on Bootstrap 3 and lot's of jquery magic.

ghost commented 9 years ago

How would I go about adding it to these pages. I added the check and title classes. And the icon_nzb class to the parent of the download . But it doesnt show up on the /browse pages.

https://www.nzbfinder.ws/browse?t=2040

https://www.nzbfinder.ws/movies?t=2040

https://www.nzbfinder.ws/music?t=3010

How about I just add a empty or whatever with id="sabconnectplusplus_icon"?