awesome-mac Filter

awesome-mac-filter.user.js

// ==UserScript==
// @name         awesome-mac Filter
// @namespace    http://phpz.org/
// @version      0.3.3
// @description  awesome-mac Filter
// @author       Seven Yu <dofyyu@gmail.com>
// @match        https://github.com/jaywcjlove/awesome-mac
// @match        https://github.com/jaywcjlove/awesome-mac/*/README.md
// @match        https://github.com/jaywcjlove/awesome-mac/*/README-*.md
// @require      http://code.jquery.com/jquery-3.1.0.min.js
// @icon         https://dofy.net/images/logo.png
// @updateURL    https://gist.github.com/dofy/4ac64114b32acc9e6ffa6024c2302124/raw
// @downloadURL  https://gist.github.com/dofy/4ac64114b32acc9e6ffa6024c2302124/raw
// @grant        GM_addStyle
// ==/UserScript==

GM_addStyle([
  '.am-filter-box { position:fixed; bottom:10px; right:20px; }',
  '.am-filter-box .am-active { background-color: #ccc; }',
  '.am-filter-box a { text-decoration: none; color: black; padding:3px 7px; border: 1px solid #999; border-radius: 6px; background-color:#eee; }',
  '.am-filter-box a:hover { background-color: #ccc; }',
  '.am-hidden { display: none; }'
].join('\n'));

(function($) {
  'use strict';

  const img_base_url = 'https://camo.githubusercontent.com/';
  const dict = {
    links: {
      all: {
        en: 'All',
        zh: '全部'
      },
      contents: {
        en: 'Contents',
        zh: '目录'
      },
      list: {
        en: 'List',
        zh: '列表'
      }
    },
    filters: {
      oss: {
        txt: {
          en: 'Open Source',
          zh: '开源'
        },
        alt: {
          en: 'Open-Source Software',
          zh: 'Open-Source Software'
        },
        img: {
          id: '27b0c862bc5dee3cc822a00c0645f66104a583b0',
          sign: '68747470733a2f2f6a617977636a6c6f76652e6769746875622e696f2f73622f69636f2f6d696e2d6f73732e737667'
        }
      },
      free: {
        txt: {
          en: 'Freeware',
          zh: '免费'
        },
        alt: {
          en: 'Freeware',
          zh: 'Freeware'
        },
        img: {
          id: '5b5710d91294db78c7e32ffa884d6c45ab15c471',
          sign: '68747470733a2f2f6a617977636a6c6f76652e6769746875622e696f2f73622f69636f2f6d696e2d667265652e737667'
        }
      },
      hot: {
        txt: {
          en: 'Hot',
          zh: '热门'
        },
        alt: {
          en: 'hot',
          zh: 'hot'
        },
        img: {
          id: '41b3d574ae1e6e0116df8a469a44dd16e65167fc',
          sign: '68747470733a2f2f6a617977636a6c6f76652e6769746875622e696f2f73622f69636f2f6d696e2d686f742e737667'
        }
      },
      tuijian: {
        txt: {
          en: 'Recommend',
          zh: '推荐'
        },
        alt: {
          en: 'tuijian',
          zh: 'tuijian'
        },
        img: {
          id: '89770188a24dd415991ffa93eca8c9bd5e9b2147',
          sign: '68747470733a2f2f6a617977636a6c6f76652e6769746875622e696f2f73622f69636f2f6d696e2d7475696a69616e2e737667'
        }
      },
      bibei: {
        txt: {
          en: 'Must Have',
          zh: '必备'
        },
        alt: {
          en: 'must-have',
          zh: '必备'
        },
        img: {
          id: '9bead03b82c8878a7c0a6e67a1ac064df3161297',
          sign: '68747470733a2f2f6a617977636a6c6f76652e6769746875622e696f2f73622f69636f2f6d696e2d62696265692e737667'
        }
      },
      app: {
        txt: {
          en: 'App Store',
          zh: '商店'
        },
        alt: {
          en: 'App Store',
          zh: 'App Store'
        },
        img: {
          id: '0346a79e22858448a323486fbc30700c679386dc',
          sign: '68747470733a2f2f6a617977636a6c6f76652e6769746875622e696f2f73622f69636f2f6d696e2d6170702d73746f72652e737667'
        }
      }
    }
  };

  const getLang = () => {
    let fileName = location.href.split('/').pop();
    let lang = fileName.split(/[\-\.]+/).slice(-2, -1)[0].toLowerCase();
    return lang.length === 2 ? lang : 'en';
  };

  // get index
  const indexHead = $('#readme > article > h2:first');
  const indexCont = $('#readme > article > ul:first');

  indexCont.remove();

  const lang = getLang();
  const lis = $('#readme > article > ul > li');
  const box = $(`<div class="am-filter-box"><a href="#" title="All" data-filter="*" >${dict.links.all[lang]}</a></div>`);

  indexHead.after(indexCont, `<a id="user-content-${dict.links.list[lang].toLowerCase()}"></a>`);

  for (let key in dict.filters) {
    let item = dict.filters[key];
    box.append(`\n<a href="#" title="${item.txt[lang]}" data-filter="${item.alt[lang]}">
<img src="${img_base_url}${item.img.id}/${item.img.sign}" /> ${item.txt[lang]}</a>`);
  }

  let curFilter = null;
  box.appendTo('#readme')
    .children('a')
    .click(evt => {
    evt.preventDefault();
    curFilter && curFilter.removeClass('am-active');
    curFilter = $(evt.currentTarget).addClass('am-active');
    let filter = curFilter.data('filter');
    if (filter === '*') {
      lis.removeClass('am-hidden');
    } else {
      lis.addClass('am-hidden').find(`img[alt="${filter}"]`).parents('li').removeClass('am-hidden');
    }
  });

  box.prepend(`<a href="#${dict.links.contents[lang].toLowerCase()}">#${dict.links.contents[lang]}</a> `,
              `<a href="#${dict.links.list[lang].toLowerCase()}">#${dict.links.list[lang]}</a></div> · `);

})(jQuery);