This library manages all of the inputs (mouse/keyboard events, location changes, hover information, and hover actions) necessary to display hover tooltips on with a code view. All together, this makes it easier to add code intelligence to code views on the web. Used in Sourcegraph.
What it does
- Listens to hover and click events on the code view
- On mouse hovers, determines the line+column position, performs a hover request, and renders it in a nice tooltip overlay at the token
- Shows actions in the hover
- When clicking a token, pins the tooltip to that token
- Highlights the hovered token
You need to provide your own UI component (referred to as the HoverOverlay) that actually displays this information and exposes these actions to the user.
createHoverifier()to create a
Hoverifierobject (there should only be one on the page, to have only one HoverOverlay shown).
- The Hoverifier exposes an Observable
hoverStateUpdatesthat a consumer can subscribe to, which emits all data needed to render the HoverOverlay
- For each code view on the page, call
hoverifier.hoverify(), passing the position events coming from
Subscriptionthat will "unhoverify" the code view again if unsubscribed from
yarn yarn test # Helpful options: yarn test -- --single-run # Don't rerun on changes yarn test -- --browsers Chrome # Only run in Chrome
Development is done by running tests. Karma is used to run Mocha tests in the browser. You can debug by opening http://localhost:9876/debug.html in a browser while the test running is active. The tests will rerun automatically when files are changed.
You can run specific tests by adding
Releases are done automatically in CI when commits are merged into master by analyzing Conventional Commit Messages.
yarn, commit messages will be linted automatically when committing.
You may have to rebase a branch before merging to ensure it has a proper commit history.
|Code view||The DOM element that contains all the line elements|
|Line number element||The DOM element that contains the line number label for that line|
|Code element||The DOM element that contains the code for one line|
|Diff part||The part of the diff, either base, head or both (if the line didn't change). Each line belongs to one diff part, and therefor to a different commit ID and potentially different file path.|
|Hover overlay||Also called tooltip|
|hoverify||To attach all the listeners needed to a code view so that it will display overlay on hovers and clicks.|
|unhoverify||To unsubscribe from the Subscription returned by