diff --git a/css/style.css b/css/style.css
index 11916e177..83e1e8d08 100644
--- a/css/style.css
+++ b/css/style.css
@@ -495,6 +495,16 @@ a[href="javascript:;"] {
overflow: hidden;
text-align: center;
}
+.thread-info {
+ position: fixed;
+ background: inherit;
+ padding: 2px;
+ border-radius: 2px;
+ box-shadow: 0 0 5px rgba(0, 0, 0, .25);
+}
+.thread-info .post {
+ margin: 0;
+}
/* Announcement Hiding */
:root.hide-announcement #globalMessage,
diff --git a/src/General/Index.coffee b/src/General/Index.coffee
index 87662808e..837c360ea 100644
--- a/src/General/Index.coffee
+++ b/src/General/Index.coffee
@@ -159,6 +159,8 @@ Index =
@pin() if data.isPinned
catalogNode: ->
$.on @nodes.thumb, 'click', Index.onClick
+ return if Conf['Image Hover in Catalog']
+ $.on @nodes.thumb, 'mouseover', Index.onOver
onClick: (e) ->
return if e.button isnt 0
thread = g.threads[@parentNode.dataset.fullID]
@@ -169,6 +171,28 @@ Index =
else
return
e.preventDefault()
+ onOver: (e) ->
+ # 4chan's less than stellar CSS forces us to include a .post and .postInfo
+ # in order to have proper styling for the .nameBlock's content.
+ {nodes} = g.threads[@parentNode.dataset.fullID].OP
+ el = $.el 'div',
+ innerHTML: '
'
+ className: 'thread-info'
+ hidden: true
+ $.add el.firstElementChild.firstElementChild, [
+ $('.nameBlock', nodes.info).cloneNode true
+ $.tn ' '
+ nodes.date.cloneNode true
+ ]
+ $.add d.body, el
+ UI.hover
+ root: @
+ el: el
+ latestEvent: e
+ endEvents: 'mouseout'
+ offsetX: 15
+ offsetY: -20
+ setTimeout (-> el.hidden = false if el.parentNode), .25 * $.SECOND
toggleHide: (thread) ->
$.rm thread.catalogView.nodes.root
if Index.showHiddenThreads
diff --git a/src/General/UI.coffee b/src/General/UI.coffee
index 5831d3951..d3dd11c1c 100644
--- a/src/General/UI.coffee
+++ b/src/General/UI.coffee
@@ -273,7 +273,7 @@ UI = do ->
$.off d, 'mouseup', @up
$.set "#{@id}.position", @style.cssText
- hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb}) ->
+ hoverstart = ({root, el, latestEvent, endEvents, asapTest, cb, offsetX, offsetY}) ->
o = {
root
el
@@ -283,14 +283,17 @@ UI = do ->
latestEvent
clientHeight: doc.clientHeight
clientWidth: doc.clientWidth
+ offsetX: offsetX or 45
+ offsetY: offsetY or -120
}
o.hover = hover.bind o
o.hoverend = hoverend.bind o
- $.asap ->
- !el.parentNode or asapTest()
- , ->
- o.hover o.latestEvent if el.parentNode
+ if asapTest
+ $.asap ->
+ !el.parentNode or asapTest()
+ , ->
+ o.hover o.latestEvent if el.parentNode
$.on root, endEvents, o.hoverend
$.on root, 'mousemove', o.hover
@@ -304,7 +307,7 @@ UI = do ->
height = @el.offsetHeight
{clientX, clientY} = e
- top = clientY - 120
+ top = clientY + @offsetY
top = if @clientHeight <= height or top <= 0
0
else if top + height >= @clientHeight
@@ -313,9 +316,9 @@ UI = do ->
top
[left, right] = if clientX <= @clientWidth / 2
- [clientX + 45 + 'px', null]
+ [clientX + @offsetX + 'px', null]
else
- [null, @clientWidth - clientX + 45 + 'px']
+ [null, @clientWidth - clientX + @offsetX + 'px']
{style} = @
style.top = top + 'px'