In the groups list of the Photo pages, at each pool name, Add an icon to go to user's shots posted in this group - (IA 2024.09)
目前為
// ==UserScript==
// @name Flickr - Go to User's Shots in this Groups (Photo Page)
// @version 0.1
// @description In the groups list of the Photo pages, at each pool name, Add an icon to go to user's shots posted in this group - (IA 2024.09)
// @icon https://external-content.duckduckgo.com/ip3/blog.flickr.net.ico
// @match http*://*flickr.com/*
// @match http*://www.flickr.com/photos/*
// @author decembre
// @grant none
// @namespace https://greasyfork.org/users/8
// ==/UserScript==
(function() {
'use strict';
// Récupérer les éléments nécessaires
var useridElement = document.querySelector('.sub-photo-container.centered-content .attribution-view a.avatar');
console.log('USERid trouvé :', useridElement.getAttribute('data-person-nsid'));
// Fonction pour ajouter les boutons
function addButtons() {
var groupidElements = document.querySelectorAll('.sub-photo-contexts-view .sub-photo-context .context-list li');
groupidElements.forEach(function(groupidElement, index) {
var useridValue = useridElement.getAttribute('data-person-nsid');
var groupidValue = groupidElement.querySelector('a').getAttribute('data-group-nsid');
if (groupidValue === null) {
console.log('Aucun attribut data-group-nsid trouvé dans l\'élément a');
} else {
console.log('POOLid trouvé :', groupidValue);
var linkUrl = 'https://www.flickr.com/groups/' + groupidValue + '/pool/' + useridValue + '/';
var 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>';
console.log('Lien créé :', linkUrl);
// Vérifier si le bouton existe déjà
var existingButton = groupidElement.querySelector('.GoToPool');
if (!existingButton) {
// Créer un élément HTML à partir de la chaîne de caractères
var linkElement = document.createElement('span');
linkElement.innerHTML = linkHtml;
// Insérer l'élément HTML dans le DOM
groupidElement.appendChild(linkElement);
console.log('Lien inséré dans le DOM pour le pool #' + (index + 1));
}
}
});
}
// Ajouter la règle de style pour l'effet d'opacité en hover
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;
}
`;
document.head.appendChild(style);
// Fonction pour détecter les changements dans la liste des pools
function detectChanges() {
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(mutation) {
if (mutation.addedNodes.length > 0 || mutation.removedNodes.length > 0) {
addButtons();
// Réactiver l'observer
observer.observe(document.querySelector('.sub-photo-contexts-view'), { childList: true, subtree: true });
}
});
});
observer.observe(document.querySelector('.sub-photo-contexts-view'), { childList: true, subtree: true });
}
// Appeler la fonction pour ajouter les boutons
addButtons();
// Appeler la fonction pour détecter les changements dans la liste des pools
detectChanges();
})();