mmmturkeybacon Preview Overlay

Covers a HIT's workspace with a gray overlay if the HIT has not been accepted. Clicking once on the overlay will remove the gray foreground and allow you to interact with the HIT's contents while still showing a message warning you the hit has not been accepted.

  1. // ==UserScript==
  2. // @name mmmturkeybacon Preview Overlay
  3. // @version 1.02
  4. // @description Covers a HIT's workspace with a gray overlay if the HIT has not been accepted. Clicking once on the overlay will remove the gray foreground and allow you to interact with the HIT's contents while still showing a message warning you the hit has not been accepted.
  5. // @author mmmturkeybacon
  6. // @namespace http://userscripts.org/users/523367
  7. // @include http://*/*
  8. // @include https://*/*
  9. // @exclude https://www.mturk.com/mturk/takequalificationtest
  10. // @require https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js
  11. // @grant GM_log
  12. // ==/UserScript==
  13.  
  14. $(window).load(function()
  15. {
  16. var $hit_wrapper = $('div[id="hit-wrapper"]');
  17. if(window.location.hostname == 'www.mturk.com' && $hit_wrapper.length > 0)
  18. {//internal HIT
  19. $hit_wrapper.css({"position": "relative"});
  20. var offset = $hit_wrapper.offset();
  21. $hit_wrapper.append('<div id="mtb_preview_overlay" \
  22. title="This HIT has not been accepted. Click once to interact with content." \
  23. style="position: absolute; left: 0px; top: 0px; \
  24. width: 100%; height: 100%; \
  25. opacity: 0.6; background-color: #000; z-index: 99; \
  26. color: #333; \
  27. font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif; \
  28. font-size: 14px; \
  29. line-height: 20px; \
  30. cursor: not-allowed"> \
  31. <h1 style="position: fixed; left: '+offset.left+'; top:'+offset.top+'; \
  32. color: #333; \
  33. font-family: inherit; \
  34. font-weight: 700; \
  35. color: inherit; \
  36. text-rendering: optimizelegibility; \
  37. line-height: 40px; \
  38. font-size: 10em; \
  39. margin: 0px auto; \
  40. padding: 75px 0px 0px 0px; \
  41. text-align:center; \
  42. width: 100%;">Preview</h1></div>');
  43.  
  44. $('div[id="mtb_preview_overlay"]').bind('click', function()
  45. {
  46. this.style.pointerEvents = "none";
  47. this.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
  48. this.style.color = "#F00";
  49. });
  50. }
  51. else if(window.location != window.top.location === true && window.location.href.indexOf("ASSIGNMENT_ID_NOT_AVAILABLE") > -1)
  52. {//external HIT
  53. $('div[id="preview_overlay"]').remove();
  54. $('body').append('<div id="mtb_preview_overlay" \
  55. title="This HIT has not been accepted. Click once to interact with content." \
  56. style="position: fixed; left: 0px; top: 0px; \
  57. width: 100%; height: 100%; \
  58. opacity: 0.6; background-color: #000; z-index: 99; \
  59. color: #333; \
  60. font-family: &quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif; \
  61. font-size: 14px; \
  62. line-height: 20px; \
  63. cursor: not-allowed"> \
  64. <h1 style="color: #333; \
  65. font-family: inherit; \
  66. font-weight: 700; \
  67. color: inherit; \
  68. text-rendering: optimizelegibility; \
  69. line-height: 40px; \
  70. font-size: 10em; \
  71. margin: 0px auto; \
  72. padding: 75px 0px 0px 0px; \
  73. text-align:center; \
  74. width: 100%;">Preview</h1></div>');
  75.  
  76. $('div[id="mtb_preview_overlay"]').bind('click', function()
  77. {
  78. this.style.pointerEvents = "none";
  79. this.style.backgroundColor = "rgba(0, 0, 0, 0.0)";
  80. this.style.color = "#F00";
  81. });
  82. }
  83. });