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'