mirror of
https://github.com/Foundry376/Mailspring.git
synced 2025-01-01 13:14:16 +08:00
rm(tooltip): Tooltip package no longer in use
This commit is contained in:
Ben Gotow
parent
45403131f1
commit
353be64e10
5 changed files with 0 additions and 291 deletions
|
|
@ -1,32 +0,0 @@
|
|||
_ = require 'underscore'
|
||||
React = require "react"
|
||||
Tooltip = require "./tooltip"
|
||||
{ComponentRegistry} = require("nylas-exports")
|
||||
|
||||
module.exports =
|
||||
item: null # The DOM item the main React component renders into
|
||||
|
||||
activate: (@state={}) ->
|
||||
@item = document.createElement("div")
|
||||
@item.setAttribute("id", "tooltip-container")
|
||||
@item.setAttribute("class", "tooltip-container")
|
||||
@tooltip = React.render(React.createElement(Tooltip), @item)
|
||||
document.querySelector(NylasEnv.workspaceViewParentSelector).appendChild(@item)
|
||||
|
||||
@mouseDownListener = _.bind(@tooltip.onMouseDown, @tooltip)
|
||||
@mouseOverListener = _.bind(@tooltip.onMouseOver, @tooltip)
|
||||
@mouseOutListener = _.bind(@tooltip.onMouseOut, @tooltip)
|
||||
|
||||
window.addEventListener("mousedown", @mouseDownListener)
|
||||
window.addEventListener("mouseover", @mouseOverListener)
|
||||
window.addEventListener("mouseout", @mouseOutListener)
|
||||
|
||||
deactivate: ->
|
||||
React.unmountComponentAtNode(@item)
|
||||
document.querySelector(NylasEnv.workspaceViewParentSelector).removeChild(@item)
|
||||
|
||||
window.removeEventListener("mousedown", @mouseDownListener)
|
||||
window.removeEventListener("mouseover", @mouseOverListener)
|
||||
window.removeEventListener("mouseout", @mouseOutListener)
|
||||
|
||||
serialize: -> @state
|
||||
|
|
@ -1,179 +0,0 @@
|
|||
_ = require 'underscore'
|
||||
React = require 'react/addons'
|
||||
{DOMUtils} = require 'nylas-exports'
|
||||
|
||||
###
|
||||
IMPORTANT: This has been deprecated. Use the native `title=` attribute instead.
|
||||
This will ensure native-behavior cross platform.
|
||||
The Tooltip component displays a consistent hovering tooltip for use when
|
||||
extra context information is required.
|
||||
|
||||
Activate by adding a `data-tooltip="Label"` to any element
|
||||
|
||||
It's a global-level singleton
|
||||
###
|
||||
|
||||
class Tooltip extends React.Component
|
||||
@displayName: "Tooltip"
|
||||
|
||||
constructor: (@props) ->
|
||||
@state =
|
||||
top: 0
|
||||
pos: "below"
|
||||
left: 0
|
||||
width: 0
|
||||
pointerLeft: 0
|
||||
display: false
|
||||
content: ""
|
||||
|
||||
componentWillMount: =>
|
||||
@CONTENT_PADDING = 15
|
||||
@DEFAULT_DELAY = 2000
|
||||
@KEEP_DELAY = 300
|
||||
@_showDelay = @DEFAULT_DELAY
|
||||
@_showTimeout = null
|
||||
@_showDelayTimeout = null
|
||||
|
||||
componentWillUnmount: =>
|
||||
clearTimeout @_showTimeout
|
||||
clearTimeout @_showDelayTimeout
|
||||
@_mutationObserver?.disconnect()
|
||||
@_enteredTooltip = false
|
||||
|
||||
render: =>
|
||||
<div className="tooltip-wrap #{@state.pos}" style={@_positionStyles()}>
|
||||
<div className="tooltip-content">{@state.content}</div>
|
||||
<div className="tooltip-pointer" style={left: @state.pointerLeft}></div>
|
||||
</div>
|
||||
|
||||
_positionStyles: =>
|
||||
top: @state.top
|
||||
left: @state.left
|
||||
width: @state.width
|
||||
display: if @state.display then "block" else "none"
|
||||
|
||||
# This are public methods so they can be bound to the window event
|
||||
# listeners.
|
||||
onMouseOver: (e) =>
|
||||
elWithTooltip = @_elementWithTooltip(e.target)
|
||||
if elWithTooltip and DOMUtils.nodeIsVisible(elWithTooltip)
|
||||
if elWithTooltip isnt @_lastTarget
|
||||
@_onTooltipEnter(elWithTooltip)
|
||||
else if @state.display
|
||||
@_hideTooltip()
|
||||
|
||||
onMouseOut: (e) =>
|
||||
if @_elementWithTooltip(e.fromElement) and not @_elementWithTooltip(e.toElement)
|
||||
@_onTooltipLeave()
|
||||
|
||||
onMouseDown: (e) =>
|
||||
if @state.display
|
||||
@_hideTooltip()
|
||||
|
||||
_elementWithTooltip: (target) =>
|
||||
while target
|
||||
break if target?.dataset?.tooltip?
|
||||
target = target.parentNode
|
||||
return target
|
||||
|
||||
_onTooltipEnter: (target) =>
|
||||
# https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
|
||||
@_mutationObserver?.disconnect()
|
||||
@_mutationObserver = new MutationObserver(@_onTooltipLeave)
|
||||
@_mutationObserver.observe(target.parentNode, attributes: true, subtree: true, childList: true)
|
||||
|
||||
@_lastTarget = target
|
||||
@_enteredTooltip = true
|
||||
clearTimeout(@_showTimeout)
|
||||
clearTimeout(@_showDelayTimeout)
|
||||
@_showTimeout = setTimeout =>
|
||||
@_showTooltip(target)
|
||||
, @_showDelay
|
||||
|
||||
_onTooltipLeave: =>
|
||||
return unless @_enteredTooltip
|
||||
@_enteredTooltip = false
|
||||
clearTimeout(@_showTimeout)
|
||||
@_hideTooltip()
|
||||
|
||||
@_showDelay = 10
|
||||
clearTimeout(@_showDelayTimeout)
|
||||
@_showDelayTimeout = setTimeout =>
|
||||
@_showDelay = @DEFAULT_DELAY
|
||||
, @KEEP_DELAY
|
||||
|
||||
_showTooltip: (target) =>
|
||||
return unless DOMUtils.nodeIsVisible(target)
|
||||
content = target.dataset.tooltip
|
||||
return if (content ? "").trim().toLowerCase().length is 0
|
||||
|
||||
guessedWidth = @_guessWidth(content)
|
||||
dim = target.getBoundingClientRect()
|
||||
left = dim.left + dim.width / 2
|
||||
|
||||
TOOLTIP_HEIGHT = 50
|
||||
FLIP_THRESHOLD = TOOLTIP_HEIGHT + 30
|
||||
top = dim.top + dim.height + 14
|
||||
tooltipPos = "below"
|
||||
if top + FLIP_THRESHOLD > @_windowHeight()
|
||||
tooltipPos = "above"
|
||||
top = dim.top - TOOLTIP_HEIGHT
|
||||
|
||||
# If for some reason the element was removed from underneath us, we
|
||||
# won't know until we get here. The element's dimensions will return
|
||||
# (0, 14), which we can use to filter out bad displays. This can
|
||||
# happen if our mutation observer misses the event. In some cases
|
||||
# (like the multi-select toolbar), the button's great-grandparent is
|
||||
# removed from the DOM and no mutation observer event is fired.
|
||||
if left < 20 and top < 20
|
||||
@_hideTooltip()
|
||||
return
|
||||
|
||||
@setState
|
||||
top: top
|
||||
pos: tooltipPos
|
||||
left: @_tooltipLeft(left, guessedWidth)
|
||||
width: guessedWidth
|
||||
pointerLeft: @_tooltipPointerLeft(left, guessedWidth)
|
||||
display: true
|
||||
content: target.dataset.tooltip
|
||||
|
||||
_guessWidth: (content) =>
|
||||
# roughly 11px per character
|
||||
guessWidth = content.length * 11
|
||||
return Math.max(Math.min(guessWidth, 250), 50)
|
||||
|
||||
_tooltipLeft: (targetLeft, guessedWidth) =>
|
||||
max = @_windowWidth() - guessedWidth - @CONTENT_PADDING
|
||||
left = Math.min(Math.max(targetLeft - guessedWidth/2, @CONTENT_PADDING), max)
|
||||
return left
|
||||
|
||||
_tooltipPointerLeft: (targetLeft, guessedWidth) =>
|
||||
POINTER_WIDTH = 6 + 2 #2px of border-radius
|
||||
max = @_windowWidth() - @CONTENT_PADDING
|
||||
min = @CONTENT_PADDING
|
||||
absoluteLeft = Math.max(Math.min(targetLeft, max), min)
|
||||
relativeLeft = absoluteLeft - @_tooltipLeft(targetLeft, guessedWidth)
|
||||
|
||||
left = Math.max(Math.min(relativeLeft, guessedWidth-POINTER_WIDTH), POINTER_WIDTH)
|
||||
return left
|
||||
|
||||
_windowWidth: =>
|
||||
document.body.offsetWidth
|
||||
|
||||
_windowHeight: =>
|
||||
document.body.offsetHeight
|
||||
|
||||
_hideTooltip: =>
|
||||
@_mutationObserver?.disconnect()
|
||||
@_lastTarget = null
|
||||
@setState
|
||||
top: 0
|
||||
left: 0
|
||||
width: 0
|
||||
pointerLeft: 0
|
||||
display: false
|
||||
content: ""
|
||||
|
||||
|
||||
module.exports = Tooltip
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
{
|
||||
"name": "tooltip",
|
||||
"version": "0.1.0",
|
||||
"main": "./lib/main",
|
||||
"description": "Tooltip",
|
||||
"license": "GPL-3.0",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"nylas": "*"
|
||||
},
|
||||
"dependencies": {
|
||||
}
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
# Testing the Tooltip component
|
||||
_ = require 'underscore'
|
||||
React = require 'react/addons'
|
||||
ReactTestUtils = React.addons.TestUtils
|
||||
|
||||
Tooltip = require '../lib/tooltip'
|
||||
|
||||
describe "Tooltip", ->
|
||||
beforeEach ->
|
||||
@tooltip = ReactTestUtils.renderIntoDocument(
|
||||
<Tooltip />
|
||||
)
|
||||
|
||||
it "renders to the document", ->
|
||||
expect(ReactTestUtils.isCompositeComponentWithType @tooltip, Tooltip).toBe true
|
||||
|
|
@ -1,52 +0,0 @@
|
|||
@import "ui-variables";
|
||||
|
||||
#tooltip-container {
|
||||
position: absolute;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@tooltipHeight: 156px / 2;
|
||||
@wingWidth: 42px / 2;
|
||||
|
||||
.tooltip-wrap {
|
||||
position: absolute;
|
||||
display: none;
|
||||
// Position and display are set by React
|
||||
|
||||
background: #fff;
|
||||
box-shadow: 0 10px 20px rgba(0,0,0,0.19), inset 0 0 1px rgba(0,0,0,0.5);
|
||||
border-radius: @border-radius-base;
|
||||
color: #313435;
|
||||
|
||||
font-weight: @font-weight-normal;
|
||||
text-align: center;
|
||||
text-transform: capitalize;
|
||||
|
||||
.tooltip-content {
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
||||
.tooltip-pointer {
|
||||
position: absolute;
|
||||
width: 22.5px;
|
||||
height: 10px;
|
||||
background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat;
|
||||
background-size: 22.5px 10.5px;
|
||||
margin-left: -11.2px;
|
||||
}
|
||||
|
||||
&.above {
|
||||
.tooltip-pointer {
|
||||
transform: rotate(0deg);
|
||||
bottom: -9px;
|
||||
}
|
||||
}
|
||||
&.below {
|
||||
.tooltip-pointer {
|
||||
transform: rotate(180deg);
|
||||
top: -9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue