update to tooltips

data/clock.js

@@ -159,8 +159,8 @@ function onConnection(connection){
         'data-content-type': connection.contentType,
         'data-how-many': 1
     });
-    g.onmouseenter = showTooltip;
-    g.onmouseleave = hideTooltip;
+    g.onmouseenter = tooltip.show;
+    g.onmouseleave = tooltip.hide;
     var x = connectionIdx * 10;
     var y = 0;
     g.appendChild(svg('circle', {

data/index.html

@@ -74,8 +74,9 @@
     </div>
     <script src="events.js"></script>
     <script src="collusion.js"></script>
-    <script src="ui.js"></script>
+    <script src="svgdataset.js"></script>
     <script src="tooltip.js"></script>
+    <script src="ui.js"></script>
     <!-- Visualizations -->
     <script src="clock.js"></script>
 </body>

data/svgdataset.js

@@ -0,0 +1,42 @@
+(function(global){
+
+function dataAttrToKey(attr){
+    return attr.slice(5).split('-').map(function(part, index){
+        if (index){
+            return part[0].toUpperCase() + part.slice(1);
+        }
+        return part;
+    }).join('');
+}
+
+function dataKeyToAttr(key){
+    return 'data-' + key.replace(/([A-Z])/, '-$1').toLowerCase();
+}
+
+function svgdataset(elem){
+    // work around the fact that SVG elements don't have dataset attributes
+    var ds = function(key, value){
+        if (value === undefined){
+            // act as getter
+            return JSON.parse(elem.getAttribute(dataKeyToAttr(key)));
+        }else{
+            elem.setAttribute(dataKeyToAttr(key), JSON.stringify(value));
+        }
+    }
+    // Create read-only shortcuts for convenience
+    Array.prototype.forEach.call(elem.attributes, function(attr){
+        if (attr.name.startsWith('data-')){
+            try{
+                ds[dataAttrToKey(attr.name)] = JSON.parse(attr.value);
+            }catch(e){
+                ds[dataAttrToKey(attr.name)] = attr.value;
+                console.error('unable to parse %s', attr.value);
+            }
+        }
+    });
+    return ds;
+}
+
+global.svgdataset = svgdataset;
+
+})(this);

data/tooltip.js

@@ -1,4 +1,4 @@
-(function(){
+(function(global){
 
 var tooltipTimer;
 
@@ -10,13 +10,8 @@ function showTooltip(event){
     tooltip.innerHTML = event.target.getAttribute('data-target');
     var rect = event.target.getClientRects()[0];
     var tooltipWidth = tooltip.offsetWidth;
-    // console.log('rect: %o, width: %s', rect, tooltipWidth);
     tooltip.style.top = (rect.top - 60) + 'px';
     tooltip.style.left = (rect.left + (rect.width / 2) - (tooltipWidth / 2)) + 'px';
-    // PLACEHOLDER (FOR DEBUGGING)
-    // placeholder.style.left = rect.left + 'px';
-    // placeholder.style.top = rect.top + 'px';
-    // placeholder.style.border = '1px solid red';
     return false;
 }
 
@@ -33,11 +28,14 @@ function timeoutTooltip(){
 }
 
 function hideTooltip(event){
-    // console.log('Hide tooltip for %s: %s', event.target.tagName, event.target.getAttribute('data-target'));
-    // tooltip.style.display = 'none';
-    // placeholder.style.border = '0';
     setTooltipTimeout();
     return false;
 }
 
-})();
+global.tooltip = {
+    show: showTooltip,
+    hide: hideTooltip
+};
+
+})(this);
+