TAB bgimg

by noromanba 2015-05-19 [2015/05/19 03:02:14]

append tab navigation to background-image

• /*
   * @title TAB bgimg
   * @description append tab navigation to background-image
   * @include http://*
   * @license MIT http://opensource.org/licenses/MIT
   * @javascript_url
   */
  
  // for normal <img>
  // http://let.hatelabo.jp/noromanba/let/hJmeuMHlo4hw
  
  // e.g.
  // http://tonarinoyj.jp/manga/nekogurui/1/
  // http://tonarinoyj.jp/manga/yugaitoshi/1/?viewer=vertical
  
  (function () {
      var slice = Array.prototype.slice;
      var a11yfy = function (context) {
          slice.call(context.querySelectorAll('[style*="background-image"]')).forEach(function (wall) {
              // handle multiple bgimg, return array like str; "url(), url() ..." c.f.
              // https://developer.mozilla.org/en-US/docs/Web/CSS/background-image
              Array(wall.style.backgroundImage).some(function (img) {
                  var bgURL = (img.match(/^url\(['"]?(https?:.*)['"]?\)/) || [])[1];
                  if (!bgURL) return;
  
                  // var filename = new URL(bgURL).pathname.pop();
  
                  wall.tabIndex = wall.tabIndex > -1 ? wall.tabIndex : 0;
                  return true;
              });
          });
      };
      a11yfy(document.body);
  
      new MutationObserver(function (records) {
          records.forEach(function (record) {
              a11yfy(record.target);
          });
      }).observe(document.body, { childList: true, subtree: true });
  })();
  
  

• Permalink RAW Packed Userscript LOADER Metadata ?

  Permalink

  このページへの個別リンクです。

  RAW

  書かれたコードへの直接のリンクです。

  Packed

  文字列が圧縮された書かれたコードへのリンクです。

  Userscript

  Greasemonkey 等で利用する場合の .user.js へのリンクです。

  Loader

  @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。

  Metadata

  コード中にコメントで @xxx と書かれたメタデータの JSON です。