☰

LibraryThing reply preview (HTML)

Shows the message that's being replied to in a hover tooltip, including mark-up

  1. // ==UserScript==
  2. // @name        LibraryThing reply preview (HTML)
  3. // @namespace   https://greasyfork.org/en/users/11592-max-starkenburg
  4. // @description Shows the message that's being replied to in a hover tooltip, including mark-up
  5. // @include     http*://*librarything.tld/topic*
  6. // @include     http*://*librarything.com/topic*
  7. // @include     http*://*librarything.tld/talktopic*
  8. // @include     http*://*librarything.com/talktopic*
  9. // @version     2
  10. // @grant       none
  11. // ==/UserScript==
  12.  
  13. jQuery("head").append('<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>')  
  14.  
  15. jQuery("head").append('<style type="text/css"> \
  16.   .ui-tooltip { padding: 8px 8px 0; background-color: #fff; position: absolute; z-index: 9999; box-shadow: 0 0 5px #888; min-width: 300px; max-width: 600px; max-width: calc(100% - 500px); }\
  17.   .ui-tooltip h3 { font-size: 10px; line-height: normal; } \
  18.   .ui-tooltip h3 .b { color: #000 !important; } \
  19.   .ui-tooltip .mT { font-size: 10px !important; } \
  20.   .ui-tooltip br { line-height: 8px; } \
  21.   .ui-arrow { width: 70px; height: 12px; top: 100%; left: 0; overflow: hidden; position: absolute; }\
  22.   .ui-arrow.top { top: auto; bottom: 100%; }\
  23.   .ui-arrow:after { content: ""; background-color: #fff; position: absolute; top: -20px; width: 25px; height: 25px; margin-left: 20px; box-shadow: 0 0 5px #888; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); tranform: rotate(45deg); } \
  24.   .ui-arrow.top:after { bottom: -20px; top: auto; } \
  25.   </style>');
  26.  
  27. function waitForJQueryUI() {  
  28.   if (window.jQuery.ui) {
  29.     jQuery("#msgs").tooltip({
  30.       items: ".mT a[href^='#']:not(.ed)",
  31.       content: function() {
  32.         var ref = jQuery(this).attr("href").substring(1);
  33.         var ref = jQuery(".fp:has(a[name='" + ref + "'])");
  34.         if (ref.length) {
  35.           return ref.clone().find(".ed, .tj").remove().end().html();
  36.         }
  37.       },
  38.       position: {
  39.         my: "left-20 bottom-15",
  40.         at: "left top",
  41.         using: function(position, feedback) {
  42.           jQuery( this ).css( position );
  43.           jQuery("<div>")
  44.             .addClass( "ui-arrow" )
  45.             .addClass( feedback.vertical )
  46.             .addClass( feedback.horizontal )
  47.             .appendTo( this );
  48.         }
  49.       }
  50.     });
  51.   } else {
  52.     setTimeout(waitForJQueryUI, 100);
  53.   }
  54. }
  55.  
  56. // There's an error if we don't wait for jQuery UI to get loaded before the .tooltip() call
  57. waitForJQueryUI();