// ==UserScript==
// @name           Flickr - Go to User's Shots in this Group (Photo + User's Groups list Page)
// @version        1.2
// @description	   In the groups list of Photo page or the User's Groups Page, at each group name, Add an icon to go to user's shots posted in this group.
// @icon           https://external-content.duckduckgo.com/ip3/blog.flickr.net.ico
// @namespace      https://greasyfork.org/users/8
// @match          http*://*flickr.com/*
// @match          http*://www.flickr.com/photos/*
// @match          http*://www.flickr.com/people/*/groups/*  // Match user groups page
// @match          http*://www.flickr.com/groups/*
// @author         decembre
// @grant          none
// ==/UserScript==
(function() {
'use strict';
// Function to add buttons on user's photo page
function addButtons() {
const useridElement = document.querySelector('.sub-photo-container.centered-content .attribution-view a.avatar');
if (!useridElement) {
console.log('User ID element not found. Retrying...');
setTimeout(addButtons, 1000); // Retry after 1 second
return;
}
const useridValue = useridElement.getAttribute('data-person-nsid');
console.log('USERid trouvé :', useridValue);
const groupidElements = document.querySelectorAll('.sub-photo-contexts-view .sub-photo-context.sub-photo-context-groups .context-list li');
if (groupidElements.length === 0) {
console.log('No group elements found. Retrying...');
setTimeout(addButtons, 1000); // Retry after 1 second
return;
}
groupidElements.forEach(function(groupidElement, index) {
const groupidLink = groupidElement.querySelector('a');
if (groupidLink) {
const groupidValue = groupidLink.getAttribute('data-group-nsid');
if (groupidValue) {
const linkUrl = `https://www.flickr.com/groups/${groupidValue}/pool/${useridValue}/`;
const linkHtml = `<a href="${linkUrl}" class="GoToPool" style="display: inline-block; position: absolute; top: 0; right: 0; height: 15px; line-height: 15px; width: 15px; background-color: green; font-size: 10px; border-radius: 50%; text-align: center; padding: 1px; opacity: 0.5; transition: opacity 0.7s ease;" title="Voir les photos de l'utilisateur dans ce groupe">🔴</a>`;
// Check if the button already exists
const existingButton = groupidElement.querySelector('.GoToPool');
if (!existingButton) {
const linkElement = document.createElement('span');
linkElement.innerHTML = linkHtml;
groupidElement.appendChild(linkElement);
console.log('Lien inséré dans le DOM pour le pool #' + (index + 1));
}
} else {
console.log('Aucun attribut data-group-nsid trouvé dans l\'élément a');
}
} else {
console.log('No anchor element found in groupidElement.');
}
});
}
// Function to add buttons on Groups list page
function addButtonsToGroupsList() {
const useridElement = document.querySelector('.fluid.html-person-groups-page-view .fluid-magic-subnav-view .fluid-subnav-shim .fluid-subnav.with-overflow-menu .subnav-content.fluid-centered .subnav-items-container ul.links.extraitems li#about.link a');
if (!useridElement) {
console.log('User ID element not found on Groups list page. Retrying...');
setTimeout(addButtonsToGroupsList, 1000); // Retry after 1 second
return;
}
const useridValue = useridElement.getAttribute('href').split('/people/')[1].split('/')[0];
console.log('USERid trouvé sur la page des groupes :', useridValue);
const groupidElements = document.querySelectorAll('.fluid.html-person-groups-page-view .sortable-table-view:not(:empty):first-of-type .sortable-table-wrapper table.with-avatar tbody tr:not(.header) td.show-after-locked > span.avatar + a');
if (groupidElements.length === 0) {
console.log('No group elements found on Groups list page. Retrying...');
setTimeout(addButtonsToGroupsList, 1000);
return;
}
groupidElements.forEach(function(groupidElement, index) {
const groupidValue = groupidElement.getAttribute('href').split('/groups/')[1].split('/')[0];
if (groupidValue) {
const linkUrl = `https://www.flickr.com/groups/${groupidValue}/pool/${useridValue}/`;
const linkHtml = `<a href="${linkUrl}" class="GoToPool" style="display: inline-block; position: absolute; top: 0; right: 0; height: 15px; line-height: 15px; width: 15px; background-color: green; font-size: 10px; border-radius: 50%; text-align: center; padding: 1px; opacity: 0.5; transition: opacity 0.7s ease;" title="Voir les photos de l'utilisateur dans ce groupe">🔴</a>`;
// Check if the button already exists
const existingButton = groupidElement.parentElement.querySelector('.GoToPool');
if (!existingButton) {
const linkElement = document.createElement('span');
linkElement.innerHTML = linkHtml;
groupidElement.parentElement.appendChild(linkElement);
console.log('Lien inséré dans le DOM pour le groupe #' + (index + 1));
}
} else {
console.log('Aucun attribut data-group-nsid trouvé dans l\'élément a');
}
});
}
// Function to modify the URL of the "Back to group" button
function modifyBackToGroupUrl() {
var backToGroupButton = document.querySelector('.photo-content-upper-container .entry-type.do-not-evict[href^="/groups/"]');
if (backToGroupButton) {
var url = backToGroupButton.getAttribute('href');
var modifiedUrl = url.replace(/\|[^/]+/, '');
backToGroupButton.setAttribute('href', modifiedUrl);
console.log('URL du bouton "Back to group" modifiée :', modifiedUrl);
}
}
modifyBackToGroupUrl();
// Add style rules for the button hover effect
var style = document.createElement('style');
style.innerHTML = `
.GoToPool {
display: inline-block;
position: absolute;
top: 0;
right: 0;
height: 15px;
line-height: 15px;
width: 15px;
background-color: green;
font-size: 10px;
border-radius: 50%;
text-align: center;
padding: 1px;
opacity: 0.5;
transition: opacity 0.7s ease !important;
}
.GoToPool:hover {
font-size: 8px !important;
background-color: #b3ddb3 !important;
opacity: 1 !important;
transition: opacity 0.7s ease !important;
}
.GoToPool:visited {
background-color: gold !important;
}
/* GO TO POOL - USER - GROUP LIST  */
.fluid.html-person-groups-page-view .sortable-table-view:not(:empty):first-of-type .sortable-table-wrapper table.with-avatar tbody tr:not(.header) td.show-after-locked > span.avatar + a + span  {
position: relative !important;
display: inline-block;
top: 0;
right: 0;
height: 15px;
line-height: 15px;
width: 15px;
}`;
document.head.appendChild(style);
// Wait for the DOM to be fully loaded before executing the script
document.addEventListener('DOMContentLoaded', function() {
console.log('DOM fully loaded. Running addButtons and addButtonsToGroupsList...');
addButtons();
addButtonsToGroupsList();
});
// Optionally, you can also set up a MutationObserver to watch for changes in the DOM
const observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length > 0) {
console.log('DOM changed, checking for buttons...');
addButtons();
addButtonsToGroupsList();
}
});
});
// Start observing the body for changes
observer.observe(document.body, { childList: true, subtree: true });
})();