☰

Kanka Jump to Post

Adds a dropdown to Kanka entity headers to quickly scroll to the selected post.

当前为 2023-11-04 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Kanka Jump to Post
  3. // @namespace    http://tampermonkey.net/
  4. // @version      5
  5. // @description  Adds a dropdown to Kanka entity headers to quickly scroll to the selected post.
  6. // @author       Salvatos
  7. // @match        https://app.kanka.io/*
  8. // @exclude      */html-export
  9. // @icon         https://www.google.com/s2/favicons?domain=kanka.io
  10. // @grant        GM_addStyle
  11. // ==/UserScript==
  12.  
  13. // Run only on entity Story pages
  14. if (document.getElementById('app').parentNode.classList.contains("entity-story")) {
  15. 	/* Preferences */
  16. 	const addTopLink = false;
  17.  
  18.     /* Set arrays*/
  19.     var hasPosts = 0;
  20.     var posts = [];
  21.     $("article.post-block").each(function(){
  22.         posts.push($(this));
  23.     });
  24.  
  25. 	/* Start dropdown */
  26. 	var postList= `
  27. 	<div class="btn-group jump-to-post">
  28. 		<button type="button" class="btn2 btn-sm join-item dropdown-toggle" tabindex="-1" data-toggle="dropdown" title="Entity posts" aria-expanded="false">
  29. 			<i class="fa fa-book" aria-hidden="true"></i>
  30. 		</button>
  31. 		<ul class="note-dropdown-menu dropdown-menu dropdown-posts" aria-label="Jump to an entity post">
  32. 	`;
  33.  
  34.     /* Insert each item name and ID */
  35. 	$.each( posts, function( key, value ) {
  36.         hasPosts++;
  37.         postList+= `
  38. 		    <li><a href="#` + $(this).attr('id') + `">` + $.trim($(this).find("h3.post-title").text()) + `</a></li>
  39.     	`;
  40.     });
  41.  
  42.     /* If there is no post, add a notice (won’t be necessary once Entries are treated like posts) */
  43.     if (hasPosts < 1) {
  44.         postList+= `<li><a><i>No post</i></a></li>`;
  45.     }
  46.  
  47.     /* Close dropdown */
  48.     postList+= `
  49. 		</ul>
  50. 	</div>
  51. 	`;
  52.  
  53. 	/* Insert element after post expand/collapse buttons */
  54.     $(postList).appendTo(".header-buttons > .join");
  55.  
  56.     /* Add "top" link to box headings, but don’t let it toggle post visibility */
  57.     if (addTopLink) {
  58.         $("<a class='to-top' href='#app' onclick='event.stopPropagation();'>&nbsp;^&nbsp;top</a>").appendTo(".post-title");
  59.     }
  60.  
  61.     /* Listener: If the target is a collapsed post, expand it first */
  62.     $(".jump-to-post a").click(function() {
  63.         let targetPost = $(this).attr('href');
  64.         if (targetPost != "undefined" && $(targetPost + " .element-toggle")[0].classList.contains("animate-collapsed")) {
  65.             $(targetPost + " .element-toggle")[0].click();
  66.         }
  67.     });
  68.  
  69.     GM_addStyle(`
  70.     .jump-to-post .fa-book:after {
  71. 		content: " ▼";
  72.         vertical-align: middle;
  73.         font-size: 8px;
  74. 	}
  75.     .jump-to-post li a:hover {
  76.     	color: var(--theme-input-text);
  77.     }
  78.     /* preserving necessary bootstrap classes */
  79.     .btn-group {
  80.     	position: relative;
  81.     	display: inline-block;
  82.     	vertical-align: middle;
  83.     }
  84.     .dropdown-menu {
  85. 		position: absolute;
  86. 		z-index: 1000;
  87. 		display: none;
  88. 		min-width: 160px;
  89. 		padding: 5px 0;
  90. 		margin: 2px 0 0;
  91. 		font-size: 14px;
  92. 		text-align: left;
  93. 		list-style: none;
  94. 		background-color: hsl(var(--b2)/1);
  95. 		background-clip: padding-box;
  96. 		border: 1px solid rgba(0,0,0,.15);
  97. 		border-radius: 4px;
  98. 		box-shadow: 0 6px 12px rgba(0,0,0,.175);
  99. 	}
  100.     .open > .dropdown-menu {
  101. 		display: block;
  102. 	}
  103.     .dropdown-menu > li > a {
  104. 		display: block;
  105. 		padding: 3px 20px;
  106. 		clear: both;
  107. 		white-space: nowrap;
  108. 	}
  109. 	`);
  110. }