GC - Custom Sidebar Links

Add custom links to the sidebar

  1. // ==UserScript==
  2. // @name GC - Custom Sidebar Links
  3. // @namespace https://greasyfork.org/users/319295
  4. // @version 0.1.1
  5. // @description Add custom links to the sidebar
  6. // @author wibreth
  7. // @icon https://www.google.com/s2/favicons?sz=64&domain=grundos.cafe
  8. // @match https://grundos.cafe/*
  9. // @match https://www.grundos.cafe/*
  10. // @grant GM_addStyle
  11. // @grant GM_setValue
  12. // @grant GM_getValue
  13. // ==/UserScript==
  14.  
  15. (function() {
  16. 'use strict';
  17. /* globals $:false */
  18.  
  19. GM_addStyle(`#custom div label {
  20. width: 380px;
  21. display: flex;
  22. align-items: baseline;
  23. justify-content: space-between;
  24. }
  25.  
  26. #custom div input[type=text] {
  27. width: 300px;
  28. flex-grow: 0;
  29. }
  30.  
  31. #custom div > div > div {
  32. border: 0;
  33. padding: 0;
  34. display: block;
  35. }
  36.  
  37. .custom img {
  38. max-height: 35px;
  39. }`);
  40.  
  41.  
  42. function populateDropdown() {
  43. const linksList = GM_getValue('linkslist', []);
  44. $('#delete-links-select').empty();
  45. $('#delete-links-select').append('<option selected value="-1">Delete a custom link</option>');
  46. for (let i = 0; i < linksList.length; i++) {
  47. $('#delete-links-select').append(`<option value="${i}">${linksList[i].name}</option>`);
  48. }
  49. }
  50.  
  51. function editSidebar() {
  52. const html = `<h2 class="arrow" id="custom-header" data-id="custom">Custom Links <span style="float:right">↓</span></h2>
  53. <div id="custom" class="sidebar_section" style="display: none;">
  54. <label>View as text links? <input type="checkbox" id="custom-text" checked=""></label><br>
  55. <select id="delete-links-select" name="deletelinks">
  56. </select>
  57. <input type="button" id="delete-links-btn" value="Delete">
  58. <div style="display: flex; flex-direction: column">
  59. <div>
  60. <div>
  61. <label>Name: <input type="text" id="custom-name" class="big-input mt-1" maxlength="100" value=""></label>
  62. <label>Image: <input type="text" id="custom-image" class="big-input mt-1" maxlength="250" value=""></label>
  63. <label>URL: <input type="text" id="custom-url" class="big-input mt-1" maxlength="250" value=""></label>
  64. </div>
  65. <input type="button" id="insert-link" value="Insert">
  66. </div>
  67. </div>
  68. </div>`
  69. ;
  70.  
  71. $('#sidebarcss').after(html);
  72. populateDropdown();
  73.  
  74. const textLinks = GM_getValue('linkstext', true);
  75. if (!textLinks)
  76. $('#custom-text').prop('checked', false)
  77.  
  78. $('#delete-links-btn').click((e) => {
  79. const idx = parseInt($('#delete-links-select').val());
  80. let linksList = GM_getValue('linkslist', []);
  81. if (idx < 0 || !Number.isInteger(idx) || idx >= linksList.length) {
  82. alert('Cannot delete invalid link');
  83. return;
  84. }
  85. if (!confirm(`Are you sure you want to delete the link to ${$(`#delete-links-select option[value=${idx}]`).text()}?`)) {
  86. e.preventDefault();
  87. return;
  88. }
  89. $(`#delete-links-select option[value=${idx}]`).remove();
  90. linksList.splice(idx, 1);
  91. GM_setValue('linkslist', linksList);
  92.  
  93. addLinks();
  94. });
  95.  
  96. $('#custom-text').change(function() {
  97. const textLinks = $(this).prop('checked');
  98. GM_setValue('linkstext', textLinks);
  99.  
  100. addLinks();
  101. });
  102.  
  103. $('#insert-link').click(() => {
  104. const name = $('#custom-name').val();
  105. const img = $('#custom-image').val();
  106. const url = $('#custom-url').val();
  107.  
  108. if (!(name && url)) {
  109. alert('Cannot insert link. Please fill out name and url fields.');
  110. return;
  111. }
  112.  
  113. let link = {
  114. 'name': name,
  115. 'image': img ? img : 'https://d2yr2ruk7u0bm3.cloudfront.net/images/tnt_alt_icon.gif',
  116. 'url': url
  117. }
  118.  
  119. let linksList = GM_getValue('linkslist', []);
  120. linksList.push(link);
  121. GM_setValue('linkslist', linksList);
  122.  
  123. populateDropdown();
  124. addLinks();
  125.  
  126. $('#custom-name').val('');
  127. $('#custom-image').val('');
  128. $('#custom-url').val('');
  129. });
  130.  
  131. }
  132.  
  133. //removes and re-adds the custom links module on the sidebar
  134. function addLinks() {
  135. $('.custom').remove();
  136.  
  137.  
  138. const linksList = GM_getValue('linkslist', []);
  139. const textLinks = GM_getValue('linkstext', true);
  140.  
  141. $('#aio_sidebar').append(`<div class="custom"><strong class="aio-section-header">Custom Links</strong><div class="${textLinks ? 'aioTxt' : 'aioImg'}"></div></div>`);
  142.  
  143. for (const link of linksList) {
  144. const linkContent = textLinks ? link.name : `<img src="${link.image}">`;
  145. $('.custom .aioTxt, .custom .aioImg').append(`<div><a href="${link.url}" title="${link.name}">${linkContent}</a></div>`);
  146. }
  147.  
  148. }
  149.  
  150.  
  151. $('document').ready(() => {
  152. addLinks();
  153.  
  154. if (window.location.href.includes('sidebar'))
  155. editSidebar();
  156. });
  157.  
  158. })();