☰

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

In the groups list of the User's Groups Page, at each group name, Add an icon to go to user's shots posted in this group.

À partir de 2025-01-11. Voir la dernière version.

// ==UserScript==
// @name           Flickr - Go to User's Shots in this Group (Photo + User's Groups list Page)
// @version        1.1
// @description	   In the groups list of 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 });
})();