LinkedIn Tool

Minor enhancements to LinkedIn. Mostly just hotkeys.

当前为 2023-08-05 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name LinkedIn Tool
  3. // @namespace dalgoda@gmail.com
  4. // @match https://www.linkedin.com/*
  5. // @version 1.10.0
  6. // @author Mike Castle
  7. // @description Minor enhancements to LinkedIn. Mostly just hotkeys.
  8. // @license GPL-3.0-or-later; https://www.gnu.org/licenses/gpl-3.0.txt
  9. // @supportURL https://github.com/nexushoratio/userscripts/blob/main/linkedin-tool.md
  10. // @require https://cdn.jsdelivr.net/npm/@violentmonkey/shortcut@1
  11. // @require https://cdn.jsdelivr.net/npm/@violentmonkey/dom@2
  12. // ==/UserScript==
  13.  
  14. /* global VM */
  15.  
  16. (function () {
  17. 'use strict';
  18.  
  19. console.debug('Parsing successful.');
  20.  
  21. // I'm lazy. The version of emacs I'm using does not support
  22. // #private variables out of the box, so using underscores until I
  23. // get a working configuration.
  24. class Page {
  25. // The immediate following can be set if derived classes
  26.  
  27. // What pathname part of the URL this page should handle. The
  28. // special case of null is used by the Pages class to represent
  29. // global keys.
  30. _pathname;
  31.  
  32. // CSS selector for capturing clicks on this page. If overridden,
  33. // then the class should also provide a _clickHandler() method.
  34. _click_handler_selector = null;
  35.  
  36. // List of keystrokes to register automatically. They are objects
  37. // with keys of `seq`, `desc`, and `func`. The `seq` is used to
  38. // define they keystroke sequence to trigger the function. The
  39. // `desc` is used to create the help screen. The `func` is a
  40. // function, usually in the form of `this.methodName`. The
  41. // function is bound to `this` before registering it with
  42. // VM.shortcut.
  43. _auto_keys = [];
  44.  
  45. // Private members.
  46.  
  47. _keyboard = new VM.shortcut.KeyboardService();
  48.  
  49. // Tracks which HTMLElement holds the `onclick` function.
  50. _click_handler_element = null;
  51.  
  52. // Magic for VM.shortcut. This disables keys when focus is on an
  53. // input type field.
  54. static _navOption = {
  55. caseSensitive: true,
  56. condition: '!inputFocus',
  57. };
  58.  
  59. constructor() {
  60. this._boundClickHandler = this._clickHandler.bind(this);
  61. }
  62.  
  63. start() {
  64. for (const {seq, func} of this._auto_keys) {
  65. this._addKey(seq, func.bind(this));
  66. }
  67. }
  68.  
  69. get pathname() {
  70. return this._pathname;
  71. }
  72.  
  73. get keyboard() {
  74. return this._keyboard;
  75. }
  76.  
  77. activate() {
  78. this._keyboard.enable();
  79. this._enableClickHandler();
  80. }
  81.  
  82. deactivate() {
  83. this._keyboard.disable();
  84. this._disableClickHandler();
  85. }
  86.  
  87. get helpHeader() {
  88. return this.constructor.name;
  89. }
  90.  
  91. get helpContent() {
  92. return this._auto_keys;
  93. }
  94.  
  95. _addKey(seq, func) {
  96. this._keyboard.register(seq, func, Page._navOption);
  97. }
  98.  
  99. _enableClickHandler() {
  100. if (this._click_handler_selector) {
  101. // Page is dynamically building, so keep watching it until the
  102. // element shows up.
  103. VM.observe(document.body, () => {
  104. const element = document.querySelector(this._click_handler_selector);
  105. if (element) {
  106. this._click_handler_element = element;
  107. this._click_handler_element.addEventListener('click', this._boundClickHandler);
  108.  
  109. return true;
  110. }
  111. });
  112. }
  113. }
  114.  
  115. _disableClickHandler() {
  116. if (this._click_handler_element) {
  117. this._click_handler_element.removeEventListener('click', this._boundClickHandler);
  118. this._click_handler_element = null
  119. }
  120. }
  121.  
  122. // Override this function in derived classes that want to react to
  123. // random clicks on a page, say to update current element in
  124. // focus.
  125. _clickHandler(evt) {
  126. alert(`Found a bug! ${this.constructor.name} wants to handle clicks, but forgot to create a handler.`);
  127. }
  128.  
  129. }
  130.  
  131. class Global extends Page {
  132. _pathname = null;
  133. _auto_keys = [
  134. {seq: '?', desc: 'Show keyboard help', func: this._help},
  135. {seq: '/', desc: 'Go to Search box', func: this._gotoSearch},
  136. {seq: 'g h', desc: 'Go Home (aka, Feed)', func: this._goHome},
  137. {seq: 'g m', desc: 'Go to My Network', func: this._gotoMyNetwork},
  138. {seq: 'g j', desc: 'Go to Jobs', func: this._gotoJobs},
  139. {seq: 'g g', desc: 'Go to Messaging', func: this._gotoMessaging},
  140. {seq: 'g n', desc: 'Go to Notifications', func: this._gotoNotifications},
  141. {seq: 'g p', desc: 'Go to Profile (aka, Me)', func: this._gotoProfile},
  142. {seq: 'g b', desc: 'Go to Business', func: this._gotoBusiness},
  143. {seq: 'g l', desc: 'Go to Learning', func: this._gotoLearning},
  144. ];
  145.  
  146. get helpId() {
  147. return this._helpId;
  148. }
  149.  
  150. set helpId(val) {
  151. this._helpId = val;
  152. }
  153.  
  154. _gotoNavLink(item) {
  155. clickElement(document, [`#global-nav a[href*="/${item}"`]);
  156. }
  157.  
  158. _gotoNavButton(item) {
  159. const buttons = Array.from(document.querySelectorAll('#global-nav button'));
  160. const button = buttons.find(el => el.textContent.includes(item));
  161. if (button) {
  162. button.click();
  163. }
  164. }
  165.  
  166. _help() {
  167. const help = document.querySelector(`#${this.helpId}`);
  168. help.showModal();
  169. help.focus();
  170. }
  171.  
  172. _gotoSearch() {
  173. clickElement(document, ['#global-nav-search button']);
  174. }
  175.  
  176. _goHome() {
  177. this._gotoNavLink('feed');
  178. }
  179.  
  180. _gotoMyNetwork() {
  181. this._gotoNavLink('mynetwork');
  182. }
  183.  
  184. _gotoJobs() {
  185. this._gotoNavLink('jobs');
  186. }
  187.  
  188. _gotoMessaging() {
  189. this._gotoNavLink('messaging');
  190. }
  191.  
  192. _gotoNotifications() {
  193. this._gotoNavLink('notifications');
  194. }
  195.  
  196. _gotoProfile() {
  197. this._gotoNavButton('Me');
  198. }
  199.  
  200. _gotoBusiness() {
  201. this._gotoNavButton('Business');
  202. }
  203.  
  204. _gotoLearning() {
  205. this._gotoNavLink('learning');
  206. }
  207.  
  208. }
  209.  
  210. class Feed extends Page {
  211. _pathname = '/feed/';
  212. _click_handler_selector = 'main';
  213. _auto_keys = [
  214. {seq: 'X', desc: 'Toggle hiding current post', func: this._togglePost},
  215. {seq: 'j', desc: 'Next post', func: this._nextPost},
  216. {seq: 'J', desc: 'Toggle hiding then next post', func: this._nextPostPlus},
  217. {seq: 'k', desc: 'Previous post', func: this._prevPost},
  218. {seq: 'K', desc: 'Toggle hiding then previous post', func: this._prevPostPlus},
  219. {seq: 'm', desc: 'Show more of the post or comment', func: this._seeMore},
  220. {seq: 'c', desc: 'Show comments', func: this._showComments},
  221. {seq: 'n', desc: 'Next comment', func: this._nextComment},
  222. {seq: 'p', desc: 'Previous comment', func: this._prevComment},
  223. {seq: 'l', desc: 'Load more posts (if the <button>New Posts</button> button is available, load those)', func: this._loadMorePosts},
  224. {seq: 'L', desc: 'Like post or comment', func: this._likePostOrComment},
  225. {seq: '<', desc: 'First post or comment', func: this._firstPostOrComment},
  226. {seq: '>', desc: 'Last post or comment', func: this._lastPostOrComment},
  227. {seq: 'f', desc: 'Focus on current post or comment (causes browser to change focus)', func: this._focusBrowser},
  228. {seq: 'v p', desc: 'View the post directly', func: this._viewPost},
  229. {seq: 'v r', desc: 'View reactions on current post or comment', func: this._viewReactions},
  230. {seq: 'P', desc: 'Go to the share box to start a post or <kbd>TAB</kbd> to the other creator options', func: this._gotoShare},
  231. {seq: '=', desc: 'Open the (⋯) menu', func: this._openMeatballMenu},
  232. ];
  233.  
  234. _currentPostElement = null;
  235. _currentCommentElement = null;
  236.  
  237. _clickHandler(evt) {
  238. const post = evt.target.closest('div[data-id]');
  239. if (post) {
  240. this._post = post;
  241. }
  242. }
  243.  
  244. get _post() {
  245. return this._currentPostElement;
  246. }
  247.  
  248. set _post(val) {
  249. if (val === this._currentPostElement && this._comment) {
  250. return;
  251. }
  252. if (this._currentPostElement) {
  253. this._currentPostElement.classList.remove('tom');
  254. }
  255. this._currentPostElement = val;
  256. this._comment = null;
  257. if (val) {
  258. val.classList.add('tom');
  259. this._scrollToCurrentPost();
  260. }
  261. }
  262.  
  263. get _comment() {
  264. return this._currentCommentElement;
  265. }
  266.  
  267. set _comment(val) {
  268. if (this._currentCommentElement) {
  269. this._currentCommentElement.classList.remove('dick');
  270. }
  271. this._currentCommentElement = val;
  272. if (val) {
  273. val.classList.add('dick');
  274. this._scrollToCurrentComment();
  275. }
  276. }
  277.  
  278. _getPosts() {
  279. return Array.from(document.querySelectorAll('main div[data-id]'));
  280. }
  281.  
  282. _getComments() {
  283. if (this._post) {
  284. return Array.from(this._post.querySelectorAll('article.comments-comment-item'));
  285. } else {
  286. return [];
  287. }
  288. }
  289.  
  290. _scrollToCurrentPost() {
  291. this._post.style.scrollMarginTop = navBarHeightCss;
  292. this._post.scrollIntoView();
  293. }
  294.  
  295. _scrollToCurrentComment() {
  296. const rect = this._comment.getBoundingClientRect();
  297. this._comment.style.scrollMarginTop = navBarHeightCss;
  298. this._comment.style.scrollMarginBottom = '3em';
  299. // If both scrolling happens, that means the comment is too long
  300. // to fit on the page, so the top is preferred.
  301. if (rect.bottom > document.documentElement.clientHeight) {
  302. this._comment.scrollIntoView(false);
  303. }
  304. if (rect.top < navBarHeightPixels) {
  305. this._comment.scrollIntoView();
  306. }
  307. }
  308.  
  309. _scrollBy(n) {
  310. const posts = this._getPosts();
  311. if (posts.length) {
  312. let idx = Math.max(posts.indexOf(this._post), 0);
  313. let post = null;
  314. // Some posts are hidden (ads, suggestions). Skip over thoses.
  315. do {
  316. idx = (idx + n + posts.length) % posts.length;
  317. post = posts[idx];
  318. } while (!post.clientHeight);
  319. this._post = post;
  320. }
  321. }
  322.  
  323. _scrollCommentsBy(n) {
  324. const comments = this._getComments();
  325. if (comments.length) {
  326. let idx = comments.indexOf(this._comment);
  327. idx += n
  328. if (idx < -1) {
  329. idx = comments.length - 1
  330. }
  331. if (idx === -1 || idx >= comments.length) {
  332. // focus back to post
  333. this._comment = null;
  334. this._post = this._post;
  335. } else {
  336. this._comment = comments[idx];
  337. }
  338. }
  339. }
  340.  
  341. _nextPost() {
  342. this._scrollBy(1);
  343. }
  344.  
  345. _nextPostPlus() {
  346. this._togglePost();
  347. this._nextPost();
  348. }
  349.  
  350. _prevPost() {
  351. this._scrollBy(-1);
  352. }
  353.  
  354. _prevPostPlus() {
  355. this._togglePost();
  356. this._prevPost();
  357. }
  358.  
  359. _nextComment() {
  360. this._scrollCommentsBy(1);
  361. }
  362.  
  363. _prevComment() {
  364. this._scrollCommentsBy(-1);
  365. }
  366.  
  367. _togglePost() {
  368. clickElement(this._post, ['button[aria-label^="Dismiss post"]', 'button[aria-label^="Undo and show"]']);
  369. }
  370.  
  371. _showComments() {
  372. function tryComment(comment) {
  373. if (comment) {
  374. const buttons = Array.from(comment.querySelectorAll('button'));
  375. const button = buttons.find(el => el.textContent.includes('Load previous replies'));
  376. if (button) {
  377. button.click();
  378. return true;
  379. }
  380. }
  381. return false;
  382. }
  383.  
  384. if (!tryComment(this._comment)) {
  385. clickElement(this._post, ['button[aria-label*="comment"]']);
  386. }
  387. }
  388.  
  389. _seeMore() {
  390. const el = this._comment ? this._comment : this._post;
  391. clickElement(el, ['button[aria-label^="see more"]']);
  392. }
  393.  
  394. _likePostOrComment() {
  395. const el = this._comment ? this._comment : this._post;
  396. clickElement(el, ['button[aria-label^="Open reactions menu"]']);
  397. }
  398.  
  399. _jumpToPostOrComment(first) {
  400. if (this._comment) {
  401. var comments = this._getComments();
  402. if (comments.length) {
  403. const idx = first ? 0 : (comments.length - 1);
  404. this._comment = comments[idx];
  405. }
  406. } else {
  407. const posts = this._getPosts();
  408. if (posts.length) {
  409. const idx = first ? 0 : (posts.length - 1);
  410. this._post = posts[idx];
  411. }
  412. }
  413. }
  414.  
  415. _firstPostOrComment() {
  416. this._jumpToPostOrComment(true);
  417. }
  418.  
  419. _lastPostOrComment() {
  420. this._jumpToPostOrComment(false);
  421. }
  422.  
  423. _loadMorePosts() {
  424. const posts = this._getPosts();
  425. if (clickElement(posts[0], ['div.feed-new-update-pill button'])) {
  426. this._post = posts[0];
  427. } else {
  428. clickElement(document, ['main button.scaffold-finite-scroll__load-button']);
  429. }
  430. this._scrollToCurrentPost();
  431. }
  432.  
  433. _gotoShare() {
  434. const share = document.querySelector('div.share-box-feed-entry__top-bar').parentElement;
  435. share.style.scrollMarginTop = navBarHeightCss;
  436. share.scrollIntoView();
  437. share.querySelector('button').focus();
  438. }
  439.  
  440. _openMeatballMenu() {
  441. if (this._comment) {
  442. // XXX In this case, the aria-label is on the svg element, not
  443. // the button, so use the parentElement.
  444. const button = this._comment.querySelector('[aria-label^="Open options"]').parentElement;
  445. button.click();
  446. } else if (this._post) {
  447. // Yeah, I don't get it. This one isn't the button either,
  448. // but the click works.
  449. clickElement(this._post, ['[aria-label^="Open control menu"]']);
  450. }
  451. }
  452.  
  453. _focusBrowser() {
  454. const el = this._comment ? this._comment : this._post;
  455. if (el) {
  456. const tabIndex = el.getAttribute('tabindex');
  457. el.setAttribute('tabindex', 0);
  458. el.focus();
  459. if (tabIndex) {
  460. el.setAttribute('tabindex', tabIndex);
  461. } else {
  462. el.removeAttribute('tabindex');
  463. }
  464. }
  465. }
  466.  
  467. _viewPost() {
  468. if (this._post) {
  469. const urn = this._post.dataset.id;
  470. const id = `lt-${urn.replaceAll(':', '-')}`;
  471. let a = this._post.querySelector(`#${id}`);
  472. if (!a) {
  473. a = document.createElement('a');
  474. a.href = `/feed/update/${urn}/`;
  475. a.id = id;
  476. this._post.append(a);
  477. }
  478. a.click();
  479. }
  480. }
  481.  
  482. _viewReactions() {
  483. // Bah! The queries are annoyingly different.
  484. if (this._comment) {
  485. clickElement(this._comment, ['button.comments-comment-social-bar__reactions-count']);
  486. } else if (this._post) {
  487. clickElement(this._post, ['button.social-details-social-counts__count-value']);
  488. }
  489. }
  490.  
  491. }
  492.  
  493. class Jobs extends Page {
  494. _pathname = '/jobs/';
  495. }
  496.  
  497. class JobsCollections extends Page {
  498. _pathname = '/jobs/collections/';
  499. }
  500.  
  501. class Notifications extends Page {
  502. _pathname = '/notifications/';
  503. _click_handler_selector = 'main';
  504. _auto_keys = [
  505. {seq: 'j', desc: 'Next notification', func: this._nextNotification},
  506. {seq: 'k', desc: 'Previous notification', func: this._prevNotification},
  507. {seq: 'Enter', desc: 'Activate the notification (click on it)', func: this._activateNotification},
  508. {seq: 'X', desc: 'Toggle current notification deletion', func: this._deleteNotification},
  509. {seq: 'l', desc: 'Load more notifications', func: this._loadMoreNotifications},
  510. {seq: '<', desc: 'First notification', func: this._firstNotification},
  511. {seq: '>', desc: 'Last notification', func: this._lastNotification},
  512. {seq: '=', desc: 'Open the (⋯) menu', func: this._openMeatballMenu},
  513. ];
  514.  
  515. // Ugh. When notifications are deleted, the entire element, and
  516. // parent elements, are deleted and replaced by new elements. So
  517. // the only way to track them is by array position.
  518. _currentNotificationIndex = -1;
  519.  
  520. _clickHandler(evt) {
  521. const notification = evt.target.closest('div.nt-card-list article');
  522. if (notification) {
  523. this._notification = notification;
  524. }
  525. }
  526.  
  527. get _notification() {
  528. if (this._currentNotificationIndex >= 0) {
  529. return this._getNotifications()[this._currentNotificationIndex];
  530. } else {
  531. return null;
  532. }
  533. }
  534.  
  535. set _notification(val) {
  536. if (this._notification) {
  537. this._notification.classList.remove('tom');
  538. }
  539. if (val) {
  540. const notifications = this._getNotifications();
  541. this._currentNotificationIndex = notifications.indexOf(val);
  542. val.classList.add('tom');
  543. this._scrollToCurrentNotification();
  544. }
  545. }
  546.  
  547. _getNotifications() {
  548. return Array.from(document.querySelectorAll('main section div.nt-card-list article'));
  549. }
  550.  
  551. _scrollToCurrentNotification() {
  552. const rect = this._notification.getBoundingClientRect();
  553. this._notification.style.scrollMarginTop = navBarHeightCss;
  554. this._notification.style.scrollMarginBottom = '3em';
  555. if (rect.bottom > document.documentElement.clientHeight) {
  556. this._notification.scrollIntoView(false);
  557. }
  558. if (rect.top < navBarHeightPixels) {
  559. this._notification.scrollIntoView();
  560. }
  561. }
  562.  
  563. _scrollBy(n) {
  564. const notifications = this._getNotifications();
  565. if (notifications.length) {
  566. if (this._currentNotificationIndex === -1 && n === -1) {
  567. this._currentNotificationIndex = 0;
  568. }
  569. const idx = (this._currentNotificationIndex + n + notifications.length) % notifications.length;
  570. this._notification = notifications[idx];
  571. }
  572. }
  573.  
  574. _nextNotification() {
  575. this._scrollBy(1);
  576. }
  577.  
  578. _prevNotification() {
  579. this._scrollBy(-1);
  580. }
  581.  
  582. _jumpToNotification(first) {
  583. const notifications = this._getNotifications();
  584. if (notifications.length) {
  585. const idx = first ? 0 : (notifications.length - 1);
  586. this._notification = notifications[idx];
  587. }
  588. }
  589.  
  590. _firstNotification() {
  591. this._jumpToNotification(true);
  592. }
  593.  
  594. _lastNotification() {
  595. this._jumpToNotification(false);
  596. }
  597.  
  598. _openMeatballMenu() {
  599. clickElement(this._notification, ['button[aria-label^="Settings menu"]']);
  600. }
  601.  
  602. _activateNotification() {
  603. if (this._notification) {
  604. // Every notification is different.
  605. // It may be that notifications are settling on 'a.nt-card__headline'.
  606. function matchesKnownText(el) {
  607. if (el.innerText === 'Apply early') return true;
  608. return false;
  609. }
  610.  
  611. // Debugging code.
  612. if (this._notification.querySelectorAll('a.nt-card__headline').length === 1 && this._notification.querySelector('button.message-anywhere-button')) {
  613. console.debug(this._notification);
  614. alert('Yes, can be simplified');
  615. }
  616.  
  617. if (!clickElement(this._notification, ['button.message-anywhere-button'])) {
  618. const buttons = Array.from(this._notification.querySelectorAll('button'));
  619. const button = buttons.find(matchesKnownText);
  620. if (button) {
  621. button.click();
  622. } else {
  623. const links = this._notification.querySelectorAll('a.nt-card__headline');
  624. if (links.length === 1) {
  625. links[0].click();
  626. } else {
  627. console.debug(this._notification);
  628. for (const el of this._notification.querySelectorAll('*')) {
  629. console.debug(el);
  630. }
  631. const msg = [
  632. 'You tried to activate an unsupported notification',
  633. 'element. Please file a bug. If you are comfortable',
  634. 'with using the browser\'s Developer Tools (often the',
  635. 'F12 key), consider sharing the information just logged',
  636. 'in the console / debug view.',
  637. ];
  638. alert(msg.join(' '));
  639. }
  640. }
  641. }
  642. }
  643. }
  644.  
  645. _deleteNotification() {
  646. if (this._notification) {
  647. // Hah. Unlike in other places, these buttons already exist,
  648. // just hidden under the menu.
  649. const buttons = Array.from(this._notification.querySelectorAll('button'));
  650. const button = buttons.find(el => el.textContent.includes('Delete this notification'));
  651. if (button) {
  652. button.click();
  653. } else {
  654. clickElement(this._notification, ['button[aria-label^="Undo notification deletion"]']);
  655. }
  656. }
  657. }
  658.  
  659. _loadMoreNotifications() {
  660. const buttons = Array.from(document.querySelectorAll('main section button'));
  661. const button = buttons.find(el => el.textContent.includes('Show more results'));
  662. if (button) {
  663. button.click();
  664. }
  665. }
  666.  
  667. }
  668.  
  669. class Pages {
  670. _global = null;
  671. _page = null;
  672. _pages = new Map();
  673.  
  674. _lastInputElement = null;
  675.  
  676. constructor() {
  677. this._id = crypto.randomUUID();
  678. this._installNavStyle();
  679. this._initializeHelpMenu();
  680. document.addEventListener('focus', this._onFocus.bind(this), true);
  681. document.addEventListener('href', this._onHref.bind(this), true);
  682. }
  683.  
  684. _setInputFocus(state) {
  685. const pages = Array.from(this._pages.values());
  686. pages.push(this._global);
  687. for (const page of pages) {
  688. if (page) {
  689. page.keyboard.setContext('inputFocus', state);
  690. }
  691. }
  692. }
  693.  
  694. _onFocus(evt) {
  695. if (this._lastInputElement && evt.target !== this._lastInputElement) {
  696. this._lastInputElement = null
  697. this._setInputFocus(false);
  698. }
  699. if (isInput(evt.target)) {
  700. this._setInputFocus(true);
  701. this._lastInputElement = evt.target;
  702. }
  703. }
  704.  
  705. _onHref(evt) {
  706. this.activate(evt.detail.url.pathname);
  707. }
  708.  
  709. _installNavStyle() {
  710. const style = document.createElement('style');
  711. style.textContent += '.tom { border-color: orange !important; border-style: solid !important; border-width: medium !important; }';
  712. style.textContent += '.dick { border-color: red !important; border-style: solid !important; border-width: thin !important; }';
  713. document.head.append(style);
  714. }
  715.  
  716. _initializeHelpMenu() {
  717. this._helpId = `help-${this._id}`;
  718. const style = document.createElement('style');
  719. style.textContent += `#${this._helpId} kbd {font-size: 0.85em; padding: 0.07em; border-width: 1px; border-style: solid; }`;
  720. style.textContent += `#${this._helpId} th { padding-top: 1em; text-align: left; }`;
  721. style.textContent += `#${this._helpId} td:first-child { white-space: nowrap; text-align: right; padding-right: 0.5em; }`;
  722. style.textContent += `#${this._helpId} button { border-width: 1px; border-style: solid; border-radius: 0.25em; }`;
  723. document.head.prepend(style);
  724. const dialog = document.createElement('dialog');
  725. dialog.id = this._helpId
  726. dialog.innerHTML = '<table><caption>' +
  727. '<span style="float: left">Keyboard shortcuts</span>' +
  728. '<span style="float: right">Hit <kbd>ESC</kbd> to close</span>' +
  729. '</caption><tbody></tbody></table>';
  730. document.body.prepend(dialog);
  731. }
  732.  
  733. // ThisPage -> This Page
  734. _parseHeader(text) {
  735. return text.replace(/([A-Z])/g, ' $1').trim();
  736. }
  737.  
  738. // 'a b' -> '<kbd>a</kbd> then <kbd>b</kbd>'
  739. _parseSeq(seq) {
  740. const letters = seq.split(' ').map(w => `<kbd>${w}</kbd>`);
  741. const s = letters.join(' then ');
  742. return s;
  743. }
  744.  
  745. _addHelp(page) {
  746. const help = document.querySelector(`#${this._helpId} tbody`);
  747. const section = this._parseHeader(page.helpHeader);
  748. let s = `<tr><th></th><th>${section}</th></tr>`;
  749. for (const {seq, desc} of page.helpContent) {
  750. const keys = this._parseSeq(seq);
  751. s += `<tr><td>${keys}:</td><td>${desc}</td></tr>`;
  752. }
  753. // Don't include works in progress that have no keys yet.
  754. if (page.helpContent.length) {
  755. help.innerHTML += s;
  756. }
  757. }
  758.  
  759. register(page) {
  760. page.start();
  761. this._addHelp(page);
  762. if (page.pathname === null) {
  763. page.helpId = this._helpId
  764. this._global = page;
  765. this._global.activate();
  766. } else {
  767. this._pages.set(page.pathname, page);
  768. }
  769. }
  770.  
  771. _findPage(pathname) {
  772. const pathnames = Array.from(this._pages.keys());
  773. const candidates = pathnames.filter(p => pathname.startsWith(p));
  774. const candidate = candidates.reduce((a, b) => {
  775. return a.length > b.length ? a : b;
  776. }, '');
  777. return this._pages.get(pathname) || null;
  778. }
  779.  
  780. activate(pathname) {
  781. if (this._page) {
  782. this._page.deactivate();
  783. }
  784. const page = this._findPage(pathname);
  785. this._page = page;
  786. if (page) {
  787. page.activate();
  788. }
  789. }
  790. }
  791.  
  792. const pages = new Pages();
  793. pages.register(new Global());
  794. pages.register(new Feed());
  795. pages.register(new Jobs());
  796. pages.register(new JobsCollections());
  797. pages.register(new Notifications());
  798. pages.activate(window.location.pathname);
  799.  
  800. function isInput(element) {
  801. let tagName = '';
  802. if ('tagName' in element) {
  803. tagName = element.tagName.toLowerCase();
  804. }
  805. return (element.isContentEditable || ['input', 'textarea'].includes(tagName));
  806. }
  807.  
  808. // Run querySelector to get an element, then click it.
  809. function clickElement(base, selectorArray) {
  810. if (base) {
  811. for (const selector of selectorArray) {
  812. const el = base.querySelector(selector);
  813. if (el) {
  814. el.click();
  815. return true;
  816. }
  817. }
  818. }
  819. return false;
  820. }
  821.  
  822. let navBarHeightPixels = 0;
  823. let navBarHeightCss = '0';
  824. VM.observe(document.body, () => {
  825. const navbar = document.querySelector('#global-nav');
  826.  
  827. if (navbar) {
  828. navBarHeightPixels = navbar.clientHeight + 4;
  829. navBarHeightCss = `${navBarHeightPixels}px`;
  830.  
  831. return true;
  832. }
  833. });
  834.  
  835. let oldUrl = new URL(window.location);
  836. VM.observe(document.body, () => {
  837. const newUrl = new URL(window.location);
  838. if (oldUrl.href !== newUrl.href) {
  839. const evt = new CustomEvent('href', {detail: {url: newUrl}})
  840. oldUrl = newUrl;
  841. document.dispatchEvent(evt);
  842. }
  843. });
  844.  
  845. })();