☰

turkoptiscript

User script for Turkopticon -- review requesters on Amazon Mechanical Turk

  1. // ==UserScript==
  2. // @name         turkoptiscript
  3. // @author       feihtality
  4. // @namespace    https://greasyfork.org/en/users/12709
  5. // @version      1.0.0-rc3
  6. // @description  User script for Turkopticon -- review requesters on Amazon Mechanical Turk
  7. // @license      ISC
  8. // @include      https://*.mturk.com/*
  9. // @exclude      https://www.mturk.com/mturk/findhits?*hit_scraper
  10. // @grant        none
  11. // ==/UserScript==
  12. (function () {
  13. 'use strict';
  14.  
  15. function qs(selector, ctx) {
  16.   return (ctx || document).querySelector(selector);
  17. }
  18.  
  19. function qsa(selector, ctx) {
  20.   return Array.from((ctx || document).querySelectorAll(selector));
  21. }
  22.  
  23. function make(tag, attrs = {}, namespace) {
  24.   const el = namespace ? document.createElementNS(namespace, tag) : document.createElement(tag);
  25.   Object.keys(attrs).forEach(attr => el.setAttribute(attr, attrs[attr]));
  26.   return el;
  27. }
  28.  
  29. function format(data, attr) {
  30.   const payRate = (p, t, total) => t > 0 ? '$' + ((p/t)*60**2).toFixed(2) : '--',
  31.         toDays  = (t) => t > 0 ? (t/86400.0).toFixed(2) : '--',
  32.         percent = (x,n) => n > 0 ? Math.round(100*x/n) + '%' : '--';
  33.  
  34.   switch (attr) {
  35.     case 'pending':
  36.       return `${toDays(data)} days`;
  37.     case 'reward':
  38.       return `${payRate(...data)}/hr`;
  39.     case 'tos':
  40.     case 'broken':
  41.     case 'rejected':
  42.       return data[0];
  43.     default:
  44.       return `${percent(data[0],data[1])} of ${data[1]}`
  45.   }
  46. }
  47.  
  48. class HITCapsule {
  49.   constructor(el, lockup) {
  50.     this.elRef = el;
  51.     this.attrs   = {};
  52.     this._lockup = lockup;
  53.   }
  54.  
  55.   init(selector) {
  56.     if (selector) this.elRef = this.elRef.closest(selector);
  57.     return this;
  58.   }
  59.  
  60.   inject(data) { this._lockup.inject(data || {}, this.attrs).attach(this.elRef); }
  61.  
  62.   extract(attrs, env, data) {
  63.     const { root, leaf } = env,
  64.           method = leaf === 'preview' ? '_extractPreview' : '_extractDefault';
  65.     if (root === 'next')
  66.       Object.assign(this.attrs, attrs.reduce((a, b) => (a[b] = data[b]) && a, {}));
  67.     else
  68.       attrs.forEach(attr => this.attrs[attr] = this[method](attr, env));
  69.     return this;
  70.   }
  71.  
  72.   _extractDefault(attr, env) {
  73.     if (env.leaf === 'statusdetail' && attr === 'title')
  74.       return this._get('.statusdetailTitleColumnValue').textContent;
  75.  
  76.     switch (attr) {
  77.       case 'reward':
  78.         return this._get('span.reward').textContent.slice(1);
  79.       case 'rid':
  80.         return this._get('[href*="requesterId"]').href.match(/requesterId=([^=&]+)/)[1];
  81.       case 'name':
  82.         return this._get('.requesterIdentity').textContent;
  83.       case 'title':
  84.         return this._get('a.capsulelink').textContent.trim();
  85.     }
  86.   }
  87.  
  88.   _extractPreview(attr) {
  89.     switch (attr) {
  90.       case 'reward':
  91.         return this._get('span.reward').textContent.slice(1);
  92.       case 'rid':
  93.         return qs('input[name=requesterId]').value;
  94.       case 'name':
  95.         return qs('input[name=prevRequester]').value;
  96.       case 'title':
  97.         return this._get('.capsulelink_bold').textContent.trim();
  98.     }
  99.   }
  100.  
  101.   _get(selector) { return qs(selector, this.elRef); }
  102. }
  103.  
  104. class Extractor$$1 {
  105.   constructor() {
  106.     this._selector = new Selector();
  107.   }
  108.  
  109.   init() {
  110.     this.env     = Extractor$$1.getEnv();
  111.     this._lockup = new Lockup(this.env);
  112.     this._selector.init(this.env);
  113.  
  114.     const isNext = this.env.root === 'next',
  115.           model = isNext ? JSON.parse(qs(this._selector.anchor).closest('div').dataset['reactProps']) : null;
  116.     this._data   = model ? Extractor$$1.pruneReactModel(model, this.env) : null;
  117.     return this;
  118.   }
  119.  
  120.   collect(fn) {
  121.     let collection;
  122.     if (fn && typeof fn === 'function')
  123.       collection = fn(this._selector.anchor);
  124.     else throw new TypeError('expected a function');
  125.  
  126.     const keys      = 'title name rid reward'.split(' ');
  127.     this.collection = collection
  128.       .map((c, i) => {
  129.         const data = this._data ? this._data[i] : null;
  130.         return new HITCapsule(c, this._lockup)
  131.           .init(this._selector.base)
  132.           .extract(keys, this.env, data);
  133.       })
  134.       .reduce((a, b) => (a[b.attrs.rid] ? a[b.attrs.rid].push(b) : (a[b.attrs.rid] = [b])) && a, {});
  135.     return this;
  136.   }
  137.  
  138.   static getEnv() {
  139.     const strat = { root: 'legacy', leaf: 'default' },
  140.           path  = document.location.pathname;
  141.     if (document.domain.includes('worker') || qs('body > .container-fluid'))
  142.       strat.root = 'next';
  143.     if (path.includes('statusdetail'))
  144.       strat.leaf = 'statusdetail';
  145.     else if (/(myhits|tasks)/.test(path))
  146.       strat.leaf = 'queue';
  147.     else if (qs('#theTime'))
  148.       strat.leaf = 'preview';
  149.     return strat;
  150.   }
  151.  
  152.   static pruneReactModel(model, env) {
  153.     return model['bodyData'].map(d => {
  154.       const src = env.leaf === 'queue' ? d['project'] : d;
  155.  
  156.       const { monetary_reward: { amount_in_dollars:reward }, requester_id:rid, title, requester_name:name } = src;
  157.  
  158.       return { rid: rid, name: name, title: title, reward: reward };
  159.     });
  160.   }
  161.  
  162. }
  163.  
  164. class Selector {
  165.   constructor() {
  166.     this.selectors = {
  167.       next  : {
  168.         default: { anchor: 'li.table-row', base: null },
  169.         queue  : { anchor: 'li.table-row', base: null }
  170.       },
  171.       legacy: {
  172.         default     : { anchor: '.requesterIdentity', base: 'table[height]' },
  173.         preview     : { anchor: 'a[id|="requester.tooltip"]', base: 'table[style]' },
  174.         queue       : { anchor: '.requesterIdentity', base: 'table[height]' },
  175.         statusdetail: {
  176.           anchor: '.statusdetailRequesterColumnValue',
  177.           base  : 'tr',
  178.           inject: '.statusdetailRequesterColumnValue'
  179.         }
  180.       }
  181.     };
  182.   }
  183.  
  184.   init(env) { this.env = env; }
  185.  
  186.   get anchor() {
  187.     const { root, leaf } = this.env;
  188.     return this.selectors[root][leaf].anchor;
  189.   }
  190.  
  191.   get base() {
  192.     const { root, leaf } = this.env;
  193.     return this.selectors[root][leaf].base;
  194.   }
  195.  
  196.   get inject() {
  197.     const { root, leaf } = this.env;
  198.     return this.selectors[root][leaf].inject || '.capsule_field_text';
  199.   }
  200. }
  201.  
  202. class Lockup {
  203.   constructor(env) {
  204.     this.env  = env;
  205.     this.idol = createLockup(env);
  206.   }
  207.  
  208.   inject({ aggregates:agg }, scrapeData) {
  209.     this.clone     = this.idol.cloneNode(true);
  210.     const selector = '.to-fc';
  211.  
  212.     if (agg) {
  213.       [].forEach.call(qs(selector, this.clone).children, el => el.classList.toggle('hidden'));
  214.       qs('a.hidden', this.clone).classList.toggle('hidden');
  215.       ['all', 'recent'].forEach(range => {
  216.         Object.keys(agg[range]).forEach(attr => {
  217.           const val = agg[range][attr],
  218.                 sel = `[data-range=${range}][data-attr=${attr}]`;
  219.  
  220.           qs(sel, this.clone).textContent = format(val, attr);
  221.         });
  222.       });
  223.     }
  224.  
  225.     [].forEach.call(qsa('a', this.clone), el => buildLink(el, k => scrapeData[k]));
  226.     qs('.to-rn', this.clone).textContent = scrapeData.name;
  227.     return this;
  228.   }
  229.  
  230.   attach(context) {
  231.     const ref = context instanceof HTMLLIElement
  232.       ? qs('span>span', context)
  233.       : (qs('.capsule_field_text', context) || qs('a', context));
  234.     ref.parentNode.insertBefore(this.clone, ref);
  235.   }
  236. }
  237.  
  238. // should use custom elements which would be much cleaner, but waiting on FF/Edge to implement
  239. function createLockup(env) {
  240.   const
  241.     pos    = env.root === 'legacy' ? 'to-rel' : 'to-abs',
  242.     root   = make('div', { class: `to-hdi ${pos}` }),
  243.     lockup = make('div', { class: 'to-lockup to-abs' }),
  244.     flex   = lockup.appendChild(make('div', { class: 'to-fc' })),
  245.     labels = ['pay rate', 'time pending', 'response', 'recommend', 'rejected', 'tos', 'broken' ],
  246.     attrs  = ['reward', 'pending', 'comm', 'recommend', 'rejected', 'tos', 'broken'];
  247.  
  248.   root.appendChild(make('svg', { height: 20, width: 20 }, 'http://www.w3.org/2000/svg'))
  249.       .appendChild(make('path', {
  250.         fill: '#657b83',
  251.         d   : 'M10 0c-5.52 0-10 4.48-10 10 0 5.52 4.48 10 10 10 5.52 0 10-4.48 10-10 0-5.52-4.48-10-10-10zm4.22 5.38c1.34 0 2.41 0.42 3.22 1.25 0.81 0.83 1.22 2.02 1.22 3.5 0 1.47-0.39 2.61-1.19 3.44-0.8 0.83-1.88 1.25-3.22 1.25-1.36 0-2.45-0.42-3.25-1.25-0.8-0.83-1.19-1.95-1.19-3.41 0-0.93 0.13-1.71 0.41-2.34 0.21-0.46 0.49-0.88 0.84-1.25 0.36-0.37 0.76-0.63 1.19-0.81 0.57-0.24 1.23-0.37 1.97-0.37zm-12.47 0.16h7.25v1.56h-2.72v7.56h-1.84v-7.56h-2.69v-1.56zm12.5 1.44c-0.76 0-1.38 0.26-1.84 0.78-0.46 0.52-0.69 1.29-0.69 2.34 0 1.03 0.21 1.81 0.69 2.34 0.48 0.53 1.11 0.81 1.84 0.81 0.73 0 1.31-0.28 1.78-0.81 0.47-0.53 0.72-1.32 0.72-2.37 0-1.05-0.23-1.83-0.69-2.34-0.46-0.51-1.05-0.75-1.81-0.75z'
  252.       }, 'http://www.w3.org/2000/svg'));
  253.   root.appendChild(lockup);
  254.   lockup.insertBefore(make('div', { class: 'to-rn' }), flex);
  255.  
  256.   let tmp, tagAttrs;
  257.   tmp           = flex.appendChild(make('div', { style: 'margin:10px 0 0' }));
  258.   tmp.innerHTML = 'This requester has not been reviewed yet.';
  259.  
  260.   tmp           = flex.appendChild(make('div', { class: 'hidden' }));
  261.   tmp.innerHTML = '<span class="to-th">&nbsp;</span>' + labels.map(v => `<span>${v}</span>`).join('');
  262.  
  263.   ['recent', 'all'].forEach(range => {
  264.     tmp           = flex.appendChild(make('div', { class: 'hidden' }));
  265.     const label   = `<span class="to-th">${range === 'all' ? 'All time' : 'Last 90 days'}</span>`;
  266.     let inner     = attrs.map((attr, i) => `<span data-range="${range}" data-attr="${attr}">---</span>`);
  267.     tmp.innerHTML = label + inner.join('');
  268.   });
  269.  
  270.   tagAttrs        = {
  271.     class      : 'hidden',
  272.     'data-rid' : '',
  273.     'data-path': '/requesters',
  274.     target     : '_blank',
  275.   };
  276.   tmp             = lockup.appendChild(make('a', tagAttrs));
  277.   tmp.textContent = 'View on Turkopticon';
  278.  
  279.   tagAttrs        = {
  280.     'data-rid'   : '',
  281.     'data-name' : '',
  282.     'data-title' : '',
  283.     'data-reward': '',
  284.     'data-path'  : '/reviews/new',
  285.     target       : '_blank',
  286.   };
  287.   tmp             = lockup.appendChild(make('a', tagAttrs));
  288.   tmp.textContent = 'Add a new review';
  289.  
  290.   return root;
  291. }
  292.  
  293. function buildLink(el, cb) {
  294.   const ds   = Object.keys(el.dataset).filter(k => k !== 'path'),
  295.         href = 'https://turkopticon.info' + el.dataset.path;
  296.  
  297.   ds.forEach(k => el.dataset[k] = cb(k));
  298.   if (el.dataset.path === '/requesters')
  299.     el.href = href + '/' + ds.map(k => el.dataset[k]).join('/');
  300.   else
  301.     el.href = href + '?' + ds.map(k => `${k}=${el.dataset[k]}`).join('&');
  302.  
  303.   return el;
  304. }
  305.  
  306. class ApiQuery {
  307.   constructor(action, method) {
  308.     this.URI     = 'https://api.turkopticon.info/' + (action || '');
  309.     this.method  = method || 'GET';
  310.     this.version = '2';
  311.   }
  312.  
  313.   send(params) {
  314.     this.params = params ? new Params(params) : null;
  315.  
  316.     return new Promise((accept, reject) => {
  317.       const xhr = new XMLHttpRequest(),
  318.             url = this.params ? `${this.URI}?${this.params.toString()}` : this.URI;
  319.       xhr.open(this.method, url);
  320.       xhr.responseType = 'json';
  321.       xhr.setRequestHeader('Accept', `application/vnd.turkopticon.v${this.version}+json`);
  322.       xhr.send();
  323.       xhr.onload = ({ target:{ response } }) => accept(response);
  324.       xhr.onerror = e => reject(e);
  325.     });
  326.   }
  327. }
  328.  
  329. class Params {
  330.   constructor(params) { this.params = params; }
  331.  
  332.   toString() { return Params.toParams(this.params); }
  333.  
  334.   static toParams(obj, scope) {
  335.     if (typeof obj === 'object' && !(obj instanceof Array))
  336.       return Object.keys(obj).map(k => Params.toParams(obj[k], scope ? `${scope}[${k}]` : k)).join('&');
  337.     else
  338.       return `${scope}=${obj.toString()}`;
  339.   }
  340. }
  341.  
  342. try {
  343.   appendCss();
  344.   const extr = new Extractor$$1().init().collect(qsa),
  345.         rids = Object.keys(extr.collection);
  346.  
  347.   new ApiQuery('requesters')
  348.     .send({ rids: rids, fields: { requesters: ['rid', 'aggregates'] } })
  349.     .then(response => response.data.reduce((a, b) => (a[b.attributes.rid] = b.attributes) && a, {}))
  350.     .then(data => rids.forEach(rid => extr.collection[rid].forEach(capsule => capsule.inject(data[rid]))))
  351.     .catch(console.error.bind(console, '#apierror'));
  352. } catch(err) {
  353.   console.error(err);
  354. }
  355.  
  356. function appendCss() {
  357.   const style     = document.head.appendChild(make('style'));
  358.   style.innerHTML = `
  359.   .to-rel { position:relative; }
  360.   .to-abs { position:absolute; }
  361.   .to-hdi { display:inline-block; font-size:12px; cursor:default; line-height:14px; }
  362.   .to-hdi:hover > svg { float:left; z-index:3; position:relative; }
  363.   .to-hdi:hover > .to-lockup { display:block; z-index:2; }
  364.   .to-hdi .hidden, .to-nhdi .hidden { display:none }
  365.   .to-nhdi { font-size:12px; }
  366.   .to-lockup { display:none; width:300px; top:-1px; left:-5px; background:#fff; padding:5px; box-shadow:0px 2px 10px 1px rgba(0,0,0,0.7); }
  367.   .to-lockup a { display:inline-block; width:50%; text-align:center; margin-top:10px; color:crimson; }
  368.   .to-rn { margin:0 0 3px 25px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  369.   .to-fc { display:flex; }
  370.   .to-fc > div { flex:1; }
  371.   .to-fc .to-th { font-weight:700; width:100%; background:#6a8ca3; color:#fff }
  372.   .to-fc span { display:block; padding:3px 0; margin:0; }
  373. `;
  374. }
  375.  
  376. }());