☰

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

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.

  1. // ==UserScript==
  2. // @name           Flickr - Go to User's Shots in this Group (Photo + User's Groups list Page)
  3. // @version        1.2
  4. // @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.
  5. // @icon           https://external-content.duckduckgo.com/ip3/blog.flickr.net.ico
  6. // @namespace      https://greasyfork.org/users/8
  7. // @match          http*://*flickr.com/*
  8. // @match          http*://www.flickr.com/photos/*
  9. // @match          http*://www.flickr.com/people/*/groups/*  // Match user groups page
  10. // @match          http*://www.flickr.com/groups/*
  11. // @author         decembre
  12. // @grant          none
  13. // ==/UserScript==
  14.  
  15. (function() {
  16.   'use strict';
  17.  
  18.   // Function to add buttons on user's photo page
  19.   function addButtons() {
  20.     const useridElement = document.querySelector('.sub-photo-container.centered-content .attribution-view a.avatar');
  21.     if (!useridElement) {
  22.       console.log('User ID element not found. Retrying...');
  23.       setTimeout(addButtons, 1000); // Retry after 1 second
  24.       return;
  25.     }
  26.  
  27.     const useridValue = useridElement.getAttribute('data-person-nsid');
  28.     console.log('USERid trouvé :', useridValue);
  29.  
  30.     const groupidElements = document.querySelectorAll('.sub-photo-contexts-view .sub-photo-context.sub-photo-context-groups .context-list li');
  31.     if (groupidElements.length === 0) {
  32.       console.log('No group elements found. Retrying...');
  33.       setTimeout(addButtons, 1000); // Retry after 1 second
  34.       return;
  35.     }
  36.  
  37.     groupidElements.forEach(function(groupidElement, index) {
  38.       const groupidLink = groupidElement.querySelector('a');
  39.       if (groupidLink) {
  40.         const groupidValue = groupidLink.getAttribute('data-group-nsid');
  41.         if (groupidValue) {
  42.           const linkUrl = `https://www.flickr.com/groups/${groupidValue}/pool/${useridValue}/`;
  43.           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>`;
  44.  
  45.           // Check if the button already exists
  46.           const existingButton = groupidElement.querySelector('.GoToPool');
  47.           if (!existingButton) {
  48.             const linkElement = document.createElement('span');
  49.             linkElement.innerHTML = linkHtml;
  50.             groupidElement.appendChild(linkElement);
  51.             console.log('Lien inséré dans le DOM pour le pool #' + (index + 1));
  52.           }
  53.         } else {
  54.           console.log('Aucun attribut data-group-nsid trouvé dans l\'élément a');
  55.         }
  56.       } else {
  57.         console.log('No anchor element found in groupidElement.');
  58.       }
  59.     });
  60.   }
  61.  
  62.   // Function to add buttons on Groups list page
  63.   function addButtonsToGroupsList() {
  64.     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');
  65.     if (!useridElement) {
  66.       console.log('User ID element not found on Groups list page. Retrying...');
  67.       setTimeout(addButtonsToGroupsList, 1000); // Retry after 1 second
  68.       return;
  69.     }
  70.  
  71.     const useridValue = useridElement.getAttribute('href').split('/people/')[1].split('/')[0];
  72.     console.log('USERid trouvé sur la page des groupes :', useridValue);
  73.  
  74.      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');
  75.     if (groupidElements.length === 0) {
  76.       console.log('No group elements found on Groups list page. Retrying...');
  77.       setTimeout(addButtonsToGroupsList, 1000);
  78.       return;
  79.     }
  80.  
  81.     groupidElements.forEach(function(groupidElement, index) {
  82.       const groupidValue = groupidElement.getAttribute('href').split('/groups/')[1].split('/')[0];
  83.       if (groupidValue) {
  84.         const linkUrl = `https://www.flickr.com/groups/${groupidValue}/pool/${useridValue}/`;
  85.         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>`;
  86.  
  87.         // Check if the button already exists
  88.         const existingButton = groupidElement.parentElement.querySelector('.GoToPool');
  89.         if (!existingButton) {
  90.           const linkElement = document.createElement('span');
  91.           linkElement.innerHTML = linkHtml;
  92.           groupidElement.parentElement.appendChild(linkElement);
  93.           console.log('Lien inséré dans le DOM pour le groupe #' + (index + 1));
  94.         }
  95.       } else {
  96.         console.log('Aucun attribut data-group-nsid trouvé dans l\'élément a');
  97.       }
  98.     });
  99.   }
  100.  
  101.   // Function to modify the URL of the "Back to group" button
  102.   function modifyBackToGroupUrl() {
  103.     var backToGroupButton = document.querySelector('.photo-content-upper-container .entry-type.do-not-evict[href^="/groups/"]');
  104.     if (backToGroupButton) {
  105.       var url = backToGroupButton.getAttribute('href');
  106.       var modifiedUrl = url.replace(/\|[^/]+/, '');
  107.       backToGroupButton.setAttribute('href', modifiedUrl);
  108.       console.log('URL du bouton "Back to group" modifiée :', modifiedUrl);
  109.     }
  110.   }
  111.  
  112.   modifyBackToGroupUrl();
  113.  
  114.   // Add style rules for the button hover effect
  115.   var style = document.createElement('style');
  116.   style.innerHTML = `
  117. .GoToPool {
  118.       display: inline-block;
  119.       position: absolute;
  120.       top: 0;
  121.       right: 0;
  122.       height: 15px;
  123.       line-height: 15px;
  124.       width: 15px;
  125.       background-color: green;
  126.       font-size: 10px;
  127.       border-radius: 50%;
  128.       text-align: center;
  129.       padding: 1px;
  130.       opacity: 0.5;
  131.       transition: opacity 0.7s ease !important;
  132. }
  133. .GoToPool:hover {
  134.     font-size: 8px !important;
  135.     background-color: #b3ddb3 !important;
  136.     opacity: 1 !important;
  137.     transition: opacity 0.7s ease !important;
  138. }
  139. .GoToPool:visited {
  140.     background-color: gold !important;
  141.   }
  142.   /* GO TO POOL - USER - GROUP LIST  */
  143. .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  {
  144.     position: relative !important;
  145.     display: inline-block;
  146.     top: 0;
  147.     right: 0;
  148.     height: 15px;
  149.     line-height: 15px;
  150.     width: 15px;
  151. }`;
  152.   document.head.appendChild(style);
  153.  
  154.   // Wait for the DOM to be fully loaded before executing the script
  155.   document.addEventListener('DOMContentLoaded', function() {
  156.     console.log('DOM fully loaded. Running addButtons and addButtonsToGroupsList...');
  157.     addButtons();
  158.     addButtonsToGroupsList();
  159.   });
  160.  
  161.   // Optionally, you can also set up a MutationObserver to watch for changes in the DOM
  162.   const observer = new MutationObserver(function(mutations) {
  163.     mutations.forEach(function(mutation) {
  164.       if (mutation.addedNodes.length > 0) {
  165.         console.log('DOM changed, checking for buttons...');
  166.         addButtons();
  167.         addButtonsToGroupsList();
  168.       }
  169.     });
  170.   });
  171.  
  172.   // Start observing the body for changes
  173.   observer.observe(document.body, { childList: true, subtree: true });
  174. })();
  175.