-
-
Notifications
You must be signed in to change notification settings - Fork 19
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Clean up AttachedPopover after decaffeinate
References #460
- Loading branch information
Showing
1 changed file
with
54 additions
and
82 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,95 +1,67 @@ | ||
| /* | ||
| * decaffeinate suggestions: | ||
| * DS102: Remove unnecessary code created because of implicit returns | ||
| * DS206: Consider reworking classes to avoid initClass | ||
| * DS207: Consider shorter variations of null checks | ||
| * Full docs: https://github.com/decaffeinate/decaffeinate/blob/master/docs/suggestions.md | ||
| */ | ||
| let AttachedPopover; | ||
| 'use strict'; | ||
|
|
||
| const Popover = require('./Popover'); | ||
|
|
||
| module.exports = | ||
|
|
||
| //#* | ||
| // Popover that is attached to an HTML element. | ||
| // | ||
| // NOTE: The reason we do not use Atom's native tooltip is because it is attached to an element, which caused strange | ||
| // problems such as tickets #107 and #72. This implementation uses the same CSS classes and transitions but handles the | ||
| // displaying manually as we don't want to attach/detach, we only want to temporarily display a popover on mouseover. | ||
| //# | ||
| (AttachedPopover = (function() { | ||
| AttachedPopover = class AttachedPopover extends Popover { | ||
| static initClass() { | ||
| /** | ||
| * Timeout ID, used for setting a timeout before displaying the popover. | ||
| */ | ||
| this.prototype.timeoutId = null; | ||
|
|
||
| /** | ||
| * The element to attach the popover to. | ||
| */ | ||
| this.prototype.elementToAttachTo = null; | ||
| } | ||
|
|
||
| /** | ||
| * Constructor. | ||
| * | ||
| * @param {HTMLElement} elementToAttachTo The element to show the popover over. | ||
| * @param {Number} delay How long the mouse has to hover over the elment before the popover shows | ||
| * up (in miliiseconds). | ||
| */ | ||
| constructor(elementToAttachTo, delay) { | ||
| super(); | ||
|
|
||
| this.elementToAttachTo = elementToAttachTo; | ||
|
|
||
| if (delay == null) { | ||
| delay = 500; | ||
| } | ||
| } | ||
| /** | ||
| * Popover that is attached to an HTML element. | ||
| * | ||
| * NOTE: The reason we do not use Atom's native tooltip is because it is attached to an element, which caused strange | ||
| * problems such as tickets #107 and #72. This implementation uses the same CSS classes and transitions but handles the | ||
| * displaying manually as we don't want to attach/detach, we only want to temporarily display a popover on mouseover. | ||
| */ | ||
| class AttachedPopover extends Popover | ||
| { | ||
| /** | ||
| * Constructor. | ||
| * | ||
| * @param {HTMLElement} elementToAttachTo The element to show the popover over. | ||
| */ | ||
| constructor(elementToAttachTo) { | ||
| super(); | ||
|
|
||
| /** | ||
| * Destructor. | ||
| */ | ||
| destructor() { | ||
| if (this.timeoutId) { | ||
| clearTimeout(this.timeoutId); | ||
| this.timeoutId = null; | ||
| } | ||
| this.timeoutId = null; | ||
| this.elementToAttachTo = elementToAttachTo; | ||
| } | ||
|
|
||
| return super.destructor(); | ||
| /** | ||
| * Destructor. | ||
| */ | ||
| destructor() { | ||
| if (this.timeoutId) { | ||
| clearTimeout(this.timeoutId); | ||
| this.timeoutId = null; | ||
| } | ||
|
|
||
| /** | ||
| * Shows the popover with the specified text. | ||
| */ | ||
| show() { | ||
| const coordinates = this.elementToAttachTo.getBoundingClientRect(); | ||
| super.destructor(); | ||
| } | ||
|
|
||
| const centerOffset = ((coordinates.right - coordinates.left) / 2); | ||
| /** | ||
| * Shows the popover with the specified text. | ||
| */ | ||
| show() { | ||
| const coordinates = this.elementToAttachTo.getBoundingClientRect(); | ||
| const centerOffset = ((coordinates.right - coordinates.left) / 2); | ||
|
|
||
| let x = (coordinates.left - (this.getElement().offsetWidth / 2)) + centerOffset; | ||
| let y = coordinates.bottom; | ||
| let x = (coordinates.left - (this.getElement().offsetWidth / 2)) + centerOffset; | ||
| let y = coordinates.bottom; | ||
|
|
||
| if (x < 0) { x = 0; } | ||
| if (y < 0) { y = 0; } | ||
| x = Math.max(x, 0); | ||
| y = Math.max(y, 0); | ||
|
|
||
| return super.show(x, y); | ||
| } | ||
| return super.show(x, y); | ||
| } | ||
|
|
||
| /** | ||
| * Shows the popover with the specified text after the specified delay (in miliiseconds). Calling this method | ||
| * multiple times will cancel previous show requests and restart. | ||
| * | ||
| * @param {Number} delay The delay before the tooltip shows up (in milliseconds). | ||
| */ | ||
| showAfter(delay) { | ||
| return this.timeoutId = setTimeout(() => { | ||
| return this.show(); | ||
| } | ||
| , delay); | ||
| } | ||
| }; | ||
| AttachedPopover.initClass(); | ||
| return AttachedPopover; | ||
| })()); | ||
| /** | ||
| * Shows the popover with the specified text after the specified delay (in miliiseconds). Calling this method | ||
| * multiple times will cancel previous show requests and restart. | ||
| * | ||
| * @param {Number} delay The delay before the tooltip shows up (in milliseconds). | ||
| */ | ||
| showAfter(delay) { | ||
| this.timeoutId = setTimeout(() => { | ||
| return this.show(); | ||
| }, delay); | ||
| } | ||
| }; |