☰

Google Drive Image Preview Rotation

Add rotate buttons to image preview

当前为 2024-01-16 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Google Drive Image Preview Rotation
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @license      MIT
  6. // @description  Add rotate buttons to image preview
  7. // @author       Sr.Generoso
  8. // @match        https://drive.google.com/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     // Function to create a new child element
  16.     function createChild(parentElement, text, className, clickHandler) {
  17.         const child = document.createElement('button');
  18.         child.textContent = text;
  19.         child.classList.add(className);
  20.  
  21.         child.addEventListener('click', clickHandler);
  22.         // Apply styles
  23.         child.style.backgroundColor = 'rgba(0,0,0,.75)';
  24.         child.style.border = 'none';
  25.         parentElement.appendChild(child);
  26.     }
  27.  
  28.     // Function to rotate the image container to the left
  29.     function rotateLeft() {
  30.         const imageContainer = findVisibleImageContainer();
  31.         if (imageContainer) {
  32.             // Adjust the rotation angle as needed
  33.             const currentRotation = (imageContainer.style.transform.match(/(-?\d+)/) || [0])[0];
  34.             const newRotation = (parseInt(currentRotation) - 90) % 360;
  35.             imageContainer.style.transform = `rotate(${newRotation}deg)`;
  36.         }
  37.     }
  38.     // Function to rotate the image container to the right
  39.     function rotateRight() {
  40.         const imageContainer = findVisibleImageContainer();
  41.         if (imageContainer) {
  42.             // Adjust the rotation angle as needed
  43.             const currentRotation = (imageContainer.style.transform.match(/(\d+)/) || [0])[0];
  44.             const newRotation = (parseInt(currentRotation) + 90) % 360;
  45.             imageContainer.style.transform = `rotate(${newRotation}deg)`;
  46.         }
  47.     }
  48.  
  49.     // Function to find the visible image container
  50.     function findVisibleImageContainer() {
  51.         const imageContainers = document.querySelectorAll('.a-b-Sh-ng:not([style*="display: none;"])');
  52.         for (const container of imageContainers) {
  53.             if (container.offsetHeight > 0 && container.offsetWidth > 0) {
  54.                 return container;
  55.             }
  56.         }
  57.         return null;
  58.     }
  59.  
  60.     // Function to handle changes in the DOM
  61.     function handleMutations(mutationsList, observer) {
  62.         mutationsList.forEach(mutation => {
  63.             if (mutation.type === 'childList') {
  64.                 // Check if the target element with class 'a-b-vo' has been added
  65.                 const targetDiv = document.querySelector('.a-b-vo');
  66.                 if (targetDiv) {
  67.                     // Check if buttons with the custom classes already exist
  68.                     const leftButton = targetDiv.querySelector('.my-rotate-left');
  69.                     const rightButton = targetDiv.querySelector('.my-rotate-right');
  70.  
  71.                     if (!leftButton) {
  72.                         // Create a "Rotate Left" button
  73.                         createChild(targetDiv, '↪️', 'my-rotate-left', rotateLeft);
  74.                     }
  75.  
  76.                     if (!rightButton) {
  77.                         // Create a "Rotate Right" button
  78.                         createChild(targetDiv, '↩️', 'my-rotate-right', rotateRight);
  79.                     }
  80.  
  81.                     // Disconnect the observer after adding buttons
  82.                     observer.disconnect();
  83.                 }
  84.             }
  85.         });
  86.     }
  87.  
  88.  
  89.     // Create a MutationObserver to watch for changes in the DOM
  90.     const observer = new MutationObserver(mutationsList => handleMutations(mutationsList, observer));
  91.  
  92.     // Start observing the body for childList changes
  93.     observer.observe(document.body, { childList: true, subtree: true });
  94. })();