☰

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. })();