TAB bgimg

  • /*
     * @title TAB bgimg
     * @description append tab navigation to background-image
     * @include http://example.com/user-include-as-you-like/*
     * @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
    Greasemonkey 等で利用する場合の .user.js へのリンクです。
    Loader
    @require やソースコードが長い場合に多段ロードする Loader コミのコードへのリンクです。
    Metadata
    コード中にコメントで @xxx と書かれたメタデータの JSON です。

History

  1. 2015/05/19 03:02:14 - 2015-05-19
  2. 2015/02/06 04:40:56 - 2015-02-06