☰

Flickr - Go to User's Shots in this Groups (Photo Page)

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();
})();