H2P: notify util

通知栏

目前为 2020-09-13 提交的版本。查看 最新版本

此脚本不应直接安装,它是一个供其他脚本使用的外部库。如果您需要使用该库,请在脚本元属性加入:// @require https://update.cn-greasyfork.org/scripts/411280/847403/H2P%3A%20notify%20util.js

  1. // ==UserScript==
  2. // @name H2P: notify util
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.0.1
  5. // @icon http://www.douyutv.com/favicon.ico
  6. // @description 通知栏
  7. // @author H2P
  8. // @compatible chrome
  9. // ==/UserScript==
  10.  
  11. ((w) => {
  12. 'use strict';
  13.  
  14. const style_notify = document.createElement('style');
  15. style_notify.id = 'h2p-style-notify';
  16. style_notify.innerHTML = `
  17. #h2p-div-notify-container {
  18. position: fixed;
  19. width: 280px;
  20. bottom: 20px;
  21. right: 20px;
  22. overflow: hidden;
  23. z-index: 9999;
  24. }
  25.  
  26. .h2p-div-notify-item {
  27. position: relative;
  28. width: 250px;
  29. height: 25px;
  30. right: -280px;
  31. padding: 9px 13px;
  32. margin: 6px 0;
  33. border: 1px solid;
  34. border-radius: 5px;
  35. display: flex;
  36. align-items: center;
  37. transition: left 1.5s, right 1.5s;
  38. }
  39.  
  40. .h2p-div-notify-item-in {
  41. right: 0;
  42. }
  43.  
  44. .h2p-div-notify-close {
  45. position: absolute;
  46. top: 15px;
  47. right: 20px;
  48. cursor: pointer;
  49. }
  50. .h2p-div-notify-close::before, .h2p-div-notify-close::after {
  51. position: absolute;
  52. content: '';
  53. width: 12px;
  54. height: 2px;
  55. background: chocolate;
  56. }
  57. .h2p-div-notify-close::before {
  58. transform: rotate(45deg);
  59. }
  60. .h2p-div-notify-close::after {
  61. transform: rotate(-45deg);
  62. }
  63. `;
  64. document.body.appendChild(style_notify);
  65. const div_notify = document.createElement('div');
  66. div_notify.id = 'h2p-div-notify-container';
  67. document.body.appendChild(div_notify);
  68.  
  69. w.$notifyMgr = (() => {
  70. const Notify = function() {
  71. this.type = {
  72. default: {
  73. bgColor: '#e6ffff',
  74. bdColor: '#23bdd9'
  75. },
  76. success: {
  77. bgColor: '#f6ffec',
  78. bdColor: '#53752d'
  79. },
  80. warn: {
  81. bgColor: '#fefbe6',
  82. bdColor: '#fdc446'
  83. },
  84. error: {
  85. bgColor: '#fff0ef',
  86. bdColor: '#e75252'
  87. }
  88. }
  89.  
  90. this.createNotify = ({ msg = '', type = notifyType.default, autoClose = true }) => {
  91. const ran = Math.floor(Math.random() * 100000000);
  92. const div_notify_item = document.createElement('div');
  93. div_notify_item.id = `h2p-div-notify-${ran}`;
  94. div_notify_item.classList.add('h2p-div-notify-item');
  95. div_notify_item.style.backgroundColor = type.bgColor;
  96. div_notify_item.style.borderColor = type.bdColor;
  97. div_notify_item.innerHTML = msg;
  98. $H2P('div#h2p-div-notify-container').appendChild(div_notify_item);
  99.  
  100. const div_notify_item_close = document.createElement('div');
  101. div_notify_item_close.id = `h2p-div-notify-close-${ran}`;
  102. div_notify_item_close.classList.add('h2p-div-notify-close');
  103. div_notify_item_close.addEventListener('click', (e) => { this.closeNotify(`h2p-div-notify-${e.target.id.match(/[a-zA-Z\-]*(\d+)[a-zA-Z\-]*/g)[1]}`); })
  104. $H2P('div#h2p-div-notify-container').appendChild(div_notify_item_close);
  105.  
  106. setTimeout((id) => {
  107. // 显示通知栏
  108. $H2P(`#${id}`).classList.add('h2p-div-notify-item-in');
  109. autoClose && setTimeout(this.closeNotify, 4000, id);
  110. }, 100, div_notify_item.id);
  111. }
  112.  
  113. this.closeNotify = (id = '') => {
  114. $H2P(`#${id}`).classList.remove('h2p-div-notify-item-in');
  115. setTimeout(() => {
  116. $H2P('div#h2p-div-notify-container').removeChild($H2P(`#${id}`));
  117. }, 1500);
  118. }
  119. }
  120. return new Notify();
  121. })();
  122. })(window);