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.
当前为 2025-01-10 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name           Flickr - Go to User's Shots in this Groups (Photo Page)
// @version        0.6
// @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.
// @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/*
// @author         decembre
// @grant          none
// ==/UserScript==

(function() {
  'use strict';

  // Function to add buttons
  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.');
      }
    });
  }

    // NEW: Fonction pour modifier l'URL du bouton "Back to group"
  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();

    // 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;
}
.GoToPool:visited {
    background-color: gold !important;
}
  `;
  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...');
    addButtons();
  });

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

  // Start observing the body for changes
  observer.observe(document.body, { childList: true, subtree: true });
})();