☰

Up-down arrows buttons

Creates up-down arrows buttons on chart

当前为 2025-02-03 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name          Up-down arrows buttons
  3. // @description   Creates up-down arrows buttons on chart
  4. // @author        Konf
  5. // @namespace     https://greasyfork.org/users/424058
  6. // @icon          https://www.google.com/s2/favicons?sz=64&domain=tradingview.com
  7. // @version       1.1.0
  8. // @match         https://www.tradingview.com/*
  9. // @require       https://cdnjs.cloudflare.com/ajax/libs/arrive/2.4.1/arrive.min.js#sha512-wkU3qYWjenbM+t2cmvw2ADRRh4opbOYBjkhrPGHV7M6dcE/TR0oKpoDkWXfUs3HrulI2JFuTQyqPLRih1V54EQ==
  10. // @run-at        document-body
  11. // @grant         none
  12. // @noframes
  13. // ==/UserScript==
  14.  
  15. /* jshint esversion: 8 */
  16.  
  17. (function() {
  18.   'use strict';
  19.  
  20.   const DEBUG_OUTLINE = false;       // true adds red outlines to show hitboxes, false hides them
  21.  
  22.   const BUTTONS_WIDTH = '100%';      // set to 100% to adapt dynamically to price column, or use '50px'
  23.   const BUTTONS_HEIGHT = '60px';     // can't use percents here
  24.   const BUTTONS_BOTTOM_GAP = '40px'; // bottom padding, can't use percents here
  25.  
  26.   const ARROWS_SCALE = 1;      // can be fractional values like 1.4, maybe width is not even needed
  27.   const ARROWS_WIDTH = '40px'; // can not go well over 100%, use scale instead
  28.   const ARROWS_OPACITY = 0.8;  // 1 is fully visible and 0 is fully transparent, 0.5 is half
  29.   const ARROW_UP_SRC = 'https://img.icons8.com/fluency-systems-filled/2962ff/128/triangle.png';
  30.   const ARROW_DOWN_SRC = 'https://img.icons8.com/fluency-systems-filled/2962ff/128/triangle.png';
  31.   const ARROW_UP_ROTATE = 0;   // clockwise, may take negative values
  32.   const ARROW_DOWN_ROTATE = 180;
  33.  
  34.   const Q = {
  35.     priceAxis: 'div.price-axis',
  36.   };
  37.  
  38.   document.arrive(Q.priceAxis, { existing: true }, (priceAxis) => {
  39.     const btnsContainer = document.createElement('div');
  40.     const btnUp = document.createElement('button');
  41.     const btnDown = document.createElement('button');
  42.  
  43.     btnUp.addEventListener('click', () => pressKey('ArrowUp', 38));
  44.     btnDown.addEventListener('click', () => pressKey('ArrowDown', 40));
  45.  
  46.     for (const btn of [btnUp, btnDown]) {
  47.       btn.style.width = '100%';
  48.       btn.style.height = BUTTONS_HEIGHT;
  49.       btn.style.padding = '0';
  50.       btn.style.boxSizing = 'border-box';
  51.       btn.style.cursor = 'pointer';
  52.       btn.style.overflow = 'hidden';
  53.       btn.style.background = 'none';
  54.  
  55.       if (DEBUG_OUTLINE) {
  56.         btn.style.border = '1px solid red';
  57.       } else {
  58.         btn.style.border = 'none';
  59.       }
  60.  
  61.       const img = document.createElement('img');
  62.  
  63.       img.style.scale = ARROWS_SCALE;
  64.       img.style.width = ARROWS_WIDTH;
  65.       img.style.opacity = ARROWS_OPACITY;
  66.  
  67.       btn.append(img);
  68.     }
  69.  
  70.     btnUp.firstChild.src = ARROW_UP_SRC;
  71.     btnDown.firstChild.src = ARROW_DOWN_SRC;
  72.  
  73.     if (ARROW_UP_ROTATE) {
  74.       btnUp.firstChild.style.transform = `rotate(${ARROW_UP_ROTATE}deg)`;
  75.     }
  76.  
  77.     if (ARROW_DOWN_ROTATE) {
  78.       btnDown.firstChild.style.transform = `rotate(${ARROW_DOWN_ROTATE}deg)`;
  79.     }
  80.  
  81.     btnsContainer.style.width = BUTTONS_WIDTH;
  82.     btnsContainer.style.position = 'absolute';
  83.     btnsContainer.style.bottom = BUTTONS_BOTTOM_GAP;
  84.     btnsContainer.style.right = '0';
  85.     btnsContainer.style.zIndex = '3';
  86.  
  87.     for (const el of [
  88.       btnsContainer, btnUp, btnDown, btnUp.firstChild, btnDown.firstChild,
  89.     ]) {
  90.       el.style.userSelect = 'none';
  91.       el.setAttribute('draggable', 'false');
  92.       el.addEventListener('dragstart', (ev) => {
  93.         ev.preventDefault();
  94.         ev.stopImmediatePropagation();
  95.       });
  96.     }
  97.  
  98.     btnsContainer.append(btnUp, btnDown);
  99.     priceAxis.parentElement.append(btnsContainer);
  100.   });
  101.  
  102.   // utils ----------------------------------------------------------------------
  103.  
  104.   function pressKey(key, code) {
  105.     const event = new KeyboardEvent('keydown', {
  106.       key,
  107.       code,
  108.       keyCode: code,
  109.       which: code,
  110.       bubbles: true,
  111.     });
  112.  
  113.     document.body.dispatchEvent(event);
  114.   }
  115.  
  116.   // ---------------------------------------------------------------------- utils
  117. }());