Image Alt to Title

Hover tooltip of image displaying alt attribute, original title and URL info.
当前为 2021-02-09 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Image Alt to Title
// @namespace   myfonj
// @include     *
// @grant       none
// @version     1.1.4
// @run-at      document-start
// @description Hover tooltip of image displaying alt attribute, original title and URL info.
// ==/UserScript==
/*
 * https://gf.qytechs.cn/en/scripts/418348/versions/new
 * 
 * § Trivia:
 * ¶ Hover tooltip displays content of nearest element's title attribute (@title).
 * ¶ Alt attribute (@alt) is possible only at IMG element.
 * ¶ IMG@alt is not displayed in tooltip.
 * ¶ IMG cannot have children.
 * ¶ @title is possible on any element, including IMG.
 * ¶ IMG@src is also valuable.
 * 
 * Goal:
 * Display image alt attribute value in images hover tooltip, add valuable @SRC chunks.
 * 
 * Details
 * Pull @alt from image and set it so it is readable as @title tooltip
 * so that produced title value will not obscure existing parent title
 * that would be displayed otherwise.  Also include image filename from @src,
 * and additionally path or domain.
 * 
 * Means
 * Load (and error?) event listener constructing and setting title.
 * 
 * Dangers
 * Artificially altered alt or title after image load event will not be taken into account.
 * Mitigate with mutationObserver?
 * 
 * Process
 * Draw the rest of the owl
 * 
 * 
 * § Tastcases
 * 
 * FROM:
 * <a>
 *  <img>
 * </a>
 * TO:
 * <a>
 *  <img title="Alt missing.">
 * </a> 
 * 
 * FROM:
 * <a>
 *  <img alt="">
 * </a>
 * TO:
 * <a>
 *  <img alt="" title="Alt: ''">
 * </a> 
 * 
 * FROM:
 * <a>
 *  <img alt="░">
 * </a>
 * TO:
 * <a>
 *  <img alt="░" title="Alt: ░">
 * </a> 
 * 
 * FROM:
 * <a>
 *  <img alt="░" title="▒">
 * </a>
 * TO:
 * <a>
 *  <img title="Alt: ░, title: ▒">
 * </a> 

 * FROM:
 * <a title="▒">
 *  <img alt="░">
 * </a>
 * TO:
 * <a>
 *  <img title="Alt: ░, title: ▒">
 * </a> 
 * 
 * */

/**
 * @type {Map.<HTMLImageElement:{originalTitle:string,augmentedTitle:string}}>}
 */
const processedImages = new WeakMap();

// do not run at image-only pages
if(document.querySelector('body>img[alt="'+document.location.href+'"]:only-child')){
  return
}

document.documentElement.addEventListener('load', altPic, true);
// document.documentElement.addEventListener('error', altPic, true);

/**
 * @param {{target: HTMLImageElement}} event
 */
function altPic (event) {
  const separator = '\n---\n';
  try {
    const img = event.target;
    if (img.tagName != 'IMG') return

    
    var desc = '';
    const alt = img.alt;

    var known = processedImages.get(img);
    if(known){
      // existing img load new src
      if(img.title == known.augmentedTitle){
        // reset to not recursively add our own title to new title
        // console.log('known, resetting to original', known.originalTitle);
        img.title = known.originalTitle;
      } else {
        // in this case "original" means "augmented by page author"
        // console.log('known, title does not match', img.title);
        known.originalTitle = img.title;
      }
    } else {
      processedImages.set(img,{originalTitle:img.title});
      known = processedImages.get(img);
      // console.log('unknown', known);
    }
    
    const title = getClosestTitle(img);
    
    switch (alt) {
      case null:
        desc = 'Alt completely missing!';
        break;
      case '':
        desc = 'Alt: \'\'';
        break;
      default:
        if( alt == title ) {
          desc = 'Alt (=title): ';
        } else {
          desc = 'Alt: ';
        }
        desc += alt;
    }

    if (title && alt != title) {
      desc += separator;
      desc += 'Title: ' + title;
    }

    const descby = img.getAttribute('described-by');
    if (descby) {
      desc += separator;
      desc += 'Described by: ' + descby;
    }

    desc += separator;

    const srcURI = new URL(img.src, img.baseURI);
    const slugRx = /[^/]+$/;
    switch (srcURI.protocol) {
      case 'http:':
      case 'https:': {
        desc += 'File: ' + srcURI.pathname.match(slugRx);
        if (srcURI.search) {
          desc += '\nParams: ' + srcURI.search;
        }
        if (document.location.hostname != srcURI.hostname) {
          desc += '\nHost: ' + srcURI.hostname;
        }
        desc += '\nPath: ' + srcURI.pathname.replace(slugRx, '');
        break;
      }
      case 'data:': {
        desc += img.src.split(',')[0] + ', + ' + img.src.split(',')[1].length + ' b.'
        break;
      }
      default:
        desc += 'Src: ' + img.src;
    }
    img.title = known.augmentedTitle = desc;
  } catch (e) {
    // console.error(e);
  }
}

/**
 * @param {HTMLElement} el
 */
function getClosestTitle (el) {
  var ret = [];
  do {
    if (el.title) {
      return el.title;
    }
  } while ((el = el.parentElement) && el !== document.documentElement);
  return ''
}
欢迎访问Greasy Fork镜像
