Permalink
Browse files

binding, CSS, and test page for title tips XBL

  • Loading branch information...
Jason Johnston
Jason Johnston committed Dec 21, 2005
1 parent 93fe0dd commit 5b7cd1a0b614c324def4b2fafc094439a9e75ade
Showing with 116 additions and 25 deletions.
  1. +27 −0 TitleTip-test.html
  2. +19 −0 TitleTip.css
  3. +70 −25 TitleTip.xml
View
@@ -0,0 +1,27 @@
+<html>
+<head>
+ <style type="text/css">
+ @import url(TitleTip.css);
+
+ html, body {font:11px sans-serif;}
+ </style>
+ <script type="text/javascript" src="XBL.js"></script>
+</head>
+<body>
+
+ <h1>Test Title Tips</h1>
+
+ <p>
+ This is a bunch of text blah blah blah. This
+ <a href="#" title="This link goes to nowhere.">link</a>
+ should have a title-tip. <acronym title="So Should This Acronym">SSTA</acronym>.
+ </p>
+
+ <p title="This entire paragraph will have a very long titletip. This is to test what will happen when there is a lot of text within a title attribute on an element. It should wrap as necessary to show all the content without scrolling.">This entire paragraph will have a very long titletip.</p>
+
+ <p>This will be a case of nested titled elements: <a href="#" title="outside element">The following words are <strong title="inside element">strongly emphasized</strong> for your convenience.</a></p>
+
+ <p style="position:absolute; top:800px; left:1000px;">forcing scrolling</p>
+
+</body>
+</html>
View
@@ -0,0 +1,19 @@
+*[title] {-moz-binding:url(TitleTip.xml#TitledElement);}
+
+.title-tip-popup {
+ -moz-binding:url(TitleTip.xml#TitleTipPopup);
+ display:none;
+ position:fixed;
+ top:0; left:0;
+ width:250px;
+ color:#FFF; text-decoration:underline overline;
+}
+
+.title-tip-popup-inner {
+ display:block;
+ border:1px solid;
+ padding:.5em;
+ font-weight:normal;
+ color:#000;
+ background:#FFF;
+}
View
@@ -1,39 +1,84 @@
<?xml version="1.0"?>
-<bindings xmlns="http://www.mozilla.org/xbl">
- <binding id="PopupBase">
- <implementation>
- <constructor>
- </constructor>
- </implementation>
- <handlers>
- <handler event="mousedown" action="event.stopPropagation();" />
- </handlers>
- </binding>
+<bindings xmlns="http://www.mozilla.org/xbl"
+ xmlns:html="http://www.w3.org/1999/xhtml">
- <binding id="TitleTip" extends="#PopupBase">
+ <binding id="TitledElement">
<implementation>
- <field name="type">"title-tip"</field>
-
<constructor>
+ var txt = document.createTextNode(this.title);
+ this.getPopup().appendChild(txt);
</constructor>
+
+ <method name="getPopup">
+ <body>
+ return document.getAnonymousNodes(this)[0];
+ </body>
+ </method>
</implementation>
- </binding>
-
- <binding id="TitledElement">
- <implementation>
- <field name="titleTipPopup" />
- </implementation>
+
<handlers>
<handler event="mouseover">
- var pop = this.titleTipPopup = document.createElement("div");
- pop.className = "title-tip";
- document.body.appendChild(pop);
+ this.getPopup().show();
+ this._origTitle = this.title;
+ this.title = "";
+ event.stopPropagation();
</handler>
+
<handler event="mouseout">
- var pop = this.titleTipPopup;
- if(pop) document.body.removeChild(pop);
- this.titleTipPopup = null;
+ this.getPopup().hide();
+ this.title = this._origTitle;
+ </handler>
+
+ <handler event="mousemove">
+ this.getPopup().update(event);
</handler>
</handlers>
+
+ <content>
+ <html:span class="title-tip-popup" />
+ <children />
+ </content>
+ </binding>
+
+ <binding id="TitleTipPopup">
+ <implementation>
+ <method name="show">
+ <body>
+ this.style.display = "block";
+ </body>
+ </method>
+ <method name="hide">
+ <body>
+ this.style.display = "none";
+ </body>
+ </method>
+ <method name="update">
+ <parameter name="event" />
+ <body>
+ var thisRef = this;
+ function length(prop) {
+ return parseFloat(getComputedStyle(thisRef, null).getPropertyValue(prop));
+ }
+
+ var x = event.clientX + 12;
+ var y = event.clientY + 12;
+ var w = length("width");
+ var h = length("height");
+
+ var over;
+ if((over = x + w - document.body.clientWidth) > 0) x -= over;
+ if((over = y + h - document.body.clientHeight) > 0) y -= over;
+
+ this.style.left = x + "px";
+ this.style.top = y + "px";
+ </body>
+ </method>
+ </implementation>
+
+ <content>
+ <html:span class="title-tip-popup-inner">
+ <children />
+ </html:span>
+ </content>
</binding>
</bindings>

0 comments on commit 5b7cd1a

Please sign in to comment.