hypothes.isFloatingButton

This is a shortcut for using hypothes.is service. It combines the hypothes.is bookmarklet to the page directly for a further convience.

  1. // ==UserScript==
  2. // @name hypothes.isFloatingButton
  3. // @namespace https://greasyfork.org/users/296362
  4. // @version 240117a
  5. // @author Lancelotly.Sagirrarimeow
  6. // @description This is a shortcut for using hypothes.is service. It combines the hypothes.is bookmarklet to the page directly for a further convience.
  7. // @match *://*/*
  8. // @exclude https://hypothes.is/*
  9. // @noframes
  10. // @run-at document-idle
  11. // @grant GM_addStyle
  12. // @icon data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjMgNzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTYzIDU4YTUgNSAwIDAgMSAtNSA1aC0xOWwtNy41IDEwLTcuOC0xMGgtMTguN2E1IDUgMCAwIDEgLTUtNXYtNTNhNSA1IDAgMCAxIDUtNWg1M2E1IDUgMCAwIDEgNSA1eiIgZmlsbD0iI2NlMjAyNyIvPjxnIGZpbGw9IiNmZmYiPjx0ZXh0IGZvbnQtZmFtaWx5PSJQVFNhbnMtQm9sZCwgUFQgU2FucyIgZm9udC1zaXplPSI1OC4xNSIgZm9udC13ZWlnaHQ9IjcwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy43NyA1Mi4zOSkiPmg8L3RleHQ+PGNpcmNsZSBjeD0iNDkuOTEiIGN5PSI0NyIgcj0iNSIvPjwvZz48L3N2Zz4=
  13. // @connect *
  14. // ==/UserScript==
  15.  
  16. /*--- Create a button in a container div. It will be styled and positioned with CSS.*/
  17. function buttonClickAction(t) {
  18. ! function () {
  19. window.hypothesisConfig = function () {
  20. return {
  21. showHighlights: !0
  22. }
  23. };
  24. var t = document,
  25. e = t.createElement("script");
  26. e.setAttribute("src", "https://hypothes.is/embed.js")
  27. t.body.appendChild(e)
  28. }()
  29. }
  30.  
  31. function findMaxZindex() {
  32. const zIndexes = [];
  33. document
  34. .querySelectorAll("*")
  35. .forEach(el => {
  36. const zIndex = parseInt(window.getComputedStyle(el).zIndex, 10);
  37. if (!isNaN(zIndex)) {
  38. zIndexes.push(zIndex);
  39. }
  40. });
  41. return Math.max.apply(1, zIndexes);
  42. }
  43.  
  44. var hNode = document.createElement("div"),
  45. z = findMaxZindex();
  46. hNode.innerHTML = '<div id="fButton" data-toggle="tooltip" data-placement="left" data-original-title="Create"></div>'
  47. hNode.style.zIndex = z + 1
  48. hNode.setAttribute("id", "myFloatingButton")
  49. document.body.appendChild(hNode)
  50. document.getElementById("fButton").addEventListener("click", buttonClickAction, !1);
  51.  
  52. //--- Style our newly added elements using CSS.
  53. GM_addStyle(`
  54. #myFloatingButton {
  55. width: 25px;
  56. height: 25px;
  57. border-radius: 50%;
  58. background-image: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgNjMgNzMiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTYzIDU4YTUgNSAwIDAgMSAtNSA1aC0xOWwtNy41IDEwLTcuOC0xMGgtMTguN2E1IDUgMCAwIDEgLTUtNXYtNTNhNSA1IDAgMCAxIDUtNWg1M2E1IDUgMCAwIDEgNSA1eiIgZmlsbD0iI2NlMjAyNyIvPjxnIGZpbGw9IiNmZmYiPjx0ZXh0IGZvbnQtZmFtaWx5PSJQVFNhbnMtQm9sZCwgUFQgU2FucyIgZm9udC1zaXplPSI1OC4xNSIgZm9udC13ZWlnaHQ9IjcwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNy43NyA1Mi4zOSkiPmg8L3RleHQ+PGNpcmNsZSBjeD0iNDkuOTEiIGN5PSI0NyIgcj0iNSIvPjwvZz48L3N2Zz4=);
  59. background-repeat: no-repeat;
  60. background-size: 60%;
  61. background-color: black;
  62. background-position-x: center;
  63. background-position-y: 65%;
  64. position: fixed;
  65. bottom: 20px;
  66. left: -15px;
  67. box-shadow: -2px 2px 9px #202020;
  68. transition: width 0.5s, height 0.5s;
  69. }
  70.  
  71. #fButton {
  72. cursor: pointer;
  73. width: 2em;
  74. height: 2em;
  75. }
  76.  
  77. #myFloatingButton p {
  78. color: white;
  79. display: block;
  80. text-align: center;
  81. margin: 0px;
  82. font-family: 'Roboto';
  83. font-size: 18px;
  84. }
  85.  
  86. #myFloatingButton:hover {
  87. width: 30px;
  88. height: 30px;
  89. left: 0;
  90. }
  91.  
  92. `);