☰

Reddit - Remember RES tag action

Saves previously set tag and colour to use again.

目前為 2018-07-13 提交的版本，檢視 最新版本。

  1. // ==UserScript==
  2. // @name           Reddit - Remember RES tag action
  3. // @description    Saves previously set tag and colour to use again.
  4. // @author         James Skinner <spiralx@gmail.com> (http://github.com/spiralx)
  5. // @namespace      http://spiralx.org/
  6. // @version        0.8.0
  7. // @icon           data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAFiAAABYgAWToQQYAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuNWWFMmUAAAF3SURBVDhP1ZI/SAJhGMZN3WpKOAgsKGiIoKWg0K2LXIJWj6DAhpAgKMiW7irBqziHbhYE12sLGtWGKHBx0kHcQrBJXNIz9e35vvsQoj841g9+fHy8z/PyHZzrXzANNbgKF2ASHsOhOYGTUIb3cBSq4hyKa3Ey2GsMeMRvvzALd+AVvIPbcAb+yAq8hBehUOgxnU5TtVol27ap3W5TpVKhVCpFsiw/IHMusstwgOHxeDZM07T7/T5Rr0vUfacBvR7uHWIzwzBayK+zDm8KktFo9FXEifaXiHbnxAXEZKKtqcHSSCTygs6nBYuWZfEhR1eIzjbFBdzsYcma8xKQyWQInXmn6jCeSCQ6fDoEqqqyzxhzqgK/368Xi0UeKJfLpGka5fN5yuVyrEClUonPCoUCSZLE/oMvjGBwqut6q16vU6PRoGw2yxc0m02q1WoUj8fffD5fjGWdyvdMeL3ew2AweKsoynM4HH4KBAKW2+0+wExyIn8Hl+sDt5ENCrpr91QAAAAASUVORK5CYII=
  8. // @icon64         data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2029%2025%22%3E%3Cg%20transform=%22translate(1%201)%22%20stroke-width=%221.1%22%20fill-rule=%22evenodd%22%20fill=%22none%22%3E%3Ccircle%20stroke=%22#000%22%20cx=%222.7%22%20r=%222.7%22%20cy=%2210.7%22%20fill=%22#fff%22/%3E%3Ccircle%20stroke=%22#000%22%20cx=%2224.7%22%20r=%222.7%22%20cy=%2210.7%22%20fill=%22#fff%22/%3E%3Cpath%20stroke-linejoin=%22round%22%20stroke=%22#000%22%20stroke-linecap=%22round%22%20d=%22M21.23%201.35L15.83.08l-2%207.28%22/%3E%3Ccircle%20stroke=%22#000%22%20cx=%2223.13%22%20r=%222.13%22%20cy=%222.13%22%20fill=%22#fff%22/%3E%3Cellipse%20cy=%2214.99%22%20rx=%2212.24%22%20ry=%227.99%22%20stroke=%22#000%22%20cx=%2213.24%22%20fill=%22#fff%22/%3E%3Cg%20transform=%22translate(8%2012)%22%3E%3Ccircle%20stroke=%22#FF4500%22%20cx=%221%22%20r=%221.43%22%20cy=%221.43%22%20fill=%22#FF4500%22/%3E%3Ccircle%20stroke=%22#FF4500%22%20cx=%2210%22%20r=%221.43%22%20cy=%221.43%22%20fill=%22#FF4500%22/%3E%3Cpath%20stroke=%22#000%22%20d=%22M1.5%206.23C2.58%207.3%204.3%207.5%205.73%207.5m4.24-1.27C8.9%207.3%207.17%207.5%205.77%207.5%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E
  9. // @match          *://*.reddit.com/r/*/comments/*
  10. // @match          *://*.reddit.com/user/*
  11. // @grant          unsafeWindow
  12. // @run-at         document-end
  13. // @require        https://unpkg.com/jquery@3/dist/jquery.min.js
  14. // @require        https://greasyfork.org/scripts/370255-console-message/code/consolemessage.js?version=612436
  15. // ==/UserScript==
  16.  
  17. // @require        https://greasyfork.org/scripts/10443-datacache-simple-storage-wrapper/code/DataCache%20-%20Simple%20storage%20wrapper.js?version=56961
  18.  
  19. /* jshint asi: true, esnext: true, laxbreak: true */
  20. /* global jQuery, MutationSummary */
  21.  
  22. /**
  23. ==== 0.8.0 (2018.07.13) ====
  24. * Changed console.message require to use GreasyFork
  25.  
  26. ==== 0.7.0 (2018.02.13) ====
  27. * Changed the rendering of the tag preview to match how RES does it
  28. * Moved output to all use console.message
  29.  
  30. ==== 0.6.0 (2018.02.11) ====
  31. * Use unpkg.com for jQuery
  32. * Add console.message for logging
  33. * Use localstorage to save tags
  34. * Use new Tag class to store tag info
  35. * Updated ID for text field in tag popup
  36.  
  37. ==== 0.5.1 (2018.02.11) ====
  38. * Update icons to match other Reddit script
  39.  
  40. ==== 0.5.0 (26.08.2017) ====
  41. * Change to simple use of GM_getValue and GM_setValue for storage
  42.  
  43. ==== 0.4.0 (21.08.2017) ====
  44. * Update all other tags correctly when changing a user's tag
  45. * Handle removing all other tags when clearing a user's tag
  46.  
  47. ==== 0.3.0 (13.07.2017) ====
  48.  
  49. * Checks tag link to see if tag set, always overwrites if not
  50. * Updates other tags for same user on current page
  51.  
  52. ==== 0.2.1 (27.06.2017) ====
  53. * Changed timeout of field set function to 250ms
  54.  
  55. ==== 0.2.0 (31.05.2017) ====
  56. * Updated jQuery to v3.2.1
  57. * Added timeout before overriding tag/colour fields
  58. * Update preview when setting tag/colour
  59.  
  60. */
  61.  
  62. ; ($ => {
  63.   'use strict'
  64.   
  65.   const NORMAL = 'font-weight: normal; text-decoration: none; color: black'
  66.   const ERROR = 'font-weight: bold; color: #f4f'
  67.   const LINK = 'color: #05f; text-decoration: underline'
  68.   const BOLD = 'font-weight: bold'
  69.   const BLUE = [ 'color: #05f', 'color: #000' ]
  70.   const GREEN = [ 'color: #c1007f', 'color: #000' ]
  71.  
  72.   const qval = (v, n) => `${n}=%c${JSON.stringify(v)}%c`
  73.  
  74.   const _BOLD = { fontWeight: 'bold' }
  75.   const _GREEN = { color: '#c1007f' }
  76.   const _BLUE = { color: '#05f' }
  77.  
  78.   // --------------------------------------------------------------------
  79.  
  80.   const bgToTextColorMap = {
  81. 	none: 'inherit',
  82. 	aqua: 'black',
  83. 	black: 'white',
  84. 	blue: 'white',
  85. 	cornflowerblue: 'white',
  86. 	fuchsia: 'white',
  87. 	gray: 'white',
  88. 	green: 'white',
  89. 	lime: 'black',
  90. 	maroon: 'white',
  91. 	navy: 'white',
  92. 	olive: 'white',
  93. 	orange: 'white',
  94. 	orangered: 'white',
  95. 	pink: 'black',
  96. 	purple: 'white',
  97. 	red: 'white',
  98. 	silver: 'black',
  99. 	teal: 'white',
  100. 	white: 'black',
  101. 	yellow: 'black'
  102.   }
  103.  
  104.  
  105.   // --------------------------------------------------------------------------
  106.  
  107.   $.fn.outer = function() {
  108.     const elem = this[0] || {}
  109.     return elem.nodeType === Document.ELEMENT_NODE
  110.       ? elem.outerHTML
  111.       : null
  112.   }
  113.  
  114.   console.message.prototype.dump = function(obj) {
  115.     if (obj && typeof obj.dump === 'function') {
  116.       obj.dump.call(obj, this)
  117.     } else if (typeof obj === 'function') {
  118.       obj(this)
  119.     }
  120.     return this
  121.   }
  122.  
  123.   // --------------------------------------------------------------------------
  124.  
  125.   class Tag {
  126.     constructor(text = '', colour = 'none') {
  127.       this.text = text
  128.       this.colour = colour
  129.     }
  130.  
  131.     get css() {
  132.       const color = bgToTextColorMap[ this.colour ] // + ` !important`
  133.  
  134.       const backgroundColor = this.colour === 'none'
  135.         ? 'transparent'
  136.         : this.colour
  137.  
  138.       return { color, backgroundColor }
  139.     }
  140.  
  141.     buildPreviewTag() {
  142.       const $a = $(`<a>`, { href: '#', title: this.text })
  143.         .addClass(`userTagLink hasTag truncateTag`)
  144.         .css(this.css)
  145.         .text(this.text)
  146.  
  147.       return $(`<span>`)
  148.         .addClass('RESUserTag')
  149.         .append($a)
  150.     }
  151.  
  152.     apply($elem) {
  153.       return $elem.text(this.text).css(this.css)
  154.     }
  155.  
  156.     equals(other) {
  157.       return this.text === other.text && this.colour === other.colour
  158.     }
  159.  
  160.     json() {
  161.       return JSON.stringify(this)
  162.     }
  163.  
  164.     dump(msg) {
  165.       /* jshint ignore:start */
  166.       msg.text(this.text, {
  167.         ...this.css,
  168.         fontSize: '0.9em',
  169.         padding: '0 4px',
  170.         border: 'solid 1px rgb(199, 199, 199)',
  171.         borderRadius: 3,
  172.       })
  173.       /* jshint ignore:end */
  174.     }
  175.   }
  176.  
  177.   Tag.parse = str => {
  178.     const { text, colour } = JSON.parse(str)
  179.     return new Tag(text, colour)
  180.   }
  181.  
  182.   Tag.default = () => new Tag($('.pagename a').text(), 'olive')
  183.  
  184.   // --------------------------------------------------------------------------
  185.  
  186.   const tags = JSON.parse(localStorage.getItem('resrem') || '[]').map(v => new Tag(v.text, v.colour))
  187.  
  188.   function getLastTag() {
  189.     return tags.length > 0 ? tags[0] : Tag.default()
  190.   }
  191.  
  192.   function saveTag(tag) {
  193.     const idx = tags.findIndex(t => t.equals(tag))
  194.  
  195.     if (idx !== -1) {
  196.       tags.splice(idx, 1)
  197.     }
  198.  
  199.     tags.unshift(tag)
  200.  
  201.     localStorage.setItem('resrem', JSON.stringify(tags))
  202.  
  203.     return tag
  204.   }
  205.  
  206.   const msg = console.message().text('onScriptInit:', _BOLD)
  207.   tags.forEach(tag => { msg.text(' ').dump(tag) })
  208.   msg.print()
  209.  
  210.   // --------------------------------------------------------------------------
  211.  
  212.   function onTagModalOpened() {
  213.     const $tagField = $('#userTaggerText')
  214.     const $colourField = $('#userTaggerColor')
  215.     const $previewField = $('#userTaggerPreview')
  216.  
  217.     const previousTag = getLastTag()
  218.  
  219.     if (previousTag) {
  220.       $tagField.val(previousTag.text)
  221.       $colourField.val(previousTag.colour)
  222.  
  223.       const $previewTag = previousTag.buildPreviewTag()
  224.       console.info($previewTag.outer())
  225.  
  226.       $previewField
  227.         .empty()
  228.         .append($previewTag)
  229.     }
  230.   }  
  231.  
  232.  
  233.   // --------------------------------------------------------------------------
  234.  
  235.   function onSaveTag() {
  236.     const text = $('#userTaggerText').val()
  237.     const colour = $('#userTaggerColor').val()
  238.     const user = $('#userTaggerName').val()
  239.  
  240.     if (text) {
  241.       const newTag = saveTag(new Tag(text, colour))
  242.  
  243.       const msg = console.message()
  244.         .text('onSaveTag:', _BOLD)
  245.         .text(' ')
  246.         .dump(newTag)
  247.         .text('* ')
  248.       tags.slice(1).forEach(tag => { msg.text(' ').dump(tag) })
  249.       msg.print()
  250.  
  251.       $(`a.userTagLink[username=${user}]`)
  252.         .text(newTag.text)
  253.         .css(newTag.css)
  254.         .addClass('hasTag')
  255.         .removeClass('RESUserTagImage')
  256.     } else {
  257.       $(`a.userTagLink[username=${user}]`)
  258.         .text('')
  259.         .removeAttr('style')
  260.         .removeClass('hasTag')
  261.         .addClass('RESUserTagImage')
  262.     }
  263.   }
  264.   
  265.  
  266.   // --------------------------------------------------------------------------
  267.  
  268.   $('body')
  269.     .on('click.resrem', 'a.userTagLink:not(.hasTag)', () => {
  270.       setTimeout(onTagModalOpened, 250)
  271.     })
  272.     .on('click.resrem', '#userTaggerSave', onSaveTag)
  273.  
  274.   /*
  275.     <div class="RESHover RESHoverInfoCard RESDialogSmall" style="top: 387.918px; left: 215.767px; width: 350px; display: block; opacity: 1;">
  276.       <h3 class="RESHoverTitle" data-hover-element="0">
  277.         <div>
  278.           <span class="res-icon"></span>&nbsp;<span>Plan-Six</span>
  279.         </div>
  280.       </h3>
  281.  
  282.       <div class="RESCloseButton">x</div>
  283.  
  284.       <div class="RESHoverBody RESDialogContents" data-hover-element="1">
  285.         <form id="userTaggerToolTip">
  286.           <div class="fieldPair">
  287.             <label class="fieldPair-label" for="userTaggerText">Text</label>
  288.  
  289.             <input class="fieldPair-text" type="text" id="userTaggerText">
  290.           </div>
  291.  
  292.           <div class="fieldPair">
  293.             <label class="fieldPair-label" for="userTaggerColor">Color</label>
  294.  
  295.             <select id="userTaggerColor">
  296.               <option style="color: inherit; background-color: none" value="none">none</option>
  297.               <option style="color: black; background-color: aqua" value="aqua">aqua</option>
  298.               <option style="color: white; background-color: black" value="black">black</option>
  299.               <option style="color: white; background-color: blue" value="blue">blue</option>
  300.               <option style="color: white; background-color: cornflowerblue" value="cornflowerblue">cornflowerblue</option>
  301.               <option style="color: white; background-color: fuchsia" value="fuchsia">fuchsia</option>
  302.               <option style="color: white; background-color: gray" value="gray">gray</option>
  303.               <option style="color: white; background-color: green" value="green">green</option>
  304.               <option style="color: black; background-color: lime" value="lime">lime</option>
  305.               <option style="color: white; background-color: maroon" value="maroon">maroon</option>
  306.               <option style="color: white; background-color: navy" value="navy">navy</option>
  307.               <option style="color: white; background-color: olive" value="olive">olive</option>
  308.               <option style="color: white; background-color: orange" value="orange">orange</option>
  309.               <option style="color: white; background-color: orangered" value="orangered">orangered</option>
  310.               <option style="color: black; background-color: pink" value="pink">pink</option>
  311.               <option style="color: white; background-color: purple" value="purple">purple</option>
  312.               <option style="color: white; background-color: red" value="red">red</option>
  313.               <option style="color: black; background-color: silver" value="silver">silver</option>
  314.               <option style="color: white; background-color: teal" value="teal">teal</option>
  315.               <option style="color: black; background-color: white" value="white">white</option>
  316.               <option style="color: black; background-color: yellow" value="yellow">yellow</option>
  317.             </select>
  318.           </div>
  319.  
  320.           <div class="fieldPair">
  321.             <label class="fieldPair-label" for="userTaggerPreview">Preview</label>
  322.  
  323.             <span id="userTaggerPreview" style="color: white; background-color: olive;">
  324.               <span class="RESUserTag">
  325.                 <a class="userTagLink hasTag truncateTag" style="background-color: olive; color: white !important;" title="Sexist" href="javascript:void 0">Sexist</a>
  326.               </span>
  327.             </span>
  328.           </div>
  329.           <a class="userTagLink hasTag truncateTag" style="background-color: olive; color: white !important;" title="Feminist" href="javascript:void 0">Feminist</a>
  330.  
  331.           <div class="fieldPair res-usertag-ignore">
  332.             <label class="fieldPair-label" for="userTaggerIgnore">Ignore</label>
  333.  
  334.             <div id="userTaggerIgnoreContainer" class="toggleButton ">
  335.               <span class="toggleThumb"></span>
  336.               <div class="toggleLabel res-icon" data-enabled-text="" data-disabled-text=""></div>
  337.               <input id="userTaggerIgnore" name="userTaggerIgnore" type="checkbox">
  338.             </div>
  339.  
  340.             <a class="gearIcon" href="#res:settings/userTagger/hardIgnore" title="RES Settings > User Tagger > hardIgnore"> configure </a>
  341.           </div>
  342.  
  343.           <div class="fieldPair">
  344.             <label class="fieldPair-label" for="userTaggerLink">
  345.               <span class="userTaggerOpenLink">
  346.                 <a title="open link" href="javascript:void 0">Source URL</a>
  347.               </span>
  348.             </label>
  349.  
  350.             <input class="fieldPair-text" type="text" id="userTaggerLink" value="https://www.reddit.com/r/giantbomb/comments/7x251d/all_systems_goku_02/du5fpwr/">
  351.           </div>
  352.  
  353.           <div class="fieldPair">
  354.             <label class="fieldPair-label" for="userTaggerVotesUp" title="Upvotes you have given this redditor">Upvotes</label>
  355.  
  356.             <input type="number" style="width: 50px;" id="userTaggerVotesUp" value="0">
  357.           </div>
  358.  
  359.           <div class="fieldPair">
  360.             <label class="fieldPair-label" for="userTaggerVotesDown" title="Downvotes you have given this redditor">Downvotes</label>
  361.  
  362.             <input type="number" style="width: 50px;" id="userTaggerVotesDown" value="0">
  363.           </div>
  364.  
  365.           <div class="res-usertagger-footer">
  366.             <a href="/r/dashboard#userTaggerContents" target="_blank" rel="noopener noreferer">View tagged users</a>
  367.  
  368.             <input type="submit" id="userTaggerSave" value="✓ save tag">
  369.           </div>
  370.         </form>
  371.       </div>
  372.     </div>
  373.  
  374.   */
  375.  
  376. })(jQuery)
  377.  
  378. jQuery.noConflict(true)