Permalink
Browse files

Add fancy tooltips.

It's a start.
  • Loading branch information...
1 parent 41aeeb3 commit 13ea64c16271dfe85d6bb1231ca61f54d82ca542 @rmanis committed Jan 11, 2012
Showing with 32 additions and 1 deletion.
  1. +32 −1 mum.lisp
View
@@ -117,7 +117,8 @@
"#clock { float: right }"
"#viewport { background-color: black; border: black; color: white; font-family: monaco, monospace; font-size: 12px; height: 24em; width: 80em; }"
"#viewport td { height: 1em; width: 1em; margin: 0; padding: 0; }"
- "#movebox table tr td input { height: 2.5em; width: 2.5em; } ")
+ "#movebox table tr td input { height: 2.5em; width: 2.5em; } "
+ "div.details { background-color: white; border: 1px solid black; padding: 8px; }")
(:script :type "text/javascript"
(cl-who:str (ps:ps* ps:*ps-lisp-library*)))
(:script :type "text/javascript"
@@ -133,12 +134,42 @@
"-"
(ps:@ coordinates 1)))
+ (defun position-details (event)
+ (let*((target (ps:chain event current-target))
+ (x (+ (ps:chain ($ target) (position) left)
+ (ps:chain target client-width)))
+ (y (+ (ps:chain ($ target) (position) top)
+ (ps:chain target client-height))))
+ (ps:chain ($ "div.details")
+ (css (create position "absolute" "top" y "left" x)))))
+
+ (defun show-details (event icon)
+ (let ((details
+ (+ "<div class=\"details\">"
+ (ps:chain ($ (@ icon html)) (attr "title"))
+ "</div>")))
+ (ps:chain ($ details)
+ (append-to "body"))
+ (position-details event)
+ nil))
+
+ (defun hide-details (event)
+ (ps:chain ($ "div.details")
+ (remove)))
+
(defun draw-icon (icon)
(when (= 0 (ps:@ icon coordinates 2))
(let ((id (coordinate-id (ps:@ icon coordinates))))
(setf (ps:@ icon old-html)
(ps:chain ($ id)
(html)))
+ (ps:chain ($ id)
+ (mouseover
+ (lambda (event)
+ (show-details event icon)))
+ (mouseout
+ (lambda (event)
+ (hide-details event))))
(ps:chain ($ id)
@StrmSrfr

StrmSrfr Jan 15, 2012

I think we only need one chain here?

(html (ps:@ icon html))))))

0 comments on commit 13ea64c

Please sign in to comment.