☰

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. `);