☰

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.

目前为 2019-04-29 提交的版本。查看 最新版本。

  1. // ==UserScript==
  2. // @name         hypothes.isFloatingButton
  3. // @version      1.0.1
  4. // @author       Lancelotly.Sagirrarimeow
  5. // @description  This is a shortcut for using hypothes.is service. It combines the hypothes.is bookmarklet to the page directly for a further convience.
  6. // @match        *://*/*
  7. // @exclude      https://hypothes.is/*
  8. // @grant        GM_addStyle
  9. // @namespace https://greasyfork.org/users/296362
  10. // ==/UserScript==
  11.  
  12. /*--- Create a button in a container div.  It will be styled and positioned with CSS.*/
  13. var zNode = document.createElement('div');
  14.  
  15. zNode.innerHTML = '<div id="fButton" data-toggle="tooltip" data-placement="left" data-original-title="Create"></div>';
  16. zNode.setAttribute('id', 'myFloatingButton');
  17. document.body.appendChild(zNode);
  18.  
  19. //--- Activate the newly added button.
  20. document.getElementById("fButton").addEventListener(
  21.     "click", buttonClickAction, false
  22. );
  23.  
  24. function buttonClickAction(zEvent) {
  25.     javascript: (function () {
  26.         window.hypothesisConfig = function () {
  27.             return {
  28.                 showHighlights: true,
  29.                 appType: 'bookmarklet'
  30.             };
  31.         };
  32.         var d = document,
  33.             s = d.createElement('script');
  34.         s.setAttribute('src', 'https://hypothes.is/embed.js');
  35.         d.body.appendChild(s)
  36.     })();
  37. }
  38.  
  39. //--- Style our newly added elements using CSS.
  40. GM_addStyle(`
  41. #myFloatingButton {
  42.     width: 2em;
  43.     height: 2em;
  44.     border-radius: 50%;
  45.     /* background: #db4437; */
  46.     background-image: url(https://d242fdlp0qlcia.cloudfront.net/uploads/2017/04/28221646/hypothesis-favicon72x72-e1493417806154.png);
  47.     background-repeat: no-repeat;
  48.     background-size: cover;
  49.     position: fixed;
  50.     bottom: 20px;
  51.     left: 20px;
  52.     box-shadow: 0px 2px 5px #666;
  53. }
  54.  
  55. #fButton {
  56.     cursor: pointer;
  57.     width: 2em;
  58.     height: 2em;
  59. }
  60.  
  61. #myFloatingButton p {
  62.     color: white;
  63.     display: block;
  64.     text-align: center;
  65.     margin: 0px;
  66.     /* line-height: 25px; */
  67.     font-family: 'Roboto';
  68.     /* animation: plus-out 0.3s; */
  69.     /* transition: all 0.3s; */
  70.     font-size: 18px;
  71. }
  72. `);